Add Playwright E2E tests replacing Cypress with MSW integration

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

tests/e2e/specs/files.spec.ts

@@ -0,0 +1,71 @@
+// 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("Files Page", () => {
+  test.beforeEach(async ({ page, context }) => {
+    await loginWithMSW(context);
+    await page.goto("/files");
+  });
+
+  test("displays the file list after login", async ({ page }) => {
+    await expect(page.getByText("sample-process.xes").first()).toBeVisible();
+    await expect(
+      page.locator("h2", { hasText: "All Files" }),
+    ).toBeVisible();
+    // Should display file names from fixture
+    await expect(page.getByText("sample-process.xes").first()).toBeVisible();
+    await expect(page.getByText("filtered-sample").first()).toBeVisible();
+    await expect(page.getByText("production-log.csv").first()).toBeVisible();
+  });
+
+  test("shows Recently Used section", async ({ page }) => {
+    await expect(page.getByText("sample-process.xes").first()).toBeVisible();
+    await expect(
+      page.locator("h2", { hasText: "Recently Used" }),
+    ).toBeVisible();
+  });
+
+  test("switches to DISCOVER tab", async ({ page }) => {
+    await expect(page.getByText("sample-process.xes").first()).toBeVisible();
+    await page.locator(".nav-item", { hasText: "DISCOVER" }).click();
+    // DISCOVER tab shows filtered file types
+    await expect(
+      page.locator("h2", { hasText: "All Files" }),
+    ).toBeVisible();
+  });
+
+  test("switches to COMPARE tab and shows drag zones", async ({ page }) => {
+    await expect(page.getByText("sample-process.xes").first()).toBeVisible();
+    await page.locator(".nav-item", { hasText: "COMPARE" }).click();
+    await expect(
+      page.getByText("Performance Comparison"),
+    ).toBeVisible();
+    await expect(
+      page.getByText("Drag and drop a file here").first(),
+    ).toBeVisible();
+  });
+
+  test("shows Import button on FILES tab", async ({ page }) => {
+    await expect(page.getByText("sample-process.xes").first()).toBeVisible();
+    await expect(page.locator("#import_btn")).toContainText("Import");
+  });
+
+  test("can switch between list and grid view", async ({ page }) => {
+    await expect(page.getByText("sample-process.xes").first()).toBeVisible();
+    // DataTable (list view) should be visible by default
+    await expect(page.locator("table")).toBeVisible();
+  });
+
+  test("double-click file navigates to discover page", async ({ page }) => {
+    await expect(page.getByText("sample-process.xes").first()).toBeVisible();
+    // Double-click the first file row in the table
+    // The actual route depends on file type (log->map, log-check->conformance, etc.)
+    await page.locator("table tbody tr").first().dblclick();
+    await expect(page).toHaveURL(/\/discover/);
+  });
+});