imacat/lucia-frontend
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Add Playwright E2E tests replacing Cypress with MSW integration

Browse Source 
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
依瑪貓
2026-03-22 16:43:32 +08:00
parent 67a723207f
commit aa2661b556
33 changed files with 2284 additions and 7 deletions
Download Patch File Download Diff File Expand all files Collapse all files

92
tests/e2e/specs/accountAdmin/accountDuplicationCheck.spec.ts Normal file
View File

@@ -0,0 +1,92 @@
// 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";
const MSG_ACCOUNT_NOT_UNIQUE = "Account has already been registered.";
test.describe("Account duplication check.", () => {
test.beforeEach(async ({ page, context }) => {
await loginWithMSW(context);
await page.goto("/account-admin");
await expect(page.getByText("Test Admin").first()).toBeVisible();
});
test("When an account already exists, show error message on confirm.", async ({
page,
}) => {
const testAccountName = "000000";
// First creation: account doesn't exist yet - override via MSW
await page.evaluate(() => {
const { http, HttpResponse } = window.__msw__;
window.__mswWorker__.use(
http.get("/api/users/000000", () =>
HttpResponse.json(
{ detail: "Not found" },
{ status: 404 },
),
),
);
});
await page.getByRole("button", { name: "Create New" }).click();
await page.locator("#input_account_field").fill(testAccountName);
await page.locator("#input_name_field").fill(testAccountName);
await page.locator("#input_first_pwd").fill(testAccountName);
await page
.locator(".checkbox-and-text")
.first()
.locator("div")
.first()
.click();
await expect(
page.getByRole("button", { name: "Confirm" }),
).toBeVisible();
await expect(
page.getByRole("button", { name: "Confirm" }),
).toBeEnabled();
await page.getByRole("button", { name: "Confirm" }).click();
await expect(page.getByText("Account added")).toBeVisible();
// Second creation: now account exists - override to return 200 via MSW
await page.evaluate(() => {
const { http, HttpResponse } = window.__msw__;
window.__mswWorker__.use(
http.get("/api/users/000000", () =>
HttpResponse.json({
username: "000000",
name: "000000",
is_admin: false,
is_active: true,
roles: [],
}),
),
);
});
await page.getByRole("button", { name: "Create New" }).click();
await page.locator("#input_account_field").fill(testAccountName);
await page.locator("#input_name_field").fill(testAccountName);
await page.locator("#input_first_pwd").fill(testAccountName);
await page
.locator(".checkbox-and-text")
.first()
.locator("div")
.first()
.click();
await expect(
page.getByRole("button", { name: "Confirm" }),
).toBeVisible();
await expect(
page.getByRole("button", { name: "Confirm" }),
).toBeEnabled();
await page.getByRole("button", { name: "Confirm" }).click();
await expect(page.getByText(MSG_ACCOUNT_NOT_UNIQUE)).toBeVisible();
});
});

44
tests/e2e/specs/accountAdmin/confirmPasswordMessage.spec.ts Normal file
View File

@@ -0,0 +1,44 @@
// 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("Password validation on create account.", () => {
test.beforeEach(async ({ page, context }) => {
await loginWithMSW(context);
await page.goto("/account-admin");
await expect(page.getByText("Test Admin").first()).toBeVisible();
});
test("When password is too short, confirm button stays disabled.", async ({
page,
}) => {
await page.getByRole("button", { name: "Create New" }).click();
await page.locator("#input_account_field").fill("unit-test-0001");
await page.locator("#input_name_field").fill("unit-test-0001");
// Password shorter than 6 characters
await page.locator("#input_first_pwd").fill("aaa");
await expect(
page.getByRole("button", { name: "Confirm" }),
).toBeDisabled();
});
test("When password meets minimum length, confirm button enables.", async ({
page,
}) => {
await page.getByRole("button", { name: "Create New" }).click();
await page.locator("#input_account_field").fill("unit-test-0001");
await page.locator("#input_name_field").fill("unit-test-0001");
await page.locator("#input_first_pwd").fill("aaaaaa");
await expect(
page.getByRole("button", { name: "Confirm" }),
).toBeEnabled();
});
});

