Merge pull request #329 from contentstack/VE-4802

hiteshshetty-dev · web-flow · commit d85413832c49 · 2025-01-20T10:54:57.000+05:30
test: add unit tests for error handling and field state validation in visual builder
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/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
@@ -0,0 +1,147 @@
+import { describe, it, expect } from 'vitest';
+import { isFieldDisabled } from '../isFieldDisabled';
+import { ISchemaFieldMap } from '../types/index.types';
+import { FieldDetails } from '../../components/FieldToolbar';
+import Config from '../../../configManager/configManager';
+import { VisualBuilder } from '../..';
+
+describe('isFieldDisabled', () => {
+    it('should return disabled state due to read-only role', () => {
+        const fieldSchemaMap: ISchemaFieldMap = {
+            field_metadata: {
+                updateRestrict: true,
+            },
+        };
+        const eventFieldDetails: FieldDetails = {
+            editableElement: document.createElement('div'),
+            fieldMetadata: {
+                locale: 'en-us',
+            },
+        };
+
+        const result = isFieldDisabled(fieldSchemaMap, eventFieldDetails);
+        expect(result.isDisabled).toBe(true);
+        expect(result.reason).toBe('You have only read access to this field');
+    });
+
+    it('should return disabled state due to non-localizable fields', () => {
+        Config.get = () => ({
+            stackDetails: {
+                masterLocale: 'en-us',
+            },
+        });
+
+        const fieldSchemaMap: ISchemaFieldMap = {
+            non_localizable: true,
+        };
+        const eventFieldDetails: FieldDetails = {
+            editableElement: document.createElement('div'),
+            fieldMetadata: {
+                locale: 'fr-fr',
+            },
+        };
+
+        const result = isFieldDisabled(fieldSchemaMap, eventFieldDetails);
+        expect(result.isDisabled).toBe(true);
+        expect(result.reason).toBe('Editing this field is restricted in localized entries');
+    });
+
+    it('should return disabled state due to unlinked variant', () => {
+        const fieldSchemaMap: ISchemaFieldMap = {
+            field_metadata: {
+                isUnlinkedVariant: true,
+            },
+        };
+        const eventFieldDetails: FieldDetails = {
+            editableElement: document.createElement('div'),
+            fieldMetadata: {
+                locale: 'en-us',
+            },
+        };
+
+        const result = isFieldDisabled(fieldSchemaMap, eventFieldDetails);
+        expect(result.isDisabled).toBe(true);
+        expect(result.reason).toBe('This field is not editable as it is not linked to the selected variant');
+    });
+
+    it('should return disabled state due to unlocalized variant', () => {
+        VisualBuilder.VisualBuilderGlobalState = {
+            value: {
+                locale: 'en-us',
+                variant: true,
+            },
+        };
+
+        const fieldSchemaMap: ISchemaFieldMap = {};
+        const eventFieldDetails: FieldDetails = {
+            editableElement: document.createElement('div'),
+            fieldMetadata: {
+                locale: 'fr-fr',
+            },
+        };
+
+        const result = isFieldDisabled(fieldSchemaMap, eventFieldDetails);
+        expect(result.isDisabled).toBe(true);
+        expect(result.reason).toBe('This field is not editable as it is not localized');
+    });
+
+    it('should return disabled state due to audience mode', () => {
+        VisualBuilder.VisualBuilderGlobalState = {
+            value: {
+                audienceMode: true,
+            },
+        };
+
+        const fieldSchemaMap: ISchemaFieldMap = {};
+        const eventFieldDetails: FieldDetails = {
+            editableElement: document.createElement('div'),
+            fieldMetadata: {
+                locale: 'en-us',
+            },
+        };
+
+        const result = isFieldDisabled(fieldSchemaMap, eventFieldDetails);
+        expect(result.isDisabled).toBe(true);
+        expect(result.reason).toBe('Open an Experience from Audience widget to start editing');
+    });
+
+    it('should return disabled state due to disabled variant', () => {
+        VisualBuilder.VisualBuilderGlobalState = {
+            value: {
+                audienceMode: true,
+            },
+        };
+
+        const fieldSchemaMap: ISchemaFieldMap = {};
+        const eventFieldDetails: FieldDetails = {
+            editableElement: document.createElement('div'),
+            fieldMetadata: {
+                locale: 'en-us',
+            },
+        };
+        eventFieldDetails.editableElement.classList.add('visual-builder__disabled-variant-field');
+
+        const result = isFieldDisabled(fieldSchemaMap, eventFieldDetails);
+        expect(result.isDisabled).toBe(true);
+        expect(result.reason).toBe('This field is not editable as it doesn\'t match the selected variant');
+        VisualBuilder.VisualBuilderGlobalState = {
+            value: {
+                audienceMode: false,
+            },
+        };
+    });
+
+    it('should return enabled state when no restrictions apply', () => {
+        const fieldSchemaMap: ISchemaFieldMap = {};
+        const eventFieldDetails: FieldDetails = {
+            editableElement: document.createElement('div'),
+            fieldMetadata: {
+                locale: 'en-us',
+            },
+        };
+
+        const result = isFieldDisabled(fieldSchemaMap, eventFieldDetails);
+        expect(result.isDisabled).toBe(false);
+        expect(result.reason).toBe('');
+    });
+});
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
