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
@@ -0,0 +1,214 @@
|
||||
import type { Page } from "@playwright/test";
|
||||
import {
|
||||
authFile,
|
||||
createMedicationViaAPI,
|
||||
deleteAllMedicationsViaAPI,
|
||||
deleteMedicationViaAPI,
|
||||
expect,
|
||||
navigateTo,
|
||||
type TestMedication,
|
||||
test,
|
||||
} from "./fixtures";
|
||||
|
||||
/**
|
||||
* Helper: navigate to planner, wait for page to be ready, click Calculate,
|
||||
* and wait for results to appear.
|
||||
*/
|
||||
async function calculatePlanner(page: Page): Promise<void> {
|
||||
await page.waitForLoadState("networkidle");
|
||||
await page.locator('form.planner button[type="submit"]').click();
|
||||
// Wait for the results table to appear (more reliable than waitForResponse
|
||||
// since 429 responses would satisfy waitForResponse but not populate results)
|
||||
await expect(page.locator(".table")).toBeVisible({ timeout: 15000 });
|
||||
}
|
||||
|
||||
/**
|
||||
* Planner with Medication Data E2E Tests
|
||||
*
|
||||
* Creates medications via API, then verifies the demand calculator
|
||||
* produces correct results with status chips and usage data.
|
||||
*/
|
||||
test.describe("Planner with medications", () => {
|
||||
test.use({ storageState: authFile });
|
||||
test.describe.configure({ timeout: 60000 });
|
||||
|
||||
const MED_HIGH = "PlanData HighStock";
|
||||
const MED_LOW = "PlanData LowStock";
|
||||
|
||||
const todayMorning = (() => {
|
||||
const d = new Date();
|
||||
d.setHours(8, 0, 0, 0);
|
||||
const pad = (n: number) => n.toString().padStart(2, "0");
|
||||
return `${d.getFullYear()}-${pad(d.getMonth() + 1)}-${pad(d.getDate())}T${pad(d.getHours())}:${pad(d.getMinutes())}`;
|
||||
})();
|
||||
|
||||
const createdMeds: TestMedication[] = [];
|
||||
|
||||
test.beforeAll(async () => {
|
||||
// Clean up any leftover medications from previous test runs
|
||||
await deleteAllMedicationsViaAPI();
|
||||
// Medication with plenty of stock (60 pills)
|
||||
createdMeds.push(
|
||||
await createMedicationViaAPI({
|
||||
name: MED_HIGH,
|
||||
packageType: "blister",
|
||||
packCount: 2,
|
||||
blistersPerPack: 3,
|
||||
pillsPerBlister: 10,
|
||||
looseTablets: 0,
|
||||
intakes: [{ usage: 1, every: 1, start: todayMorning, intakeRemindersEnabled: false }],
|
||||
})
|
||||
);
|
||||
// Medication with very low stock (3 pills)
|
||||
createdMeds.push(
|
||||
await createMedicationViaAPI({
|
||||
name: MED_LOW,
|
||||
packageType: "blister",
|
||||
packCount: 1,
|
||||
blistersPerPack: 1,
|
||||
pillsPerBlister: 3,
|
||||
looseTablets: 0,
|
||||
intakes: [{ usage: 1, every: 1, start: todayMorning, intakeRemindersEnabled: false }],
|
||||
})
|
||||
);
|
||||
});
|
||||
|
||||
test.afterAll(async () => {
|
||||
await deleteAllMedicationsViaAPI();
|
||||
});
|
||||
|
||||
test("should show results table after calculating", async ({ page }) => {
|
||||
await navigateTo(page, "/planner");
|
||||
await calculatePlanner(page);
|
||||
|
||||
const resultsTable = page.locator(".table");
|
||||
await expect(resultsTable).toBeVisible({ timeout: 10000 });
|
||||
});
|
||||
|
||||
test("should show medication names in results", async ({ page }) => {
|
||||
await navigateTo(page, "/planner");
|
||||
await calculatePlanner(page);
|
||||
|
||||
const resultsTable = page.locator(".table");
|
||||
await expect(resultsTable).toBeVisible({ timeout: 10000 });
|
||||
|
||||
await expect(resultsTable.getByText(MED_HIGH)).toBeVisible();
|
||||
await expect(resultsTable.getByText(MED_LOW)).toBeVisible();
|
||||
});
|
||||
|
||||
test("should show status chips in results", async ({ page }) => {
|
||||
await navigateTo(page, "/planner");
|
||||
await calculatePlanner(page);
|
||||
|
||||
const resultsTable = page.locator(".table");
|
||||
await expect(resultsTable).toBeVisible({ timeout: 10000 });
|
||||
|
||||
const statusChips = resultsTable.locator(".status-chip");
|
||||
expect(await statusChips.count()).toBeGreaterThanOrEqual(2);
|
||||
});
|
||||
|
||||
test("should show usage data in results rows", async ({ page }) => {
|
||||
await navigateTo(page, "/planner");
|
||||
await calculatePlanner(page);
|
||||
|
||||
const resultsTable = page.locator(".table");
|
||||
await expect(resultsTable).toBeVisible({ timeout: 10000 });
|
||||
|
||||
const rows = resultsTable.locator(".table-row");
|
||||
expect(await rows.count()).toBeGreaterThanOrEqual(2);
|
||||
|
||||
const firstRowText = await rows.first().textContent();
|
||||
expect(firstRowText).toBeTruthy();
|
||||
// Check for "pill" (matches both "pill" and "pills")
|
||||
expect(firstRowText!.toLowerCase()).toContain("pill");
|
||||
});
|
||||
|
||||
test("should show danger status for low-stock medication over 90 days", async ({ page }) => {
|
||||
await navigateTo(page, "/planner");
|
||||
|
||||
// Set the "until" date to 90 days from now
|
||||
const dateInputs = page.locator('form.planner input[type="datetime-local"]');
|
||||
const untilInput = dateInputs.last();
|
||||
const fromValue = await dateInputs.first().inputValue();
|
||||
const fromDate = new Date(fromValue);
|
||||
const untilDate = new Date(fromDate.getTime() + 90 * 24 * 60 * 60 * 1000);
|
||||
const pad = (n: number) => n.toString().padStart(2, "0");
|
||||
const untilValue = `${untilDate.getFullYear()}-${pad(untilDate.getMonth() + 1)}-${pad(untilDate.getDate())}T${pad(untilDate.getHours())}:${pad(untilDate.getMinutes())}`;
|
||||
await untilInput.fill(untilValue);
|
||||
await calculatePlanner(page);
|
||||
|
||||
const resultsTable = page.locator(".table");
|
||||
await expect(resultsTable).toBeVisible({ timeout: 10000 });
|
||||
|
||||
// Low-stock med (3 pills) should have a danger chip over 90 days
|
||||
const dangerChips = resultsTable.locator(".status-chip.danger");
|
||||
expect(await dangerChips.count()).toBeGreaterThanOrEqual(1);
|
||||
});
|
||||
|
||||
test("should show Enough status for well-stocked medication over 7 days", async ({ page }) => {
|
||||
await navigateTo(page, "/planner");
|
||||
|
||||
// Set a short date range: 7 days
|
||||
const dateInputs = page.locator('form.planner input[type="datetime-local"]');
|
||||
const untilInput = dateInputs.last();
|
||||
const fromValue = await dateInputs.first().inputValue();
|
||||
const fromDate = new Date(fromValue);
|
||||
const untilDate = new Date(fromDate.getTime() + 7 * 24 * 60 * 60 * 1000);
|
||||
const pad = (n: number) => n.toString().padStart(2, "0");
|
||||
const untilValue = `${untilDate.getFullYear()}-${pad(untilDate.getMonth() + 1)}-${pad(untilDate.getDate())}T${pad(untilDate.getHours())}:${pad(untilDate.getMinutes())}`;
|
||||
await untilInput.fill(untilValue);
|
||||
await calculatePlanner(page);
|
||||
|
||||
const resultsTable = page.locator(".table");
|
||||
await expect(resultsTable).toBeVisible({ timeout: 10000 });
|
||||
|
||||
// With 60 pills and 7-day range, high-stock should be "Enough"
|
||||
const successChips = resultsTable.locator(".status-chip.success");
|
||||
expect(await successChips.count()).toBeGreaterThanOrEqual(1);
|
||||
});
|
||||
|
||||
test("should show table header with correct columns", async ({ page }) => {
|
||||
await navigateTo(page, "/planner");
|
||||
await calculatePlanner(page);
|
||||
|
||||
const resultsTable = page.locator(".table");
|
||||
await expect(resultsTable).toBeVisible({ timeout: 10000 });
|
||||
|
||||
const tableHead = resultsTable.locator(".table-head");
|
||||
await expect(tableHead).toBeVisible();
|
||||
await expect(tableHead.getByText(/Medication/i)).toBeVisible();
|
||||
await expect(tableHead.getByText(/Usage/i)).toBeVisible();
|
||||
await expect(tableHead.getByText(/Status/i)).toBeVisible();
|
||||
});
|
||||
|
||||
test("should reset form and clear results", async ({ page }) => {
|
||||
await navigateTo(page, "/planner");
|
||||
await calculatePlanner(page);
|
||||
|
||||
const resultsTable = page.locator(".table");
|
||||
await expect(resultsTable).toBeVisible({ timeout: 10000 });
|
||||
|
||||
// Click Reset
|
||||
await page.locator("form.planner button.ghost").click();
|
||||
|
||||
// Results should be cleared
|
||||
await expect(resultsTable).not.toBeVisible({ timeout: 5000 });
|
||||
});
|
||||
|
||||
test("should make results rows clickable for medication detail", async ({ page }) => {
|
||||
await navigateTo(page, "/planner");
|
||||
await calculatePlanner(page);
|
||||
|
||||
const resultsTable = page.locator(".table");
|
||||
await expect(resultsTable).toBeVisible({ timeout: 10000 });
|
||||
|
||||
// Click on a results row
|
||||
await resultsTable.locator(".table-row").first().click();
|
||||
|
||||
const modal = page.locator(".modal-overlay");
|
||||
await expect(modal).toBeVisible({ timeout: 5000 });
|
||||
|
||||
await page.locator("button.modal-close").click();
|
||||
await expect(modal).not.toBeVisible();
|
||||
});
|
||||
});
|
||||
Reference in New Issue
Block a user