test(react): SignInAuthScreen tests

Author: Ehesp

packages/react/src/auth/screens/sign-in-auth-screen.test.tsx

@@ -4,7 +4,6 @@
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.
  * You may obtain a copy of the License at
- *
  *     http://www.apache.org/licenses/LICENSE-2.0
  *
  * Unless required by applicable law or agreed to in writing, software
@@ -14,38 +13,21 @@
  * limitations under the License.
  */
 
-import { describe, it, expect, vi } from "vitest";
-import { render, fireEvent } from "@testing-library/react";
+import { describe, it, expect, vi, afterEach, beforeEach } from "vitest";
+import { render, screen, fireEvent, cleanup } from "@testing-library/react";
 import { SignInAuthScreen } from "~/auth/screens/sign-in-auth-screen";
+import { CreateFirebaseUIProvider, createMockUI } from "~/tests/utils";
+import { registerLocale } from "@firebase-ui/translations";
 
-// Mock the hooks
-vi.mock("~/hooks", () => ({
-  useUI: () => ({
-    locale: "en-US",
-    translations: {
-      "en-US": {
-        labels: {
-          signIn: "Sign in",
-          dividerOr: "or",
-        },
-        prompts: {
-          signInToAccount: "Sign in to your account",
-        },
-      },
-    },
-  }),
-}));
-
-// Mock the EmailPasswordForm component
-vi.mock("~/auth/forms/email-password-form", () => ({
-  EmailPasswordForm: ({
+vi.mock("~/auth/forms/sign-in-auth-form", () => ({
+  SignInAuthForm: ({
     onForgotPasswordClick,
     onRegisterClick,
   }: {
     onForgotPasswordClick?: () => void;
     onRegisterClick?: () => void;
   }) => (
-    <div data-testid="email-password-form">
+    <div data-testid="sign-in-auth-form">
       <button data-testid="forgot-password-button" onClick={onForgotPasswordClick}>
         Forgot Password
       </button>
@@ -56,60 +38,151 @@ vi.mock("~/auth/forms/email-password-form", () => ({
   ),
 }));
 
-describe("SignInAuthScreen", () => {
-  it("displays the correct title and subtitle", () => {
-    const { getByText } = render(<SignInAuthScreen />);
+vi.mock("~/components/divider", async (originalModule) => {
+  const module = await originalModule();
+  return {
+    ...(module as object),
+    Divider: ({ children }: { children: React.ReactNode }) => (
+      <div data-testid="divider">{children}</div>
+    ),
+  };
+});
+
+describe("<SignInAuthScreen />", () => {
+  beforeEach(() => {
+    vi.clearAllMocks();
+  });
 
-    expect(getByText("Sign in")).toBeInTheDocument();
-    expect(getByText("Sign in to your account")).toBeInTheDocument();
+  afterEach(() => {
+    cleanup();
   });
 
-  it("calls useConfig to retrieve the language", () => {
-    const { getByText } = render(<SignInAuthScreen />);
+  it("renders with correct title and subtitle", () => {
+    const ui = createMockUI({
+      locale: registerLocale("test", {
+        labels: {
+          signIn: "signIn",
+        },
+        prompts: {
+          signInToAccount: "signInToAccount",
+        },
+      }),
+    });
+
+    render(
+      <CreateFirebaseUIProvider ui={ui}>
+        <SignInAuthScreen />
+      </CreateFirebaseUIProvider>
+    );
+
+    const title = screen.getByText("signIn");
+    expect(title).toBeDefined();
+    expect(title.className).toContain("fui-card__title");
 
-    expect(getByText("Sign in")).toBeInTheDocument();
+    const subtitle = screen.getByText("signInToAccount");
+    expect(subtitle).toBeDefined();
+    expect(subtitle.className).toContain("fui-card__subtitle");
   });
 
-  it("includes the EmailPasswordForm component", () => {
-    const { getByTestId } = render(<SignInAuthScreen />);
+  it("renders the <SignInAuthForm /> component", () => {
+    const ui = createMockUI();
+
+    render(
+      <CreateFirebaseUIProvider ui={ui}>
+        <SignInAuthScreen />
+      </CreateFirebaseUIProvider>
+    );
 
-    expect(getByTestId("email-password-form")).toBeInTheDocument();
+    // Mocked so only has as test id
+    expect(screen.getByTestId("sign-in-auth-form")).toBeDefined();
   });
 
-  it("passes onForgotPasswordClick to EmailPasswordForm", () => {
+  it("passes onForgotPasswordClick to SignInAuthForm", () => {
     const mockOnForgotPasswordClick = vi.fn();
-    const { getByTestId } = render(<SignInAuthScreen onForgotPasswordClick={mockOnForgotPasswordClick} />);
+    const ui = createMockUI();
+
+    render(
+      <CreateFirebaseUIProvider ui={ui}>
+        <SignInAuthScreen onForgotPasswordClick={mockOnForgotPasswordClick} />
+      </CreateFirebaseUIProvider>
+    );
 
-    const forgotPasswordButton = getByTestId("forgot-password-button");
+    const forgotPasswordButton = screen.getByTestId("forgot-password-button");
     fireEvent.click(forgotPasswordButton);
 
     expect(mockOnForgotPasswordClick).toHaveBeenCalledTimes(1);
   });
 
-  it("passes onRegisterClick to EmailPasswordForm", () => {
+  it("passes onRegisterClick to SignInAuthForm", () => {
     const mockOnRegisterClick = vi.fn();
-    const { getByTestId } = render(<SignInAuthScreen onRegisterClick={mockOnRegisterClick} />);
+    const ui = createMockUI();
+
+    render(
+      <CreateFirebaseUIProvider ui={ui}>
+        <SignInAuthScreen onRegisterClick={mockOnRegisterClick} />
+      </CreateFirebaseUIProvider>
+    );
 
-    const registerButton = getByTestId("register-button");
+    const registerButton = screen.getByTestId("register-button");
     fireEvent.click(registerButton);
 
     expect(mockOnRegisterClick).toHaveBeenCalledTimes(1);
   });
 
-  it("renders children when provided", () => {
-    const { getByText, getByTestId } = render(
-      <SignInAuthScreen>
-        <button data-testid="test-button">Test Button</button>
-      </SignInAuthScreen>
+  it("renders a divider with children when present", () => {
+    const ui = createMockUI({
+      locale: registerLocale("test", {
+        messages: {
+          dividerOr: "dividerOr",
+        },
+      }),
+    });
+
+    render(
+      <CreateFirebaseUIProvider ui={ui}>
+        <SignInAuthScreen>
+          <div data-testid="test-child">Test Child</div>
+        </SignInAuthScreen>
+      </CreateFirebaseUIProvider>
+    );
+
+    expect(screen.getByTestId("divider")).toBeDefined();
+    expect(screen.getByText("dividerOr")).toBeDefined();
+    expect(screen.getByTestId("test-child")).toBeDefined();
+  });
+
+  it("does not render divider and children when no children are provided", () => {
+    const ui = createMockUI();
+
+    render(
+      <CreateFirebaseUIProvider ui={ui}>
+        <SignInAuthScreen />
+      </CreateFirebaseUIProvider>
     );
 
-    expect(getByTestId("test-button")).toBeInTheDocument();
-    expect(getByText("or")).toBeInTheDocument();
+    expect(screen.queryByTestId("divider")).toBeNull();
   });
 
-  it("does not render children or divider when not provided", () => {
-    const { queryByText } = render(<SignInAuthScreen />);
+  it("renders multiple children when provided", () => {
+    const ui = createMockUI({
+      locale: registerLocale("test", {
+        messages: {
+          dividerOr: "dividerOr",
+        },
+      }),
+    });
+
+    render(
+      <CreateFirebaseUIProvider ui={ui}>
+        <SignInAuthScreen>
+          <div data-testid="child-1">Child 1</div>
+          <div data-testid="child-2">Child 2</div>
+        </SignInAuthScreen>
+      </CreateFirebaseUIProvider>
+    );
 
-    expect(queryByText("or")).not.toBeInTheDocument();
+    expect(screen.getByTestId("divider")).toBeDefined();
+    expect(screen.getByTestId("child-1")).toBeDefined();
+    expect(screen.getByTestId("child-2")).toBeDefined();
   });
-});
+});