Jens/MobilityOps
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(demo): add demo manifest, Dutch demo entry, permanent badge and About page

Browse Source 
Adds GET /api/v1/demo/manifest as a single source of truth for the demo's
fictional org identity (Northstar Mobility -- surfacing the project's
already-locked tenant name), synthetic-data/reset state, and live scenario
readiness. Rewrites the login screen in Dutch with an honest, no-password
demo entry and a guided-demo entry point, replaces the loud full-width
demo banner with a subtle badge + popover, and adds a compact About page
explaining what's real vs. synthetic vs. not yet connected.
This commit is contained in:
NuklearRabbit
2026-08-03 13:45:55 +02:00
parent 728e380d63
commit ac427f4427
25 changed files with 919 additions and 108 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/e2e/_capture-screenshots.spec.ts
+1 -1
View File
@@ -14,7 +14,7 @@ test("capture the seven main pages", async ({ page, request }) => {
await page.goto("/login");
await page.screenshot({ path: `${OUT}/1-login.png` });
await page.getByRole("button", { name: "Open as Operations Manager" }).click();
await page.getByRole("button", { name: "Verken als Operations Manager" }).click();
await expect(page.getByRole("heading", { name: "Operational metrics" })).toBeVisible();
await page.screenshot({ path: `${OUT}/2-dashboard.png`, fullPage: true });
frontend/e2e/demo-entry.spec.ts
+56
View File
@@ -0,0 +1,56 @@
import { expect, test } from "@playwright/test";
test.describe.configure({ mode: "serial" });
test("demo entry screen names the fictional org and never shows a password", async ({ page }) => {
await page.goto("/login");
await expect(page.getByText(/Northstar Mobility/)).toBeVisible();
await expect(page.getByText(/Synthetische demo/)).toBeVisible();
await expect(page.getByRole("button", { name: "Start begeleide demo" })).toBeVisible();
await expect(page.getByRole("button", { name: "Verken als Operations Manager" })).toBeVisible();
await expect(page.getByRole("button", { name: "Verken als Rental Employee" })).toBeVisible();
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 }) => {
await page.goto("/login");
await page.getByRole("button", { name: "Start begeleide demo" }).click();
await expect(page).toHaveURL(/\/dashboard\?guide=start$/);
await expect(page.getByText("Amelie De Ridder")).toBeVisible();
});
test("permanent demo badge shows a popover with last reset info and a working About link", async ({ page }) => {
await page.goto("/login");
await page.getByRole("button", { name: "Verken als Operations Manager" }).click();
await expect(page).toHaveURL(/\/dashboard$/);
const trigger = page.getByRole("button", { name: /Synthetische demo/ });
await expect(trigger).toBeVisible();
await trigger.click();
await expect(page.getByRole("dialog", { name: "Over deze demo-omgeving" })).toBeVisible();
await expect(page.getByText(/Laatste reset:/)).toBeVisible();
await page.getByRole("link", { name: /Over deze demo/ }).click();
await expect(page).toHaveURL(/\/about$/);
await expect(page.getByRole("heading", { name: "Wat MobilityOps wel en niet is" })).toBeVisible();
await expect(page.getByText("Northstar Mobility").first()).toBeVisible();
await expect(page.getByText("Demomodus — lokale kennisprovider")).toBeVisible();
await expect(page.getByText("Niet gekoppeld").first()).toBeVisible();
});
test("badge popover closes on Escape and outside click", async ({ page }) => {
await page.goto("/login");
await page.getByRole("button", { name: "Verken als Operations Manager" }).click();
await expect(page).toHaveURL(/\/dashboard$/);
const trigger = page.getByRole("button", { name: /Synthetische demo/ });
await trigger.click();
await expect(page.getByRole("dialog")).toBeVisible();
await page.keyboard.press("Escape");
await expect(page.getByRole("dialog")).toBeHidden();
await trigger.click();
await expect(page.getByRole("dialog")).toBeVisible();
await page.mouse.click(10, 10);
await expect(page.getByRole("dialog")).toBeHidden();
});
frontend/e2e/demo.spec.ts
+3 -3
View File
@@ -18,8 +18,8 @@ test("five-minute demo script end to end", async ({ page, request }) => {
await test.step("1. login as Operations Manager", async () => {
await page.goto("/login");
await expect(page.getByText(/Synthetic proof of concept/)).toBeVisible();
await page.getByRole("button", { name: "Open as Operations Manager" }).click();
await expect(page.getByText(/Synthetische demo/)).toBeVisible();
await page.getByRole("button", { name: "Verken als Operations Manager" }).click();
await expect(page).toHaveURL(/\/dashboard$/);
});
@@ -89,7 +89,7 @@ test("five-minute demo script end to end", async ({ page, request }) => {
await test.step("9. verify responsive navigation at mobile width", async () => {
await page.setViewportSize({ width: 360, height: 800 });
await page.goto("/dashboard");
await expect(page.getByText(/Synthetic demo data/).first()).toBeVisible();
await expect(page.getByText(/Synthetische demo/).first()).toBeVisible();
await expect(page.getByRole("link", { name: "Overview" }).first()).toBeVisible();
const scrollWidth = await page.evaluate(() => document.documentElement.scrollWidth);
const clientWidth = await page.evaluate(() => document.documentElement.clientWidth);
frontend/e2e/interactive-elements.spec.ts
+4 -4
View File
@@ -9,7 +9,7 @@ test.describe.configure({ mode: "serial" });
test.beforeEach(async ({ page }) => {
await page.goto("/login");
await page.getByRole("button", { name: "Open as Operations Manager" }).click();
await page.getByRole("button", { name: "Verken als Operations Manager" }).click();
await expect(page).toHaveURL(/\/dashboard$/);
});
@@ -340,7 +340,7 @@ test("rental employee role has a restricted nav and cannot reach manager-only pa
page,
}) => {
await page.getByRole("button", { name: "Switch role" }).click();
await page.getByRole("button", { name: "Open as Rental Employee" }).click();
await page.getByRole("button", { name: "Verken als Rental Employee" }).click();
await expect(page).toHaveURL(/\/dashboard$/);
// Manager-only nav items are not shown at all, not merely disabled.
@@ -374,7 +374,7 @@ test("operations manager can reset demo data and is returned to login", async ({
await expect(page).toHaveURL(/\/login$/);
// The reset must not have affected the ability to log back in against fresh data.
await page.getByRole("button", { name: "Open as Operations Manager" }).click();
await page.getByRole("button", { name: "Verken als Operations Manager" }).click();
await expect(page).toHaveURL(/\/dashboard$/);
});
@@ -392,7 +392,7 @@ test("rental employee direct API access to manager-only endpoints is rejected",
page,
}) => {
await page.getByRole("button", { name: "Switch role" }).click();
await page.getByRole("button", { name: "Open as Rental Employee" }).click();
await page.getByRole("button", { name: "Verken als Rental Employee" }).click();
await expect(page).toHaveURL(/\/dashboard$/);
// page.request shares the browser context's cookies, and (via the web container's
frontend/e2e/ui-redesign.spec.ts
+1 -1
View File
@@ -8,7 +8,7 @@ async function resetDemoData(request: APIRequestContext) {
test.beforeEach(async ({ page, request }) => {
await resetDemoData(request);
await page.goto("/login");
await page.getByRole("button", { name: "Open as Operations Manager" }).click();
await page.getByRole("button", { name: "Verken als Operations Manager" }).click();
await expect(page).toHaveURL(/\/dashboard$/);
});