wip: React tests

Author: exaby73

packages/firebaseui-react/tests/__mocks__/@firebase-ui/core.ts

@@ -0,0 +1,63 @@
+import { vi } from "vitest";
+
+// Define TranslationStrings type to match core package
+export type TranslationStrings = Record<string, string>;
+
+// Implement FirebaseUIError with the same interface as the real implementation
+export class FirebaseUIError extends Error {
+  code: string;
+  constructor(
+    error: any,
+    _translations?: Partial<Record<string, Partial<TranslationStrings>>>,
+    _language?: string
+  ) {
+    // Extract error code from the error object
+    const errorCode =
+      typeof error === "string" ? error : error?.code || "unknown";
+
+    // For simplicity in tests, we'll use a direct message if provided as a string
+    // or extract from translations if provided
+    let errorMessage = `Error: ${errorCode}`;
+
+    if (
+      typeof error === "string" &&
+      arguments.length > 1 &&
+      typeof arguments[1] === "string"
+    ) {
+      // Handle case where first arg is code and second is message (for test convenience)
+      errorMessage = arguments[1];
+    }
+
+    super(errorMessage);
+    this.name = "FirebaseUIError";
+    this.code = errorCode;
+  }
+}
+
+// Authentication functions
+export const fuiSignInWithEmailAndPassword = vi.fn();
+export const fuiSignInWithEmailLink = vi.fn();
+export const fuiSignInWithPhone = vi.fn();
+export const fuiSignInWithOAuth = vi.fn();
+export const fuiResetPassword = vi.fn();
+export const fuiCreateUserWithEmailAndPassword = vi.fn();
+
+// Country data for phone authentication
+export const countryData = [
+  { code: "US", name: "United States", dialCode: "+1", emoji: "🇺🇸" },
+  { code: "GB", name: "United Kingdom", dialCode: "+44", emoji: "🇬🇧" },
+  { code: "DE", name: "Germany", dialCode: "+49", emoji: "🇩🇪" },
+  { code: "FR", name: "France", dialCode: "+33", emoji: "🇫🇷" },
+  { code: "JP", name: "Japan", dialCode: "+81", emoji: "🇯🇵" },
+];
+
+// Translation helpers
+export const getTranslation = vi.fn((section, key) => `${section}.${key}`);
+export const populateTranslation = vi.fn((text, data) => {
+  if (!data) return text;
+  let result = text;
+  Object.entries(data).forEach(([key, value]) => {
+    result = result.replace(new RegExp(`\\{\\{${key}\\}\\}`, "g"), value);
+  });
+  return result;
+});

packages/firebaseui-react/tests/tsconfig.json

@@ -11,6 +11,18 @@
             "vitest/globals",
             "node",
             "@testing-library/jest-dom"
-        ]
+        ],
+        "baseUrl": "..",
+        "paths": {
+            "@firebase-ui/core": [
+                "../firebaseui-core/src/index.ts"
+            ],
+            "@firebase-ui/core/*": [
+                "../firebaseui-core/src/*"
+            ],
+            "~/*": [
+                "src/*"
+            ]
+        }
     }
 }

packages/firebaseui-react/tests/unit/auth/forms/email-link-form.test.tsx

