From c8c64d29237db264cfcc7df3799394f0d1d27575 Mon Sep 17 00:00:00 2001 From: Cesar Gonzalez Date: Tue, 11 Jun 2024 10:19:26 -0500 Subject: [PATCH] [PM-5189] Implementing jest tests for AutofillInlineMenuContentService --- .../autofill/content/autofill-init.spec.ts | 2 +- .../src/autofill/content/autofill-init.ts | 4 +- ...tofill-inline-menu-content.service.spec.ts | 24 ++++++++++++ .../autofill-inline-menu-content.service.ts | 37 ++++++++++++++----- 4 files changed, 54 insertions(+), 13 deletions(-) create mode 100644 apps/browser/src/autofill/overlay/inline-menu/content/autofill-inline-menu-content.service.spec.ts diff --git a/apps/browser/src/autofill/content/autofill-init.spec.ts b/apps/browser/src/autofill/content/autofill-init.spec.ts index 3479c7fdf2d..de4854548cb 100644 --- a/apps/browser/src/autofill/content/autofill-init.spec.ts +++ b/apps/browser/src/autofill/content/autofill-init.spec.ts @@ -269,7 +269,7 @@ describe("AutofillInit", () => { it("removes the overlay when filling the form", async () => { const blurAndRemoveOverlaySpy = jest.spyOn( autofillInit as any, - "blurFocusedFieldAndRemoveInlineMenu", + "blurFocusedFieldAndCloseInlineMenu", ); sendMockExtensionMessage({ command: "fillForm", diff --git a/apps/browser/src/autofill/content/autofill-init.ts b/apps/browser/src/autofill/content/autofill-init.ts index 3c11378016c..3e8dd7d23f5 100644 --- a/apps/browser/src/autofill/content/autofill-init.ts +++ b/apps/browser/src/autofill/content/autofill-init.ts @@ -123,7 +123,7 @@ class AutofillInit implements AutofillInitInterface { return; } - this.blurFocusedFieldAndRemoveInlineMenu(); + this.blurFocusedFieldAndCloseInlineMenu(); await this.sendExtensionMessage("updateIsFieldCurrentlyFilling", { isFieldCurrentlyFilling: true, }); @@ -143,7 +143,7 @@ class AutofillInit implements AutofillInitInterface { * in cases where the background unlock or vault item reprompt popout * is opened. */ - private blurFocusedFieldAndRemoveInlineMenu() { + private blurFocusedFieldAndCloseInlineMenu() { this.autofillOverlayContentService?.blurMostRecentlyFocusedField(true); } diff --git a/apps/browser/src/autofill/overlay/inline-menu/content/autofill-inline-menu-content.service.spec.ts b/apps/browser/src/autofill/overlay/inline-menu/content/autofill-inline-menu-content.service.spec.ts new file mode 100644 index 00000000000..7b54ae5177b --- /dev/null +++ b/apps/browser/src/autofill/overlay/inline-menu/content/autofill-inline-menu-content.service.spec.ts @@ -0,0 +1,24 @@ +import { AutofillInlineMenuContentService } from "./autofill-inline-menu-content.service"; + +describe("AutofillInlineMenuContentService", () => { + let autofillInlineMenuContentService: AutofillInlineMenuContentService; + + beforeEach(() => { + autofillInlineMenuContentService = new AutofillInlineMenuContentService(); + }); + + afterEach(() => { + jest.clearAllMocks(); + }); + + describe("isElementInlineMenu", () => { + it("returns true if the passed element is the inline menu", () => { + const element = document.createElement("div"); + autofillInlineMenuContentService["listElement"] = element; + + expect(autofillInlineMenuContentService.isElementInlineMenu(element)).toBe(true); + }); + }); + + describe("extension message handlers", () => {}); +}); diff --git a/apps/browser/src/autofill/overlay/inline-menu/content/autofill-inline-menu-content.service.ts b/apps/browser/src/autofill/overlay/inline-menu/content/autofill-inline-menu-content.service.ts index 95e6109ae5d..60d81b505f1 100644 --- a/apps/browser/src/autofill/overlay/inline-menu/content/autofill-inline-menu-content.service.ts +++ b/apps/browser/src/autofill/overlay/inline-menu/content/autofill-inline-menu-content.service.ts @@ -35,7 +35,7 @@ export class AutofillInlineMenuContentService implements AutofillInlineMenuConte zIndex: "2147483647", }; private readonly extensionMessageHandlers: InlineMenuExtensionMessageHandlers = { - closeAutofillInlineMenu: ({ message }) => this.removeInlineMenu(message), + closeAutofillInlineMenu: ({ message }) => this.closeInlineMenu(message), appendAutofillInlineMenuToDom: ({ message }) => this.appendInlineMenuElements(message), toggleAutofillInlineMenuHidden: ({ message }) => this.toggleInlineMenuHidden(message), checkIsAutofillInlineMenuButtonVisible: () => this.isInlineMenuButtonVisible(), @@ -46,18 +46,32 @@ export class AutofillInlineMenuContentService implements AutofillInlineMenuConte this.setupMutationObserver(); } + /** + * Returns the message handlers for the autofill inline menu content service. + */ get messageHandlers() { return this.extensionMessageHandlers; } + /** + * Identifies if the passed element corresponds to the inline menu button or list. + * + * @param element - The element being checked + */ isElementInlineMenu(element: HTMLElement) { return element === this.buttonElement || element === this.listElement; } + /** + * Identifies if the inline menu button is currently visible. + */ private isInlineMenuButtonVisible() { return this.isButtonVisible; } + /** + * Identifies if the inline menu list is currently visible. + */ private isInlineMenuListVisible() { return this.isListVisible; } @@ -78,27 +92,27 @@ export class AutofillInlineMenuContentService implements AutofillInlineMenuConte * unobserve the body element to ensure the mutation observer no * longer triggers. */ - private removeInlineMenu = (message?: AutofillExtensionMessage) => { + private closeInlineMenu = (message?: AutofillExtensionMessage) => { if (message?.overlayElement === AutofillOverlayElement.Button) { - this.removeInlineMenuButton(); + this.closeInlineMenuButton(); return; } if (message?.overlayElement === AutofillOverlayElement.List) { - this.removeInlineMenuList(); + this.closeInlineMenuList(); return; } this.removeBodyElementObserver(); - this.removeInlineMenuButton(); - this.removeInlineMenuList(); + this.closeInlineMenuButton(); + this.closeInlineMenuList(); }; /** * Removes the inline menu button from the DOM if it is currently present. Will * also remove the inline menu reposition event listeners. */ - private removeInlineMenuButton() { + private closeInlineMenuButton() { if (!this.buttonElement) { return; } @@ -113,7 +127,7 @@ export class AutofillInlineMenuContentService implements AutofillInlineMenuConte /** * Removes the inline menu list from the DOM if it is currently present. */ - private removeInlineMenuList() { + private closeInlineMenuList() { if (!this.listElement) { return; } @@ -412,7 +426,7 @@ export class AutofillInlineMenuContentService implements AutofillInlineMenuConte clearTimeout(this.mutationObserverIterationsResetTimeout); this.mutationObserverIterations = 0; void this.sendExtensionMessage("blurMostRecentlyFocusedField"); - this.removeInlineMenu(); + this.closeInlineMenu(); return true; } @@ -420,8 +434,11 @@ export class AutofillInlineMenuContentService implements AutofillInlineMenuConte return false; } + /** + * Disconnects the mutation observers and removes the inline menu elements from the DOM. + */ destroy() { this.documentElementMutationObserver?.disconnect(); - this.removeInlineMenu(); + this.closeInlineMenu(); } }