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
+100
-159
@@ -1,200 +1,141 @@
|
||||
import * as path from "node:path";
|
||||
import { expect, test } from "@playwright/test";
|
||||
|
||||
const authFile = path.join(import.meta.dirname, ".auth", "user.json");
|
||||
|
||||
/**
|
||||
* Helper to wait for the medication form to be visible after clicking add
|
||||
*/
|
||||
async function waitForFormVisible(page: import("@playwright/test").Page): Promise<void> {
|
||||
// Wait for form elements to appear (name field or form container)
|
||||
await page
|
||||
.getByLabel(/commercial.*name|name/i)
|
||||
.first()
|
||||
.waitFor({ state: "visible", timeout: 5000 })
|
||||
.catch(() => {
|
||||
// Form might not be available, that's ok
|
||||
});
|
||||
}
|
||||
import { expect } from "@playwright/test";
|
||||
import { authFile, navigateTo, test } from "./fixtures";
|
||||
|
||||
/**
|
||||
* Medications Page E2E Tests
|
||||
*
|
||||
* These tests verify the medications management functionality including
|
||||
* viewing, adding, editing, and deleting medications.
|
||||
* Verifies the medication list, add/edit form, CRUD operations,
|
||||
* and form validation.
|
||||
*/
|
||||
test.describe("Medications Page", () => {
|
||||
test.use({ storageState: authFile });
|
||||
|
||||
test("should display medications page", async ({ page }) => {
|
||||
await page.goto("/medications");
|
||||
await navigateTo(page, "/medications");
|
||||
|
||||
// Wait for app to load
|
||||
await expect(page.locator("body")).not.toContainText(/Loading\.\.\.|Initializing\.\.\./, {
|
||||
timeout: 10000,
|
||||
});
|
||||
|
||||
// Should display navigation
|
||||
await expect(page.getByRole("navigation")).toBeVisible();
|
||||
|
||||
// Page should have medications-related content
|
||||
const hasContent =
|
||||
(await page
|
||||
.getByText(/medications|inventory|add/i)
|
||||
.isVisible()
|
||||
.catch(() => false)) ||
|
||||
(await page
|
||||
.getByText(/no medications/i)
|
||||
.isVisible()
|
||||
.catch(() => false));
|
||||
|
||||
expect(hasContent).toBeTruthy();
|
||||
// Medications tab should be active
|
||||
await expect(page.locator('button.pill.primary:has-text("Medications")')).toBeVisible();
|
||||
});
|
||||
|
||||
test("should have medication form fields", async ({ page }) => {
|
||||
await page.goto("/medications");
|
||||
test("should show medication list or empty state", async ({ page }) => {
|
||||
await navigateTo(page, "/medications");
|
||||
|
||||
await expect(page.getByRole("navigation")).toBeVisible({ timeout: 10000 });
|
||||
// Should show either medication entries or the new medication form
|
||||
const listTitle = page.locator("h2").filter({ hasText: /Medication list/i });
|
||||
const formTitle = page.locator("h2").filter({ hasText: /New medication/i });
|
||||
|
||||
// Look for the medication form fields (may be visible immediately or after clicking add)
|
||||
const addButton = page.getByRole("button", { name: /add|new|create/i });
|
||||
const hasList = await listTitle.isVisible().catch(() => false);
|
||||
const hasForm = await formTitle.isVisible().catch(() => false);
|
||||
|
||||
if (await addButton.isVisible().catch(() => false)) {
|
||||
// Form might be hidden, click add button
|
||||
await addButton.click();
|
||||
await waitForFormVisible(page);
|
||||
}
|
||||
|
||||
// Check for form fields - commercial name is required
|
||||
const hasNameField =
|
||||
(await page
|
||||
.getByLabel(/commercial.*name|name/i)
|
||||
.isVisible()
|
||||
.catch(() => false)) ||
|
||||
(await page
|
||||
.getByPlaceholder(/ozempic|medication/i)
|
||||
.isVisible()
|
||||
.catch(() => false));
|
||||
|
||||
// The form should have name field at minimum
|
||||
expect(hasNameField).toBeTruthy();
|
||||
expect(hasList || hasForm).toBeTruthy();
|
||||
});
|
||||
|
||||
test("should validate required fields on submit", async ({ page }) => {
|
||||
await page.goto("/medications");
|
||||
test("should display the medication form with required fields", async ({ page }) => {
|
||||
await navigateTo(page, "/medications");
|
||||
|
||||
await expect(page.getByRole("navigation")).toBeVisible({ timeout: 10000 });
|
||||
// The form should always be visible on the medications page
|
||||
const commercialName = page.getByLabel(/Commercial Name/i);
|
||||
await expect(commercialName).toBeVisible();
|
||||
|
||||
// Find or trigger the add medication form
|
||||
const addButton = page.getByRole("button", { name: /add|new|create/i });
|
||||
if (await addButton.isVisible().catch(() => false)) {
|
||||
await addButton.click();
|
||||
await waitForFormVisible(page);
|
||||
}
|
||||
// Package type selector should exist
|
||||
await expect(page.getByText(/Package Type/i)).toBeVisible();
|
||||
|
||||
// Try to submit without filling required fields
|
||||
const saveButton = page.getByRole("button", { name: /save|submit|add.*medication/i });
|
||||
if (await saveButton.isVisible().catch(() => false)) {
|
||||
await saveButton.click();
|
||||
// Intake schedule section should exist
|
||||
await expect(page.getByText(/Intake schedule/i)).toBeVisible();
|
||||
});
|
||||
|
||||
// Should show validation error or prevent submission
|
||||
const nameField = page.getByLabel(/commercial.*name|name/i).first();
|
||||
if (await nameField.isVisible().catch(() => false)) {
|
||||
const isInvalid =
|
||||
(await nameField.evaluate((el) => (el as HTMLInputElement).validity.valueMissing).catch(() => false)) ||
|
||||
(await page
|
||||
.getByText(/required|invalid|error/i)
|
||||
.isVisible()
|
||||
.catch(() => false));
|
||||
test("should fill in medication details", async ({ page }) => {
|
||||
await navigateTo(page, "/medications");
|
||||
|
||||
expect(isInvalid || true).toBeTruthy();
|
||||
}
|
||||
const nameField = page.getByLabel(/Commercial Name/i);
|
||||
await nameField.fill("Test Aspirin");
|
||||
await expect(nameField).toHaveValue("Test Aspirin");
|
||||
|
||||
const genericField = page.getByLabel(/Generic Name/i);
|
||||
await genericField.fill("Acetylsalicylic acid");
|
||||
await expect(genericField).toHaveValue("Acetylsalicylic acid");
|
||||
});
|
||||
|
||||
test("should have stock inventory fields", async ({ page }) => {
|
||||
await navigateTo(page, "/medications");
|
||||
|
||||
// Stock fields should be visible
|
||||
await expect(page.getByLabel(/^Packs$/i)).toBeVisible();
|
||||
|
||||
// Either blister or bottle fields depending on package type
|
||||
const blistersField = page.getByLabel(/Blisters per pack/i);
|
||||
const pillsField = page.getByLabel(/Pills per blister/i);
|
||||
const capacityField = page.getByLabel(/Total Capacity/i);
|
||||
|
||||
const hasBlister = await blistersField.isVisible().catch(() => false);
|
||||
const hasBottle = await capacityField.isVisible().catch(() => false);
|
||||
|
||||
expect(hasBlister || hasBottle).toBeTruthy();
|
||||
});
|
||||
|
||||
test("should toggle package type between blister and bottle", async ({ page }) => {
|
||||
await navigateTo(page, "/medications");
|
||||
|
||||
// Find the package type radio buttons or selector
|
||||
const blisterOption = page.getByText(/Blister Pack/i);
|
||||
const bottleOption = page.getByText(/Pill Bottle/i);
|
||||
|
||||
if (await blisterOption.isVisible().catch(() => false)) {
|
||||
// Switch to bottle
|
||||
await bottleOption.click();
|
||||
// Bottle-specific fields should appear
|
||||
await expect(page.getByLabel(/Total Capacity/i)).toBeVisible();
|
||||
|
||||
// Switch back to blister
|
||||
await blisterOption.click();
|
||||
await expect(page.getByLabel(/Blisters per pack/i)).toBeVisible();
|
||||
}
|
||||
});
|
||||
|
||||
test("should allow entering medication details", async ({ page }) => {
|
||||
await page.goto("/medications");
|
||||
test("should have intake schedule with add button", async ({ page }) => {
|
||||
await navigateTo(page, "/medications");
|
||||
|
||||
await expect(page.getByRole("navigation")).toBeVisible({ timeout: 10000 });
|
||||
// Intake schedule section
|
||||
const scheduleSection = page.getByText(/Intake schedule/i);
|
||||
await expect(scheduleSection).toBeVisible();
|
||||
|
||||
// Find or trigger the add medication form
|
||||
const addButton = page.getByRole("button", { name: /add|new|create/i });
|
||||
if (await addButton.isVisible().catch(() => false)) {
|
||||
await addButton.click();
|
||||
await waitForFormVisible(page);
|
||||
}
|
||||
// Should have at least one intake entry
|
||||
await expect(page.getByText(/Usage \(pills\)|Every \(days\)/i).first()).toBeVisible();
|
||||
|
||||
// Fill in medication details
|
||||
const nameField = page.getByLabel(/commercial.*name|name/i).first();
|
||||
if (await nameField.isVisible().catch(() => false)) {
|
||||
await nameField.fill("Test Medication");
|
||||
|
||||
// Verify the value was entered
|
||||
await expect(nameField).toHaveValue("Test Medication");
|
||||
}
|
||||
|
||||
// Try to fill generic name if available
|
||||
const genericField = page.getByLabel(/generic/i);
|
||||
if (await genericField.isVisible().catch(() => false)) {
|
||||
await genericField.fill("Test Generic");
|
||||
await expect(genericField).toHaveValue("Test Generic");
|
||||
}
|
||||
// Should have an add intake button
|
||||
const addIntake = page.getByRole("button", { name: /Intake/i });
|
||||
await expect(addIntake).toBeVisible();
|
||||
});
|
||||
|
||||
test("should display intake schedule section", async ({ page }) => {
|
||||
await page.goto("/medications");
|
||||
test("should have save and cancel buttons", async ({ page }) => {
|
||||
await navigateTo(page, "/medications");
|
||||
|
||||
await expect(page.getByRole("navigation")).toBeVisible({ timeout: 10000 });
|
||||
// Fill in a name to make the form dirty
|
||||
await page.getByLabel(/Commercial Name/i).fill("Test");
|
||||
|
||||
// Find or trigger the add medication form
|
||||
const addButton = page.getByRole("button", { name: /add|new|create/i });
|
||||
if (await addButton.isVisible().catch(() => false)) {
|
||||
await addButton.click();
|
||||
await waitForFormVisible(page);
|
||||
}
|
||||
|
||||
// Look for intake schedule section
|
||||
const hasScheduleSection =
|
||||
(await page
|
||||
.getByText(/intake.*schedule|dosage|usage/i)
|
||||
.isVisible()
|
||||
.catch(() => false)) ||
|
||||
(await page
|
||||
.getByText(/every.*days|pills/i)
|
||||
.isVisible()
|
||||
.catch(() => false));
|
||||
|
||||
expect(hasScheduleSection).toBeTruthy();
|
||||
// Save button
|
||||
const saveButton = page.getByRole("button", { name: /Save|Add Medication/i });
|
||||
await expect(saveButton).toBeVisible();
|
||||
});
|
||||
|
||||
test("should have cancel functionality", async ({ page }) => {
|
||||
await page.goto("/medications");
|
||||
test("should prevent navigation with unsaved changes", async ({ page }) => {
|
||||
await navigateTo(page, "/medications");
|
||||
|
||||
await expect(page.getByRole("navigation")).toBeVisible({ timeout: 10000 });
|
||||
// Fill in the form to create unsaved changes
|
||||
await page.getByLabel(/Commercial Name/i).fill("Unsaved Medication");
|
||||
|
||||
// Find or trigger the add medication form
|
||||
const addButton = page.getByRole("button", { name: /add|new|create/i });
|
||||
if (await addButton.isVisible().catch(() => false)) {
|
||||
await addButton.click();
|
||||
await waitForFormVisible(page);
|
||||
// Try to navigate away
|
||||
await page.locator('button.pill:has-text("Dashboard")').click();
|
||||
|
||||
// Fill in some data
|
||||
const nameField = page.getByLabel(/commercial.*name|name/i).first();
|
||||
if (await nameField.isVisible().catch(() => false)) {
|
||||
await nameField.fill("Test Medication");
|
||||
}
|
||||
// Should show unsaved changes warning modal
|
||||
const modal = page.locator(".confirm-modal-overlay, .modal-overlay");
|
||||
const hasWarning = await modal.isVisible().catch(() => false);
|
||||
|
||||
// Look for cancel button
|
||||
const cancelButton = page.getByRole("button", { name: /cancel|close|discard/i });
|
||||
if (await cancelButton.isVisible().catch(() => false)) {
|
||||
await cancelButton.click();
|
||||
|
||||
// Wait for form to be hidden or reset
|
||||
await expect(nameField)
|
||||
.not.toHaveValue("Test Medication")
|
||||
.catch(() => {
|
||||
// Form might be completely hidden, that's also acceptable
|
||||
});
|
||||
if (hasWarning) {
|
||||
// Cancel to stay on page
|
||||
const cancelBtn = page.getByRole("button", { name: /Cancel|Stay/i });
|
||||
if (await cancelBtn.isVisible().catch(() => false)) {
|
||||
await cancelBtn.click();
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
Reference in New Issue
Block a user