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

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

import SelectButton from '..';

describe('rendering', () => {
  it('shows text labe;', () => {
    const { getByText } = renderWithTheme(
      <SelectButton value="selectButton" text="SelectButton Text" />
    );
    expect(getByText('SelectButton Text')).toBeInTheDocument();
  });

  it('allows to customize text', () => {
    const { getByText } = renderWithTheme(
      <SelectButton value="selectButton" text={<div>Customized text</div>} />
    );
    expect(getByText('Customized text')).toBeInTheDocument();
  });
});

describe('interaction', () => {
  it('triggers onChange when clicking on the button', () => {
    const onChange = jest.fn();
    const { getByText } = renderWithTheme(
      <SelectButton
        value="selectButton"
        text="SelectButton Text"
        onChange={(e): void => onChange(e.target.checked)}
      />
    );

    fireEvent.click(getByText('SelectButton Text'));
    expect(onChange).toHaveBeenCalledTimes(1);
    expect(onChange).toHaveBeenCalledWith(true);

    fireEvent.click(getByText('SelectButton Text'));
    expect(onChange).toHaveBeenCalledTimes(1);
  });

  it('does not trigger onChange when clicking on a disabled button', () => {
    const onChange = jest.fn();
    const { getByText } = renderWithTheme(
      <SelectButton
        value="selectButton"
        text="SelectButton Text"
        disabled
        onChange={(e): void => onChange(e.target.checked)}
      />
    );

    fireEvent.click(getByText('SelectButton Text'));
    expect(onChange).not.toHaveBeenCalled();
  });

  it('allows to be controlled', () => {
    const onChange = jest.fn();
    const { getByText } = renderWithTheme(
      <SelectButton
        value="selectButton"
        text="SelectButton Text"
        selected={false}
        onChange={(e): void => onChange(e.target.checked)}
      />
    );

    fireEvent.click(getByText('SelectButton Text'));
    expect(onChange).toHaveBeenCalledTimes(1);
    expect(onChange).toHaveBeenCalledWith(true);
  });
});