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:
@@ -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).
|
||||
|
||||
Reference in New Issue
Block a user