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

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

const RadioButton = Radio.Button;

describe('rendering', () => {
  it('shows text label', () => {
    const { getByText } = renderWithTheme(
      <RadioButton text="RadioButton text" value="radioValue" />
    );
    expect(getByText('RadioButton text')).toBeInTheDocument();
  });

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

describe('interaction', () => {
  it('triggers onChange when clicking on', () => {
    const onChange = jest.fn();
    const { getByText } = renderWithTheme(
      <RadioButton
        text="RadioButton text"
        value="radioValue"
        onChange={(e): void => onChange(e.target.checked)}
      />
    );
    fireEvent.click(getByText('RadioButton text'));
    expect(onChange).toHaveBeenCalledTimes(1);
    expect(onChange).toHaveBeenCalledWith(true);

    fireEvent.click(getByText('RadioButton text'));
    expect(onChange).toHaveBeenCalledTimes(1);
  });

  it('allows to be controlled', () => {
    const onChange = jest.fn();
    const { getByText } = renderWithTheme(
      <RadioButton
        text="RadioButton text"
        value="radioValue"
        checked={false}
        onChange={(e): void => onChange(e.target.checked)}
      />
    );
    fireEvent.click(getByText('RadioButton text'));
    expect(onChange).toHaveBeenCalledTimes(1);
    expect(onChange).toHaveBeenCalledWith(true);
  });
});

describe('RadioButton', () => {
  it.each`
    intent
    ${'basic'}
    ${'primary'}
    ${'danger'}
    ${'warning'}
    ${'error'}
    ${'success'}
  `('renders $intent button correctly.', ({ intent }) => {
    const { container } = renderWithTheme(
      <RadioButton
        text="RadioButton text"
        value="radioValue"
        onChange={jest.fn()}
        intent={intent}
      />
    );
    expect(container.firstChild).toMatchSnapshot();
  });
});