test(HAI-014): complete Step 2 — add TaskCard tests and vitest config

packages/dashboard/app/components/TaskCard.test.tsx

@@ -0,0 +1,66 @@
+import { describe, it, expect, vi } from "vitest";
+import { render, screen } from "@testing-library/react";
+import { TaskCard } from "./TaskCard";
+import type { Task } from "@hai/core";
+
+// Mock lucide-react to avoid SVG rendering issues in test env
+vi.mock("lucide-react", () => ({
+  Link: () => null,
+  Clock: () => null,
+}));
+
+function makeTask(overrides: Partial<Task> = {}): Task {
+  return {
+    id: "HAI-001",
+    title: "Test task",
+    column: "in-progress",
+    status: undefined as any,
+    steps: [],
+    dependencies: [],
+    description: "",
+    ...overrides,
+  } as Task;
+}
+
+const noop = () => {};
+
+describe("TaskCard", () => {
+  it("renders the card ID text", () => {
+    render(<TaskCard task={makeTask()} onOpenDetail={noop} addToast={noop} />);
+    expect(screen.getByText("HAI-001")).toBeDefined();
+  });
+
+  it("renders the status badge when task.status is set", () => {
+    render(
+      <TaskCard
+        task={makeTask({ status: "executing" })}
+        onOpenDetail={noop}
+        addToast={noop}
+      />,
+    );
+    expect(screen.getByText("executing")).toBeDefined();
+  });
+
+  it("renders the status badge after the card ID in DOM order", () => {
+    const { container } = render(
+      <TaskCard
+        task={makeTask({ status: "executing" })}
+        onOpenDetail={noop}
+        addToast={noop}
+      />,
+    );
+    const cardId = container.querySelector(".card-id")!;
+    const badge = container.querySelector(".card-status-badge")!;
+    expect(cardId).toBeDefined();
+    expect(badge).toBeDefined();
+    // Badge should be the next sibling of card-id
+    expect(cardId.nextElementSibling).toBe(badge);
+  });
+
+  it("does not render a status badge when task.status is falsy", () => {
+    const { container } = render(
+      <TaskCard task={makeTask({ status: undefined as any })} onOpenDetail={noop} addToast={noop} />,
+    );
+    expect(container.querySelector(".card-status-badge")).toBeNull();
+  });
+});

packages/dashboard/package.json

@@ -21,10 +21,13 @@
     "remark-gfm": "^4.0.1"
   },
   "devDependencies": {
+    "@testing-library/jest-dom": "^6.9.1",
+    "@testing-library/react": "^16.3.2",
     "@types/express": "^5.0.0",
     "@types/react": "^19.0.0",
     "@types/react-dom": "^19.0.0",
     "@vitejs/plugin-react": "^4.3.0",
+    "jsdom": "^29.0.1",
     "typescript": "^5.7.0",
     "vite": "^6.0.0",
     "vitest": "^4.1.1"

packages/dashboard/vitest.config.ts

@@ -0,0 +1,16 @@
+import { defineConfig } from "vitest/config";
+import react from "@vitejs/plugin-react";
+import { resolve } from "node:path";
+
+export default defineConfig({
+  plugins: [react()],
+  resolve: {
+    alias: {
+      "@hai/core": resolve(__dirname, "../core/src/types.ts"),
+    },
+  },
+  test: {
+    environment: "jsdom",
+    include: ["app/**/*.test.{ts,tsx}"],
+  },
+});