test(sdk): more signaturescreen tests

test: Add comprehensive test coverage for HeadlessSignIn component

adds more tests

Author: gregfromstl

packages/thirdweb/src/react/web/ui/ConnectWallet/screens/SignatureScreen.test.tsx

@@ -1,11 +1,16 @@
 import { userEvent } from "@testing-library/user-event";
 import { beforeEach, describe, expect, it, vi } from "vitest";
 import { TEST_ACCOUNT_A } from "~test/test-wallets.js";
-import { render, waitFor } from "../../../../../../test/src/react-render.js";
+import {
+	getByTestId,
+	render,
+	waitFor,
+} from "../../../../../../test/src/react-render.js";
 import { TEST_CLIENT } from "../../../../../../test/src/test-clients.js";
 import { createWallet } from "../../../../../wallets/create-wallet.js";
 import type { ConnectLocale } from "../locale/types.js";
 import { SignatureScreen } from "./SignatureScreen.js";
+import { useActiveWallet } from "../../../../core/hooks/wallets/useActiveWallet.js";
 
 const mockAuth = vi.hoisted(() => ({
 	doLogin: vi.fn().mockResolvedValue(undefined),
@@ -14,14 +19,12 @@ const mockAuth = vi.hoisted(() => ({
 	isLoggedIn: vi.fn().mockResolvedValue(true),
 }));
 
-const wallet = createWallet("io.metamask");
-
 vi.mock("../../../../core/hooks/auth/useSiweAuth", () => ({
 	useSiweAuth: () => mockAuth,
 }));
 
 vi.mock("../../../../core/hooks/wallets/useActiveWallet", () => ({
-	useActiveWallet: () => wallet,
+	useActiveWallet: vi.fn().mockReturnValue(createWallet("io.metamask")),
 }));
 
 vi.mock("../../../../core/hooks/wallets/useActiveAccount", () => ({
@@ -102,10 +105,9 @@ describe("SignatureScreen", () => {
 	});
 
 	it("shows loading state when wallet is undefined", async () => {
-		// Override the mock to return undefined for this test
 		vi.mocked(useActiveWallet).mockReturnValueOnce(undefined);
 
-		const { getByTestId } = render(
+		const { queryByTestId } = render(
 			<SignatureScreen
 				onDone={() => {}}
 				modalSize="wide"
@@ -116,12 +118,12 @@ describe("SignatureScreen", () => {
 			{ setConnectedWallet: true },
 		);
 
-		expect(getByTestId("loading-screen")).toBeInTheDocument();
+		expect(queryByTestId("sign-in-button")).not.toBeInTheDocument();
 	});
 
 	it("handles error state", async () => {
 		mockAuth.doLogin.mockRejectedValueOnce(new Error("Signing failed"));
-		const { getByRole, getByText } = render(
+		const { getByTestId, getByRole, getByText } = render(
 			<SignatureScreen
 				onDone={() => {}}
 				modalSize="wide"
@@ -132,7 +134,9 @@ describe("SignatureScreen", () => {
 			{ setConnectedWallet: true },
 		);
 
-		const signInButton = getByRole("button", { name: "Sign In" });
+		const signInButton = await waitFor(() => {
+			return getByTestId("sign-in-button");
+		});
 		await userEvent.click(signInButton);
 
 		// Should show error state
@@ -146,4 +150,142 @@ describe("SignatureScreen", () => {
 			},
 		);
 	});
+
+	describe("HeadlessSignIn", () => {
+		const mockWallet = createWallet("inApp");
+		beforeEach(() => {
+			vi.mocked(useActiveWallet).mockReturnValue(mockWallet);
+		});
+
+		it("automatically triggers sign in on mount", async () => {
+			render(
+				<SignatureScreen
+					onDone={() => {}}
+					modalSize="wide"
+					connectLocale={mockConnectLocale}
+					client={TEST_CLIENT}
+					auth={mockAuth}
+				/>,
+				{ setConnectedWallet: true },
+			);
+
+			await waitFor(() => {
+				expect(mockAuth.doLogin).toHaveBeenCalledTimes(1);
+			});
+		});
+
+		it("shows signing message during signing state", async () => {
+			const { getByText } = render(
+				<SignatureScreen
+					onDone={() => {}}
+					modalSize="wide"
+					connectLocale={mockConnectLocale}
+					client={TEST_CLIENT}
+					auth={mockAuth}
+				/>,
+				{ setConnectedWallet: true },
+			);
+
+			await waitFor(() => {
+				expect(getByText("Signing")).toBeInTheDocument();
+			});
+		});
+
+		it("shows error and retry button when signing fails", async () => {
+			mockAuth.doLogin.mockRejectedValueOnce(
+				new Error("Headless signing failed"),
+			);
+
+			const { getByText, getByRole } = render(
+				<SignatureScreen
+					onDone={() => {}}
+					modalSize="wide"
+					connectLocale={mockConnectLocale}
+					client={TEST_CLIENT}
+					auth={mockAuth}
+				/>,
+				{ setConnectedWallet: true },
+			);
+
+			await waitFor(
+				() => {
+					expect(getByText("Headless signing failed")).toBeInTheDocument();
+					expect(
+						getByRole("button", { name: "Try Again" }),
+					).toBeInTheDocument();
+				},
+				{ timeout: 2000 },
+			);
+		});
+
+		it("allows retry after failure", async () => {
+			mockAuth.doLogin
+				.mockRejectedValueOnce(new Error("Failed first time"))
+				.mockResolvedValueOnce(undefined);
+
+			const { getByRole, getByText } = render(
+				<SignatureScreen
+					onDone={() => {}}
+					modalSize="wide"
+					connectLocale={mockConnectLocale}
+					client={TEST_CLIENT}
+					auth={mockAuth}
+				/>,
+				{ setConnectedWallet: true },
+			);
+
+			// Wait for initial failure
+			await waitFor(
+				() => {
+					expect(getByText("Failed first time")).toBeInTheDocument();
+				},
+				{ timeout: 2000 },
+			);
+
+			// Click retry
+			const retryButton = getByRole("button", { name: "Try Again" });
+			await userEvent.click(retryButton);
+
+			// Should show loading again
+			await waitFor(() => {
+				expect(getByText("Signing")).toBeInTheDocument();
+			});
+
+			// Should have called login twice
+			expect(mockAuth.doLogin).toHaveBeenCalledTimes(2);
+		});
+
+		it("allows disconnecting wallet after failure", async () => {
+			const mockDisconnect = vi.fn().mockResolvedValue(undefined);
+			mockAuth.doLogin.mockRejectedValueOnce(new Error("Failed"));
+			vi.mocked(useActiveWallet).mockReturnValueOnce({
+				...createWallet("io.metamask"),
+				disconnect: mockDisconnect,
+			});
+
+			const { getByTestId } = render(
+				<SignatureScreen
+					onDone={() => {}}
+					modalSize="wide"
+					connectLocale={mockConnectLocale}
+					client={TEST_CLIENT}
+					auth={mockAuth}
+				/>,
+				{ setConnectedWallet: true },
+			);
+
+			// Wait for failure and click disconnect
+			await waitFor(
+				() => {
+					return getByTestId("disconnect-button");
+				},
+				{ timeout: 2000 },
+			).then((button) => userEvent.click(button));
+
+			// Should have attempted to disconnect
+			await waitFor(() => {
+				expect(mockDisconnect).toHaveBeenCalled();
+			});
+		});
+	});
 });