fix(e2e): add settle time after done-toggle to prevent sync race condition

The stale client reconnection test was flaky because syncAndWait()
was called immediately after clicking done-toggle, racing with the
200ms animation delay before isDone is dispatched to the store.
Use markTaskDone helper and wait for state to persist before syncing.
This commit is contained in:
Johannes Millan 2026-03-24 19:58:42 +01:00
parent 3d937e228d
commit 83432fb0f4

View file

@ -5,6 +5,8 @@ import {
createSimulatedClient,
closeClient,
waitForTask,
markTaskDone,
getDoneTaskElement,
type SimulatedE2EClient,
} from '../../utils/supersync-helpers';
@ -132,12 +134,9 @@ test.describe('@supersync SuperSync Advanced Edge Cases', () => {
await clientA.sync.syncAndWait();
// Mark initial task as done
const initialTaskLocator = clientA.page.locator(`task:has-text("${initialTask}")`);
await initialTaskLocator.hover();
// Wait for done button to be visible after hover reveals it
const doneBtn = initialTaskLocator.locator('done-toggle');
await doneBtn.waitFor({ state: 'visible', timeout: 5000 });
await doneBtn.click();
await markTaskDone(clientA, initialTask);
// Wait for the 200ms done animation delay + NgRx store update + IndexedDB persist
await clientA.page.waitForTimeout(500);
await clientA.sync.syncAndWait();
// Client B "reconnects" (syncs after missing many updates)
@ -150,14 +149,12 @@ test.describe('@supersync SuperSync Advanced Edge Cases', () => {
await waitForTask(clientB.page, offlineTask2);
await waitForTask(clientB.page, offlineTask3);
// Initial task should be marked as done
// Initial task should be marked as done (may be in the collapsed "Done tasks" section)
// Use toPass() to handle Angular change detection lag for CSS class update
await expect(async () => {
const initialTaskB = clientB.page.locator(
`task.isDone:has-text("${initialTask}")`,
);
const initialTaskB = getDoneTaskElement(clientB!, initialTask);
await expect(initialTaskB).toBeVisible({ timeout: 2000 });
}).toPass({ timeout: 10000, intervals: [500, 1000, 2000] });
}).toPass({ timeout: 15000, intervals: [500, 1000, 2000, 3000] });
console.log('[Stale] Stale client reconnected and received all changes');
} finally {