Merge pull request #337 from contentstack/develop_v3

hiteshshetty-dev · web-flow · commit 646e99b059dd · 2025-02-03T10:23:07.000+05:30
fix: remove ^ from preact versions in package json
diff --git a/.github/workflows/jira.yml b/.github/workflows/jira.yml
@@ -21,7 +21,7 @@ jobs:
           project: ${{ secrets.JIRA_PROJECT }}
           issuetype: ${{ secrets.JIRA_ISSUE_TYPE }}
           summary: |
-            ${{ github.event.pull_request.title }}
+            Snyk | Vulnerability | ${{ github.event.repository.name }} | ${{ github.event.pull_request.title }}
           description: |
             PR: ${{ github.event.pull_request.html_url }}
 
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -86,14 +86,14 @@
         "url": "https://github.com/contentstack/live-preview-sdk.git"
     },
     "dependencies": {
-        "@preact/compat": "^17.1.2",
-        "@preact/signals": "^1.2.2",
+        "@preact/compat": "17.1.2",
+        "@preact/signals": "1.2.2",
         "classnames": "^2.5.1",
         "deepsignal": "^1.5.0",
         "goober": "^2.1.14",
         "lodash-es": "^4.17.21",
         "mustache": "^4.2.0",
-        "preact": "^10.19.5",
+        "preact": "10.19.5",
         "uuid": "^8.3.2"
     },
     "optionalDependencies": {
diff --git a/src/visualBuilder/__test__/index.test.ts b/src/visualBuilder/__test__/index.test.ts
@@ -190,8 +190,10 @@ describe("Visual builder", () => {
             test("single line should be contenteditable", async () => {
                 await triggerAndWaitForClickAction(visualBuilderPostMessage, h1);
 
-                expect(h1).toHaveAttribute("contenteditable");
-                expect(h1).toHaveAttribute("data-cslp-field-type", "singleline");
+                await waitFor(() => {
+                    expect(h1).toHaveAttribute("contenteditable");
+                    expect(h1).toHaveAttribute("data-cslp-field-type", "singleline");
+                })
             }, { timeout: 20 * 1000 });
 
             test("multi line should be contenteditable", async () => {
@@ -201,8 +203,10 @@ describe("Visual builder", () => {
                 );
                 await triggerAndWaitForClickAction(visualBuilderPostMessage, h1);
 
-                expect(h1).toHaveAttribute("contenteditable");
-                expect(h1).toHaveAttribute("data-cslp-field-type", "multiline");
+                await waitFor(() => {
+                    expect(h1).toHaveAttribute("contenteditable");
+                    expect(h1).toHaveAttribute("data-cslp-field-type", "multiline");
+                })
             }, { timeout: 20 * 1000 });
 
         });
diff --git a/src/visualBuilder/__test__/visualBuilderInput.test.tsx b/src/visualBuilder/__test__/visualBuilderInput.test.tsx
@@ -661,59 +661,4 @@ describe("When an inline element is edited in visual builder mode", () => {
             });
         });
     });
-    describe.skip("number field", () => {
-        let numberField: HTMLParagraphElement;
-        let visualBuilder: VisualBuilder;
-        let overlayWrapper: HTMLDivElement;
-
-        beforeAll(() => {
-            (visualBuilderPostMessage?.send as Mock).mockImplementation(
-                (eventName: string, args) => {
-                    if (
-                        eventName ===
-                        VisualBuilderPostMessageEvents.GET_FIELD_DATA
-                    ) {
-                        return Promise.resolve({
-                            fieldData: "87",
-                        });
-                    }
-                    return Promise.resolve({});
-                }
-            );
-        });
-
-        beforeEach(() => {
-            numberField = document.createElement("p");
-            numberField.setAttribute(
-                "data-cslp",
-                "all_fields.bltapikey.en-us.number"
-            );
-            numberField.textContent = "87";
-            document.body.appendChild(numberField);
-            visualBuilder = new VisualBuilder();
-            overlayWrapper = document.querySelector(
-                ".visual-builder__overlay__wrapper"
-            ) as HTMLDivElement;
-        });
-
-        afterEach(() => {
-            visualBuilder.destroy();
-        });
-
-        test("should only accept characters like a number input", async () => {
-            await userEvent.click(numberField);
-            await waitFor(() => {
-                expect(numberField).toHaveAttribute("contenteditable");
-            });
-            await userEvent.keyboard("ab56c78e-h10");
-
-            await waitFor(() => {
-                // TODO cursor is placed at the start, instead of the end
-                // so typed content appears at the start
-                expect(numberField).toHaveTextContent(`5678e-1087`);
-            });
-        });
-    }, {
-        timeout: 20 * 1000
-    });
 });
diff --git a/src/visualBuilder/components/emptyBlock.tsx b/src/visualBuilder/components/emptyBlock.tsx
@@ -57,6 +57,7 @@ export function EmptyBlock(props: EmptyBlockProps): JSX.Element {
                 )}
                 onClick={() => sendAddInstanceEvent()}
                 type="button"
