test: fix unit tests related to add instance button

Author: faraazb-contentstack

src/visualBuilder/components/__test__/addInstanceButton.test.tsx

@@ -1,3 +1,4 @@
+import React from "preact/compat";
 import {
     act,
     cleanup,
@@ -7,6 +8,21 @@ import {
 } from "@testing-library/preact";
 import { singleLineFieldSchema } from "../../../__test__/data/fields";
 import AddInstanceButtonComponent from "../addInstanceButton";
+import visualBuilderPostMessageActual from "../../utils/visualBuilderPostMessage";
+import { getDiscussionIdByFieldMetaData } from "../../utils/getDiscussionIdByFieldMetaData";
+
+const visualBuilderPostMessage = vi.mocked(visualBuilderPostMessageActual);
+
+vi.mock("../../utils/visualBuilderPostMessage", async () => {
+    return {
+        default: {
+            send: vi.fn().mockImplementation((_eventName: string) => {
+                return Promise.resolve({});
+            }),
+            on: vi.fn(),
+        },
+    };
+});
 
 describe("AddInstanceButtonComponent", () => {
     afterEach(cleanup);
@@ -18,10 +34,16 @@ describe("AddInstanceButtonComponent", () => {
                 <AddInstanceButtonComponent
                     value={[]}
                     fieldSchema={singleLineFieldSchema}
+                    // @ts-expect-error mocking fieldMetadata
+                    fieldMetadata={{}}
+                    index={0}
                     onClick={onClickCallback}
+                    label="Add instance"
+                    // @ts-expect-error mocking signal
+                    loading={{ value: false }}
                 />
             );
-        })
+        });
         const buttonElement = getByTestId(
             document.body,
             "visual-builder-add-instance-button"
@@ -33,22 +55,63 @@ describe("AddInstanceButtonComponent", () => {
         expect(buttonElement.querySelector("path")).toBeTruthy();
     });
 
-    test("calls onClickCallback when button is clicked", async () => {
+    test("sends add-instance message when clicked", async () => {
         const onClickCallback = vi.fn();
         await act(() => {
             render(
                 <AddInstanceButtonComponent
                     value={[]}
                     fieldSchema={singleLineFieldSchema}
+                    // @ts-expect-error mocking fieldMetadata
+                    fieldMetadata={{}}
+                    index={0}
                     onClick={onClickCallback}
+                    label="Add instance"
+                    // @ts-expect-error mocking signal
+                    loading={{ value: false }}
                 />
             );
-        })
+        });
         const buttonElement = getByTestId(
             document.body,
             "visual-builder-add-instance-button"
         );
-        fireEvent.click(buttonElement);
+        await act(() => {
+            fireEvent.click(buttonElement);
+        });
+        expect(visualBuilderPostMessage?.send).toHaveBeenCalledWith(
+            "add-instance",
+            {
+                fieldMetadata: {},
+                index: 0,
+            }
+        );
+    });
+
+    test("calls onClick callback when clicked", async () => {
+        const onClickCallback = vi.fn();
+        await act(() => {
+            render(
+                <AddInstanceButtonComponent
+                    value={[]}
+                    fieldSchema={singleLineFieldSchema}
+                    // @ts-expect-error mocking fieldMetadata
+                    fieldMetadata={{}}
+                    index={0}
+                    onClick={onClickCallback}
+                    label="Add instance"
+                    // @ts-expect-error mocking signal
+                    loading={{ value: false }}
+                />
+            );
+        });
+        const buttonElement = getByTestId(
+            document.body,
+            "visual-builder-add-instance-button"
+        );
+        await act(() => {
+            fireEvent.click(buttonElement);
+        });
         expect(onClickCallback).toHaveBeenCalled();
     });
 });

…r/utils/__test__/instanceButtons.test.ts …st__/generateAddInstanceButtons.test.tsxsrc/visualBuilder/utils/__test__/instanceButtons.test.ts renamed to src/visualBuilder/generators/__test__/generateAddInstanceButtons.test.tsx src/visualBuilder/utils/__test__/instanceButtons.test.ts renamed to src/visualBuilder/generators/__test__/generateAddInstanceButtons.test.tsx

@@ -1,29 +1,67 @@
+import React from "preact/compat";
 import { singleLineFieldSchema } from "../../../__test__/data/fields";
