test(input): add testcase

components/input/__tests__/index.test.tsx

@@ -0,0 +1,125 @@
+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()
+  })
+})

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

@@ -0,0 +1,56 @@
+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('')
+  })
+})