T-I630-md-ui-playground-e2e-perf
State: closed/done · Impact: high · Complexity: medium
The playground ships with smoke specs and a single proof-of-harness perf case; the performance budgets — a critical feature of the program — are otherwise unenforced, and nothing checks that every layer component keeps a story. This task lands the per-component e2e specs, the full perf budget matrix, the bundle-size gate, and a stories-coverage gate.
| Location | Role today |
|---|---|
packages/ts/ui/playwright.config.ts | Chromium + WebKit project shape the playground config copies |
packages/ts/obsidian-md/test/fixtures/every-feature.md | Feature-complete fixture the vault pages reuse |
The playground, its fixtures (vault/, large/lines-2000.md, large/lines-10000.md,
large/bytes-600k.md), the perf harness (measure, collectLongTasks, heapUsed,
withTrace), the smoke specs and the one-case perf.e2e.ts come from
T-J92O-md-test-apps. Component pages and stories come from
T-A0HT-md-ui-layer-skeleton, T-98EU-md-ui-toolbar-insert-frontmatter,
T-8ZHI-md-ui-overlays-bubble-link-table and T-RJVA-md-ui-find-outline-hover-lifts.
Proposed
Section titled “Proposed”Per-component e2e under packages/ts/markdown-ui/playground/tests/:
| Spec | Covers |
|---|---|
surface.e2e.ts | Mode cycle via mod+shift+m (cursor and scroll preserved), mod+s emits save, / opens the slash list and applies a command, ` |
overlays.e2e.ts | Bubble on selection (and gone on collapse), link popover edit/apply, table menu row insert and alignment |
find-bar.e2e.ts | md-find-* bar in read and live modes: query, count, next/prev, close |
perf.e2e.ts grows from the one T-J92O case to the full budget matrix, one named test per row:
| Budget | Case |
|---|---|
| Keystroke → paint p95 < 16 ms; viewport decoration rebuild < 8 ms | Type 200 characters into large/lines-10000.md in live mode; p95 over the marks; trace saved via withTrace |
Open large/bytes-600k.md in source mode < 500 ms | Navigation → first paint measure |
Open large/lines-2000.md in live mode < 300 ms to first paint | Kept from [[T-J92O-md-test-apps |
Mode switch (live ↔ source ↔ read) < 100 ms on large/lines-2000.md | Each direction measured |
MdViewer render of large/lines-2000.md < 200 ms | Shiki excluded (highlight off) |
| No long task > 50 ms during typing | collectLongTasks over the typing case |
| No memory growth across 100 note opens | heapUsed after cycle 100 at most 1.2× the value after cycle 10 |
Bundle gate tests/bundle.test.ts behind a moon analyze task: builds the playground with
rollup stats and asserts the layer + engines add less than 150 KB gzip to the entry chunk, and
that mermaid, katex and shiki appear only in lazy chunks, never in the entry chunk.
Stories gate packages/ts/markdown-ui/tests/stories-coverage.test.ts: every
packages/ts/markdown-ui/app/components/Md*.vue has a sibling .stories.ts, and
bun run storybook:build stays green.
Budgets are starting points; tightening them as baselines land is expected and needs no new task.
Approach
Section titled “Approach”- Write the four component specs against the existing pages; add page affordances (test ids, fixture selectors) where a spec needs them.
- Grow
perf.e2e.tsto the matrix: one named test per budget row, each using the harness (measure,collectLongTasks,heapUsed,withTrace) and failing over budget; save the typing-case trace as an artifact. - Add the
analyzemoon task andbundle.test.tsover the build stats. - Add
stories-coverage.test.tsin the layer. - Run
moon run markdown-ui-playground:e2e markdown-ui-playground:perfand the analyze task locally; record the measured values in the PR description alongside the budgets.
Files to touch
Section titled “Files to touch”| Location | Kind | Change |
|---|---|---|
packages/ts/markdown-ui/playground/tests/surface.e2e.ts | new | Surface, slash and completion spec |
packages/ts/markdown-ui/playground/tests/toolbar.e2e.ts | new | Toolbar spec |
packages/ts/markdown-ui/playground/tests/overlays.e2e.ts | new | Bubble, link popover, table menu spec |
packages/ts/markdown-ui/playground/tests/find-bar.e2e.ts | new | Find bar spec |
packages/ts/markdown-ui/playground/tests/perf.e2e.ts | new | Created by T-J92O-md-test-apps; grows to the full budget matrix |
packages/ts/markdown-ui/playground/tests/bundle.test.ts | new | Entry-chunk gzip delta and lazy-chunk assertions |
packages/ts/markdown-ui/playground/moon.yml | new | Created by T-J92O-md-test-apps; gains the analyze task |
packages/ts/markdown-ui/tests/stories-coverage.test.ts | new | Every Md*.vue has a story |
Acceptance criteria
Section titled “Acceptance criteria”- AC-1:
moon run markdown-ui-playground:e2epasses with the four specs named in the Proposed spec table. - AC-2:
moon run markdown-ui-playground:perfruns one named test per row of the budget table above, and each fails when its measure exceeds its budget (thresholds asserted in the spec, not logged). - AC-3: the typing case saves a Chromium trace under the playground’s
test-results/traces/. - AC-4: the long-task test records zero
longtaskentries over 50 ms while typing 200 characters, and the heap test holdsheapUsed(100 cycles) <= 1.2 × heapUsed(10 cycles). - AC-5:
bundle.test.tsasserts the entry-chunk gzip delta is under 150 KB and thatmermaid,katexandshikiare absent from the entry chunk while present as lazy chunks. - AC-6:
bun test packages/ts/markdown-ui/tests/stories-coverage.test.tspasses and fails when aMd*.vuestory file is removed (negative case asserted with a temp fixture list). - AC-7:
bun run storybook:buildin the layer succeeds.
Out of scope
Section titled “Out of scope”- The playground scaffold, fixtures and harness (T-J92O-md-test-apps).
- The headless engine bench and its 1.5× gate (T-0GV4-md-engine-line-endings-corpus).
- Product e2e — the notes Playwright chrome spec is T-M8PU-notes-chrome-e2e.
- Tightening budgets below the starting values; done opportunistically once baselines land.
Dependencies
Section titled “Dependencies”- T-J92O-md-test-apps for the playground, fixtures, harness and smoke specs.
- The component pages and stories from T-A0HT-md-ui-layer-skeleton, T-98EU-md-ui-toolbar-insert-frontmatter, T-8ZHI-md-ui-overlays-bubble-link-table and T-RJVA-md-ui-find-outline-hover-lifts — the specs cover what exists; a spec whose component has not landed yet lands with that component’s follow-up instead.
Discovery context
Section titled “Discovery context”Member of milestone M-931L; the performance-budgets and test-apps sections of decision D-K3EM-markdown-editor-chrome-and-plugin-environment.