react/components/input/__tests__/use-input.test.tsx

import React, { useEffect } from 'react'
import { mount } from 'enzyme'
import { Input, useInput } from 'components'

describe('UseInput', () => {
  it('should follow change with use-input', () => {
    let log = ''
    const logSpy = jest.spyOn(console, 'log')
      .mockImplementation(msg => log = msg)
    const MockInput: React.FC<{ value?: string }> = ({ value }) => {
      const { state, setState, bindings } = useInput('')
      useEffect(() => {
        if (value) setState(value)
      }, [value])
      useEffect(() => {
        if (state) console.log(state)
      }, [state])
      return <Input {...bindings} />
    }
    
    const wrapper = mount(<MockInput />)
    wrapper.setProps({ value: 'test' })
    const input = wrapper.find('input').at(0).getDOMNode() as HTMLInputElement
    
    expect(input.value).toEqual('test')
    expect(log).toContain('test')
  
    log = ''
    wrapper.find('input').at(0)
      .simulate('change', { target: { value: 'test-change' }})
    expect(log).toContain('test-change')
    logSpy.mockRestore()
  })
  
  it('should follow change with use-input', () => {
    const MockInput: React.FC<{ value?: string, resetValue?: boolean }> = ({ value, resetValue }) => {
      const { reset, setState, bindings } = useInput('')
      useEffect(() => {
        if (value) setState(value)
      }, [value])
      useEffect(() => {
        if (resetValue) reset()
      }, [resetValue])
      return <Input {...bindings} />
    }
    
    const wrapper = mount(<MockInput />)
    wrapper.setProps({ value: 'test' })
    let input = wrapper.find('input').at(0).getDOMNode() as HTMLInputElement
    expect(input.value).toEqual('test')
  
    wrapper.setProps({ resetValue: true })
    input = wrapper.find('input').at(0).getDOMNode() as HTMLInputElement
    expect(input.value).toEqual('')
  })
})