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

import type { RadioProps } from './radio.proptypes';
import { Radio } from './index';

const DEFAULT_PROPS: RadioProps = {
  name: 'radiobtn',
  selected: false,
  onSelected: jest.fn(),
  value: 'aValue',
};

describe('Radio', () => {
  it('calls onClick with given value', () => {
    const handleOnClick = jest.fn();
    const radioButton = shallowWrappedComponent(
      <Radio {...DEFAULT_PROPS} onSelected={handleOnClick}>
        some label
      </Radio>,
    );

    expect(handleOnClick).toHaveBeenCalledTimes(0);

    const clickable = radioButton.find('InvisibleInput');
    clickable.simulate('change', { target: { value: DEFAULT_PROPS.value } });

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

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

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

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

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

  itIsAccessible(<Radio {...DEFAULT_PROPS}>A label</Radio>);
});
