From 75da1d65564292c5d6bd28b974511b468feb8ae4 Mon Sep 17 00:00:00 2001 From: Cesar Gonzalez Date: Mon, 3 Jun 2024 15:56:44 -0500 Subject: [PATCH] [PM-8027] Fixing jest tests for the overlay --- .../autofill-overlay-content.service.spec.ts | 95 +++++++++++-------- .../autofill-overlay-content.service.ts | 37 -------- 2 files changed, 58 insertions(+), 74 deletions(-) diff --git a/apps/browser/src/autofill/services/autofill-overlay-content.service.spec.ts b/apps/browser/src/autofill/services/autofill-overlay-content.service.spec.ts index 0832f8338d..f0601b31f5 100644 --- a/apps/browser/src/autofill/services/autofill-overlay-content.service.spec.ts +++ b/apps/browser/src/autofill/services/autofill-overlay-content.service.spec.ts @@ -4,6 +4,7 @@ import { AuthenticationStatus } from "@bitwarden/common/auth/enums/authenticatio import { EVENTS, AutofillOverlayVisibility } from "@bitwarden/common/autofill/constants"; import AutofillField from "../models/autofill-field"; +import AutofillForm from "../models/autofill-form"; import AutofillPageDetails from "../models/autofill-page-details"; import { createAutofillFieldMock } from "../spec/autofill-mocks"; import { flushPromises } from "../spec/testing-utils"; @@ -28,8 +29,6 @@ function createMutationRecordMock(customFields = {}): MutationRecord { }; } -const temporaryPageDetailsMock = mock(); - const defaultWindowReadyState = document.readyState; const defaultDocumentVisibilityState = document.visibilityState; describe("AutofillOverlayContentService", () => { @@ -149,6 +148,7 @@ describe("AutofillOverlayContentService", () => { describe("setupAutofillOverlayListenerOnField", () => { let autofillFieldElement: ElementWithOpId; let autofillFieldData: AutofillField; + let pageDetailsMock: AutofillPageDetails; beforeEach(() => { document.body.innerHTML = ` @@ -169,6 +169,17 @@ describe("AutofillOverlayContentService", () => { placeholder: "username", elementNumber: 1, }); + const passwordFieldData = createAutofillFieldMock({ + opid: "password-field", + form: "validFormId", + elementNumber: 2, + autocompleteType: "current-password", + type: "password", + }); + pageDetailsMock = mock({ + forms: { validFormId: mock() }, + fields: [autofillFieldData, passwordFieldData], + }); }); describe("skips setup for ignored form fields", () => { @@ -182,7 +193,7 @@ describe("AutofillOverlayContentService", () => { await autofillOverlayContentService.setupAutofillOverlayListenerOnField( autofillFieldElement, autofillFieldData, - temporaryPageDetailsMock, + pageDetailsMock, ); expect(autofillFieldElement.addEventListener).not.toHaveBeenCalled(); @@ -194,7 +205,7 @@ describe("AutofillOverlayContentService", () => { await autofillOverlayContentService.setupAutofillOverlayListenerOnField( autofillFieldElement, autofillFieldData, - temporaryPageDetailsMock, + pageDetailsMock, ); expect(autofillFieldElement.addEventListener).not.toHaveBeenCalled(); @@ -206,7 +217,7 @@ describe("AutofillOverlayContentService", () => { await autofillOverlayContentService.setupAutofillOverlayListenerOnField( autofillFieldElement, autofillFieldData, - temporaryPageDetailsMock, + pageDetailsMock, ); expect(autofillFieldElement.addEventListener).not.toHaveBeenCalled(); @@ -219,7 +230,7 @@ describe("AutofillOverlayContentService", () => { await autofillOverlayContentService.setupAutofillOverlayListenerOnField( autofillFieldElement, autofillFieldData, - temporaryPageDetailsMock, + pageDetailsMock, ); expect(autofillFieldElement.addEventListener).not.toHaveBeenCalled(); @@ -232,7 +243,7 @@ describe("AutofillOverlayContentService", () => { await autofillOverlayContentService.setupAutofillOverlayListenerOnField( autofillFieldElement, autofillFieldData, - temporaryPageDetailsMock, + pageDetailsMock, ); expect(autofillFieldElement.addEventListener).not.toHaveBeenCalled(); @@ -244,7 +255,7 @@ describe("AutofillOverlayContentService", () => { await autofillOverlayContentService.setupAutofillOverlayListenerOnField( autofillFieldElement, autofillFieldData, - temporaryPageDetailsMock, + pageDetailsMock, ); expect(autofillFieldElement.addEventListener).not.toHaveBeenCalled(); @@ -256,7 +267,7 @@ describe("AutofillOverlayContentService", () => { await autofillOverlayContentService.setupAutofillOverlayListenerOnField( autofillFieldElement, autofillFieldData, - temporaryPageDetailsMock, + pageDetailsMock, ); expect(autofillFieldElement.addEventListener).not.toHaveBeenCalled(); @@ -269,7 +280,7 @@ describe("AutofillOverlayContentService", () => { await autofillOverlayContentService.setupAutofillOverlayListenerOnField( autofillFieldElement, autofillFieldData, - temporaryPageDetailsMock, + pageDetailsMock, ); expect(autofillFieldElement.addEventListener).not.toHaveBeenCalled(); @@ -283,7 +294,7 @@ describe("AutofillOverlayContentService", () => { await autofillOverlayContentService.setupAutofillOverlayListenerOnField( autofillFieldElement, autofillFieldData, - temporaryPageDetailsMock, + pageDetailsMock, ); expect(sendExtensionMessageSpy).toHaveBeenCalledWith("getAutofillOverlayVisibility"); @@ -299,7 +310,7 @@ describe("AutofillOverlayContentService", () => { await autofillOverlayContentService.setupAutofillOverlayListenerOnField( autofillFieldElement, autofillFieldData, - temporaryPageDetailsMock, + pageDetailsMock, ); expect(autofillOverlayContentService["autofillOverlayVisibility"]).toEqual( @@ -323,7 +334,7 @@ describe("AutofillOverlayContentService", () => { await autofillOverlayContentService.setupAutofillOverlayListenerOnField( autofillFieldElement, autofillFieldData, - temporaryPageDetailsMock, + pageDetailsMock, ); expect(autofillFieldElement.removeEventListener).toHaveBeenNthCalledWith( @@ -348,7 +359,7 @@ describe("AutofillOverlayContentService", () => { await autofillOverlayContentService.setupAutofillOverlayListenerOnField( autofillFieldElement, autofillFieldData, - temporaryPageDetailsMock, + pageDetailsMock, ); }); @@ -372,7 +383,7 @@ describe("AutofillOverlayContentService", () => { await autofillOverlayContentService.setupAutofillOverlayListenerOnField( autofillFieldElement, autofillFieldData, - temporaryPageDetailsMock, + pageDetailsMock, ); jest.spyOn(globalThis.customElements, "define").mockImplementation(); }); @@ -456,7 +467,7 @@ describe("AutofillOverlayContentService", () => { await autofillOverlayContentService.setupAutofillOverlayListenerOnField( spanAutofillFieldElement, autofillFieldData, - temporaryPageDetailsMock, + pageDetailsMock, ); spanAutofillFieldElement.dispatchEvent(new Event("input")); @@ -468,7 +479,7 @@ describe("AutofillOverlayContentService", () => { await autofillOverlayContentService.setupAutofillOverlayListenerOnField( autofillFieldElement, autofillFieldData, - temporaryPageDetailsMock, + pageDetailsMock, ); autofillFieldElement.dispatchEvent(new Event("input")); @@ -485,7 +496,7 @@ describe("AutofillOverlayContentService", () => { await autofillOverlayContentService.setupAutofillOverlayListenerOnField( passwordFieldElement, autofillFieldData, - temporaryPageDetailsMock, + pageDetailsMock, ); passwordFieldElement.dispatchEvent(new Event("input")); @@ -505,7 +516,7 @@ describe("AutofillOverlayContentService", () => { await autofillOverlayContentService.setupAutofillOverlayListenerOnField( autofillFieldElement, autofillFieldData, - temporaryPageDetailsMock, + pageDetailsMock, ); autofillFieldElement.dispatchEvent(new Event("input")); @@ -524,7 +535,7 @@ describe("AutofillOverlayContentService", () => { await autofillOverlayContentService.setupAutofillOverlayListenerOnField( autofillFieldElement, autofillFieldData, - temporaryPageDetailsMock, + pageDetailsMock, ); autofillFieldElement.dispatchEvent(new Event("input")); @@ -538,7 +549,7 @@ describe("AutofillOverlayContentService", () => { await autofillOverlayContentService.setupAutofillOverlayListenerOnField( autofillFieldElement, autofillFieldData, - temporaryPageDetailsMock, + pageDetailsMock, ); autofillFieldElement.dispatchEvent(new Event("input")); @@ -553,7 +564,7 @@ describe("AutofillOverlayContentService", () => { await autofillOverlayContentService.setupAutofillOverlayListenerOnField( autofillFieldElement, autofillFieldData, - temporaryPageDetailsMock, + pageDetailsMock, ); autofillFieldElement.dispatchEvent(new Event("input")); @@ -569,7 +580,7 @@ describe("AutofillOverlayContentService", () => { await autofillOverlayContentService.setupAutofillOverlayListenerOnField( autofillFieldElement, autofillFieldData, - temporaryPageDetailsMock, + pageDetailsMock, ); autofillFieldElement.dispatchEvent(new Event("input")); @@ -587,7 +598,7 @@ describe("AutofillOverlayContentService", () => { await autofillOverlayContentService.setupAutofillOverlayListenerOnField( autofillFieldElement, autofillFieldData, - temporaryPageDetailsMock, + pageDetailsMock, ); }); @@ -638,7 +649,7 @@ describe("AutofillOverlayContentService", () => { await autofillOverlayContentService.setupAutofillOverlayListenerOnField( autofillFieldElement, autofillFieldData, - temporaryPageDetailsMock, + pageDetailsMock, ); autofillFieldElement.dispatchEvent(new Event("focus")); @@ -650,7 +661,7 @@ describe("AutofillOverlayContentService", () => { await autofillOverlayContentService.setupAutofillOverlayListenerOnField( autofillFieldElement, autofillFieldData, - temporaryPageDetailsMock, + pageDetailsMock, ); autofillFieldElement.dispatchEvent(new Event("focus")); @@ -668,7 +679,7 @@ describe("AutofillOverlayContentService", () => { await autofillOverlayContentService.setupAutofillOverlayListenerOnField( autofillFieldElement, autofillFieldData, - temporaryPageDetailsMock, + pageDetailsMock, ); autofillFieldElement.dispatchEvent(new Event("focus")); @@ -688,7 +699,7 @@ describe("AutofillOverlayContentService", () => { await autofillOverlayContentService.setupAutofillOverlayListenerOnField( autofillFieldElement, autofillFieldData, - temporaryPageDetailsMock, + pageDetailsMock, ); autofillFieldElement.dispatchEvent(new Event("focus")); @@ -707,7 +718,7 @@ describe("AutofillOverlayContentService", () => { await autofillOverlayContentService.setupAutofillOverlayListenerOnField( autofillFieldElement, autofillFieldData, - temporaryPageDetailsMock, + pageDetailsMock, ); autofillFieldElement.dispatchEvent(new Event("focus")); @@ -725,7 +736,7 @@ describe("AutofillOverlayContentService", () => { await autofillOverlayContentService.setupAutofillOverlayListenerOnField( autofillFieldElement, autofillFieldData, - temporaryPageDetailsMock, + pageDetailsMock, ); autofillFieldElement.dispatchEvent(new Event("focus")); @@ -742,7 +753,7 @@ describe("AutofillOverlayContentService", () => { await autofillOverlayContentService.setupAutofillOverlayListenerOnField( autofillFieldElement, autofillFieldData, - temporaryPageDetailsMock, + pageDetailsMock, ); autofillFieldElement.dispatchEvent(new Event("focus")); @@ -765,7 +776,7 @@ describe("AutofillOverlayContentService", () => { await autofillOverlayContentService.setupAutofillOverlayListenerOnField( autofillFieldElement, autofillFieldData, - temporaryPageDetailsMock, + pageDetailsMock, ); expect(sendExtensionMessageSpy).toHaveBeenCalledWith("openAutofillOverlay"); @@ -780,7 +791,7 @@ describe("AutofillOverlayContentService", () => { await autofillOverlayContentService.setupAutofillOverlayListenerOnField( autofillFieldElement, autofillFieldData, - temporaryPageDetailsMock, + pageDetailsMock, ); expect(autofillOverlayContentService["mostRecentlyFocusedField"]).toEqual( @@ -1623,6 +1634,7 @@ describe("AutofillOverlayContentService", () => { describe("destroy", () => { let autofillFieldElement: ElementWithOpId; let autofillFieldData: AutofillField; + let pageDetailsMock: AutofillPageDetails; beforeEach(() => { document.body.innerHTML = ` @@ -1642,12 +1654,21 @@ describe("AutofillOverlayContentService", () => { placeholder: "username", elementNumber: 1, }); - // FIXME: Verify that this floating promise is intentional. If it is, add an explanatory comment and ensure there is proper error handling. - // eslint-disable-next-line @typescript-eslint/no-floating-promises - autofillOverlayContentService.setupAutofillOverlayListenerOnField( + const passwordFieldData = createAutofillFieldMock({ + opid: "password-field", + form: "validFormId", + elementNumber: 2, + autocompleteType: "current-password", + type: "password", + }); + pageDetailsMock = mock({ + forms: { validFormId: mock() }, + fields: [autofillFieldData, passwordFieldData], + }); + void autofillOverlayContentService.setupAutofillOverlayListenerOnField( autofillFieldElement, autofillFieldData, - temporaryPageDetailsMock, + pageDetailsMock, ); autofillOverlayContentService["mostRecentlyFocusedField"] = autofillFieldElement; }); diff --git a/apps/browser/src/autofill/services/autofill-overlay-content.service.ts b/apps/browser/src/autofill/services/autofill-overlay-content.service.ts index 06e99c7410..8c46227aa5 100644 --- a/apps/browser/src/autofill/services/autofill-overlay-content.service.ts +++ b/apps/browser/src/autofill/services/autofill-overlay-content.service.ts @@ -536,18 +536,6 @@ class AutofillOverlayContentService implements AutofillOverlayContentServiceInte return this.authStatus === AuthenticationStatus.Unlocked; } - /** - * Identifies if the autofill field's data contains any of - * the keyboards matching the passed list of keywords. - * - * @param autofillFieldData - Autofill field data captured from the form field element. - * @param keywords - Keywords to search for in the autofill field data. - */ - private keywordsFoundInFieldData(autofillFieldData: AutofillField, keywords: string[]) { - const searchedString = this.getAutofillFieldDataKeywords(autofillFieldData); - return keywords.some((keyword) => searchedString.includes(keyword)); - } - /** * Aggregates the autofill field's data into a single string * that can be used to search for keywords. @@ -745,31 +733,6 @@ class AutofillOverlayContentService implements AutofillOverlayContentServiceInte }); } - /** - * Identifies if the field should have the autofill overlay setup on it. Currently, this is mainly - * determined by whether the field correlates with a login cipher. This method will need to be - * updated in the future to support other types of forms. - * - * @param autofillFieldData - Autofill field data captured from the form field element. - */ - private isIgnoredField(autofillFieldData: AutofillField): boolean { - if ( - autofillFieldData.readonly || - autofillFieldData.disabled || - !autofillFieldData.viewable || - this.ignoredFieldTypes.has(autofillFieldData.type) - // || this.keywordsFoundInFieldData(autofillFieldData, ["search", "captcha"]) - ) { - return true; - } - - const isLoginCipherField = - this.inlineMenuFieldQualificationService.isCurrentPasswordField(autofillFieldData) || - this.inlineMenuFieldQualificationService.isUsernameField(autofillFieldData); - - return !isLoginCipherField; - } - /** * Creates the autofill overlay button element. Will not attempt * to create the element if it already exists in the DOM.