import React from 'react';
import { shallow } from 'enzyme';
import CustomRadioButtons from './CustomRadioButtons';

describe('CustomRadioButtons', () => {
  let component;
  let props;
  const onChangeMock = jest.fn();

  beforeEach(() => {
    props = {
      name: 'testRadioButtons',
      options: ['5', '10', '20'],
      selected: '10',
      onChange: onChangeMock,
      title: 'Some title',
    };
    component = shallow(<CustomRadioButtons {...props} />);
  });

  it('should match a snapshot', () => {
    expect(component.getElement()).toMatchSnapshot();
  });

  it('should set the selected option as checked', () => {
    expect(component.find('#testRadioButtons-option-1').prop('checked')).toEqual(true);
  });

  it('should call the function provided with the onChange prop when the change event on the input is called', () => {
    component
      .find('input[id="testRadioButtons-option-0"]')
      .props()
      .onChange({ target: { value: '5' } });
    expect(onChangeMock.mock.calls.length).toBe(1);
  });

  it('should render the correct title', () => {
    expect(component.find('.CustomRadioButtons-title').text()).toEqual('Some title');
  });

  it('should render the correct amount of options', () => {
    expect(component.find('.CustomRadioButtons-option')).toHaveLength(3);
  });

  it('should render the correct amount of options if there is only one option and set the correct class', () => {
    component.setProps({ options: ['Single Option'] });
    expect(component.find('.CustomRadioButtons-option')).toHaveLength(1);
    expect(component.find('.CustomRadioButtons-option--single')).toHaveLength(1);
  });

  it('should set the correct classes for the last and the first element', () => {
    component.setProps({ options: ['apple', 'oranges', 'bananas', 'melon'] });
    expect(component.find('.CustomRadioButtons-option')).toHaveLength(4);
    expect(
      component
        .find('.CustomRadioButtons')
        .childAt(0)
        .hasClass('CustomRadioButtons-option--first')
    ).toEqual(true);
    expect(
      component
        .find('.CustomRadioButtons')
        .childAt(3)
        .hasClass('CustomRadioButtons-option--last')
    ).toEqual(true);
  });
  it('should set the correct classes for the middle elements', () => {
    component.setProps({ options: ['50', '100', '250', '500'] });
    expect(component.find('.CustomRadioButtons-option')).toHaveLength(4);
    expect(
      component
        .find('.CustomRadioButtons')
        .childAt(1)
        .hasClass('CustomRadioButtons-option--middle')
    ).toEqual(true);
    expect(
      component
        .find('.CustomRadioButtons')
        .childAt(2)
        .hasClass('CustomRadioButtons-option--middle')
    ).toEqual(true);
  });
});