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/accountCrud.spec.ts
+++ b/tests/e2e/specs/accountCrud.spec.ts
@@ -0,0 +1,109 @@
+// 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("Account Management CRUD", () => {
+  test.beforeEach(async ({ page, context }) => {
+    await loginWithMSW(context);
+    await page.goto("/account-admin");
+    await expect(page.getByText("Test Admin").first()).toBeVisible();
+  });
+
+  test("shows Create New button", async ({ page }) => {
+    await expect(page.locator("#create_new_acct_btn")).toBeVisible();
+    await expect(
+      page.locator("#create_new_acct_btn"),
+    ).toContainText("Create New");
+  });
+
+  test("opens create new account modal", async ({ page }) => {
+    await page.locator("#create_new_acct_btn").click();
+    await expect(page.locator("#modal_container")).toBeVisible();
+    await expect(
+      page.locator("#modal_account_edit_or_create_new"),
+    ).toBeVisible();
+    // Should show account, name, password fields
+    await expect(page.locator("#input_account_field")).toBeVisible();
+    await expect(page.locator("#input_name_field")).toBeVisible();
+    await expect(page.locator("#input_first_pwd")).toBeVisible();
+  });
+
+  test("create account confirm is disabled when fields are empty", async ({
+    page,
+  }) => {
+    await page.locator("#create_new_acct_btn").click();
+    await expect(page.locator(".confirm-btn")).toBeDisabled();
+  });
+
+  test("create account confirm enables when fields are filled", async ({
+    page,
+  }) => {
+    await page.locator("#create_new_acct_btn").click();
+    await page.locator("#input_account_field").fill("newuser");
+    await page.locator("#input_name_field").fill("New User");
+    await page.locator("#input_first_pwd").fill("password1234");
+    await expect(page.locator(".confirm-btn")).toBeEnabled();
+  });
+
+  test("cancel button closes the modal", async ({ page }) => {
+    await page.locator("#create_new_acct_btn").click();
+    await expect(page.locator("#modal_container")).toBeVisible();
+    await page.locator(".cancel-btn").click();
+    await expect(page.locator("#modal_container")).not.toBeVisible();
+  });
+
+  test("close (X) button closes the modal", async ({ page }) => {
+    await page.locator("#create_new_acct_btn").click();
+    await expect(page.locator("#modal_container")).toBeVisible();
+    await page.locator('img[alt="X"]').click();
+    await expect(page.locator("#modal_container")).not.toBeVisible();
+  });
+
+  test("double-click username opens account info modal", async ({ page }) => {
+    // Double-click on the first account username
+    await page.locator(".account-cell").first().dblclick();
+    await expect(page.locator("#modal_container")).toBeVisible();
+  });
+
+  test("delete button opens delete confirmation modal", async ({ page }) => {
+    // Click the delete icon for a non-current user
+    await page.locator(".delete-account").first().click();
+    await expect(page.locator("#modal_container")).toBeVisible();
+    await expect(page.locator("#modal_delete_acct_alert")).toBeVisible();
+  });
+
+  test("delete modal has Yes and No buttons", async ({ page }) => {
+    await page.locator(".delete-account").first().click();
+    await expect(page.locator("#calcel_delete_acct_btn")).toBeVisible();
+    await expect(page.locator("#sure_to_delete_acct_btn")).toBeVisible();
+  });
+
+  test("delete modal No button closes the modal", async ({ page }) => {
+    await page.locator(".delete-account").first().click();
+    await page.locator("#calcel_delete_acct_btn").click();
+    await expect(page.locator("#modal_container")).not.toBeVisible();
+  });
+
+  test("shows checkboxes for Set as Admin and Activate in create modal", async ({
+    page,
+  }) => {
+    await page.locator("#create_new_acct_btn").click();
+    await expect(
+      page.locator("#account_create_checkboxes_section"),
+    ).toBeVisible();
+    await expect(page.getByText("Set as admin.")).toBeVisible();
+    await expect(page.getByText("Activate now.")).toBeVisible();
+  });
+
+  test("search bar filters user list", async ({ page }) => {
+    // Search filters by username, not display name
+    await page.locator("#input_search").fill("user1");
+    await page.locator('img[alt="search"]').click();
+    // Should only show user1 (Alice Wang)
+    await expect(page.getByText("user1")).toBeVisible();
+  });
+});