Add Playwright E2E tests replacing Cypress with MSW integration

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
2026-03-22 16:43:32 +08:00
parent 67a723207f
commit aa2661b556
33 changed files with 2284 additions and 7 deletions
--- a/tests/e2e/specs/discoverPerformance.spec.ts
+++ b/tests/e2e/specs/discoverPerformance.spec.ts
@@ -0,0 +1,94 @@
+// The Lucia project.
+// Copyright 2026-2026 DSP, inc.  All rights reserved.
+// Authors:
+//   imacat.yang@dsp.im (imacat), 2026/03/22
+
+import { test, expect } from "@playwright/test";
+import { loginWithMSW } from "../helpers";
+
+test.describe("Discover Performance Page", () => {
+  test.beforeEach(async ({ page, context }) => {
+    await loginWithMSW(context);
+    await page.goto("/discover/log/297310264/performance");
+    await expect(
+      page.locator(".chart-container, canvas").first(),
+    ).toBeVisible();
+  });
+
+  test("page loads and loading overlay disappears", async ({ page }) => {
+    // Loading overlay should not be visible after data loads
+    await expect(
+      page.locator(".z-\\[9999\\]"),
+    ).not.toBeVisible({ timeout: 10000 });
+  });
+
+  test("displays Time Usage sidebar section", async ({ page }) => {
+    await expect(
+      page.locator(".z-\\[9999\\]"),
+    ).not.toBeVisible({ timeout: 10000 });
+    await expect(page.getByText("Time Usage").first()).toBeVisible();
+  });
+
+  test("displays Frequency sidebar section", async ({ page }) => {
+    await expect(
+      page.locator(".z-\\[9999\\]"),
+    ).not.toBeVisible({ timeout: 10000 });
+    await expect(page.getByText("Frequency").first()).toBeVisible();
+  });
+
+  test("displays sidebar navigation items", async ({ page }) => {
+    await expect(
+      page.locator(".z-\\[9999\\]"),
+    ).not.toBeVisible({ timeout: 10000 });
+    await expect(page.getByText("Cycle Time & Efficiency").first()).toBeVisible();
+    await expect(page.getByText("Processing Time").first()).toBeVisible();
+    await expect(page.getByText("Waiting Time").first()).toBeVisible();
+    await expect(page.getByText("Number of Cases").first()).toBeVisible();
+  });
+
+  test("displays chart titles", async ({ page }) => {
+    await expect(
+      page.locator(".z-\\[9999\\]"),
+    ).not.toBeVisible({ timeout: 10000 });
+    await expect(page.getByText("Average Cycle Time")).toBeVisible();
+    await expect(page.getByText("Cycle Efficiency")).toBeVisible();
+    await expect(
+      page.getByText("Average Processing Time").first(),
+    ).toBeVisible();
+    await expect(
+      page.getByText("Average Processing Time by Activity"),
+    ).toBeVisible();
+    await expect(
+      page.getByText("Average Waiting Time").first(),
+    ).toBeVisible();
+  });
+
+  test("displays frequency chart titles", async ({ page }) => {
+    await expect(
+      page.locator(".z-\\[9999\\]"),
+    ).not.toBeVisible({ timeout: 10000 });
+    await expect(page.getByText("New Cases")).toBeVisible();
+    await expect(
+      page.getByText("Number of Cases by Activity"),
+    ).toBeVisible();
+  });
+
+  test("renders canvas elements for charts", async ({ page }) => {
+    await expect(
+      page.locator(".z-\\[9999\\]"),
+    ).not.toBeVisible({ timeout: 10000 });
+    // Chart.js renders into canvas elements
+    const canvasCount = await page.locator("canvas").count();
+    expect(canvasCount).toBeGreaterThanOrEqual(5);
+  });
+
+  test("sidebar navigation scrolls to section", async ({ page }) => {
+    await expect(
+      page.locator(".z-\\[9999\\]"),
+    ).not.toBeVisible({ timeout: 10000 });
+    // Click on "Waiting Time" in sidebar
+    await page.locator("li", { hasText: "Waiting Time" }).first().click();
+    // The Waiting Time section should be in view
+    await expect(page.locator("#waitingTime")).toBeVisible();
+  });
+});