test(coverage): bootstrap vitest unit infra and add tests at 90%+ per file (#1245) (#1269)

* test(coverage): bootstrap vitest unit infra and add tests at 90%+ per file (#1245)

Establishes the unit-test runtime AGENTS.md mandates: a vitest "unit"
project alongside the existing storybook project, RTL + jest-dom +
happy-dom, a Mantine-aware render helper, and a 90%-line per-file
coverage gate enforced by CI. Adds 66 test files covering all 62
components under elements/groups/screens/views, plus core/mcp and
clients/web/src/utils. Total: 577 tests, 98.7% line coverage globally.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>

* test(coverage): address PR #1269 review feedback

- AGENTS.md: correct coverage gate description (lines ≥ 90, statements ≥ 85,
  functions ≥ 80, branches ≥ 50) with rationale for the relaxed branch
  threshold
- InspectorView.test.tsx: document what the Math.random() mock values
  (0.1 / 0.99) control vs. STUB_SUCCESS_RATE in InspectorView.tsx
- vite.config.ts / tsconfig.test.json: drop unused `globals: true` and the
  `vitest/globals` type now that every test file imports describe/it/expect/vi
  explicitly; manual `afterEach(cleanup)` in setup.ts remains required because
  testing-library auto-cleanup relies on globalThis.afterEach

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>

---------

Co-authored-by: Claude Opus 4.7 (1M context) <noreply@anthropic.com>

Author: cliffhall

.github/workflows/main.yml

@@ -35,5 +35,6 @@ jobs:
         working-directory: ./clients/web
         run: npm run build
 
-#      - name: Run tests
-#        run: npm run test
+      - name: Run tests with coverage
+        working-directory: ./clients/web
+        run: npm run test:coverage

AGENTS.md

@@ -64,6 +64,10 @@ All work should be driven by items on the project board.
 - Ensure all code has corresponding tests
 - Ensure test coverage for each file is at least 90%
 - In unit tests that expect error output, suppress it from the console
+- Run unit tests with `npm run test` (or `npm run test:watch` during development) from `clients/web/`
+- Run `npm run test:coverage` to verify the per-file gate: lines ≥ 90, statements ≥ 85, functions ≥ 80, branches ≥ 50 (CI enforces this gate). Branches is intentionally relaxed because Mantine portal/media-query branches are not exercisable under happy-dom; new business-logic branches should still be covered.
+- Test files live alongside the source as `<Name>.test.tsx` (or `.test.ts` for non-React modules)
+- Use `renderWithMantine` from `src/test/renderWithMantine.tsx` to render components — it wraps in `MantineProvider` with the project theme
 
 ### Responding to Code Reviews
 - When asked to respond to a code review of a PR,

clients/web/.gitignore

@@ -11,6 +11,7 @@ node_modules
 dist
 dist-ssr
 storybook-static
+coverage
 *.local
 
 # Editor directories and files

clients/web/eslint.config.js

@@ -8,7 +8,7 @@ import reactRefresh from 'eslint-plugin-react-refresh'
 import tseslint from 'typescript-eslint'
 import { defineConfig, globalIgnores } from 'eslint/config'
 
-export default defineConfig([globalIgnores(['dist', 'storybook-static']), {
+export default defineConfig([globalIgnores(['dist', 'storybook-static', 'coverage']), {
   files: ['**/*.{ts,tsx}'],
   extends: [
     js.configs.recommended,
@@ -20,4 +20,11 @@ export default defineConfig([globalIgnores(['dist', 'storybook-static']), {
     ecmaVersion: 2020,
     globals: globals.browser,
   },
+}, {
+  // Test setup files re-export utilities and mix components with helpers — the
+  // react-refresh rule does not apply.
+  files: ['src/test/**/*.{ts,tsx}', 'src/**/*.test.{ts,tsx}'],
+  rules: {
+    'react-refresh/only-export-components': 'off',
+  },
 }, ...storybook.configs["flat/recommended"]])

clients/web/package-lock.json

@@ -9,10 +9,14 @@
     "lint": "eslint .",
     "format": "prettier --write src",
     "format:check": "prettier --check src",
-    "validate": "npm run format:check && npm run lint && npm run build",
+    "validate": "npm run format:check && npm run lint && npm run build && npm run test:coverage",
     "preview": "vite preview",
     "storybook": "storybook dev -p 6006",
-    "build-storybook": "storybook build"
+    "build-storybook": "storybook build",
+    "test": "vitest run --project=unit",
+    "test:watch": "vitest --project=unit",
+    "test:coverage": "vitest run --project=unit --coverage",
+    "test:storybook": "vitest run --project=storybook"
   },
   "dependencies": {
     "@emotion/react": "^11.14.0",
@@ -35,12 +39,16 @@
     "@storybook/addon-onboarding": "^10.2.19",
     "@storybook/addon-vitest": "^10.2.19",
     "@storybook/react-vite": "^10.2.19",
+    "@testing-library/jest-dom": "^6.9.1",
+    "@testing-library/react": "^16.3.2",
+    "@testing-library/user-event": "^14.6.1",
     "@types/node": "^24.12.0",
     "@types/react": "^19.2.14",
     "@types/react-dom": "^19.2.3",
     "@vitejs/plugin-react": "^6.0.0",
     "@vitest/browser-playwright": "^4.1.0",
     "@vitest/coverage-v8": "^4.1.0",
+    "happy-dom": "^20.9.0",
     "eslint": "^9.39.4",
     "eslint-plugin-react-hooks": "^7.0.1",
     "eslint-plugin-react-refresh": "^0.5.2",

clients/web/package.json

@@ -0,0 +1,37 @@
+import { describe, it, expect } from "vitest";
+import { renderWithMantine, screen } from "../../../test/renderWithMantine";
+import { AnnotationBadge } from "./AnnotationBadge";
+
+describe("AnnotationBadge", () => {
+  it("renders audience labels", () => {
+    renderWithMantine(<AnnotationBadge facet="audience" value={["user"]} />);
+    expect(screen.getByText("audience: user")).toBeInTheDocument();
+  });
+
+  it("joins multiple audience entries", () => {
+    renderWithMantine(
+      <AnnotationBadge facet="audience" value={["user", "assistant"]} />,
+    );
+    expect(screen.getByText("audience: user, assistant")).toBeInTheDocument();
+  });
+
+  it.each([
+    [0.9, "priority: high"],
+    [0.5, "priority: medium"],
+    [0.2, "priority: low"],
+  ])("maps priority %s to %s", (value, label) => {
+    renderWithMantine(<AnnotationBadge facet="priority" value={value} />);
+    expect(screen.getByText(label)).toBeInTheDocument();
+  });
+
+  it.each([
+    ["readOnlyHint", "read-only"],
+    ["destructiveHint", "destructive"],
+    ["idempotentHint", "idempotent"],
+    ["openWorldHint", "open-world"],
+    ["longRunHint", "long-running"],
+  ] as const)("renders hint label for %s", (facet, label) => {
+    renderWithMantine(<AnnotationBadge facet={facet} value={true} />);
+    expect(screen.getByText(label)).toBeInTheDocument();
+  });
+});

clients/web/src/components/elements/AnnotationBadge/AnnotationBadge.test.tsx

@@ -0,0 +1,33 @@
+import { describe, it, expect } from "vitest";
+import { renderWithMantine, screen } from "../../../test/renderWithMantine";
+import { CapabilityItem } from "./CapabilityItem";
+
+describe("CapabilityItem", () => {
+  it("renders the supported check mark", () => {
+    renderWithMantine(<CapabilityItem capability="tools" supported />);
+    expect(screen.getByText("✓")).toBeInTheDocument();
+    expect(screen.getByText("Tools")).toBeInTheDocument();
+  });
+
+  it("renders the unsupported cross mark", () => {
+    renderWithMantine(
+      <CapabilityItem capability="prompts" supported={false} />,
+    );
+    expect(screen.getByText("✗")).toBeInTheDocument();
+    expect(screen.getByText("Prompts")).toBeInTheDocument();
+  });
+
+  it("appends the count when provided", () => {
+    renderWithMantine(
+      <CapabilityItem capability="resources" supported count={5} />,
+    );
+    expect(screen.getByText("Resources (5)")).toBeInTheDocument();
+  });
+
+  it("falls back to capability key for unknown labels", () => {
+    renderWithMantine(
+      <CapabilityItem capability={"custom" as never} supported />,
+    );
+    expect(screen.getByText("custom")).toBeInTheDocument();
+  });
+});

clients/web/src/components/elements/CapabilityItem/CapabilityItem.test.tsx

@@ -0,0 +1,46 @@
+import { describe, it, expect, vi } from "vitest";
+import { renderWithMantine, screen } from "../../../test/renderWithMantine";
+import userEvent from "@testing-library/user-event";
+import { ConnectionToggle } from "./ConnectionToggle";
+
+describe("ConnectionToggle", () => {
+  it("is unchecked when disconnected", () => {
+    renderWithMantine(
+      <ConnectionToggle status="disconnected" onToggle={() => {}} />,
+    );
+    expect(screen.getByRole("switch")).not.toBeChecked();
+  });
+
+  it("is checked when connected", () => {
+    renderWithMantine(
+      <ConnectionToggle status="connected" onToggle={() => {}} />,
+    );
+    expect(screen.getByRole("switch")).toBeChecked();
+  });
+
+  it("is checked but disabled while connecting", () => {
+    renderWithMantine(
+      <ConnectionToggle status="connecting" onToggle={() => {}} />,
+    );
+    const sw = screen.getByRole("switch");
+    expect(sw).toBeChecked();
+    expect(sw).toBeDisabled();
+  });
+
+  it("respects external disabled prop", () => {
+    renderWithMantine(
+      <ConnectionToggle status="disconnected" disabled onToggle={() => {}} />,
+    );
+    expect(screen.getByRole("switch")).toBeDisabled();
+  });
+
+  it("invokes onToggle when clicked", async () => {
+    const user = userEvent.setup();
+    const onToggle = vi.fn();
+    renderWithMantine(
+      <ConnectionToggle status="disconnected" onToggle={onToggle} />,
+    );
+    await user.click(screen.getByRole("switch"));
+    expect(onToggle).toHaveBeenCalledTimes(1);
+  });
+});