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

import ListItem from '.';

describe('ListItem', () => {
  it('shows the title and description', async () => {
    render(<ListItem title="Some title" value="Some description" as="li" />);

    const listItem = await findListItem();

    expect(listItem).toHaveClass('np-list-item');

    expect(within(listItem).getByText('Some title')).toBeInTheDocument();
    expect(within(listItem).getByText('Some description')).toBeInTheDocument();
  });

  it('shows an action', async () => {
    render(
      <ListItem
        title="Account number"
        value="123"
        action={
          <Button v2 size="sm">
            Copy
          </Button>
        }
      />,
    );

    const listItem = await findListItem();

    const actionButton = await within(listItem).findByRole('button', { name: 'Copy' });
    expect(actionButton).toBeInTheDocument();
  });

  it('shows media icon', async () => {
    render(
      <ListItem
        title="Some title"
        value="Some desctiption"
        media={
          <img
            style={{ width: 32, height: 32 }}
            src="https://wise.com/public-resources/assets/balances/savings-emoji/google/✈️.png"
            alt="icon"
          />
        }
      />,
    );

    const listItem = await findListItem();

    expect(within(listItem).getByAltText('icon')).toBeInTheDocument();
  });

  const findListItem = async () => screen.findByRole('listitem');
});