Tests!

.babelrc

@@ -0,0 +1,7 @@
+{
+  "env": {
+    "test": {
+      "presets": ["es2015", "stage-0", "react"]
+    }
+  }
+}

.gitignore

@@ -1,2 +1,3 @@
 examples/**/*-bundle.js
 node_modules/
+coverage/

README.md

@@ -15,4 +15,13 @@ Stuff we need help with:
   pretty lean, on purpose, apps should style this however they'd like)
 - tests (eventually)
 
+# Tests!
 
+Run them:
+`npm test`
+
+Write them:
+`lib/__tests__/Autocomplete-test.js`
+
+Check your work:
+`npm run coverage`

examples/async-data/app.css

@@ -7,3 +7,8 @@ body {
 .example {
   padding: 0 25px;
 }
+
+label {
+  display: block;
+  margin: 5px 0;
+}

examples/async-data/app.js

@@ -1,6 +1,6 @@
 import React from 'react'
 import Autocomplete from '../../lib/index'
-import { getStates, matchStateToTerm, sortStates, styles, fakeRequest } from '../utils'
+import { getStates, matchStateToTerm, sortStates, styles, fakeRequest } from '../../lib/utils'
 
 let App = React.createClass({
 
@@ -24,6 +24,8 @@ let App = React.createClass({
         </p>
 
         <Autocomplete
+          labelText="Choose a state from the US"
+          inputProps={{name: "US state"}}
           ref="autocomplete"
           items={this.state.unitedStates}
           getItemValue={(item) => item.name}

examples/custom-menu/app.css

@@ -7,3 +7,8 @@ body {
 .example {
   padding: 0 25px;
 }
+
+label {
+  display: block;
+  margin: 5px 0;
+}

examples/custom-menu/app.js

@@ -1,6 +1,6 @@
 import React from 'react'
 import Autocomplete from '../../lib/index'
-import { getStates, matchStateToTerm, sortStates, styles, fakeRequest } from '../utils'
+import { getStates, matchStateToTerm, sortStates, styles, fakeRequest } from '../../lib/utils'
 
 let App = React.createClass({
 
@@ -21,6 +21,8 @@ let App = React.createClass({
           letter of the alphabet.
         </p>
         <Autocomplete
+          labelText="Choose a state from the US"
+          inputProps={{name: "US state"}}
           items={this.state.unitedStates}
           getItemValue={(item) => item.name}
           onSelect={() => this.setState({ unitedStates: [] }) }

examples/static-data/app.css

@@ -7,3 +7,8 @@ body {
 .example {
   padding: 0 25px;
 }
+
+label {
+  display: block;
+  margin: 5px 0;
+}

examples/static-data/app.js

@@ -1,5 +1,5 @@
 import React from 'react'
-import { getStates, matchStateToTerm, sortStates, styles } from '../utils'
+import { getStates, matchStateToTerm, sortStates, styles } from '../../lib/utils'
 import Autocomplete from '../../lib/index'
 
 let App = React.createClass({
@@ -15,6 +15,8 @@ let App = React.createClass({
 
         <Autocomplete
           initialValue="Ma"
+          labelText="Choose a state from the US"
+          inputProps={{name: "US state"}}
           items={getStates()}
           getItemValue={(item) => item.name}
           shouldItemRender={matchStateToTerm}

lib/Autocomplete.js

@@ -1,4 +1,5 @@
 const React = require('react')
+const lodash = require('lodash')
 const scrollIntoView = require('dom-scroll-into-view')
 
 let _debugStates = []
@@ -12,12 +13,14 @@ let Autocomplete = React.createClass({
     shouldItemRender: React.PropTypes.func,
     renderItem: React.PropTypes.func.isRequired,
     menuStyle: React.PropTypes.object,
-    inputProps: React.PropTypes.object
+    inputProps: React.PropTypes.object,
+    labelText: React.PropTypes.string
   },
 
   getDefaultProps () {
     return {
       inputProps: {},
+      labelText: '',
       onChange () {},
       onSelect (value, item) {},
       renderMenu (items, value, style) {
@@ -46,6 +49,7 @@ let Autocomplete = React.createClass({
   },
 
   componentWillMount () {
+    this.id = lodash.uniqueId('autocomplete-'); 
     this._ignoreBlur = false
     this._performAutoCompleteOnUpdate = false
     this._performAutoCompleteOnKeyUp = false
@@ -103,7 +107,7 @@ let Autocomplete = React.createClass({
   },
 
   keyDownHandlers: {
-    ArrowDown () {
+    ArrowDown (event) {
       event.preventDefault()
       var { highlightedIndex } = this.state
       var index = (
@@ -133,18 +137,19 @@ let Autocomplete = React.createClass({
 
     Enter (event) {
       if (this.state.isOpen === false) {
-        // already selected this, do nothing
+        // menu is closed so there is no selection to accept -> do nothing
         return
       }
       else if (this.state.highlightedIndex == null) {
-        // hit enter after focus but before typing anything so no autocomplete attempt yet
+        // input has focus but no menu item is selected + enter is hit -> close the menu, highlight whatever's in input
         this.setState({
           isOpen: false
         }, () => {
           this.refs.input.select()
         })
       }
       else {
+        // text entered + menu item has been highlighted + enter is hit -> update value to that of selected menu item, close the menu
         var item = this.getFilteredItems()[this.state.highlightedIndex]
         this.setState({
           value: this.props.getItemValue(item),
@@ -216,10 +221,10 @@ let Autocomplete = React.createClass({
   setMenuPositions () {
     var node = this.refs.input
     var rect = node.getBoundingClientRect()
-    var computedStyle = getComputedStyle(node)
-    var marginBottom = parseInt(computedStyle.marginBottom, 10)
-    var marginLeft = parseInt(computedStyle.marginLeft, 10)
-    var marginRight = parseInt(computedStyle.marginRight, 10)
+    var computedStyle = global.window.getComputedStyle(node)
+    var marginBottom = parseInt(computedStyle.marginBottom, 10) || 0;
+    var marginLeft = parseInt(computedStyle.marginLeft, 10) || 0;
+    var marginRight = parseInt(computedStyle.marginRight, 10) || 0;
     this.setState({
       menuTop: rect.bottom + marginBottom,
       menuLeft: rect.left + marginLeft,
@@ -297,8 +302,11 @@ let Autocomplete = React.createClass({
         state: this.state
       })
     }
-    return (
+    return ( 
       <div style={{display: 'inline-block'}}>
+        <label htmlFor={this.id} ref="label">
+          {this.props.labelText}
+        </label>
         <input
           {...this.props.inputProps}
           role="combobox"
@@ -311,6 +319,7 @@ let Autocomplete = React.createClass({
           onKeyUp={(event) => this.handleKeyUp(event)}
           onClick={this.handleInputClick}
           value={this.state.value}
+          id={this.id}
         />
         {this.state.isOpen && this.renderMenu()}
         {this.props.debug && (

lib/__tests__/.setup.js

@@ -0,0 +1,6 @@
+// .setup.js
+import { jsdom } from 'jsdom';
+
+global.document = jsdom('<!doctype html><html><body></body></html>');
+global.window = document.defaultView;
+global.navigator = global.window.navigator;