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

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

import Radio from '..';

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

  it('allows to customize text', () => {
    const { getByText } = renderWithTheme(
      <Radio 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(
      <Radio
        text="Radio text"
        value="radioValue"
        onChange={(e): void => onChange(e.target.checked)}
      />
    );
    fireEvent.click(getByText('Radio text'));
    expect(onChange).toHaveBeenCalledTimes(1);
    expect(onChange).toHaveBeenCalledWith(true);

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

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