[PM-5189] Refactoring implementation and fixing issues with typing data

apps/browser/src/autofill/overlay/iframe-content/autofill-overlay-iframe-element.spec.ts

@@ -1,3 +1,5 @@
+import { AutofillOverlayPort } from "../../utils/autofill-overlay.enum";
+
 import AutofillOverlayIframeElement from "./autofill-overlay-iframe-element";
 import AutofillOverlayIframeService from "./autofill-overlay-iframe.service";
 
@@ -11,8 +13,7 @@ describe("AutofillOverlayIframeElement", () => {
         super();
         new AutofillOverlayIframeElement(
           this,
-          "overlay/button.html",
+          AutofillOverlayPort.Button,
-          "overlay/button",
           { background: "transparent", border: "none" },
           "bitwardenOverlayButton",
         );

apps/browser/src/autofill/overlay/iframe-content/autofill-overlay-iframe.service.spec.ts

@@ -14,7 +14,6 @@ import { AutofillOverlayPort } from "../../utils/autofill-overlay.enum";
 import AutofillOverlayIframeService from "./autofill-overlay-iframe.service";
 
 describe("AutofillOverlayIframeService", () => {
-  const iframePath = "overlay/list.html";
   let autofillOverlayIframeService: AutofillOverlayIframeService;
   let portSpy: chrome.runtime.Port;
   let shadowAppendSpy: jest.SpyInstance;
@@ -25,9 +24,11 @@ describe("AutofillOverlayIframeService", () => {
   beforeEach(() => {
     const shadow = document.createElement("div").attachShadow({ mode: "open" });
     autofillOverlayIframeService = new AutofillOverlayIframeService(
-      iframePath,
-      AutofillOverlayPort.Button,
       shadow,
+      AutofillOverlayPort.Button,
+      { height: "0px" },
+      "title",
+      "ariaAlert",
     );
     shadowAppendSpy = jest.spyOn(shadow, "appendChild");
     handlePortDisconnectSpy = jest.spyOn(
@@ -48,9 +49,9 @@ describe("AutofillOverlayIframeService", () => {
     jest.clearAllMocks();
   });
 
-  describe("initOverlayIframe", () => {
+  describe("initMenuIframe", () => {
     it("sets up the iframe's attributes", () => {
-      autofillOverlayIframeService.initOverlayIframe({ height: "0px" }, "title");
+      autofillOverlayIframeService.initMenuIframe();
 
       expect(autofillOverlayIframeService["iframe"]).toMatchSnapshot();
     });
@@ -58,7 +59,7 @@ describe("AutofillOverlayIframeService", () => {
     it("appends the iframe to the shadowDom", () => {
       jest.spyOn(autofillOverlayIframeService["shadow"], "appendChild");
 
-      autofillOverlayIframeService.initOverlayIframe({}, "title");
+      autofillOverlayIframeService.initMenuIframe();
 
       expect(autofillOverlayIframeService["shadow"].appendChild).toHaveBeenCalledWith(
         autofillOverlayIframeService["iframe"],
@@ -69,7 +70,7 @@ describe("AutofillOverlayIframeService", () => {
       const ariaAlert = "aria alert";
       jest.spyOn(autofillOverlayIframeService as any, "createAriaAlertElement");
 
-      autofillOverlayIframeService.initOverlayIframe({}, "title", ariaAlert);
+      autofillOverlayIframeService.initMenuIframe();
 
       expect(autofillOverlayIframeService["createAriaAlertElement"]).toHaveBeenCalledWith(
         ariaAlert,
@@ -79,7 +80,7 @@ describe("AutofillOverlayIframeService", () => {
 
     describe("on load of the iframe source", () => {
       beforeEach(() => {
-        autofillOverlayIframeService.initOverlayIframe({ height: "0px" }, "title", "ariaAlert");
+        autofillOverlayIframeService.initMenuIframe();
       });
 
       it("sets up and connects the port message listener to the extension background", () => {
@@ -122,7 +123,7 @@ describe("AutofillOverlayIframeService", () => {
 
   describe("event listeners", () => {
     beforeEach(() => {
-      autofillOverlayIframeService.initOverlayIframe({ height: "0px" }, "title", "ariaAlert");
+      autofillOverlayIframeService.initMenuIframe();
       autofillOverlayIframeService["iframe"].dispatchEvent(new Event(EVENTS.LOAD));
       Object.defineProperty(autofillOverlayIframeService["iframe"], "contentWindow", {
         value: {
@@ -403,7 +404,7 @@ describe("AutofillOverlayIframeService", () => {
 
   describe("mutation observer", () => {
     beforeEach(() => {
-      autofillOverlayIframeService.initOverlayIframe({ height: "0px" }, "title", "ariaAlert");
+      autofillOverlayIframeService.initMenuIframe();
       autofillOverlayIframeService["iframe"].dispatchEvent(new Event(EVENTS.LOAD));
       portSpy = autofillOverlayIframeService["port"];
     });

apps/browser/src/autofill/overlay/iframe-content/autofill-overlay-iframe.service.ts

@@ -35,7 +35,6 @@ class AutofillOverlayIframeService implements AutofillOverlayIframeServiceInterf
   private defaultIframeAttributes: Record<string, string> = {
     src: "",
     title: "",
-    // sandbox: "allow-scripts",
     allowtransparency: "true",
     tabIndex: "-1",
   };

apps/browser/src/autofill/overlay/pages/menu/autofill-overlay-menu-container.ts

@@ -4,7 +4,6 @@ import { setElementStyles } from "../../../utils";
 
 export class AutofillOverlayMenuContainer {
   private initMessage: any;
-
   private extensionOriginsSet: Set<string>;
   private port: chrome.runtime.Port | null = null;
   private portName: string;
@@ -30,7 +29,7 @@ export class AutofillOverlayMenuContainer {
   private defaultIframeAttributes: Record<string, string> = {
     src: "",
     title: "",
-    // sandbox: "allow-scripts",
+    sandbox: "allow-scripts",
     allowtransparency: "true",
     tabIndex: "-1",
   };
@@ -69,9 +68,13 @@ export class AutofillOverlayMenuContainer {
     this.port = chrome.runtime.connect({ name: this.portName });
     this.port.onMessage.addListener(this.handlePortMessage);
 
-    this.iframe.contentWindow?.postMessage(this.initMessage, "*");
+    this.postMessageToIframe(this.initMessage);
   };
 
+  private postMessageToIframe(message: any) {
+    this.iframe?.contentWindow?.postMessage(message, "*");
+  }
+
   private handlePortMessage = (message: any, port: chrome.runtime.Port) => {
     if (port.name !== this.portName) {
       return;

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

@@ -1,6 +1,5 @@
 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";
@@ -48,7 +47,6 @@ describe("AutofillOverlayPageElement", () => {
         "button",
         "https://jest-testing-website.com",
         translations,
-        "https://jest-testing-website.com/message-connector",
         portKey,
       );
 
@@ -63,26 +61,6 @@ 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/spec/autofill-mocks.ts

@@ -173,7 +173,6 @@ function createInitAutofillOverlayButtonMessageMock(
     translations: overlayPagesTranslations,
     styleSheetUrl: "https://jest-testing-website.com",
     authStatus: AuthenticationStatus.Unlocked,
-    messageConnectorUrl: "https://jest-testing-website.com/message-connector",
     portKey: "portKey",
     ...customFields,
   };