import { render, fireEvent, screen } from '../test-utils';

import CheckboxButton from '.';

describe('Checkbox button', () => {
  describe('by default', () => {
    render(<CheckboxButton onChange={jest.fn()} />);
    const checkbox = screen.getByRole('checkbox');

    it('is not checked', () => expect(checkbox).not.toBeChecked());
    it('is not disabled', () => expect(checkbox).toBeEnabled());
  });

  it('applies aria-label if provided', () => {
    render(<CheckboxButton aria-label="An aria label" onChange={jest.fn()} />);
    expect(screen.getByRole('checkbox', { name: 'An aria label' })).toBeInTheDocument();
  });

  it('is checked when checked prop is true', () => {
    render(<CheckboxButton checked onChange={jest.fn()} />);
    expect(screen.getByRole('checkbox')).toBeChecked();
  });

  it('is disabled when disabled prop is true', () => {
    render(<CheckboxButton disabled onChange={jest.fn()} />);
    const checkbox = screen.getByRole('checkbox');
    expect(checkbox).toBeDisabled();
  });

  it('calls onChange handler on change', () => {
    const onChange = jest.fn();
    render(<CheckboxButton onChange={onChange} />);

    const checkbox = screen.getByRole('checkbox');

    expect(onChange).not.toHaveBeenCalled();
    fireEvent.click(checkbox);
    expect(onChange).toHaveBeenCalledTimes(1);
  });
});