feat(demo): add Demo Guide (8-step guided tour) and scenario overview

Adds a compact "Probeer een demonstratiescenario" page listing the 5 named
scenarios with live readiness from the manifest, plus a Demo Guide side
panel (bottom sheet on mobile) that walks an Operations Manager through
all 8 steps with per-step context, live-resolved routes, sessionStorage
progress, and a "Demo opnieuw voorbereiden" restart. Login's guided-demo
CTA now actually opens the guide. Fixes a real mobile topbar overflow the
new guide trigger introduced.
This commit is contained in:
NuklearRabbit
2026-08-03 14:15:15 +02:00
parent c63903cc94
commit 9fff84dc68
11 changed files with 647 additions and 29 deletions
+7 -2
View File
@@ -12,11 +12,16 @@ test("demo entry screen names the fictional org and never shows a password", asy
await expect(page.locator('input[type="password"]')).toHaveCount(0);
});
test("start guided demo logs in as Operations Manager and marks the guide to start", async ({ page }) => {
test("start guided demo logs in as Operations Manager and opens the guide at step 1", async ({ page }) => {
await page.goto("/login");
await page.getByRole("button", { name: "Start begeleide demo" }).click();
await expect(page).toHaveURL(/\/dashboard\?guide=start$/);
// The ?guide=start marker is a one-shot signal the dashboard strips immediately after
// consuming it, so assert on its effect (the guide panel opens at step 1) rather than
// the transient URL, which can already be gone by the time this assertion runs.
await expect(page).toHaveURL(/\/dashboard/);
await expect(page.getByText("Amelie De Ridder")).toBeVisible();
await expect(page.getByRole("dialog", { name: "Gegidste demo" })).toBeVisible();
await expect(page.getByRole("heading", { name: "1. Begrijp de operationele status" })).toBeVisible();
});
test("permanent demo badge shows a popover with last reset info and a working About link", async ({ page }) => {