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

describe('InputWithSupplementaryField', () => {
  it('renders a InputWithSupplementaryField', () => {
    const tree = renderWithTheme(
      <InputWithSupplementaryField
        label="Test Input"
        input={{ name: 'test-input-with-sup' }}
        render={() => (
          <div>
I am a supplemental field!
          </div>
        )}
        showSupplementalFn={val => val === 'Hello'}
      />
    )
    expect(tree).toMatchSnapshot()
  })

  describe('events', () => {
    it('handles onChange', () => {
      const wrapper = mount(
        <InputWithSupplementaryField
          label="Test Input"
          input={{
            name: 'test-input-with-sup'
          }}
          render={() => (
            <div>
I am a supplemental field!
            </div>
          )}
          showSupplementalFn={val => val === 'Hello'}
        />
      )

      const input = wrapper.find('input#test-input-with-sup')
      input.simulate('change', { target: { value: 'Hello' } })
      expect(wrapper.state('showSupplemental')).toEqual(true)
      input.simulate('change', { target: { value: 'Goodbye' } })
      expect(wrapper.state('showSupplemental')).toEqual(false)
    })
  })
})