@devseed-ui/form/src/switch/Switch.spec.js

devseed UI Kit Form

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

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

import FormSwitch from '.';

afterAll(cleanup);

describe('<FormSwitch />', () => {
  it('renders <FormSwitch />', () => {
    const wrapper = renderWithTheme(
      <FormSwitch
        name='s-name'
        id='s-id'
        value='s-value'
        title='s-title'
        checked={true}
        onChange={() => {}}
      >
        sample switch
      </FormSwitch>
    );
    expect(wrapper.asFragment()).toMatchSnapshot();
  });

  it('renders <FormSwitch /> with text on the right', () => {
    const wrapper = renderWithTheme(
      <FormSwitch
        name='s2-name'
        id='s2-id'
        value='s2-value'
        textPlacement='right'
        checked={true}
        onChange={() => {}}
      >
        sample switch
      </FormSwitch>
    );
    expect(wrapper.asFragment()).toMatchSnapshot();
  });

  it('renders <FormSwitch /> with text hidden', () => {
    const wrapper = renderWithTheme(
      <FormSwitch
        name='switch-name3'
        id='switch-id3'
        value='switch-value3'
        hideText
        checked={true}
        onChange={() => {}}
      >
        text
      </FormSwitch>
    );
    expect(wrapper.getByText('text')).toHaveStyle('clip: rect(0, 0, 0, 0);');
  });
});