Vitest 3 optimizing

.github/workflows/unit-test.yml

@@ -17,11 +17,11 @@ jobs:
             - name: "Install Node"
               uses: actions/setup-node@v4
               with:
-                  node-version: "21.x"
+                  node-version: "22.x"
             - name: "Install Deps"
               run: npm install
             - name: "Test"
-              run: npx vitest --coverage.enabled true
+              run: npm run test:coverage
             - name: "Report Coverage"
               # Set if: always() to also generate the report if tests are failing
               # Only works if you set `reportOnFailure: true` in your vite config as specified above

.gitignore

@@ -138,5 +138,10 @@ temp/
 
 .DS_Store
 
+# Test results and profiling reports
+test-results.json
+junit.xml
+test-reports/
+test-profile-report.json
 
 # End of https://www.toptal.com/developers/gitignore/api/node,web,vscode

package.json

@@ -25,7 +25,8 @@
     "sideEffects": false,
     "scripts": {
         "build": "NODE_OPTIONS='--max-old-space-size=16384' tsup",
-        "test": "vitest",
+        "test": "vitest --run",
+        "test:watch": "vitest",
         "test:once": "vitest run",
         "test:coverage": "vitest --coverage",
         "dev": "NODE_OPTIONS='--max-old-space-size=16384' tsup --watch",
@@ -57,8 +58,8 @@
         "@types/react": "^18.2.57",
         "@types/react-dom": "^18.2.19",
         "@types/uuid": "^8.3.1",
-        "@vitest/coverage-v8": "^2.1.2",
-        "@vitest/ui": "^2.1.2",
+        "@vitest/coverage-v8": "^3.2.4",
+        "@vitest/ui": "^3.2.4",
         "auto-changelog": "^2.5.0",
         "esbuild-plugin-file-path-extensions": "^2.1.0",
         "eslint": "^8.57.1",
@@ -77,7 +78,7 @@
         "typedoc": "^0.25.13",
         "typescript": "^5.4.5",
         "typescript-eslint": "^8.5.0",
-        "vitest": "^2.1.0"
+        "vitest": "^3.2.4"
     },
     "repository": {
         "type": "git",

src/__test__/utils.ts

@@ -36,62 +36,146 @@ export async function sleep(waitTimeInMs = 100): Promise<void> {
     return new Promise((resolve) => setTimeout(resolve, waitTimeInMs));
 }
 
-export const waitForHoverOutline = async () => {
-    await waitFor(() => {
-        const hoverOutline = document.querySelector(
-            "[data-testid='visual-builder__hover-outline'][style]"
-        );
-        expect(hoverOutline).not.toBeNull();
-    });
-}
-export const waitForBuilderSDKToBeInitialized = async (visualBuilderPostMessage: EventManager | undefined) => {
+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']"
+            );
+            expect(hoverOutline).not.toBeNull();
+        },
+        {
+            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
+) => {
     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;
+    interval?: number;
+}) => {
+    await waitFor(
+        () => {
+            const customCursor = document.querySelector(
+                `[data-testid="visual-builder__cursor"]`
+            );
+            if (!customCursor) throw new Error("Cursor not found");
+            expect(customCursor.classList.contains("visible")).toBeTruthy();
+        },
+        {
+            timeout: options?.timeout ?? 2000, // Default 2s timeout for cursor to be visible
+            interval: options?.interval ?? 10, // Faster polling: 10ms default
+        }
+    );
+};
+
+export const waitForCursorIcon = async (
+    icon: string,
+    options?: { timeout?: number; interval?: number }
+) => {
+    await waitFor(
+        () => {
+            const customCursor = document.querySelector(
+                `[data-testid="visual-builder__cursor"]`
+            );
+            if (!customCursor) throw new Error("Cursor not found");
+            expect(customCursor).toHaveAttribute("data-icon", icon);
+        },
+        {
+            timeout: options?.timeout ?? 1000, // Reduced from 2s to 1s - mocks resolve immediately
+            interval: options?.interval ?? 10, // Faster polling: 10ms default
+        }
+    );
+};
 const defaultRect = {
     left: 10,
     right: 20,
     top: 10,
     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/livePreview/__test__/live-preview.test.ts

@@ -5,7 +5,6 @@
 import { act, fireEvent, waitFor } from "@testing-library/preact";
 import crypto from "crypto";
 import { vi } from "vitest";
-import { sleep } from "../../__test__/utils";
 import { getDefaultConfig } from "../../configManager/config.default";
 import Config from "../../configManager/configManager";
 import { PublicLogger } from "../../logger/logger";
@@ -54,12 +53,6 @@ const TITLE_CSLP_TAG = "content-type-1.entry-uid-1.en-us.field-title";
 const DESC_CSLP_TAG = "content-type-2.entry-uid-2.en-us.field-description";
 const LINK_CSLP_TAG = "content-type-3.entry-uid-3.en-us.field-link";
 
-global.ResizeObserver = vi.fn().mockImplementation(() => ({
-    observe: vi.fn(),
-    unobserve: vi.fn(),
-    disconnect: vi.fn(),
-}));
-
 describe("cslp tooltip", () => {
     beforeEach(() => {
         Config.reset();
@@ -349,13 +342,27 @@ describe("incoming postMessage", () => {
         });
 
         livePreviewPostMessage?.destroy({ soft: true });
+
+        // Track when INIT completes
+        let initCompleted = false;
         livePreviewPostMessage?.on(
             LIVE_PREVIEW_POST_MESSAGE_EVENTS.INIT,
-            mockLivePreviewInitEventListener
+            () => {
+                const result = mockLivePreviewInitEventListener();
+                initCompleted = true;
+                return result;
+            }
         );
 
         const livePreview = new LivePreview();
-        await sleep();
+
+        // Wait for INIT event to complete and event listeners to be registered
+        await waitFor(
+            () => {
+                expect(initCompleted).toBe(true);
+            },
+            { timeout: 3000 }
+        );
 
         // set user onChange function
         const userOnChange = vi.fn();
@@ -386,7 +393,13 @@ describe("incoming postMessage", () => {
         }
 
         new LivePreview();
-        await sleep();
+
+        // Wait for async init event to be processed
+        await waitFor(() => {
+            expect(Config.get().stackDetails.contentTypeUid).toBe(
+                "contentTypeUid"
+            );
+        });
 
         expect(Config.get().stackDetails).toMatchObject({
             apiKey: "",
@@ -397,35 +410,51 @@ describe("incoming postMessage", () => {
     });
 
     test("should navigate forward, backward and reload page on history call", async () => {
+        // Track when INIT completes
+        let initCompleted = false;
+        livePreviewPostMessage?.destroy({ soft: true });
+        livePreviewPostMessage?.on(
+            LIVE_PREVIEW_POST_MESSAGE_EVENTS.INIT,
+            () => {
+                const result = mockLivePreviewInitEventListener();
+                initCompleted = true;
+                return result;
+            }
+        );
+
         new LivePreview();
-        await sleep();
+
+        // Wait for INIT to complete and event listeners to be registered
+        await waitFor(
+            () => {
+                expect(initCompleted).toBe(true);
+            },
+            { timeout: 3000 }
+        );
 
         vi.spyOn(window.history, "forward");
         vi.spyOn(window.history, "back");
         vi.spyOn(window.history, "go").mockImplementation(() => {});
 
         // for forward
-        livePreviewPostMessage?.send(LIVE_PREVIEW_POST_MESSAGE_EVENTS.HISTORY, {
+        await livePreviewPostMessage?.send(LIVE_PREVIEW_POST_MESSAGE_EVENTS.HISTORY, {
             type: "forward",
         } as HistoryLivePreviewPostMessageEventData);
-        await sleep(0);
 
         expect(window.history.forward).toHaveBeenCalled();
 
         // for back
-        livePreviewPostMessage?.send(LIVE_PREVIEW_POST_MESSAGE_EVENTS.HISTORY, {
+        await livePreviewPostMessage?.send(LIVE_PREVIEW_POST_MESSAGE_EVENTS.HISTORY, {
             type: "backward",
         } as HistoryLivePreviewPostMessageEventData);
 
-        await sleep(0);
         expect(window.history.back).toHaveBeenCalled();
 
         // for reload
-        livePreviewPostMessage?.send(LIVE_PREVIEW_POST_MESSAGE_EVENTS.HISTORY, {
+        await livePreviewPostMessage?.send(LIVE_PREVIEW_POST_MESSAGE_EVENTS.HISTORY, {
             type: "reload",
         } as HistoryLivePreviewPostMessageEventData);
 
-        await sleep(0);
         expect(window.history.go).toHaveBeenCalled();
     });
 });

src/livePreview/editButton/__test__/editButtonAction.test.ts

@@ -23,12 +23,6 @@ const VARIANT_TITLE_CSLP_TAG =
 const DESC_CSLP_TAG = "content-type-2.entry-uid-2.en-us.field-description";
 const LINK_CSLP_TAG = "content-type-3.entry-uid-3.en-us.field-link";
 
-global.ResizeObserver = vi.fn().mockImplementation(() => ({
-    observe: vi.fn(),
-    unobserve: vi.fn(),
-    disconnect: vi.fn(),
-}));
-
 describe("cslp tooltip", () => {
     beforeEach(() => {
         Config.reset();

src/preview/__test__/contentstack-live-preview-HOC.test.ts

@@ -22,12 +22,6 @@ Object.defineProperty(globalThis, "crypto", {
     },
 });
 
-global.ResizeObserver = vi.fn().mockImplementation(() => ({
-    observe: vi.fn(),
-    unobserve: vi.fn(),
-    disconnect: vi.fn(),
-}));
-
 describe("Live Preview HOC init", () => {
     beforeEach(() => {
         Config.reset();