test two more spans

src/components/SpanBoolean.vue

@@ -1,6 +1,6 @@
 <template>
   <span
-    ><b :style="'color:' + color">{{ text }}</b></span
+    ><b :style="'color:' + color" data-testid="booleanSpan">{{ text }}</b></span
   >
 </template>
 

src/components/SpanDate.vue

@@ -1,5 +1,5 @@
 <template>
-  <span>{{ dateString }}</span>
+  <span data-testid="dateSpan">{{ dateString }}</span>
 </template>
 
 <script lang="ts" setup>

src/tests/components/SpanBoolean.test.ts

@@ -0,0 +1,23 @@
+import { render, screen } from "@testing-library/vue";
+import { expect, test } from "vitest";
+import "@testing-library/jest-dom/vitest";
+import SpanBoolean from "@/components/SpanBoolean.vue";
+
+const green = "rgb(0, 128, 0)";
+const red = "rgb(255, 0, 0)";
+
+test("test true", async () => {
+  render(SpanBoolean, { props: { value: true } });
+  const booleanSpan = screen.getByTestId<HTMLElement>("booleanSpan");
+  expect(booleanSpan.textContent).toEqual("yes");
+  const styles = getComputedStyle(booleanSpan);
+  expect(styles.color).toBe(green);
+});
+
+test("test false", async () => {
+  render(SpanBoolean, { props: { value: false } });
+  const booleanSpan = screen.getByTestId<HTMLElement>("booleanSpan");
+  expect(booleanSpan.textContent).toEqual("no");
+  const styles = getComputedStyle(booleanSpan);
+  expect(styles.color).toBe(red);
+});

src/tests/components/SpanDate.test.ts

@@ -0,0 +1,18 @@
+import { render, screen } from "@testing-library/vue";
+import { expect, test } from "vitest";
+import "@testing-library/jest-dom/vitest";
+import SpanDate from "@/components/SpanDate.vue";
+
+const date = new Date(Date.parse("2020-03-04"));
+
+test("test date locale formatting", async () => {
+  render(SpanDate, { props: { date: date } });
+  const dateSpan = screen.getByTestId<HTMLSpanElement>("dateSpan");
+  expect(dateSpan.textContent).toEqual("03/04/2020");
+});
+
+test("test date empty no error", async () => {
+  render(SpanDate);
+  const dateSpan = screen.getByTestId<HTMLSpanElement>("dateSpan");
+  expect(dateSpan).toBeEmptyDOMElement();
+});