test(react): GoogleSignInButton tests

Author: Ehesp

packages/react/src/auth/oauth/google-sign-in-button.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,24 +13,17 @@
  * limitations under the License.
  */
 
-import { describe, expect, it, vi } from "vitest";
-import { render, screen } from "@testing-library/react";
-import { GoogleIcon, GoogleSignInButton } from "~/auth/oauth/google-sign-in-button";
-
-// Mock hooks
-vi.mock("~/hooks", () => ({
-  useUI: () => ({
-    locale: "en-US",
-    translations: {
-      "en-US": { labels: { signInWithGoogle: "foo bar" } },
-    },
-  }),
-}));
+import { describe, it, expect, vi, afterEach, beforeEach } from "vitest";
+import { render, screen, cleanup } from "@testing-library/react";
+import { GoogleIcon, GoogleSignInButton } from "./google-sign-in-button";
+import { CreateFirebaseUIProvider, createMockUI } from "~/tests/utils";
+import { registerLocale } from "@firebase-ui/translations";
+import { ComponentProps } from "react";
 
 // Mock the OAuthButton component
-vi.mock("~/auth/oauth/oauth-button", () => ({
-  OAuthButton: ({ children, provider }: { children: React.ReactNode; provider: any }) => (
-    <div data-testid="oauth-button" data-provider={provider.constructor.name}>
+vi.mock("./oauth-button", () => ({
+  OAuthButton: ({ children, provider }: ComponentProps<"div"> & { provider: any }) => (
+    <div data-testid="oauth-button" data-provider={provider?.constructor?.name || "GoogleAuthProvider"}>
       {children}
     </div>
   ),
@@ -46,30 +38,165 @@ vi.mock("firebase/auth", () => ({
   },
 }));
 
-describe("GoogleSignInButton", () => {
+afterEach(() => {
+  cleanup();
+});
+
+describe("<GoogleSignInButton />", () => {
+  beforeEach(() => {
+    vi.clearAllMocks();
+  });
+
   it("renders with the correct provider", () => {
-    render(<GoogleSignInButton />);
-    expect(screen.getByTestId("oauth-button")).toHaveAttribute("data-provider", "GoogleAuthProvider");
+    const ui = createMockUI({
+      locale: registerLocale("test", {
+        labels: {
+          signInWithGoogle: "Sign in with Google",
+        },
+      }),
+    });
+
+    render(
+      <CreateFirebaseUIProvider ui={ui}>
+        <GoogleSignInButton />
+      </CreateFirebaseUIProvider>
+    );
+
+    const oauthButton = screen.getByTestId("oauth-button");
+    expect(oauthButton).toBeDefined();
+    expect(oauthButton.getAttribute("data-provider")).toBe("GoogleAuthProvider");
   });
 
-  it("renders with the Google icon SVG", () => {
-    render(<GoogleSignInButton />);
+  it("renders with custom provider when provided", () => {
+    const ui = createMockUI({
+      locale: registerLocale("test", {
+        labels: {
+          signInWithGoogle: "Sign in with Google",
+        },
+      }),
+    });
+
+    const customProvider = new (class CustomGoogleProvider {
+      constructor() {
+        // Empty constructor
+      }
+    })();
+
+    render(
+      <CreateFirebaseUIProvider ui={ui}>
+        <GoogleSignInButton provider={customProvider as any} />
+      </CreateFirebaseUIProvider>
+    );
+
+    const oauthButton = screen.getByTestId("oauth-button");
+    expect(oauthButton).toBeDefined();
+    expect(oauthButton.getAttribute("data-provider")).toBe("CustomGoogleProvider");
+  });
+
+  it("renders with the Google icon", () => {
+    const ui = createMockUI({
+      locale: registerLocale("test", {
+        labels: {
+          signInWithGoogle: "Sign in with Google",
+        },
+      }),
+    });
+
+    render(
+      <CreateFirebaseUIProvider ui={ui}>
+        <GoogleSignInButton />
+      </CreateFirebaseUIProvider>
+    );
+
     const svg = document.querySelector(".fui-provider__icon");
-    expect(svg).toBeInTheDocument();
+    expect(svg).toBeDefined();
     expect(svg).toHaveClass("fui-provider__icon");
+    expect(svg?.tagName.toLowerCase()).toBe("svg");
   });
 
-  it("renders with the correct text", () => {
-    render(<GoogleSignInButton />);
-    expect(screen.getByText("foo bar")).toBeInTheDocument();
+  it("renders with the correct translated text", () => {
+    const ui = createMockUI({
+      locale: registerLocale("test", {
+        labels: {
+          signInWithGoogle: "Sign in with Google",
+        },
+      }),
+    });
+
+    render(
+      <CreateFirebaseUIProvider ui={ui}>
+        <GoogleSignInButton />
+      </CreateFirebaseUIProvider>
+    );
+
+    expect(screen.getByText("Sign in with Google")).toBeDefined();
   });
-});
 
-it("exports a valid GoogleIcon component which is an svg", () => {
-  const { container } = render(<GoogleIcon />);
-  const svg = container.querySelector("svg");
-  expect(svg).toBeInTheDocument();
-  expect(svg?.tagName.toLowerCase()).toBe("svg");
-  expect(svg).toHaveClass("fui-provider__icon");
+  it("renders with different translated text for different locales", () => {
+    const ui = createMockUI({
+      locale: registerLocale("test", {
+        labels: {
+          signInWithGoogle: "Iniciar sesión con Google",
+        },
+      }),
+    });
+
+    render(
+      <CreateFirebaseUIProvider ui={ui}>
+        <GoogleSignInButton />
+      </CreateFirebaseUIProvider>
+    );
+
+    expect(screen.getByText("Iniciar sesión con Google")).toBeDefined();
+  });
+
+  it("passes children to OAuthButton", () => {
+    const ui = createMockUI({
+      locale: registerLocale("test", {
+        labels: {
+          signInWithGoogle: "Sign in with Google",
+        },
+      }),
+    });
+
+    render(
+      <CreateFirebaseUIProvider ui={ui}>
+        <GoogleSignInButton />
+      </CreateFirebaseUIProvider>
+    );
+
+    const oauthButton = screen.getByTestId("oauth-button");
+    expect(oauthButton).toBeDefined();
+    
+    const svg = oauthButton.querySelector(".fui-provider__icon");
+    const text = oauthButton.querySelector("span");
+    
+    expect(svg).toBeDefined();
+    expect(text).toBeDefined();
+    expect(text?.textContent).toBe("Sign in with Google");
+  });
 });
 
+describe("<GoogleIcon />", () => {
+  it("renders as an SVG element", () => {
+    const { container } = render(<GoogleIcon />);
+    const svg = container.querySelector("svg");
+    
+    expect(svg).toBeDefined();
+    expect(svg?.tagName.toLowerCase()).toBe("svg");
+  });
+
+  it("has the correct CSS class", () => {
+    const { container } = render(<GoogleIcon />);
+    const svg = container.querySelector("svg");
+    
+    expect(svg).toHaveClass("fui-provider__icon");
+  });
+
+  it("has the correct viewBox attribute", () => {
+    const { container } = render(<GoogleIcon />);
+    const svg = container.querySelector("svg");
+    
+    expect(svg?.getAttribute("viewBox")).toBe("0 0 48 48");
+  });
+});

packages/react/src/auth/oauth/oauth-button.test.tsx

@@ -28,6 +28,7 @@ vi.mock('@firebase-ui/core', async (importOriginal) => {
   return {
     ...(mod as object),
     signInWithProvider: vi.fn(),
+    // TODO: This will need updating when core lands
     FirebaseUIError: class FirebaseUIError extends Error {
       code: string;
       constructor(error: any, _ui: any) {
@@ -90,7 +91,7 @@ describe("<OAuthButton />", () => {
     );
 
     const button = screen.getByTestId("oauth-button");
-    expect(button.className).toContain("fui-provider__button");
+    expect(button).toHaveClass("fui-provider__button");
     expect(button.getAttribute("type")).toBe("button");
   });