Merge pull request #273 from contentstack/VE-3709

Ve 3709

Author: hiteshshetty-dev

package-lock.json

@@ -43,7 +43,7 @@
     "author": "Contentstack",
     "license": "MIT",
     "devDependencies": {
-        "@contentstack/advanced-post-message": "github:contentstack/adv-post-message#main",
+        "@contentstack/advanced-post-message": "^0.0.2",
         "@eslint/js": "^9.10.0",
         "@testing-library/jest-dom": "^6.5.0",
         "@testing-library/preact": "^3.2.4",
@@ -54,6 +54,7 @@
         "@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",
         "esbuild-plugin-file-path-extensions": "^2.1.0",
         "eslint": "^7.32.0",
@@ -85,6 +86,9 @@
         "preact": "^10.19.5",
         "uuid": "^8.3.2"
     },
+    "optionalDependencies": {
+        "@rollup/rollup-linux-x64-gnu": "4.9.5"
+    },
     "lint-staged": {
         "src/**/*.{ts,css,md}": [
             "npm run prettier:fix",

package.json

@@ -1,3 +1,8 @@
+import { EventManager } from "@contentstack/advanced-post-message";
+import { act, fireEvent, render, waitFor } from "@testing-library/preact";
+import { VisualBuilderPostMessageEvents } from "../visualBuilder/utils/types/postMessage.types";
+import { ComponentChild } from "preact";
+
 export function convertObjectToMinifiedString(
     obj: { [key: string]: any } | string
 ): any {
@@ -30,3 +35,63 @@ export class DOMRect {
 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']"
+        );
+        expect(hoverOutline).not.toBeNull();
+    });
+}
+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 = {}) => {
+    await waitForBuilderSDKToBeInitialized(visualBuilderPostMessage);
+    await act(async () => {
+        await fireEvent.click(element);
+    })
+    if(!skipWaitForFieldType) {
+        await waitFor(() => {
+            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();
+    });
+}
+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 getElementBytestId = (testId: string) => {
+    return document.querySelector(`[data-testid="${testId}"]`);
+}
+export const asyncRender: (componentChild: ComponentChild) => ReturnType<typeof render> = async (...args) => {
+    let returnValue: ReturnType<typeof render>;
+    await act(async () => {
+        returnValue = render(...args);
+    });
+    return returnValue;
+}

src/__test__/utils.ts

@@ -109,7 +109,9 @@ describe("Live Preview HOC init", () => {
 
         await sleep();
         expect(livePreviewPostMessageSpy).toHaveBeenCalledTimes(1);
-        expect(visualBuilderPostMessageSpy).toHaveBeenCalledTimes(1);
+        expect(visualBuilderPostMessageSpy).toHaveBeenCalledWith('init', { isSSR: true, href: 'http://localhost:3000/' });
+        expect(visualBuilderPostMessageSpy).toHaveBeenCalledWith('send-variant-and-locale');
+        expect(visualBuilderPostMessageSpy).toHaveBeenCalledTimes(2);
     });
 
     test("should return the existing live preview instance if it is already initialized", async () => {

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

@@ -1,86 +1,37 @@
 // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
-exports[`Visual builder > inline editing > should add overlay to DOM when clicked 1`] = `
-<body>
-  <h1
-    data-cslp="all_fields.blt58a50b4cebae75c5.en-us.modular_blocks.0.block.single_line"
-    data-cslp-field-type="singleline"
-    style="visibility: hidden;"
-  >
-    Hello World
-  </h1>
-  <div
-    class="go263407482 visual-builder__container"
-    data-testid="visual-builder__container"
-  >
-    <style>
-      
-       @import url("https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap");
-
-       [data-cslp] [contenteditable="true"] {
-            outline: none;
-        }
-        
-        @keyframes visual-builder__spinner {
-            0% {
-                transform: rotate(0deg);
-            }
-            100% {
-                transform: rotate(360deg);
-            }
-        }
-
-
-    </style>
-    <div
-      class="go1688149084 visual-builder__cursor"
-      data-testid="visual-builder__cursor"
-    />
-    <div
-      class="go842373233 visual-builder__overlay__wrapper"
-      data-testid="visual-builder__overlay__wrapper"
-    >
-      <div
-        class="visual-builder__overlay visual-builder__overlay--top go2262268276"
-        data-testid="visual-builder__overlay--top"
-      />
-      <div
-        class="visual-builder__overlay visual-builder__overlay--left go2262268276"
-        data-testid="visual-builder__overlay--left"
-      />
-      <div
-        class="visual-builder__overlay visual-builder__overlay--right go2262268276"
-        data-testid="visual-builder__overlay--right"
-      />
-      <div
-        class="visual-builder__overlay visual-builder__overlay--bottom go2262268276"
-        data-testid="visual-builder__overlay--bottom"
-      />
-      <div
-        class="visual-builder__overlay--outline go3391008271"
-        data-testid="visual-builder__overlay--outline"
-      />
-    </div>
-    <div
-      class="visual-builder__hover-outline visual-builder__hover-outline--unclickable go3177626044 go1719569523"
-      data-testid="visual-builder__hover-outline"
-    />
-    <div
-      class="visual-builder__focused-toolbar go635291819"
-      data-testid="visual-builder__focused-toolbar"
-    />
-  </div>
-</body>
-`;
-
 exports[`Visual builder > on click, the sdk > inline elements must be contenteditable > file should render a replacer and remove when it is not 1`] = `
 <h1
   data-cslp="all_fields.blt58a50b4cebae75c5.en-us.file"
   data-cslp-field-type="file"
 />
 `;
 
-exports[`Visual builder > on click, the sdk > inline elements must be contenteditable > file should render a replacer and remove when it is not 2`] = `undefined`;
+exports[`Visual builder > on click, the sdk > inline elements must be contenteditable > file should render a replacer and remove when it is not 2`] = `
+<button
+  class="visual-builder__replace-button visual-builder__button visual-builder__button--secondary go2828613387 go2545267607 go3805905658"
+  data-testid="visual-builder-replace-file"
+  data-tooltip="Replace"
+>
+  <svg
+    data-testid="visual-builder__replace-asset-icon"
+    fill="none"
+    height="16"
+    viewBox="0 0 16 16"
+    width="16"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path
+      d="M13.8903 3.99632L11.5039 1.60984C11.3574 1.46339 11.12 1.46339 10.9735 1.60984C10.8271 1.75628 10.8271 1.99372 10.9735 2.14017L12.7198 3.88649H2.87506C2.39181 3.88649 2.00006 4.27824 2.00006 4.76149V6.13114C2.00006 6.33825 2.16795 6.50614 2.37506 6.50614C2.58217 6.50614 2.75006 6.33825 2.75006 6.13114V4.76149C2.75006 4.69245 2.80603 4.63649 2.87506 4.63649H12.7198L10.9735 6.38281C10.8271 6.52925 10.8271 6.76669 10.9735 6.91314C11.12 7.05958 11.3574 7.05958 11.5039 6.91314L13.8903 4.52665C14.0368 4.3802 14.0368 4.14277 13.8903 3.99632Z"
+      fill="#475161"
+    />
+    <path
+      d="M2.10983 12.0054L4.49632 14.3919C4.64277 14.5383 4.8802 14.5383 5.02665 14.3919C5.1731 14.2455 5.1731 14.008 5.02665 13.8616L3.28033 12.1152H13.1251C13.6084 12.1152 14.0001 11.7235 14.0001 11.2402V9.87059C14.0001 9.66348 13.8322 9.49559 13.6251 9.49559C13.418 9.49559 13.2501 9.66348 13.2501 9.87059V11.2402C13.2501 11.3093 13.1942 11.3652 13.1251 11.3652H3.28033L5.02665 9.61893C5.1731 9.47248 5.1731 9.23504 5.02665 9.0886C4.8802 8.94215 4.64277 8.94215 4.49632 9.0886L2.10983 11.4751C1.96339 11.6215 1.96339 11.859 2.10983 12.0054Z"
+      fill="#475161"
+    />
+  </svg>
+</button>
+`;
 
 exports[`Visual builder > on click, the sdk > inline elements must be contenteditable > multi line should be contenteditable 1`] = `
 <h1

src/visualBuilder/__test__/__snapshots__/index.test.ts.snap

@@ -1,4 +1,4 @@
-import { waitFor } from "@testing-library/preact";
+import { act, waitFor, fireEvent } from "@testing-library/preact";
 import "@testing-library/jest-dom";
 import { getFieldSchemaMap } from "../../../../__test__/data/fieldSchemaMap";
 import Config from "../../../../configManager/configManager";
@@ -9,6 +9,7 @@ import visualBuilderPostMessage from "../../../utils/visualBuilderPostMessage";
 import { vi } from "vitest";
 import { VisualBuilderPostMessageEvents } from "../../../utils/types/postMessage.types";
 import { VisualBuilder } from "../../../index";
+import { triggerAndWaitForClickAction } from "../../../../__test__/utils";
 
 global.ResizeObserver = vi.fn().mockImplementation(() => ({
     observe: vi.fn(),
@@ -78,9 +79,7 @@ describe("When an element is clicked in visual builder mode", () => {
             "get"
         ).mockReturnValue(100);
         vi.spyOn(document.body, "scrollHeight", "get").mockReturnValue(100);
-    });
 
-    beforeEach(() => {
         Config.reset();
         Config.set("mode", 2);
         mouseClickEvent = new Event("click", {
@@ -89,20 +88,17 @@ describe("When an element is clicked in visual builder mode", () => {
         });
     });
 
-    afterEach(() => {
-        vi.clearAllMocks();
-        document.body.innerHTML = "";
-    });
-
     afterAll(() => {
         Config.reset();
+        vi.clearAllMocks();
+        document.body.innerHTML = "";
     });
 
     describe("boolean field", () => {
         let booleanField: HTMLParagraphElement;
         let visualBuilder: VisualBuilder;
 
-        beforeEach(() => {
+        beforeAll(async () => {
             booleanField = document.createElement("p");
             booleanField.setAttribute(
                 "data-cslp",
@@ -111,33 +107,30 @@ describe("When an element is clicked in visual builder mode", () => {
             document.body.appendChild(booleanField);
 
             visualBuilder = new VisualBuilder();
+            await triggerAndWaitForClickAction(visualBuilderPostMessage, booleanField);
         });
 
-        afterEach(() => {
+        afterAll(() => {
             visualBuilder.destroy();
         });
 
         test("should have outline", () => {
-            booleanField.dispatchEvent(mouseClickEvent);
             expect(booleanField.classList.contains("cslp-edit-mode"));
         });
 
         test("should have an overlay", () => {
-            booleanField.dispatchEvent(mouseClickEvent);
             const overlay = document.querySelector(".visual-builder__overlay");
             expect(overlay!.classList.contains("visible"));
         });
 
         test.skip("should have a field path dropdown", () => {
-            booleanField.dispatchEvent(mouseClickEvent);
             const toolbar = document.querySelector(
                 ".visual-builder__focused-toolbar__field-label-wrapper__current-field"
             );
             expect(toolbar).toBeInTheDocument();
         });
 
         test("should contain a data-cslp-field-type attribute", async () => {
-            booleanField.dispatchEvent(mouseClickEvent);
             await waitFor(() => {
                 expect(booleanField).toHaveAttribute(
                     VISUAL_BUILDER_FIELD_TYPE_ATTRIBUTE_KEY
@@ -146,14 +139,13 @@ describe("When an element is clicked in visual builder mode", () => {
         });
 
         test("should not contain a contenteditable attribute", async () => {
-            booleanField.dispatchEvent(mouseClickEvent);
             await waitFor(() => {
                 expect(booleanField).not.toHaveAttribute("contenteditable");
             });
         });
 
         test("should send a focus field message to parent", async () => {
-            booleanField.dispatchEvent(mouseClickEvent);
+
             await waitFor(() => {
                 expect(visualBuilderPostMessage?.send).toBeCalledWith(
                     VisualBuilderPostMessageEvents.FOCUS_FIELD,