import { render, screen } from '../../test-utils';
import { ListItem, type ListItemProps } from '../ListItem';

const renderWithMedia = (media: ListItemProps['media']) =>
  render(<ListItem title="Test Title" media={media} />);

describe('ListItem.Image', () => {
  it('renders image with presentation role when no alt text', () => {
    renderWithMedia(<ListItem.Image src="test-image.jpg" />);
    expect(screen.getByRole('presentation')).toHaveAttribute('src', 'test-image.jpg');
  });

  it('renders image with img role when alt text provided', () => {
    renderWithMedia(<ListItem.Image src="test-image.jpg" alt="Test image description" />);

    const image = screen.getByRole('img');
    expect(image).toHaveAttribute('alt', 'Test image description');
    expect(image).toHaveAttribute('src', 'test-image.jpg');
  });

  it('renders image with loading prop', () => {
    renderWithMedia(<ListItem.Image src="test-image.jpg" loading="lazy" />);
    expect(screen.getByRole('presentation')).toHaveAttribute('loading', 'lazy');
  });

  it('renders image with className prop', () => {
    renderWithMedia(<ListItem.Image src="test-image.jpg" className="custom-image-class" />);
    expect(screen.getByRole('presentation')).toHaveClass('custom-image-class');
  });
});