Browser - Add jest-preset-angular (#9412)

* add "jest-preset-angular/setup-jest" to browser app

* use flushPromises rather than await a dummy promise

* move the import of `page-script` into beforeAll rather than the describe scope

* invoke the sendMessage callback rather than relying on a promise comparison

apps/browser/src/autofill/content/autofill-init.spec.ts

@@ -144,7 +144,7 @@ describe("AutofillInit", () => {
         .mockResolvedValue(pageDetails);
 
       const response = await autofillInit["handleExtensionMessage"](message, sender, sendResponse);
-      await Promise.resolve(response);
+      await flushPromises();
 
       expect(response).toBe(true);
       expect(sendResponse).toHaveBeenCalledWith(pageDetails);

apps/browser/src/autofill/utils/index.spec.ts

@@ -37,14 +37,29 @@ describe("generateRandomCustomElementName", () => {
 });
 
 describe("sendExtensionMessage", () => {
-  it("sends a message to the extention", () => {
+  it("sends a message to the extension", async () => {
-    const extensionMessageResponse = sendExtensionMessage("updateAutofillOverlayHidden", {
+    const extensionMessagePromise = sendExtensionMessage("updateAutofillOverlayHidden", {
       display: "none",
     });
-    jest.spyOn(chrome.runtime, "sendMessage");
 
-    expect(chrome.runtime.sendMessage).toHaveBeenCalled();
+    // Jest doesn't give anyway to select the typed overload of "sendMessage",
-    expect(extensionMessageResponse).toEqual(Promise.resolve({}));
+    // a cast is needed to get the correct spy type.
+    const sendMessageSpy = jest.spyOn(chrome.runtime, "sendMessage") as unknown as jest.SpyInstance<
+      void,
+      [message: string, responseCallback: (response: string) => void],
+      unknown
+    >;
+
+    expect(sendMessageSpy).toHaveBeenCalled();
+
+    const [latestCall] = sendMessageSpy.mock.calls;
+    const responseCallback = latestCall[1];
+
+    responseCallback("sendMessageResponse");
+
+    const response = await extensionMessagePromise;
+
+    expect(response).toEqual("sendMessageResponse");
   });
 });
 

apps/browser/src/vault/fido2/content/page-script.webauthn-supported.spec.ts

@@ -53,7 +53,9 @@ describe("Fido2 page script with native WebAuthn support", () => {
   const mockCredentialAssertResult = createAssertCredentialResultMock();
   setupMockedWebAuthnSupport();
 
+  beforeAll(() => {
     require("./page-script");
+  });
 
   afterEach(() => {
     jest.resetModules();

apps/browser/test.setup.ts

@@ -1,3 +1,5 @@
+import "jest-preset-angular/setup-jest";
+
 // Add chrome storage api
 const QUOTA_BYTES = 10;
 const storage = {