veza/apps/web/src/components/ui/DataList.test.tsx

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

interface TestItem {
  id: string;
  name: string;
}

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

  it('renders items', () => {
    render(
      <DataList
        items={mockItems}
        renderItem={(item) => <div>{item.name}</div>}
        keyExtractor={(item) => item.id}
      />,
    );

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

  it('renders empty message when items array is empty', () => {
    render(
      <DataList
        items={[]}
        renderItem={(item) => <div>{item.name}</div>}
        keyExtractor={(item) => item.id}
        emptyMessage="No items found"
      />,
    );

    expect(screen.getByText('No items found')).toBeInTheDocument();
  });

  it('renders custom empty message', () => {
    render(
      <DataList
        items={[]}
        renderItem={(item) => <div>{item.name}</div>}
        keyExtractor={(item) => item.id}
        emptyMessage="Custom empty message"
      />,
    );

    expect(screen.getByText('Custom empty message')).toBeInTheDocument();
  });

  it('renders error message when error is provided', () => {
    render(
      <DataList
        items={mockItems}
        renderItem={(item) => <div>{item.name}</div>}
        keyExtractor={(item) => item.id}
        error="Failed to load items"
      />,
    );

    expect(screen.getByText('Failed to load items')).toBeInTheDocument();
    expect(screen.queryByText('Item 1')).not.toBeInTheDocument();
  });

  it('shows loading skeleton when loading is true', () => {
    const { container } = render(
      <DataList
        items={mockItems}
        renderItem={(item) => <div>{item.name}</div>}
        keyExtractor={(item) => item.id}
        loading={true}
      />,
    );

    // DataListSkeleton renders Skeleton components which use skeleton-shimmer class
    const skeletons = container.querySelectorAll('.skeleton-shimmer');
    expect(skeletons.length).toBeGreaterThan(0);
    expect(screen.queryByText('Item 1')).not.toBeInTheDocument();
  });

  it('applies custom className', () => {
    const { container } = render(
      <DataList
        items={mockItems}
        renderItem={(item) => <div>{item.name}</div>}
        keyExtractor={(item) => item.id}
        className="custom-class"
      />,
    );

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

  it('applies itemClassName to items', () => {
    const { container } = render(
      <DataList
        items={mockItems}
        renderItem={(item) => <div>{item.name}</div>}
        keyExtractor={(item) => item.id}
        itemClassName="item-class"
      />,
    );

    const items = container.querySelectorAll('.item-class');
    expect(items.length).toBe(3);
  });
});