[3/7] Add frontend test infrastructure (Vitest + Testing Library)

[alex-clickhouse]

Stacked on #273 → #272 → main. The diff here is only the test harness.

Why

web/ has no test tooling and zero test files. Every frontend change is verified by tsc -b and vite build — which prove code compiles and bundles, and say nothing about whether it behaves.

That gap is widest for exactly the kind of code #273 just added. A focus trap, Escape precedence against document-level handlers, dialog stacking, mousedown-vs-click — none of it is reachable by a type checker.

It caught a bug immediately

Writing the Modal specs surfaced a real defect that tsc and vite build were both happy with:

The body scroll lock read modalStack.length to decide if it was the last dialog out. React runs effect cleanups in declaration order, and the scroll-lock effect is declared before the one that unregisters from the stack — so the closing dialog was still in the stack, the length was never 0, and overflow: hidden was never lifted. Closing any dialog left the page unscrollable.

Fixed in be57e5f on the #273 branch, so that PR doesn't ship the bug. The page looks completely normal until you try to scroll it, which is the sort of thing a manual pass misses and a spec doesn't.

What's here

• vitest + jsdom + @testing-library/{react,user-event,jest-dom} as dev dependencies
• test block in vite.config.ts (shares the existing resolve/plugin config — no second config file to drift)
• src/test/setup.ts — jest-dom matchers, cleanup between tests, and two jsdom shims
• npm test / npm run test:watch
• npm test added to the existing Frontend build (Vite) CI job
• 19 specs for Modal covering portal target, ARIA semantics, Escape (including that it does not reach app-level handlers), backdrop dismissal, the drag-release-outside case, focus entry/wrap/restore, stacked-dialog Escape isolation, and scroll-lock refcounting

The two jsdom shims are load-bearing

Both live in setup.ts with comments, but they're the sort of thing worth flagging in review:

1. requestAnimationFrame — jsdom doesn't implement it, and the Modal defers its initial focus through it.
2. offsetParent — jsdom gives every element no layout, so offsetParent is null for everything. The focus trap filters candidates on exactly that. Without the shim the trap would find nothing focusable and every trap assertion would pass vacuously — worse than having no tests, because it looks like coverage.

Notes

• Scoped include to src/**/*.test.{ts,tsx}; the default glob walks node_modules.
• css: false — specs assert behaviour and ARIA, never Tailwind classes.
• Installing added 137 packages. npm ci in CI is cached on web/package-lock.json, and the test step adds ~2s to the job.
• I did not backfill specs for any pre-existing component. This PR is the harness plus one worked example; retrofitting coverage is a separate conversation.

Testing

• npm test — 19 passed
• npx tsc -b — clean
• npm run build — clean
• npx eslint on both new files — clean

🤖 Generated with Claude Code

[Copilot]

Pull request overview

Adds a frontend testing harness for the web/ app using Vitest + jsdom + Testing Library, and introduces an initial worked example test suite for the shared Modal component. This closes the current gap where frontend changes are only validated via typechecking and bundling.

Changes:

• Configure Vitest in vite.config.ts (jsdom env, setup file, scoped test glob, CSS disabled).
• Add global test setup shims and cleanup in src/test/setup.ts.
• Add a comprehensive Modal interaction test suite and wire npm test into CI.

Reviewed changes

Copilot reviewed 5 out of 6 changed files in this pull request and generated 2 comments.

Show a summary per file

File	Description
web/vite.config.ts	Adds Vitest configuration alongside existing Vite config to share resolve/plugins.
web/src/test/setup.ts	Establishes global test setup (jest-dom, cleanup, jsdom shims).
web/src/components/ui/Modal.test.tsx	Adds behavioral specs for the Modal component (dismissal, focus, stacking, scroll lock).
web/package.json	Adds test scripts and Vitest/Testing Library/jsdom devDependencies.
web/package-lock.json	Locks new testing dependencies and transitive packages.
.github/workflows/ci.yml	Runs npm test in the existing frontend CI job.

Files not reviewed (1)

• web/package-lock.json: Generated file

---

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.