Alo/phaseflow
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Fix E2E test reliability issues and stale data bugs

Browse Source 
- Fix race conditions: Set workers: 1 since all tests share test user state
- Fix stale data: GET /api/user and /api/cycle/current now fetch fresh data
  from database instead of returning stale PocketBase auth store cache
- Fix timing: Replace waitForTimeout with retry-based Playwright assertions
- Fix mobile test: Use exact heading match to avoid strict mode violation
- Add test user setup: Include notificationTime and update rule for users

All 1014 unit tests and 190 E2E tests pass.

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
This commit is contained in:
Petru
2026-01-13 20:23:32 +00:00
parent 7dd08ab5ce
commit 00b84d0b22
12 changed files with 212 additions and 154 deletions
Download Patch File Download Diff File Expand all files Collapse all files

160
e2e/dashboard.spec.ts
View File

@@ -129,12 +129,13 @@ test.describe("dashboard", () => {
// Click the toggle
await toggleCheckbox.click();
// Wait a moment for the API call
await page.waitForTimeout(500);
// Toggle should change state
const afterChecked = await toggleCheckbox.isChecked();
expect(afterChecked).not.toBe(initialChecked);
// Wait for the checkbox state to change using retry-based assertion
// The API call completes and React re-renders asynchronously
if (initialChecked) {
await expect(toggleCheckbox).not.toBeChecked({ timeout: 5000 });
} else {
await expect(toggleCheckbox).toBeChecked({ timeout: 5000 });
}
} else {
test.skip();
}
@@ -244,59 +245,39 @@ test.describe("dashboard", () => {
});
test("displays cycle day in 'Day X' format", async ({ page }) => {
// Wait for dashboard to finish loading
await page.waitForLoadState("networkidle");
// Look for "Day" followed by a number
const cycleDayText = page.getByText(/Day \d+/i);
const hasCycleDay = await cycleDayText
.first()
.isVisible()
.catch(() => false);
// Wait for either cycle day or onboarding - both are valid states
// Use Playwright's expect with retry for reliable detection
const cycleDayText = page.getByText(/Day \d+/i).first();
const onboarding = page.getByText(/set.*period|log.*period/i).first();
// Either has cycle day or onboarding (both valid states)
if (!hasCycleDay) {
const onboarding = page.getByText(/set.*period|log.*period/i);
const hasOnboarding = await onboarding
.first()
.isVisible()
.catch(() => false);
expect(hasCycleDay || hasOnboarding).toBe(true);
try {
// First try waiting for cycle day with a short timeout
await expect(cycleDayText).toBeVisible({ timeout: 5000 });
} catch {
// If no cycle day, expect onboarding banner
await expect(onboarding).toBeVisible({ timeout: 5000 });
}
});
test("displays current phase name", async ({ page }) => {
// Wait for dashboard to finish loading
await page.waitForLoadState("networkidle");
// Look for phase names
const phaseNames = [
"MENSTRUAL",
"FOLLICULAR",
"OVULATION",
"EARLY_LUTEAL",
"LATE_LUTEAL",
];
let foundPhase = false;
// Wait for either a phase name or onboarding - both are valid states
const phaseRegex =
/MENSTRUAL|FOLLICULAR|OVULATION|EARLY_LUTEAL|LATE_LUTEAL/i;
const phaseText = page.getByText(phaseRegex).first();
const onboarding = page.getByText(/set.*period|log.*period/i).first();
for (const phase of phaseNames) {
const phaseText = page.getByText(new RegExp(phase, "i"));
const isVisible = await phaseText
.first()
.isVisible()
.catch(() => false);
if (isVisible) {
foundPhase = true;
break;
}
}
// Either has phase or shows onboarding
if (!foundPhase) {
const onboarding = page.getByText(/set.*period|log.*period/i);
const hasOnboarding = await onboarding
.first()
.isVisible()
.catch(() => false);
expect(foundPhase || hasOnboarding).toBe(true);
try {
// First try waiting for a phase name with a short timeout
await expect(phaseText).toBeVisible({ timeout: 5000 });
} catch {
// If no phase, expect onboarding banner
await expect(onboarding).toBeVisible({ timeout: 5000 });
}
});
@@ -381,81 +362,62 @@ test.describe("dashboard", () => {
});
test("displays seed cycling recommendation", async ({ page }) => {
// Wait for dashboard to finish loading
await page.waitForLoadState("networkidle");
// Look for seed names (flax, pumpkin, sesame, sunflower)
const seedText = page.getByText(/flax|pumpkin|sesame|sunflower/i);
const hasSeeds = await seedText
.first()
.isVisible()
.catch(() => false);
// Wait for either seed info or onboarding - both are valid states
const seedText = page.getByText(/flax|pumpkin|sesame|sunflower/i).first();
const onboarding = page.getByText(/set.*period|log.*period/i).first();
// Either has seeds info or onboarding
if (!hasSeeds) {
const onboarding = page.getByText(/set.*period|log.*period/i);
const hasOnboarding = await onboarding
.first()
.isVisible()
.catch(() => false);
expect(hasSeeds || hasOnboarding).toBe(true);
try {
await expect(seedText).toBeVisible({ timeout: 5000 });
} catch {
await expect(onboarding).toBeVisible({ timeout: 5000 });
}
});
test("displays carbohydrate range", async ({ page }) => {
// Wait for dashboard to finish loading
await page.waitForLoadState("networkidle");
// Look for carb-related text
const carbText = page.getByText(/carb|carbohydrate/i);
const hasCarbs = await carbText
.first()
.isVisible()
.catch(() => false);
// Wait for either carb info or onboarding - both are valid states
const carbText = page.getByText(/carb|carbohydrate/i).first();
const onboarding = page.getByText(/set.*period|log.*period/i).first();
if (!hasCarbs) {
const onboarding = page.getByText(/set.*period|log.*period/i);
const hasOnboarding = await onboarding
.first()
.isVisible()
.catch(() => false);
expect(hasCarbs || hasOnboarding).toBe(true);
try {
await expect(carbText).toBeVisible({ timeout: 5000 });
} catch {
await expect(onboarding).toBeVisible({ timeout: 5000 });
}
});
test("displays keto guidance", async ({ page }) => {
// Wait for dashboard to finish loading
await page.waitForLoadState("networkidle");
// Look for keto-related text
const ketoText = page.getByText(/keto/i);
const hasKeto = await ketoText
.first()
.isVisible()
.catch(() => false);
// Wait for either keto info or onboarding - both are valid states
const ketoText = page.getByText(/keto/i).first();
const onboarding = page.getByText(/set.*period|log.*period/i).first();
if (!hasKeto) {
const onboarding = page.getByText(/set.*period|log.*period/i);
const hasOnboarding = await onboarding
.first()
.isVisible()
.catch(() => false);
expect(hasKeto || hasOnboarding).toBe(true);
try {
await expect(ketoText).toBeVisible({ timeout: 5000 });
} catch {
await expect(onboarding).toBeVisible({ timeout: 5000 });
}
});
test("displays nutrition section header", async ({ page }) => {
// Wait for dashboard to finish loading
await page.waitForLoadState("networkidle");
// Nutrition panel should have a header
// Wait for nutrition header or text
const nutritionHeader = page.getByRole("heading", { name: /nutrition/i });
const hasHeader = await nutritionHeader.isVisible().catch(() => false);
const nutritionText = page.getByText(/nutrition/i).first();
if (!hasHeader) {
// May be text label instead of heading
const nutritionText = page.getByText(/nutrition/i);
const hasText = await nutritionText
.first()
.isVisible()
.catch(() => false);
expect(hasHeader || hasText).toBe(true);
try {
await expect(nutritionHeader).toBeVisible({ timeout: 5000 });
} catch {
await expect(nutritionText).toBeVisible({ timeout: 5000 });
}
});
});

13
e2e/garmin.spec.ts
View File

@@ -40,6 +40,19 @@ test.describe("garmin connection", () => {
await page.waitForURL("/", { timeout: 10000 });
await page.goto("/settings/garmin");
await page.waitForLoadState("networkidle");
// Clean up: Disconnect if already connected to ensure clean state
const disconnectButton = page.getByRole("button", {
name: /disconnect/i,
});
const isConnected = await disconnectButton.isVisible().catch(() => false);
if (isConnected) {
await disconnectButton.click();
await page.waitForTimeout(1000);
// Wait for disconnect to complete
await page.waitForLoadState("networkidle");
}
});
test("shows not connected initially for new user", async ({ page }) => {

11
e2e/mobile.spec.ts
View File

@@ -140,15 +140,18 @@ test.describe("mobile viewport", () => {
const viewportSize = page.viewportSize();
expect(viewportSize?.width).toBe(375);
// Calendar heading should be visible
const heading = page.getByRole("heading", { name: /calendar/i });
await expect(heading).toBeVisible();
// Calendar page title heading should be visible (exact match to avoid "Calendar Subscription")
const heading = page.getByRole("heading", {
name: "Calendar",
exact: true,
});
await expect(heading).toBeVisible({ timeout: 10000 });
// Calendar grid should be visible
const calendarGrid = page
.getByRole("grid")
.or(page.locator('[data-testid="month-view"]'));
await expect(calendarGrid).toBeVisible();
await expect(calendarGrid).toBeVisible({ timeout: 5000 });
// Month navigation should be visible
const monthYear = page.getByText(

31
e2e/plan.spec.ts
View File

@@ -53,31 +53,32 @@ test.describe("plan page", () => {
test("shows current cycle status section", async ({ page }) => {
await page.waitForLoadState("networkidle");
// Look for Current Status section
// Wait for page to finish loading - look for Current Status or error state
const statusSection = page.getByRole("heading", {
name: "Current Status",
});
const hasStatus = await statusSection.isVisible().catch(() => false);
// Use text content to find error alert (avoid Next.js route announcer)
const errorAlert = page.getByText(/error:/i);
if (hasStatus) {
await expect(statusSection).toBeVisible();
try {
// Wait for Current Status section to be visible (data loaded successfully)
await expect(statusSection).toBeVisible({ timeout: 10000 });
// Should show day number
await expect(page.getByText(/day \d+/i)).toBeVisible();
await expect(page.getByText(/day \d+/i)).toBeVisible({ timeout: 5000 });
// Should show training type
await expect(page.getByText(/training type:/i)).toBeVisible();
await expect(page.getByText(/training type:/i)).toBeVisible({
timeout: 5000,
});
// Should show weekly limit
await expect(page.getByText(/weekly limit:/i)).toBeVisible();
} else {
// If no status, should see loading or error state
const loading = page.getByText(/loading/i);
const error = page.getByRole("alert");
const hasLoading = await loading.isVisible().catch(() => false);
const hasError = await error.isVisible().catch(() => false);
expect(hasLoading || hasError).toBe(true);
await expect(page.getByText(/weekly limit:/i)).toBeVisible({
timeout: 5000,
});
} catch {
// If status section not visible, check for error alert
await expect(errorAlert).toBeVisible({ timeout: 5000 });
}
});

7
e2e/pocketbase-harness.ts
View File

@@ -140,6 +140,12 @@ async function addUserFields(pb: PocketBase): Promise<void> {
* Sets up API rules for collections to allow user access.
*/
async function setupApiRules(pb: PocketBase): Promise<void> {
// Allow users to update their own user record
const usersCollection = await pb.collections.getOne("users");
await pb.collections.update(usersCollection.id, {
updateRule: "id = @request.auth.id",
});
// Allow users to read/write their own period_logs
const periodLogs = await pb.collections.getOne("period_logs");
await pb.collections.update(periodLogs.id, {
@@ -202,6 +208,7 @@ async function createTestUser(
verified: true,
lastPeriodDate,
cycleLength: 28,
notificationTime: "07:00",
timezone: "UTC",
});

40
e2e/settings.spec.ts
View File

@@ -435,10 +435,12 @@ test.describe("settings", () => {
const newValue = originalValue === "08:00" ? "09:00" : "08:00";
await notificationTimeInput.fill(newValue);
// Save
// Save and wait for success toast
const saveButton = page.getByRole("button", { name: /save/i });
await saveButton.click();
await page.waitForTimeout(1500);
await expect(page.getByText(/settings saved successfully/i)).toBeVisible({
timeout: 10000,
});
// Reload the page
await page.reload();
@@ -453,7 +455,9 @@ test.describe("settings", () => {
// Restore original value
await notificationTimeAfter.fill(originalValue);
await saveButton.click();
await page.waitForTimeout(500);
await expect(page.getByText(/settings saved successfully/i)).toBeVisible({
timeout: 10000,
});
});
test("timezone changes persist after page reload", async ({ page }) => {
@@ -475,10 +479,12 @@ test.describe("settings", () => {
: "America/New_York";
await timezoneInput.fill(newValue);
// Save
// Save and wait for success toast
const saveButton = page.getByRole("button", { name: /save/i });
await saveButton.click();
await page.waitForTimeout(1500);
await expect(page.getByText(/settings saved successfully/i)).toBeVisible({
timeout: 10000,
});
// Reload the page
await page.reload();
@@ -493,7 +499,9 @@ test.describe("settings", () => {
// Restore original value
await timezoneAfter.fill(originalValue);
await saveButton.click();
await page.waitForTimeout(500);
await expect(page.getByText(/settings saved successfully/i)).toBeVisible({
timeout: 10000,
});
});
test("multiple settings changes persist after page reload", async ({
@@ -536,10 +544,12 @@ test.describe("settings", () => {
await notificationTimeInput.fill(newNotificationTime);
await timezoneInput.fill(newTimezone);
// Save all changes at once
// Save all changes at once and wait for success toast
const saveButton = page.getByRole("button", { name: /save/i });
await saveButton.click();
await page.waitForTimeout(1500);
await expect(page.getByText(/settings saved successfully/i)).toBeVisible({
timeout: 10000,
});
// Reload the page
await page.reload();
@@ -561,7 +571,9 @@ test.describe("settings", () => {
await notificationTimeAfter.fill(originalNotificationTime);
await timezoneAfter.fill(originalTimezone);
await saveButton.click();
await page.waitForTimeout(500);
await expect(page.getByText(/settings saved successfully/i)).toBeVisible({
timeout: 10000,
});
});
test("cycle length persistence verifies exact saved value", async ({
@@ -582,10 +594,12 @@ test.describe("settings", () => {
const newValue = originalValue === "28" ? "31" : "28";
await cycleLengthInput.fill(newValue);
// Save
// Save and wait for success toast
const saveButton = page.getByRole("button", { name: /save/i });
await saveButton.click();
await page.waitForTimeout(1500);
await expect(page.getByText(/settings saved successfully/i)).toBeVisible({
timeout: 10000,
});
// Reload the page
await page.reload();
@@ -600,7 +614,9 @@ test.describe("settings", () => {
// Restore original value
await cycleLengthAfter.fill(originalValue);
await saveButton.click();
await page.waitForTimeout(500);
await expect(page.getByText(/settings saved successfully/i)).toBeVisible({
timeout: 10000,
});
});
test("settings form shows correct values after save without reload", async ({