import React from 'react';
import { mount, shallow } from 'enzyme';

import Select from '.';

const options = [
  { label: 'Choose Amount', disabled: true, value: '' },
  { label: '1 Owl', value: 1 },
  { label: '2 Owls', value: 2 },
  { label: '3 Owls', value: 3 },
];

describe('Select', () => {
  it('displays the <Select> element', () => {
    const node = shallow(<Select options={options} />);
    expect(node.hasClass('Select')).toBe(true);
  });

  it('displays a large <Select>', () => {
    const node = shallow(<Select options={options} size="lg" />);
    expect(node.find('select').hasClass('Select-Input_lg')).toBe(true);
  });

  it('displays an initial value <Select>', () => {
    const node = shallow(<Select options={options} value={1} />);
    expect(node.find('select').prop('value')).toBe(1);
  });

  it('displays a disabled <Select>', () => {
    const node = shallow(<Select disabled options={options} />);
    expect(node.find('select').prop('disabled')).toBe(true);
  });

  it('should call the onChange handler', () => {
    const onChangeMock = jest.fn();
    const node = mount(<Select onChange={onChangeMock} options={options} />);
    node.find('select').simulate('change', { target: { value: 'test' } });
    expect(onChangeMock).toHaveBeenCalled();
  });
});
