react/components/input/__tests__/index.test.tsx

import React from 'react'
import { mount } from 'enzyme'
import { Input } from 'components'
import { nativeEvent } from 'tests/utils'

describe('Input', () => {
  it('should render correctly', () => {
    const wrapper = mount(<Input placeholder="placeholder" />)
    expect(() => wrapper.unmount()).not.toThrow()
  })
  
  it('should work with different sizes', () => {
    const wrapper = mount(
      <div>
        <Input size="mini" />
        <Input size="small" />
        <Input size="large" />
        <Input width="50%" />
      </div>
    )
    expect(wrapper.html()).toMatchSnapshot()
  })
  
  it('should work with different status', () => {
    const wrapper = mount(
      <div>
        <Input status="secondary" />
        <Input status="success" />
        <Input status="warning" />
      </div>
    )
    expect(wrapper.html()).toMatchSnapshot()
  })
  
  it('should be work with label', () => {
    const wrapper = mount(
      <div>
        <Input label="label" />
        <Input labelRight="label" />
        <Input><span>Block Label</span></Input>
      </div>
    )
    expect(wrapper.html()).toMatchSnapshot()
  })
  it('should be work with icon', () => {
    const wrapper = mount(
      <div>
        <Input icon={<span>test-icon</span>} />
        <Input iconRight={<span>test-icon</span>} />
      </div>
    )
    expect(wrapper.html()).toMatchSnapshot()
  })
  
  it('should set input from value', () => {
    let wrapper = mount(<Input initialValue="test" />)
    let input = wrapper.find('input').getDOMNode() as HTMLInputElement
    expect(input.value).toEqual('test')
  
    wrapper = mount(<Input value="test2" />)
    input = wrapper.find('input').getDOMNode() as HTMLInputElement
    expect(input.value).toEqual('test2')
  
    wrapper.setProps({ value: 'test3' })
    input = wrapper.find('input').getDOMNode() as HTMLInputElement
    expect(input.value).toEqual('test3')
  })
  
  it('should trigger event when input changed', () => {
    let value = ''
    const callback = jest.fn()
      .mockImplementation((e: React.ChangeEvent<HTMLInputElement>) => value = e.target.value)
    const wrapper = mount(<Input onChange={callback} />)
    wrapper.find('input').at(0)
      .simulate('change', { target: { value: 'test' } })
    expect(callback).toHaveBeenCalled()
    expect(value).toEqual('test')
  })
  
  it('should ignore event when input disabled', () => {
    const callback = jest.fn()
    const wrapper = mount(<Input onChange={callback} disabled />)
    wrapper.find('input').at(0)
      .simulate('change', { target: { value: 'test' } })
    expect(callback).not.toHaveBeenCalled()
  })
  
  it('should ignore event when input readonly', () => {
    const callback = jest.fn()
    const wrapper = mount(<Input onChange={callback} readOnly />)
    wrapper.find('input').at(0)
      .simulate('change', { target: { value: 'test' } })
    expect(callback).not.toHaveBeenCalled()
  })
  
  it('should clear text', () => {
    let value = ''
    const callback = jest.fn()
      .mockImplementation((e: React.ChangeEvent<HTMLInputElement>) => value = e.target.value)
    const clearHandler = jest.fn()
    const wrapper = mount(<Input onChange={callback} clearable onClearClick={clearHandler} />)
    
    wrapper.find('input').at(0)
      .simulate('change', { target: { value: 'test' } })
    expect(callback).toHaveBeenCalled()
    expect(value).toEqual('test')
  
    wrapper.find('.clear-icon').at(0)
      .simulate('click', nativeEvent)
    expect(clearHandler).toHaveBeenCalled()
    expect(value).toEqual('')
  })
  
  it('should trigger focus correctly', () => {
    const focus = jest.fn()
    const blur = jest.fn()
    const wrapper = mount(<Input onFocus={focus} onBlur={blur} />)
    
    const input = wrapper.find('input').at(0)
    input.simulate('focus')
    expect(focus).toHaveBeenCalled()
    input.simulate('blur')
    expect(blur).toHaveBeenCalled()
  })
})