test

src/wallet/components/Wallet.test.tsx

@@ -1,40 +1,83 @@
 import '@testing-library/jest-dom';
 import { render, screen, waitFor } from '@testing-library/react';
-import { useAccount, useConnect, useDisconnect } from 'wagmi';
+import userEvent from '@testing-library/user-event';
 import { ConnectWallet } from './ConnectWallet';
-import { Wallet } from './Wallet';
 import { WalletDropdown } from './WalletDropdown';
+import { WalletProvider, useWalletContext } from './WalletProvider';
+import { Wallet } from './Wallet';
+
+// Mock the useWalletContext hook
+vi.mock('./WalletProvider', () => ({
+  useWalletContext: vi.fn(),
+  WalletProvider: ({ children }) => <>{children}</>,
+}));
+
+// Mock child components
+vi.mock('./ConnectWallet', () => ({
+  ConnectWallet: () => <div data-testid="connect-wallet">Connect Wallet</div>,
+}));
 
-vi.mock('wagmi', () => ({
-  useAccount: vi.fn(),
-  useConnect: vi.fn(),
-  useDisconnect: vi.fn(),
+vi.mock('./WalletDropdown', () => ({
+  WalletDropdown: () => <div data-testid="wallet-dropdown">Wallet Dropdown</div>,
 }));
 
-describe('Wallet Component', () => {
+describe('WalletContent Component', () => {
+  let mockSetIsOpen: jest.Mock;
+
   beforeEach(() => {
-    vi.clearAllMocks();
-    (useAccount as vi.Mock).mockReturnValue({ status: 'disconnected' });
-    (useConnect as vi.Mock).mockReturnValue({
-      connectors: [{ name: 'injected' }],
-      connect: vi.fn(),
+    mockSetIsOpen = vi.fn();
+    (useWalletContext as jest.Mock).mockReturnValue({
+      isOpen: false,
+      setIsOpen: mockSetIsOpen,
     });
-    (useDisconnect as vi.Mock).mockReturnValue({ disconnect: vi.fn() });
   });
 
-  it('should render the Wallet component with ConnectWallet', async () => {
-    render(
+  it('should render ConnectWallet and toggle WalletDropdown based on isOpen state', async () => {
+    const user = userEvent.setup();
+
+    const { rerender } = render(
+      <Wallet>
+        <ConnectWallet />
+        <WalletDropdown />
+      </Wallet>
+    );
+
+    expect(screen.getByTestId('connect-wallet')).toBeInTheDocument();
+    expect(screen.queryByTestId('wallet-dropdown')).not.toBeInTheDocument();
+
+    (useWalletContext as jest.Mock).mockReturnValue({
+      isOpen: true,
+      setIsOpen: mockSetIsOpen,
+    });
+
+    rerender(
       <Wallet>
         <ConnectWallet />
-        <WalletDropdown>
-          <div />
-        </WalletDropdown>
-      </Wallet>,
+        <WalletDropdown />
+      </Wallet>
     );
-    await waitFor(() => {
-      expect(
-        screen.getByTestId('ockConnectWallet_Container'),
-      ).toBeInTheDocument();
+
+    expect(screen.getByTestId('connect-wallet')).toBeInTheDocument();
+    expect(screen.getByTestId('wallet-dropdown')).toBeInTheDocument();
+
+    await user.click(document.body);
+
+    expect(mockSetIsOpen).toHaveBeenCalledWith(false);
+
+    (useWalletContext as jest.Mock).mockReturnValue({
+      isOpen: false,
+      setIsOpen: mockSetIsOpen,
     });
+
+    rerender(
+      <Wallet>
+        <ConnectWallet />
+        <WalletDropdown />
+      </Wallet>
+    );
+
+    // WalletDropdown should no longer be visible
+    expect(screen.getByTestId('connect-wallet')).toBeInTheDocument();
+    expect(screen.queryByTestId('wallet-dropdown')).not.toBeInTheDocument();
   });
-});
+});