import React from 'react'
import { mount } from 'enzyme'
import TextInput from '../TextBox'

describe('Tests for TextBox', () => {
  it('TextInput rendering and change in value reflects in state change', () => {
    const Wrapper = mount(<TextInput />)
    const Input = Wrapper.find('input.input-box')
    Input.simulate('change', { target: { value: 'FOo*' } })
    expect(Wrapper.state('value')).toBe('FOo*')
    // Input.simulate('keypress', { key: 'z', keyCode: 90, which: 90 })
    // expect(Wrapper.state('value')).toBe('FOo*z')
  })

  it('Error Message is rendered onblur', () => {
    const Wrapper = mount(<TextInput />)
    const Input = Wrapper.find('input.input-box')
    expect(Wrapper.find('.input-error-message').length).toBe(0)
    Input.simulate('focus')
    expect(Wrapper.state('value')).toBe('')
    Input.simulate('blur')
    expect(Wrapper.find('.input-error-message').length).toBe(1)
  })

  it('Error should not be rendered when input has some value on blur', () => {
    const Wrapper = mount(<TextInput />)
    const Input = Wrapper.find('input.input-box')
    Input.simulate('focus')
    expect(Wrapper.find('.input-error-message').length).toBe(0)
    expect(Wrapper.state('value')).toBe('')
    Input.simulate('change', { target: { value: 'FOo*' } })
    expect(Wrapper.state('value')).toBe('FOo*')
    Input.simulate('blur')
    expect(Wrapper.find('.input-error-message').length).toBe(0)
  })
})