test(react): ForgotPasswordAuthForm tests

Author: Ehesp

packages/react/src/auth/forms/forgot-password-auth-form.test.tsx

@@ -14,218 +14,198 @@
  * limitations under the License.
  */
 
-import { describe, it, expect, vi, beforeEach, Mock } from "vitest";
-import { render, screen, fireEvent } from "@testing-library/react";
-import { ForgotPasswordAuthForm } from "./forgot-password-auth-form";
+import { describe, it, expect, vi, beforeEach, afterEach } from "vitest";
+import { render, screen, fireEvent, renderHook, cleanup } from "@testing-library/react";
+import { ForgotPasswordAuthForm, useForgotPasswordAuthForm, useForgotPasswordAuthFormAction } from "./forgot-password-auth-form";
 import { act } from "react";
+import { sendPasswordResetEmail } from "@firebase-ui/core";
+import { createFirebaseUIProvider, createMockUI } from "~/tests/utils";
+import { registerLocale } from "@firebase-ui/translations";
+import { FirebaseUIProvider } from "~/context";
 
-// Mock the dependencies
 vi.mock("@firebase-ui/core", async (importOriginal) => {
   const mod = await importOriginal<typeof import("@firebase-ui/core")>();
   return {
     ...mod,
-    sendPasswordResetEmail: vi.fn().mockImplementation(() => {
-      return Promise.resolve();
-    }),
-    // FirebaseUIError: class FirebaseUIError extends Error {
-    //   code: string;
-    //   constructor(error: any) {
-    //     super(error.message || "Unknown error");
-    //     this.name = "FirebaseUIError";
-    //     this.code = error.code || "unknown-error";
-    //   }
-    // },
-    // createForgotPasswordFormSchema: vi.fn().mockReturnValue({
-    //   email: { required: "Email is required" },
-    // }),
+    sendPasswordResetEmail: vi.fn(),
   };
 });
 
