Untitled

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),
      })
    );
  });
});