[Test] Frontend Test Foundation — Master Ticket

[realproject7]

Summary

Establish automated frontend testing for PlotLink. Currently only 2 unit tests exist (lib/content.test.ts, lib/filebase.test.ts). No component tests, no E2E tests, no visual regression.

Phases

Phase 1: Component Tests (Vitest + Testing Library) — #427

• Vitest already installed (vitest@3.2.4, vitest.config.ts exists)
• Add @testing-library/react + @testing-library/jest-dom
• Test: TradingWidget, FilterBar, StoryCard, StoryGrid, NavBar

Phase 2: E2E Smoke Tests (Playwright) — #428

• Install Playwright, configure for Next.js
• Test critical flows: home page, create storyline, story detail, navigation

Phase 3: Chrome DevTools MCP + Visual Regression — #429

• Set up chrome-devtools-mcp for agent-driven visual inspection
• Add Playwright visual regression snapshots (mobile + desktop)
• Performance monitoring (Lighthouse, network analysis)

Priority

After Zap integration (#30) is complete.

Acceptance Criteria

• Phase 1: Component tests cover 5 key components ([Test] Phase 1: Component Tests (Vitest + Testing Library) #427)
• Phase 2: E2E tests verify 4 critical user flows ([Test] Phase 2: E2E Smoke Tests (Playwright) #428)
• Phase 3: Chrome DevTools MCP configured, visual regression in CI ([Test] Phase 3: Chrome DevTools MCP + Visual Regression #429)
• All tests run in CI

[realproject7]

All 3 phases complete: #427 component tests, #428 E2E, #429 visual regression.