open-legal-products/mike#230: [Testing 07] test: component and hook unit tests for the web app

[Testing 07] test: component and hook unit tests for the web app

✅ merged · #230 · open-legal-products/mike ← amal66/mike · opened 3mo ago by amal66 · merged 3mo ago by willchen96 · +14,121-9,098 across 15 files · ↗ on GitHub

From the PR description

Summary

Component and hook unit tests for the web app (30 tests, jsdom + testing-library), ported from the amal66 fork (reference index #205) and adapted to the current UI. Stacks on #228 (vitest harness).

Changes

Tests: FileTypeIcon (11), pill-button (8), button (4), cite-button (3), useSmoothedReveal (3), TRTable (1, adapted - see below).
frontend/vitest.config.mts - jsdom environment, @/ alias mirroring tsconfig.json, setup file, dummy NEXT_PUBLIC_SUPABASE_* test env (lib/supabase.ts creates its client at module load, and TRTable's import graph reaches it; config-only, no production change).
frontend/vitest.setup.ts - jest-dom matchers.
Dev-dependencies: @testing-library/react (React 19-compatible), @testing-library/jest-dom, @testing-library/user-event, @vitejs/plugin-react, jsdom.

Why

No component in the app has a test today; UI refactors (like the recent surface refresh) currently rely on manual checking alone. These cover the shared primitives most other components compose.

Adaptation notes (accuracy over volume)

The fork's TRTable test asserted table ARIA roles (role="table", columnheader/rowheader). The TRTable here renders a div grid with none of those semantics, so the test asserts rendered content instead. The missing table semantics are a real accessibility gap worth its own fix - flagging rather than silently testing around it.
Dropped entirely because their subjects don't exist in this repo: HistoryDropdown, applyAssistantStreamEvent, react-query hook tests, toast, and the stream-parser tests (those functions are module-private here).

Testing

npm test --prefix frontend - 7 files, 38/38 passing.
npx tsc --noEmit in frontend/ - clean.

Includes #228's commit as its base until proper stacking is possible - review the top commit only.

🤖 Generated with Claude Code

Our analysis

Add frontend component test coverage — read the full analysis →

Think the analysis missed something the PR description covers?

Commits in this PR (2)

SHA	Subject	Author	Date
`4039b949`	test: minimal vitest harness for backend and frontend	QA Runner	2026-07-20	↗ GitHub
commit body Ported from amal66/mike#24 onto current main; lockfiles regenerated against this tree. Adds vitest as a dev dependency with a `test` script in both packages, excludes test files from the backend tsc build, and seeds one suite per package (backend: downloadTokens, 12 tests; frontend: cn() utils, 8 tests). Verified locally: backend 12/12, frontend 8/8 passing. Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
`a29e67de`	test: component and hook unit tests for the web app	QA Runner	2026-07-20	↗ GitHub
commit body Ported from the amal66 fork (index: Open-Legal-Products/mike#205), adapted to this repo's frontend/ layout and current component behavior. Adds the jsdom + testing-library harness on top of the existing vitest setup: vitest.config.mts (jsdom environment, @/ alias mirroring tsconfig paths, dummy Supabase env for modules that build a client at import time) and vitest.setup.ts (jest-dom matchers). New devDependencies: jsdom, @testing-library/react, @testing-library/jest-dom, @testing-library/user-event, @vitejs/plugin-react. Ported suites (30 new tests): - FileTypeIcon.test.tsx (11) - fileTypeKind mapping + icon rendering - TRTable.test.tsx (1) - header/row render smoke test; the fork's ARIA role assertions (table/columnheader, "Tabular review" label) target fork-only markup - this repo's grid is div-based, so the test asserts rendered content instead - button.test.tsx (4), pill-button.test.tsx (8), cite-button.test.tsx (3) - useSmoothedReveal.test.ts (3) - passes against this repo's early-return snap behavior unchanged Dropped (subjects don't exist here): - HistoryDropdown.test.tsx - no tr-chat-panel/HistoryDropdown component - applyAssistantStreamEvent.test.ts - no such module - useProjectsQuery/useTabularReviewsQuery/useWorkflowsQuery tests - react-query is fork-only - lib/toast.test.ts - no frontend/src/lib/toast.ts - useAssistantChat.parsers.test.ts - the parser helpers exist inside useAssistantChat.ts but are not exported, and the fork's extracted module doesn't exist here Verified: frontend npm test 38/38 passing (30 new + 8 pre-existing cn() utils tests); npx tsc --noEmit clean. Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>

Capture this PR into my fork

Download a Markdown prompt that tells Claude how to port every commit in this PR into your working tree. Run it via claude -p < capture-pull-230.md from inside the repo you want the changes in.

⬇ Download capture-pull-230.md