Untitled
unknown
plain_text
2 months ago
3.6 kB
3
Indexable
import { renderHook, act } from '@testing-library/react'; import { describe, expect, it, beforeEach, afterEach, vi } from 'vitest'; import { useAdaptiveTabs } from '../'; import { FlatMenuItem } from '../../types'; describe('useAdaptiveTabs', () => { let updateChildsMoreButtonItemMock: ReturnType<typeof vi.fn>; let tabsMock: FlatMenuItem[]; let currentMoreButtonItemMock: FlatMenuItem; let mockContainer: HTMLDivElement; let getBoundingClientRectSpy: ReturnType<typeof vi.spyOn>; beforeEach(() => { updateChildsMoreButtonItemMock = vi.fn(); tabsMock = [ { id: 'item_1', path: '/path1', active: false, title: 'Title 1', childIds: [] }, { id: 'item_2', path: '/path2', active: false, title: 'Title 2', childIds: [] }, { id: 'item_3', path: '/path3', active: false, title: 'Title 3', childIds: [] } ]; currentMoreButtonItemMock = { id: 'more', title: 'More', path: '/path', active: false, childIds: [], childIdsCollection: {} }; // Create a mock container and add it to the document mockContainer = document.createElement('div'); document.body.appendChild(mockContainer); // Spy on getBoundingClientRect instead of redefining offsetWidth getBoundingClientRectSpy = vi.spyOn(mockContainer, 'getBoundingClientRect').mockReturnValue({ width: 500, // Initial width height: 0, top: 0, left: 0, bottom: 0, right: 0, x: 0, y: 0, toJSON: () => ({}), }); }); afterEach(() => { document.body.removeChild(mockContainer); getBoundingClientRectSpy.mockRestore(); }); 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) ); act(() => { result.current.containerRef.current?.appendChild(mockContainer); window.dispatchEvent(new Event('resize')); }); expect(updateChildsMoreButtonItemMock).toHaveBeenCalled(); }); it('should update hidden tabs when resized', () => { getBoundingClientRectSpy.mockReturnValue({ ...mockContainer.getBoundingClientRect(), width: 300 }); const { result } = renderHook(() => useAdaptiveTabs(tabsMock, updateChildsMoreButtonItemMock, currentMoreButtonItemMock) ); act(() => { result.current.containerRef.current?.appendChild(mockContainer); window.dispatchEvent(new Event('resize')); }); expect(updateChildsMoreButtonItemMock).toHaveBeenCalled(); }); it('should correctly update `updateChildsMoreButtonItem` with hidden tabs', () => { getBoundingClientRectSpy.mockReturnValue({ ...mockContainer.getBoundingClientRect(), width: 150 }); const { result } = renderHook(() => useAdaptiveTabs(tabsMock, updateChildsMoreButtonItemMock, currentMoreButtonItemMock) ); act(() => { result.current.containerRef.current?.appendChild(mockContainer); window.dispatchEvent(new Event('resize')); }); expect(updateChildsMoreButtonItemMock).toHaveBeenCalledWith( expect.objectContaining({ childIds: expect.any(Array), }) ); }); });
Editor is loading...
Leave a Comment