import React from 'react';
import { render, screen } from '@testing-library/react';
import { Person as ProfileIcon } from '@transferwise/icons';

import Option, { Props as OptionProps } from './Option';

describe('Option', () => {
  const defaultProps: OptionProps<string> = {
    testId: 'test-option',
    label: 'Option Label',
    value: 'option-value',
  };

  const renderOption = (props: Partial<OptionProps<string>> = {}) => {
    return render(<Option {...defaultProps} {...props} />);
  };

  it('should render the Option component', () => {
    renderOption();
    expect(screen.getByText('Option Label')).toBeInTheDocument();
  });

  it('should render the given note', () => {
    renderOption({ note: 'Note Text' });
    expect(screen.getByText('Note Text')).toBeInTheDocument();
  });

  it('should render the given secondary text', () => {
    renderOption({ secondary: 'Secondary Text' });
    expect(screen.getByText('Secondary Text')).toBeInTheDocument();
  });

  it('should render the given icon', () => {
    renderOption({ icon: <ProfileIcon /> });
    const optionElement = screen.getByTestId('test-option');
    expect(optionElement.querySelector('svg')).toBeInTheDocument();
  });

  it('should render the given currency flag for a given currency', () => {
    renderOption({ currency: 'USD' });
    const optionElement = screen.getByTestId('test-option');
    expect(optionElement.querySelector('img')).toBeInTheDocument();
  });

  it('should override the currency flag with the given icon', () => {
    renderOption({ currency: 'USD', icon: <ProfileIcon /> });
    const optionElement = screen.getByTestId('test-option');
    expect(optionElement.querySelector('svg')).toBeInTheDocument();
    expect(optionElement.querySelectorAll('svg')).toHaveLength(1);
  });
});