diff --git a/src/utils/index.ts b/src/utils/index.ts index 4030ca0d..97b91903 100644 --- a/src/utils/index.ts +++ b/src/utils/index.ts @@ -27,4 +27,13 @@ export function isOpeningInTimeline(): boolean { return !!previewTimestamp; } return false; -} \ No newline at end of file +} + +export function isOpenInBuilder(): boolean { + if (hasWindow()) { + const urlParams = new URLSearchParams(window.location.search); + const builder = urlParams.get("builder"); + return !!builder; + } + return false; +} diff --git a/src/visualBuilder/__test__/click/fields/boolean.test.tsx b/src/visualBuilder/__test__/click/fields/boolean.test.tsx index 9d68237e..15c66c92 100644 --- a/src/visualBuilder/__test__/click/fields/boolean.test.tsx +++ b/src/visualBuilder/__test__/click/fields/boolean.test.tsx @@ -60,6 +60,15 @@ vi.mock("../../../utils/visualBuilderPostMessage", async () => { }; }); +vi.mock("../../../../utils/index.ts", async () => { + const actual = await vi.importActual("../../../../utils"); + return { + __esModule: true, + ...actual, + isOpenInBuilder: vi.fn().mockReturnValue(true), + }; +}); + describe("When an element is clicked in visual builder mode", () => { let mouseClickEvent: Event; @@ -107,7 +116,10 @@ describe("When an element is clicked in visual builder mode", () => { document.body.appendChild(booleanField); visualBuilder = new VisualBuilder(); - await triggerAndWaitForClickAction(visualBuilderPostMessage, booleanField); + await triggerAndWaitForClickAction( + visualBuilderPostMessage, + booleanField + ); }); afterAll(() => { @@ -147,7 +159,6 @@ describe("When an element is clicked in visual builder mode", () => { }); test("should send a focus field message to parent", async () => { - await waitFor(() => { expect(visualBuilderPostMessage?.send).toBeCalledWith( VisualBuilderPostMessageEvents.FOCUS_FIELD, diff --git a/src/visualBuilder/__test__/click/fields/date.test.tsx b/src/visualBuilder/__test__/click/fields/date.test.tsx index 2fd2c808..ede2493c 100644 --- a/src/visualBuilder/__test__/click/fields/date.test.tsx +++ b/src/visualBuilder/__test__/click/fields/date.test.tsx @@ -60,6 +60,15 @@ vi.mock("../../../utils/visualBuilderPostMessage", async () => { }; }); +vi.mock("../../../../utils/index.ts", async () => { + const actual = await vi.importActual("../../../../utils"); + return { + __esModule: true, + ...actual, + isOpenInBuilder: vi.fn().mockReturnValue(true), + }; +}); + describe("When an element is clicked in visual builder mode", () => { let mouseClickEvent: Event; @@ -107,7 +116,10 @@ describe("When an element is clicked in visual builder mode", () => { document.body.appendChild(dateField); visualBuilder = new VisualBuilder(); - await triggerAndWaitForClickAction(visualBuilderPostMessage, dateField); + await triggerAndWaitForClickAction( + visualBuilderPostMessage, + dateField + ); }); afterAll(() => { diff --git a/src/visualBuilder/__test__/click/fields/file.test.tsx b/src/visualBuilder/__test__/click/fields/file.test.tsx index e4a1c63f..ddeba7cc 100644 --- a/src/visualBuilder/__test__/click/fields/file.test.tsx +++ b/src/visualBuilder/__test__/click/fields/file.test.tsx @@ -49,6 +49,15 @@ vi.mock("../../../utils/visualBuilderPostMessage", async () => { }; }); +vi.mock("../../../../utils/index.ts", async () => { + const actual = await vi.importActual("../../../../utils"); + return { + __esModule: true, + ...actual, + isOpenInBuilder: vi.fn().mockReturnValue(true), + }; +}); + describe("When an element is clicked in visual builder mode", () => { let mouseClickEvent: Event; @@ -105,7 +114,10 @@ describe("When an element is clicked in visual builder mode", () => { document.body.appendChild(fileField); document.body.appendChild(imageField); visualBuilder = new VisualBuilder(); - await triggerAndWaitForClickAction(visualBuilderPostMessage, fileField); + await triggerAndWaitForClickAction( + visualBuilderPostMessage, + fileField + ); }); afterAll(() => { @@ -202,7 +214,10 @@ describe("When an element is clicked in visual builder mode", () => { document.body.appendChild(container); visualBuilder = new VisualBuilder(); - await triggerAndWaitForClickAction(visualBuilderPostMessage, container); + await triggerAndWaitForClickAction( + visualBuilderPostMessage, + container + ); }); afterAll(() => { diff --git a/src/visualBuilder/__test__/click/fields/group.test.tsx b/src/visualBuilder/__test__/click/fields/group.test.tsx index 59d708ac..29e85aa5 100644 --- a/src/visualBuilder/__test__/click/fields/group.test.tsx +++ b/src/visualBuilder/__test__/click/fields/group.test.tsx @@ -49,6 +49,15 @@ vi.mock("../../../utils/visualBuilderPostMessage", async () => { }; }); +vi.mock("../../../../utils/index.ts", async () => { + const actual = await vi.importActual("../../../../utils"); + return { + __esModule: true, + ...actual, + isOpenInBuilder: vi.fn().mockReturnValue(true), + }; +}); + describe("When an element is clicked in visual builder mode", () => { let mouseClickEvent: Event; @@ -98,7 +107,10 @@ describe("When an element is clicked in visual builder mode", () => { document.body.appendChild(groupField); visualBuilder = new VisualBuilder(); - await triggerAndWaitForClickAction(visualBuilderPostMessage, groupField); + await triggerAndWaitForClickAction( + visualBuilderPostMessage, + groupField + ); }); afterAll(() => { @@ -190,7 +202,10 @@ describe("When an element is clicked in visual builder mode", () => { document.body.appendChild(container); visualBuilder = new VisualBuilder(); - await triggerAndWaitForClickAction(visualBuilderPostMessage, container); + await triggerAndWaitForClickAction( + visualBuilderPostMessage, + container + ); }); afterAll(() => { diff --git a/src/visualBuilder/__test__/click/fields/html-rte.test.tsx b/src/visualBuilder/__test__/click/fields/html-rte.test.tsx index df4cf553..a1dc4146 100644 --- a/src/visualBuilder/__test__/click/fields/html-rte.test.tsx +++ b/src/visualBuilder/__test__/click/fields/html-rte.test.tsx @@ -49,6 +49,15 @@ vi.mock("../../../utils/visualBuilderPostMessage", async () => { }; }); +vi.mock("../../../../utils/index.ts", async () => { + const actual = await vi.importActual("../../../../utils"); + return { + __esModule: true, + ...actual, + isOpenInBuilder: vi.fn().mockReturnValue(true), + }; +}); + describe("When an element is clicked in visual builder mode", () => { let mouseClickEvent: Event; @@ -96,7 +105,10 @@ describe("When an element is clicked in visual builder mode", () => { ); document.body.appendChild(htmlRteField); visualBuilder = new VisualBuilder(); - await triggerAndWaitForClickAction(visualBuilderPostMessage, htmlRteField) + await triggerAndWaitForClickAction( + visualBuilderPostMessage, + htmlRteField + ); }); afterAll(() => { @@ -177,7 +189,10 @@ describe("When an element is clicked in visual builder mode", () => { document.body.appendChild(container); visualBuilder = new VisualBuilder(); - await triggerAndWaitForClickAction(visualBuilderPostMessage, container); + await triggerAndWaitForClickAction( + visualBuilderPostMessage, + container + ); }); afterAll(() => { visualBuilder.destroy(); diff --git a/src/visualBuilder/__test__/click/fields/json-rte.test.tsx b/src/visualBuilder/__test__/click/fields/json-rte.test.tsx index db4198a6..d59f60b0 100644 --- a/src/visualBuilder/__test__/click/fields/json-rte.test.tsx +++ b/src/visualBuilder/__test__/click/fields/json-rte.test.tsx @@ -49,6 +49,15 @@ vi.mock("../../../utils/visualBuilderPostMessage", async () => { }; }); +vi.mock("../../../../utils/index.ts", async () => { + const actual = await vi.importActual("../../../../utils"); + return { + __esModule: true, + ...actual, + isOpenInBuilder: vi.fn().mockReturnValue(true), + }; +}); + describe("When an element is clicked in visual builder mode", () => { let mouseClickEvent: Event; @@ -97,7 +106,10 @@ describe("When an element is clicked in visual builder mode", () => { document.body.appendChild(jsonRteField); visualBuilder = new VisualBuilder(); - await triggerAndWaitForClickAction(visualBuilderPostMessage, jsonRteField); + await triggerAndWaitForClickAction( + visualBuilderPostMessage, + jsonRteField + ); }); afterAll(() => { @@ -178,7 +190,10 @@ describe("When an element is clicked in visual builder mode", () => { document.body.appendChild(container); visualBuilder = new VisualBuilder(); - await triggerAndWaitForClickAction(visualBuilderPostMessage, container); + await triggerAndWaitForClickAction( + visualBuilderPostMessage, + container + ); }); afterAll(() => { diff --git a/src/visualBuilder/__test__/click/fields/link.test.tsx b/src/visualBuilder/__test__/click/fields/link.test.tsx index 39555366..f715526c 100644 --- a/src/visualBuilder/__test__/click/fields/link.test.tsx +++ b/src/visualBuilder/__test__/click/fields/link.test.tsx @@ -49,6 +49,15 @@ vi.mock("../../../utils/visualBuilderPostMessage", async () => { }; }); +vi.mock("../../../../utils/index.ts", async () => { + const actual = await vi.importActual("../../../../utils"); + return { + __esModule: true, + ...actual, + isOpenInBuilder: vi.fn().mockReturnValue(true), + }; +}); + describe("When an element is clicked in visual builder mode", () => { beforeAll(() => { FieldSchemaMap.setFieldSchema( @@ -91,7 +100,10 @@ describe("When an element is clicked in visual builder mode", () => { document.body.appendChild(linkField); visualBuilder = new VisualBuilder(); - await triggerAndWaitForClickAction(visualBuilderPostMessage, linkField); + await triggerAndWaitForClickAction( + visualBuilderPostMessage, + linkField + ); }); afterAll(() => { @@ -173,7 +185,10 @@ describe("When an element is clicked in visual builder mode", () => { document.body.appendChild(container); visualBuilder = new VisualBuilder(); - await triggerAndWaitForClickAction(visualBuilderPostMessage, container); + await triggerAndWaitForClickAction( + visualBuilderPostMessage, + container + ); }); afterAll(() => { diff --git a/src/visualBuilder/__test__/click/fields/markdown.test.tsx b/src/visualBuilder/__test__/click/fields/markdown.test.tsx index 1c9c67ef..1ac38aa0 100644 --- a/src/visualBuilder/__test__/click/fields/markdown.test.tsx +++ b/src/visualBuilder/__test__/click/fields/markdown.test.tsx @@ -49,8 +49,16 @@ vi.mock("../../../utils/visualBuilderPostMessage", async () => { }; }); -describe("When an element is clicked in visual builder mode", () => { +vi.mock("../../../../utils/index.ts", async () => { + const actual = await vi.importActual("../../../../utils"); + return { + __esModule: true, + ...actual, + isOpenInBuilder: vi.fn().mockReturnValue(true), + }; +}); +describe("When an element is clicked in visual builder mode", () => { beforeAll(() => { FieldSchemaMap.setFieldSchema( "all_fields", @@ -93,7 +101,10 @@ describe("When an element is clicked in visual builder mode", () => { document.body.appendChild(markdownField); visualBuilder = new VisualBuilder(); - await triggerAndWaitForClickAction(visualBuilderPostMessage, markdownField); + await triggerAndWaitForClickAction( + visualBuilderPostMessage, + markdownField + ); }); afterAll(() => { @@ -174,7 +185,10 @@ describe("When an element is clicked in visual builder mode", () => { document.body.appendChild(container); visualBuilder = new VisualBuilder(); - await triggerAndWaitForClickAction(visualBuilderPostMessage, container); + await triggerAndWaitForClickAction( + visualBuilderPostMessage, + container + ); }); afterAll(() => { diff --git a/src/visualBuilder/__test__/click/fields/multi-line.test.tsx b/src/visualBuilder/__test__/click/fields/multi-line.test.tsx index d4bb1c79..5892dcd7 100644 --- a/src/visualBuilder/__test__/click/fields/multi-line.test.tsx +++ b/src/visualBuilder/__test__/click/fields/multi-line.test.tsx @@ -49,8 +49,16 @@ vi.mock("../../../utils/visualBuilderPostMessage", async () => { }; }); -describe("When an element is clicked in visual builder mode", () => { +vi.mock("../../../../utils/index.ts", async () => { + const actual = await vi.importActual("../../../../utils"); + return { + __esModule: true, + ...actual, + isOpenInBuilder: vi.fn().mockReturnValue(true), + }; +}); +describe("When an element is clicked in visual builder mode", () => { beforeAll(async () => { FieldSchemaMap.setFieldSchema( "all_fields", @@ -115,7 +123,10 @@ describe("When an element is clicked in visual builder mode", () => { document.body.appendChild(multiLineField); visualBuilder = new VisualBuilder(); - await triggerAndWaitForClickAction(visualBuilderPostMessage, multiLineField) + await triggerAndWaitForClickAction( + visualBuilderPostMessage, + multiLineField + ); }); afterAll(() => { @@ -222,12 +233,15 @@ describe("When an element is clicked in visual builder mode", () => { audienceMode: false, }; visualBuilder = new VisualBuilder(); - await triggerAndWaitForClickAction(visualBuilderPostMessage, container); + await triggerAndWaitForClickAction( + visualBuilderPostMessage, + container + ); }); afterAll(() => { visualBuilder.destroy(); - }) + }); test("should have outline", () => { expect(container.classList.contains("cslp-edit-mode")); }); @@ -252,7 +266,6 @@ describe("When an element is clicked in visual builder mode", () => { VISUAL_BUILDER_FIELD_TYPE_ATTRIBUTE_KEY ); }); - }); test("container should not contain a contenteditable attribute but the children can", async () => { diff --git a/src/visualBuilder/__test__/click/fields/number.test.tsx b/src/visualBuilder/__test__/click/fields/number.test.tsx index 2ac743d2..66669c22 100644 --- a/src/visualBuilder/__test__/click/fields/number.test.tsx +++ b/src/visualBuilder/__test__/click/fields/number.test.tsx @@ -53,6 +53,15 @@ vi.mock("../../../utils/visualBuilderPostMessage", async () => { }; }); +vi.mock("../../../../utils/index.ts", async () => { + const actual = await vi.importActual("../../../../utils"); + return { + __esModule: true, + ...actual, + isOpenInBuilder: vi.fn().mockReturnValue(true), + }; +}); + describe("When an element is clicked in visual builder mode", () => { beforeAll(async () => { FieldSchemaMap.setFieldSchema( @@ -118,7 +127,10 @@ describe("When an element is clicked in visual builder mode", () => { document.body.appendChild(numberField); visualBuilder = new VisualBuilder(); - await triggerAndWaitForClickAction(visualBuilderPostMessage, numberField) + await triggerAndWaitForClickAction( + visualBuilderPostMessage, + numberField + ); }); afterAll(() => { @@ -214,7 +226,10 @@ describe("When an element is clicked in visual builder mode", () => { document.body.appendChild(container); visualBuilder = new VisualBuilder(); - await triggerAndWaitForClickAction(visualBuilderPostMessage, container) + await triggerAndWaitForClickAction( + visualBuilderPostMessage, + container + ); }); afterAll(() => { diff --git a/src/visualBuilder/__test__/click/fields/reference.test.tsx b/src/visualBuilder/__test__/click/fields/reference.test.tsx index d15b8798..980ae7f5 100644 --- a/src/visualBuilder/__test__/click/fields/reference.test.tsx +++ b/src/visualBuilder/__test__/click/fields/reference.test.tsx @@ -9,7 +9,11 @@ import visualBuilderPostMessage from "../../../utils/visualBuilderPostMessage"; import { vi } from "vitest"; import { VisualBuilderPostMessageEvents } from "../../../utils/types/postMessage.types"; import { VisualBuilder } from "../../../index"; -import { mockGetBoundingClientRect, sleep, triggerAndWaitForClickAction } from "../../../../__test__/utils"; +import { + mockGetBoundingClientRect, + sleep, + triggerAndWaitForClickAction, +} from "../../../../__test__/utils"; vi.mock("../../../components/FieldToolbar", () => { return { @@ -49,8 +53,16 @@ vi.mock("../../../utils/visualBuilderPostMessage", async () => { }; }); -describe("When an element is clicked in visual builder mode", () => { +vi.mock("../../../../utils/index.ts", async () => { + const actual = await vi.importActual("../../../../utils"); + return { + __esModule: true, + ...actual, + isOpenInBuilder: vi.fn().mockReturnValue(true), + }; +}); +describe("When an element is clicked in visual builder mode", () => { beforeAll(async () => { FieldSchemaMap.setFieldSchema( "all_fields", @@ -93,7 +105,10 @@ describe("When an element is clicked in visual builder mode", () => { document.body.appendChild(referenceField); visualBuilder = new VisualBuilder(); - await triggerAndWaitForClickAction(visualBuilderPostMessage, referenceField) + await triggerAndWaitForClickAction( + visualBuilderPostMessage, + referenceField + ); }); afterAll(() => { @@ -105,10 +120,13 @@ describe("When an element is clicked in visual builder mode", () => { "[data-testid='visual-builder__overlay--outline']" ); await waitFor(() => { - expect(hoverOutline).toHaveAttribute("style") + expect(hoverOutline).toHaveAttribute("style"); }); - - expect(hoverOutline).toHaveAttribute("style", "top: 10px; height: 5px; width: 10px; left: 10px; outline-color: rgb(113, 92, 221);"); + + expect(hoverOutline).toHaveAttribute( + "style", + "top: 10px; height: 5px; width: 10px; left: 10px; outline-color: rgb(113, 92, 221);" + ); }); test("should have an overlay", () => { @@ -180,7 +198,10 @@ describe("When an element is clicked in visual builder mode", () => { document.body.appendChild(container); visualBuilder = new VisualBuilder(); - await triggerAndWaitForClickAction(visualBuilderPostMessage, container); + await triggerAndWaitForClickAction( + visualBuilderPostMessage, + container + ); }); afterAll(() => { @@ -192,9 +213,12 @@ describe("When an element is clicked in visual builder mode", () => { "[data-testid='visual-builder__overlay--outline']" ); await waitFor(() => { - expect(hoverOutline).toHaveAttribute("style") + expect(hoverOutline).toHaveAttribute("style"); }); - expect(hoverOutline).toHaveAttribute("style", "top: 10px; height: 5px; width: 10px; left: 10px; outline-color: rgb(113, 92, 221);"); + expect(hoverOutline).toHaveAttribute( + "style", + "top: 10px; height: 5px; width: 10px; left: 10px; outline-color: rgb(113, 92, 221);" + ); }); test("should have an overlay", () => { diff --git a/src/visualBuilder/__test__/click/fields/select.test.tsx b/src/visualBuilder/__test__/click/fields/select.test.tsx index 06613e3e..658ebff4 100644 --- a/src/visualBuilder/__test__/click/fields/select.test.tsx +++ b/src/visualBuilder/__test__/click/fields/select.test.tsx @@ -54,8 +54,16 @@ vi.mock("../../../utils/visualBuilderPostMessage", async () => { }; }); -describe("When an element is clicked in visual builder mode", () => { +vi.mock("../../../../utils/index.ts", async () => { + const actual = await vi.importActual("../../../../utils"); + return { + __esModule: true, + ...actual, + isOpenInBuilder: vi.fn().mockReturnValue(true), + }; +}); +describe("When an element is clicked in visual builder mode", () => { beforeAll(() => { FieldSchemaMap.setFieldSchema( "all_fields", @@ -97,7 +105,10 @@ describe("When an element is clicked in visual builder mode", () => { document.body.appendChild(selectField); visualBuilder = new VisualBuilder(); - await triggerAndWaitForClickAction(visualBuilderPostMessage, selectField); + await triggerAndWaitForClickAction( + visualBuilderPostMessage, + selectField + ); }); afterAll(() => { @@ -178,7 +189,10 @@ describe("When an element is clicked in visual builder mode", () => { document.body.appendChild(container); visualBuilder = new VisualBuilder(); - await triggerAndWaitForClickAction(visualBuilderPostMessage, container); + await triggerAndWaitForClickAction( + visualBuilderPostMessage, + container + ); }); afterAll(() => { diff --git a/src/visualBuilder/__test__/click/fields/single-line.test.tsx b/src/visualBuilder/__test__/click/fields/single-line.test.tsx index 2e96ef95..a85720ea 100644 --- a/src/visualBuilder/__test__/click/fields/single-line.test.tsx +++ b/src/visualBuilder/__test__/click/fields/single-line.test.tsx @@ -55,8 +55,16 @@ vi.mock("../../../utils/visualBuilderPostMessage", async () => { }; }); -describe("When an element is clicked in visual builder mode", () => { +vi.mock("../../../../utils/index.ts", async () => { + const actual = await vi.importActual("../../../../utils"); + return { + __esModule: true, + ...actual, + isOpenInBuilder: vi.fn().mockReturnValue(true), + }; +}); +describe("When an element is clicked in visual builder mode", () => { beforeAll(() => { FieldSchemaMap.setFieldSchema( "all_fields", @@ -134,12 +142,15 @@ describe("When an element is clicked in visual builder mode", () => { audienceMode: false, }; visualBuilder = new VisualBuilder(); - await triggerAndWaitForClickAction(visualBuilderPostMessage, singleLineField); + await triggerAndWaitForClickAction( + visualBuilderPostMessage, + singleLineField + ); }); afterAll(() => { visualBuilder.destroy(); - }) + }); test("should have outline", () => { expect(singleLineField.classList.contains("cslp-edit-mode")); @@ -210,7 +221,7 @@ describe("When an element is clicked in visual builder mode", () => { return Promise.resolve({}); } ); - + container = document.createElement("div"); container.setAttribute( "data-cslp", @@ -243,7 +254,10 @@ describe("When an element is clicked in visual builder mode", () => { audienceMode: false, }; visualBuilder = new VisualBuilder(); - await triggerAndWaitForClickAction(visualBuilderPostMessage, container); + await triggerAndWaitForClickAction( + visualBuilderPostMessage, + container + ); }); afterAll(() => { diff --git a/src/visualBuilder/__test__/hover/fields/boolean.test.ts b/src/visualBuilder/__test__/hover/fields/boolean.test.ts index 585919f9..5fb7c0a8 100644 --- a/src/visualBuilder/__test__/hover/fields/boolean.test.ts +++ b/src/visualBuilder/__test__/hover/fields/boolean.test.ts @@ -1,12 +1,16 @@ import { screen } from "@testing-library/preact"; import { getFieldSchemaMap } from "../../../../__test__/data/fieldSchemaMap"; -import { waitForBuilderSDKToBeInitialized, waitForHoverOutline } from "../../../../__test__/utils"; +import { + waitForBuilderSDKToBeInitialized, + waitForHoverOutline, +} from "../../../../__test__/utils"; import Config from "../../../../configManager/configManager"; import { VisualBuilder } from "../../../index"; import { FieldSchemaMap } from "../../../utils/fieldSchemaMap"; import { mockDomRect } from "./mockDomRect"; import visualBuilderPostMessage from "../../../utils/visualBuilderPostMessage"; import { act } from "@testing-library/preact"; +import { isOpenInBuilder } from "../../../../utils"; vi.mock("../../../utils/visualBuilderPostMessage", async () => { const { getAllContentTypes } = await vi.importActual< @@ -28,6 +32,15 @@ vi.mock("../../../utils/visualBuilderPostMessage", async () => { }; }); +vi.mock("../../../../utils/index.ts", async () => { + const actual = await vi.importActual("../../../../utils"); + return { + __esModule: true, + ...actual, + isOpenInBuilder: vi.fn().mockReturnValue(true), + }; +}); + global.ResizeObserver = vi.fn().mockImplementation(() => ({ observe: vi.fn(), unobserve: vi.fn(), @@ -91,7 +104,10 @@ describe("When an element is hovered in visual builder mode", () => { booleanField.dispatchEvent(mousemoveEvent); }); await waitForHoverOutline(); - expect(booleanField).toHaveAttribute("data-cslp", "all_fields.bltapikey.en-us.boolean"); + expect(booleanField).toHaveAttribute( + "data-cslp", + "all_fields.bltapikey.en-us.boolean" + ); expect(booleanField).not.toHaveAttribute("contenteditable"); const hoverOutline = document.querySelector( "[data-testid='visual-builder__hover-outline']" diff --git a/src/visualBuilder/__test__/hover/fields/date.test.ts b/src/visualBuilder/__test__/hover/fields/date.test.ts index 054c017d..7a885c71 100644 --- a/src/visualBuilder/__test__/hover/fields/date.test.ts +++ b/src/visualBuilder/__test__/hover/fields/date.test.ts @@ -26,6 +26,17 @@ vi.mock("../../../utils/visualBuilderPostMessage", async () => { }; }); +vi.mock("../../../../utils/index.ts", () => { + return { + __esModule: true, + isOpenInBuilder: vi.fn().mockReturnValue(true), + isOpeningInTimeline: vi.fn().mockReturnValue(false), + hasWindow: vi.fn().mockReturnValue(true), + addLivePreviewQueryTags: vi.fn(), + addParamsToUrl: vi.fn(), + }; +}); + global.ResizeObserver = vi.fn().mockImplementation(() => ({ observe: vi.fn(), unobserve: vi.fn(), @@ -89,7 +100,10 @@ describe("When an element is hovered in visual builder mode", () => { dataField.dispatchEvent(mousemoveEvent); }); await waitForHoverOutline(); - expect(dataField).toHaveAttribute("data-cslp", "all_fields.bltapikey.en-us.date"); + expect(dataField).toHaveAttribute( + "data-cslp", + "all_fields.bltapikey.en-us.date" + ); expect(dataField).not.toHaveAttribute("contenteditable"); const hoverOutline = document.querySelector( "[data-testid='visual-builder__hover-outline']" diff --git a/src/visualBuilder/__test__/hover/fields/file.test.ts b/src/visualBuilder/__test__/hover/fields/file.test.ts index 1e1d3912..50483592 100644 --- a/src/visualBuilder/__test__/hover/fields/file.test.ts +++ b/src/visualBuilder/__test__/hover/fields/file.test.ts @@ -26,18 +26,32 @@ vi.mock("../../../utils/visualBuilderPostMessage", async () => { }; }); +vi.mock("../../../../utils/index.ts", async () => { + const actual = await vi.importActual("../../../../utils"); + return { + __esModule: true, + ...actual, + isOpenInBuilder: vi.fn().mockReturnValue(true), + }; +}); + const convertToPx = (value: number) => { - return `${value}px` -} + return `${value}px`; +}; const matchDimensions = (element: HTMLElement, hoverOutline: HTMLElement) => { - const elementDimensions = element.getBoundingClientRect() + const elementDimensions = element.getBoundingClientRect(); // @ts-expect-error - TS doesn't know that style is a CSSStyleDeclaration - const hoverOutlineDimensions = hoverOutline?.style?._values as CSSStyleDeclaration; + const hoverOutlineDimensions = hoverOutline?.style + ?._values as CSSStyleDeclaration; expect(convertToPx(elementDimensions.x)).toBe(hoverOutlineDimensions.left); expect(convertToPx(elementDimensions.y)).toBe(hoverOutlineDimensions.top); - expect(convertToPx(elementDimensions.width)).toBe(hoverOutlineDimensions.width); - expect(convertToPx(elementDimensions.height)).toBe(hoverOutlineDimensions.height); -} + expect(convertToPx(elementDimensions.width)).toBe( + hoverOutlineDimensions.width + ); + expect(convertToPx(elementDimensions.height)).toBe( + hoverOutlineDimensions.height + ); +}; describe("When an element is hovered in visual builder mode", () => { let mousemoveEvent: Event; @@ -117,12 +131,12 @@ describe("When an element is hovered in visual builder mode", () => { const hoverOutline = document.querySelector( "[data-testid='visual-builder__hover-outline']" ); - expect(hoverOutline).toHaveAttribute('style'); + expect(hoverOutline).toHaveAttribute("style"); const customCursor = document.querySelector( `[data-testid="visual-builder__cursor"]` ); - expect(customCursor).toHaveAttribute('data-icon', 'file'); + expect(customCursor).toHaveAttribute("data-icon", "file"); expect(customCursor?.classList.contains("visible")).toBeTruthy(); }); @@ -135,13 +149,13 @@ describe("When an element is hovered in visual builder mode", () => { const hoverOutline = document.querySelector( "[data-testid='visual-builder__hover-outline']" ); - expect(hoverOutline).toHaveAttribute('style'); + expect(hoverOutline).toHaveAttribute("style"); const customCursor = document.querySelector( `[data-testid="visual-builder__cursor"]` ); - expect(customCursor).toHaveAttribute('data-icon', 'file'); + expect(customCursor).toHaveAttribute("data-icon", "file"); expect(customCursor?.classList.contains("visible")).toBeTruthy(); }); }); @@ -224,12 +238,12 @@ describe("When an element is hovered in visual builder mode", () => { const hoverOutline = document.querySelector( "[data-testid='visual-builder__hover-outline']" ); - expect(hoverOutline).toHaveAttribute('style'); + expect(hoverOutline).toHaveAttribute("style"); const customCursor = document.querySelector( `[data-testid="visual-builder__cursor"]` ); - expect(customCursor?.getAttribute('data-icon')).toBe('file'); + expect(customCursor?.getAttribute("data-icon")).toBe("file"); expect(customCursor?.classList.contains("visible")).toBeTruthy(); }); @@ -241,16 +255,15 @@ describe("When an element is hovered in visual builder mode", () => { const hoverOutline = document.querySelector( "[data-testid='visual-builder__hover-outline']" ) as HTMLElement; - expect(hoverOutline).toHaveAttribute('style'); + expect(hoverOutline).toHaveAttribute("style"); matchDimensions(firstFileField, hoverOutline); const customCursor = document.querySelector( `[data-testid="visual-builder__cursor"]` ); - expect(customCursor?.getAttribute('data-icon')).toBe('file'); + expect(customCursor?.getAttribute("data-icon")).toBe("file"); expect(customCursor?.classList.contains("visible")).toBeTruthy(); - }); test("should have outline and custom cursor on the url", async () => { @@ -261,7 +274,7 @@ describe("When an element is hovered in visual builder mode", () => { const hoverOutline = document.querySelector( "[data-testid='visual-builder__hover-outline']" ) as HTMLElement; - expect(hoverOutline).toHaveAttribute('style'); + expect(hoverOutline).toHaveAttribute("style"); matchDimensions(firstImageField, hoverOutline); const customCursor = document.querySelector( `[data-testid="visual-builder__cursor"]` diff --git a/src/visualBuilder/__test__/hover/fields/group.test.ts b/src/visualBuilder/__test__/hover/fields/group.test.ts index 9626054a..91fedae0 100644 --- a/src/visualBuilder/__test__/hover/fields/group.test.ts +++ b/src/visualBuilder/__test__/hover/fields/group.test.ts @@ -32,6 +32,15 @@ global.ResizeObserver = vi.fn().mockImplementation(() => ({ disconnect: vi.fn(), })); +vi.mock("../../../../utils/index.ts", async () => { + const actual = await vi.importActual("../../../../utils"); + return { + __esModule: true, + ...actual, + isOpenInBuilder: vi.fn().mockReturnValue(true), + }; +}); + describe("When an element is hovered in visual builder mode", () => { let mousemoveEvent: Event; @@ -104,13 +113,13 @@ describe("When an element is hovered in visual builder mode", () => { const hoverOutline = document.querySelector( "[data-testid='visual-builder__hover-outline']" ); - expect(hoverOutline).toHaveAttribute('style'); + expect(hoverOutline).toHaveAttribute("style"); const customCursor = document.querySelector( `[data-testid="visual-builder__cursor"]` ); - expect(customCursor).toHaveAttribute('data-icon', 'group'); + expect(customCursor).toHaveAttribute("data-icon", "group"); expect(customCursor?.classList.contains("visible")).toBeTruthy(); }); @@ -134,13 +143,13 @@ describe("When an element is hovered in visual builder mode", () => { const hoverOutline = document.querySelector( "[data-testid='visual-builder__hover-outline']" ); - expect(hoverOutline).toHaveAttribute('style'); + expect(hoverOutline).toHaveAttribute("style"); const customCursor = document.querySelector( `[data-testid="visual-builder__cursor"]` ); - expect(customCursor).toHaveAttribute('data-icon', 'singleline'); + expect(customCursor).toHaveAttribute("data-icon", "singleline"); expect(customCursor?.classList.contains("visible")).toBeTruthy(); }); }); @@ -215,13 +224,13 @@ describe("When an element is hovered in visual builder mode", () => { const hoverOutline = document.querySelector( "[data-testid='visual-builder__hover-outline']" ); - expect(hoverOutline).toHaveAttribute('style'); + expect(hoverOutline).toHaveAttribute("style"); const customCursor = document.querySelector( `[data-testid="visual-builder__cursor"]` ); - expect(customCursor).toHaveAttribute('data-icon', 'group'); + expect(customCursor).toHaveAttribute("data-icon", "group"); expect(customCursor?.classList.contains("visible")).toBeTruthy(); await act(async () => { @@ -232,7 +241,7 @@ describe("When an element is hovered in visual builder mode", () => { const newCustomCursor = document.querySelector( `[data-testid="visual-builder__cursor"]` ); - expect(newCustomCursor).toHaveAttribute('data-icon', 'multiline'); + expect(newCustomCursor).toHaveAttribute("data-icon", "multiline"); expect(newCustomCursor?.classList.contains("visible")).toBeTruthy(); }); }); diff --git a/src/visualBuilder/__test__/hover/fields/html-rte.test.ts b/src/visualBuilder/__test__/hover/fields/html-rte.test.ts index f71092e5..7850d9d5 100644 --- a/src/visualBuilder/__test__/hover/fields/html-rte.test.ts +++ b/src/visualBuilder/__test__/hover/fields/html-rte.test.ts @@ -26,6 +26,15 @@ vi.mock("../../../utils/visualBuilderPostMessage", async () => { }; }); +vi.mock("../../../../utils/index.ts", async () => { + const actual = await vi.importActual("../../../../utils"); + return { + __esModule: true, + ...actual, + isOpenInBuilder: vi.fn().mockReturnValue(true), + }; +}); + global.ResizeObserver = vi.fn().mockImplementation(() => ({ observe: vi.fn(), unobserve: vi.fn(), @@ -92,13 +101,13 @@ describe("When an element is hovered in visual builder mode", () => { const hoverOutline = document.querySelector( "[data-testid='visual-builder__hover-outline']" ); - expect(hoverOutline).toHaveAttribute('style'); + expect(hoverOutline).toHaveAttribute("style"); const customCursor = document.querySelector( `[data-testid="visual-builder__cursor"]` ); - expect(customCursor).toHaveAttribute('data-icon', 'html_rte'); + expect(customCursor).toHaveAttribute("data-icon", "html_rte"); expect(customCursor?.classList.contains("visible")).toBeTruthy(); }); }); @@ -159,13 +168,13 @@ describe("When an element is hovered in visual builder mode", () => { const hoverOutline = document.querySelector( "[data-testid='visual-builder__hover-outline']" ); - expect(hoverOutline).toHaveAttribute('style'); + expect(hoverOutline).toHaveAttribute("style"); const customCursor = document.querySelector( `[data-testid="visual-builder__cursor"]` ); - expect(customCursor).toHaveAttribute('data-icon', 'html_rte'); + expect(customCursor).toHaveAttribute("data-icon", "html_rte"); expect(customCursor?.classList.contains("visible")).toBeTruthy(); }); @@ -177,13 +186,13 @@ describe("When an element is hovered in visual builder mode", () => { const hoverOutline = document.querySelector( "[data-testid='visual-builder__hover-outline']" ); - expect(hoverOutline).toHaveAttribute('style'); + expect(hoverOutline).toHaveAttribute("style"); const customCursor = document.querySelector( `[data-testid="visual-builder__cursor"]` ); - expect(customCursor).toHaveAttribute('data-icon', 'html_rte'); + expect(customCursor).toHaveAttribute("data-icon", "html_rte"); expect(customCursor?.classList.contains("visible")).toBeTruthy(); }); }); diff --git a/src/visualBuilder/__test__/hover/fields/json-rte.test.ts b/src/visualBuilder/__test__/hover/fields/json-rte.test.ts index 835cba9a..4b1ad7a4 100644 --- a/src/visualBuilder/__test__/hover/fields/json-rte.test.ts +++ b/src/visualBuilder/__test__/hover/fields/json-rte.test.ts @@ -26,6 +26,15 @@ vi.mock("../../../utils/visualBuilderPostMessage", async () => { }; }); +vi.mock("../../../../utils/index.ts", async () => { + const actual = await vi.importActual("../../../../utils"); + return { + __esModule: true, + ...actual, + isOpenInBuilder: vi.fn().mockReturnValue(true), + }; +}); + global.ResizeObserver = vi.fn().mockImplementation(() => ({ observe: vi.fn(), unobserve: vi.fn(), @@ -92,13 +101,13 @@ describe("When an element is hovered in visual builder mode", () => { const hoverOutline = document.querySelector( "[data-testid='visual-builder__hover-outline']" ); - expect(hoverOutline).toHaveAttribute('style'); + expect(hoverOutline).toHaveAttribute("style"); const customCursor = document.querySelector( `[data-testid="visual-builder__cursor"]` ); - expect(customCursor).toHaveAttribute('data-icon', 'json_rte'); + expect(customCursor).toHaveAttribute("data-icon", "json_rte"); expect(customCursor?.classList.contains("visible")).toBeTruthy(); }); }); @@ -159,13 +168,13 @@ describe("When an element is hovered in visual builder mode", () => { const hoverOutline = document.querySelector( "[data-testid='visual-builder__hover-outline']" ); - expect(hoverOutline).toHaveAttribute('style'); + expect(hoverOutline).toHaveAttribute("style"); const customCursor = document.querySelector( `[data-testid="visual-builder__cursor"]` ); - expect(customCursor).toHaveAttribute('data-icon', 'json_rte'); + expect(customCursor).toHaveAttribute("data-icon", "json_rte"); expect(customCursor?.classList.contains("visible")).toBeTruthy(); }); @@ -177,13 +186,13 @@ describe("When an element is hovered in visual builder mode", () => { const hoverOutline = document.querySelector( "[data-testid='visual-builder__hover-outline']" ); - expect(hoverOutline).toHaveAttribute('style'); + expect(hoverOutline).toHaveAttribute("style"); const customCursor = document.querySelector( `[data-testid="visual-builder__cursor"]` ); - expect(customCursor).toHaveAttribute('data-icon', 'json_rte'); + expect(customCursor).toHaveAttribute("data-icon", "json_rte"); expect(customCursor?.classList.contains("visible")).toBeTruthy(); }); }); diff --git a/src/visualBuilder/__test__/hover/fields/link.test.ts b/src/visualBuilder/__test__/hover/fields/link.test.ts index 88044fb5..bd9ca996 100644 --- a/src/visualBuilder/__test__/hover/fields/link.test.ts +++ b/src/visualBuilder/__test__/hover/fields/link.test.ts @@ -26,6 +26,15 @@ vi.mock("../../../utils/visualBuilderPostMessage", async () => { }; }); +vi.mock("../../../../utils/index.ts", async () => { + const actual = await vi.importActual("../../../../utils"); + return { + __esModule: true, + ...actual, + isOpenInBuilder: vi.fn().mockReturnValue(true), + }; +}); + global.ResizeObserver = vi.fn().mockImplementation(() => ({ observe: vi.fn(), unobserve: vi.fn(), @@ -98,7 +107,7 @@ describe("When an element is hovered in visual builder mode", () => { `[data-testid="visual-builder__cursor"]` ); - expect(customCursor).toHaveAttribute('data-icon', 'link'); + expect(customCursor).toHaveAttribute("data-icon", "link"); expect(customCursor?.classList.contains("visible")).toBeTruthy(); }); }); @@ -162,7 +171,7 @@ describe("When an element is hovered in visual builder mode", () => { `[data-testid="visual-builder__cursor"]` ); - expect(customCursor).toHaveAttribute('data-icon', 'link'); + expect(customCursor).toHaveAttribute("data-icon", "link"); expect(customCursor?.classList.contains("visible")).toBeTruthy(); }); @@ -180,7 +189,7 @@ describe("When an element is hovered in visual builder mode", () => { `[data-testid="visual-builder__cursor"]` ); - expect(customCursor).toHaveAttribute('data-icon', 'link'); + expect(customCursor).toHaveAttribute("data-icon", "link"); expect(customCursor?.classList.contains("visible")).toBeTruthy(); }); }); diff --git a/src/visualBuilder/__test__/hover/fields/markdown.test.ts b/src/visualBuilder/__test__/hover/fields/markdown.test.ts index 2595450c..04a3bba9 100644 --- a/src/visualBuilder/__test__/hover/fields/markdown.test.ts +++ b/src/visualBuilder/__test__/hover/fields/markdown.test.ts @@ -32,6 +32,15 @@ global.ResizeObserver = vi.fn().mockImplementation(() => ({ disconnect: vi.fn(), })); +vi.mock("../../../../utils/index.ts", async () => { + const actual = await vi.importActual("../../../../utils"); + return { + __esModule: true, + ...actual, + isOpenInBuilder: vi.fn().mockReturnValue(true), + }; +}); + describe("When an element is hovered in visual builder mode", () => { let mousemoveEvent: Event; @@ -93,13 +102,13 @@ describe("When an element is hovered in visual builder mode", () => { const hoverOutline = document.querySelector( "[data-testid='visual-builder__hover-outline']" ); - expect(hoverOutline).toHaveAttribute('style'); + expect(hoverOutline).toHaveAttribute("style"); const customCursor = document.querySelector( `[data-testid="visual-builder__cursor"]` ); - expect(customCursor).toHaveAttribute('data-icon', 'markdown_rte'); + expect(customCursor).toHaveAttribute("data-icon", "markdown_rte"); expect(customCursor?.classList.contains("visible")).toBeTruthy(); }); }); @@ -160,13 +169,13 @@ describe("When an element is hovered in visual builder mode", () => { const hoverOutline = document.querySelector( "[data-testid='visual-builder__hover-outline']" ); - expect(hoverOutline).toHaveAttribute('style'); + expect(hoverOutline).toHaveAttribute("style"); const customCursor = document.querySelector( `[data-testid="visual-builder__cursor"]` ); - expect(customCursor).toHaveAttribute('data-icon', 'markdown_rte'); + expect(customCursor).toHaveAttribute("data-icon", "markdown_rte"); expect(customCursor?.classList.contains("visible")).toBeTruthy(); }); @@ -178,13 +187,13 @@ describe("When an element is hovered in visual builder mode", () => { const hoverOutline = document.querySelector( "[data-testid='visual-builder__hover-outline']" ); - expect(hoverOutline).toHaveAttribute('style'); + expect(hoverOutline).toHaveAttribute("style"); const customCursor = document.querySelector( `[data-testid="visual-builder__cursor"]` ); - expect(customCursor).toHaveAttribute('data-icon', 'markdown_rte'); + expect(customCursor).toHaveAttribute("data-icon", "markdown_rte"); expect(customCursor?.classList.contains("visible")).toBeTruthy(); }); }); diff --git a/src/visualBuilder/__test__/hover/fields/multi-line.test.ts b/src/visualBuilder/__test__/hover/fields/multi-line.test.ts index d47ead2e..e86b9d26 100644 --- a/src/visualBuilder/__test__/hover/fields/multi-line.test.ts +++ b/src/visualBuilder/__test__/hover/fields/multi-line.test.ts @@ -32,6 +32,15 @@ global.ResizeObserver = vi.fn().mockImplementation(() => ({ disconnect: vi.fn(), })); +vi.mock("../../../../utils/index.ts", async () => { + const actual = await vi.importActual("../../../../utils"); + return { + __esModule: true, + ...actual, + isOpenInBuilder: vi.fn().mockReturnValue(true), + }; +}); + describe("When an element is hovered in visual builder mode", () => { let mousemoveEvent: Event; @@ -92,13 +101,13 @@ describe("When an element is hovered in visual builder mode", () => { const hoverOutline = screen.getByTestId( "visual-builder__hover-outline" ); - expect(hoverOutline).toHaveAttribute('style'); + expect(hoverOutline).toHaveAttribute("style"); const customCursor = document.querySelector( `[data-testid="visual-builder__cursor"]` ); - expect(customCursor).toHaveAttribute('data-icon', 'multiline'); + expect(customCursor).toHaveAttribute("data-icon", "multiline"); expect(customCursor?.classList.contains("visible")).toBeTruthy(); }); }); @@ -158,13 +167,13 @@ describe("When an element is hovered in visual builder mode", () => { const hoverOutline = document.querySelector( "[data-testid='visual-builder__hover-outline']" ); - expect(hoverOutline).toHaveAttribute('style'); + expect(hoverOutline).toHaveAttribute("style"); const customCursor = document.querySelector( `[data-testid="visual-builder__cursor"]` ); - expect(customCursor).toHaveAttribute('data-icon', 'multiline'); + expect(customCursor).toHaveAttribute("data-icon", "multiline"); expect(customCursor?.classList.contains("visible")).toBeTruthy(); }); @@ -176,13 +185,13 @@ describe("When an element is hovered in visual builder mode", () => { const hoverOutline = document.querySelector( "[data-testid='visual-builder__hover-outline']" ); - expect(hoverOutline).toHaveAttribute('style'); + expect(hoverOutline).toHaveAttribute("style"); const customCursor = document.querySelector( `[data-testid="visual-builder__cursor"]` ); - expect(customCursor).toHaveAttribute('data-icon', 'multiline'); + expect(customCursor).toHaveAttribute("data-icon", "multiline"); expect(customCursor?.classList.contains("visible")).toBeTruthy(); }); }); diff --git a/src/visualBuilder/__test__/hover/fields/number.test.ts b/src/visualBuilder/__test__/hover/fields/number.test.ts index 4d4f6854..0732bdda 100644 --- a/src/visualBuilder/__test__/hover/fields/number.test.ts +++ b/src/visualBuilder/__test__/hover/fields/number.test.ts @@ -26,6 +26,15 @@ vi.mock("../../../utils/visualBuilderPostMessage", async () => { }; }); +vi.mock("../../../../utils/index.ts", async () => { + const actual = await vi.importActual("../../../../utils"); + return { + __esModule: true, + ...actual, + isOpenInBuilder: vi.fn().mockReturnValue(true), + }; +}); + global.ResizeObserver = vi.fn().mockImplementation(() => ({ observe: vi.fn(), unobserve: vi.fn(), @@ -92,13 +101,13 @@ describe("When an element is hovered in visual builder mode", () => { const hoverOutline = document.querySelector( "[data-testid='visual-builder__hover-outline']" ); - expect(hoverOutline).toHaveAttribute('style'); + expect(hoverOutline).toHaveAttribute("style"); const customCursor = document.querySelector( `[data-testid="visual-builder__cursor"]` ); - expect(customCursor).toHaveAttribute('data-icon', 'number'); + expect(customCursor).toHaveAttribute("data-icon", "number"); expect(customCursor?.classList.contains("visible")).toBeTruthy(); }); }); @@ -156,13 +165,13 @@ describe("When an element is hovered in visual builder mode", () => { const hoverOutline = document.querySelector( "[data-testid='visual-builder__hover-outline']" ); - expect(hoverOutline).toHaveAttribute('style'); + expect(hoverOutline).toHaveAttribute("style"); const customCursor = document.querySelector( `[data-testid="visual-builder__cursor"]` ); - expect(customCursor).toHaveAttribute('data-icon', 'number'); + expect(customCursor).toHaveAttribute("data-icon", "number"); expect(customCursor?.classList.contains("visible")).toBeTruthy(); }); @@ -174,13 +183,13 @@ describe("When an element is hovered in visual builder mode", () => { const hoverOutline = document.querySelector( "[data-testid='visual-builder__hover-outline']" ); - expect(hoverOutline).toHaveAttribute('style'); + expect(hoverOutline).toHaveAttribute("style"); const customCursor = document.querySelector( `[data-testid="visual-builder__cursor"]` ); - expect(customCursor).toHaveAttribute('data-icon', 'number'); + expect(customCursor).toHaveAttribute("data-icon", "number"); expect(customCursor?.classList.contains("visible")).toBeTruthy(); }); }); diff --git a/src/visualBuilder/__test__/hover/fields/reference.test.ts b/src/visualBuilder/__test__/hover/fields/reference.test.ts index c37a5bf4..f7076cce 100644 --- a/src/visualBuilder/__test__/hover/fields/reference.test.ts +++ b/src/visualBuilder/__test__/hover/fields/reference.test.ts @@ -26,6 +26,15 @@ vi.mock("../../../utils/visualBuilderPostMessage", async () => { }; }); +vi.mock("../../../../utils/index.ts", async () => { + const actual = await vi.importActual("../../../../utils"); + return { + __esModule: true, + ...actual, + isOpenInBuilder: vi.fn().mockReturnValue(true), + }; +}); + global.ResizeObserver = vi.fn().mockImplementation(() => ({ observe: vi.fn(), unobserve: vi.fn(), @@ -89,7 +98,7 @@ describe("When an element is hovered in visual builder mode", () => { referenceField.dispatchEvent(mousemoveEvent); }); await waitForHoverOutline(); - + const hoverOutline = document.querySelector( "[data-testid='visual-builder__hover-outline']" ); @@ -99,7 +108,7 @@ describe("When an element is hovered in visual builder mode", () => { `[data-testid="visual-builder__cursor"]` ); - expect(customCursor).toHaveAttribute('data-icon', 'reference'); + expect(customCursor).toHaveAttribute("data-icon", "reference"); expect(customCursor?.classList.contains("visible")).toBeTruthy(); }); }); @@ -165,7 +174,7 @@ describe("When an element is hovered in visual builder mode", () => { `[data-testid="visual-builder__cursor"]` ); - expect(customCursor).toHaveAttribute('data-icon', 'reference'); + expect(customCursor).toHaveAttribute("data-icon", "reference"); expect(customCursor?.classList.contains("visible")).toBeTruthy(); }); @@ -183,7 +192,7 @@ describe("When an element is hovered in visual builder mode", () => { `[data-testid="visual-builder__cursor"]` ); - expect(customCursor).toHaveAttribute('data-icon', 'reference'); + expect(customCursor).toHaveAttribute("data-icon", "reference"); expect(customCursor?.classList.contains("visible")).toBeTruthy(); }); }); diff --git a/src/visualBuilder/__test__/hover/fields/select.test.ts b/src/visualBuilder/__test__/hover/fields/select.test.ts index adf80857..34c54d37 100644 --- a/src/visualBuilder/__test__/hover/fields/select.test.ts +++ b/src/visualBuilder/__test__/hover/fields/select.test.ts @@ -31,6 +31,15 @@ global.ResizeObserver = vi.fn().mockImplementation(() => ({ disconnect: vi.fn(), })); +vi.mock("../../../../utils/index.ts", async () => { + const actual = await vi.importActual("../../../../utils"); + return { + __esModule: true, + ...actual, + isOpenInBuilder: vi.fn().mockReturnValue(true), + }; +}); + describe("When an element is hovered in visual builder mode", () => { let mousemoveEvent: Event; diff --git a/src/visualBuilder/__test__/hover/fields/single-line.test.ts b/src/visualBuilder/__test__/hover/fields/single-line.test.ts index 14ceba69..63694781 100644 --- a/src/visualBuilder/__test__/hover/fields/single-line.test.ts +++ b/src/visualBuilder/__test__/hover/fields/single-line.test.ts @@ -31,6 +31,15 @@ global.ResizeObserver = vi.fn().mockImplementation(() => ({ disconnect: vi.fn(), })); +vi.mock("../../../../utils/index.ts", async () => { + const actual = await vi.importActual("../../../../utils"); + return { + __esModule: true, + ...actual, + isOpenInBuilder: vi.fn().mockReturnValue(true), + }; +}); + describe("When an element is hovered in visual builder mode", () => { let mousemoveEvent: Event; @@ -90,7 +99,9 @@ describe("When an element is hovered in visual builder mode", () => { const hoverOutline = screen.getByTestId( "visual-builder__hover-outline" ); - expect(hoverOutline).toHaveStyle("top: 51px; left: 51px; width: 27.7734375px; height: 20.3984375px;"); + expect(hoverOutline).toHaveStyle( + "top: 51px; left: 51px; width: 27.7734375px; height: 20.3984375px;" + ); const customCursor = document.querySelector( `[data-testid="visual-builder__cursor"]` @@ -124,7 +135,7 @@ describe("When an element is hovered in visual builder mode", () => { test("should have outline and custom cursor", async () => { await act(() => { - singleLineField.dispatchEvent(mousemoveEvent); + singleLineField.dispatchEvent(mousemoveEvent); }); await waitForHoverOutline(); expect(singleLineField).not.toHaveAttribute("style"); @@ -189,18 +200,20 @@ describe("When an element is hovered in visual builder mode", () => { }); container.dispatchEvent(mousemoveEvent); await waitForHoverOutline(); - expect(container).not.toHaveAttribute('style'); + expect(container).not.toHaveAttribute("style"); const hoverOutline = document.querySelector( "[data-testid='visual-builder__hover-outline']" ); - expect(hoverOutline).toHaveStyle("top: 34px; left: 34px; width: 828px; height: 54.3984375px;"); + expect(hoverOutline).toHaveStyle( + "top: 34px; left: 34px; width: 828px; height: 54.3984375px;" + ); const customCursor = document.querySelector( `[data-testid="visual-builder__cursor"]` ); - expect(customCursor).toHaveAttribute('data-icon', 'singleline'); + expect(customCursor).toHaveAttribute("data-icon", "singleline"); expect(customCursor?.classList.contains("visible")).toBeTruthy(); }); @@ -209,17 +222,19 @@ describe("When an element is hovered in visual builder mode", () => { firstSingleLineField.dispatchEvent(mousemoveEvent); }); await waitForHoverOutline(); - expect(firstSingleLineField).not.toHaveAttribute('style'); + expect(firstSingleLineField).not.toHaveAttribute("style"); const hoverOutline = document.querySelector( "[data-testid='visual-builder__hover-outline']" ); - expect(hoverOutline).toHaveStyle("top: 51px; left: 51px; width: 27.7734375px; height: 20.3984375px;"); + expect(hoverOutline).toHaveStyle( + "top: 51px; left: 51px; width: 27.7734375px; height: 20.3984375px;" + ); const customCursor = document.querySelector( `[data-testid="visual-builder__cursor"]` ); - expect(customCursor).toHaveAttribute('data-icon', 'singleline'); + expect(customCursor).toHaveAttribute("data-icon", "singleline"); expect(customCursor?.classList.contains("visible")).toBeTruthy(); }); }); diff --git a/src/visualBuilder/__test__/index.test.ts b/src/visualBuilder/__test__/index.test.ts index 4eba7789..571902d0 100644 --- a/src/visualBuilder/__test__/index.test.ts +++ b/src/visualBuilder/__test__/index.test.ts @@ -1,6 +1,13 @@ import crypto from "crypto"; import { getFieldSchemaMap } from "../../__test__/data/fieldSchemaMap"; -import { getElementBytestId, mockGetBoundingClientRect, sleep, triggerAndWaitForClickAction, waitForBuilderSDKToBeInitialized, waitForToolbaxToBeVisible } from "../../__test__/utils"; +import { + getElementBytestId, + mockGetBoundingClientRect, + sleep, + triggerAndWaitForClickAction, + waitForBuilderSDKToBeInitialized, + waitForToolbaxToBeVisible, +} from "../../__test__/utils"; import Config from "../../configManager/configManager"; import { FieldSchemaMap } from "../utils/fieldSchemaMap"; import { waitFor, screen, cleanup } from "@testing-library/preact"; @@ -32,184 +39,251 @@ vi.mock("../utils/visualBuilderPostMessage", async () => { }; }); +vi.mock("../../utils/index.ts", async () => { + const actual = await vi.importActual("../../utils"); + return { + __esModule: true, + ...actual, + isOpenInBuilder: vi.fn().mockReturnValue(true), + }; +}); + Object.defineProperty(globalThis, "crypto", { value: { getRandomValues: (arr: Array) => crypto.randomBytes(arr.length), - randomUUID: () => crypto.randomUUID() + randomUUID: () => crypto.randomUUID(), }, }); // Increase the timeout for the test -describe("Visual builder", () => { - beforeAll(() => { - FieldSchemaMap.setFieldSchema( - "all_fields", - getFieldSchemaMap().all_fields - ); - Config.set("mode", 2); - vi.spyOn( - document.documentElement, - "clientWidth", - "get" - ).mockReturnValue(100); - vi.spyOn( - document.documentElement, - "clientHeight", - "get" - ).mockReturnValue(100); - vi.spyOn(document.body, "scrollHeight", "get").mockReturnValue(100); - }); - - beforeEach(() => { - (visualBuilderPostMessage?.send as Mock).mockClear(); - document.getElementsByTagName("html")[0].innerHTML = ""; - cleanup(); - }); - - afterAll(() => { - FieldSchemaMap.clear(); - }); - - test("should append a visual builder container to the DOM", async () => { - let visualBuilderDOM = document.querySelector( - ".visual-builder__container" - ); - - expect(visualBuilderDOM).toBeNull(); - - const x = new VisualBuilder(); - await waitForBuilderSDKToBeInitialized(visualBuilderPostMessage); - - visualBuilderDOM = document.querySelector( - `[data-testid="visual-builder__container"]` - ); - - expect(document.querySelector('[data-testid="visual-builder__cursor"]')).toBeInTheDocument(); - expect(document.querySelector('[data-testid="visual-builder__focused-toolbar"]')).toBeInTheDocument(); - expect(document.querySelector('[data-testid="visual-builder__hover-outline"]')).toBeInTheDocument(); - expect(document.querySelector('[data-testid="visual-builder__overlay__wrapper"]')).toBeInTheDocument(); - x.destroy(); - }, { timeout: 20 * 1000 }); - - test("should add overlay to DOM when clicked", async () => { - const h1Tag = document.createElement("h1"); - h1Tag.textContent = INLINE_EDITABLE_FIELD_VALUE; - h1Tag.setAttribute( - "data-cslp", - "all_fields.blt58a50b4cebae75c5.en-us.modular_blocks.0.block.single_line" - ); - document.body.appendChild(h1Tag); - mockGetBoundingClientRect(h1Tag); - const x = new VisualBuilder(); - await triggerAndWaitForClickAction(visualBuilderPostMessage, h1Tag); - await waitFor(() => { - const overlayOutline = document.querySelector('[data-testid="visual-builder__overlay--outline"]'); - expect(overlayOutline).toHaveStyle({ - top: "10px", - left: "10px", - width: "10px", - height: "5px", - "outline-color": "rgb(113, 92, 221)" - }); - }) - x.destroy(); - }, { timeout: 20 * 1000 }); +describe( + "Visual builder", + () => { + beforeAll(() => { + FieldSchemaMap.setFieldSchema( + "all_fields", + getFieldSchemaMap().all_fields + ); + Config.set("mode", 2); + vi.spyOn( + document.documentElement, + "clientWidth", + "get" + ).mockReturnValue(100); + vi.spyOn( + document.documentElement, + "clientHeight", + "get" + ).mockReturnValue(100); + vi.spyOn(document.body, "scrollHeight", "get").mockReturnValue(100); + }); - describe("on click, the sdk", () => { - afterEach(() => { + beforeEach(() => { + (visualBuilderPostMessage?.send as Mock).mockClear(); document.getElementsByTagName("html")[0].innerHTML = ""; + cleanup(); }); - test("should do nothing if data-cslp not available", async () => { - const h1 = document.createElement("h1"); + afterAll(() => { + FieldSchemaMap.clear(); + }); - document.body.appendChild(h1); - const x = new VisualBuilder(); - await triggerAndWaitForClickAction(visualBuilderPostMessage, h1, {skipWaitForFieldType: true}); + test( + "should append a visual builder container to the DOM", + async () => { + let visualBuilderDOM = document.querySelector( + ".visual-builder__container" + ); - expect(h1).not.toHaveAttribute("contenteditable"); - expect(h1).not.toHaveAttribute("data-cslp-field-type"); - x.destroy(); - }); + expect(visualBuilderDOM).toBeNull(); - describe("inline elements must be contenteditable", () => { - let visualBuilder: VisualBuilder; - let h1: HTMLHeadingElement - beforeAll(() => { - (visualBuilderPostMessage?.send as Mock).mockImplementation( - (eventName: string, args) => { - if ( - eventName === - VisualBuilderPostMessageEvents.GET_FIELD_DATA - ) { - const values: Record = { - single_line: INLINE_EDITABLE_FIELD_VALUE, - multi_line: INLINE_EDITABLE_FIELD_VALUE, - file: { - uid: "fileUid", - }, - }; - return Promise.resolve({ - fieldData: values[args.entryPath], - }); - } else if ( - eventName === - VisualBuilderPostMessageEvents.GET_FIELD_DISPLAY_NAMES - ) { - const names: Record = { - "all_fields.blt58a50b4cebae75c5.en-us.single_line": - "Single Line", - "all_fields.blt58a50b4cebae75c5.en-us.multi_line": - "Multi Line", - "all_fields.blt58a50b4cebae75c5.en-us.file": - "File", - }; - return Promise.resolve({ - [args.cslp]: names[args.cslp], - }); - } - return Promise.resolve({}); - } + const x = new VisualBuilder(); + await waitForBuilderSDKToBeInitialized( + visualBuilderPostMessage ); - }); - beforeEach(async () => { - document.getElementsByTagName("html")[0].innerHTML = ""; - h1 = document.createElement("h1"); - h1.textContent = INLINE_EDITABLE_FIELD_VALUE; - mockGetBoundingClientRect(h1); - h1.setAttribute( + visualBuilderDOM = document.querySelector( + `[data-testid="visual-builder__container"]` + ); + + expect( + document.querySelector( + '[data-testid="visual-builder__cursor"]' + ) + ).toBeInTheDocument(); + expect( + document.querySelector( + '[data-testid="visual-builder__focused-toolbar"]' + ) + ).toBeInTheDocument(); + expect( + document.querySelector( + '[data-testid="visual-builder__hover-outline"]' + ) + ).toBeInTheDocument(); + expect( + document.querySelector( + '[data-testid="visual-builder__overlay__wrapper"]' + ) + ).toBeInTheDocument(); + x.destroy(); + }, + { timeout: 20 * 1000 } + ); + + test( + "should add overlay to DOM when clicked", + async () => { + const h1Tag = document.createElement("h1"); + h1Tag.textContent = INLINE_EDITABLE_FIELD_VALUE; + h1Tag.setAttribute( "data-cslp", - "all_fields.blt58a50b4cebae75c5.en-us.single_line" + "all_fields.blt58a50b4cebae75c5.en-us.modular_blocks.0.block.single_line" + ); + document.body.appendChild(h1Tag); + mockGetBoundingClientRect(h1Tag); + const x = new VisualBuilder(); + await triggerAndWaitForClickAction( + visualBuilderPostMessage, + h1Tag ); + await waitFor(() => { + const overlayOutline = document.querySelector( + '[data-testid="visual-builder__overlay--outline"]' + ); + expect(overlayOutline).toHaveStyle({ + top: "10px", + left: "10px", + width: "10px", + height: "5px", + "outline-color": "rgb(113, 92, 221)", + }); + }); + x.destroy(); + }, + { timeout: 20 * 1000 } + ); - document.body.appendChild(h1); - visualBuilder = new VisualBuilder(); - }) + describe("on click, the sdk", () => { afterEach(() => { - visualBuilder.destroy(); - }) - test("single line should be contenteditable", async () => { - await triggerAndWaitForClickAction(visualBuilderPostMessage, h1); + document.getElementsByTagName("html")[0].innerHTML = ""; + }); - await waitFor(() => { - expect(h1).toHaveAttribute("contenteditable"); - expect(h1).toHaveAttribute("data-cslp-field-type", "singleline"); - }) - }, { timeout: 40 * 1000 }); + test("should do nothing if data-cslp not available", async () => { + const h1 = document.createElement("h1"); - test("multi line should be contenteditable", async () => { - h1.setAttribute( - "data-cslp", - "all_fields.blt58a50b4cebae75c5.en-us.multi_line" + document.body.appendChild(h1); + const x = new VisualBuilder(); + await triggerAndWaitForClickAction( + visualBuilderPostMessage, + h1, + { skipWaitForFieldType: true } ); - await triggerAndWaitForClickAction(visualBuilderPostMessage, h1); - await waitFor(() => { - expect(h1).toHaveAttribute("contenteditable"); - expect(h1).toHaveAttribute("data-cslp-field-type", "multiline"); - }) - }, { timeout: 40 * 1000 }); + expect(h1).not.toHaveAttribute("contenteditable"); + expect(h1).not.toHaveAttribute("data-cslp-field-type"); + x.destroy(); + }); + + describe("inline elements must be contenteditable", () => { + let visualBuilder: VisualBuilder; + let h1: HTMLHeadingElement; + beforeAll(() => { + (visualBuilderPostMessage?.send as Mock).mockImplementation( + (eventName: string, args) => { + if ( + eventName === + VisualBuilderPostMessageEvents.GET_FIELD_DATA + ) { + const values: Record = { + single_line: INLINE_EDITABLE_FIELD_VALUE, + multi_line: INLINE_EDITABLE_FIELD_VALUE, + file: { + uid: "fileUid", + }, + }; + return Promise.resolve({ + fieldData: values[args.entryPath], + }); + } else if ( + eventName === + VisualBuilderPostMessageEvents.GET_FIELD_DISPLAY_NAMES + ) { + const names: Record = { + "all_fields.blt58a50b4cebae75c5.en-us.single_line": + "Single Line", + "all_fields.blt58a50b4cebae75c5.en-us.multi_line": + "Multi Line", + "all_fields.blt58a50b4cebae75c5.en-us.file": + "File", + }; + return Promise.resolve({ + [args.cslp]: names[args.cslp], + }); + } + return Promise.resolve({}); + } + ); + }); + beforeEach(async () => { + document.getElementsByTagName("html")[0].innerHTML = ""; + h1 = document.createElement("h1"); + h1.textContent = INLINE_EDITABLE_FIELD_VALUE; + mockGetBoundingClientRect(h1); + h1.setAttribute( + "data-cslp", + "all_fields.blt58a50b4cebae75c5.en-us.single_line" + ); + + document.body.appendChild(h1); + visualBuilder = new VisualBuilder(); + }); + afterEach(() => { + visualBuilder.destroy(); + }); + test( + "single line should be contenteditable", + async () => { + await triggerAndWaitForClickAction( + visualBuilderPostMessage, + h1 + ); + + await waitFor(() => { + expect(h1).toHaveAttribute("contenteditable"); + expect(h1).toHaveAttribute( + "data-cslp-field-type", + "singleline" + ); + }); + }, + { timeout: 40 * 1000 } + ); + + test( + "multi line should be contenteditable", + async () => { + h1.setAttribute( + "data-cslp", + "all_fields.blt58a50b4cebae75c5.en-us.multi_line" + ); + await triggerAndWaitForClickAction( + visualBuilderPostMessage, + h1 + ); + + await waitFor(() => { + expect(h1).toHaveAttribute("contenteditable"); + expect(h1).toHaveAttribute( + "data-cslp-field-type", + "multiline" + ); + }); + }, + { timeout: 40 * 1000 } + ); + }); }); - }); -}, { timeout: 20 * 1000 }); + }, + { timeout: 20 * 1000 } +); diff --git a/src/visualBuilder/__test__/withoutIframe.test.ts b/src/visualBuilder/__test__/withoutIframe.test.ts index 251c7d3a..1a61c115 100644 --- a/src/visualBuilder/__test__/withoutIframe.test.ts +++ b/src/visualBuilder/__test__/withoutIframe.test.ts @@ -1,8 +1,12 @@ import crypto from "crypto"; -import { triggerAndWaitForClickAction, waitForBuilderSDKToBeInitialized } from "../../__test__/utils"; +import { + triggerAndWaitForClickAction, + waitForBuilderSDKToBeInitialized, +} from "../../__test__/utils"; import { VisualBuilder } from "../index"; import Config from "../../configManager/configManager"; +import { isOpenInBuilder } from "../../utils"; vi.mock("../utils/visualBuilderPostMessage", async () => { const { getAllContentTypes } = await vi.importActual< @@ -24,6 +28,16 @@ vi.mock("../utils/visualBuilderPostMessage", async () => { }, }; }); + +vi.mock("../../utils/index.ts", async () => { + const actual = await vi.importActual("../../utils"); + return { + __esModule: true, + ...actual, + isOpenInBuilder: vi.fn().mockReturnValue(true), + }; +}); + import visualBuilderPostMessage from "../utils/visualBuilderPostMessage"; import { act, fireEvent, waitFor, screen } from "@testing-library/preact"; diff --git a/src/visualBuilder/components/VisualBuilder.tsx b/src/visualBuilder/components/VisualBuilder.tsx index f44aa7f7..867db23e 100644 --- a/src/visualBuilder/components/VisualBuilder.tsx +++ b/src/visualBuilder/components/VisualBuilder.tsx @@ -5,13 +5,18 @@ import { VisualBuilderGlobalStyles, } from "../visualBuilder.style"; import React from "preact/compat"; +import { isOpenInBuilder } from "../../utils"; interface VisualBuilderProps { visualBuilderContainer: HTMLDivElement | null; resizeObserver: ResizeObserver; } -function VisualBuilderComponent(props: VisualBuilderProps): JSX.Element { +function VisualBuilderComponent(props: VisualBuilderProps): JSX.Element | null { + if (!isOpenInBuilder()) { + return null; + } + return ( <> {/* For some reason, goober's glob and createGlobalStyle were not working in this case. */} diff --git a/src/visualBuilder/components/__test__/visualBuilder.test.tsx b/src/visualBuilder/components/__test__/visualBuilder.test.tsx index 794a14d5..c6f137d0 100644 --- a/src/visualBuilder/components/__test__/visualBuilder.test.tsx +++ b/src/visualBuilder/components/__test__/visualBuilder.test.tsx @@ -3,6 +3,7 @@ import { hideOverlay } from "../../generators/generateOverlay"; import { VisualBuilder } from "../.."; import VisualBuilderComponent from "../VisualBuilder"; import { asyncRender } from "../../../__test__/utils"; +import * as utils from "../../../utils"; vi.mock("../../generators/generateOverlay", () => ({ hideOverlay: vi.fn(), @@ -14,13 +15,23 @@ const mockResizeObserver = { disconnect: vi.fn(), }; +vi.mock("../../../utils/index.ts", async () => { + const actual = await vi.importActual("../../../utils"); + return { + __esModule: true, + ...actual, + isOpenInBuilder: vi.fn().mockReturnValue(true), + }; +}); + describe("VisualBuilderComponent", () => { beforeEach(() => { document.body.innerHTML = ""; - }) + vi.clearAllMocks(); + }); afterEach(() => { cleanup(); - }) + }); test("renders VisualBuilderComponent correctly", async () => { const { getByTestId } = await asyncRender( { const overlayWrapper = getByTestId("visual-builder__overlay__wrapper"); fireEvent.click(overlayWrapper); }); + + test("does not render VisualBuilderComponent when not in builder mode", async () => { + vi.spyOn(utils, "isOpenInBuilder").mockReturnValueOnce(false); + const { queryByTestId } = await asyncRender( + + ); + + expect(queryByTestId("visual-builder__cursor")).not.toBeInTheDocument(); + expect( + queryByTestId("visual-builder__overlay__wrapper") + ).not.toBeInTheDocument(); + expect( + queryByTestId("visual-builder__focused-toolbar") + ).not.toBeInTheDocument(); + }); + + test("does not render any overlay sections when not in builder mode", async () => { + vi.spyOn(utils, "isOpenInBuilder").mockReturnValueOnce(false); + const { queryByTestId } = await asyncRender( + + ); + + expect( + queryByTestId("visual-builder__overlay--top") + ).not.toBeInTheDocument(); + expect( + queryByTestId("visual-builder__overlay--left") + ).not.toBeInTheDocument(); + expect( + queryByTestId("visual-builder__overlay--right") + ).not.toBeInTheDocument(); + expect( + queryByTestId("visual-builder__overlay--bottom") + ).not.toBeInTheDocument(); + expect( + queryByTestId("visual-builder__overlay--outline") + ).not.toBeInTheDocument(); + }); + + test("does not render hover outline when not in builder mode", async () => { + vi.spyOn(utils, "isOpenInBuilder").mockReturnValueOnce(false); + const { queryByTestId } = await asyncRender( + + ); + + expect( + queryByTestId("visual-builder__hover-outline") + ).not.toBeInTheDocument(); + }); + + test("does not call hideOverlay when not in builder mode", async () => { + vi.spyOn(utils, "isOpenInBuilder").mockReturnValueOnce(false); + const visualBuilderContainer = document.createElement("div"); + await asyncRender( + + ); + + expect(hideOverlay).not.toHaveBeenCalled(); + }); + + test("does not observe elements when not in builder mode", async () => { + vi.spyOn(utils, "isOpenInBuilder").mockReturnValueOnce(false); + await asyncRender( + + ); + + expect(mockResizeObserver.observe).not.toHaveBeenCalled(); + }); }); diff --git a/src/visualBuilder/components/index.tsx b/src/visualBuilder/components/index.tsx index ede594be..6c08da3a 100644 --- a/src/visualBuilder/components/index.tsx +++ b/src/visualBuilder/components/index.tsx @@ -2,6 +2,7 @@ import { render } from "preact"; import VisualBuilderComponent from "./VisualBuilder"; import { visualBuilderStyles } from "../visualBuilder.style"; import React from "preact/compat"; +import { isOpenInBuilder } from "../../utils"; interface InitUIParams { resizeObserver: ResizeObserver; @@ -11,7 +12,10 @@ function initUI(props: InitUIParams): void { const visualBuilderDOM = document.querySelector( `.visual-builder__container` ); - if (!visualBuilderDOM) { + + const isInBuilder = isOpenInBuilder(); + + if (!visualBuilderDOM && isInBuilder) { const visualBuilderContainer = document.createElement("div"); visualBuilderContainer.classList.add( visualBuilderStyles()["visual-builder__container"], diff --git a/src/visualBuilder/utils/__test__/focusOverlayWrapper.test.ts b/src/visualBuilder/utils/__test__/focusOverlayWrapper.test.ts index c963c3d4..1d80c172 100644 --- a/src/visualBuilder/utils/__test__/focusOverlayWrapper.test.ts +++ b/src/visualBuilder/utils/__test__/focusOverlayWrapper.test.ts @@ -13,7 +13,7 @@ import { mockMultipleLinkFieldSchema } from "../../../__test__/data/fields"; // this is probably because of cyclic dependencies import { VisualBuilder } from "../.."; import { screen } from "@testing-library/preact"; - +import { isOpenInBuilder } from "../../../utils"; vi.mock("../visualBuilderPostMessage", () => { return { __esModule: true, @@ -31,6 +31,15 @@ vi.mock("../handleIndividualFields", () => { }; }); +vi.mock("../../../utils/index.ts", async () => { + const actual = await vi.importActual("../../../utils"); + return { + __esModule: true, + ...actual, + isOpenInBuilder: vi.fn().mockReturnValue(true), + }; +}); + const mockResizeObserver = { observe: vi.fn(), unobserve: vi.fn(), @@ -78,14 +87,17 @@ describe("addFocusOverlay", () => { "data-cslp", "all_fields.blt58a50b4cebae75c5.en-us.title" ); - targetElement.getBoundingClientRect = vi.fn(() => ({ - left: 10, - right: 20, - top: 10, - bottom: 20, - height: 10, - width: 10 - } as DOMRect)) as any; + targetElement.getBoundingClientRect = vi.fn( + () => + ({ + left: 10, + right: 20, + top: 10, + bottom: 20, + height: 10, + width: 10, + }) as DOMRect + ) as any; visualBuilderContainer.appendChild(targetElement); }); @@ -138,8 +150,10 @@ describe("addFocusOverlay", () => { const overlayOutline = document.querySelector( `[data-testid="visual-builder__overlay--outline"]` - ) - expect(overlayOutline).toHaveStyle("top: 10px; height: 10px; width: 10px; left: 10px; outline-color: rgb(113, 92, 221);"); + ); + expect(overlayOutline).toHaveStyle( + "top: 10px; height: 10px; width: 10px; left: 10px; outline-color: rgb(113, 92, 221);" + ); }); }); @@ -286,7 +300,7 @@ describe("hideFocusOverlay", () => { visualBuilderOverlayWrapper: focusOverlayWrapper, focusedToolbar: document.querySelector(".visual-builder__toolbar"), resizeObserver: mockResizeObserver, - noTrigger: false + noTrigger: false, }); expect(focusOverlayWrapper.classList.contains("visible")).toBe(false);