test(ui): cover redesigned journeys and responsive shell

2026-08-02 03:27:30 +02:00
parent fd9b25c25c
commit b3946af4e0
3 changed files with 71 additions and 15 deletions
@@ -0,0 +1,53 @@
+import { expect, test, type APIRequestContext } from "@playwright/test";
+
+const API_BASE = process.env.MOBILITYOPS_API_URL ?? "http://localhost:8128";
+
+async function resetDemoData(request: APIRequestContext) {
+  await request.post(`${API_BASE}/api/v1/demo/login`, { data: { role: "operations_manager" } });
+  await request.post(`${API_BASE}/api/v1/demo/reset`);
+}
+
+test.beforeEach(async ({ page, request }) => {
+  await resetDemoData(request);
+  await page.goto("/login");
+  await page.getByRole("button", { name: "Open as Operations Manager" }).click();
+  await expect(page).toHaveURL(/\/dashboard$/);
+});
+
+test("control-centre shell exposes landmarks, persisted readiness and active navigation", async ({ page }) => {
+  await expect(page.getByRole("navigation", { name: "Primary navigation" })).toBeVisible();
+  await expect(page.getByRole("main")).toBeVisible();
+  await expect(page.getByRole("heading", { name: "Fleet readiness" })).toBeVisible();
+  await expect(page.locator(".metric-cell dd").first()).not.toHaveText("");
+  await expect(page.getByRole("link", { name: "Overview" }).first()).toHaveAttribute("aria-current", "page");
+});
+
+test("return review separates capture from irreversible commit", async ({ page }) => {
+  await page.goto("/bookings/BK-DEMO-RETURN");
+  await page.getByLabel("End odometer (km)").fill("60000");
+  await page.getByLabel("Fuel level (%)").fill("65");
+
+  let returnRequests = 0;
+  page.on("request", (request) => {
+    if (request.url().includes("/return") && request.method() === "POST") returnRequests += 1;
+  });
+
+  await page.getByRole("button", { name: "Review return" }).click();
+  expect(returnRequests).toBe(0);
+  await expect(page.getByText("Expected fleet state")).toBeVisible();
+  await expect(page.getByText("Queue n8n delivery after the local commit")).toBeVisible();
+
+  await page.getByRole("button", { name: "Edit details" }).click();
+  await expect(page.getByLabel("End odometer (km)")).toHaveValue("60000");
+});
+
+for (const width of [390, 768, 1280, 1440]) {
+  test(`responsive shell has no horizontal overflow at ${width}px`, async ({ page }) => {
+    await page.setViewportSize({ width, height: width < 700 ? 844 : 900 });
+    await page.goto("/dashboard");
+    await expect(page.getByRole("heading", { name: "Attention queue" })).toBeVisible();
+    const dimensions = await page.evaluate(() => ({ scroll: document.documentElement.scrollWidth, client: document.documentElement.clientWidth }));
+    expect(dimensions.scroll).toBeLessThanOrEqual(dimensions.client + 1);
+    if (width < 960) await expect(page.getByRole("navigation", { name: "Mobile navigation" })).toBeVisible();
+  });
+}