test(shadcn): Add sign in auth screen test example

Author: Ehesp

packages/shadcn/src/components/ui/card.tsx

@@ -0,0 +1,56 @@
+import * as React from "react";
+
+import { cn } from "@/lib/utils";
+
+function Card({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="card"
+      className={cn("bg-card text-card-foreground flex flex-col gap-6 rounded-xl border py-6 shadow-sm", className)}
+      {...props}
+    />
+  );
+}
+
+function CardHeader({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="card-header"
+      className={cn(
+        "@container/card-header grid auto-rows-min grid-rows-[auto_auto] items-start gap-2 px-6 has-data-[slot=card-action]:grid-cols-[1fr_auto] [.border-b]:pb-6",
+        className
+      )}
+      {...props}
+    />
+  );
+}
+
+function CardTitle({ className, ...props }: React.ComponentProps<"div">) {
+  return <div data-slot="card-title" className={cn("leading-none font-semibold", className)} {...props} />;
+}
+
+function CardDescription({ className, ...props }: React.ComponentProps<"div">) {
+  return <div data-slot="card-description" className={cn("text-muted-foreground text-sm", className)} {...props} />;
+}
+
+function CardAction({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="card-action"
+      className={cn("col-start-2 row-span-2 row-start-1 self-start justify-self-end", className)}
+      {...props}
+    />
+  );
+}
+
+function CardContent({ className, ...props }: React.ComponentProps<"div">) {
+  return <div data-slot="card-content" className={cn("px-6", className)} {...props} />;
+}
+
+function CardFooter({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div data-slot="card-footer" className={cn("flex items-center px-6 [.border-t]:pt-6", className)} {...props} />
+  );
+}
+
+export { Card, CardHeader, CardFooter, CardTitle, CardAction, CardDescription, CardContent };

packages/shadcn/src/registry/sign-in-auth-screen.test.tsx

