updated tests

src/wallet/components/WalletDropdown.test.tsx

@@ -1,7 +1,14 @@
 import '@testing-library/jest-dom';
-import { render, renderHook, screen, waitFor } from '@testing-library/react';
+import {
+  act,
+  fireEvent,
+  render,
+  renderHook,
+  screen,
+  waitFor,
+} from '@testing-library/react';
 import { type Mock, beforeEach, describe, expect, it, vi } from 'vitest';
-import { useAccount } from 'wagmi';
+import { type Config, useAccount, WagmiProvider } from 'wagmi';
 import { Identity } from '../../identity/components/Identity';
 import {
   IdentityProvider,
@@ -10,14 +17,20 @@ import {
 
 import { useBreakpoints } from '../../ui/react/internal/hooks/useBreakpoints';
 import { WalletDropdown } from './WalletDropdown';
-import { useWalletContext } from './WalletProvider';
+import { useWalletContext, WalletProvider } from './WalletProvider';
 
 vi.mock('wagmi', () => ({
-  useAccount: vi.fn(),
+  useAccount: vi.fn().mockReturnValue({ address: '0x123' }),
+  WagmiProvider: ({ children }: { children: React.ReactNode }) => (
+    <>{children}</>
+  ),
 }));
 
 vi.mock('./WalletProvider', () => ({
   useWalletContext: vi.fn(),
+  WalletProvider: ({ children }: { children: React.ReactNode }) => (
+    <>{children}</>
+  ),
 }));
 
 vi.mock('../../ui/react/internal/hooks/useBreakpoints', () => ({
@@ -102,10 +115,53 @@ describe('WalletDropdown', () => {
     useWalletContextMock.mockReturnValue({ isOpen: true, isClosing: false });
     const { rerender } = render(<WalletDropdown>Content</WalletDropdown>);
     const dropdown = screen.getByTestId('ockWalletDropdown');
-    expect(dropdown).toHaveClass('fade-in slide-in-from-top-2.5 animate-in duration-300 ease-out');
+    expect(dropdown).toHaveClass(
+      'fade-in slide-in-from-top-2.5 animate-in duration-300 ease-out',
+    );
 
     useWalletContextMock.mockReturnValue({ isOpen: true, isClosing: true });
     rerender(<WalletDropdown>Content</WalletDropdown>);
-    expect(dropdown).toHaveClass('fade-out slide-out-to-top-2.5 animate-out duration-300 ease-in');
+    expect(dropdown).toHaveClass(
+      'fade-out slide-out-to-top-2.5 animate-out duration-300 ease-in',
+    );
+  });
+
+  it('should handle wallet closing correctly', async () => {
+    const mockSetIsOpen = vi.fn();
+    const mockSetIsClosing = vi.fn();
+
+    useWalletContextMock.mockReturnValue({
+      isOpen: true,
+      isClosing: false,
+      setIsOpen: mockSetIsOpen,
+      setIsClosing: mockSetIsClosing,
+    });
+
+    const { rerender } = render(
+      <WalletDropdown>
+        <div>Content</div>
+      </WalletDropdown>,
+    );
+
+    const dropdown = screen.getByTestId('ockWalletDropdown');
+    expect(dropdown).toHaveClass('fade-in slide-in-from-top-2.5');
+
+    useWalletContextMock.mockReturnValue({
+      isOpen: true,
+      isClosing: true,
+      setIsOpen: mockSetIsOpen,
+      setIsClosing: mockSetIsClosing,
+    });
+
+    rerender(
+      <WalletDropdown>
+        <div>Content</div>
+      </WalletDropdown>,
+    );
+
+    fireEvent.animationEnd(dropdown);
+
+    expect(mockSetIsOpen).toHaveBeenCalledWith(false);
+    expect(mockSetIsClosing).toHaveBeenCalledWith(false);
   });
 });

src/wallet/components/WalletProvider.test.tsx

@@ -1,8 +1,9 @@
 import '@testing-library/jest-dom';
 import { act, render, renderHook } from '@testing-library/react';
-import { describe, expect, it, vi } from 'vitest';
+import { beforeEach, describe, expect, it, vi } from 'vitest';
 import { type Config, WagmiProvider } from 'wagmi';
 import { WalletProvider, useWalletContext } from './WalletProvider';
+import React from 'react';
 
 vi.mock('wagmi', () => ({
   useAccount: vi.fn().mockReturnValue({ address: null }),
@@ -12,6 +13,10 @@ vi.mock('wagmi', () => ({
 }));
 
 describe('useWalletContext', () => {
+  beforeEach(() => {
+    vi.clearAllMocks();
+  });
+
   it('should return default context', () => {
     render(
       <WagmiProvider config={{} as Config}>
@@ -33,9 +38,7 @@ describe('useWalletContext', () => {
     expect(result.current.isClosing).toEqual(false);
   });
 
-  it('should handle wallet closing correctly', async () => {
-    vi.useFakeTimers();
-
+  it('should not update visibility state if handleClose is called when wallet is not open', () => {
     const { result } = renderHook(() => useWalletContext(), {
       wrapper: ({ children }) => (
         <WagmiProvider config={{} as Config}>
@@ -44,27 +47,21 @@ describe('useWalletContext', () => {
       ),
     });
 
-    act(() => {
-      result.current.setIsOpen(true);
-    });
-    expect(result.current.isOpen).toEqual(true);
+    render(
+      <WalletProvider>
+        <div>Child</div>
+      </WalletProvider>,
+    );
 
     act(() => {
       result.current.handleClose();
     });
-    expect(result.current.isClosing).toEqual(true);
-    expect(result.current.isOpen).toEqual(true);
-
-    act(() => {
-      vi.advanceTimersByTime(300);
-    });
-    expect(result.current.isOpen).toEqual(false);
-    expect(result.current.isClosing).toEqual(false);
 
-    vi.useRealTimers();
+    expect(result.current.isClosing).toBe(false);
+    expect(result.current.isOpen).toBe(false);
   });
 
-  it('should not update visibility state if handleClose is called when wallet is not open', () => {
+  it('should update visibility state if handleClose is called when wallet is open', () => {
     const { result } = renderHook(() => useWalletContext(), {
       wrapper: ({ children }) => (
         <WagmiProvider config={{} as Config}>
@@ -73,17 +70,18 @@ describe('useWalletContext', () => {
       ),
     });
 
-    render(
-      <WalletProvider>
-        <div>Child</div>
-      </WalletProvider>,
-    );
+    // Open the wallet first
+    act(() => {
+      result.current.setIsOpen(true);
+    });
 
+    // Then close it
     act(() => {
       result.current.handleClose();
     });
 
-    expect(result.current.isClosing).toBe(false);
-    expect(result.current.isOpen).toBe(false);
+    // Verify states
+    expect(result.current.isOpen).toBe(true);
+    expect(result.current.isClosing).toBe(true);
   });
 });