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

import renderWithTheme from '../../../testUtils/renderWithTheme';

import SelectButton from '..';

const SelectButtonGroup = SelectButton.Group;

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

describe('rendering', () => {
  it('shows all options', () => {
    const { getByText } = renderWithTheme(
      <SelectButtonGroup
        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(
      <SelectButtonGroup
        name="employment_hero_features"
        value=""
        options={options}
        onChange={onChange}
      />
    );
    fireEvent.click(getByText('HR Software'));
    expect(onChange).toHaveBeenCalledTimes(1);
    expect(onChange).toHaveBeenCalledWith('hr_software');

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