import { shallow, mount } from 'enzyme';

import { fakeEvent } from '../../common/fakeEvents';

import TypeaheadOption from './TypeaheadOption';
import Highlight from '../util/highlight';

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

  const labelHighlight = () => component.find(Highlight);
  const noteSpan = () => component.find('.np-text-body-default.m-l-1');
  const secondaryTextHighlight = () => component.find('.np-text-body-default.text-ellipsis > span');
  const dropdownItem = () => component.find('.dropdown-item');

  beforeEach(() => {
    props = {
      option: {
        label: 'test',
      },
    };

    component = mount(<TypeaheadOption {...props} />);
  });

  it('renders a label', () => {
    const label = 'test';
    component.setProps({ option: { label } });
    expect(labelHighlight().text()).toStrictEqual(label);
  });

  it('renders a note', () => {
    const label = 'test';
    const note = 'test note';
    component.setProps({ option: { label, note } });
    expect(noteSpan().text()).toStrictEqual(note);
  });

  it('renders a seconday text', () => {
    const label = 'test';
    const secondary = 'test note';
    component.setProps({ option: { label, secondary } });
    expect(secondaryTextHighlight().text()).toStrictEqual(secondary);
  });

  it('highlights when selected', () => {
    component = shallow(<TypeaheadOption {...props} />);
    component.setProps({
      selected: true,
    });

    expect(component.is('.tw-dropdown-item--focused')).toBe(true);
  });

  it('expect aria-selected to be true', () => {
    component = shallow(<TypeaheadOption {...props} />);
    component.setProps({
      selected: true,
    });

    expect(component.prop('aria-selected')).toBe('true');
  });

  it('calls onClick when clicked', () => {
    const onClick = jest.fn();
    component.setProps({
      onClick,
    });

    dropdownItem().simulate('click', fakeEvent);

    expect(onClick).toHaveBeenCalledTimes(1);
  });
});