@@ -0,0 +1,221 @@
+/**
+ * Copyright 2025 Google LLC
+ *
+ * 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
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { describe, it, expect, vi, beforeEach, afterEach } from "vitest";
+import { render, screen, cleanup } from "@testing-library/react";
+import { SignInAuthScreen } from "./sign-in-auth-screen";
+import { createMockUI, createFirebaseUIProvider } from "../../tests/utils";
+import { registerLocale } from "@firebase-ui/translations";
+import { FirebaseUIProvider } from "@firebase-ui/react";
+
+vi.mock("./sign-in-auth-form", async (importOriginal) => {
+  const mod = await importOriginal<typeof import("./sign-in-auth-form")>();
+  return {
+    ...mod,
+    SignInAuthForm: (props: any) => {
+      const OriginalForm = mod.SignInAuthForm;
+      return (
+        <div data-testid="sign-in-auth-form">
+          <OriginalForm {...props} />
+        </div>
+      );
+    },
+  };
+});
+
+vi.mock("@/components/ui/card", () => ({
+  Card: ({ children }: { children: React.ReactNode }) => <div data-testid="card">{children}</div>,
+  CardHeader: ({ children }: { children: React.ReactNode }) => <div data-testid="card-header">{children}</div>,
+  CardTitle: ({ children }: { children: React.ReactNode }) => <h2 data-testid="card-title">{children}</h2>,
+  CardDescription: ({ children }: { children: React.ReactNode }) => <p data-testid="card-description">{children}</p>,
+  CardContent: ({ children }: { children: React.ReactNode }) => <div data-testid="card-content">{children}</div>,
+}));
+
+vi.mock("@/components/ui/separator", () => ({
+  Separator: ({ children }: { children: React.ReactNode }) => <div data-testid="separator">{children}</div>,
+}));
+
+describe("<SignInAuthScreen />", () => {
+  beforeEach(() => {
+    vi.clearAllMocks();
+  });
+
+  afterEach(() => {
+    cleanup();
+  });
+
+  it("should render the screen with title and subtitle correctly", () => {
+    const mockUI = createMockUI({
+      locale: registerLocale("test", {
+        labels: {
+          signIn: "Sign In",
+        },
+        prompts: {
+          signInToAccount: "Sign in to your account",
+        },
+      }),
+    });
+
+    render(
+      <FirebaseUIProvider ui={mockUI}>
+        <SignInAuthScreen />
+      </FirebaseUIProvider>
+    );
+
+    expect(screen.getByTestId("card")).toBeInTheDocument();
+    expect(screen.getByTestId("card-header")).toBeInTheDocument();
+    expect(screen.getByTestId("card-content")).toBeInTheDocument();
+
+    expect(screen.getByTestId("card-title")).toHaveTextContent("Sign In");
+    expect(screen.getByTestId("card-description")).toHaveTextContent("Sign in to your account");
+  });
+
+  it("should render the SignInAuthForm within the card content", () => {
+    const mockUI = createMockUI();
+
+    render(
+      <FirebaseUIProvider ui={mockUI}>
+        <SignInAuthScreen />
+      </FirebaseUIProvider>
+    );
+
+    expect(screen.getByTestId("sign-in-auth-form")).toBeInTheDocument();
+    expect(screen.getByTestId("card-content")).toContainElement(screen.getByTestId("sign-in-auth-form"));
+  });
+
+  it("should not render separator and children section when no children provided", () => {
+    const mockUI = createMockUI();
+
+    render(
+      <FirebaseUIProvider ui={mockUI}>
+        <SignInAuthScreen />
+      </FirebaseUIProvider>
+    );
+
+    expect(screen.queryByTestId("separator")).not.toBeInTheDocument();
+    expect(screen.queryByText("dividerOr")).not.toBeInTheDocument();
+  });
+
+  it("should render children with separator when children are provided", () => {
+    const mockUI = createMockUI({
+      locale: registerLocale("test", {
+        messages: {
+          dividerOr: "or",
+        },
+      }),
+    });
+
+    const TestChild = () => <div data-testid="test-child">Test Child Component</div>;
+
+    render(
+      <FirebaseUIProvider ui={mockUI}>
+        <SignInAuthScreen>
+          <TestChild />
+        </SignInAuthScreen>
+      </FirebaseUIProvider>
+    );
+
+    // Check that separator is rendered with correct translation
+    expect(screen.getByTestId("separator")).toBeInTheDocument();
+    expect(screen.getByTestId("separator")).toHaveTextContent("or");
+
+    // Check that children are rendered in a space-y-2 container
+    expect(screen.getByTestId("test-child")).toBeInTheDocument();
+    expect(screen.getByTestId("test-child")).toHaveTextContent("Test Child Component");
+  });
+
+  it("should forward props to SignInAuthForm", () => {
+    const mockUI = createMockUI();
+    const onForgotPasswordClickMock = vi.fn();
+    const onRegisterClickMock = vi.fn();
+
+    render(
+      <FirebaseUIProvider ui={mockUI}>
+        <SignInAuthScreen onForgotPasswordClick={onForgotPasswordClickMock} onRegisterClick={onRegisterClickMock} />
+      </FirebaseUIProvider>
+    );
+
+    const form = screen.getByTestId("sign-in-auth-form");
+    expect(form).toBeInTheDocument();
+  });
+
+  it("should render multiple children correctly", () => {
+    const mockUI = createMockUI({
+      locale: registerLocale("test", {
+        messages: {
+          dividerOr: "or",
+        },
+      }),
+    });
+
+    const TestChild1 = () => <div data-testid="test-child-1">Child 1</div>;
+    const TestChild2 = () => <div data-testid="test-child-2">Child 2</div>;
+
+    render(
+      <FirebaseUIProvider ui={mockUI}>
+        <SignInAuthScreen>
+          <TestChild1 />
+          <TestChild2 />
+        </SignInAuthScreen>
+      </FirebaseUIProvider>
+    );
+
+    expect(screen.getByTestId("separator")).toBeInTheDocument();
+
+    expect(screen.getByTestId("test-child-1")).toBeInTheDocument();
+    expect(screen.getByTestId("test-child-2")).toBeInTheDocument();
+    expect(screen.getByTestId("test-child-1")).toHaveTextContent("Child 1");
+    expect(screen.getByTestId("test-child-2")).toHaveTextContent("Child 2");
+  });
+
+  it("should handle empty children array", () => {
+    const mockUI = createMockUI();
+
+    render(
+      <FirebaseUIProvider ui={mockUI}>
+        <SignInAuthScreen>{[]}</SignInAuthScreen>
+      </FirebaseUIProvider>
+    );
+
+    expect(screen.getByTestId("separator")).toBeInTheDocument();
+  });
+
+  it("should not render separator when children is null", () => {
+    const mockUI = createMockUI();
+
+    render(
+      <FirebaseUIProvider ui={mockUI}>
+        <SignInAuthScreen />
+      </FirebaseUIProvider>
+    );
+
+    expect(screen.queryByTestId("separator")).not.toBeInTheDocument();
+  });
+
+  it("should use default translations when custom locale is not provided", () => {
+    const mockUI = createMockUI();
+
+    render(
+      <FirebaseUIProvider ui={mockUI}>
+        <SignInAuthScreen />
+      </FirebaseUIProvider>
+    );
+
+    expect(screen.getByTestId("card-title")).toBeInTheDocument();
+    expect(screen.getByTestId("card-description")).toBeInTheDocument();
+    expect(screen.getByTestId("sign-in-auth-form")).toBeInTheDocument();
+  });
+});

packages/shadcn/src/registry/sign-in-auth-screen.tsx

@@ -0,0 +1,35 @@
+"use client";
+
+import { useUI, SignInAuthScreenProps } from "@firebase-ui/react";
+import { getTranslation } from "@firebase-ui/core";
+
+import { SignInAuthForm } from "@/registry/sign-in-auth-form";
+import { Separator } from "@/components/ui/separator";
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
+
+export type { SignInAuthScreenProps };
+
+export function SignInAuthScreen({ children, ...props }: SignInAuthScreenProps) {
+  const ui = useUI();
+
+  const titleText = getTranslation(ui, "labels", "signIn");
+  const subtitleText = getTranslation(ui, "prompts", "signInToAccount");
+
+  return (
+    <Card>
+      <CardHeader>
+        <CardTitle>{titleText}</CardTitle>
+        <CardDescription>{subtitleText}</CardDescription>
+      </CardHeader>
+      <CardContent>
+        <SignInAuthForm {...props} />
+        {children ? (
+          <>
+            <Separator>{getTranslation(ui, "messages", "dividerOr")}</Separator>
+            <div className="space-y-2">{children}</div>
+          </>
+        ) : null}
+      </CardContent>
+    </Card>
+  );
+}