import { render, screen } from '../test-utils';
import List from './List';

describe('List', () => {
  it('should render content', () => {
    render(
      <List>
        <li>Item 1</li>
        <li>Item 2</li>
      </List>,
    );

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

  describe('`as` prop', () => {
    it('renders `ul` by default', () => {
      render(<List>Content</List>);
      expect(screen.getByRole('list')).toBeInstanceOf(HTMLUListElement);
    });

    it('renders as `ol`', () => {
      render(<List as="ol">Content</List>);
      expect(screen.getByRole('list')).toBeInstanceOf(HTMLOListElement);
    });

    it('renders as `ul`', () => {
      render(<List as="ul">Content</List>);
      expect(screen.getByRole('list')).toBeInstanceOf(HTMLUListElement);
    });

    it('renders as `div`', () => {
      render(
        <List as="div" data-testid="list">
          Content
        </List>,
      );
      expect(screen.getByTestId('list')).toBeInstanceOf(HTMLDivElement);
    });
  });

  it('accepts custom classname', () => {
    render(<List className="custom-class">Content</List>);
    expect(screen.getByRole('list')).toHaveClass('custom-class');
  });

  it('accepts CSS style', () => {
    render(<List style={{ color: 'red' }}>Content</List>);
    expect(screen.getByRole('list')).toHaveStyle({ color: 'red' });
  });
});