import { Person as ProfileIcon } from '@transferwise/icons';
import { Flag } from '@wise/art';
import { shallow } from 'enzyme';

import Body from '../../body';

import Option from './Option';

describe('option', () => {
  let component;
  let props;

  beforeEach(() => {
    props = { label: 'hello' };
    component = shallow(<Option {...props} />);
  });

  it('renders the given small note', () => {
    component.setProps({ note: 'whadup' });
    expect(component.find(Body).last().props().children).toStrictEqual('whadup');
  });

  it('renders the given secondary text in a separate line', () => {
    component.setProps({ secondary: 'secondary text' });
    expect(component.find(Body).last().props().children).toStrictEqual('secondary text');
  });

  it('renders a given icon', () => {
    component.setProps({ icon: <ProfileIcon /> });
    expect(component.find(ProfileIcon)).toHaveLength(1);
  });

  it('renders the given currency flag for a given currency', () => {
    component.setProps({ currency: 'hustle' });
    expect(component.find(Flag)).toHaveLength(1);
  });

  it('overrides currency flag with icon', () => {
    component.setProps({ currency: 'hustle', icon: <ProfileIcon /> });
    expect(component.find(ProfileIcon)).toHaveLength(1);
    expect(component.find(Flag)).toHaveLength(0);
  });
});
