test: commit the reflow, touch-target and safe-area measurements as end-to-end specs #175

Nytt ärende

Öppen

öppnade 2026-08-02 16:06:37 +00:00 av supernaut · 0 kommentarer

supernaut kommenterad

2026-08-02 16:06:37 +00:00

Ägare

Turn those into committed specs.

Specs to add (under `src/test/e2e/`)

smoke.spec.ts — every top-level route returns 200, has exactly one <h1> and a non-empty
<title>, and every Swedish path has its /en/ counterpart. URL paths are English and identical
across locales, so the counterpart check is a straight prefix test. This also covers the class of
bug fixed by "stop the [slug] routes returning an empty body".
navigation-a11y.spec.ts — must run in the WebKit project. Tab to the skip link, activate it,
assert <main> is focused (this is #158, which reproduced in WebKit only); assert each navigation
landmark has a distinct accessible name (#154); assert the announcement banner is a named landmark
(#157); assert exactly one language navigation is exposed at 375 px and at 768 px (#156). Consider
toMatchAriaSnapshot — the verification sentence in #156's commit message is literally an aria
snapshot.
touch-targets.spec.ts — at 320/360/375/414/480/600/719 px, every header, footer and breadcrumb
link's bounding box is at least 44 px on the block axis, on /, /en/, /docs/, /docs/faq/,
/pricing/ and /en/pricing/ (#155).
header-reflow.spec.ts — header height at each width matches the committed table, and does not
vary between pages at the same width (#156).
safe-area.spec.ts — Chromium only; guard with
test.skip(({ browserName }) => browserName !== "chromium"). Open a CDP session, call
Emulation.setSafeAreaInsetsOverride with left 44, right 44, bottom 21 at 780×375, and assert no
navigation link's box falls inside the inset band (#159 measured 12 links before the fix, 0 after).

Notes

Keep the numbers in one shared constants module so the acceptance table lives in exactly one
place and reads as the spec it is.
Two acceptance numbers from #156 were explicitly not met and were accepted by operator
decision (170 px header at 375 px; <main> starting within 220 px on a page with breadcrumbs —
it starts at 319 px). Assert the numbers that were accepted, and leave a comment naming the two
that were waived so a future reader does not "fix" the test.
Consider toHaveScreenshot baselines per project per viewport as a follow-up rather than in this
issue — baselines need a stable rendering environment, which means they should land after the
runner image is baked.

Acceptance

Reverting any of 216629f, b769062, 1f4032f or ee91a64 locally makes at least one new
spec fail
navigation-a11y.spec.ts passes in WebKit and its skip-link assertion fails against the
pre-#158 markup
Suite wall clock stays under ~2 minutes locally across all projects

The fixes for #155, #156, #158 and #159 were each verified by driving headless Chromium by hand, sweeping viewport widths and reading back computed styles and bounding boxes. The measurements survive only as prose in the commit messages — for example #155's "every header, footer and breadcrumb target is now at least 44 px on its block axis (48 px in practice), down from 15-18.7 px", measured at 320/360/375/414/480/600/719 px across six pages; and #156's before/after header-height table. Nothing stops any of it regressing, and the next person to touch the header will write the same script again. Turn those into committed specs. ### Specs to add (under `src/test/e2e/`) - `smoke.spec.ts` — every top-level route returns 200, has exactly one `<h1>` and a non-empty `<title>`, and every Swedish path has its `/en/` counterpart. URL paths are English and identical across locales, so the counterpart check is a straight prefix test. This also covers the class of bug fixed by "stop the [slug] routes returning an empty body". - `navigation-a11y.spec.ts` — **must run in the WebKit project.** Tab to the skip link, activate it, assert `<main>` is focused (this is #158, which reproduced in WebKit only); assert each navigation landmark has a distinct accessible name (#154); assert the announcement banner is a named landmark (#157); assert exactly one language navigation is exposed at 375 px and at 768 px (#156). Consider `toMatchAriaSnapshot` — the verification sentence in #156's commit message is literally an aria snapshot. - `touch-targets.spec.ts` — at 320/360/375/414/480/600/719 px, every header, footer and breadcrumb link's bounding box is at least 44 px on the block axis, on `/`, `/en/`, `/docs/`, `/docs/faq/`, `/pricing/` and `/en/pricing/` (#155). - `header-reflow.spec.ts` — header height at each width matches the committed table, and does not vary between pages at the same width (#156). - `safe-area.spec.ts` — Chromium only; guard with `test.skip(({ browserName }) => browserName !== "chromium")`. Open a CDP session, call `Emulation.setSafeAreaInsetsOverride` with left 44, right 44, bottom 21 at 780×375, and assert no navigation link's box falls inside the inset band (#159 measured 12 links before the fix, 0 after). ### Notes - Keep the numbers in one shared constants module so the acceptance table lives in exactly one place and reads as the spec it is. - Two acceptance numbers from #156 were explicitly *not* met and were accepted by operator decision (170 px header at 375 px; `<main>` starting within 220 px on a page with breadcrumbs — it starts at 319 px). Assert the numbers that were accepted, and leave a comment naming the two that were waived so a future reader does not "fix" the test. - Consider `toHaveScreenshot` baselines per project per viewport as a follow-up rather than in this issue — baselines need a stable rendering environment, which means they should land after the runner image is baked. ### Acceptance - [ ] Reverting any of `216629f`, `b769062`, `1f4032f` or `ee91a64` locally makes at least one new spec fail - [ ] `navigation-a11y.spec.ts` passes in WebKit and its skip-link assertion fails against the pre-#158 markup - [ ] Suite wall clock stays under ~2 minutes locally across all projects

supernaut lade till etiketterna

area/web

ready-for-implementation

type

task

2026-08-02 16:06:49 +00:00

supernaut lade till detta till projektet Bitborg Web

2026-08-02 16:06:54 +00:00

Logga in för att delta i denna konversation.