@@ -0,0 +1,277 @@
+import { describe, it, expect, vi, beforeEach } from "vitest";
+import { render, screen, fireEvent, act } from "@testing-library/react";
+import { EmailLinkForm } from "../../../../src/auth/forms/email-link-form";
+
+// Mock Firebase UI Core
+vi.mock("@firebase-ui/core", () => {
+  const FirebaseUIError = vi.fn();
+  FirebaseUIError.prototype.message = "Test error message";
+
+  return {
+    FirebaseUIError: class FirebaseUIError {
+      message: string;
+      code?: string;
+
+      constructor({ code, message }: { code: string; message: string }) {
+        this.code = code;
+        this.message = message;
+      }
+    },
+    fuiCompleteEmailLinkSignIn: vi.fn(),
+    fuiSendSignInLinkToEmail: vi.fn(),
+    createEmailLinkFormSchema: () => ({
+      email: {
+        validate: (value: string) => {
+          if (!value) return "Email is required";
+          return undefined;
+        },
+      },
+    }),
+    getTranslation: (section: string, key: string) => {
+      const defaultTranslations: Record<string, Record<string, string>> = {
+        labels: {
+          emailAddress: "Email",
+          sendSignInLink: "sendSignInLink",
+        },
+        messages: {
+          signInLinkSent: "Sign-in link sent!",
+        },
+        errors: {
+          unknownError: "An unknown error occurred",
+        },
+      };
+
+      return defaultTranslations[section]?.[key] || `${section}.${key}`;
+    },
+  };
+});
+
+import {
+  FirebaseUIError,
+  fuiSendSignInLinkToEmail,
+  fuiCompleteEmailLinkSignIn,
+} from "@firebase-ui/core";
+
+// Mock hooks
+vi.mock("../../../../src/hooks", () => ({
+  useAuth: vi.fn(() => ({})),
+  useFirebaseUIAuth: vi.fn(() => ({})),
+  useFirebaseUIConfig: vi.fn(() => ({
+    config: {
+      signInOptions: ["email"],
+      callbacks: {
+        signInSuccessWithAuthResult: vi.fn(),
+      },
+    },
+  })),
+  useConfig: vi.fn(() => ({
+    language: "en",
+    signInOptions: ["email"],
+    callbacks: {
+      signInSuccessWithAuthResult: vi.fn(),
+    },
+    enableAutoUpgradeAnonymous: false,
+    enableHandleExistingCredential: false,
+  })),
+  useTranslations: vi.fn(() => ({
+    signInWithEmail: "Sign in with email",
+    emailLinkSignInMessage: "Check your email for sign-in link",
+  })),
+}));
+
+// Mock form
+vi.mock("@tanstack/react-form", () => ({
+  useForm: () => {
+    const formState = {
+      email: "[email protected]",
+    };
+
+    return {
+      Field: ({ name, children }: any) => {
+        // Create a mock field with the required methods and state management
+        const field = {
+          name,
+          handleBlur: vi.fn(),
+          handleChange: vi.fn((value: string) => {
+            formState[name as keyof typeof formState] = value;
+          }),
+          state: {
+            value: formState[name as keyof typeof formState] || "",
+            meta: { isTouched: false, errors: [] },
+          },
+        };
+
+        return children(field);
+      },
+      handleSubmit: vi.fn().mockImplementation(async () => {
+        // Call the onSubmit handler with the form state
+        await (global as any).formOnSubmit?.({ value: formState });
+      }),
+    };
+  },
+}));
+
+// Mock components
+vi.mock("../../../../src/components/field-info", () => ({
+  FieldInfo: () => <div data-testid="field-info" />,
+}));
+
+vi.mock("../../../../src/components/terms-and-privacy", () => ({
+  TermsAndPrivacy: () => (
+    <div data-testid="terms-and-privacy">Terms & Privacy</div>
+  ),
+}));
+
+vi.mock("../../../../src/components/button", () => ({
+  Button: ({
+    children,
+    onClick,
+    type,
+    ...rest
+  }: {
+    children: React.ReactNode;
+    onClick?: () => void;
+    type?: "submit" | "reset" | "button";
+    [key: string]: any;
+  }) => (
+    <button onClick={onClick} type={type} data-testid="submit-button" {...rest}>
+      {children}
+    </button>
+  ),
+}));
+
+// Mock react useState to control state in tests
+vi.mock("react", async () => {
+  const actual = (await vi.importActual("react")) as typeof import("react");
+  return {
+    ...actual,
+    useState: vi.fn().mockImplementation((initialValue) => {
+      const [state, setState] = actual.useState(initialValue);
+      return [state, setState];
+    }),
+  };
+});
+
+const mockSendSignInLink = vi.mocked(fuiSendSignInLinkToEmail);
+const mockCompleteEmailLink = vi.mocked(fuiCompleteEmailLinkSignIn);
+
+describe("EmailLinkForm", () => {
+  beforeEach(() => {
+    vi.clearAllMocks();
+    // Reset the global state
+    (global as any).formOnSubmit = null;
+  });
+
+  it("renders the email link form", () => {
+    render(<EmailLinkForm />);
+
+    expect(screen.getByLabelText("Email")).toBeInTheDocument();
+    expect(screen.getByText("sendSignInLink")).toBeInTheDocument();
+  });
+
+  it("attempts to complete email link sign-in on load", () => {
+    mockCompleteEmailLink.mockResolvedValue(null);
+
+    render(<EmailLinkForm />);
+
+    expect(mockCompleteEmailLink).toHaveBeenCalled();
+  });
+
+  it("submits the form and sends sign-in link to email", async () => {
+    mockSendSignInLink.mockResolvedValue(undefined);
+
+    const { container } = render(<EmailLinkForm />);
+
+    // Get the form element
+    const form = container.getElementsByClassName(
+      "fui-form"
+    )[0] as HTMLFormElement;
+
+    // Set up the form submit handler
+    (global as any).formOnSubmit = async ({
+      value,
+    }: {
+      value: { email: string };
+    }) => {
+      await fuiSendSignInLinkToEmail(
+        expect.anything(),
+        value.email,
+        expect.anything()
+      );
+    };
+
+    // Submit the form
+    await act(async () => {
+      fireEvent.submit(form);
+    });
+
+    expect(mockSendSignInLink).toHaveBeenCalledWith(
+      expect.anything(),
+      "[email protected]",
+      expect.anything()
+    );
+  });
+
+  it("handles error when sending email link fails", async () => {
+    // Mock the error that will be thrown
+    const mockError = new FirebaseUIError({
+      code: "auth/invalid-email",
+      message: "Invalid email",
+    });
+    mockSendSignInLink.mockRejectedValue(mockError);
+
+    render(<EmailLinkForm />);
+
+    // Get the form element
+    const form = screen.getByRole("form");
+
+    // Submit the form
+    await act(async () => {
+      fireEvent.submit(form);
+    });
+
+    // Verify the error message is displayed
+    const errorElement = screen.getByText("Invalid email");
+    expect(errorElement).toHaveClass("fui-form__error");
+  });
+
+  it("handles success when email is sent", async () => {
+    mockSendSignInLink.mockResolvedValue(undefined);
+
+    const { container } = render(<EmailLinkForm />);
+
+    // Get the form element
+    const form = container.getElementsByClassName(
+      "fui-form"
+    )[0] as HTMLFormElement;
+
+    // Set up the form submit handler
+    (global as any).formOnSubmit = async ({
+      value,
+    }: {
+      value: { email: string };
+    }) => {
+      await fuiSendSignInLinkToEmail(
+        expect.anything(),
+        value.email,
+        expect.anything()
+      );
+    };
+
+    // Submit the form
+    await act(async () => {
+      fireEvent.submit(form);
+    });
+
+    expect(mockSendSignInLink).toHaveBeenCalledWith(
+      expect.anything(),
+      "[email protected]",
+      expect.anything()
+    );
+
+    // Verify success message is displayed
+    expect(
+      screen.getByText("Sign-in link sent!", { exact: false })
+    ).toBeInTheDocument();
+  });
+});