Untitled
unknown
plain_text
2 months ago
2.7 kB
3
Indexable
import { renderHook, act } from '@testing-library/react'; import { useAdaptiveTabs } from '../useAdaptiveTabs'; // Adjust the path as needed import { vi } from 'vitest'; describe('useAdaptiveTabs', () => { let updateChildsMoreButtonItemMock: ReturnType<typeof vi.fn>; let tabsMock: any[]; let currentMoreButtonItemMock: any; beforeEach(() => { updateChildsMoreButtonItemMock = vi.fn(); tabsMock = [ { id: 'tab1', label: 'Tab 1' }, { id: 'tab2', label: 'Tab 2' }, { id: 'tab3', label: 'Tab 3' }, ]; currentMoreButtonItemMock = { id: 'more', label: 'More' }; }); it('should return refs for container, button, and heading blocks', () => { const { result } = renderHook(() => useAdaptiveTabs(tabsMock, updateChildsMoreButtonItemMock, currentMoreButtonItemMock) ); expect(result.current.containerRef).toBeDefined(); expect(result.current.buttonBlockRef).toBeDefined(); expect(result.current.headingBlockRef).toBeDefined(); }); it('should calculate available space on mount', () => { const { result } = renderHook(() => useAdaptiveTabs(tabsMock, updateChildsMoreButtonItemMock, currentMoreButtonItemMock) ); const mockContainer = document.createElement('div'); Object.defineProperty(mockContainer, 'offsetWidth', { value: 500 }); result.current.containerRef.current = mockContainer; act(() => { window.dispatchEvent(new Event('resize')); }); expect(updateChildsMoreButtonItemMock).toHaveBeenCalled(); }); it('should update hidden tabs when resized', () => { const { result } = renderHook(() => useAdaptiveTabs(tabsMock, updateChildsMoreButtonItemMock, currentMoreButtonItemMock) ); const mockContainer = document.createElement('div'); Object.defineProperty(mockContainer, 'offsetWidth', { value: 300 }); result.current.containerRef.current = mockContainer; act(() => { window.dispatchEvent(new Event('resize')); }); expect(updateChildsMoreButtonItemMock).toHaveBeenCalled(); }); it('should correctly update `updateChildsMoreButtonItem` with hidden tabs', () => { const { result } = renderHook(() => useAdaptiveTabs(tabsMock, updateChildsMoreButtonItemMock, currentMoreButtonItemMock) ); const mockContainer = document.createElement('div'); Object.defineProperty(mockContainer, 'offsetWidth', { value: 150 }); // Small width to hide tabs result.current.containerRef.current = mockContainer; act(() => { window.dispatchEvent(new Event('resize')); }); expect(updateChildsMoreButtonItemMock).toHaveBeenCalledWith( expect.objectContaining({ childIds: expect.any(Array), }) ); }); });
Editor is loading...
Leave a Comment