feat: expand Playwright E2E coverage (#155)
* 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
This commit is contained in:
Daniel Volz
GitHub
+79
-44
@@ -6,8 +6,31 @@ import { TEST_USER } from "./fixtures";
|
||||
const authFile = path.join(import.meta.dirname, ".auth", "user.json");
|
||||
|
||||
/**
|
||||
* Global setup for authentication
|
||||
* This runs before all tests to ensure a test user exists and stores the authenticated state
|
||||
* Check if a JWT token is still valid (not expired) without making a
|
||||
* network request. Returns `true` when the token has at least 2 minutes
|
||||
* of remaining validity.
|
||||
*/
|
||||
function isTokenValid(token: string): boolean {
|
||||
try {
|
||||
const payload = JSON.parse(Buffer.from(token.split(".")[1], "base64").toString());
|
||||
// Require at least 10 minutes of remaining validity to ensure the token
|
||||
// lasts through the entire test run (which can take 7+ minutes)
|
||||
return typeof payload.exp === "number" && Date.now() / 1000 < payload.exp - 600;
|
||||
} catch {
|
||||
return false;
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Global setup: ensure a test user exists and persist authenticated state.
|
||||
* Runs once before all test projects.
|
||||
*
|
||||
* Strategy:
|
||||
* 1. If a valid auth file exists whose access_token JWT has not expired,
|
||||
* reuse it without any network call (saves rate-limit budget).
|
||||
* 2. If auth is disabled (no login page), save state immediately.
|
||||
* 3. Try to register via API (idempotent — fails silently if user exists).
|
||||
* 4. Log in via the UI.
|
||||
*/
|
||||
setup("authenticate", async ({ page }) => {
|
||||
// Create .auth directory if it doesn't exist
|
||||
@@ -16,61 +39,73 @@ setup("authenticate", async ({ page }) => {
|
||||
fs.mkdirSync(authDir, { recursive: true });
|
||||
}
|
||||
|
||||
// ---- 1. Try to reuse an existing auth file (offline check) ----
|
||||
if (fs.existsSync(authFile)) {
|
||||
try {
|
||||
const saved = JSON.parse(fs.readFileSync(authFile, "utf-8"));
|
||||
const accessCookie = saved.cookies?.find((c: { name: string }) => c.name === "access_token");
|
||||
if (accessCookie?.value && isTokenValid(accessCookie.value)) {
|
||||
// Token still has enough validity — skip login entirely
|
||||
return;
|
||||
}
|
||||
} catch {
|
||||
// Invalid file — fall through to regular login
|
||||
}
|
||||
}
|
||||
|
||||
// ---- 2. Check if auth is disabled ----
|
||||
await page.goto("/");
|
||||
|
||||
// Wait for the app to fully load (network idle + content visible)
|
||||
await page.waitForLoadState("networkidle");
|
||||
await expect(page.locator("body")).not.toHaveText(/^$/, { timeout: 15000 });
|
||||
|
||||
// Check if auth is disabled (we can access dashboard directly)
|
||||
const dashboardVisible = await page
|
||||
.getByText(/dashboard|medications|schedule/i)
|
||||
const authDisabled = await page
|
||||
.locator("header.hero")
|
||||
.isVisible()
|
||||
.catch(() => false);
|
||||
if (dashboardVisible) {
|
||||
// Auth is disabled - save empty state and return
|
||||
if (authDisabled) {
|
||||
await page.context().storageState({ path: authFile });
|
||||
return;
|
||||
}
|
||||
|
||||
// Check if we need to register (first user setup)
|
||||
const needsSetup = await page
|
||||
.getByText(/create.*first.*user|create.*account|register|first user setup/i)
|
||||
// Wait for auth container
|
||||
await expect(page.locator(".auth-container")).toBeVisible({ timeout: 15000 });
|
||||
|
||||
// ---- 3. Ensure the test user exists ----
|
||||
const baseURL = process.env.PLAYWRIGHT_BASE_URL || "http://localhost:5173";
|
||||
await page.request
|
||||
.post(`${baseURL}/api/auth/register`, {
|
||||
data: { username: TEST_USER.username, password: TEST_USER.password },
|
||||
})
|
||||
.catch(() => {});
|
||||
|
||||
// ---- 4. Log in via UI ----
|
||||
const usernameField = page.locator("#username");
|
||||
const passwordField = page.locator("#password");
|
||||
|
||||
// Make sure we're on the login form (not register)
|
||||
const isOnRegister = await page
|
||||
.locator(".auth-subtitle")
|
||||
.filter({ hasText: /Create Account/i })
|
||||
.isVisible()
|
||||
.catch(() => false);
|
||||
|
||||
if (needsSetup) {
|
||||
// Register the test user
|
||||
const usernameField = page.getByLabel(/username/i);
|
||||
const passwordField = page.getByLabel(/password/i).first();
|
||||
|
||||
await usernameField.fill(TEST_USER.username);
|
||||
await passwordField.fill(TEST_USER.password);
|
||||
|
||||
// Look for register/create button
|
||||
const registerButton = page.getByRole("button", { name: /register|create|sign up/i });
|
||||
await registerButton.click();
|
||||
|
||||
// Wait for successful registration and redirect
|
||||
await expect(page.getByRole("navigation")).toBeVisible({ timeout: 15000 });
|
||||
} else {
|
||||
// Need to login
|
||||
const usernameField = page.getByLabel(/username/i);
|
||||
const passwordField = page.getByLabel(/password/i);
|
||||
|
||||
// Check if we're on login page
|
||||
if (await usernameField.isVisible().catch(() => false)) {
|
||||
await usernameField.fill(TEST_USER.username);
|
||||
await passwordField.fill(TEST_USER.password);
|
||||
|
||||
const loginButton = page.getByRole("button", { name: /sign in|log in|login/i });
|
||||
await loginButton.click();
|
||||
|
||||
// Wait for successful login
|
||||
await expect(page.getByRole("navigation")).toBeVisible({ timeout: 15000 });
|
||||
if (isOnRegister) {
|
||||
const switchBtn = page.locator("button.auth-link-btn");
|
||||
if (await switchBtn.isVisible().catch(() => false)) {
|
||||
await switchBtn.click();
|
||||
await page.waitForTimeout(500);
|
||||
}
|
||||
}
|
||||
|
||||
// Save the authenticated state
|
||||
await usernameField.clear();
|
||||
await usernameField.fill(TEST_USER.username);
|
||||
await passwordField.clear();
|
||||
await passwordField.fill(TEST_USER.password);
|
||||
|
||||
// Click the submit button (not the SSO button)
|
||||
await page.locator('button.auth-submit[type="submit"]').click();
|
||||
|
||||
// Wait for successful auth — app header should appear
|
||||
await expect(page.locator("header.hero")).toBeVisible({ timeout: 15000 });
|
||||
|
||||
// Persist authenticated state for all test projects
|
||||
await page.context().storageState({ path: authFile });
|
||||
});
|
||||
|
||||
Reference in New Issue
Block a user