bitwarden/browser
1
0
Fork 0
mirror of https://github.com/bitwarden/browser synced 2025-12-18 17:23:37 +00:00
Code Issues Releases Wiki Activity

[PM-5189] Adjusting jest tests for AutofillService to facilitate observable behavior

Browse Source
This commit is contained in:
Cesar Gonzalez
2024-04-16 16:54:05 -05:00
parent a5824584ae
commit 49299204e4
9 changed files with 31 additions and 26 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
apps/browser/src/autofill/background/abstractions/overlay.background.ts
View File

@@ -98,7 +98,7 @@ type OverlayBackgroundExtensionMessageHandlers = {
autofillOverlayAddNewVaultItem: ({ message, sender }: BackgroundOnMessageHandlerParams) => void; autofillOverlayAddNewVaultItem: ({ message, sender }: BackgroundOnMessageHandlerParams) => void;
getInlineMenuVisibilitySetting: () => void; getInlineMenuVisibilitySetting: () => void;
checkAutofillOverlayMenuFocused: () => void; checkAutofillOverlayMenuFocused: () => void;
focusAutofillOverlayList: () => void; focusAutofillOverlayMenuList: () => void;
updateAutofillOverlayMenuPosition: ({ updateAutofillOverlayMenuPosition: ({
message, message,
sender, sender,

8
apps/browser/src/autofill/background/overlay.background.spec.ts
View File

@@ -698,8 +698,8 @@ describe("OverlayBackground", () => {
}); });
}); });
describe("focusAutofillOverlayList message handler", () => { describe("focusAutofillOverlayMenuList message handler", () => {
it("will send a `focusOverlayList` message to the overlay list port", async () => { it("will send a `focusOverlayMenuList` message to the overlay list port", async () => {
await initOverlayElementPorts({ await initOverlayElementPorts({
initList: true, initList: true,
initButton: false, initButton: false,
@@ -707,9 +707,9 @@ describe("OverlayBackground", () => {
initListMessageConnectorSpy: false, initListMessageConnectorSpy: false,
}); });
sendMockExtensionMessage({ command: "focusAutofillOverlayList" }); sendMockExtensionMessage({ command: "focusAutofillOverlayMenuList" });
expect(listPortSpy.postMessage).toHaveBeenCalledWith({ command: "focusOverlayList" }); expect(listPortSpy.postMessage).toHaveBeenCalledWith({ command: "focusOverlayMenuList" });
}); });
}); });

6
apps/browser/src/autofill/background/overlay.background.ts
View File

@@ -70,7 +70,7 @@ class OverlayBackground implements OverlayBackgroundInterface {
autofillOverlayAddNewVaultItem: ({ message, sender }) => this.addNewVaultItem(message, sender), autofillOverlayAddNewVaultItem: ({ message, sender }) => this.addNewVaultItem(message, sender),
getInlineMenuVisibilitySetting: () => this.getInlineMenuVisibility(), getInlineMenuVisibilitySetting: () => this.getInlineMenuVisibility(),
checkAutofillOverlayMenuFocused: () => this.checkOverlayMenuFocused(), checkAutofillOverlayMenuFocused: () => this.checkOverlayMenuFocused(),
focusAutofillOverlayList: () => this.focusOverlayList(), focusAutofillOverlayMenuList: () => this.focusOverlayMenuList(),
updateAutofillOverlayMenuPosition: ({ message, sender }) => updateAutofillOverlayMenuPosition: ({ message, sender }) =>
this.updateOverlayMenuPosition(message, sender), this.updateOverlayMenuPosition(message, sender),
updateAutofillOverlayMenuHidden: ({ message, sender }) => updateAutofillOverlayMenuHidden: ({ message, sender }) =>
@@ -736,8 +736,8 @@ class OverlayBackground implements OverlayBackgroundInterface {
/** /**
* Facilitates redirecting focus to the overlay list. * Facilitates redirecting focus to the overlay list.
*/ */
private focusOverlayList() { private focusOverlayMenuList() {
this.overlayListPort?.postMessage({ command: "focusOverlayList" }); this.overlayListPort?.postMessage({ command: "focusOverlayMenuList" });
} }
/** /**

2
apps/browser/src/autofill/overlay/abstractions/autofill-overlay-list.ts
View File

@@ -22,7 +22,7 @@ type OverlayListWindowMessageHandlers = {
initAutofillOverlayList: ({ message }: { message: InitAutofillOverlayListMessage }) => void; initAutofillOverlayList: ({ message }: { message: InitAutofillOverlayListMessage }) => void;
checkAutofillOverlayListFocused: () => void; checkAutofillOverlayListFocused: () => void;
updateOverlayListCiphers: ({ message }: { message: UpdateOverlayListCiphersMessage }) => void; updateOverlayListCiphers: ({ message }: { message: UpdateOverlayListCiphersMessage }) => void;
focusOverlayList: () => void; focusOverlayMenuList: () => void;
}; };
export { export {

8
apps/browser/src/autofill/overlay/pages/list/autofill-overlay-list.spec.ts
View File

@@ -330,7 +330,7 @@ describe("AutofillOverlayList", () => {
"setAttribute", "setAttribute",
); );
postWindowMessage({ command: "focusOverlayList" }); postWindowMessage({ command: "focusOverlayMenuList" });
expect(overlayContainerSetAttributeSpy).toHaveBeenCalledWith("role", "dialog"); expect(overlayContainerSetAttributeSpy).toHaveBeenCalledWith("role", "dialog");
expect(overlayContainerSetAttributeSpy).toHaveBeenCalledWith("aria-modal", "true"); expect(overlayContainerSetAttributeSpy).toHaveBeenCalledWith("aria-modal", "true");
@@ -348,7 +348,7 @@ describe("AutofillOverlayList", () => {
autofillOverlayList["overlayListContainer"].querySelector("#unlock-button"); autofillOverlayList["overlayListContainer"].querySelector("#unlock-button");
jest.spyOn(unlockButton as HTMLElement, "focus"); jest.spyOn(unlockButton as HTMLElement, "focus");
postWindowMessage({ command: "focusOverlayList" }); postWindowMessage({ command: "focusOverlayMenuList" });
expect((unlockButton as HTMLElement).focus).toBeCalled(); expect((unlockButton as HTMLElement).focus).toBeCalled();
}); });
@@ -360,7 +360,7 @@ describe("AutofillOverlayList", () => {
autofillOverlayList["overlayListContainer"].querySelector("#new-item-button"); autofillOverlayList["overlayListContainer"].querySelector("#new-item-button");
jest.spyOn(newItemButton as HTMLElement, "focus"); jest.spyOn(newItemButton as HTMLElement, "focus");
postWindowMessage({ command: "focusOverlayList" }); postWindowMessage({ command: "focusOverlayMenuList" });
expect((newItemButton as HTMLElement).focus).toBeCalled(); expect((newItemButton as HTMLElement).focus).toBeCalled();
}); });
@@ -371,7 +371,7 @@ describe("AutofillOverlayList", () => {
autofillOverlayList["overlayListContainer"].querySelector(".fill-cipher-button"); autofillOverlayList["overlayListContainer"].querySelector(".fill-cipher-button");
jest.spyOn(firstCipherItem as HTMLElement, "focus"); jest.spyOn(firstCipherItem as HTMLElement, "focus");
postWindowMessage({ command: "focusOverlayList" }); postWindowMessage({ command: "focusOverlayMenuList" });
expect((firstCipherItem as HTMLElement).focus).toBeCalled(); expect((firstCipherItem as HTMLElement).focus).toBeCalled();
}); });

4
apps/browser/src/autofill/overlay/pages/list/autofill-overlay-list.ts
View File

@@ -26,7 +26,7 @@ class AutofillOverlayList extends AutofillOverlayPageElement {
initAutofillOverlayList: ({ message }) => this.initAutofillOverlayList(message), initAutofillOverlayList: ({ message }) => this.initAutofillOverlayList(message),
checkAutofillOverlayListFocused: () => this.checkOverlayListFocused(), checkAutofillOverlayListFocused: () => this.checkOverlayListFocused(),
updateOverlayListCiphers: ({ message }) => this.updateListItems(message.ciphers), updateOverlayListCiphers: ({ message }) => this.updateListItems(message.ciphers),
focusOverlayList: () => this.focusOverlayList(), focusOverlayMenuList: () => this.focusOverlayMenuList(),
}; };
constructor() { constructor() {
@@ -486,7 +486,7 @@ class AutofillOverlayList extends AutofillOverlayPageElement {
* determined by the presence of the unlock button, new item button, or * determined by the presence of the unlock button, new item button, or
* the first cipher button. * the first cipher button.
*/ */
private focusOverlayList() { private focusOverlayMenuList() {
this.overlayListContainer.setAttribute("role", "dialog"); this.overlayListContainer.setAttribute("role", "dialog");
this.overlayListContainer.setAttribute("aria-modal", "true"); this.overlayListContainer.setAttribute("aria-modal", "true");

6
apps/browser/src/autofill/services/autofill-overlay-content.service.spec.ts
View File

@@ -375,11 +375,11 @@ describe("AutofillOverlayContentService", () => {
expect(updateMostRecentlyFocusedFieldSpy).toHaveBeenCalledWith(autofillFieldElement); expect(updateMostRecentlyFocusedFieldSpy).toHaveBeenCalledWith(autofillFieldElement);
expect(openAutofillOverlaySpy).toHaveBeenCalledWith({ isOpeningFullOverlay: true }); expect(openAutofillOverlaySpy).toHaveBeenCalledWith({ isOpeningFullOverlay: true });
expect(sendExtensionMessageSpy).not.toHaveBeenCalledWith("focusAutofillOverlayList"); expect(sendExtensionMessageSpy).not.toHaveBeenCalledWith("focusAutofillOverlayMenuList");
jest.advanceTimersByTime(150); jest.advanceTimersByTime(150);
expect(sendExtensionMessageSpy).toHaveBeenCalledWith("focusAutofillOverlayList"); expect(sendExtensionMessageSpy).toHaveBeenCalledWith("focusAutofillOverlayMenuList");
}); });
it("focuses the overlay list when the `ArrowDown` key is pressed", async () => { it("focuses the overlay list when the `ArrowDown` key is pressed", async () => {
@@ -390,7 +390,7 @@ describe("AutofillOverlayContentService", () => {
autofillFieldElement.dispatchEvent(new KeyboardEvent("keyup", { code: "ArrowDown" })); autofillFieldElement.dispatchEvent(new KeyboardEvent("keyup", { code: "ArrowDown" }));
await flushPromises(); await flushPromises();
expect(sendExtensionMessageSpy).toHaveBeenCalledWith("focusAutofillOverlayList"); expect(sendExtensionMessageSpy).toHaveBeenCalledWith("focusAutofillOverlayMenuList");
}); });
}); });

8
apps/browser/src/autofill/services/autofill-overlay-content.service.ts
View File

@@ -319,7 +319,7 @@ class AutofillOverlayContentService implements AutofillOverlayContentServiceInte
event.preventDefault(); event.preventDefault();
event.stopPropagation(); event.stopPropagation();
void this.focusOverlayList(); void this.focusOverlayMenuList();
} }
}; };
@@ -328,15 +328,15 @@ class AutofillOverlayContentService implements AutofillOverlayContentServiceInte
* the overlay will be opened and the list will be focused after a short delay. Ensures * the overlay will be opened and the list will be focused after a short delay. Ensures
* that the overlay list is focused when the user presses the down arrow key. * that the overlay list is focused when the user presses the down arrow key.
*/ */
private async focusOverlayList() { private async focusOverlayMenuList() {
if (this.mostRecentlyFocusedField && !(await this.isInlineMenuListVisible())) { if (this.mostRecentlyFocusedField && !(await this.isInlineMenuListVisible())) {
await this.updateMostRecentlyFocusedField(this.mostRecentlyFocusedField); await this.updateMostRecentlyFocusedField(this.mostRecentlyFocusedField);
this.openAutofillOverlayMenu({ isOpeningFullOverlay: true }); this.openAutofillOverlayMenu({ isOpeningFullOverlay: true });
setTimeout(() => this.sendExtensionMessage("focusAutofillOverlayList"), 125); setTimeout(() => this.sendExtensionMessage("focusAutofillOverlayMenuList"), 125);
return; return;
} }
void this.sendExtensionMessage("focusAutofillOverlayList"); void this.sendExtensionMessage("focusAutofillOverlayMenuList");
} }
/** /**

13
apps/browser/src/autofill/services/autofill.service.spec.ts
View File

@@ -1,13 +1,14 @@
import { mock, mockReset } from "jest-mock-extended"; import { mock, MockProxy, mockReset } from "jest-mock-extended";
import { of } from "rxjs"; import { BehaviorSubject, of } from "rxjs";
import { UserVerificationService } from "@bitwarden/common/auth/services/user-verification/user-verification.service"; import { UserVerificationService } from "@bitwarden/common/auth/services/user-verification/user-verification.service";
import { AutofillOverlayVisibility } from "@bitwarden/common/autofill/constants"; import { AutofillOverlayVisibility } from "@bitwarden/common/autofill/constants";
import { AutofillSettingsService } from "@bitwarden/common/autofill/services/autofill-settings.service"; import { AutofillSettingsServiceAbstraction } from "@bitwarden/common/autofill/services/autofill-settings.service";
import { import {
DefaultDomainSettingsService, DefaultDomainSettingsService,
DomainSettingsService, DomainSettingsService,
} from "@bitwarden/common/autofill/services/domain-settings.service"; } from "@bitwarden/common/autofill/services/domain-settings.service";
import { InlineMenuVisibilitySetting } from "@bitwarden/common/autofill/types";
import { BillingAccountProfileStateService } from "@bitwarden/common/billing/abstractions/account/billing-account-profile-state.service"; import { BillingAccountProfileStateService } from "@bitwarden/common/billing/abstractions/account/billing-account-profile-state.service";
import { EventType } from "@bitwarden/common/enums"; import { EventType } from "@bitwarden/common/enums";
import { UriMatchStrategy } from "@bitwarden/common/models/domain/domain-service"; import { UriMatchStrategy } from "@bitwarden/common/models/domain/domain-service";
@@ -62,7 +63,7 @@ const mockEquivalentDomains = [
describe("AutofillService", () => { describe("AutofillService", () => {
let autofillService: AutofillService; let autofillService: AutofillService;
const cipherService = mock<CipherService>(); const cipherService = mock<CipherService>();
const autofillSettingsService = mock<AutofillSettingsService>(); let autofillSettingsService: MockProxy<AutofillSettingsServiceAbstraction>;
const mockUserId = Utils.newGuid() as UserId; const mockUserId = Utils.newGuid() as UserId;
const accountService: FakeAccountService = mockAccountServiceWith(mockUserId); const accountService: FakeAccountService = mockAccountServiceWith(mockUserId);
const fakeStateProvider: FakeStateProvider = new FakeStateProvider(accountService); const fakeStateProvider: FakeStateProvider = new FakeStateProvider(accountService);
@@ -72,8 +73,12 @@ describe("AutofillService", () => {
const logService = mock<LogService>(); const logService = mock<LogService>();
const userVerificationService = mock<UserVerificationService>(); const userVerificationService = mock<UserVerificationService>();
const billingAccountProfileStateService = mock<BillingAccountProfileStateService>(); const billingAccountProfileStateService = mock<BillingAccountProfileStateService>();
let inlineMenuVisibilitySettingMock$!: BehaviorSubject<InlineMenuVisibilitySetting>;
beforeEach(() => { beforeEach(() => {
inlineMenuVisibilitySettingMock$ = new BehaviorSubject(AutofillOverlayVisibility.OnFieldFocus);
autofillSettingsService = mock<AutofillSettingsServiceAbstraction>();
autofillSettingsService.inlineMenuVisibility$ = inlineMenuVisibilitySettingMock$;
autofillService = new AutofillService( autofillService = new AutofillService(
cipherService, cipherService,
autofillSettingsService, autofillSettingsService,