-import { ISchemaFieldMap } from "../types/index.types";
 import {
     getAddInstanceButtons,
     generateAddInstanceButton,
-} from "./../../generators/generateAddInstanceButtons";
+} from "../generateAddInstanceButtons";
+import AddInstanceButtonComponentActual from "../../components/addInstanceButton";
+
+const AddInstanceButtonComponent = vi.mocked(AddInstanceButtonComponentActual);
+
+vi.mock("../../components/addInstanceButton", async () => {
+    return {
+        default: vi.fn().mockImplementation(() => {
+            return (
+                <button data-testid="add-instance-button">
+                    Add instance button
+                </button>
+            );
+        }),
+    };
+});
 
 describe("generateAddInstanceButton", () => {
-    test("should generate a button", () => {
+    afterEach(() => {
+        vi.clearAllMocks();
+    });
+
+    test("should generate and return a button", () => {
         const button = generateAddInstanceButton({
             fieldSchema: singleLineFieldSchema,
             value: "",
-            onClick: () => {},
+            // @ts-expect-error mock field metadata
+            fieldMetadata: { hello: "world" },
+            onClick: vi.fn(),
+            // @ts-expect-error mocking preact signal
+            loading: { value: false },
+            index: 0,
+            label: "Add Instance",
         });
         expect(button).toBeInstanceOf(HTMLButtonElement);
     });
 
-    test("should call the callback when clicked", () => {
-        const callback = vi.fn();
-        const button = generateAddInstanceButton({
+    test("should call the AddInstanceButtonComponent with the correct props", () => {
+        generateAddInstanceButton({
+            fieldSchema: singleLineFieldSchema,
+            value: "",
+            // @ts-expect-error mock field metadata
+            fieldMetadata: { hello: "world" },
+            onClick: vi.fn(),
+            // @ts-expect-error mocking preact signal
+            loading: { value: false },
+            index: 0,
+            label: "Add Instance",
+        });
+        const args = AddInstanceButtonComponent.mock.calls[0][0];
+        expect(args).toStrictEqual({
             fieldSchema: singleLineFieldSchema,
             value: "",
-            onClick: callback,
+            fieldMetadata: { hello: "world" },
+            onClick: expect.any(Function),
+            loading: { value: false },
+            index: 0,
+            label: "Add Instance",
         });
-        button.click();
-        expect(callback).toHaveBeenCalledTimes(1);
     });
 });
 

src/visualBuilder/utils/__test__/multipleElementAddButton.test.ts

@@ -13,6 +13,7 @@ import getChildrenDirection from "../getChildrenDirection";
 import visualBuilderPostMessage from "../visualBuilderPostMessage";
 import { VisualBuilderPostMessageEvents } from "../types/postMessage.types";
 import { singleLineFieldSchema } from "../../../__test__/data/fields";
+import { signal } from "@preact/signals";
 
 Object.defineProperty(globalThis, "crypto", {
     value: {
@@ -46,27 +47,16 @@ vi.mock("../visualBuilderPostMessage", async () => {
     };
 });
 
-describe("generateAddInstanceButton", () => {
-    test("should generate a button", () => {
-        const button = generateAddInstanceButton({
-            fieldSchema: singleLineFieldSchema,
-            value: "",
-            onClick: () => {},
-        });
-        expect(button.tagName).toBe("BUTTON");
-    });
-
-    test("should run the callback when the button is clicked", () => {
-        const mockCallback = vi.fn();
-        const button = generateAddInstanceButton({
-            fieldSchema: singleLineFieldSchema,
-            value: "",
-            onClick: mockCallback,
-        });
-
-        button.click();
-        expect(mockCallback).toHaveBeenCalled();
-    });
+vi.mock("@preact/signals", async (importOriginal) => {
+    const actual = await importOriginal();
+    return {
+        ...(actual as unknown as Record<string, any>),
+        signal: (initialValue: any) => {
+            return {
+                value: initialValue,
+            };
+        },
+    };
 });
 
 // TODO: rewrite this
@@ -577,13 +567,19 @@ describe("removeAddInstanceButtons", () => {
 
         previousButton = generateAddInstanceButton({
             fieldSchema: singleLineFieldSchema,
+            // @ts-expect-error mock field metadata
+            fieldMetadata: { hello: "world" },
             value: "",
             onClick: vi.fn(),
+            loading: signal(false),
         });
         nextButton = generateAddInstanceButton({
             fieldSchema: singleLineFieldSchema,
             value: "",
+            // @ts-expect-error mock field metadata
+            fieldMetadata: { hello: "world" },
             onClick: vi.fn(),
+            loading: signal(false),
         });
         overlayWrapper = document.createElement("div");
         eventTarget = document.createElement("div");
@@ -672,7 +668,10 @@ describe("removeAddInstanceButtons", () => {
             const button = generateAddInstanceButton({
                 fieldSchema: singleLineFieldSchema,
                 value: "",
-                onClick: () => {},
+                // @ts-expect-error mock field metadata
+                fieldMetadata: { hello: "world" },
+                onClick: vi.fn(),
+                loading: signal(false),
             });
             visualBuilderContainer.appendChild(button);
         }
@@ -704,7 +703,10 @@ describe("removeAddInstanceButtons", () => {
             const button = generateAddInstanceButton({
                 fieldSchema: singleLineFieldSchema,
                 value: "",
-                onClick: () => {},
+                // @ts-expect-error mock field metadata
+                fieldMetadata: { hello: "world" },
+                onClick: vi.fn(),
+                loading: signal(false),
             });
             visualBuilderContainer.appendChild(button);
         }