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;

  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 mock container and append it to the document
    mockContainer = document.createElement('div');
    Object.defineProperty(mockContainer, 'offsetWidth', { value: 500 });
    document.body.appendChild(mockContainer);
  });

  afterEach(() => {
    document.body.removeChild(mockContainer);
  });

  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 = mockContainer;
      window.dispatchEvent(new Event('resize'));
    });

    expect(updateChildsMoreButtonItemMock).toHaveBeenCalled();
  });

  it('should update hidden tabs when resized', () => {
    Object.defineProperty(mockContainer, 'offsetWidth', { value: 300 });

    const { result } = renderHook(() =>
      useAdaptiveTabs(tabsMock, updateChildsMoreButtonItemMock, currentMoreButtonItemMock)
    );

    act(() => {
      result.current.containerRef.current = mockContainer;
      window.dispatchEvent(new Event('resize'));
    });

    expect(updateChildsMoreButtonItemMock).toHaveBeenCalled();
  });

  it('should correctly update `updateChildsMoreButtonItem` with hidden tabs', () => {
    Object.defineProperty(mockContainer, 'offsetWidth', { value: 150 }); // Small width to hide tabs

    const { result } = renderHook(() =>
      useAdaptiveTabs(tabsMock, updateChildsMoreButtonItemMock, currentMoreButtonItemMock)
    );

    act(() => {
      result.current.containerRef.current = mockContainer;
      window.dispatchEvent(new Event('resize'));
    });

    expect(updateChildsMoreButtonItemMock).toHaveBeenCalledWith(
      expect.objectContaining({
        childIds: expect.any(Array),
      })
    );
  });
});