-// Mock @tanstack/react-form library
-vi.mock("@tanstack/react-form", () => {
-  const handleSubmitMock = vi.fn().mockImplementation((callback) => {
-    // Store the callback to call it directly in tests
-    (global as any).formSubmitCallback = callback;
-    return Promise.resolve();
+describe("useForgotPasswordAuthFormAction", () => {
+  beforeEach(() => {
+    vi.clearAllMocks();
   });
 
-  return {
-    useForm: vi.fn().mockImplementation(({ onSubmit }) => {
-      // Save the onSubmit function to call it directly in tests
-      (global as any).formOnSubmit = onSubmit;
-
-      return {
-        handleSubmit: handleSubmitMock,
-        Field: ({ children, name }: any) => {
-          const field = {
-            name,
-            state: {
-              value: name === "email" ? "[email protected]" : "",
-              meta: {
-                isTouched: false,
-                errors: [],
-              },
-            },
-            handleBlur: vi.fn(),
-            handleChange: vi.fn(),
-          };
-          return children(field);
-        },
-      };
-    }),
-  };
-});
+  it("should return a callback which accept an email", async () => {
+    const sendPasswordResetEmailMock = vi.mocked(sendPasswordResetEmail);
+    const mockUI = createMockUI();
 
-vi.mock("../../../../src/hooks", () => ({
-  useAuth: vi.fn().mockReturnValue({}),
-  useUI: vi.fn().mockReturnValue({
-    locale: "en-US",
-    translations: {
-      "en-US": {
-        labels: {
-          backToSignIn: "back button",
+    const { result } = renderHook(() => useForgotPasswordAuthFormAction(), {
+      wrapper: ({ children }) => createFirebaseUIProvider({ children, ui: mockUI }),
+    });
+
+    await act(async () => {
+      await result.current({ email: "[email protected]" });
+    });
+
+    expect(sendPasswordResetEmailMock).toHaveBeenCalledWith(expect.any(Object), "[email protected]");
+  });
+
+  it("should throw an unknown error when its not a FirebaseUIError", async () => {
+    const sendPasswordResetEmailMock = vi
+      .mocked(sendPasswordResetEmail)
+      .mockRejectedValue(new Error("Unknown error"));
+
+    const mockUI = createMockUI({
+      locale: registerLocale("es-ES", {
+        errors: {
+          unknownError: "unknownError",
         },
-      },
-    },
-  }),
-}));
-
-// Mock the components
-vi.mock("../../../../src/components/field-info", () => ({
-  FieldInfo: vi
-    .fn()
-    .mockImplementation(({ field }) => (
-      <div data-testid="field-info">
-        {field.state.meta.errors.length > 0 && <span>{field.state.meta.errors[0]}</span>}
-      </div>
-    )),
-}));
-
-vi.mock("../../../../src/components/policies", () => ({
-  Policies: vi.fn().mockReturnValue(<div data-testid="policies" />),
-}));
-
-vi.mock("../../../../src/components/button", () => ({
-  Button: vi.fn().mockImplementation(({ children, type, onClick }) => (
-    <button type={type} onClick={onClick} data-testid="submit-button">
-      {children}
-    </button>
-  )),
-}));
-
-// Import the actual functions after mocking
-import { sendPasswordResetEmail } from "@firebase-ui/core";
+      }),
+    });
+
+    const { result } = renderHook(() => useForgotPasswordAuthFormAction(), {
+      wrapper: ({ children }) => createFirebaseUIProvider({ children, ui: mockUI }),
+    });
+
+    await expect(async () => {
+      await act(async () => {
+        await result.current({ email: "[email protected]" });
+      });
+    }).rejects.toThrow("unknownError");
+
+    expect(sendPasswordResetEmailMock).toHaveBeenCalledWith(mockUI.get(), "[email protected]");
+  });
+});
 
-describe("ForgotPasswordForm", () => {
+describe("useForgotPasswordAuthForm", () => {
   beforeEach(() => {
     vi.clearAllMocks();
   });
 
-  it("renders the form correctly", () => {
-    render(<ForgotPasswordAuthForm />);
-
-    expect(screen.getByRole("textbox", { name: /email address/i })).toBeInTheDocument();
-    expect(screen.getByTestId("submit-button")).toBeInTheDocument();
+  afterEach(() => {
+    cleanup();
   });
 
-  it("submits the form when the button is clicked", async () => {
-    render(<ForgotPasswordAuthForm />);
+  it("should allow the form to be submitted", async () => {
+    const mockUI = createMockUI();
+    const sendPasswordResetEmailMock = vi.mocked(sendPasswordResetEmail);
 
-    // Get the submit button
-    const submitButton = screen.getByTestId("submit-button");
+    const { result } = renderHook(() => useForgotPasswordAuthForm(), {
+      wrapper: ({ children }) => createFirebaseUIProvider({ children, ui: mockUI }),
+    });
+
+    act(() => {
+      result.current.setFieldValue("email", "[email protected]");
+    });
 
-    // Trigger form submission
     await act(async () => {
-      fireEvent.click(submitButton);
-
-      // Directly call the onSubmit function with form values
-      if ((global as any).formOnSubmit) {
-        await (global as any).formOnSubmit({
-          value: {
-            email: "[email protected]",
-          },
-        });
-      }
+      await result.current.handleSubmit();
     });
 
-    // Check that the password reset function was called
-    expect(sendPasswordResetEmail).toHaveBeenCalledWith(expect.anything(), "[email protected]");
+    expect(sendPasswordResetEmailMock).toHaveBeenCalledWith(mockUI.get(), "[email protected]");
   });
 
-  it("displays error message when password reset fails", async () => {
-    // Mock the reset function to reject with an error
-    const mockError = new Error("Invalid email");
-    (sendPasswordResetEmail as Mock).mockRejectedValueOnce(mockError);
+  it("should not allow the form to be submitted if the form is invalid", async () => {
+    const mockUI = createMockUI();
+    const sendPasswordResetEmailMock = vi.mocked(sendPasswordResetEmail);
 
-    render(<ForgotPasswordAuthForm />);
+    const { result } = renderHook(() => useForgotPasswordAuthForm(), {
+      wrapper: ({ children }) => createFirebaseUIProvider({ children, ui: mockUI }),
+    });
 
-    // Get the submit button
-    const submitButton = screen.getByTestId("submit-button");
+    act(() => {
+      result.current.setFieldValue("email", "123");
+    });
 
-    // Trigger form submission
     await act(async () => {
-      fireEvent.click(submitButton);
-
-      // Directly call the onSubmit function with form values
-      if ((global as any).formOnSubmit) {
-        await (global as any)
-          .formOnSubmit({
-            value: {
-              email: "[email protected]",
-            },
-          })
-          .catch(() => {
-            // Catch the error here to prevent test from failing
-          });
-      }
+      await result.current.handleSubmit();
     });
 
-    // Check that the password reset function was called
-    expect(sendPasswordResetEmail).toHaveBeenCalled();
+    expect(result.current.getFieldMeta("email")!.errors[0].length).toBeGreaterThan(0);
+    expect(sendPasswordResetEmailMock).not.toHaveBeenCalled();
   });
+});
 
-  it("validates on blur for the first time", async () => {
-    render(<ForgotPasswordAuthForm />);
-
-    const emailInput = screen.getByRole("textbox", { name: /email address/i });
+describe("<ForgotPasswordAuthForm />", () => {
+  beforeEach(() => {
+    vi.clearAllMocks();
+  });
 
-    await act(async () => {
-      fireEvent.blur(emailInput);
+  it("should render the form correctly", () => {
+    const mockUI = createMockUI({
+      locale: registerLocale("test", {
+        labels: {
+          resetPassword: "resetPassword",
+        },
+      }),
     });
 
-    // Check that handleBlur was called
-    expect((global as any).formOnSubmit).toBeDefined();
-  });
+    const { container } = render(
+      <FirebaseUIProvider ui={mockUI}>
+        <ForgotPasswordAuthForm />
+      </FirebaseUIProvider>
+    );
 
-  it("validates on input after first blur", async () => {
-    render(<ForgotPasswordAuthForm />);
+    // There should be only one form
+    const form = container.querySelectorAll("form.fui-form");
+    expect(form.length).toBe(1);
 
-    const emailInput = screen.getByRole("textbox", { name: /email address/i });
+    // Make sure we have an email input
+    expect(screen.getByRole("textbox", { name: /email/i })).toBeInTheDocument();
 
-    // First validation on blur
-    await act(async () => {
-      fireEvent.blur(emailInput);
-    });
+    // Ensure the "Reset Password" button is present and is a submit button
+    const resetPasswordButton = screen.getByRole("button", { name: "resetPassword" });
+    expect(resetPasswordButton).toBeInTheDocument();
+    expect(resetPasswordButton).toHaveAttribute("type", "submit");
+  });
 
-    // Then validation should happen on input
-    await act(async () => {
-      fireEvent.input(emailInput, { target: { value: "[email protected]" } });
+  it("should render the back to sign in button callback when onBackToSignInClick is provided", () => {
+    const mockUI = createMockUI({
+      locale: registerLocale("test", {
+        labels: {
+          backToSignIn: "backToSignIn",
+        },
+      }),
     });
 
-    // Check that handleBlur and form.update were called
-    expect((global as any).formOnSubmit).toBeDefined();
-  });
-
-  // TODO: Fix this test
-  it.skip("displays back to sign in button when provided", () => {
     const onBackToSignInClickMock = vi.fn();
-    render(<ForgotPasswordAuthForm onBackToSignInClick={onBackToSignInClickMock} />);
 
-    const backButton = screen.getByText(/back button/i);
-    expect(backButton).toHaveClass("fui-form__action");
-    expect(backButton).toBeInTheDocument();
+    render(
+      <FirebaseUIProvider ui={mockUI}>
+        <ForgotPasswordAuthForm onBackToSignInClick={onBackToSignInClickMock} />
+      </FirebaseUIProvider>
+    );
 
-    fireEvent.click(backButton);
+    const backToSignInButton = screen.getByRole("button", { name: "backToSignIn" });
+    expect(backToSignInButton).toBeInTheDocument();
+    expect(backToSignInButton).toHaveTextContent("backToSignIn");
+
+    // Make sure it's a button so it doesn't submit the form
+    expect(backToSignInButton).toHaveAttribute("type", "button");
+
+    fireEvent.click(backToSignInButton);
     expect(onBackToSignInClickMock).toHaveBeenCalled();
   });
+
+  it('should trigger validation errors when the form is blurred', () => {
+    const mockUI = createMockUI();
+
+    const { container } = render(
+      <FirebaseUIProvider ui={mockUI}>
+        <ForgotPasswordAuthForm />
+      </FirebaseUIProvider>
+    );
+
+    const form = container.querySelector("form.fui-form");
+    expect(form).toBeInTheDocument();
+
+    const input = screen.getByRole("textbox", { name: /email/i });
+
+    act(() => {
+      fireEvent.blur(input);
+    });
+
+    expect(screen.getByText("Please enter a valid email address")).toBeInTheDocument();
+  });
 });