From cceeea463d7944a2f34191121ffdc0d5cb36956f Mon Sep 17 00:00:00 2001
From: Ryjen1 <your-github-email@example.com>
Date: Thu, 2 Jul 2026 10:56:11 +0100
Subject: [PATCH] test(faucet): add disconnected page render test (#213)

Render FaucetPage with a disconnected wallet inside a QueryClientProvider
and assert:
- The 'Testnet Faucet' heading is present
- All four token cards (TUSDC, TWBTC, TETH, TXLM) are rendered
- The 'Connect your wallet to claim test tokens.' CTA and Connect Wallet
  button are visible

Heavy UI dependencies (Navbar, TokenIcon, ConnectButton,
NetworkMismatchBanner, useNetwork, useClaim) are stubbed so the test
focuses on the static shell that is visible before any wallet connects.
MSW onUnhandledRequest:"error" remains enabled.
---
 .../faucet-page-disconnected.test.tsx         | 98 +++++++++++++++++++
 1 file changed, 98 insertions(+)
 create mode 100644 apps/web/src/features/faucet/components/faucet-page-disconnected.test.tsx

diff --git a/apps/web/src/features/faucet/components/faucet-page-disconnected.test.tsx b/apps/web/src/features/faucet/components/faucet-page-disconnected.test.tsx
new file mode 100644
index 0000000..0badcf1
--- /dev/null
+++ b/apps/web/src/features/faucet/components/faucet-page-disconnected.test.tsx
@@ -0,0 +1,98 @@
+import { describe, it, expect, beforeEach, afterEach, vi } from "vitest"
+import { render, screen } from "@testing-library/react"
+import { QueryClient, QueryClientProvider } from "@tanstack/react-query"
+import { useWalletStore } from "@/features/wallet/store/wallet-store"
+import { FaucetPage } from "./faucet-page"
+
+// ── Module-level mocks ────────────────────────────────────────────────────────
+
+// useClaim is stubbed because it transitively imports @/lib/contracts.ts, which
+// instantiates contract clients at module-load time with test contract IDs that
+// fail Stellar strkey validation in bun's test runner.
+vi.mock("../hooks/useClaim", () => ({
+  useClaim: () => ({
+    claimOne: vi.fn(),
+    claimAll: vi.fn(),
+    pendingTokens: new Set<string>(),
+    isBulkPending: false,
+  }),
+}))
+
+vi.mock("@/ui/Navbar", () => ({ Navbar: () => <nav data-testid="navbar" /> }))
+
+vi.mock("@/shared/components/TokenIcon", () => ({
+  TokenIcon: ({ symbol }: { symbol: string }) => <span data-testid={`icon-${symbol}`} />,
+}))
+
+vi.mock("@/features/wallet/components/ConnectButton", () => ({
+  ConnectButton: () => <button>Connect Wallet</button>,
+}))
+
+vi.mock("@/features/wallet/components/NetworkMismatchBanner", () => ({
+  NetworkMismatchBanner: () => null,
+}))
+
+vi.mock("@/features/wallet/hooks/useNetwork", () => ({
+  useNetwork: () => ({ mismatch: false, network: "testnet" }),
+}))
+
+// ── Tests ─────────────────────────────────────────────────────────────────────
+
+describe("FaucetPage — disconnected state (#213)", () => {
+  let queryClient: QueryClient
+
+  beforeEach(() => {
+    queryClient = new QueryClient({
+      defaultOptions: { queries: { retry: false, staleTime: 0 } },
+    })
+
+    useWalletStore.setState({
+      address: null,
+      walletId: null,
+      status: "disconnected",
+      pendingTransactionXdr: null,
+      network: "testnet",
+    })
+  })
+
+  afterEach(() => {
+    vi.restoreAllMocks()
+    useWalletStore.setState({
+      address: null,
+      walletId: null,
+      status: "disconnected",
+      pendingTransactionXdr: null,
+      network: "testnet",
+    })
+  })
+
+  function renderPage() {
+    return render(
+      <QueryClientProvider client={queryClient}>
+        <FaucetPage />
+      </QueryClientProvider>,
+    )
+  }
+
+  it("renders the Testnet Faucet heading", () => {
+    renderPage()
+    expect(screen.getByRole("heading", { name: "Testnet Faucet" })).toBeInTheDocument()
+  })
+
+  it("renders all four token cards", () => {
+    renderPage()
+    // Each symbol appears twice (card header + contract address list), so use getAllByText
+    expect(screen.getAllByText("TUSDC").length).toBeGreaterThanOrEqual(1)
+    expect(screen.getAllByText("TWBTC").length).toBeGreaterThanOrEqual(1)
+    expect(screen.getAllByText("TETH").length).toBeGreaterThanOrEqual(1)
+    expect(screen.getAllByText("TXLM").length).toBeGreaterThanOrEqual(1)
+  })
+
+  it("renders connect wallet call to action when disconnected", () => {
+    renderPage()
+    expect(
+      screen.getByText("Connect your wallet to claim test tokens."),
+    ).toBeInTheDocument()
+    expect(screen.getByRole("button", { name: "Connect Wallet" })).toBeInTheDocument()
+  })
+})