[PM-5189] Implementing jest tests for AutofillInlineMenuContentService

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

@@ -1,10 +1,23 @@
+import AutofillInit from "../../../content/autofill-init";
+import { AutofillOverlayElement } from "../../../enums/autofill-overlay.enum";
+import { flushPromises, sendMockExtensionMessage } from "../../../spec/testing-utils";
+
 import { AutofillInlineMenuContentService } from "./autofill-inline-menu-content.service";
 
 describe("AutofillInlineMenuContentService", () => {
   let autofillInlineMenuContentService: AutofillInlineMenuContentService;
+  let autofillInit: AutofillInit;
+  let sendExtensionMessageSpy: jest.SpyInstance;
 
   beforeEach(() => {
+    document.body.innerHTML = "";
     autofillInlineMenuContentService = new AutofillInlineMenuContentService();
+    autofillInit = new AutofillInit(null, autofillInlineMenuContentService);
+    autofillInit.init();
+    sendExtensionMessageSpy = jest.spyOn(
+      autofillInlineMenuContentService as any,
+      "sendExtensionMessage",
+    );
   });
 
   afterEach(() => {
@@ -20,5 +33,69 @@ describe("AutofillInlineMenuContentService", () => {
     });
   });
 
-  describe("extension message handlers", () => {});
+  describe("extension message handlers", () => {
+    describe("closeAutofillInlineMenu", () => {
+      it("closes the inline menu button", async () => {
+        sendMockExtensionMessage({
+          command: "appendAutofillInlineMenuToDom",
+          overlayElement: AutofillOverlayElement.Button,
+        });
+
+        sendMockExtensionMessage({
+          command: "closeAutofillInlineMenu",
+          overlayElement: AutofillOverlayElement.Button,
+        });
+        await flushPromises();
+
+        expect(sendExtensionMessageSpy).toHaveBeenCalledWith("autofillOverlayElementClosed", {
+          overlayElement: AutofillOverlayElement.Button,
+        });
+      });
+
+      it("closes the inline menu list", () => {
+        sendMockExtensionMessage({
+          command: "appendAutofillInlineMenuToDom",
+          overlayElement: AutofillOverlayElement.List,
+        });
+
+        sendMockExtensionMessage({
+          command: "closeAutofillInlineMenu",
+          overlayElement: AutofillOverlayElement.List,
+        });
+
+        expect(sendExtensionMessageSpy).toHaveBeenCalledWith("autofillOverlayElementClosed", {
+          overlayElement: AutofillOverlayElement.List,
+        });
+      });
+
+      it("closes both inline menu elements and removes the body element mutation observer", async () => {
+        const removeBodyElementObserverSpy = jest.spyOn(
+          autofillInlineMenuContentService as any,
+          "removeBodyElementObserver",
+        );
+        sendMockExtensionMessage({
+          command: "appendAutofillInlineMenuToDom",
+          overlayElement: AutofillOverlayElement.Button,
+        });
+        sendMockExtensionMessage({
+          command: "appendAutofillInlineMenuToDom",
+          overlayElement: AutofillOverlayElement.List,
+        });
+
+        sendMockExtensionMessage({
+          command: "closeAutofillInlineMenu",
+        });
+        await flushPromises();
+
+        expect(removeBodyElementObserverSpy).toHaveBeenCalled();
+        expect(sendExtensionMessageSpy).toHaveBeenCalledWith("autofillOverlayElementClosed", {
+          overlayElement: AutofillOverlayElement.Button,
+        });
+
+        expect(sendExtensionMessageSpy).toHaveBeenCalledWith("autofillOverlayElementClosed", {
+          overlayElement: AutofillOverlayElement.List,
+        });
+      });
+    });
+  });
 });

apps/browser/src/autofill/overlay/inline-menu/content/autofill-inline-menu-content.service.ts

@@ -113,30 +113,26 @@ export class AutofillInlineMenuContentService implements AutofillInlineMenuConte
    * also remove the inline menu reposition event listeners.
    */
   private closeInlineMenuButton() {
-    if (!this.buttonElement) {
+    if (this.buttonElement) {
-      return;
+      this.buttonElement.remove();
+      this.isButtonVisible = false;
+      void this.sendExtensionMessage("autofillOverlayElementClosed", {
+        overlayElement: AutofillOverlayElement.Button,
+      });
     }
-
-    this.buttonElement.remove();
-    this.isButtonVisible = false;
-    void this.sendExtensionMessage("autofillOverlayElementClosed", {
-      overlayElement: AutofillOverlayElement.Button,
-    });
   }
 
   /**
    * Removes the inline menu list from the DOM if it is currently present.
    */
   private closeInlineMenuList() {
-    if (!this.listElement) {
+    if (this.listElement) {
-      return;
+      this.listElement.remove();
+      this.isListVisible = false;
+      void this.sendExtensionMessage("autofillOverlayElementClosed", {
+        overlayElement: AutofillOverlayElement.List,
+      });
     }
-
-    this.listElement.remove();
-    this.isListVisible = false;
-    void this.sendExtensionMessage("autofillOverlayElementClosed", {
-      overlayElement: AutofillOverlayElement.List,
-    });
   }
 
   /**
@@ -388,6 +384,7 @@ export class AutofillInlineMenuContentService implements AutofillInlineMenuConte
     const secondToLastChildIsInlineMenuButton = secondToLastChild === this.buttonElement;
 
     if (
+      !lastChild ||
       (lastChildIsInlineMenuList && secondToLastChildIsInlineMenuButton) ||
       (lastChildIsInlineMenuButton && !this.isListVisible)
     ) {