@devseed-ui/form/src/checkable/Checkable.spec.js

devseed UI Kit Form

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

import { renderWithTheme } from '../../../../test/_setup-theme-provider';

import { FormCheckable } from '.';
import { FormCheckableGroup } from '..';

afterAll(cleanup);

describe('<FormCheckable />', () => {
  it('renders <FormCheckable /> as checkbox type', () => {
    expect(
      renderWithTheme(
        <FormCheckableGroup>
          <FormCheckable
            checked={true}
            type='checkbox'
            name='checkbox-a'
            id='checkbox-a'
            value='checkbox-a'
            onChange={() => {}}
          >
            Checkbox A
          </FormCheckable>
          <FormCheckable
            checked={undefined}
            type='checkbox'
            name='checkbox-b'
            id='checkbox-b'
            value='checkbox-b'
            onChange={() => {}}
          >
            Checkbox B
          </FormCheckable>
        </FormCheckableGroup>
      ).asFragment()
    ).toMatchSnapshot();
  });

  it('renders <FormCheckable /> as radio type', () => {
    expect(
      renderWithTheme(
        <FormCheckableGroup>
          <FormCheckable
            textPlacement='right'
            checked={undefined}
            onChange={() => {}}
            type='radio'
            name='radio-a'
            id='radio-a1'
            value='radio-a1'
          >
            Radio A
          </FormCheckable>
          <FormCheckable
            textPlacement='right'
            checked={true}
            onChange={() => {}}
            type='radio'
            name='radio-a'
            id='radio-a2'
            value='radio-a2'
          >
            Radio B
          </FormCheckable>
          <FormCheckable
            textPlacement='right'
            checked={undefined}
            onChange={() => {}}
            type='radio'
            name='radio-a'
            id='radio-a3'
            value='radio-a3'
          >
            Radio C
          </FormCheckable>
          <FormCheckable
            textPlacement='right'
            checked={undefined}
            onChange={() => {}}
            type='radio'
            name='radio-a'
            id='radio-a4'
            value='radio-a4'
          >
            Radio D
          </FormCheckable>
        </FormCheckableGroup>
      ).asFragment()
    ).toMatchSnapshot();
  });

  it('render checkboxes to the left', () => {
    expect(
      renderWithTheme(
        <FormCheckableGroup>
          <FormCheckable
            textPlacement='left'
            checked={true}
            type='checkbox'
            name='checkbox-a'
            id='checkbox-a'
            value='checkbox-a'
            onChange={() => {}}
          >
            Checkbox A
          </FormCheckable>
          <FormCheckable
            checked={undefined}
            textPlacement='left'
            type='checkbox'
            name='checkbox-b'
            id='checkbox-b'
            value='checkbox-b'
            onChange={() => {}}
          >
            Checkbox B
          </FormCheckable>
        </FormCheckableGroup>
      ).asFragment()
    ).toMatchSnapshot();
  });

  it('render radio to the left', () => {
    expect(
      renderWithTheme(
        <FormCheckableGroup>
          <FormCheckable
            textPlacement='left'
            checked={undefined}
            onChange={() => {}}
            type='radio'
            name='radio-a'
            id='radio-a1'
            value='radio-a1'
          >
            Radio A
          </FormCheckable>
          <FormCheckable
            textPlacement='left'
            checked={true}
            onChange={() => {}}
            type='radio'
            name='radio-a'
            id='radio-a2'
            value='radio-a2'
          >
            Radio B
          </FormCheckable>
          <FormCheckable
            textPlacement='left'
            checked={undefined}
            onChange={() => {}}
            type='radio'
            name='radio-a'
            id='radio-a3'
            value='radio-a3'
          >
            Radio C
          </FormCheckable>
          <FormCheckable
            textPlacement='left'
            checked={undefined}
            onChange={() => {}}
            type='radio'
            name='radio-a'
            id='radio-a4'
            value='radio-a4'
          >
            Radio D
          </FormCheckable>
        </FormCheckableGroup>
      ).asFragment()
    ).toMatchSnapshot();
  });
});