timeout improve

Author: karancs06

src/visualBuilder/components/__test__/fieldLabelWrapper.test.tsx

@@ -596,13 +596,23 @@ describe("FieldLabelWrapperComponent", () => {
             />
         );
 
-        // Use findByTestId to wait for variant indicator - faster and more reliable
-        // No need to check button since findByTestId ensures component is loaded
-        const variantIndicator = await findByTestId(
-            container as HTMLElement,
-            "variant-indicator",
-            {},
-            { timeout: 1000 }
+        // Wait for component to finish loading (button enabled = dataLoading false)
+        // This ensures all async operations complete before checking variant indicator
+        await waitFor(
+            () => {
+                const button = container.querySelector("button");
+                if (!button || button.hasAttribute("disabled")) {
+                    throw new Error(
+                        "Button still disabled - component not loaded"
+                    );
+                }
+            },
+            { timeout: 5000, interval: 10 }
+        );
+
+        // Now check for variant indicator - component is fully loaded
+        const variantIndicator = container.querySelector(
+            "[data-testid='variant-indicator']"
         );
         expect(variantIndicator).toBeInTheDocument();
     });
@@ -617,17 +627,21 @@ describe("FieldLabelWrapperComponent", () => {
             />
         );
 
-        // findByTestId handles act() internally, so we don't need a separate act() call
-        // This eliminates the redundant act() bottleneck
-        // Wait for component to load and check variant indicator
-        const fieldLabel = await findByTestId(
-            container as HTMLElement,
-            "visual-builder__focused-toolbar__field-label-wrapper",
-            {},
-            { timeout: 1000 }
+        // Wait for component to finish loading (button enabled = dataLoading false)
+        // This ensures all async operations complete before checking variant indicator
+        await waitFor(
+            () => {
+                const button = container.querySelector("button");
+                if (!button || button.hasAttribute("disabled")) {
+                    throw new Error(
+                        "Button still disabled - component not loaded"
+                    );
+                }
+            },
+            { timeout: 5000, interval: 10 }
         );
-        expect(fieldLabel).toBeInTheDocument();
 
+        // Now check that variant indicator is NOT present - component is fully loaded
         const variantIndicator = container.querySelector(
             "[data-testid='variant-indicator']"
         );
@@ -649,23 +663,27 @@ describe("FieldLabelWrapperComponent", () => {
             />
         );
 
-        // Use findByTestId to wait for field label wrapper - faster and more reliable
-        // Then check for variant class - no need to wait for button
-        const fieldLabelWrapper = (await findByTestId(
-            container as HTMLElement,
-            "visual-builder__focused-toolbar__field-label-wrapper",
-            {},
-            { timeout: 1000 }
-        )) as HTMLElement;
-
-        // Wait for variant class to be applied (may take a microtask)
+        // Wait for component to finish loading (button enabled = dataLoading false)
+        // This ensures all async operations complete before checking variant class
         await waitFor(
             () => {
-                expect(fieldLabelWrapper).toHaveClass(
-                    "visual-builder__focused-toolbar--variant"
-                );
+                const button = container.querySelector("button");
+                if (!button || button.hasAttribute("disabled")) {
+                    throw new Error(
+                        "Button still disabled - component not loaded"
+                    );
+                }
             },
-            { timeout: 1000, interval: 5 }
+            { timeout: 5000, interval: 10 }
+        );
+
+        // Now check for variant class - component is fully loaded
+        const fieldLabelWrapper = container.querySelector(
+            "[data-testid='visual-builder__focused-toolbar__field-label-wrapper']"
+        ) as HTMLElement;
+        expect(fieldLabelWrapper).toBeInTheDocument();
+        expect(fieldLabelWrapper).toHaveClass(
+            "visual-builder__focused-toolbar--variant"
         );
     });
 
@@ -679,18 +697,27 @@ describe("FieldLabelWrapperComponent", () => {
             />
         );
 
-        // Use findByTestId which is optimized and handles act() internally
-        // This is much faster than waitFor and avoids timeout issues
-        const fieldLabelWrapper = (await findByTestId(
-            container as HTMLElement,
-            "visual-builder__focused-toolbar__field-label-wrapper",
-            {},
-            { timeout: 1000 }
-        )) as HTMLElement;
-
-        // Direct assertion - no need to wait for button since component is loaded
-        expect(fieldLabelWrapper).not.toHaveClass(
-            "visual-builder__focused-toolbar--variant"
+        // Wait for component to finish loading - check both field label wrapper and button
+        // This ensures all async operations complete before checking variant class
+        await waitFor(
+            () => {
+                const fieldLabelWrapper = container.querySelector(
+                    "[data-testid='visual-builder__focused-toolbar__field-label-wrapper']"
+                );
+                const button = container.querySelector("button");
+                if (
+                    !fieldLabelWrapper ||
+                    !button ||
+                    button.hasAttribute("disabled")
+                ) {
+                    throw new Error("Component not fully loaded");
+                }
+                // Component is loaded - check variant class is NOT present
+                expect(fieldLabelWrapper).not.toHaveClass(
+                    "visual-builder__focused-toolbar--variant"
+                );
+            },
+            { timeout: 5000, interval: 10 }
         );
     });
 });