64
tests/e2e/specs/accountAdmin/createAccount.spec.ts Normal file
View File

@@ -0,0 +1,64 @@
// 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("Create an Account", () => {
test.beforeEach(async ({ page, context }) => {
await loginWithMSW(context);
await page.goto("/account-admin");
await expect(page.getByText("Test Admin").first()).toBeVisible();
// Override: new usernames should return 404 (account doesn't exist yet)
await page.evaluate(() => {
const { http, HttpResponse } = window.__msw__;
window.__mswWorker__.use(
http.get("/api/users/:username", ({ params }) => {
if ((params.username as string).startsWith("unit-test-")) {
return HttpResponse.json(
{ detail: "Not found" },
{ status: 404 },
);
}
}),
);
});
});
test("Create a new account with admin role; should show saved message.", async ({
page,
}) => {
await page.getByRole("button", { name: "Create New" }).click();
await page.locator("#input_account_field").fill("unit-test-0001");
await page.locator("#input_name_field").fill("unit-test-0001");
await page.locator("#input_first_pwd").fill("aaaaaa");
await page
.locator(".checkbox-and-text")
.first()
.locator("div")
.first()
.click();
await expect(
page.getByRole("button", { name: "Confirm" }),
).toBeVisible();
await expect(
page.getByRole("button", { name: "Confirm" }),
).toBeEnabled();
await page.getByRole("button", { name: "Confirm" }).click();
await expect(page.getByText("Account added")).toBeVisible();
});
test("Confirm button is disabled when required fields are empty.", async ({
page,
}) => {
await page.getByRole("button", { name: "Create New" }).click();
await page.locator("#input_account_field").fill("test");
await expect(
page.getByRole("button", { name: "Confirm" }),
).toBeDisabled();
});
});

39
tests/e2e/specs/accountAdmin/deleteAccount.spec.ts Normal file
View File

@@ -0,0 +1,39 @@
// 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("Delete an Account", () => {
test.beforeEach(async ({ page, context }) => {
await loginWithMSW(context);
await page.goto("/account-admin");
await expect(page.getByText("Test Admin").first()).toBeVisible();
});
test("Delete button opens confirmation modal and deletes on confirm.", async ({
page,
}) => {
await page.locator("img.delete-account").first().click();
await expect(
page.getByText("ARE YOU SURE TO DELETE"),
).toBeVisible();
await page.locator("#sure_to_delete_acct_btn").click();
await expect(page.getByText("Account deleted")).toBeVisible();
});
test("Cancel button closes the delete confirmation modal.", async ({
page,
}) => {
await page.locator("img.delete-account").first().click();
await expect(
page.getByText("ARE YOU SURE TO DELETE"),
).toBeVisible();
await page.locator("#calcel_delete_acct_btn").click();
await expect(
page.getByText("ARE YOU SURE TO DELETE"),
).not.toBeVisible();
});
});

38
tests/e2e/specs/accountAdmin/editAccount.spec.ts Normal file
View File

@@ -0,0 +1,38 @@
// 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";
const MODAL_TITLE_ACCOUNT_EDIT = "Account Edit";
const MSG_ACCOUNT_EDITED = "Saved";
test.describe("Edit an account", () => {
test.beforeEach(async ({ page, context }) => {
await loginWithMSW(context);
await page.goto("/account-admin");
await expect(page.getByText("Test Admin").first()).toBeVisible();
});
test("Edit an account; modify name and see saved message.", async ({
page,
}) => {
await page.locator(".btn-edit").first().click();
await expect(
page.locator("h1", { hasText: MODAL_TITLE_ACCOUNT_EDIT }),
).toBeVisible();
await page.locator("#input_name_field").clear();
await page.locator("#input_name_field").fill("Updated Name");
await expect(
page.getByRole("button", { name: "Confirm" }),
).toBeVisible();
await expect(
page.getByRole("button", { name: "Confirm" }),
).toBeEnabled();
await page.getByRole("button", { name: "Confirm" }).click();
await expect(page.getByText(MSG_ACCOUNT_EDITED)).toBeVisible();
});
});