[Miodec]

Summary

Roadmap step TH1: a jsdom harness that mounts the real TestPage and test engine, types through the words input, and reads what's rendered. It's the safety net for T1 onward.

 frontend/
 ├── __tests__/
 │   ├── __harness__/
+│   │   ├── test-page.tsx            # renderTestPage / cleanupTestPage
 │   │   └── mock-static.ts           # + getLanguage reads static/languages
 │   └── components/pages/test/
+│       └── TestPage.page-spec.tsx   # starter suite, 17 specs
 ├── src/ts/dev/
+│   ├── typing-driver.ts             # typeText (moved) + compose (IME), shared with __mt
 │   ├── expose.ts                    # + the other __mt helpers, inlined
-│   └── test-helpers.ts              # only fed __mt
 └── vitest.config.ts                 # + test-page project: *.page-spec.tsx, no mock-dom

const page = await renderTestPage({ words: ["the", "fox"] });
await page.type("tx");            // keydown → beforeinput → input → keyup, then one frame
page.word(0).letters();           // [{char:"t",state:"correct"}, {char:"h",state:"incorrect"}, ...]
page.phase();                     // "ready" | "active" | "finished"
await page.advance(1000);         // fake clock; the real animejs timer ticks
page.liveStats();                 // { wpm, raw, acc, seconds }

• words gives the test known text (via custom mode); config overrides settings.
• Fake timers are on for the whole spec file and installed before anything loads, because animejs keeps the Date.now/rAF it finds on import.
• The state names (letter: untyped/correct/incorrect/extra/dead/deadCorrect, word: active/typed/error/upcoming) are what T1's data-ui-state will use. T1 then only changes how the harness finds elements; the specs stay as they are.
• *.page-spec.tsx runs in its own project without the global DOM query mocks. If the harness loads under the mocks, it throws and tells you how to name the spec.
• __mt.compose(updates) is new (documented in AGENT_BROWSER.md).
• test-helpers.ts is gone: its remaining helpers only fed __mt, so they now live in expose.ts (unexported).

Evidence

• Before: no test drove the real page and engine together.
  After: pnpm vitest run __tests__/components/pages/test/TestPage.page-spec.tsx: 17 passed. Covers start, letter states, extra letters, rendering on the next frame (not on input), space, error words, backspace (normal / mistyped word / freedom mode), stop on error, IME, live stats tick, finish in words and time modes, no state leaking between specs.
• Full frontend suite: 85 files, 1647 tests passed. Lint and typecheck clean.
• A spec named *.spec.tsx that uses the harness fails with "The test-page harness needs the real DOM: name the spec *.page-spec.tsx".
• Browser: in the dev app, __mt.setCustomText("かな the fox"), __mt.compose(["k","か"]), __mt.typeText("x\bな th") render かな and th as correct.

Merge Danger

Door: two-way

Blast Radius: tests

The only app code touched is dev-only (__mt typing helpers). The shared mock-static change gives all test projects language JSON from disk; the whole suite still passes.

🤖 Generated with Claude Code

https://claude.ai/code/session_01NZNRfGDYsGYMUTp2zYUTrv

[Copilot]

🔵 Needs a closer look

It is net-new foundational test infrastructure whose correctness hinges on intricate fake-timer/animejs/router orchestration that cannot be fully validated by static review, warranting human sign-off even though no concrete defects were found.

No open issues 🎉

What changed in this PR

Roadmap step TH1: introduces a jsdom test-page harness that mounts the real TestPage + test engine, types through the real words input (keydown/beforeinput/input/keyup, plus IME composition), advances fake timers/animation frames, and reads back semantic word/letter states, test phase, and live stats. This is the safety net that later critical-path test-page steps (T1 onward) depend on. The only app code touched is dev-only (__mt typing helpers moved to a shared module and a new compose helper).

Changes:

• New test-page vitest project (*.page-spec.tsx, no DOM mocks) plus the harness (test-page.tsx) and a 17-spec starter suite.
• Moved typeChar/typeText from dev/test-helpers.ts into new dev/typing-driver.ts and added IME compose, shared by window.__mt and the harness.
• Extended mock-static to serve language JSON from disk, and updated roadmap/spec/agent docs.

File	Description
frontend/​vitest.config.ts	Adds the test-page project scoped to *.page-spec.tsx with jsdom and no mock-dom.
frontend/​src/​ts/​dev/​typing-driver.ts	New shared module: moved typeChar/typeText and new compose (IME) driver.
frontend/​src/​ts/​dev/​test-helpers.ts	Removes the moved typing helpers; remaining imports still used.
frontend/​src/​ts/​dev/​expose.ts	Imports typeText/compose from the new driver and exposes compose on __mt.
frontend/​__tests__/​__harness__/​test-page.tsx	The harness: mounts real TestPage/engine, fake timers, mocks, state readers.
frontend/​__tests__/​components/​pages/​test/​TestPage.page-spec.tsx	Starter suite of 17 specs exercising the harness.
frontend/​__tests__/​__harness__/​mock-static.ts	Adds getLanguage/getCurrentLanguage reading /languages/*.json from disk.
docs/​specs/​solid-monkeytype/​spec.md	Points the test-page harness bullet at the new file.
docs/​specs/​solid-monkeytype/​roadmap.md	Marks TH1 done and updates dependent T1/T2 rows.
docs/​AGENT_BROWSER.md	Documents the new __mt.compose helper.

_{Review effort: Balanced}