From f66afd76db4fe14df24618a47b272df0f15c4002 Mon Sep 17 00:00:00 2001
From: snomiao <snomiao@gmail.com>
Date: Tue, 9 Sep 2025 03:57:58 +0000
Subject: [PATCH] fix: Stabilize flaky link visibility toggle test

The test was flaky because it wasn't properly waiting for the canvas
to update after changing the link render mode setting. The setting
change triggers a canvas redraw via setDirty(), but the actual redraw
happens asynchronously.

Changes:
- Add explicit wait for canvas.links_render_mode to update
- Capture initial link render mode to properly verify state changes
- Add double frame wait plus 100ms delay to ensure canvas redraw completes
- Improve wait condition for visible links to handle undefined initial state
- Add timeout protection to prevent test hanging

This ensures the test reliably waits for both the setting change
and the visual update before taking screenshots, eliminating the
race condition that was causing intermittent failures.
---
 browser_tests/tests/graphCanvasMenu.spec.ts | 57 +++++++++++++++++++--
 1 file changed, 52 insertions(+), 5 deletions(-)

diff --git a/browser_tests/tests/graphCanvasMenu.spec.ts b/browser_tests/tests/graphCanvasMenu.spec.ts
index 9ae090975..3c100dd30 100644
--- a/browser_tests/tests/graphCanvasMenu.spec.ts
+++ b/browser_tests/tests/graphCanvasMenu.spec.ts
@@ -13,25 +13,72 @@ test.describe('Graph Canvas Menu', () => {
 
   test('Can toggle link visibility', async ({ comfyPage }) => {
     const button = comfyPage.page.getByTestId('toggle-link-visibility-button')
+
+    // Get the initial link render mode and HIDDEN_LINK constant
+    const { initialMode, hiddenLinkMode } = await comfyPage.page.evaluate(
+      () => {
+        return {
+          initialMode: window['app']?.canvas?.links_render_mode,
+          hiddenLinkMode: window['LiteGraph'].HIDDEN_LINK
+        }
+      }
+    )
+
+    // First click - hide links
     await button.click()
+
+    // Wait for the setting to actually change to hidden
+    await comfyPage.page.waitForFunction(
+      (expectedMode) => {
+        const canvas = window['app']?.canvas
+        return canvas && canvas.links_render_mode === expectedMode
+      },
+      hiddenLinkMode,
+      { timeout: 5000 }
+    )
+
+    // Wait for canvas to complete rendering with hidden links
+    // Use multiple frames and a small delay to ensure canvas is fully updated
     await comfyPage.nextFrame()
+    await comfyPage.nextFrame()
+    await comfyPage.page.waitForTimeout(100) // Small delay for canvas rendering
+
     await expect(comfyPage.canvas).toHaveScreenshot(
       'canvas-with-hidden-links.png'
     )
-    const hiddenLinkRenderMode = await comfyPage.page.evaluate(() => {
-      return window['LiteGraph'].HIDDEN_LINK
-    })
     expect(await comfyPage.getSetting('Comfy.LinkRenderMode')).toBe(
-      hiddenLinkRenderMode
+      hiddenLinkMode
     )
 
+    // Second click - show links again
     await button.click()
+
+    // Wait for the setting to change back to the initial mode
+    await comfyPage.page.waitForFunction(
+      ({ hiddenMode, initial }) => {
+        const canvas = window['app']?.canvas
+        // Check that it's not hidden and matches the expected visible mode
+        return (
+          canvas &&
+          canvas.links_render_mode !== hiddenMode &&
+          (initial === undefined || canvas.links_render_mode === initial)
+        )
+      },
+      { hiddenMode: hiddenLinkMode, initial: initialMode },
+      { timeout: 5000 }
+    )
+
+    // Wait for canvas to complete rendering with visible links
+    // Use multiple frames and a small delay to ensure canvas is fully updated
     await comfyPage.nextFrame()
+    await comfyPage.nextFrame()
+    await comfyPage.page.waitForTimeout(100) // Small delay for canvas rendering
+
     await expect(comfyPage.canvas).toHaveScreenshot(
       'canvas-with-visible-links.png'
     )
     expect(await comfyPage.getSetting('Comfy.LinkRenderMode')).not.toBe(
-      hiddenLinkRenderMode
+      hiddenLinkMode
     )
   })