moex-vibe/docs/features/frontend-test-hygiene/plan.md

Frontend Test Hygiene Implementation Plan

For agentic workers: REQUIRED SUB-SKILL: Use superpowers:subagent-driven-development (recommended) or superpowers:executing-plans to implement this plan task-by-task. Steps use checkbox (- [ ]) syntax for tracking.

Goal: Simplify and normalize the frontend test layer so helpers stay minimal, conventions stay consistent, and existing coverage remains stable.

Architecture: This is a test-layer cleanup pass. First inspect the shared test helpers and conventions, then remove or narrow anything that is too broad or duplicated, then confirm that the remaining test setup still supports the existing suites. No new test platform is introduced and no product behavior should change.

Tech Stack: Vitest, Testing Library, MSW, jsdom, existing frontend test helpers and conventions.

---

Task 1: Inspect the current test helpers

Files:

• Read: apps/frontend/src/test/setup.ts

• Read: apps/frontend/src/test/server.ts

• Read: apps/frontend/src/test/handlers.ts

• Read: apps/frontend/src/test/test-utils.tsx

• Read: apps/frontend/src/test/factories.ts

• Read: apps/frontend/vitest.config.ts

• Read: docs/features/frontend-test-coverage/spec.md

• Step 1: Inventory shared helpers and wrappers

List what each shared test file does and whether it is still minimal or has grown into broad utility code.

• Step 2: Identify duplicated conventions

Check whether conventions around QueryClient, MSW, router setup, and auth/session wrapping are repeated in multiple places.

Task 2: Narrow the helpers

Files:

• Modify: apps/frontend/src/test/test-utils.tsx

• Modify: apps/frontend/src/test/factories.ts

• Modify: apps/frontend/src/test/handlers.ts only if the defaults are too broad

• Modify: any test file that is currently compensating for an overly broad helper

• Step 1: Keep render helpers focused

Trim renderWithProviders or related wrappers down to the smallest shared surface needed by the existing test suite.

• Step 2: Reduce helper duplication

Move one-off setup back into the tests that need it instead of keeping it in a global helper.

• Step 3: Keep shared data factories minimal

Ensure factory data only covers the fields that are actually shared across multiple tests.

Task 3: Normalize conventions

Files:

• Modify: apps/frontend/vitest.config.ts only if the config still carries unnecessary test defaults

• Modify: apps/frontend/src/test/setup.ts

• Modify: docs that describe frontend testing conventions

• Modify: apps/docs/docs/frontend/overview.md or the most relevant frontend test docs page

• Step 1: Keep the test setup explicit

Make sure global setup only contains the shared primitives that every test needs.

• Step 2: Align docs with the actual test strategy

Describe the current conventions in docs so new tests follow the same pattern instead of inventing local helpers.

Task 4: Verify coverage remains stable

Files:

• Read: changed test helper files and docs

• Test: existing frontend test suite

• Step 1: Run the frontend test suite

Run:

npm run test -w apps/frontend

Expected: existing tests continue to pass after the hygiene cleanup.

• Step 2: Run lint and build

Run:

npm run lint -w apps/frontend
npm run build -w apps/frontend

Expected: both commands pass and no runtime behavior has changed.