MobilityOps/frontend/e2e/guided-demo-full.spec.ts

import { expect, test, type APIRequestContext } from "@playwright/test";

async function resetDemoData(request: APIRequestContext) {
  const login = await request.post("/api/v1/demo/login", { data: { role: "operations_manager" } });
  expect(login.ok()).toBeTruthy();
  const reset = await request.post("/api/v1/demo/reset");
  expect(reset.ok()).toBeTruthy();
}

test.describe.configure({ mode: "serial" });

test("full guided demo walkthrough, start to finish, restoring the environment after", async ({
  page,
  request,
}) => {
  await resetDemoData(request);
  // Wide desktop viewport: the guide docks as a rail and never auto-collapses to a chip
  // (see useViewportTier.ts), so this walkthrough can keep interacting with the panel
  // directly across every step -- the standard-tier auto-collapse behaviour itself is
  // covered separately in demo-guide.spec.ts.
  await page.setViewportSize({ width: 1600, height: 1000 });

  await test.step("start the guided demo from the login screen", async () => {
    await page.goto("/login");
    await page.getByRole("button", { name: "Start begeleide demo" }).click();
    await expect(page).toHaveURL(/\/dashboard/);
    await expect(page.getByRole("dialog", { name: "Gegidste demo" })).toBeVisible();
  });

  await test.step("step 1: understand the operational state", async () => {
    await expect(page.getByRole("heading", { name: "1. Begrijp de operationele status" })).toBeVisible();
    await expect(page.getByRole("heading", { name: "Wagenparkstatus" })).toBeVisible();
    await page.getByRole("button", { name: "Volgende" }).click();
  });

  await test.step("step 2: open the booking needing attention", async () => {
    await expect(page.getByRole("heading", { name: "2. Open een boeking" })).toBeVisible();
    await page.getByRole("button", { name: "Ga naar deze stap" }).click();
    await expect(page).toHaveURL(/\/bookings\/BK-DEMO-RETURN$/);
    await page.getByRole("button", { name: "Volgende" }).click();
  });

  await test.step("step 3: process the return with the pre-filled odometer anomaly", async () => {
    await expect(page.getByRole("heading", { name: "3. Verwerk een retour" })).toBeVisible();
    await expect(page.getByText("Demonstratiescenario: afwijkende kilometerstand")).toBeVisible();
    await page.getByRole("button", { name: "Retour nakijken" }).click();
    await expect(page.getByText(/laatst bevestigde stand/)).toBeVisible();
    await page.getByRole("button", { name: "Retour bevestigen" }).click();
    await expect(page.getByRole("heading", { name: "Retour geregistreerd" })).toBeVisible();
    await page.getByRole("button", { name: "Ga verder met de demo" }).click();
  });

  await test.step("step 4: handle the newly created data-quality issue", async () => {
    await expect(page).toHaveURL(/\/data-quality$/);
    await expect(page.getByRole("heading", { name: "4. Bekijk en behandel" })).toBeVisible();
    const firstIssueLink = page.locator(".data-table tbody tr").first().locator("a");
    await firstIssueLink.click();
    await expect(page.getByText("Wat is er mis")).toBeVisible();
    // The newest issue is the odometer regression this return just created.
    await page.getByRole("radio", { name: /Laatst bevestigde stand behouden/ }).check();
    await page.getByRole("button", { name: "Probleem oplossen" }).click();
    await expect(page.getByText(/Probleem .* opgelost/)).toBeVisible();
    await page.getByRole("button", { name: "Ga verder met de demo" }).click();
  });

  await test.step("step 5: review and merge the possible duplicate customer", async () => {
    await expect(page).toHaveURL(/\/data-quality\/DQ-DEMO-DUPLICATE$/);
    await expect(page.getByRole("heading", { name: "5. Beoordeel en behandel" })).toBeVisible();
    await page.getByRole("button", { name: /^Samenvoegen met/ }).click();
    await page.getByRole("button", { name: "Ja, samenvoegen" }).click();
    await expect(page.getByText(/Probleem .* opgelost/)).toBeVisible();
    await page.getByRole("button", { name: "Ga verder met de demo" }).click();
  });

  await test.step("step 6: ask the procedure assistant a question", async () => {
    await expect(page).toHaveURL(/\/knowledge$/);
    await expect(page.getByRole("heading", { name: "6. Stel een vraag" })).toBeVisible();
    await page.getByRole("button", { name: "Wat moet ik doen wanneer een voertuig terugkomt met schade?" }).click();
    await expect(page.getByText("Onderbouwd met geciteerde procedures")).toBeVisible();
    await page.getByRole("button", { name: "Volgende" }).click();
  });

  await test.step("step 7: check automation and the audit trail", async () => {
    await expect(page.getByRole("heading", { name: "7. Controleer automatisering" })).toBeVisible();
    await page.getByRole("button", { name: "Ga naar deze stap" }).click();
    await expect(page).toHaveURL(/\/automation$/);
    // Plain-language status only -- never the raw backend state string (e.g. "degraded").
    await expect(page.locator(".integration-cards")).not.toContainText("degraded");
    await expect(page.locator(".integration-cards")).not.toContainText("no_evidence");
    await page.goto("/audit");
    await expect(page.locator(".audit-group-list li").first()).toBeVisible();
    await page.getByRole("button", { name: /Demo-gids/ }).click();
    await page.getByRole("button", { name: "Volgende" }).click();
  });

  await test.step("step 8: review what's real, simulated, or not yet connected", async () => {
    await expect(page.getByRole("heading", { name: "8. Bekijk wat echt is" })).toBeVisible();
    await page.getByRole("button", { name: "Ga naar deze stap" }).click();
    await expect(page).toHaveURL(/\/about$/);
    await expect(page.getByRole("heading", { name: "Wat Fleet Ops wel en niet is" })).toBeVisible();
    await expect(page.getByText("Demomodus", { exact: false }).first()).toBeVisible();
    await expect(page.getByText("Niet gekoppeld").first()).toBeVisible();
  });

  await test.step("restore the environment", async () => {
    await resetDemoData(request);
  });
});