261 lines
12 KiB
TypeScript
261 lines
12 KiB
TypeScript
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("scenario overview lists all 5 scenarios, ready right after a reset", async ({ page, request }) => {
|
|
await resetDemoData(request);
|
|
await page.goto("/login");
|
|
await page.getByRole("button", { name: "Verken als Operationsmanager" }).click();
|
|
await expect(page).toHaveURL(/\/dashboard$/);
|
|
await page.goto("/scenarios");
|
|
|
|
await expect(page.getByRole("heading", { name: "Probeer een demonstratiescenario" })).toBeVisible();
|
|
const cards = page.locator(".scenario-card");
|
|
await expect(cards).toHaveCount(5);
|
|
for (const label of ["Klaar voor demo"]) {
|
|
await expect(page.getByText(label).first()).toBeVisible();
|
|
}
|
|
await expect(page.getByText("Niet beschikbaar")).toHaveCount(0);
|
|
});
|
|
|
|
test("starting a scenario navigates to its fixed record", async ({ page }) => {
|
|
await page.goto("/login");
|
|
await page.getByRole("button", { name: "Verken als Operationsmanager" }).click();
|
|
await expect(page).toHaveURL(/\/dashboard$/);
|
|
await page.goto("/scenarios");
|
|
|
|
const duplicateCard = page.locator(".scenario-card", { hasText: "dubbele klant" });
|
|
await duplicateCard.getByRole("link", { name: "Scenario starten" }).click();
|
|
await expect(page).toHaveURL(/\/data-quality\/DQ-DEMO-DUPLICATE$/);
|
|
});
|
|
|
|
// The default Playwright viewport (1280x720) falls in the "standard desktop/tablet" tier
|
|
// (see useViewportTier.ts): the guide is a floating, non-modal panel that auto-collapses
|
|
// to a persistent progress chip the moment the visitor acts on "Ga naar deze stap".
|
|
test("demo guide: navigating steps, jumping to a step collapses to a chip, and the chip reopens it", async ({ page }) => {
|
|
await page.goto("/login");
|
|
await page.getByRole("button", { name: "Start begeleide demo" }).click();
|
|
await expect(page.getByRole("dialog", { name: "Gegidste demo" })).toBeVisible();
|
|
await expect(page.getByRole("heading", { name: "1. Begrijp de operationele status" })).toBeVisible();
|
|
|
|
await page.getByRole("button", { name: "Volgende" }).click();
|
|
await expect(page.getByRole("heading", { name: "2. Open een boeking die aandacht nodig heeft" })).toBeVisible();
|
|
|
|
await page.getByRole("button", { name: /6\. Stel een vraag/ }).click();
|
|
await expect(page.getByRole("heading", { name: "6. Stel een vraag aan de procedureassistent" })).toBeVisible();
|
|
|
|
await page.getByRole("button", { name: "Ga naar deze stap" }).click();
|
|
await expect(page).toHaveURL(/\/knowledge$/);
|
|
// Panel auto-collapses to a persistent chip -- it must never sit over the knowledge
|
|
// page's primary "Ask" action after navigation.
|
|
await expect(page.getByRole("dialog", { name: "Gegidste demo" })).toBeHidden();
|
|
const chip = page.getByRole("button", { name: /Demo-gids · stap 6 van 8/ });
|
|
await expect(chip).toBeVisible();
|
|
|
|
await chip.click();
|
|
await expect(page.getByRole("dialog", { name: "Gegidste demo" })).toBeVisible();
|
|
await expect(page.getByRole("heading", { name: "6. Stel een vraag aan de procedureassistent" })).toBeVisible();
|
|
});
|
|
|
|
test("the collapsed chip has its own close control, independent of reopening it", async ({ page }) => {
|
|
await page.goto("/login");
|
|
await page.getByRole("button", { name: "Start begeleide demo" }).click();
|
|
await page.getByRole("button", { name: "Ga naar deze stap" }).click();
|
|
const chip = page.getByRole("button", { name: /Demo-gids · stap/ });
|
|
await expect(chip).toBeVisible();
|
|
|
|
await page.getByRole("button", { name: "Sluiten" }).click();
|
|
await expect(chip).toBeHidden();
|
|
await expect(page.getByRole("dialog", { name: "Gegidste demo" })).toBeHidden();
|
|
await expect(page.locator(".demo-guide-trigger")).toBeFocused();
|
|
});
|
|
|
|
test("demo guide progress persists across navigation and the trigger shows it", async ({ page }) => {
|
|
await page.goto("/login");
|
|
await page.getByRole("button", { name: "Start begeleide demo" }).click();
|
|
await page.getByRole("button", { name: "Volgende" }).click();
|
|
await page.getByRole("button", { name: "Volgende" }).click();
|
|
await page.getByRole("button", { name: "Demo-gids inklappen" }).click();
|
|
|
|
await expect(page.getByRole("button", { name: /^Demo-gids/ }).first()).toContainText("2/8");
|
|
|
|
await page.goto("/vehicles");
|
|
await page.getByRole("button", { name: /^Demo-gids/ }).first().click();
|
|
await expect(page.getByRole("heading", { name: "3. Verwerk een retour" })).toBeVisible();
|
|
});
|
|
|
|
test("demo guide is not shown to a rental employee", async ({ page }) => {
|
|
await page.goto("/login");
|
|
await page.getByRole("button", { name: "Verken als Verhuurmedewerker" }).click();
|
|
await expect(page).toHaveURL(/\/dashboard$/);
|
|
await expect(page.getByRole("button", { name: /Demo-gids/ })).toHaveCount(0);
|
|
});
|
|
|
|
test("restarting the demo from the guide resets data and returns to login", async ({ page }) => {
|
|
await page.goto("/login");
|
|
await page.getByRole("button", { name: "Start begeleide demo" }).click();
|
|
await expect(page.getByRole("dialog", { name: "Gegidste demo" })).toBeVisible();
|
|
|
|
await page.getByRole("button", { name: "Demo opnieuw voorbereiden" }).click();
|
|
await expect(page).toHaveURL(/\/login$/, { timeout: 10000 });
|
|
});
|
|
|
|
test("sidebar reset preserves guide progress on failure and clears it only after success", async ({ page }) => {
|
|
let resetShouldFail = true;
|
|
await page.route("**/api/v1/demo/reset", async (route) => {
|
|
if (resetShouldFail) {
|
|
await route.fulfill({
|
|
status: 503,
|
|
contentType: "application/json",
|
|
body: JSON.stringify({
|
|
error: { code: "TEST_UNAVAILABLE", message: "Injected reset failure", correlation_id: "reset-test" },
|
|
}),
|
|
});
|
|
return;
|
|
}
|
|
await route.fulfill({ status: 200, contentType: "application/json", body: JSON.stringify({ status: "reset" }) });
|
|
});
|
|
|
|
await page.goto("/login");
|
|
await page.getByRole("button", { name: "Start begeleide demo" }).click();
|
|
await page.getByRole("button", { name: "Volgende" }).click();
|
|
await page.locator(".demo-guide-trigger").click();
|
|
await expect(page.locator(".demo-guide-trigger")).toContainText("1/8");
|
|
|
|
await page.getByRole("button", { name: "Demogegevens herstellen" }).click();
|
|
await page.getByRole("button", { name: "Ja, herstellen" }).click();
|
|
await expect(page.getByText("Demogegevens konden niet hersteld worden.")).toBeVisible();
|
|
await expect(page.locator(".demo-guide-trigger")).toContainText("1/8");
|
|
|
|
resetShouldFail = false;
|
|
await page.getByRole("button", { name: "Demogegevens herstellen" }).click();
|
|
await page.getByRole("button", { name: "Ja, herstellen" }).click();
|
|
await expect(page).toHaveURL(/\/login$/);
|
|
await page.getByRole("button", { name: "Verken als Operationsmanager" }).click();
|
|
await expect(page.locator(".demo-guide-trigger")).toContainText("0/8");
|
|
});
|
|
|
|
test("wide desktop viewport docks the guide as a rail that never collapses to a chip", async ({ page }) => {
|
|
await page.setViewportSize({ width: 1600, height: 1000 });
|
|
await page.goto("/login");
|
|
await page.getByRole("button", { name: "Start begeleide demo" }).click();
|
|
const panel = page.locator(".demo-guide-panel.is-wide");
|
|
await expect(panel).toBeVisible();
|
|
|
|
await page.getByRole("button", { name: "Ga naar deze stap" }).click();
|
|
await expect(panel).toBeVisible();
|
|
await expect(page.locator(".demo-guide-chip")).toHaveCount(0);
|
|
});
|
|
|
|
test("mobile viewport shows a bottom sheet with collapsed/half/full states and no horizontal overflow", async ({ page }) => {
|
|
await page.setViewportSize({ width: 390, height: 844 });
|
|
await page.goto("/login");
|
|
await page.getByRole("button", { name: "Start begeleide demo" }).click();
|
|
const panel = page.locator(".demo-guide-panel.is-mobile");
|
|
await expect(panel).toBeVisible();
|
|
await expect(panel).toHaveClass(/sheet-half/);
|
|
|
|
const scrollWidth = await page.evaluate(() => document.documentElement.scrollWidth);
|
|
const clientWidth = await page.evaluate(() => document.documentElement.clientWidth);
|
|
expect(scrollWidth).toBeLessThanOrEqual(clientWidth + 1);
|
|
|
|
await page.locator(".demo-guide-sheet-handle").click();
|
|
await expect(panel).toHaveClass(/sheet-full/);
|
|
await page.locator(".demo-guide-sheet-handle").click();
|
|
await expect(panel).toHaveClass(/sheet-collapsed/);
|
|
});
|
|
|
|
test("Escape collapses the standard-tier panel, then closes it", async ({ page }) => {
|
|
await page.goto("/login");
|
|
await page.getByRole("button", { name: "Start begeleide demo" }).click();
|
|
await expect(page.getByRole("dialog", { name: "Gegidste demo" })).toBeVisible();
|
|
|
|
await page.keyboard.press("Escape");
|
|
await expect(page.getByRole("button", { name: /Demo-gids · stap/ })).toBeVisible();
|
|
await expect(page.getByRole("dialog", { name: "Gegidste demo" })).toBeHidden();
|
|
|
|
await page.keyboard.press("Escape");
|
|
await expect(page.getByRole("button", { name: /Demo-gids · stap/ })).toBeHidden();
|
|
await expect(page.locator(".demo-guide-trigger")).toBeFocused();
|
|
});
|
|
|
|
test("closing the guide cancels a delayed target lookup and restores trigger focus", async ({ page }) => {
|
|
await page.setViewportSize({ width: 1600, height: 1000 });
|
|
let releaseKnowledgeChunk = () => undefined;
|
|
const knowledgeChunkGate = new Promise<void>((resolve) => {
|
|
releaseKnowledgeChunk = resolve;
|
|
});
|
|
let markKnowledgeChunkRequested = () => undefined;
|
|
const knowledgeChunkRequested = new Promise<void>((resolve) => {
|
|
markKnowledgeChunkRequested = resolve;
|
|
});
|
|
|
|
await page.route(
|
|
/\/(?:assets\/Knowledge-[^/?]+\.js|src\/pages\/Knowledge\.tsx)(?:\?.*)?$/,
|
|
async (route) => {
|
|
markKnowledgeChunkRequested();
|
|
await knowledgeChunkGate;
|
|
await route.continue();
|
|
},
|
|
);
|
|
|
|
try {
|
|
await page.goto("/login");
|
|
await page.getByRole("button", { name: "Start begeleide demo" }).click();
|
|
await page.getByRole("button", { name: /6\. Stel een vraag/ }).click();
|
|
await page.getByRole("button", { name: "Ga naar deze stap" }).click();
|
|
await knowledgeChunkRequested;
|
|
|
|
await page
|
|
.locator(".demo-guide-panel.is-wide")
|
|
.getByRole("button", { name: "Sluiten" })
|
|
.click();
|
|
await expect(page.getByRole("dialog", { name: "Gegidste demo" })).toBeHidden();
|
|
await expect(page.locator(".demo-guide-trigger")).toBeFocused();
|
|
|
|
releaseKnowledgeChunk();
|
|
const target = page.locator("#ask-heading");
|
|
await expect(target).toBeVisible();
|
|
await page.waitForTimeout(150);
|
|
await expect(target).not.toBeFocused();
|
|
await expect(target).not.toHaveClass(/demo-guide-highlight/);
|
|
} finally {
|
|
releaseKnowledgeChunk();
|
|
}
|
|
});
|
|
|
|
test("going to a step scrolls, focuses and highlights the on-page target", async ({ page }) => {
|
|
await page.goto("/login");
|
|
await page.getByRole("button", { name: "Start begeleide demo" }).click();
|
|
await page.getByRole("button", { name: /6\. Stel een vraag/ }).click();
|
|
|
|
await page.getByRole("button", { name: "Ga naar deze stap" }).click();
|
|
await expect(page).toHaveURL(/\/knowledge$/);
|
|
|
|
const target = page.locator("#ask-heading");
|
|
await expect(target).toBeFocused();
|
|
await expect(target).toHaveClass(/demo-guide-highlight/);
|
|
});
|
|
|
|
test("going to a guide target on the already-active route still focuses and highlights it", async ({ page }) => {
|
|
await page.setViewportSize({ width: 1600, height: 1000 });
|
|
await page.goto("/login");
|
|
await page.getByRole("button", { name: "Start begeleide demo" }).click();
|
|
await page.getByRole("button", { name: /8\. Bekijk wat echt is/ }).click();
|
|
await page.goto("/about");
|
|
await page.getByRole("button", { name: /^Demo-gids/ }).first().click();
|
|
|
|
await page.getByRole("button", { name: "Ga naar deze stap" }).click();
|
|
|
|
const target = page.locator(".engineering-hero");
|
|
await expect(target).toBeFocused();
|
|
await expect(target).toHaveClass(/demo-guide-highlight/);
|
|
});
|