testing

coinbase · Aug 2, 2024 · 135e01a · 135e01a
1 parent 3dd4287
commit 135e01a
Showing 1 changed file with 30 additions and 13 deletions.
diff --git a/src/wallet/components/Wallet.test.tsx b/src/wallet/components/Wallet.test.tsx
@@ -1,10 +1,10 @@
 import '@testing-library/jest-dom';
-import { render, screen, waitFor } from '@testing-library/react';
+import { render, screen } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 import { ConnectWallet } from './ConnectWallet';
-import { WalletDropdown } from './WalletDropdown';
-import { WalletProvider, useWalletContext } from './WalletProvider';
 import { Wallet } from './Wallet';
+import { WalletDropdown } from './WalletDropdown';
+import { useWalletContext } from './WalletProvider';
 
 // Mock the useWalletContext hook
 vi.mock('./WalletProvider', () => ({
@@ -18,10 +18,12 @@ vi.mock('./ConnectWallet', () => ({
 }));
 
 vi.mock('./WalletDropdown', () => ({
-  WalletDropdown: () => <div data-testid="wallet-dropdown">Wallet Dropdown</div>,
+  WalletDropdown: () => (
+    <div data-testid="wallet-dropdown">Wallet Dropdown</div>
+  ),
 }));
 
-describe('WalletContent Component', () => {
+describe('Wallet Component', () => {
   let mockSetIsOpen: jest.Mock;
 
   beforeEach(() => {
@@ -32,19 +34,32 @@ describe('WalletContent Component', () => {
     });
   });
 
-  it('should render ConnectWallet and toggle WalletDropdown based on isOpen state', async () => {
+  it('should render the Wallet component with ConnectWallet', () => {
+    render(
+      <Wallet>
+        <ConnectWallet />
+        <WalletDropdown />
+      </Wallet>,
+    );
+
+    expect(screen.getByTestId('connect-wallet')).toBeInTheDocument();
+    expect(screen.queryByTestId('wallet-dropdown')).not.toBeInTheDocument();
+  });
+
+  it('should toggle WalletDropdown based on isOpen state', async () => {
     const user = userEvent.setup();
 
     const { rerender } = render(
       <Wallet>
         <ConnectWallet />
         <WalletDropdown />
-      </Wallet>
+      </Wallet>,
     );
 
-    expect(screen.getByTestId('connect-wallet')).toBeInTheDocument();
+    // Initially, WalletDropdown should not be visible
     expect(screen.queryByTestId('wallet-dropdown')).not.toBeInTheDocument();
 
+    // Simulate opening the dropdown
     (useWalletContext as jest.Mock).mockReturnValue({
       isOpen: true,
       setIsOpen: mockSetIsOpen,
@@ -54,16 +69,19 @@ describe('WalletContent Component', () => {
       <Wallet>
         <ConnectWallet />
         <WalletDropdown />
-      </Wallet>
+      </Wallet>,
     );
 
-    expect(screen.getByTestId('connect-wallet')).toBeInTheDocument();
+    // Now WalletDropdown should be visible
     expect(screen.getByTestId('wallet-dropdown')).toBeInTheDocument();
 
+    // Simulate clicking outside
     await user.click(document.body);
 
+    // Check if setIsOpen was called with false
     expect(mockSetIsOpen).toHaveBeenCalledWith(false);
 
+    // Simulate closing the dropdown
     (useWalletContext as jest.Mock).mockReturnValue({
       isOpen: false,
       setIsOpen: mockSetIsOpen,
@@ -73,11 +91,10 @@ describe('WalletContent Component', () => {
       <Wallet>
         <ConnectWallet />
         <WalletDropdown />
-      </Wallet>
+      </Wallet>,
     );
 
     // WalletDropdown should no longer be visible
-    expect(screen.getByTestId('connect-wallet')).toBeInTheDocument();
     expect(screen.queryByTestId('wallet-dropdown')).not.toBeInTheDocument();
   });
-});
+});