@devseed-ui/form/src/group/Group.spec.js

devseed UI Kit Form

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

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

import { FormGroup, FormGroupHeader, FormGroupBody, FormGroupFooter } from '.';
import { FormGroupStructure } from './form-group-structure';

afterAll(cleanup);

describe('<FormGroup />', () => {
  it('renders <FormGroup />', () => {
    expect(
      renderWithTheme(<FormGroup>content</FormGroup>).asFragment()
    ).toMatchSnapshot();
  });

  it('renders <FormGroupHeader />', () => {
    expect(
      renderWithTheme(<FormGroupHeader>content</FormGroupHeader>).asFragment()
    ).toMatchSnapshot();
  });

  it('renders <FormGroupHeader /> with hidden', () => {
    expect(
      renderWithTheme(
        <FormGroupHeader isHidden>content</FormGroupHeader>
      ).asFragment()
    ).toMatchSnapshot();
  });

  it('renders <FormGroupBody />', () => {
    expect(
      renderWithTheme(<FormGroupBody>content</FormGroupBody>).asFragment()
    ).toMatchSnapshot();
  });

  it('renders <FormGroupFooter />', () => {
    expect(
      renderWithTheme(<FormGroupFooter>content</FormGroupFooter>).asFragment()
    ).toMatchSnapshot();
  });

  it('renders <FormGroupStructure /> with minimal props', () => {
    expect(
      renderWithTheme(
        <FormGroupStructure className='test' id='test' label='test label'>
          content
        </FormGroupStructure>
      ).asFragment()
    ).toMatchSnapshot();
  });

  it('renders <FormGroupStructure /> with elements', () => {
    expect(
      renderWithTheme(
        <FormGroupStructure
          className='test2'
          id='test2'
          label='test label2'
          toolbar={<div>toolbar</div>}
          footerContent={<div>footer</div>}
          helper={<div>helpers</div>}
        >
          content
        </FormGroupStructure>
      ).asFragment()
    ).toMatchSnapshot();
  });
});