// @flow
import React from 'react';
import {
  mountWrappedComponent,
  shallowWrappedComponent,
  itIsAccessible,
} from '../../../../utils/tests';

import type { RadioButtonProps } from './radio-button.proptypes';
import { RadioButton } from './index';

const DEFAULT_PROPS: RadioButtonProps = {
  id: 'test-id',
  name: 'radiobtn',
  selected: false,
  text: 'great label',
  onClick: jest.fn(),
};

describe('RadioButton', () => {
  it('calls onClick with given id', () => {
    const handleOnClick = jest.fn();
    const radioButton = shallowWrappedComponent(
      <RadioButton {...DEFAULT_PROPS} onClick={handleOnClick} />,
    );

    expect(handleOnClick).toHaveBeenCalledTimes(0);

    const clickable = radioButton.find('RadioButtonContainer');
    clickable.simulate('click');

    expect(handleOnClick).toHaveBeenCalledTimes(1);
    expect(handleOnClick).toHaveBeenCalledWith(DEFAULT_PROPS.id);
  });

  it('selects both the invisible and visible inputs', () => {
    const selectedState = [true, false];

    selectedState.forEach((state) => {
      const radioButton = mountWrappedComponent(
        <RadioButton {...DEFAULT_PROPS} selected={state} />,
      );

      const invisibleInput = radioButton.find('input');
      expect(invisibleInput.prop('checked')).toBe(state);

      const visibleInput = radioButton.find('StyledRadioOption');
      expect(visibleInput.prop('checked')).toEqual(state);
    });
  });

  itIsAccessible(<RadioButton {...DEFAULT_PROPS} />);
});
