Added TodoHeader component

phacks · Feb 27, 2016 · cc97354 · cc97354
1 parent 8550a95
commit cc97354
Show file tree

Hide file tree

Showing 3 changed files with 52 additions and 0 deletions.
diff --git a/src/components/TodoApp.jsx b/src/components/TodoApp.jsx
@@ -1,10 +1,12 @@
 import React from 'react';
 import TodoList from './TodoList'
+import TodoHeader from './TodoHeader'
 
 export default React.createClass({
   render: function () {
     return <div>
       <section className="todoapp">
+        <TodoHeader />
         <TodoList todos={this.props.todos} filter={this.props.filter} />
       </section>
     </div>

diff --git a/src/components/TodoHeader.jsx b/src/components/TodoHeader.jsx
@@ -0,0 +1,24 @@
+import React from 'react';
+import PureRenderMixin from 'react-addons-pure-render-mixin';
+
+export default React.createClass({
+  mixins: [PureRenderMixin],
+  _handleKeyPress: function(e) {
+    if (e.key === 'Enter' && this.refs.addTodoInput.value !== '') {
+      return this.props.addItem(
+        this.refs.addTodoInput.value
+      );
+    }
+  },
+  render: function () {
+    return <header className="header">
+      <h1>todos</h1>
+      <input className="new-todo"
+             ref="addTodoInput"
+             autofocus
+             autoComplete="off"
+             placeholder="What needs to be done?"
+             onKeyPress = {this._handleKeyPress} />
+    </header>
+  }
+});
diff --git a/test/components/TodoHeader_spec.js b/test/components/TodoHeader_spec.js
@@ -0,0 +1,26 @@
+import React from 'react';
+import TestUtils from 'react-addons-test-utils';
+import TodoHeader from '../../src/components/TodoHeader';
+import {expect} from 'chai';
+
+const {renderIntoDocument,
+       scryRenderedDOMComponentsWithTag,
+       Simulate} = TestUtils;
+
+describe('TodoHeader', () => {
+  it('calls a callback on submit', () => {
+    var addedItem = ''
+    const addItem = (item) => addedItem = item;
+    const component = renderIntoDocument(
+      <TodoHeader addItem={addItem} />
+    );
+
+    const input = component.refs.addTodoInput;
+    input.value = 'This is a new item';
+    Simulate.change(input);
+    Simulate.keyPress(input, {key: "Enter", keyCode: 13, which: 13});
+
+    expect(addedItem).to.equal('This is a new item');
+  });
+
+});