98939877db
* feat: comprehensive Playwright E2E test rewrite Rewrite all E2E tests with correct CSS selectors, add new spec files, and implement robust auth handling to work within backend rate limits. Changes: - Rewrite fixtures/index.ts with JWT-based /auth/me mock to avoid 10 req/min rate limit on /auth/me during test runs - Rewrite auth.setup.ts with offline JWT validity check to reuse existing auth state across runs (saves login rate-limit budget) - Rewrite auth.spec.ts (6 tests) - login page, fields, submit, redirect guard, invalid credentials, login/register toggle - Rewrite dashboard.spec.ts (8 tests) - header, nav tabs, navigation, overview/schedules sections, days selector, redirect - Rewrite medications.spec.ts (8 tests) - form fields, stock inventory, package type toggle, intake schedule, save/cancel, unsaved changes guard - Rewrite settings.spec.ts (12 tests) - language, notification matrix, thresholds, calculation mode, toggle switch, export/import, user menu navigation - Create planner.spec.ts (9 tests) - form, date inputs, calculate, reset, checkbox, submit, tab state, eyebrow heading - Create schedule.spec.ts (12 tests) - timeline, days selector, past/future toggles, day blocks, today highlight, collapse/expand, overview table, share button - Update playwright.config.ts: remove mobile projects, enable webServer section for CI - Add .github/workflows/e2e.yml CI workflow for Playwright tests Total: 57 E2E tests across 6 spec files, all passing consistently across 5+ consecutive runs without backend restart. Closes #154 * feat: add comprehensive E2E data tests with medication CRUD, dashboard, planner, schedule Add 48 new Playwright E2E tests covering real medication data scenarios: - medication-crud: 14 tests for create/edit/delete/list via UI form - dashboard-data: 13 tests for overview table, timeline, dose tracking - planner-data: 9 tests for demand calculator with results/status chips - schedule-data: 11 tests for timeline, collapse/expand, dose mark/undo Infrastructure improvements: - Add API helpers (createMedicationViaAPI, deleteMedicationViaAPI, deleteAllMedicationsViaAPI) with retry logic for rate-limit resilience - Configure chromium-data project for serial execution with retry:1 - Add /auth/me mock to avoid rate-limit exhaustion on auth endpoint - Increase navigateTo reliability with networkidle waits - Increase auth token validity threshold from 2 to 10 minutes - Make backend rate limit configurable via RATE_LIMIT_MAX env var - Set RATE_LIMIT_MAX=300 in dev docker-compose for E2E test support Total suite: 57 empty-state + 48 data tests = 105 tests (chromium) * test: add E2E tests for medication editing, stock status, and share schedule - medication-edit.spec.ts: 10 tests covering generic name, notes, taken-by add/remove, expiry date, refill, intake schedule editing, adding intake rows, reminder toggle, and package type changes - stock-status.spec.ts: 12 tests verifying dashboard shows correct status chips (High/Normal/Warning/Danger) for different stock levels, overview table, reorder card, detail modal, and planner integration - share-schedule.spec.ts: 10 tests for taken-by badges, share button, share dialog, link generation, shared schedule page navigation, dose tracking on shared page, and notes display - fixtures/index.ts: add createShareTokenViaAPI, updateSettingsViaAPI helpers; expand createMedicationViaAPI with takenBy, notes, expiryDate - playwright.config.ts: update testMatch/testIgnore for new test files - docker-compose.dev.yml: increase RATE_LIMIT_MAX to 1000 for E2E tests * docs: refine release-manager instructions for CLI safety and commit-linked release notes * fix: resolve PR155 CI failures for frontend lint and e2e proxy * fix: stabilize auth-related e2e checks in CI
329 lines
10 KiB
TypeScript
329 lines
10 KiB
TypeScript
import * as fs from "node:fs";
|
|
import * as path from "node:path";
|
|
import { test as base, expect, type Page } from "@playwright/test";
|
|
|
|
/** Storage state path for authenticated sessions */
|
|
export const authFile = path.join(import.meta.dirname, "..", ".auth", "user.json");
|
|
|
|
/**
|
|
* Test user credentials for E2E tests.
|
|
* Override with PLAYWRIGHT_USERNAME / PLAYWRIGHT_PASSWORD env vars.
|
|
* The setup script registers this user if it doesn't exist and registration is enabled.
|
|
*/
|
|
export const TEST_USER = {
|
|
username: process.env.PLAYWRIGHT_USERNAME || "e2e-test-user",
|
|
password: process.env.PLAYWRIGHT_PASSWORD || "TestPassword123!",
|
|
} as const;
|
|
|
|
// ---------------------------------------------------------------------------
|
|
// Auth-me response mocking
|
|
// ---------------------------------------------------------------------------
|
|
// The backend rate-limits /auth/me to 10 req/min. Because every page
|
|
// navigation triggers the React app's auth-state check (which calls
|
|
// /auth/me), running 50+ E2E tests in a single suite easily exceeds the
|
|
// limit.
|
|
//
|
|
// Solution: build a synthetic /auth/me response from the JWT payload
|
|
// stored in the auth file. This avoids all /auth/me network requests
|
|
// from test pages, completely eliminating rate-limit issues while still
|
|
// testing the real backend for all other API calls.
|
|
// ---------------------------------------------------------------------------
|
|
let mockMeBody: string | null = null;
|
|
|
|
function getMockAuthMeBody(): string | null {
|
|
if (mockMeBody) return mockMeBody;
|
|
try {
|
|
const state = JSON.parse(fs.readFileSync(authFile, "utf-8"));
|
|
const token = state.cookies?.find((c: { name: string }) => c.name === "access_token")?.value;
|
|
if (!token) return null;
|
|
const payload = JSON.parse(Buffer.from(token.split(".")[1], "base64").toString());
|
|
mockMeBody = JSON.stringify({
|
|
id: payload.sub,
|
|
username: payload.username,
|
|
avatarUrl: null,
|
|
authProvider: "local",
|
|
createdAt: new Date().toISOString(),
|
|
lastLoginAt: new Date().toISOString(),
|
|
});
|
|
return mockMeBody;
|
|
} catch {
|
|
return null;
|
|
}
|
|
}
|
|
|
|
async function setupAuthMeMock(page: Page): Promise<void> {
|
|
const body = getMockAuthMeBody();
|
|
if (body) {
|
|
await page.route("**/api/auth/me", (route) =>
|
|
route.fulfill({ status: 200, contentType: "application/json", body })
|
|
);
|
|
}
|
|
}
|
|
|
|
/**
|
|
* Extended test fixture that automatically mocks /auth/me on every page
|
|
* using user data from the JWT in the stored auth file.
|
|
*
|
|
* Import this `test` (instead of `@playwright/test`) in every spec file
|
|
* that logs in via `storageState: authFile`.
|
|
*
|
|
* auth.spec.ts should keep importing from `@playwright/test` directly
|
|
* since it tests the unauthenticated flow.
|
|
*/
|
|
export const test = base.extend<{}>({
|
|
page: async ({ page }, use) => {
|
|
await setupAuthMeMock(page);
|
|
await use(page);
|
|
},
|
|
});
|
|
|
|
/**
|
|
* Wait for the app to be fully loaded past any loading/initializing screens.
|
|
* Includes a single retry with page reload to handle transient auth failures
|
|
* (e.g. brief race between context setup and cookie application).
|
|
*/
|
|
export async function waitForAppReady(page: Page): Promise<void> {
|
|
const hero = page.locator("header.hero");
|
|
try {
|
|
await expect(hero).toBeVisible({ timeout: 15000 });
|
|
} catch {
|
|
// Auth might have failed transiently — reload and retry once
|
|
await page.reload();
|
|
await expect(hero).toBeVisible({ timeout: 15000 });
|
|
}
|
|
}
|
|
|
|
/**
|
|
* Navigate to a page and wait for it to be ready.
|
|
*/
|
|
export async function navigateTo(page: Page, path: string): Promise<void> {
|
|
await page.goto(path);
|
|
await waitForAppReady(page);
|
|
await page.waitForLoadState("networkidle");
|
|
}
|
|
|
|
/**
|
|
* Click a navigation tab by its text.
|
|
*/
|
|
export async function clickNavTab(page: Page, tabName: string): Promise<void> {
|
|
await page.locator(`button.pill:has-text("${tabName}")`).click();
|
|
}
|
|
|
|
/**
|
|
* Open the user dropdown menu (when auth is enabled).
|
|
*/
|
|
export async function openUserMenu(page: Page): Promise<void> {
|
|
await page.locator(".user-menu-btn").click();
|
|
await expect(page.locator(".user-dropdown")).toBeVisible();
|
|
}
|
|
|
|
/**
|
|
* Sign out via the user dropdown menu.
|
|
*/
|
|
export async function signOut(page: Page): Promise<void> {
|
|
await openUserMenu(page);
|
|
await page.locator('.dropdown-item:has-text("Sign Out")').click();
|
|
// Should redirect to login page
|
|
await expect(page.locator(".auth-container")).toBeVisible({ timeout: 10000 });
|
|
}
|
|
|
|
// Re-export expect for convenience
|
|
export { expect };
|
|
|
|
// ---------------------------------------------------------------------------
|
|
// API helpers — create / delete medications via backend API
|
|
// ---------------------------------------------------------------------------
|
|
const API_BASE = process.env.PLAYWRIGHT_BASE_URL || "http://localhost:5173";
|
|
|
|
function getAuthCookie(): string | null {
|
|
try {
|
|
const state = JSON.parse(fs.readFileSync(authFile, "utf-8"));
|
|
return state.cookies?.find((c: { name: string }) => c.name === "access_token")?.value ?? null;
|
|
} catch {
|
|
return null;
|
|
}
|
|
}
|
|
|
|
/** Typed medication response (subset of fields we care about) */
|
|
export interface TestMedication {
|
|
id: number;
|
|
name: string;
|
|
genericName?: string | null;
|
|
takenBy?: string[];
|
|
notes?: string | null;
|
|
}
|
|
|
|
/** Typed share token response */
|
|
export interface TestShareToken {
|
|
token: string;
|
|
takenBy: string;
|
|
scheduleDays: number;
|
|
expiresAt: string;
|
|
}
|
|
|
|
/**
|
|
* Create a medication via the backend API. Returns the created medication
|
|
* including its `id`. Uses the stored auth cookie from the setup project.
|
|
* Includes automatic retry for rate-limit (429) responses.
|
|
*/
|
|
export async function createMedicationViaAPI(data: {
|
|
name: string;
|
|
genericName?: string;
|
|
takenBy?: string[];
|
|
notes?: string;
|
|
expiryDate?: string;
|
|
packageType?: "blister" | "bottle";
|
|
packCount?: number;
|
|
blistersPerPack?: number;
|
|
pillsPerBlister?: number;
|
|
looseTablets?: number;
|
|
totalPills?: number;
|
|
intakeRemindersEnabled?: boolean;
|
|
intakes?: {
|
|
usage: number;
|
|
every: number;
|
|
start: string;
|
|
intakeRemindersEnabled?: boolean;
|
|
takenBy?: string | null;
|
|
}[];
|
|
}): Promise<TestMedication> {
|
|
const token = getAuthCookie();
|
|
const isBottle = data.packageType === "bottle";
|
|
const body = {
|
|
packageType: isBottle ? "bottle" : "blister",
|
|
packCount: isBottle ? 1 : (data.packCount ?? 1),
|
|
blistersPerPack: isBottle ? 1 : (data.blistersPerPack ?? 1),
|
|
pillsPerBlister: isBottle ? 1 : (data.pillsPerBlister ?? 10),
|
|
// For bottles: looseTablets IS the current stock. Default to totalPills if not specified.
|
|
looseTablets: isBottle ? (data.looseTablets ?? data.totalPills ?? 0) : (data.looseTablets ?? 0),
|
|
totalPills: isBottle ? (data.totalPills ?? null) : null,
|
|
intakes: [
|
|
{
|
|
usage: 1,
|
|
every: 1,
|
|
start: new Date().toISOString().slice(0, 16),
|
|
intakeRemindersEnabled: false,
|
|
},
|
|
],
|
|
...data,
|
|
// Ensure takenBy is always an array (medication-level)
|
|
takenBy: data.takenBy ?? [],
|
|
};
|
|
|
|
for (let attempt = 0; attempt < 5; attempt++) {
|
|
const res = await fetch(`${API_BASE}/api/medications`, {
|
|
method: "POST",
|
|
headers: {
|
|
"Content-Type": "application/json",
|
|
...(token ? { Cookie: `access_token=${token}` } : {}),
|
|
},
|
|
body: JSON.stringify(body),
|
|
});
|
|
if (res.status === 429) {
|
|
// Rate limited — exponential backoff: 3s, 6s, 9s, 12s, 15s
|
|
await new Promise((r) => setTimeout(r, 3000 * (attempt + 1)));
|
|
continue;
|
|
}
|
|
if (!res.ok) {
|
|
const text = await res.text();
|
|
throw new Error(`Failed to create medication: ${res.status} ${text}`);
|
|
}
|
|
return res.json() as Promise<TestMedication>;
|
|
}
|
|
throw new Error("Failed to create medication after 5 retries (rate limited)");
|
|
}
|
|
|
|
/**
|
|
* Delete a medication via the backend API.
|
|
*/
|
|
export async function deleteMedicationViaAPI(id: number): Promise<void> {
|
|
const token = getAuthCookie();
|
|
await fetch(`${API_BASE}/api/medications/${id}`, {
|
|
method: "DELETE",
|
|
headers: token ? { Cookie: `access_token=${token}` } : {},
|
|
});
|
|
}
|
|
|
|
/**
|
|
* Delete ALL medications for the test user via the backend API.
|
|
* Includes retry logic for rate-limited responses.
|
|
*/
|
|
export async function deleteAllMedicationsViaAPI(): Promise<void> {
|
|
const token = getAuthCookie();
|
|
for (let attempt = 0; attempt < 3; attempt++) {
|
|
const res = await fetch(`${API_BASE}/api/medications`, {
|
|
headers: token ? { Cookie: `access_token=${token}` } : {},
|
|
});
|
|
if (res.status === 429) {
|
|
await new Promise((r) => setTimeout(r, 3000 * (attempt + 1)));
|
|
continue;
|
|
}
|
|
if (!res.ok) return;
|
|
const meds = (await res.json()) as TestMedication[];
|
|
for (const med of meds) {
|
|
for (let delAttempt = 0; delAttempt < 3; delAttempt++) {
|
|
const delRes = await fetch(`${API_BASE}/api/medications/${med.id}`, {
|
|
method: "DELETE",
|
|
headers: token ? { Cookie: `access_token=${token}` } : {},
|
|
});
|
|
if (delRes.status === 429) {
|
|
await new Promise((r) => setTimeout(r, 3000));
|
|
continue;
|
|
}
|
|
break;
|
|
}
|
|
}
|
|
return;
|
|
}
|
|
}
|
|
|
|
/**
|
|
* Create a share token via the backend API.
|
|
* Requires a medication with takenBy to exist first.
|
|
*/
|
|
export async function createShareTokenViaAPI(takenBy: string, scheduleDays = 30): Promise<TestShareToken> {
|
|
const token = getAuthCookie();
|
|
for (let attempt = 0; attempt < 5; attempt++) {
|
|
const res = await fetch(`${API_BASE}/api/share`, {
|
|
method: "POST",
|
|
headers: {
|
|
"Content-Type": "application/json",
|
|
...(token ? { Cookie: `access_token=${token}` } : {}),
|
|
},
|
|
body: JSON.stringify({ takenBy, scheduleDays }),
|
|
});
|
|
if (res.status === 429) {
|
|
await new Promise((r) => setTimeout(r, 3000 * (attempt + 1)));
|
|
continue;
|
|
}
|
|
if (!res.ok) {
|
|
const text = await res.text();
|
|
throw new Error(`Failed to create share token: ${res.status} ${text}`);
|
|
}
|
|
return res.json() as Promise<TestShareToken>;
|
|
}
|
|
throw new Error("Failed to create share token after 5 retries (rate limited)");
|
|
}
|
|
|
|
/**
|
|
* Update user settings via the backend API.
|
|
*/
|
|
export async function updateSettingsViaAPI(settings: Record<string, unknown>): Promise<void> {
|
|
const token = getAuthCookie();
|
|
for (let attempt = 0; attempt < 3; attempt++) {
|
|
const res = await fetch(`${API_BASE}/api/settings`, {
|
|
method: "PUT",
|
|
headers: {
|
|
"Content-Type": "application/json",
|
|
...(token ? { Cookie: `access_token=${token}` } : {}),
|
|
},
|
|
body: JSON.stringify(settings),
|
|
});
|
|
if (res.status === 429) {
|
|
await new Promise((r) => setTimeout(r, 3000 * (attempt + 1)));
|
|
continue;
|
|
}
|
|
if (res.ok) return;
|
|
}
|
|
}
|