@devseed-ui/form/src/helper/Helper.spec.js

devseed UI Kit Form

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

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

import { FormHelper, FormHelperMessage, FormHelperCounter } from '.';

afterAll(cleanup);

describe('<FormHelper />', () => {
  it('renders <FormHelper />', () => {
    const wrapper = renderWithTheme(
      <FormHelper>
        <FormHelperMessage>This is a helper text.</FormHelperMessage>
        <FormHelperCounter>0 / 80</FormHelperCounter>
      </FormHelper>
    );
    expect(wrapper.asFragment()).toMatchSnapshot();
  });
});

describe('<FormHelperCounter />', () => {
  it('renders with any children', () => {
    const wrapper = renderWithTheme(
      <FormHelperCounter>anything</FormHelperCounter>
    );
    expect(wrapper.asFragment()).toMatchSnapshot();
  });
  it('renders with any children regardless of values', () => {
    const wrapper = renderWithTheme(
      <FormHelperCounter value={10} max={100}>
        anything
      </FormHelperCounter>
    );
    expect(wrapper.asFragment()).toMatchSnapshot();
  });
  it('renders with generated children', () => {
    const wrapper = renderWithTheme(<FormHelperCounter value={10} max={100} />);
    expect(wrapper.asFragment()).toMatchSnapshot();
  });
  it('renders with warn color when reaching warn limit (90% of max)', () => {
    const wrapper = renderWithTheme(<FormHelperCounter value={90} max={100} />);
    expect(wrapper.asFragment()).toMatchSnapshot();
  });
  it('renders with warn color when reaching warn limit (provided through warnAt)', () => {
    const wrapper = renderWithTheme(
      <FormHelperCounter value={50} max={100} warnAt={45} />
    );
    expect(wrapper.asFragment()).toMatchSnapshot();
  });
  it('renders with danger color when passing max', () => {
    const wrapper = renderWithTheme(
      <FormHelperCounter value={150} max={100} />
    );
    expect(wrapper.asFragment()).toMatchSnapshot();
  });
});