test: Add unit tests for EmailLinkAuthScreen and OAuthScreen

Author: exaby73

packages/firebaseui-react/tests/unit/auth/screens/email-link-auth-screen.test.tsx

@@ -0,0 +1,77 @@
+import { describe, it, expect, vi, beforeEach, afterEach } from "vitest";
+import { render } from "@testing-library/react";
+import { EmailLinkAuthScreen } from "~/auth/screens/email-link-auth-screen";
+import * as hooks from "~/hooks";
+
+// Mock the hooks
+vi.mock("~/hooks", () => ({
+  useConfig: vi.fn(),
+  useTranslations: vi.fn(),
+}));
+
+// Mock dependencies
+vi.mock("@firebase-ui/core", () => ({
+  getTranslation: vi.fn((category, key) => {
+    if (category === "labels" && key === "signIn") return "Sign In";
+    if (category === "prompts" && key === "signInToAccount")
+      return "Sign in to your account";
+    if (category === "messages" && key === "dividerOr") return "or";
+    return key;
+  }),
+}));
+
+// Mock the EmailLinkForm component
+vi.mock("~/auth/forms/email-link-form", () => ({
+  EmailLinkForm: () => <div data-testid="email-link-form">Email Link Form</div>,
+}));
+
+describe("EmailLinkAuthScreen", () => {
+  beforeEach(() => {
+    // Setup default mock values
+    vi.mocked(hooks.useConfig).mockReturnValue({
+      language: "en",
+    } as any);
+
+    vi.mocked(hooks.useTranslations).mockReturnValue({} as any);
+  });
+
+  afterEach(() => {
+    vi.clearAllMocks();
+  });
+
+  it("renders with correct title and subtitle", () => {
+    const { getByText } = render(<EmailLinkAuthScreen />);
+
+    expect(getByText("Sign In")).toBeInTheDocument();
+    expect(getByText("Sign in to your account")).toBeInTheDocument();
+  });
+
+  it("calls useConfig to get the language", () => {
+    render(<EmailLinkAuthScreen />);
+
+    expect(hooks.useConfig).toHaveBeenCalled();
+  });
+
+  it("includes the EmailLinkForm component", () => {
+    const { getByTestId } = render(<EmailLinkAuthScreen />);
+
+    expect(getByTestId("email-link-form")).toBeInTheDocument();
+  });
+
+  it("does not render divider and children when no children are provided", () => {
+    const { queryByText } = render(<EmailLinkAuthScreen />);
+
+    expect(queryByText("or")).not.toBeInTheDocument();
+  });
+
+  it("renders divider and children when children are provided", () => {
+    const { getByText } = render(
+      <EmailLinkAuthScreen>
+        <div>Test Child</div>
+      </EmailLinkAuthScreen>
+    );
+
+    expect(getByText("or")).toBeInTheDocument();
+    expect(getByText("Test Child")).toBeInTheDocument();
+  });
+});

packages/firebaseui-react/tests/unit/auth/screens/oauth-screen.test.tsx

@@ -0,0 +1,71 @@
+import { describe, it, expect, vi } from "vitest";
+import { render } from "@testing-library/react";
+import { OAuthScreen } from "~/auth/screens/oauth-screen";
+
+// Mock hooks
+vi.mock("~/hooks", () => ({
+  useConfig: () => ({ language: "en" }),
+  useTranslations: () => ({}),
+}));
+
+// Mock getTranslation
+vi.mock("@firebase-ui/core", () => ({
+  getTranslation: vi.fn((category, key) => {
+    if (category === "labels" && key === "signIn") return "Sign In";
+    if (category === "prompts" && key === "signInToAccount")
+      return "Sign in to your account";
+    return key;
+  }),
+}));
+
+// Mock TermsAndPrivacy component
+vi.mock("../../../../src/components/terms-and-privacy", () => ({
+  TermsAndPrivacy: () => (
+    <div
+      className="text-text-muted text-xs text-start"
+      data-testid="terms-and-privacy"
+    >
+      Terms and Privacy
+    </div>
+  ),
+}));
+
+describe("OAuthScreen", () => {
+  it("renders with correct title and subtitle", () => {
+    const { getByText } = render(<OAuthScreen>OAuth Provider</OAuthScreen>);
+
+    expect(getByText("Sign In")).toBeInTheDocument();
+    expect(getByText("Sign in to your account")).toBeInTheDocument();
+  });
+
+  it("calls useConfig to get the language", () => {
+    render(<OAuthScreen>OAuth Provider</OAuthScreen>);
+
+    // This test implicitly tests that useConfig is called through the mock
+    // If it hadn't been called, the title and subtitle wouldn't render correctly
+  });
+
+  it("renders children", () => {
+    const { getByText } = render(<OAuthScreen>OAuth Provider</OAuthScreen>);
+
+    expect(getByText("OAuth Provider")).toBeInTheDocument();
+  });
+
+  it("renders multiple children when provided", () => {
+    const { getByText } = render(
+      <OAuthScreen>
+        <div>Provider 1</div>
+        <div>Provider 2</div>
+      </OAuthScreen>
+    );
+
+    expect(getByText("Provider 1")).toBeInTheDocument();
+    expect(getByText("Provider 2")).toBeInTheDocument();
+  });
+
+  it("includes the TermsAndPrivacy component", () => {
+    const { getByTestId } = render(<OAuthScreen>OAuth Provider</OAuthScreen>);
+
+    expect(getByTestId("terms-and-privacy")).toBeInTheDocument();
+  });
+});