Added tests and docs.

Author: rmariuzzo

.babelrc

@@ -1,11 +1,11 @@
 {
   "env": {
     "test": {
-      "presets": ["es2015"],
+      "presets": ["es2015", "react"],
       "plugins": ["syntax-object-rest-spread", "transform-object-rest-spread"]
     },
     "production": {
-      "presets": ["es2015-rollup"],
+      "presets": ["es2015-rollup", "react"],
       "plugins": ["syntax-object-rest-spread", "transform-object-rest-spread"]
     }
   }

README.md

@@ -1,2 +1,98 @@
+<div align=center>
+
 # react-input-handler
-⚡️ Utility function to handle input changes in React.
+
+⚡️ Utility function to handle input changes in React based on [React's handling multiple input docs](https://reactjs.org/docs/forms.html#handling-multiple-inputs).
+
+</div>
+
+# Installation
+
+```shell
+yarn add react-input-handler
+```
+
+or 
+
+```shell
+npm install react-inpu-handler --save
+```
+
+# Usage
+
+Two things needs to be done to use **react-input-handler**:
+
+  1. Create a bound function (see 2nd line in constructor).
+  2. Attach the bound function to `onChange` events.
+
+## Example
+
+```js
+import React from 'react'
+import ReactInputHandler from 'react-input-handler'
+
+class Form extends React.Component {
+  constructor(props) {
+    super(props)
+    this.inputHandler = ReactInputHandler.bind(this)
+    this.handleSubmit.bind(this)
+  }
+  render() {
+    return (
+      <form>
+        <label>Fullname:</label>
+        <input type="text" name="fullname" onChange={this.inputHandler} />
+        
+        <label>Biography:</label>
+        <textarea type="text" name="bio" onChange={this.inputHandler} />
+        
+        <label> Are you a developer?</label>
+        <input type="checkbox" name="developer" value="yes" />
+        
+        <button onClick={this.handleSubmit}>Submit</button>
+      </form>
+    )
+  }
+
+  handleSubmit(event) {
+    event.preventDefault()
+    console.log(this.state)
+    // Output: { fullanme: "", bio: "", developer: "" }
+  }
+}
+```
+
+# Documentation
+
+**React-input-handler** a single function which accept an event as unique argument.
+
+The objective is simple: handle input changes and persist them into the component's state.
+
+# Development
+
+  1. Clone and fork this repo.
+  2. Install dependencies running: `yarn` or `npm install`.
+  3. [Run tests](#test).
+  4. Prepare a pull request.
+
+## Test
+
+  - `yarn test` - to run all tests.
+  - `yarn test -- --watch` to run all tests in watch mode.
+
+## Publish
+
+  1. Bump version: `npm version x.x.x -m 'Version %s.'`.
+  2. Publish to NPM registry: `npm publish`.
+  3. Publish the new created tag: `git push origin --tags`.
+
+
+---
+
+<div align=center>
+
+Made with :heart: by [Rubens Mariuzzo](https://github.com/rmariuzzo).
+
+[MIT license](LICENSE)
+
+</div>

package.json

@@ -16,17 +16,25 @@
   ],
   "devDependencies": {
     "babel-core": "^6.26.0",
+    "babel-jest": "^21.2.0",
     "babel-plugin-transform-object-rest-spread": "^6.26.0",
     "babel-preset-es2015": "^6.24.1",
     "babel-preset-es2015-rollup": "^3.0.0",
+    "babel-preset-react": "^6.24.1",
     "cross-env": "^5.1.1",
+    "enzyme": "^3.1.1",
+    "enzyme-adapter-react-16": "^1.0.4",
+    "jest": "^21.2.1",
+    "react": "^16.1.1",
+    "react-dom": "^16.1.1",
     "rollup": "^0.51.5",
     "rollup-plugin-babel": "^3.0.2",
     "rollup-plugin-filesize": "^1.4.2",
     "rollup-plugin-uglify": "^2.0.1",
     "uglify-es": "^3.1.9"
   },
   "scripts": {
-    "build": "cross-env NODE_ENV=production rollup -c"
+    "build": "cross-env NODE_ENV=production rollup -c",
+    "test": "jest"
   }
 }

tests/input.test.js

@@ -0,0 +1,27 @@
+'use strict'
+
+import './requestAnimationFrame'
+
+import React from 'react'
+import Enzyme from 'enzyme'
+import ReactSixteenAdapter from 'enzyme-adapter-react-16'
+
+import InputHandler from '../src/ReactInputHandler'
+import { createForm } from './utils'
+
+Enzyme.configure({ adapter: new ReactSixteenAdapter() })
+
+describe('react-input-handler', () => {
+
+  it('persist <input /> changes into state', () => {
+    const form = Enzyme.mount(createForm('input', {
+      type: 'text',
+      name: 'test',
+      value: 'hello'
+    }))
+
+    form.find('input').simulate('change')
+    expect(form.state('test')).toBe('hello')
+  })
+
+})

tests/requestAnimationFrame.js

@@ -0,0 +1,3 @@
+global.requestAnimationFrame = (callback) => {
+  setTimeout(callback, 0)
+}

tests/select.test.js

@@ -0,0 +1,58 @@
+'use strict'
+
+import './requestAnimationFrame'
+
+import React from 'react'
+import Enzyme from 'enzyme'
+import ReactSixteenAdapter from 'enzyme-adapter-react-16'
+
+import InputHandler from '../src/ReactInputHandler'
+import { createForm } from './utils'
+
+Enzyme.configure({ adapter: new ReactSixteenAdapter() })
+
+describe('react-input-handler', () => {
+
+  it('persist <select /> changes into state when no option selected', () => {
+    const form = Enzyme.mount(createForm('select', { name: 'number' }, (
+      [
+        <option key="0" value="none">Choose a number</option>,
+        <option key="1" value="one">One</option>,
+        <option key="2" value="two">Two</option>,
+        <option key="3" value="three">Three</option>,
+      ]
+    )))
+
+    form.find('select').simulate('change')
+    expect(form.state('number')).toBe('none')
+  })
+
+  it('persist <select /> changes into state when a option is selected', () => {
+    const form = Enzyme.mount(createForm('select', { name: 'test', defaultValue: 'one' }, (
+      [
+        <option key="0" value="none">Choose a number</option>,
+        <option key="1" value="one">One</option>,
+        <option key="2" value="two">Two</option>,
+        <option key="3" value="three">Three</option>,
+      ]
+    )))
+
+    form.find('select').simulate('change')
+    expect(form.state('test')).toBe('one')
+  })
+
+  it('persist <select multiple /> changes into state when multiple options are selected', () => {
+    const form = Enzyme.mount(createForm('select', { name: 'test', multiple: true, defaultValue: ['one', 'two'] }, (
+      [
+        <option key="0" value="none">Choose a number</option>,
+        <option key="1" value="one">One</option>,
+        <option key="2" value="two">Two</option>,
+        <option key="3" value="three">Three</option>,
+      ]
+    )))
+
+    form.find('select').simulate('change')
+    expect(form.state('test')).toEqual(['one', 'two'])
+  })
+
+})

tests/textarea.test.js

@@ -0,0 +1,26 @@
+'use strict'
+
+import './requestAnimationFrame'
+
+import React from 'react'
+import Enzyme from 'enzyme'
+import ReactSixteenAdapter from 'enzyme-adapter-react-16'
+
+import InputHandler from '../src/ReactInputHandler'
+import { createForm } from './utils'
+
+Enzyme.configure({ adapter: new ReactSixteenAdapter() })
+
+describe('react-input-handler', () => {
+
+  it('persist <textarea /> changes into state', () => {
+    const form = Enzyme.mount(createForm('textarea', {
+      name: 'test',
+      value: 'hello'
+    }))
+
+    form.find('textarea').simulate('change')
+    expect(form.state('test')).toBe('hello')
+  })
+
+})

tests/utils.js

@@ -0,0 +1,25 @@
+import React from 'react'
+
+import InputHandler from '../src/ReactInputHandler'
+
+function createForm(element, props, children) {
+
+  class Form extends React.Component {
+    render() {
+      return (
+        <form>
+          {React.createElement(element, {
+            ...props,
+            onChange: InputHandler.bind(this)
+          }, children)}
+        </form>
+      )
+    }
+  }
+
+  return <Form />
+}
+
+export {
+  createForm
+}