@eureca/eureca-ui/src/components/Radio/__tests__/radio.test.js

UI component library of Eureca's user and admin apps

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

import { MuiThemeProvider } from '@material-ui/core';

import { Radio } from '..';

import MuiTheme from '../../../theme/mui';

function renderInput({ onChange, value, ...props }) {
  return render(
    <MuiThemeProvider theme={MuiTheme}>
      <Radio value={value} onChange={onChange} data-testid="radioTestId" {...props} />
    </MuiThemeProvider>
  );
}

const setup = props => {
  const utils = renderInput(props);
  const radio = utils.getByTestId('radioTestId');
  return { radio, ...utils };
};

const radioLabel = 'Sample';

const onChangeHandler = jest.fn();

describe('Radio button', () => {
  it('renders a radio with label, value and functional onChange', () => {
    const { getByLabelText } = setup({
      label: radioLabel,
      name: 'test-radio',
      value: false,
      checked: false,
      onChange: onChangeHandler,
    });

    const leftClick = { button: 1 };
    const element = getByLabelText(/sample/i);

    expect(element.value).toBe('false');
    expect(element.checked).toBe(false);

    fireEvent.click(element, leftClick);
    expect(onChangeHandler).toHaveBeenCalledTimes(1);
  });

  it('renders a checked radio button', () => {
    const { getByLabelText } = setup({
      label: radioLabel,
      name: 'test-radio-x',
      value: 'the value',
      checked: true,
      onChange: onChangeHandler,
    });

    const element = getByLabelText(new RegExp(radioLabel, 'i'));

    expect(element.value).toBe('the value');
    expect(element.checked).toBe(true);
  });
});