EB-1565: Sidebar sometimes load and sometimes doesn't

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", () => {

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();
             }

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",

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: {

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();