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

describe('CheckboxGroupWithSupplementaryField', () => {
  it('renders a CheckboxGroupWithSupplementaryField', () => {
    const tree = renderWithTheme(
      <CheckboxGroupWithSupplementaryField
        label="Test Checkbox"
        input={{ name: 'test-checkbox-with-sup' }}
        values={[
          { label: 'One', value: 1 },
          { label: 'Two', value: 2 },
        ]}
        render={() => (
          <div>
I am a supplemental field!
          </div>
        )}
        showSupplementalValue="2"
      />
    )
    expect(tree).toMatchSnapshot()
  })

  describe('events', () => {
    it('handles onChange', () => {
      const wrapper = mount(
        <CheckboxGroupWithSupplementaryField
          label="Test Checkbox"
          input={{
            name: 'test-checkbox-with-sup'
          }}
          values={[
            { label: 'One', value: 1 },
            { label: 'Two', value: 2 },
          ]}
          render={() => (
            <div>
I am a supplemental field!
            </div>
          )}
          showSupplementalValue="2"
        />
      )

      const checkboxOne = wrapper.find('input#test-checkbox-with-sup-One')
      const checkboxTwo = wrapper.find('input#test-checkbox-with-sup-Two')
      checkboxOne.simulate('change', { target: { checked: false, value: '1' } })
      expect(wrapper.state('showSupplemental')).toEqual(false)
      checkboxTwo.simulate('change', { target: { checked: true, value: '2' } })
      expect(wrapper.state('showSupplemental')).toEqual(true)
      checkboxTwo.simulate('change', { target: { checked: false, value: '2' } })
      expect(wrapper.state('showSupplemental')).toEqual(false)
    })
  })
})