diff --git a/src/liveEditor/generators/__test__/generateToolbar.test.ts b/src/liveEditor/generators/__test__/generateToolbar.test.ts index 96e78c9..f8cf8d5 100644 --- a/src/liveEditor/generators/__test__/generateToolbar.test.ts +++ b/src/liveEditor/generators/__test__/generateToolbar.test.ts @@ -74,8 +74,6 @@ describe("appendFieldPathDropdown", () => { expect(fieldLabelWrapper?.classList.toString()).toBe( "visual-editor__focused-toolbar__field-label-wrapper" ); - - console.log(fieldLabelWrapper?.classList.toString()); }); test("should click the closest parent if focused toolbar is a parent field", () => { diff --git a/src/liveEditor/generators/generateToolbar.tsx b/src/liveEditor/generators/generateToolbar.tsx index 1c2d533..dcc954c 100644 --- a/src/liveEditor/generators/generateToolbar.tsx +++ b/src/liveEditor/generators/generateToolbar.tsx @@ -84,7 +84,7 @@ export function appendFieldPathDropdown( focusedToolbarElement.addEventListener("click", (e) => { e.preventDefault(); - + if ( (e.target as Element).classList.contains("visual-editor__tooltip") ) { @@ -100,7 +100,7 @@ export function appendFieldPathDropdown( ) as string; const parentElement = targetElement.closest( `[${DATA_CSLP_ATTR_SELECTOR}="${cslp}"]` - ) as HTMLElement; + ) as HTMLElement; if (parentElement) { parentElement.click(); } diff --git a/src/liveEditor/utils/__test__/focusOverlayWrapper.test.ts b/src/liveEditor/utils/__test__/focusOverlayWrapper.test.ts index 0368c1e..17d4b0d 100644 --- a/src/liveEditor/utils/__test__/focusOverlayWrapper.test.ts +++ b/src/liveEditor/utils/__test__/focusOverlayWrapper.test.ts @@ -179,7 +179,7 @@ describe("hideFocusOverlay", () => { bottom: 20, })) as any; - visualEditorContainer.appendChild(editedElement); + document.body.appendChild(editedElement); singleFocusOverlay = focusOverlayWrapper.querySelector( `[data-testid="visual-editor__overlay--top"]` @@ -225,20 +225,31 @@ describe("hideFocusOverlay", () => { expect(focusOverlayWrapper.classList.contains("visible")).toBe(true); }); - // TODO - test("should send update field event to the parent if the focused element is an inline editable element", () => { + test("should send update field event to the parent if the focused element is an inline editable element", async () => { editedElement.setAttribute("contenteditable", "true"); + // We"ll always click one of the overlays, so we can just grab the first one. Manually pointing the global state to the editedElement as we are not simulating mouse click on window here. + VisualEditor.VisualEditorGlobalState.value.previousSelectedEditableDOM = + editedElement; + + // already called addFocusOverlay, hence visible is set to true expect(focusOverlayWrapper.classList.contains("visible")).toBe(true); - fireEvent.click(singleFocusOverlay); - fireEvent.click(singleFocusOverlay); + await fireEvent.change(editedElement, { + target: { innerHTML: "New text" }, + }); + + expect(editedElement.textContent).toBe("New text"); + + // close the overlay + await fireEvent.click(focusOverlayWrapper); expect(focusOverlayWrapper.classList.contains("visible")).toBe(false); + expect(liveEditorPostMessage?.send).toHaveBeenCalledTimes(1); expect(liveEditorPostMessage?.send).toHaveBeenCalledWith( LiveEditorPostMessageEvents.UPDATE_FIELD, { - data: editedElement.innerHTML, + data: editedElement.textContent, fieldMetadata: { content_type_uid: "all_fields", cslpValue: "all_fields.blt58a50b4cebae75c5.en-us.title", diff --git a/src/liveEditor/utils/handleIndividualFields.ts b/src/liveEditor/utils/handleIndividualFields.ts index cff4b01..1411ff4 100644 --- a/src/liveEditor/utils/handleIndividualFields.ts +++ b/src/liveEditor/utils/handleIndividualFields.ts @@ -138,15 +138,12 @@ export async function handleIndividualFields( return; } - - liveEditorPostMessage?.send( - LiveEditorPostMessageEvents.OPEN_QUICK_FORM, - { - fieldMetadata: eventDetails.fieldMetadata, - cslpData: eventDetails.cslpData, - } - ); } + + liveEditorPostMessage?.send(LiveEditorPostMessageEvents.OPEN_QUICK_FORM, { + fieldMetadata: eventDetails.fieldMetadata, + cslpData: eventDetails.cslpData, + }); } export function cleanIndividualFieldResidual(elements: { diff --git a/src/livePreview/__test__/live-preview.test.ts b/src/livePreview/__test__/live-preview.test.ts index c2b24eb..5cca087 100644 --- a/src/livePreview/__test__/live-preview.test.ts +++ b/src/livePreview/__test__/live-preview.test.ts @@ -13,7 +13,6 @@ import { HistoryLivePreviewPostMessageEventData, OnChangeLivePreviewPostMessageEventData, } from "../eventManager/types/livePreviewPostMessageEvent.type"; -import * as postMessageEventHooks from "../eventManager/postMessageEvent.hooks"; import { addLivePreviewQueryTags } from "../../utils"; jest.mock("../../liveEditor/utils/liveEditorPostMessage", () => { @@ -473,25 +472,21 @@ describe("testing window event listeners", () => { test("should attach a load event to call requestDataSync if document is not yet loaded", () => { Object.defineProperty(document, "readyState", { - value: "loading", - writable: true, + get() { + return "loading"; + }, }); Config.replace({ enable: true, }); - sendInitEvent = jest.spyOn( - postMessageEventHooks, - "sendInitializeLivePreviewPostMessageEvent" - ); livePreviewInstance = new LivePreview(); - expect(addEventListenerMock).toHaveBeenCalledWith( + expect(addEventListenerMock).toBeCalledWith( "load", expect.any(Function) ); - expect(sendInitEvent).toBeCalled(); }); test("should handle link click event if ssr is set to true", async () => { @@ -502,7 +497,7 @@ describe("testing window event listeners", () => { const targetElement = document.createElement("a"); targetElement.href = "http://localhost:3000/"; - + document.body.appendChild(targetElement); livePreviewInstance = new LivePreview();