feat: add test

Author: foryuki

src/Input.tsx

@@ -44,7 +44,7 @@ export class Input extends PureComponent<Props, {}> {
   render() {
     const {
       classname,
-      placeholder,
+      placeholder = '',
       value,
       maxlength,
       canClear = true
@@ -66,9 +66,9 @@ export class Input extends PureComponent<Props, {}> {
     )
   }
 
-  handleChange = (e: React.FormEvent<HTMLInputElement>) => {
+  handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
     const { onChange, numericInput = false } = this.props
-    const { value } = e.currentTarget
+    const { value } = e.target
     if (numericInput && typeof onChange === 'function') {
       const reg = /^[0-9]+$/
       if (reg.test(value) || value === '') {

tests/Input.test.tsx

@@ -0,0 +1,83 @@
+import { mount } from 'enzyme'
+import React from 'react'
+
+import { sleep } from './util'
+
+import Input from '../src'
+
+describe('src/index', () => {
+  describe('should render properly', () => {
+    let wrapper
+    it('should render basicly', () => {
+      wrapper = mount(<RenderInput />)
+      expect(wrapper.find('.or-input').length).toBe(1)
+      expect(wrapper.find('.or-input input').prop('placeholder')).toBe('')
+      expect(wrapper.find('.or-input input').prop('value')).toBe('')
+      expect(wrapper.find('.or-input .or-clear-icon').length).toBe(1)
+    })
+
+    it('should render basicly #placeholder', () => {
+      wrapper = mount(<RenderInput placeholder="name" />)
+      expect(wrapper.find('.or-input').length).toBe(1)
+      expect(wrapper.find('.or-input input[placeholder="name"]').length).toBe(1)
+      expect(wrapper.find('.or-input input').prop('value')).toBe('')
+    })
+  })
+
+  describe('simulate events', async () => {
+    let wrapper
+    it('onchange event', async () => {
+      wrapper = mount(<RenderInput />)
+      const input = wrapper.find('.or-input input')
+      input.instance().value = 'yuki'
+      input.simulate('change')
+      // input.simulate('focus');
+      // input.simulate('change', { target: { value: 'Changed' } });
+      // input.simulate('keyDown', {
+      //   which: 72,
+      //   target: {
+      //     blur() {
+      //       // Needed since <EditableText /> calls target.blur()
+      //       input.simulate('blur');
+      //     },
+      //   },
+      // })
+      // await sleep(500)
+      // expect(input.props().value).toBe('Hello');
+      // input.simulate('change', { target: { value: 'yuki' } })
+      // expect(wrapper.find('input').prop('value')).toBe('yuki')
+
+      expect(input.value).toBe('yuki')
+    })
+  })
+})
+
+interface Props {
+  numericInput?: boolean
+  maxlength?: number
+  placeholder?: string
+}
+
+class RenderInput extends React.Component<Props, {}> {
+  state = {
+    name: ''
+  }
+
+  render() {
+    return (
+      <div>
+        <Input
+          value={this.state.name}
+          onChange={this.handleChange}
+          {...this.props}
+        />
+      </div>
+    )
+  }
+
+  handleChange = value => {
+    this.setState({
+      name: value
+    })
+  }
+}

tests/Sample.test.tsx

@@ -2,5 +2,6 @@
 import { configure } from 'enzyme'
 import Adapter from 'enzyme-adapter-react-16'
 import 'raf/polyfill'
+import 'regenerator-runtime/runtime'
 
 configure({ adapter: new Adapter() })

tests/setup.ts

@@ -0,0 +1,3 @@
+export function sleep(ms) {
+  return new Promise(resolve => setTimeout(resolve, ms))
+}