ci: set up vitest (#41)

Trying out Vitest to start adding test coverage. This PR adds vitest,
scripts for running and watching tests, a simple example test, and adds
a Test step to ci workflow.

.github/workflows/ci.yaml

@@ -14,6 +14,15 @@ jobs:
       - run: npm i
       - run: npm run lint
 
+  test:
+    name: Test
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v3
+      - uses: actions/setup-node@v3
+      - run: npm i
+      - run: npm run test
+
   build:
     name: Build
     runs-on: ubuntu-latest

components/StatusIcon.test.tsx

@@ -0,0 +1,24 @@
+import { expect, test } from "vitest";
+import { render } from "@testing-library/react";
+import { StatusIcon } from "./StatusIcon";
+
+test("Renders green dot for active status", () => {
+  const { container } = render(<StatusIcon status="active" />);
+  console.log(container.firstChild.className);
+  expect(container.firstChild.className.includes("green-600")).toBeTruthy();
+});
+
+test("Renders red dot for error status", () => {
+  const { container } = render(<StatusIcon status="error" />);
+  expect(container.firstChild.className.includes("red-500")).toBeTruthy();
+});
+
+test("Renders yellow dot for any other string", () => {
+  const { container } = render(<StatusIcon status="pending" />);
+  expect(container.firstChild.className.includes("yellow-500")).toBeTruthy();
+});
+
+test("Renders gray dot for empty string", () => {
+  const { container } = render(<StatusIcon status="" />);
+  expect(container.firstChild.className.includes("slate-300")).toBeTruthy();
+});

components/StatusIcon.tsx

@@ -9,6 +9,8 @@ export const StatusIcon: FC<{ status: string; className?: string }> = ({
     clr = "green-600";
   } else if (status === "error") {
     clr = "red-500";
+  } else if (status === "") {
+    clr = "slate-300";
   }
 
   return <span className={`text-${clr} ${className}`}>⏺</span>;