@devseed-ui/form/src/label/Label.spec.js

devseed UI Kit Form

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

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

import FormLabel from '.';

afterAll(cleanup);

describe('<FormLabel />', () => {
  it('renders <FormLabel />', () => {
    const wrapper = renderWithTheme(
      <FormLabel htmlFor='textarea-a'>Invalid Input</FormLabel>
    );
    expect(wrapper.asFragment()).toMatchSnapshot();
  });

  it('renders <FormLabel /> with optional hint', () => {
    const wrapper = renderWithTheme(
      <FormLabel htmlFor='textarea-a' optional>
        Invalid Input
      </FormLabel>
    );
    expect(wrapper.asFragment()).toMatchSnapshot();
  });

  it('renders <FormLabel /> with required hint', () => {
    const wrapper = renderWithTheme(
      <FormLabel htmlFor='textarea-a' required>
        Invalid Input
      </FormLabel>
    );
    expect(wrapper.asFragment()).toMatchSnapshot();
  });

  it('renders <FormLabel /> with hint priority', () => {
    const wrapper = renderWithTheme(<FormLabel optional>label</FormLabel>);
    expect(wrapper.container).toHaveTextContent('label (optional)');
    // Required overrides optional.
    const wrapper2 = renderWithTheme(
      <FormLabel optional required>
        label
      </FormLabel>
    );
    expect(wrapper2.container).toHaveTextContent('label (required)');
    // Custom overrides required.
    const wrapper3 = renderWithTheme(
      <FormLabel optional required hint='custom'>
        label
      </FormLabel>
    );
    expect(wrapper3.container).toHaveTextContent('label custom');
  });

  it('renders <FormLabel /> with custom hint', () => {
    const wrapper = renderWithTheme(
      <FormLabel htmlFor='textarea-a' hint='custom'>
        Invalid Input
      </FormLabel>
    );
    expect(wrapper.asFragment()).toMatchSnapshot();
  });
});