groombook/app
Archived
13
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

E2E tests: add login and impersonation test coverage (GRO-77)

Browse Source 
- apps/e2e/tests/login.spec.ts: 8 tests for DevLoginSelector page
  - renders staff and clients sections
  - shows loading state
  - displays staff with role/email, clients with pet count
  - clicking staff navigates to /admin with dev-user stored
  - clicking client navigates to / with dev-user stored
  - skip login removes dev-user and navigates to /admin
  - handles empty users response

- apps/e2e/tests/impersonation.spec.ts: 8 tests for ImpersonationBanner
  - banner displays when session is active
  - shows reason and started time
  - End Session and Audit buttons visible
  - clicking End Session calls API and hides banner
  - Extend button appears when time < 5 mins and not extended
  - URL is cleaned when session ends

- apps/e2e/tests/fixtures.ts: added /api/dev/users mock for login tests
This commit is contained in:
Lint Roller
2026-03-21 23:47:01 +00:00
parent 4f233e7bd3
commit a466053000
3 changed files with 170 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files
apps/e2e/tests/fixtures.ts
+15
View File
@@ -10,12 +10,27 @@ import { test as base } from "@playwright/test";
*
* This ensures E2E tests render pages directly without the login redirect.
*/
const MOCK_DEV_USERS = {
staff: [
{ id: "staff-1", name: "Alice Groomer", email: "alice@groombook.dev", role: "groomer" },
{ id: "staff-2", name: "Bob Manager", email: "bob@groombook.dev", role: "manager" },
],
clients: [
{ id: "client-1", name: "Carol Client", email: "carol@example.com", petCount: 2 },
{ id: "client-2", name: "Dave Client", email: null, petCount: 1 },
],
};
export const test = base.extend({
page: async ({ page }, use) => {
// Mock the dev config endpoint so the app skips the auth-disabled redirect
await page.route("**/api/dev/config", (route) =>
route.fulfill({ json: { authDisabled: false } })
);
// Mock the dev users endpoint for login selector tests
await page.route("**/api/dev/users", (route) =>
route.fulfill({ json: MOCK_DEV_USERS })
);
// Mock the branding endpoint so BrandingProvider resolves immediately
await page.route("**/api/branding", (route) =>
route.fulfill({
apps/e2e/tests/impersonation.spec.ts
+86
View File
@@ -0,0 +1,86 @@
import { test, expect } from "./fixtures.js";
/**
* E2E tests for customer portal impersonation flow.
* Tests ImpersonationBanner display, actions, and session management.
*/
const MOCK_SESSION = {
id: "session-1",
staffId: "staff-1",
clientId: "client-1",
reason: "Testing customer booking flow",
status: "active",
startedAt: new Date().toISOString(),
endedAt: null,
expiresAt: new Date(Date.now() + 30 * 60 * 1000).toISOString(),
createdAt: new Date().toISOString(),
};
test.describe("ImpersonationBanner", () => {
test.beforeEach(async ({ page }) => {
await page.route("**/api/impersonation/session", (route) =>
route.fulfill({ json: MOCK_SESSION })
);
await page.route("**/api/impersonation/session/end", (route) =>
route.fulfill({ json: { status: "ended" } })
);
await page.route("**/api/impersonation/session/extend", (route) =>
route.fulfill({ json: { ...MOCK_SESSION, expiresAt: new Date(Date.now() + 60 * 60 * 1000).toISOString() } })
);
await page.route("**/api/impersonation/audit/**", (route) =>
route.fulfill({ json: { logs: [] } })
);
});
test("banner displays when session is active", async ({ page }) => {
await page.goto("/");
await expect(page.locator(".bg-amber-500")).toBeVisible();
await expect(page.getByText("STAFF VIEW")).toBeVisible();
});
test("banner shows reason when session has reason", async ({ page }) => {
await page.goto("/");
await expect(page.getByText(/Reason: Testing customer booking flow/)).toBeVisible();
});
test("banner shows started time", async ({ page }) => {
await page.goto("/");
await expect(page.getByText(/Started \d{1,2}:\d{2}/)).toBeVisible();
});
test("End Session button is visible", async ({ page }) => {
await page.goto("/");
await expect(page.getByRole("button", { name: /End Session/ })).toBeVisible();
});
test("Audit button is visible", async ({ page }) => {
await page.goto("/");
await expect(page.getByRole("button", { name: /Audit/ })).toBeVisible();
});
test("clicking End Session calls API and redirects", async ({ page }) => {
await page.goto("/");
await page.getByRole("button", { name: /End Session/ }).click();
await expect(page.getByText("STAFF VIEW")).not.toBeVisible();
});
test("Extend button appears when time is low and not extended", async ({ page }) => {
const lowTimeSession = {
...MOCK_SESSION,
expiresAt: new Date(Date.now() + 3 * 60 * 1000).toISOString(),
};
await page.route("**/api/impersonation/session", (route) =>
route.fulfill({ json: lowTimeSession })
);
await page.goto("/");
await page.waitForTimeout(1100);
await expect(page.getByRole("button", { name: /Extend/ })).toBeVisible();
});
test("URL is cleaned when session ends", async ({ page }) => {
await page.goto("/?impersonation=session-1");
await page.getByRole("button", { name: /End Session/ }).click();
await expect(page).not.toHaveURL(/impersonation=session-1/);
});
});
apps/e2e/tests/login.spec.ts
+69
View File
@@ -0,0 +1,69 @@
import { test, expect } from "./fixtures.js";
/**
* E2E tests for the DevLoginSelector page (/login).
* Tests staff/client selection, skip login, and navigation redirects.
*/
test.describe("DevLoginSelector", () => {
test("renders login page with staff and clients sections", async ({ page }) => {
await page.goto("/login");
await expect(page.getByText("Dev Login Selector")).toBeVisible();
await expect(page.getByText("Staff")).toBeVisible();
await expect(page.getByText("Clients")).toBeVisible();
});
test("shows loading state while fetching users", async ({ page }) => {
await page.goto("/login");
await expect(page.getByText("Loading users...")).toBeVisible();
});
test("displays staff users with role and email", async ({ page }) => {
await page.goto("/login");
await expect(page.getByText("Alice Groomer")).toBeVisible();
await expect(page.getByText("groomer · alice@groombook.dev")).toBeVisible();
await expect(page.getByText("Bob Manager")).toBeVisible();
await expect(page.getByText("manager · bob@groombook.dev")).toBeVisible();
});
test("displays client users with pet count", async ({ page }) => {
await page.goto("/login");
await expect(page.getByText("Carol Client")).toBeVisible();
await expect(page.getByText("2 pets · carol@example.com")).toBeVisible();
await expect(page.getByText("Dave Client")).toBeVisible();
await expect(page.getByText("1 pet")).toBeVisible();
});
test("clicking staff user navigates to /admin and stores dev-user", async ({ page }) => {
await page.goto("/login");
await page.getByText("Alice Groomer").click();
await expect(page).toHaveURL("/admin");
const devUser = await page.evaluate(() => localStorage.getItem("dev-user"));
expect(JSON.parse(devUser!)).toMatchObject({ type: "staff", id: "staff-1", name: "Alice Groomer" });
});
test("clicking client user navigates to / and stores dev-user", async ({ page }) => {
await page.goto("/login");
await page.getByText("Carol Client").click();
await expect(page).toHaveURL("/");
const devUser = await page.evaluate(() => localStorage.getItem("dev-user"));
expect(JSON.parse(devUser!)).toMatchObject({ type: "client", id: "client-1", name: "Carol Client" });
});
test("skip login removes dev-user and navigates to /admin", async ({ page }) => {
await page.goto("/login");
await page.getByText("Continue as default dev user").click();
await expect(page).toHaveURL("/admin");
const devUser = await page.evaluate(() => localStorage.getItem("dev-user"));
expect(devUser).toBeNull();
});
test("no users available shows empty sections", async ({ page }) => {
await page.route("**/api/dev/users", (route) =>
route.fulfill({ json: { staff: [], clients: [] } })
);
await page.goto("/login");
await expect(page.getByText("Staff")).toBeVisible();
await expect(page.getByText("Clients")).toBeVisible();
});
});