Marc-André Bombeck
5a103ea096
Thirty-four routes, both consoles, English and German, desktop and phone. The claims this program makes are geometric, so they are checked with geometry rather than by looking at screenshots. What it found, which is the reason it exists: - `SettingsCard as="section"` sat one spacing step tighter than its neighbour on every desktop width. The `<Card>`-backed variant inherits `gap-4 md:gap-6`; the landmark variant wrote a flat `gap-4`. Seventy-five of eighty-six cards measured 24 px and eleven measured 16 px, directly above and below each other. The expected value in the spec is a function of the viewport for exactly this reason — a constant would have agreed with whichever half it was written against. - One German page subtitle wrapped to a second line where English fit on one. Shortened in all six languages. After both: heading top 24.0 px on every route, spread 0.0 px, in both languages and at both widths — that is the no-jump claim, measured. Card header-to-body distance equals the card's own gap on all 86 cards, and no card body sits off the card's inner edge. The header's HEIGHT is pinned only where one line is achievable. At 393 px a 70-character sentence needs about 380 px of column, so most explainers wrap there; the spec asserts the wrap away at desktop width and only forbids a third line on a phone. The alternative is truncating the sentence, which is the defect this program removed.
e2e/
End-to-end browser tests. Playwright 1.60 drives a production build of the app against a real PostgreSQL, with @axe-core/playwright for accessibility assertions. This is the heaviest test tier; CI runs it on every PR, and locally it is worth running when a change touches a UI flow.
Running
pnpm e2e
The Playwright config (../playwright.config.ts) builds the app (next build) and brings up Postgres before the specs run; setup/global-setup.ts seeds the auth + fixture state. The suite is not part of the fast local gate (typecheck / lint / test) — it surfaces at PR CI, so expect responsive/wizard/nav reworks to flag here first.
Layout
setup/—test.ts(the suite'stest+expectentry point),global-setup.ts(auth + DB seeding),test-helpers.ts(shared login + navigation helpers).utils/— fixtures such asmock-dashboard-snapshot.ts.*.spec.ts— one spec per flow: auth/login/redirect, dashboard, charts, the medication-wizard cadences (medications-wizard-*), insights generation + scroll restoration, doctor report, settings, mobile-viewport consistency, locale switch, accessibility (a11y.spec.ts), and thev1427-*regression set.
Conventions
Import test and expect from ./setup/test, never from @playwright/test — types (Page, Route, …) still come from the package. The entry point extends Playwright's test with an automatic fixture that drops route handlers and page listeners after every test, so a handler left in flight cannot fail the test it belonged to once the context closes. src/__tests__/e2e-route-cleanup-guard.test.ts enforces the import boundary.
Assert against stable data-* attributes (data-slot, data-display-step, root display attrs), not viewport-dependent visible text. Responsive sm:hidden UI changes break getByText on desktop while the underlying element is still present — anchoring on data attributes keeps the specs stable across breakpoints. See ../CLAUDE.md.