// @flow
import React from 'react';
import { mountWrappedComponent } from '../../../../utils/tests';
import type { CheckBoxProps } from './check-box.proptypes';
import { CheckBox } from './check-box.component';

const DEFAULT_PROPS: CheckBoxProps = {
  selected: false,
  onToggle: jest.fn(),
  disabled: false,
};

describe('CheckBox', () => {
  it('triggers onSelected when the input in changed', () => {
    const handleOnClick = jest.fn();
    const checkbox = mountWrappedComponent(
      <CheckBox {...DEFAULT_PROPS} disabled={false} onToggle={handleOnClick}>
        Check me
      </CheckBox>,
    );

    expect(handleOnClick).toHaveBeenCalledTimes(0);

    const clickable = checkbox.find('input');
    clickable.simulate('change');

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

  it('renders an invisible input', () => {
    const checkbox = mountWrappedComponent(
      <CheckBox {...DEFAULT_PROPS}>Check me</CheckBox>,
    );
    const invisibleInput = checkbox.find('input');

    expect(invisibleInput.props()).toEqual(
      expect.objectContaining({
        type: 'checkbox',
        className: expect.any(String),
        checked: DEFAULT_PROPS.selected,
        disabled: DEFAULT_PROPS.disabled,
      }),
    );

    expect(invisibleInput).toHaveStyleRule('opacity', '0');
  });

  it('both the invisible and visible inputs are selected at the same time', () => {
    const selectedState = [true, false];

    selectedState.forEach((state) => {
      const checkbox = mountWrappedComponent(
        <CheckBox {...DEFAULT_PROPS} selected={state}>
          Check me
        </CheckBox>,
      );

      const visibleInput = checkbox.find('CheckBoxIcon');
      const invisibleInput = checkbox.find('input');

      expect(visibleInput.prop('checked')).toBe(
        invisibleInput.prop('selected'),
      );
    });
  });
});
