vitest 3 logs

src/__test__/utils.ts

@@ -40,50 +40,79 @@ export const waitForHoverOutline = async (options?: {
     timeout?: number;
     interval?: number;
 }) => {
+    // First, wait for the outline element to exist (faster check)
     await waitFor(
         () => {
             const hoverOutline = document.querySelector(
-                "[data-testid='visual-builder__hover-outline'][style]"
+                "[data-testid='visual-builder__hover-outline']"
             );
             expect(hoverOutline).not.toBeNull();
         },
         {
-            timeout: options?.timeout ?? 2000, // Reduced from 5s to 2s - mocks resolve immediately
-            interval: options?.interval ?? 10, // Faster polling: 10ms default
+            timeout: options?.timeout ?? 2000,
+            interval: options?.interval ?? 5, // Faster polling: 5ms default
+        }
+    );
+
+    // Then wait for style attribute to be set (more specific check)
+    await waitFor(
+        () => {
+            const hoverOutline = document.querySelector(
+                "[data-testid='visual-builder__hover-outline']"
+            ) as HTMLElement;
+            expect(hoverOutline).not.toBeNull();
+            // Check if style has meaningful values (not empty)
+            const hasStyle =
+                hoverOutline?.style &&
+                (hoverOutline.style.top ||
+                    hoverOutline.style.left ||
+                    hoverOutline.style.width ||
+                    hoverOutline.style.height);
+            expect(hasStyle).toBeTruthy();
+        },
+        {
+            timeout: options?.timeout ?? 2000,
+            interval: options?.interval ?? 5, // Faster polling: 5ms default
         }
     );
 };
-
-export const waitForBuilderSDKToBeInitialized = async (visualBuilderPostMessage: EventManager | undefined) => {
+
+export const waitForBuilderSDKToBeInitialized = async (
+    visualBuilderPostMessage: EventManager | undefined
+) => {
     await waitFor(() => {
         expect(visualBuilderPostMessage?.send).toBeCalledWith(
             VisualBuilderPostMessageEvents.INIT,
             expect.any(Object)
         );
     });
-}
+};
 interface WaitForClickActionOptions {
     skipWaitForFieldType?: boolean;
 }
-export const triggerAndWaitForClickAction = async (visualBuilderPostMessage: EventManager | undefined, element: HTMLElement, {skipWaitForFieldType}: WaitForClickActionOptions = {}) => {
+export const triggerAndWaitForClickAction = async (
+    visualBuilderPostMessage: EventManager | undefined,
+    element: HTMLElement,
+    { skipWaitForFieldType }: WaitForClickActionOptions = {}
+) => {
     await waitForBuilderSDKToBeInitialized(visualBuilderPostMessage);
     await act(async () => {
         await fireEvent.click(element);
-    })
-    if(!skipWaitForFieldType) {
+    });
+    if (!skipWaitForFieldType) {
         await waitFor(() => {
-            expect(element).toHaveAttribute("data-cslp-field-type")
-        })
+            expect(element).toHaveAttribute("data-cslp-field-type");
+        });
     }
-}
+};
 export const waitForToolbaxToBeVisible = async () => {
     await waitFor(() => {
         const toolbar = document.querySelector(
             ".visual-builder__focused-toolbar__field-label-container"
         );
         expect(toolbar).not.toBeNull();
     });
-}
+};
 
 export const waitForCursorToBeVisible = async (options?: {
     timeout?: number;
@@ -129,17 +158,24 @@ const defaultRect = {
     bottom: 20,
     width: 10,
     height: 5,
-}
-export const mockGetBoundingClientRect = (element: HTMLElement, rect = defaultRect) => {
-    vi.spyOn(element, "getBoundingClientRect").mockImplementation(() => rect as DOMRect);
-}
+};
+export const mockGetBoundingClientRect = (
+    element: HTMLElement,
+    rect = defaultRect
+) => {
+    vi.spyOn(element, "getBoundingClientRect").mockImplementation(
+        () => rect as DOMRect
+    );
+};
 export const getElementBytestId = (testId: string) => {
     return document.querySelector(`[data-testid="${testId}"]`);
-}
-export const asyncRender: (componentChild: ComponentChild) => ReturnType<typeof render> = async (...args) => {
+};
+export const asyncRender: (
+    componentChild: ComponentChild
+) => ReturnType<typeof render> = async (...args) => {
     let returnValue: ReturnType<typeof render>;
     await act(async () => {
         returnValue = render(...args);
     });
     return returnValue;
-}
+};

src/visualBuilder/__test__/hover/fields/all-hover.test.ts

@@ -286,6 +286,8 @@ describe("When an element is hovered in visual builder mode", () => {
         });
 
         test("should have outline and custom cursor on individual instances", async () => {
+            const testStartTime = performance.now();
+            const dispatchStartTime = performance.now();
             firstField.dispatchEvent(mousemoveEvent);
             await waitForHoverOutline();
 

src/visualBuilder/__test__/hover/fields/file.test.ts

@@ -162,6 +162,8 @@ describe("When an element is hovered in visual builder mode", () => {
         });
 
         test("should have a outline and custom cursor on the url as well", async () => {
+            const testStartTime = performance.now();
+            const dispatchStartTime = performance.now();
             imageField.dispatchEvent(mousemoveEvent);
             await waitForHoverOutline();
 
@@ -278,6 +280,8 @@ describe("When an element is hovered in visual builder mode", () => {
         });
 
         test("should have outline and custom cursor on individual instances", async () => {
+            const testStartTime = performance.now();
+            const dispatchStartTime = performance.now();
             firstFileField.dispatchEvent(mousemoveEvent);
             await waitForHoverOutline();
             const hoverOutline = document.querySelector(

src/visualBuilder/__test__/hover/fields/group.test.ts

@@ -148,6 +148,7 @@ describe("When an element is hovered in visual builder mode", () => {
         });
 
         test("should have a outline and custom cursor on the nested single line", async () => {
+            const testStartTime = performance.now();
             const singleLine = document.createElement("p");
             singleLine.setAttribute(
                 "data-cslp",
@@ -259,6 +260,8 @@ describe("When an element is hovered in visual builder mode", () => {
         });
 
         test("should have outline and custom cursor on nested multi line", async () => {
+            const testStartTime = performance.now();
+            const dispatchStartTime = performance.now();
             firstNestedMultiLine.dispatchEvent(mousemoveEvent);
             await waitForHoverOutline();