@muvehealth/fixins/dist/blocks/__tests__/CheckboxGroup.test.js.flow

Component library for Muvehealth

/* eslint-disable function-paren-newline, comma-dangle */
import React from 'react'
import renderWithTheme from '../../testHelper'
import CheckboxGroup from '../CheckboxGroup'

describe('CheckboxGroup', () => {
  it('renders a CheckboxGroup', () => {
    const tree = renderWithTheme(
      <CheckboxGroup
        name="test-checkboxgroup-horizontal"
        values={[
          { label: 'One', value: 'one' },
          { label: 'Two', value: 'two' },
        ]}
      />
    )
    expect(tree).toMatchSnapshot()
  })

  describe('events', () => {
    it('handles onChange', () => {
      const wrapper = mount(
        <CheckboxGroup
          input={{
            name: 'test-checkboxgroup'
          }}
          values={[
            { label: 'One', value: 'one' },
            { label: 'Two', value: 'two' },
          ]}
        />
      )
      const checkbox = wrapper.find('input#test-checkboxgroup-One')
      checkbox.simulate('change', { target: { checked: true, value: 'one' } })
      expect(wrapper.state('values')).toEqual(['one'])
      checkbox.simulate('change', { target: { checked: false, value: 'one' } })
      expect(wrapper.state('values')).toEqual([])
    })

    it('Does not select same value twice', () => {
      const wrapper = mount(
        <CheckboxGroup
          input={{
            name: 'test-checkboxgroup'
          }}
          values={[
            { label: 'One', value: 'one' },
            { label: 'Two', value: 'two' },
          ]}
        />
      )
      const checkbox = wrapper.find('input#test-checkboxgroup-One')
      checkbox.simulate('change', { target: { checked: true, value: 'one' } })
      expect(wrapper.state('values')).toEqual(['one'])
      checkbox.simulate('change', { target: { checked: true, value: 'one' } })
      expect(wrapper.state('values')).toEqual(['one'])
    })

    it('Does not select same value twice when aldreay populated with a duplicate', () => {
      const wrapper = mount(
        <CheckboxGroup
          input={{
            name: 'test-checkboxgroup'
          }}
          values={[
            { label: 'One', value: 'one' },
            { label: 'Two', value: 'two' },
          ]}
        />
      )
      const checkbox = wrapper.find('input#test-checkboxgroup-One')
      wrapper.setState({ values: ['one', 'one'] })
      expect(wrapper.state('values')).toEqual(['one', 'one'])
      checkbox.simulate('change', { target: { checked: true, value: 'two' } })
      expect(wrapper.state('values')).toEqual(['one', 'two'])
    })
  })
})