Merge pull request #310 from contentstack/VE-4530

fix(VE-4530): exclude properties doesn't check for frame status on `outsideLivePreviewPortal`

package.json

@@ -1,6 +1,6 @@
 {
     "name": "@contentstack/live-preview-utils",
-    "version": "3.0.1",
+    "version": "3.0.2",
     "description": "Contentstack provides the Live Preview SDK to establish a communication channel between the various Contentstack SDKs and your website, transmitting  live changes to the preview pane.",
     "type": "module",
     "types": "dist/legacy/index.d.ts",

src/configManager/__test__/handleUserConfig.test.ts

@@ -370,6 +370,63 @@ describe("handleInitData()", () => {
             expect(config.stackDetails.locale).toBe("en-us");
         });
     });
+
+    describe("handleInitData() - editButton configuration", () => {
+        let config: DeepSignal<IConfig>;
+
+        beforeEach(() => {
+            Config.reset();
+            config = Config.get();
+        });
+
+        afterAll(() => {
+            Config.reset();
+        });
+
+        test("should set editButton enable from initData", () => {
+            const initData: Partial<IInitData> = {
+                editButton: {
+                    enable: false,
+                },
+            };
+
+            handleInitData(initData);
+            expect(config.editButton.enable).toBe(false);
+        });
+
+        test("should set editButton exclude from initData if it is an array", () => {
+            const initData: Partial<IInitData> = {
+                editButton: {
+                    exclude: ["insideLivePreviewPortal"],
+                },
+            };
+
+            handleInitData(initData);
+            expect(config.editButton.exclude).toEqual(["insideLivePreviewPortal"]);
+        });
+
+        test("should set editButton position from initData", () => {
+            const initData: Partial<IInitData> = {
+                editButton: {
+                    position: "bottom",
+                },
+            };
+
+            handleInitData(initData);
+            expect(config.editButton.position).toBe("bottom");
+        });
+
+        test("should set editButton includeByQueryParameter from initData", () => {
+            const initData: Partial<IInitData> = {
+                editButton: {
+                    includeByQueryParameter: false,
+                },
+            };
+
+            handleInitData(initData);
+            expect(config.editButton.includeByQueryParameter).toBe(false);
+        });
+    });
 });
 
 describe("handleClientUrlParams()", () => {

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

@@ -1,10 +1,14 @@
-import { Mock } from "vitest";
+import { Mock, vitest } from "vitest";
 import { DOMRect } from "../../../__test__/utils";
 import {
     createMultipleEditButton,
     createSingularEditButton,
     getEditButtonPosition,
+    shouldRenderEditButton
 } from "../editButton";
+import Config from "../../../configManager/configManager";
+import * as inIframe from "../../../common/inIframe";
+import { PublicLogger } from "../../../logger/logger";
 
 let editCallback: Mock<(e: MouseEvent) => void> | undefined;
 let linkCallback: Mock<(e: MouseEvent) => void> | undefined;
@@ -241,3 +245,75 @@ describe("Edit button for Link", () => {
         expect(linkCallback).toBeCalled();
     });
 });
+
+describe("shouldRenderEditButton", () => {
+    test("should return true if the config has enabled as true", () => {
+        vitest.spyOn(Config, "get").mockReturnValue({ editButton: { enable: true } });
+        expect(shouldRenderEditButton()).toBe(true);
+    });
+    test("should return false if the config has enabled as false", () => {
+        vitest.spyOn(Config, "get").mockReturnValue({ editButton: { enable: false } });
+        expect(shouldRenderEditButton()).toBe(false);
+    });
+
+    describe("includeByQueryParameter", () => {
+        test("should log error and return false if enable key is undefined", () => {
+            const loggerSpy = vitest.spyOn(PublicLogger, "error");
+            vitest.spyOn(Config, "get").mockReturnValue({ editButton: {} });
+            expect(shouldRenderEditButton()).toBe(false);
+            expect(loggerSpy).toHaveBeenCalledWith("enable key is required inside editButton object");
+        });
+
+        test("should return true if cslp-buttons query parameter is true", () => {
+            vitest.spyOn(Config, "get").mockReturnValue({ editButton: { enable: true } });
+            vitest.spyOn(window, "location", "get").mockReturnValue({
+                href: "http://example.com?cslp-buttons=true",
+            } as Location);
+            expect(shouldRenderEditButton()).toBe(true);
+        });
+
+        test("should return false if cslp-buttons query parameter is false", () => {
+            vitest.spyOn(Config, "get").mockReturnValue({ editButton: { enable: true } });
+            vitest.spyOn(window, "location", "get").mockReturnValue({
+                href: "http://example.com?cslp-buttons=false",
+            } as Location);
+            expect(shouldRenderEditButton()).toBe(false);
+        });
+
+        test("should return true if cslp-buttons query parameter is not present", () => {
+            vitest.spyOn(Config, "get").mockReturnValue({ editButton: { enable: true } });
+            vitest.spyOn(window, "location", "get").mockReturnValue({
+                href: "http://example.com",
+            } as Location);
+            expect(shouldRenderEditButton()).toBe(true);
+        });
+    })
+    describe("exclude", () => {
+        test("should return false if the config has exclude as `insideLivePreviewPortal` and the element is inside live preview portal", () => {
+            vitest.spyOn(inIframe, "inIframe").mockReturnValue(true);
+            vitest.spyOn(Config, "get").mockReturnValue({ editButton: { enable: true, exclude: ["insideLivePreviewPortal"] } });
+            expect(shouldRenderEditButton()).toBe(false);
+        });
+        test("should return true if the config has exclude as `insideLivePreviewPortal` and the element is not inside live preview portal", () => {
+            vitest.spyOn(inIframe, "inIframe").mockReturnValue(false);
+            vitest.spyOn(Config, "get").mockReturnValue({ editButton: { enable: true, exclude: ["insideLivePreviewPortal"] } });
+            expect(shouldRenderEditButton()).toBe(true);
+        });
+        test("should return false if the config has exclude as `outsideLivePreviewPortal` and the element is not inside live preview portal", () => {
+            vitest.spyOn(inIframe, "inIframe").mockReturnValue(false);
+            vitest.spyOn(Config, "get").mockReturnValue({ editButton: { enable: true, exclude: ["outsideLivePreviewPortal"] } });
+            expect(shouldRenderEditButton()).toBe(false);
+        });
+        test("should return true if the config has exclude as `outsideLivePreviewPortal` and the element is inside live preview portal", () => {
+            vitest.spyOn(inIframe, "inIframe").mockReturnValue(true);
+            vitest.spyOn(Config, "get").mockReturnValue({ editButton: { enable: true, exclude: ["outsideLivePreviewPortal"] } });
+            expect(shouldRenderEditButton()).toBe(true);
+        });
+    })
+
+    test("should return false if the website is rendered in Builder", () => {
+        vitest.spyOn(Config, "get").mockReturnValue({ editButton: { enable: true }, windowType: "builder" });
+        vitest.spyOn(inIframe, "inIframe").mockReturnValue(true);
+        expect(shouldRenderEditButton()).toBe(false);
+    })
+})

src/livePreview/editButton/editButton.ts

@@ -225,6 +225,7 @@ export function shouldRenderEditButton(): boolean {
 
     // case outside live preview
     if (
+        !iFrameCheck &&
         config.editButton.exclude?.find(
             (exclude) => exclude === "outsideLivePreviewPortal"
         )