react-common/lib/components/RadioButton/RadioButton.test.tsx

/// <reference types="jest-enzyme" />
/// <reference path="../../../utilities/jest/extensions.ts" />

import * as fc from 'fast-check'
import * as Enzyme from 'enzyme'
import * as Axe from 'jest-axe'
import * as React from 'react'
import RadioButton from './RadioButton'
import stringify from '../../services/stringify'

it('should exist', () => {
  expect(RadioButton).toBeDefined()
})

it('should be a component', () => {
  expect(RadioButton).toBeComponent()
})

it('should render without crashing given required props', () => {
  expect(() => <RadioButton name="foo" />).not.toThrow()
})

it("should render a label to indicate the nature of the component's value", () => {
  const wrapper = Enzyme.shallow(<RadioButton name="foo" label="foo" />)

  expect(wrapper.find('label').children()).toHaveLength(4)
})

it('should render a label to describe the intrinsic value of the component', () => {
  fc.assert(
    fc.property(fc.anything(), (label) => {
      const wrapper = Enzyme.shallow(<RadioButton label={label} name="foo" />)

      expect(
        wrapper
          .find('label')
          .children()
          .last(),
      ).toHaveText(stringify(label))
    }),
    {
      numRuns: 300,
    },
  )
})

it('should render the label when undefined or null', () => {
  fc.assert(
    fc.property(fc.oneof(fc.constant(void 0), fc.constant(null)), (label) => {
      const wrapper = Enzyme.shallow(<RadioButton name="foo" label={label} />)

      expect(
        wrapper
          .find('label')
          .children()
          .last()
          .text(),
      ).toHaveLength(0)
    }),
  )
})

it('should render the input', () => {
  const wrapper = Enzyme.shallow(<RadioButton name="foo" />)

  expect(wrapper.find('label').find('input')).toHaveLength(1)
})

it('should guarantee minimal accessibility', async () => {
  await fc.assert(
    fc.asyncProperty(fc.string().filter((s) => s.trim().length > 0), async (s) => {
      const wrapper = Enzyme.mount(
        <div role="application">
          <RadioButton name="foo" label={s} />
        </div>,
      )

      const results = await Axe.axe(wrapper.getDOMNode<HTMLHtmlElement>())

      expect(results).toHaveNoViolations()
    }),
  )
})