import React from 'react';

import userEvent from '@testing-library/user-event';
import renderWithTheme from '../../../testUtils/renderWithTheme';

import Checkbox from '..';

const CheckboxButtonGroup = Checkbox.ButtonGroup;

const options = [
  { value: 'hr_software', text: 'HR Software' },
  { value: 'digital_payroll', text: 'Digital Payroll', disabled: true },
  { value: 'global_teams', text: 'Global Teams' },
];

describe('rendering', () => {
  it('shows all options', () => {
    const { getByText } = renderWithTheme(
      <CheckboxButtonGroup
        name="employment_hero_features"
        value={['hr_software']}
        options={options}
        onChange={jest.fn()}
      />
    );

    expect(getByText('HR Software')).toBeInTheDocument();
    expect(getByText('Digital Payroll')).toBeInTheDocument();
    expect(getByText('Global Teams')).toBeInTheDocument();
  });
});

describe('interaction', () => {
  it('allows multiple choices', () => {
    const onChange = jest.fn();
    const { getByText } = renderWithTheme(
      <CheckboxButtonGroup
        name="employment_hero_features"
        value={[]}
        options={options}
        onChange={onChange}
      />
    );
    userEvent.click(getByText('HR Software'));
    expect(onChange).toHaveBeenCalledTimes(1);
    expect(onChange).toHaveBeenCalledWith(['hr_software']);

    userEvent.click(getByText('Global Teams'));
    expect(onChange).toHaveBeenCalledTimes(2);
    expect(onChange).toHaveBeenCalledWith(['global_teams']);
  });
});