+                data-testid="visual-builder__empty-block-add-button"
             >
                 <i className="fas fa-plus"></i> &nbsp;
                 {blockParentName}
diff --git a/src/visualBuilder/index.ts b/src/visualBuilder/index.ts
@@ -42,6 +42,7 @@ import {
 import { useHighlightCommentIcon } from "./eventManager/useHighlightCommentIcon";
 import { updateHighlightedCommentIconPosition } from "./generators/generateHighlightedComment";
 import { useRecalculateVariantDataCSLPValues } from "./eventManager/useRecalculateVariantDataCSLPValues";
+import { VB_EmptyBlockParentClass } from "..";
 
 interface VisualBuilderGlobalStateImpl {
     previousSelectedEditableDOM: HTMLElement | Element | null;
@@ -184,7 +185,7 @@ export class VisualBuilder {
                 );
                 const emptyBlockParents = Array.from(
                     document.querySelectorAll(
-                        ".visual-builder__empty-block-parent"
+                        `.${VB_EmptyBlockParentClass}`
                     )
                 );
 
diff --git a/src/visualBuilder/listeners/mouseClick.ts b/src/visualBuilder/listeners/mouseClick.ts
@@ -21,6 +21,7 @@ import { FieldSchemaMap } from "../utils/fieldSchemaMap";
 import { isFieldDisabled } from "../utils/isFieldDisabled";
 import EventListenerHandlerParams from "./types";
 import { toggleHighlightedCommentIconDisplay } from "../generators/generateHighlightedComment";
+import { VB_EmptyBlockParentClass } from "../..";
 
 type HandleBuilderInteractionParams = Omit<
     EventListenerHandlerParams,
@@ -110,7 +111,7 @@ async function handleBuilderInteraction(
     // if the selected element is our empty block element, return
     if (
         editableElement.classList.contains(
-            "visual-builder__empty-block-parent"
+            VB_EmptyBlockParentClass
         ) ||
         editableElement.classList.contains("visual-builder__empty-block")
     ) {
diff --git a/src/visualBuilder/listeners/mouseHover.ts b/src/visualBuilder/listeners/mouseHover.ts
@@ -10,6 +10,7 @@ import EventListenerHandlerParams from "./types";
 import { VisualBuilder } from "..";
 import { addHoverOutline } from "../generators/generateHoverOutline";
 import { visualBuilderStyles } from "../visualBuilder.style";
+import { VB_EmptyBlockParentClass } from "../..";
 
 export interface HandleMouseHoverParams
     extends Pick<
@@ -202,7 +203,7 @@ async function handleMouseHover(params: HandleMouseHoverParams): Promise<void> {
 
         if (
             !editableElement.classList.contains(
-                "visual-builder__empty-block-parent"
+                VB_EmptyBlockParentClass
             ) &&
             !editableElement.classList.contains("visual-builder__empty-block")
         ) {
diff --git a/src/visualBuilder/utils/__test__/errorHandling.test.ts b/src/visualBuilder/utils/__test__/errorHandling.test.ts
@@ -0,0 +1,28 @@
+import { hasPostMessageError } from '../errorHandling';
+
+describe('hasPostMessageError', () => {
+    it('should return true if obj.error is true', () => {
+        const obj = { error: true };
+        expect(hasPostMessageError(obj)).toBe(true);
+    });
+
+    it('should return false if obj.error is false', () => {
+        const obj = { error: false };
+        expect(hasPostMessageError(obj)).toBe(false);
+    });
+
+    it('should return false if obj.error is undefined', () => {
+        const obj = {};
+        expect(hasPostMessageError(obj)).toBe(false);
+    });
+
+    it('should return false if obj is null', () => {
+        const obj = null;
+        expect(hasPostMessageError(obj)).toBe(false);
+    });
+
+    it('should return false if obj is not an object', () => {
+        const obj = 'not an object';
+        expect(hasPostMessageError(obj)).toBe(false);
+    });
+});
diff --git a/src/visualBuilder/utils/__test__/handleFieldMouseDown.test.ts b/src/visualBuilder/utils/__test__/handleFieldMouseDown.test.ts
@@ -1,8 +1,17 @@
 import { MockInstance } from "vitest";
 import { VISUAL_BUILDER_FIELD_TYPE_ATTRIBUTE_KEY } from "../constants";
-import { handleFieldKeyDown } from "../handleFieldMouseDown";
+import { handleFieldInput, handleFieldKeyDown } from "../handleFieldMouseDown";
 import * as insertSpaceAtCursor from "../insertSpaceAtCursor";
-
+import * as generateOverlay from "../../generators/generateOverlay";
+import { VisualBuilderPostMessageEvents } from "../types/postMessage.types";
+import { FieldDataType } from "../types/index.types";
+import userEvent from "@testing-library/user-event";
+import { waitFor, screen } from "@testing-library/preact";
+
+vi.mock("lodash-es", async () => ({
+    ...(await import("lodash-es")),
+    throttle: vi.fn((fn) => fn),
+}))
 describe("handle numeric field key down", () => {
     let h1: HTMLHeadingElement;
     let spiedPreventDefault: MockInstance<(e: []) => void> | undefined;
@@ -106,6 +115,16 @@ describe("handle numeric field key down", () => {
         h1.dispatchEvent(keyDownEvent);
         expect(spiedPreventDefault).toHaveBeenCalledTimes(1);
     });
+
+    test("should only accept characters like a number input", async () => {
+        h1.innerHTML = '';
+        await userEvent.click(h1);
+        await userEvent.keyboard("ab56c78e-h10");
+
+        await waitFor(() => {
+            expect(h1).toHaveTextContent(`5678e-10`);
+        });
+    });
 });
 
 describe("handle keydown in button contenteditable", () => {
@@ -152,3 +171,85 @@ describe("handle keydown in button contenteditable", () => {
         expect(spiedInsertSpaceAtCursor).toHaveBeenCalledWith(button);
     });
 });
+
+describe("handle single line field key down", () => {
+    let h1: HTMLHeadingElement;
+    let spiedPreventDefault: MockInstance<(e: []) => void> | undefined;
+
+    beforeEach(() => {
+        h1 = document.createElement("h1");
+        h1.innerHTML = "2.2";
+        h1.setAttribute("contenteditable", "true");
+        h1.setAttribute(VISUAL_BUILDER_FIELD_TYPE_ATTRIBUTE_KEY, FieldDataType.SINGLELINE);
+
+        h1.addEventListener("keydown", (e) => {
+            spiedPreventDefault = vi.spyOn(e, "preventDefault");
+            handleFieldKeyDown(e);
+        });
+
+        document.body.appendChild(h1);
+    });
+
+    afterEach(() => {
+        document.body.innerHTML = "";
+        vi.clearAllMocks();
+    });
+
+    afterAll(() => {
+        vi.restoreAllMocks();
+    });
+
+    test("should prevent default on enter key", () => {
+        const keyDownEvent = new KeyboardEvent("keydown", {
+            bubbles: true,
+            key: "Enter",
+            code: "Enter",
+        });
+        h1.dispatchEvent(keyDownEvent);
+
+        expect(spiedPreventDefault).toHaveBeenCalledTimes(1);
+    });
+})
+
+describe("`handleFieldInput`", () => {
+    let h1: HTMLHeadingElement;
+    let visualBuilderContainer: HTMLElement;
+    beforeEach(() => {
+        h1 = document.createElement("h1");
+        h1.innerHTML = "2.2";
+        h1.setAttribute("contenteditable", "true");
+        h1.setAttribute(VISUAL_BUILDER_FIELD_TYPE_ATTRIBUTE_KEY, "number");
+
+        h1.addEventListener("input", handleFieldInput);
+
+        visualBuilderContainer = document.createElement("div");
+        visualBuilderContainer.classList.add("visual-builder__container");
+        document.body.appendChild(visualBuilderContainer);
+        document.body.appendChild(h1);
+    });
+
+    afterEach(() => {
+        document.body.innerHTML = "";
+        vi.clearAllMocks();
+    });
+
+    afterAll(() => {
+        vi.restoreAllMocks();
+    });
+
+    test("should call `sendFieldEvent` on input event", () => {
+        const spiedSendFieldEvent = vi.spyOn(generateOverlay, "sendFieldEvent")
+        const consoleError = vi.spyOn(console, "error");
+        spiedSendFieldEvent.mockImplementation(() => { 
+            throw new Error("sendFieldEvent not implemented")
+        });
+        const inputEvent = new InputEvent("input", {
+            bubbles: true,
+        });
+        h1.dispatchEvent(inputEvent);
+
+        expect(spiedSendFieldEvent).toHaveBeenCalledWith({ visualBuilderContainer, eventType: VisualBuilderPostMessageEvents.SYNC_FIELD });
+        expect(consoleError).toHaveBeenCalled();
+    });
+
+})
diff --git a/src/visualBuilder/utils/__test__/isFieldDisabled.test.ts b/src/visualBuilder/utils/__test__/isFieldDisabled.test.ts
diff --git a/src/visualBuilder/utils/__test__/updateFocussedState.test.ts b/src/visualBuilder/utils/__test__/updateFocussedState.test.ts
diff --git a/src/visualBuilder/utils/__test__/visualBuilderPostMessage.test.ts b/src/visualBuilder/utils/__test__/visualBuilderPostMessage.test.ts

Original file line number	Diff line number	Diff line change
`@@ -57,6 +57,7 @@ export function EmptyBlock(props: EmptyBlockProps): JSX.Element {`
`57`	`57`	`)}`
`58`	`58`	`onClick={() => sendAddInstanceEvent()}`
`59`	`59`	`type="button"`
	`60`	`+ data-testid="visual-builder__empty-block-add-button"`
`60`	`61`	`>`
`61`	`62`	`<i className="fas fa-plus"></i>  `
`62`	`63`	`{blockParentName}`