[PM-5189] Adjusting AutofillOverlayPageElement jest tests

apps/browser/src/autofill/content/autofill-init.ts

@@ -193,6 +193,9 @@ class AutofillInit implements AutofillInitInterface {
     return true;
   };
 
+  /**
+   * Clears the send collect details message timeout.
+   */
   private clearSendCollectDetailsMessageTimeout() {
     if (this.sendCollectDetailsMessageTimeout) {
       clearTimeout(this.sendCollectDetailsMessageTimeout as number);

apps/browser/src/autofill/overlay/pages/shared/autofill-overlay-page-element.spec.ts

@@ -1,5 +1,6 @@
 import { mock } from "jest-mock-extended";
 
+import { flushPromises } from "../../../spec/testing-utils";
 import { OverlayButtonWindowMessageHandlers } from "../../abstractions/autofill-overlay-button";
 
 import AutofillOverlayPageElement from "./autofill-overlay-page-element";
@@ -36,12 +37,13 @@ describe("AutofillOverlayPageElement", () => {
     beforeEach(() => {
       jest.spyOn(globalThis.document.documentElement, "setAttribute");
       jest.spyOn(globalThis.document, "createElement");
-      jest
-        .spyOn(autofillOverlayPageElement as any, "initMessageConnector")
-        .mockResolvedValue(undefined);
     });
 
     it("initializes the button overlay page", async () => {
+      jest
+        .spyOn(autofillOverlayPageElement as any, "initMessageConnector")
+        .mockResolvedValue(undefined);
+
       const linkElement = await autofillOverlayPageElement["initOverlayPage"](
         "button",
         "https://jest-testing-website.com",
@@ -61,6 +63,26 @@ describe("AutofillOverlayPageElement", () => {
     });
   });
 
+  describe("initMessageConnector", () => {
+    it("initializes the message connector iframe", async () => {
+      const elementName = "list";
+      const messageConnectorUrl = "https://jest-testing-website.com/message-connector";
+      const messageConnectorIframe = document.createElement("iframe");
+      jest.spyOn(messageConnectorIframe, "addEventListener");
+      jest.spyOn(globalThis.document, "createElement").mockReturnValue(messageConnectorIframe);
+
+      void autofillOverlayPageElement["initMessageConnector"](messageConnectorUrl, elementName);
+      messageConnectorIframe.dispatchEvent(new Event("load"));
+      await flushPromises();
+
+      expect(messageConnectorIframe.src).toEqual(messageConnectorUrl);
+      expect(messageConnectorIframe.addEventListener).toHaveBeenCalledWith(
+        "load",
+        expect.any(Function),
+      );
+    });
+  });
+
   describe("postMessageToConnector", () => {
     it("posts a message to the parent", () => {
       autofillOverlayPageElement["postMessageToConnector"]({ command: "test" });

apps/browser/src/autofill/overlay/pages/shared/autofill-overlay-page-element.ts

@@ -53,6 +53,40 @@ class AutofillOverlayPageElement extends HTMLElement {
     return linkElement;
   }
 
+  /**
+   * Initializes an iframe that acts as the communication bridge between
+   * the inline menu UI and the background script. Awaits the load event
+   * of the iframe before initializing the inline menu element to ensure
+   * messages from the inline menu are not missed.
+   *
+   * @param messageConnectorUrl - The URL of the message connector to use
+   * @param elementName - The name of the element, e.g. "button" or "list"
+   */
+  private initMessageConnector(messageConnectorUrl: string, elementName: "button" | "list") {
+    this.messageConnectorIframe = globalThis.document.createElement("iframe");
+    this.messageConnectorIframe.src = messageConnectorUrl;
+    this.messageConnectorIframe.style.opacity = "0";
+    this.messageConnectorIframe.style.position = "absolute";
+    this.messageConnectorIframe.style.width = "0";
+    this.messageConnectorIframe.style.height = "0";
+    this.messageConnectorIframe.style.border = "none";
+    this.messageConnectorIframe.style.pointerEvents = "none";
+    globalThis.document.body.appendChild(this.messageConnectorIframe);
+
+    return new Promise<void>((resolve) => {
+      this.messageConnectorIframe.addEventListener(EVENTS.LOAD, () => {
+        this.postMessageToConnector({
+          command: `initAutofillOverlayPort`,
+          portName:
+            elementName === "list"
+              ? AutofillOverlayPort.ListMessageConnector
+              : AutofillOverlayPort.ButtonMessageConnector,
+        });
+        resolve();
+      });
+    });
+  }
+
   /**
    * Posts a window message to the parent window.
    *
@@ -159,31 +193,6 @@ class AutofillOverlayPageElement extends HTMLElement {
   private redirectOverlayFocusOutMessage(direction: string) {
     this.postMessageToConnector({ command: "redirectOverlayFocusOut", direction });
   }
-
-  private initMessageConnector(messageConnectorUrl: string, elementName: "button" | "list") {
-    this.messageConnectorIframe = globalThis.document.createElement("iframe");
-    this.messageConnectorIframe.src = messageConnectorUrl;
-    this.messageConnectorIframe.style.opacity = "0";
-    this.messageConnectorIframe.style.position = "absolute";
-    this.messageConnectorIframe.style.width = "0";
-    this.messageConnectorIframe.style.height = "0";
-    this.messageConnectorIframe.style.border = "none";
-    this.messageConnectorIframe.style.pointerEvents = "none";
-    globalThis.document.body.appendChild(this.messageConnectorIframe);
-
-    return new Promise<void>((resolve) => {
-      this.messageConnectorIframe.addEventListener(EVENTS.LOAD, () => {
-        this.postMessageToConnector({
-          command: `initAutofillOverlayPort`,
-          portName:
-            elementName === "list"
-              ? AutofillOverlayPort.ListMessageConnector
-              : AutofillOverlayPort.ButtonMessageConnector,
-        });
-        resolve();
-      });
-    });
-  }
 }
 
 export default AutofillOverlayPageElement;