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 6e7d010c54
32 changed files with 2276 additions and 0 deletions
--- a/tests/e2e/specs/compare.spec.ts
+++ b/tests/e2e/specs/compare.spec.ts
@@ -0,0 +1,125 @@
+// 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("Compare", () => {
+  test.beforeEach(async ({ page, context }) => {
+    await loginWithMSW(context);
+    await page.goto("/files");
+    await expect(page.getByText("sample-process.xes").first()).toBeVisible();
+    await page.locator("li", { hasText: "COMPARE" }).click();
+  });
+
+  test("Compare dropdown sorting options", async ({ page }) => {
+    const expectedOptions = [
+      "By File Name (A to Z)",
+      "By File Name (Z to A)",
+      "By Dependency (A to Z)",
+      "By Dependency (Z to A)",
+      "By File Type (A to Z)",
+      "By File Type (Z to A)",
+      "By Last Update (A to Z)",
+      "By Last Update (Z to A)",
+    ];
+
+    await page.locator(".p-select").click();
+    const options = page.locator(".p-select-list .p-select-option-label");
+    const count = await options.count();
+    const actualOptions: string[] = [];
+    for (let i = 0; i < count; i++) {
+      actualOptions.push((await options.nth(i).textContent()) ?? "");
+    }
+    expect(actualOptions).toEqual(expectedOptions);
+  });
+
+  test("Grid cards are rendered for compare file selection", async ({
+    page,
+  }) => {
+    const items = page.locator("#compareGridCards li");
+    await expect(items).not.toHaveCount(0);
+  });
+
+  test("Compare button is disabled until two files are dragged", async ({
+    page,
+  }) => {
+    await expect(
+      page.getByRole("button", { name: "Compare" }),
+    ).toBeDisabled();
+    await page.locator("#compareFile0").dragTo(
+      page.locator("#primaryDragCard"),
+    );
+    await page.locator("#compareFile1").dragTo(
+      page.locator("#secondaryDragCard"),
+    );
+    await expect(
+      page.getByRole("button", { name: "Compare" }),
+    ).toBeEnabled();
+  });
+
+  test("Enter Compare dashboard and see charts", async ({ page }) => {
+    await page.locator("#compareFile0").dragTo(
+      page.locator("#primaryDragCard"),
+    );
+    await page.locator("#compareFile1").dragTo(
+      page.locator("#secondaryDragCard"),
+    );
+    await page.getByRole("button", { name: "Compare" }).click();
+    await expect(page).toHaveURL(/compare/);
+
+    // Assert chart title spans are visible
+    await expect(
+      page.locator("span", { hasText: "Average Cycle Time" }),
+    ).toBeVisible();
+    await expect(
+      page.locator("span", { hasText: "Cycle Efficiency" }),
+    ).toBeVisible();
+    await expect(
+      page.locator("span", { hasText: "Average Processing Time" }).first(),
+    ).toBeVisible();
+    await expect(
+      page.locator("span", {
+        hasText: "Average Processing Time by Activity",
+      }),
+    ).toBeVisible();
+    await expect(
+      page.locator("span", { hasText: "Average Waiting Time" }).first(),
+    ).toBeVisible();
+    await expect(
+      page.locator("span", {
+        hasText: "Average Waiting Time between Activity",
+      }),
+    ).toBeVisible();
+  });
+
+  test("Compare State button exists on dashboard", async ({ page }) => {
+    await page.locator("#compareFile0").dragTo(
+      page.locator("#primaryDragCard"),
+    );
+    await page.locator("#compareFile1").dragTo(
+      page.locator("#secondaryDragCard"),
+    );
+    await page.getByRole("button", { name: "Compare" }).click();
+
+    await expect(page.locator("#compareState")).toBeVisible();
+  });
+
+  test("Sidebar shows time usage and frequency sections", async ({
+    page,
+  }) => {
+    await page.locator("#compareFile0").dragTo(
+      page.locator("#primaryDragCard"),
+    );
+    await page.locator("#compareFile1").dragTo(
+      page.locator("#secondaryDragCard"),
+    );
+    await page.getByRole("button", { name: "Compare" }).click();
+
+    await expect(page.locator("aside")).toBeVisible();
+    const items = page.locator("aside li");
+    await expect(items).not.toHaveCount(0);
+  });
+});