Untitled

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