Add tests for TodoList component

phacks · Feb 27, 2016 · 69707f0 · 69707f0
1 parent d9a60c9
commit 69707f0
Show file tree

Hide file tree

Showing 5 changed files with 76 additions and 3 deletions.
diff --git a/package.json b/package.json
@@ -28,6 +28,7 @@
     "css-loader": "^0.23.1",
     "jsdom": "^8.0.4",
     "mocha": "^2.4.5",
+    "react-addons-test-utils": "^0.14.7",
     "react-hot-loader": "^1.3.0",
     "style-loader": "^0.13.0",
     "webpack": "^1.12.14",

diff --git a/src/components/TodoApp.jsx b/src/components/TodoApp.jsx
@@ -5,7 +5,7 @@ export default React.createClass({
   render: function () {
     return <div>
       <section className="todoapp">
-        <TodoList todos={this.props.todos} />
+        <TodoList todos={this.props.todos} filter={this.props.filter} />
       </section>
     </div>
   }

diff --git a/src/components/TodoList.jsx b/src/components/TodoList.jsx
@@ -4,10 +4,19 @@ import TodoItem from './TodoItem';
 
 export default React.createClass({
   mixins: [PureRenderMixin],
+  getItems: function () {
+    if (this.props.todos) {
+      return this.props.todos.filter(
+        (item) => this.props.filter === 'all' ||
+          item.get('status') === this.props.filter
+      );
+    }
+    return [];
+  },
   render: function () {
     return <section className="main">
       <ul className="todo-list">
-        {this.props.todos.map(item =>
+        {this.getItems().map(item =>
           <TodoItem key={item.get('text')}
                     text={item.get('text')} />
         )}

diff --git a/src/index.jsx b/src/index.jsx
@@ -10,9 +10,11 @@ const todos = List.of(
   Map({id: 3, text: 'Immutable', status: 'completed', editing: false})
 );
 
+const filter = 'all';
+
 require('../node_modules/todomvc-app-css/index.css');
 
 ReactDOM.render(
-  <TodoApp todos={todos} />,
+  <TodoApp todos={todos} filter={filter} />,
   document.getElementById('app')
 );
diff --git a/test/components/TodoList_spec.js b/test/components/TodoList_spec.js
@@ -0,0 +1,61 @@
+import React from 'react';
+import TestUtils from 'react-addons-test-utils';
+import TodoList from '../../src/components/TodoList';
+import {expect} from 'chai';
+import {List, Map} from 'immutable';
+
+const {renderIntoDocument,
+       scryRenderedDOMComponentsWithTag} = TestUtils;
+
+describe('TodoList', () => {
+  it('renders a list with only the active items if the filter is active', () => {
+    const todos = List.of(
+      Map({id: 1, text: 'React', status: 'active'}),
+      Map({id: 2, text: 'Redux', status: 'active'}),
+      Map({id: 3, text: 'Immutable', status: 'completed'})
+    );
+    const filter = 'active';
+    const component = renderIntoDocument(
+      <TodoList filter={filter} todos={todos} />
+    );
+    const items = scryRenderedDOMComponentsWithTag(component, 'li');
+
+    expect(items.length).to.equal(2);
+    expect(items[0].textContent).to.contain('React');
+    expect(items[1].textContent).to.contain('Redux');
+  });
+
+  it('renders a list with only completed items if the filter is completed', () => {
+    const todos = List.of(
+      Map({id: 1, text: 'React', status: 'active'}),
+      Map({id: 2, text: 'Redux', status: 'active'}),
+      Map({id: 3, text: 'Immutable', status: 'completed'})
+    );
+    const filter = 'completed';
+    const component = renderIntoDocument(
+      <TodoList filter={filter} todos={todos} />
+    );
+    const items = scryRenderedDOMComponentsWithTag(component, 'li');
+
+    expect(items.length).to.equal(1);
+    expect(items[0].textContent).to.contain('Immutable');
+  });
+
+  it('renders a list with all the items', () => {
+    const todos = List.of(
+      Map({id: 1, text: 'React', status: 'active'}),
+      Map({id: 2, text: 'Redux', status: 'active'}),
+      Map({id: 3, text: 'Immutable', status: 'completed'})
+    );
+    const filter = 'all';
+    const component = renderIntoDocument(
+      <TodoList filter={filter} todos={todos} />
+    );
+    const items = scryRenderedDOMComponentsWithTag(component, 'li');
+
+    expect(items.length).to.equal(3);
+    expect(items[0].textContent).to.contain('React');
+    expect(items[1].textContent).to.contain('Redux');
+    expect(items[2].textContent).to.contain('Immutable');
+  });
+});