import { renderHook } from '@testing-library/react-hooks'

import { useFormHandler } from '../useFormHandler'

describe('form hook return values', () => {

  const values = {
    text: 'sample-text',
    number: 42,
    boolean: true,
    textArray: ['element1', 'element2'],
    objectArray: [{ text: 'sample1', boolean: true }, { text: 'sample2', boolean: false }],
    object: { text: 'sample', array: [12, 13], nestedObject: { text: 'nested-sample', number: 18 } }
  }

  const Component = () => useFormHandler(values, values => { return {} })
  const { result } = renderHook(Component)

  it('returns correct initial states.', () => {
    expect(result.current.values.text).toBe('sample-text')
    expect(result.current.values.object.nestedObject.number).toBe(18)
    expect(result.current.values.textArray[0]).toBe('element1')
    expect(result.current.values.objectArray[1].text).toBe('sample2')
    expect(result.current.errors).toEqual({})
    expect(result.current.isSubmitting).toBe(false)
  })

  it('returns input element properties for text inputs.', () => {
    const textProps = result.current.inputProps('text')
    expect(textProps).toMatchObject({
      name: 'text',
      id: 'text',
      value: 'sample-text',
      placeholder: 'text',
      label: 'text',
      onBlur: expect.anything(),
      onChange: expect.anything()
    })
  })
})

export default true