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

import InstructionsList from '.';

describe('InstructionsList', () => {
  it('should render with custom class', () => {
    render(<InstructionsList className="foo" dos={['bar', 'baz']} />);
    expect(screen.getByRole('list')).toHaveClass('foo');
  });

  it('should render dos list only', () => {
    const dos = ['Test this component', 'With multiple dos'];
    render(<InstructionsList dos={dos} />);

    expect(screen.getByText(dos[0])).toBeInTheDocument();
    expect(screen.getByText(dos[1])).toBeInTheDocument();
  });

  it('should render donts list only', () => {
    const donts = ['Card validation', 'ID verification'];

    render(<InstructionsList donts={donts} />);
    expect(screen.getByText(donts[0])).toBeInTheDocument();
    expect(screen.getByText(donts[1])).toBeInTheDocument();
  });

  it('should render do/dont lists with description for icons', () => {
    const dos = [{ content: 'Card validation', 'aria-label': 'Provides card validation' }];
    const donts = [{ content: 'ID verification', 'aria-label': 'No ID verification' }];

    const { container } = render(<InstructionsList dos={dos} donts={donts} />);
    expect(screen.getByText(dos[0].content)).toBeInTheDocument();
    expect(screen.getByText(donts[0].content)).toBeInTheDocument();

    const instructions = container.querySelectorAll('.instruction');
    expect(instructions).toHaveLength(2);
    expect(
      within(instructions[0] as HTMLElement).getByRole('graphics-symbol', {
        name: dos[0]['aria-label'],
      }),
    ).toBeInTheDocument();
    expect(
      within(instructions[1] as HTMLElement).getByRole('graphics-symbol', {
        name: donts[0]['aria-label'],
      }),
    ).toBeInTheDocument();
  });

  it('should render donts first when sort is set to `dontsFirst`', () => {
    const dos = [{ content: 'Card validation', 'aria-label': 'Provides card validation' }];
    const donts = [{ content: 'ID verification', 'aria-label': 'No ID verification' }];

    const { container } = render(<InstructionsList dos={dos} donts={donts} sort="dontsFirst" />);
    expect(screen.getByText(dos[0].content)).toBeInTheDocument();
    expect(screen.getByText(donts[0].content)).toBeInTheDocument();

    const instructions = container.querySelectorAll('.instruction');
    expect(instructions).toHaveLength(2);
    expect(
      within(instructions[0] as HTMLElement).getByRole('graphics-symbol', {
        name: donts[0]['aria-label'],
      }),
    ).toBeInTheDocument();
    expect(
      within(instructions[1] as HTMLElement).getByRole('graphics-symbol', {
        name: dos[0]['aria-label'],
      }),
    ).toBeInTheDocument();
  });
});