test(demo): add full guided-demo walkthrough and targeted demo tests

Adds one comprehensive Playwright test that walks a fresh Operations
Manager session through all 8 Demo Guide steps performing the real
action at each one, then restores the environment. Writing it surfaced
a real desktop layout bug: the Demo Guide's fixed side panel overlapped
main content with no reflow, making the return form's "Review return"
button unclickable while the guide was open at ordinary viewport widths.
Fixed by reserving layout space via a guide-open class. Also adds mobile
bottom-sheet, keyboard-reachability, and console-error checks.
This commit is contained in:
NuklearRabbit
2026-08-03 15:12:29 +02:00
parent 65835ea40a
commit 07d5605812
5 changed files with 234 additions and 1 deletions
+36
View File
@@ -742,3 +742,39 @@ scenarios, demo manifest, About page). Gap audit: `docs/demo-release/current-dem
- Exact next action: full guided-demo Playwright test + remaining targeted demo tests per
section 19 (mobile guide, keyboard nav, all scenario flows, About page, accessibility/
reduced-motion/console/network checks) — task #35.
### Batch 6 — full guided-demo test + targeted demo tests (complete)
- **Found and fixed a real, fairly serious desktop layout bug** while writing the full
guided-demo test: the Demo Guide's fixed right-side panel (400px wide) overlapped the
main content area at normal desktop widths with no reflow, so its own step-list buttons
intercepted pointer events meant for the page underneath (concretely: the return form's
"Review return" button was unclickable while the guide was open, at exactly the
viewport size Playwright's default test browser uses — this would have hit real
visitors on ordinary laptop screens too). Fixed by adding a `guide-open` class to
`.app-workspace` that reserves `padding-right: min(400px, 92vw)` while the guide is open
(≥701px only; the ≤700px bottom-sheet layout is unaffected), so content reflows aside
instead of sitting underneath the panel.
- Added `frontend/e2e/guided-demo-full.spec.ts`: one comprehensive test walking a fresh
Operations Manager session through all 8 Demo Guide steps in order, performing the
**real** action at each step (not just verifying copy) — processes the actual
odometer-anomaly return, resolves the resulting data-quality issue, merges the
duplicate customer, asks a suggested knowledge question, checks automation + audit,
reviews the About page — using the guide's own progression controls
("Volgende"/"Ga naar deze stap"/"Ga verder met de demo") throughout, then resets the
demo data again at the end to restore the environment per the brief's requirement.
- Added `frontend/e2e/demo-accessibility.spec.ts` (4 tests): the guide renders as a
correctly-anchored bottom sheet on a 390px mobile viewport with no horizontal overflow;
the guide never covers the return form's action buttons on desktop (regression test for
the bug above); the demo badge and guide trigger are keyboard-focusable and operable
(Enter to open, explicit close controls); key demo pages (dashboard, scenarios, about,
guide open) load with no unexpected console errors (the one expected benign 401 from
the app's own session-probe on first load is explicitly allow-listed, not silenced
blindly).
- Evidence: full Playwright suite **56 passed** (51 existing + 1 guided-demo-full + 4
demo-accessibility), confirmed stable across two consecutive full runs. Backend
untouched this batch (last gate: 127 passed/ruff/mypy clean, Batch 5).
- Exact next action: clean-checkout demo drill, final documentation set (demo-concept/
demo-scenarios/demo-data/demo-guide/demo-runbook, README, .env.example), final Unraid
deploy + live evidence with screenshots, `artifacts/demo-release/final-summary.md` —
task #36 (final).