From 83432fb0f477d52ca60314ce998f90880a75b7d9 Mon Sep 17 00:00:00 2001
From: Johannes Millan <johannes.millan@gmail.com>
Date: Tue, 24 Mar 2026 19:58:42 +0100
Subject: [PATCH] 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.
---
 .../supersync-advanced-edge-cases.spec.ts     | 19 ++++++++-----------
 1 file changed, 8 insertions(+), 11 deletions(-)

diff --git a/e2e/tests/sync/supersync-advanced-edge-cases.spec.ts b/e2e/tests/sync/supersync-advanced-edge-cases.spec.ts
index 68a7cad688..3b2a96c72f 100644
--- a/e2e/tests/sync/supersync-advanced-edge-cases.spec.ts
+++ b/e2e/tests/sync/supersync-advanced-edge-cases.spec.ts
@@ -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 {