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

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

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

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

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

it('should render a base element to put interactive elements on', () => {
  const wrapper = Enzyme.shallow(<Select />)

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

it('should render a select component for choosing values', () => {
  const wrapper = Enzyme.shallow(<Select />)

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

describe('on aiding user input', () => {
  it("should render a label to indicate the nature of the component's value", () => {
    const wrapper = Enzyme.shallow(<Select label="foo" />)

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

  it('should render the label text', () => {
    fc.assert(
      fc.property(fc.anything(), (label) => {
        const wrapper = Enzyme.shallow(<Select label={label} />)

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

it('should render a hint for describing valid input values', () => {
  fc.assert(
    fc.property(fc.anything(), (label) => {
      const wrapper = Enzyme.shallow(<Select hint={label} />)

      const renderedLabel = stringify(label)

      if (renderedLabel.length > 0) {
        expect(wrapper.find('div').children()).toHaveLength(5)

        expect(wrapper.find('div').childAt(3)).toHaveText(`(${renderedLabel})`)
      } else {
        expect(wrapper.find('div').children()).toHaveLength(3)
      }
    }),
  )
})

describe('on being declared a block component', () => {
  const BLOCK_DISPLAYS = ['block', 'grid', 'flex', 'table']

  it('should render the base element fullwidth', () => {
    const wrapper = Enzyme.shallow(<Select block />)

    expect(BLOCK_DISPLAYS).toContain(wrapper.find('div').prop('style')!.display)
  })

  it('should render the input fullwidth', () => {
    const wrapper = Enzyme.shallow(<Select block />)

    expect(wrapper.find('label').find('select')).toHaveStyle('width', '100%')
  })

  it('should render the input as block element', () => {
    const wrapper = Enzyme.shallow(<Select block />)

    expect(BLOCK_DISPLAYS).toContain(
      wrapper
        .find('label')
        .find('select')
        .prop('style')!.display,
    )
  })
})

it('should render as half-opaque when disabled', () => {
  const wrapper = Enzyme.shallow(<Select disabled />)

  expect(wrapper.find('div')).toHaveStyle('opacity', 0.5)
})

it('should allow selection of multiple values', () => {
  const wrapper = Enzyme.shallow(<Select multiple />)

  expect(
    wrapper
      .find('label')
      .find('select')
      .prop('multiple'),
  ).toBeTruthy()
})

it('should guarantee minimal accessibility', () => {
  fc.assert(
    fc.asyncProperty(fc.string(1, 20), async (s) => {
      const wrapper = Enzyme.mount(<Select label={s} />)
      const results = await Axe.axe(wrapper.getDOMNode())

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