Frontend approval/snapshot testing infrastructure

[kvithayathil]

Problem

The frontend has no approval/golden-master snapshot testing. Components can change rendering output without detection. The backend already has approvaltests and pytest-approvaltests — the frontend has nothing equivalent.

Superficial noise (Svelte scoped class hashes, dynamic IDs, attribute ordering, timestamps) makes naive HTML snapshot testing brittle. We need a testing approach that ignores cosmetic noise while catching meaningful regressions.

Proposal

Implement approval testing using Vitest's native snapshot capabilities (v4.1.4+). No new test framework dependencies needed — we already have Vitest, @vitest/browser, and Playwright installed.

Three complementary strategies:

1. ARIA Snapshots (primary — semantic structure)

• Capture the accessibility tree, not raw HTML
• Immune to CSS class changes, attribute ordering, DOM restructuring
• Regex patterns for dynamic content, preserved across --update
• Catches accessibility regressions as a side benefit

2. HTML Snapshots with Scrubber (secondary — exact markup)

• Custom scrubHtml() utility strips noisy attributes before comparison
• toMatchFileSnapshot() for readable .html snapshot files
• For cases where exact DOM structure matters

3. Screenshot Visual Regression (future)

• toMatchScreenshot() in browser mode
• Pixel-level comparison, higher maintenance, defer to later phase

Sub-Issues

• Set up Vitest browser mode for approval testing #116 — Set up Vitest browser mode for approval testing
• Build HTML scrubber utility for noise-free component snapshots #117 — Build HTML scrubber utility for noise-free component snapshots
• Implement ARIA snapshot approval tests for key UI components #118 — Implement ARIA snapshot approval tests for key UI components

Execution Order

1. Set up Vitest browser mode for approval testing #116 (browser mode) — prerequisite for ARIA + screenshot tests
2. Build HTML scrubber utility for noise-free component snapshots #117 (scrubber) — can parallel with Set up Vitest browser mode for approval testing #116, works in jsdom
3. Implement ARIA snapshot approval tests for key UI components #118 (ARIA tests) — depends on Set up Vitest browser mode for approval testing #116

Why Not Approvals.NodeJS

Researched Approvals.NodeJS and approvaltests.Python (which we use in backend). For the frontend, Vitest 4.1.4+ provides equivalent functionality natively:

Feature	Approvals.NodeJS	Vitest Native
Scrubbers	Custom functions	Custom Domain Adapter API
ARIA snapshots	No	Built-in
Screenshot comparison	No	Built-in
Regex pattern preservation	No	Yes (--update preserves patterns)
Reporter/diff integration	Custom reporters	Built-in (vscode, gitdiff, etc.)
New dependency	Yes (approvals)	No

Impact

• Quality: Catch unintended rendering changes in PR review
• Accessibility: ARIA snapshots double as a11y regression tests
• DX: Inline snapshots visible in PR diff, u to update in watch mode
• Zero new deps: Everything comes from Vitest 4.1.4+