@eureca/eureca-ui/src/components/Switch/__tests__/switch.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 { Switch } from '..';

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

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

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

const switchLabel = 'Sample';

const onChangeHandler = jest.fn().mockImplementation(value => {
  return value.target.checked;
});

describe('Switch button', () => {
  it('renders a switch with label, value and functional onChange', () => {
    const { getByLabelText } = setup({
      label: switchLabel,
      value: false,
      checked: false,
      name: 'Switch Test',
      onChange: onChangeHandler,
    });

    const element = getByLabelText(/sample/i);

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

    fireEvent.click(element);

    expect(onChangeHandler).toHaveBeenCalledTimes(1);
    expect(onChangeHandler).toReturnWith(true);
  });
});