veza/apps/web/src/components/ui/virtualized-list.test.tsx

import { render, screen } from '@testing-library/react';
import { describe, it, expect, vi } from 'vitest';
import { VirtualizedList } from './virtualized-list';

// Mock @tanstack/react-virtual
vi.mock('@tanstack/react-virtual', () => ({
  useVirtualizer: () => ({
    getVirtualItems: () => [
      { index: 0, key: 0, start: 0, end: 50, size: 50 },
      { index: 1, key: 1, start: 50, end: 100, size: 50 },
    ],
    getTotalSize: () => 150,
    measureElement: () => {},
  }),
}));

describe('VirtualizedList Component', () => {
  const mockItems = [
    { id: '1', name: 'Item 1' },
    { id: '2', name: 'Item 2' },
    { id: '3', name: 'Item 3' },
  ];

  it('renders virtualized list', () => {
    render(
      <VirtualizedList
        items={mockItems}
        itemHeight={50}
        containerHeight={200}
        renderItem={(item) => <div>{item.name}</div>}
      />,
    );

    expect(screen.getByText('Item 1')).toBeInTheDocument();
    expect(screen.getByText('Item 2')).toBeInTheDocument();
  });

  it('applies custom className', () => {
    const { container } = render(
      <VirtualizedList
        items={mockItems}
        itemHeight={50}
        containerHeight={200}
        renderItem={(item) => <div>{item.name}</div>}
        className="custom-class"
      />,
    );

    expect(container.firstChild).toHaveClass('custom-class');
  });

  it('calls onScroll when scrolling', () => {
    const mockOnScroll = vi.fn();

    render(
      <VirtualizedList
        items={mockItems}
        itemHeight={50}
        containerHeight={200}
        renderItem={(item) => <div>{item.name}</div>}
        onScroll={mockOnScroll}
      />,
    );

    // Scroll event would trigger onScroll
    // This is a basic test - actual scroll testing would require more setup
    expect(mockOnScroll).toBeDefined();
  });

  it('calls onItemsRendered when items are rendered', () => {
    const mockOnItemsRendered = vi.fn();

    render(
      <VirtualizedList
        items={mockItems}
        itemHeight={50}
        containerHeight={200}
        renderItem={(item) => <div>{item.name}</div>}
        onItemsRendered={mockOnItemsRendered}
      />,
    );

    // onItemsRendered would be called during rendering
    expect(mockOnItemsRendered).toBeDefined();
  });
});