import React from 'react';
import { fireEvent } from '@testing-library/react';
import renderWithTheme from '../../../testUtils/renderWithTheme';

import CheckboxGroup from '../CheckboxGroup';

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

describe('rendering', () => {
  it('shows checkbox options', () => {
    const { getByText } = renderWithTheme(
      <CheckboxGroup
        name="employment_hero_features"
        value={['hr_software']}
        options={options}
        onChange={jest.fn()}
      />
    );
    expect(getByText('HR Software')).toBeInTheDocument();
    expect(getByText('Digital Payroll')).toBeInTheDocument();
  });
});

describe('interaction', () => {
  it('triggers onChange when clicking on enabled option', () => {
    const onChange = jest.fn();
    const { getByText } = renderWithTheme(
      <CheckboxGroup
        name="employment_hero_features"
        value={['hr_software']}
        options={options}
        onChange={onChange}
      />
    );
    fireEvent.click(getByText('HR Software'));
    expect(onChange).toHaveBeenCalledTimes(1);
    expect(onChange).toHaveBeenCalledWith([]);

    fireEvent.click(getByText('Digital Payroll'));
    expect(onChange).toHaveBeenCalledTimes(1);
  });
});