Added TextInput tests and features

src/components/TextInput.jsx

@@ -1,11 +1,40 @@
 import React from 'react';
-import PureRenderMixin from 'react-addons-pure-render-mixin'
+import ReactDOM from 'react-dom';
+import PureRenderMixin from 'react-addons-pure-render-mixin';
+import classNames from 'classnames';
 
 export default React.createClass({
   mixins: [PureRenderMixin],
+  getInitialState: function() {
+    return {value: this.props.text};
+  },
+  _handleKeyDown: function(e) {
+    switch (e.key) {
+      case 'Enter':
+        return this.props.doneEditing(this.props.itemId, this.state.value);
+      case 'Escape':
+        return this.cancelEditing(this.props.itemId);
+    }
+  },
+  _handleOnBlur: function(e) {
+    return this.cancelEditing(this.props.itemId);
+  },
+  _handleOnChange: function(e) {
+    this.setState({value: e.target.value});
+  },
+  cancelEditing: function() {
+    this.setState({'value': this.props.text});
+    return this.props.cancelEditing(this.props.itemId);
+  },
   render: function () {
     return <input className="edit"
                   autoFocus={true}
-                  type="text" />
+                  value={this.state.value}
+                  onChange={this._handleOnChange}
+                  type="text"
+                  ref="itemInput"
+                  onKeyDown={this._handleKeyDown}
+                  onBlur={this._handleOnBlur}
+                  />
   }
 });

src/components/TodoItem.jsx

@@ -25,7 +25,10 @@ export default React.createClass({
         <button className="destroy"
                 onClick={() => this.props.deleteItem(this.props.id)}></button>
       </div>
-      <TextInput />
+      <TextInput text={this.props.text}
+                 itemId={this.props.id}
+                 cancelEditing={this.props.cancelEditing}
+                 doneEditing={this.props.doneEditing} />
     </li>
   }
 });

src/components/TodoList.jsx

@@ -22,8 +22,14 @@ export default React.createClass({
         {this.getItems().map(item =>
           <TodoItem key={item.get('text')}
                     text={item.get('text')}
+                    id={item.get('id')}
                     isCompleted={this.isCompleted(item)}
-                    isEditing={item.get('editing')} />
+                    isEditing={item.get('editing')}
+                    doneEditing={this.props.doneEditing}
+                    cancelEditing={this.props.cancelEditing}
+                    toggleComplete={this.props.toggleComplete}
+                    deleteItem={this.props.deleteItem}
+                    editItem={this.props.editItem}/>
         )}
       </ul>
     </section>

test/components/TextInput_spec.js

@@ -0,0 +1,36 @@
+import React from 'react';
+import TestUtils from 'react-addons-test-utils';
+import TextInput from '../../src/components/TextInput';
+import {expect} from 'chai';
+
+const {renderIntoDocument,
+       scryRenderedDOMComponentsWithTag,
+       Simulate} = TestUtils;
+
+describe('TextInput', () => {
+  it('calls a callback when pressing enter', () => {
+    const text = 'React';
+    var hasDoneEditing = false;
+    const doneEditing = () => hasDoneEditing = true;
+    const component = renderIntoDocument(
+      <TextInput text={text} doneEditing={doneEditing}/>
+    );
+    const input = component.refs.itemInput
+    Simulate.keyDown(input, {key: "Enter", keyCode: 13, which: 13});
+
+    expect(hasDoneEditing).to.equal(true);
+  });
+
+  it('calls a callback when pressing escape or losing focus', () => {
+    const text = 'React';
+    var hasCanceledEditing = false;
+    const cancelEditing = () => hasCanceledEditing = true;
+    const component = renderIntoDocument(
+      <TextInput text={text} cancelEditing={cancelEditing}/>
+    );
+    const input = component.refs.itemInput
+    Simulate.keyDown(input, {key: "Escape", keyCode: 27, which: 27});
+
+    expect(hasCanceledEditing).to.equal(true);
+  });
+});