Merge branch '@invertase/v7-development' of https://github.com/firebase/firebaseui-web into @invertase/bb-9

Author: Ehesp

packages/angular/src/lib/auth/forms/email-link-auth-form.spec.ts

@@ -22,6 +22,22 @@ import { FormInputComponent, FormSubmitComponent, FormErrorMessageComponent } fr
 import { PoliciesComponent } from "../../components/policies";
 import { UserCredential } from "@angular/fire/auth";
 
+// Mock the @firebase-ui/core module but preserve Angular providers
+jest.mock("@firebase-ui/core", () => {
+  const originalModule = jest.requireActual("@firebase-ui/core");
+  return {
+    ...originalModule,
+    sendSignInLinkToEmail: jest.fn(),
+    completeEmailLinkSignIn: jest.fn(),
+    FirebaseUIError: class FirebaseUIError extends Error {
+      constructor(message: string) {
+        super(message);
+        this.name = "FirebaseUIError";
+      }
+    },
+  };
+});
+
 describe("<fui-email-link-auth-form />", () => {
   let mockSendSignInLinkToEmail: any;
   let mockCompleteEmailLinkSignIn: any;
@@ -34,6 +50,7 @@ describe("<fui-email-link-auth-form />", () => {
     mockFirebaseUIError = FirebaseUIError;
 
     mockCompleteEmailLinkSignIn.mockResolvedValue(null);
+    mockSendSignInLinkToEmail.mockResolvedValue(undefined);
   });
 
   afterEach(() => {
@@ -115,6 +132,9 @@ describe("<fui-email-link-auth-form />", () => {
   });
 
   it("should prevent default and stop propagation on form submit", async () => {
+    // Mock the function to resolve immediately for this test
+    mockSendSignInLinkToEmail.mockResolvedValue(undefined);
+
     const { fixture } = await render(EmailLinkAuthFormComponent, {
       imports: [
         CommonModule,
@@ -140,11 +160,12 @@ describe("<fui-email-link-auth-form />", () => {
       stopPropagation: { value: stopPropagationSpy },
     });
 
+    // Wait for the async form submission to complete
     await component.handleSubmit(submitEvent);
-    await fixture.whenStable();
-
-    expect(preventDefaultSpy).toHaveBeenCalled();
-    expect(stopPropagationSpy).toHaveBeenCalled();
+    await waitFor(() => {
+      expect(preventDefaultSpy).toHaveBeenCalled();
+      expect(stopPropagationSpy).toHaveBeenCalled();
+    });
   });
 
   it("should handle form submission with valid email", async () => {
@@ -229,11 +250,10 @@ describe("<fui-email-link-auth-form />", () => {
     fixture.detectChanges();
 
     await component.form.handleSubmit();
-    await fixture.whenStable();
-    fixture.detectChanges();
-
-    expect(component.emailSentState()).toBe(false);
-    expect(screen.getByText(errorMessage)).toBeInTheDocument();
+    await waitFor(() => {
+      expect(component.emailSentState()).toBe(false);
+      expect(screen.getByText(errorMessage)).toBeInTheDocument();
+    });
   });
 
   it("should handle unknown errors and display generic error message", async () => {
@@ -258,11 +278,10 @@ describe("<fui-email-link-auth-form />", () => {
     fixture.detectChanges();
 
     await component.form.handleSubmit();
-    await fixture.whenStable();
-    fixture.detectChanges();
-
-    expect(component.emailSentState()).toBe(false);
-    expect(screen.getByText("An unknown error occurred")).toBeInTheDocument();
+    await waitFor(() => {
+      expect(component.emailSentState()).toBe(false);
+      expect(screen.getByText("An unknown error occurred")).toBeInTheDocument();
+    });
   });
 
   it("should use the same validation logic as the real createEmailLinkAuthFormSchema", async () => {

packages/angular/src/lib/auth/forms/forgot-password-auth-form.spec.ts

@@ -26,6 +26,21 @@ import {
 } from "../../components/form";
 import { PoliciesComponent } from "../../components/policies";
 
+// Mock the @firebase-ui/core module but preserve Angular providers
+jest.mock("@firebase-ui/core", () => {
+  const originalModule = jest.requireActual("@firebase-ui/core");
+  return {
+    ...originalModule,
+    sendPasswordResetEmail: jest.fn(),
+    FirebaseUIError: class FirebaseUIError extends Error {
+      constructor(message: string) {
+        super(message);
+        this.name = "FirebaseUIError";
+      }
+    },
+  };
+});
+
 describe("<fui-forgot-password-auth-form />", () => {
   let mockSendPasswordResetEmail: any;
   let mockFirebaseUIError: any;
@@ -187,10 +202,10 @@ describe("<fui-forgot-password-auth-form />", () => {
     });
 
     await component.handleSubmit(submitEvent);
-    await fixture.whenStable();
-
-    expect(preventDefaultSpy).toHaveBeenCalled();
-    expect(stopPropagationSpy).toHaveBeenCalled();
+    await waitFor(() => {
+      expect(preventDefaultSpy).toHaveBeenCalled();
+      expect(stopPropagationSpy).toHaveBeenCalled();
+    });
   });
 
   it("should handle form submission with valid email", async () => {
@@ -278,11 +293,10 @@ describe("<fui-forgot-password-auth-form />", () => {
     fixture.detectChanges();
 
     await component.form.handleSubmit();
-    await fixture.whenStable();
-    fixture.detectChanges();
-
-    expect(component.emailSent()).toBe(false);
-    expect(component.form.state.errors.length).toBeGreaterThan(0);
+    await waitFor(() => {
+      expect(component.emailSent()).toBe(false);
+      expect(component.form.state.errors.length).toBeGreaterThan(0);
+    });
   });
 
   it("should handle unknown errors and display generic error message", async () => {
@@ -308,11 +322,10 @@ describe("<fui-forgot-password-auth-form />", () => {
     fixture.detectChanges();
 
     await component.form.handleSubmit();
-    await fixture.whenStable();
-    fixture.detectChanges();
-
-    expect(component.emailSent()).toBe(false);
-    expect(component.form.state.errors.length).toBeGreaterThan(0);
+    await waitFor(() => {
+      expect(component.emailSent()).toBe(false);
+      expect(component.form.state.errors.length).toBeGreaterThan(0);
+    });
   });
 
   it("should use the same validation logic as the real createForgotPasswordAuthFormSchema", async () => {

packages/angular/src/lib/auth/forms/mfa/sms-multi-factor-enrollment-form.spec.ts

@@ -14,14 +14,42 @@
  * limitations under the License.
  */
 
-import { render, screen } from "@testing-library/angular";
+import { render, screen, waitFor } from "@testing-library/angular";
 import { CommonModule } from "@angular/common";
 import { TanStackField, TanStackAppField } from "@tanstack/angular-form";
 import { SmsMultiFactorEnrollmentFormComponent } from "./sms-multi-factor-enrollment-form";
 import { FormInputComponent, FormSubmitComponent, FormErrorMessageComponent } from "../../../components/form";
 import { CountrySelectorComponent } from "../../../components/country-selector";
 import { PoliciesComponent } from "../../../components/policies";
 
+jest.mock("@firebase-ui/core", () => {
+  const originalModule = jest.requireActual("@firebase-ui/core");
+  return {
+    ...originalModule,
+    verifyPhoneNumber: jest.fn(),
+    enrollWithMultiFactorAssertion: jest.fn(),
+    formatPhoneNumber: jest.fn(),
+    FirebaseUIError: class FirebaseUIError extends Error {
+      constructor(message: string) {
+        super(message);
+        this.name = "FirebaseUIError";
+      }
+    },
+  };
+});
+
+jest.mock("firebase/auth", () => {
+  const originalModule = jest.requireActual("firebase/auth");
+  return {
+    ...originalModule,
+    multiFactor: jest.fn(() => ({
+      enroll: jest.fn(),
+      unenroll: jest.fn(),
+      getEnrolledFactors: jest.fn(),
+    })),
+  };
+});
+
 describe("<fui-sms-multi-factor-enrollment-form />", () => {
   let mockVerifyPhoneNumber: any;
   let mockEnrollWithMultiFactorAssertion: any;
@@ -33,18 +61,21 @@ describe("<fui-sms-multi-factor-enrollment-form />", () => {
 
   beforeEach(() => {
     const {
-      verifyPhoneNumber,
-      enrollWithMultiFactorAssertion,
-      formatPhoneNumber,
-      FirebaseUIError,
       injectTranslation,
       injectUI,
       injectMultiFactorPhoneAuthNumberFormSchema,
       injectMultiFactorPhoneAuthVerifyFormSchema,
       injectDefaultCountry,
       injectRecaptchaVerifier,
     } = require("../../../tests/test-helpers");
-    const { PhoneAuthProvider, PhoneMultiFactorGenerator, multiFactor } = require("../../../tests/test-helpers");
+    const { PhoneAuthProvider, PhoneMultiFactorGenerator } = require("../../../tests/test-helpers");
+    const {
+      verifyPhoneNumber,
+      enrollWithMultiFactorAssertion,
+      formatPhoneNumber,
+      FirebaseUIError,
+    } = require("@firebase-ui/core");
+    const { multiFactor } = require("firebase/auth");
 
     mockVerifyPhoneNumber = verifyPhoneNumber;
     mockEnrollWithMultiFactorAssertion = enrollWithMultiFactorAssertion;
@@ -227,9 +258,9 @@ describe("<fui-sms-multi-factor-enrollment-form />", () => {
     fixture.detectChanges();
 
     await component.verificationForm.handleSubmit();
-    await fixture.whenStable();
-
-    expect(enrollmentSpy).toHaveBeenCalled();
+    await waitFor(() => {
+      expect(enrollmentSpy).toHaveBeenCalled();
+    });
   });
 
   it("should handle FirebaseUIError in phone verification", async () => {
@@ -291,10 +322,9 @@ describe("<fui-sms-multi-factor-enrollment-form />", () => {
     fixture.detectChanges();
 
     await component.verificationForm.handleSubmit();
-    await fixture.whenStable();
-    fixture.detectChanges();
-
-    expect(screen.getByText(errorMessage)).toBeInTheDocument();
+    await waitFor(() => {
+      expect(screen.getByText(errorMessage)).toBeInTheDocument();
+    });
   });
 
   it("should format phone number correctly", async () => {

packages/angular/src/lib/auth/forms/mfa/totp-multi-factor-assertion-form.spec.ts

@@ -13,11 +13,25 @@
  * limitations under the License.
  */
 
-import { render, screen } from "@testing-library/angular";
+import { render, screen, waitFor } from "@testing-library/angular";
 
 import { TotpMultiFactorAssertionFormComponent } from "./totp-multi-factor-assertion-form";
 import { signInWithMultiFactorAssertion, FirebaseUIError } from "../../../tests/test-helpers";
 
+jest.mock("@firebase-ui/core", () => {
+  const originalModule = jest.requireActual("@firebase-ui/core");
+  return {
+    ...originalModule,
+    signInWithMultiFactorAssertion: jest.fn(),
+    FirebaseUIError: class FirebaseUIError extends Error {
+      constructor(message: string) {
+        super(message);
+        this.name = "FirebaseUIError";
+      }
+    },
+  };
+});
+
 describe("<fui-totp-multi-factor-assertion-form>", () => {
   let TotpMultiFactorGenerator: any;
 
@@ -28,6 +42,8 @@ describe("<fui-totp-multi-factor-assertion-form>", () => {
       injectMultiFactorTotpAuthVerifyFormSchema,
     } = require("../../../tests/test-helpers");
 
+    const { signInWithMultiFactorAssertion } = require("@firebase-ui/core");
+
     injectTranslation.mockImplementation((category: string, key: string) => {
       const mockTranslations: Record<string, Record<string, string>> = {
         labels: {
@@ -124,9 +140,9 @@ describe("<fui-totp-multi-factor-assertion-form>", () => {
     fixture.detectChanges();
 
     await component.form.handleSubmit();
-    await fixture.whenStable();
-
-    expect(onSuccessSpy).toHaveBeenCalled();
+    await waitFor(() => {
+      expect(onSuccessSpy).toHaveBeenCalled();
+    });
   });
 
   it("calls TotpMultiFactorGenerator.assertionForSignIn with correct parameters", async () => {
@@ -151,9 +167,9 @@ describe("<fui-totp-multi-factor-assertion-form>", () => {
     fixture.detectChanges();
 
     await component.form.handleSubmit();
-    await fixture.whenStable();
-
-    expect(assertionForSignInSpy).toHaveBeenCalledWith("test-uid", "123456");
+    await waitFor(() => {
+      expect(assertionForSignInSpy).toHaveBeenCalledWith("test-uid", "123456");
+    });
   });
 
   it("calls signInWithMultiFactorAssertion with the assertion", async () => {
@@ -179,12 +195,12 @@ describe("<fui-totp-multi-factor-assertion-form>", () => {
     fixture.detectChanges();
 
     await component.form.handleSubmit();
-    await fixture.whenStable();
-
-    expect(signInWithMultiFactorAssertion).toHaveBeenCalledWith(
-      expect.any(Object), // UI instance
-      mockAssertion
-    );
+    await waitFor(() => {
+      expect(signInWithMultiFactorAssertion).toHaveBeenCalledWith(
+        expect.any(Object), // UI instance
+        mockAssertion
+      );
+    });
   });
 
   it("handles FirebaseUIError correctly", async () => {
@@ -210,10 +226,9 @@ describe("<fui-totp-multi-factor-assertion-form>", () => {
     fixture.detectChanges();
 
     await component.form.handleSubmit();
-    await fixture.whenStable();
-    fixture.detectChanges();
-
-    expect(screen.getByText(errorMessage)).toBeInTheDocument();
+    await waitFor(() => {
+      expect(screen.getByText(errorMessage)).toBeInTheDocument();
+    });
   });
 
   it("handles unknown errors correctly", async () => {
@@ -238,9 +253,8 @@ describe("<fui-totp-multi-factor-assertion-form>", () => {
     fixture.detectChanges();
 
     await component.form.handleSubmit();
-    await fixture.whenStable();
-    fixture.detectChanges();
-
-    expect(screen.getByText("An unknown error occurred")).toBeInTheDocument();
+    await waitFor(() => {
+      expect(screen.getByText("An unknown error occurred")).toBeInTheDocument();
+    });
   });
 });