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/myAccount.spec.ts
+++ b/tests/e2e/specs/myAccount.spec.ts
@@ -0,0 +1,104 @@
+// 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("My Account Page", () => {
+  test.beforeEach(async ({ page, context }) => {
+    await loginWithMSW(context);
+    await page.goto("/my-account");
+    await expect(page.getByText("Test Admin").first()).toBeVisible();
+  });
+
+  test("displays user name heading", async ({ page }) => {
+    await expect(
+      page.locator("#general_acct_info_user_name"),
+    ).toBeVisible();
+    await expect(
+      page.locator("#general_acct_info_user_name"),
+    ).toContainText("Test Admin");
+  });
+
+  test("shows Admin badge for admin user", async ({ page }) => {
+    await expect(page.getByText("Admin").first()).toBeVisible();
+  });
+
+  test("shows visit count info", async ({ page }) => {
+    await expect(
+      page.locator("#general_account_visit_info"),
+    ).toBeVisible();
+    await expect(
+      page.locator("#general_account_visit_info"),
+    ).toContainText("Total visits");
+  });
+
+  test("displays account username (read-only)", async ({ page }) => {
+    await expect(page.getByText("Test Admin").first()).toBeVisible();
+  });
+
+  test("shows Edit button for name field", async ({ page }) => {
+    await expect(
+      page.getByRole("button", { name: "Edit" }),
+    ).toBeVisible();
+  });
+
+  test("clicking Edit shows input field and Save/Cancel buttons", async ({
+    page,
+  }) => {
+    await page.getByRole("button", { name: "Edit" }).first().click();
+    await expect(page.locator("#input_name_field")).toBeVisible();
+    await expect(
+      page.getByRole("button", { name: "Save" }).first(),
+    ).toBeVisible();
+    await expect(
+      page.getByRole("button", { name: "Cancel" }).first(),
+    ).toBeVisible();
+  });
+
+  test("clicking Cancel reverts name field to read-only", async ({
+    page,
+  }) => {
+    await page.getByRole("button", { name: "Edit" }).first().click();
+    await expect(page.locator("#input_name_field")).toBeVisible();
+    await page.getByRole("button", { name: "Cancel" }).first().click();
+    await expect(page.locator("#input_name_field")).not.toBeVisible();
+  });
+
+  test("shows Reset button for password field", async ({ page }) => {
+    await expect(
+      page.getByRole("button", { name: "Reset" }),
+    ).toBeVisible();
+  });
+
+  test("clicking Reset shows password input and Save/Cancel", async ({
+    page,
+  }) => {
+    await page.getByRole("button", { name: "Reset" }).click();
+    await expect(page.locator('input[type="password"]')).toBeVisible();
+    await expect(
+      page.getByRole("button", { name: "Save" }).first(),
+    ).toBeVisible();
+    await expect(
+      page.getByRole("button", { name: "Cancel" }).first(),
+    ).toBeVisible();
+  });
+
+  test("clicking Cancel on password field hides the input", async ({
+    page,
+  }) => {
+    await page.getByRole("button", { name: "Reset" }).click();
+    await expect(page.locator('input[type="password"]')).toBeVisible();
+    // The Cancel button for password is the second one
+    await page.locator(".cancel-btn").click();
+    await expect(
+      page.locator('input[type="password"]'),
+    ).not.toBeVisible();
+  });
+
+  test("shows Session section", async ({ page }) => {
+    await expect(page.getByText("Session")).toBeVisible();
+  });
+});