Toggle All Todos Between Completed and Not Completed

Story: As a user, I want to be able to toggle all todos between completed and not completed statuses.

MainSection actions

It should create an action to toggle all todos between completed and not completed

Write a test.

diff --git a/tests/todomvc/actions.spec.js b/tests/todomvc/actions.spec.js
index 367d6ad..2ae2dec 100644
--- a/tests/todomvc/actions.spec.js
+++ b/tests/todomvc/actions.spec.js
@@ -37,5 +37,13 @@ describe('TodoMVC actions', () => {
     };

     expect(todomvc.actions.toggleCompleteOneTodo('my_id')).to.deep.equal(expectedAction)
+  });
+
+  it('Should create an action to toggle all todos between completed and not completed', () => {
+    const expectedAction = {
+      type: todomvc.types.TOGGLE_COMPLETE_ALL, all_completed: true
+    };
+
+    expect(todomvc.actions.toggleCompleteAllTodos()).to.deep.equal(expectedAction)
   })
 });
(END)

Run the test and watch it fail.

  TodoMVC actions
    ✓ Should create an action to add a todo
    ✓ Should create an action to edit a todo
    ✓ Should create an action to delete a todo
    ✓ Should create an action to toggle a todo between completed and not completed
    1) Should create an action to toggle all todos between completed and not completed

  Header component
    Should render correctly
      ✓ Should be a Header
      ✓ Should have a title
      ✓ Should have a TodoTextInput field
    Should behave correctly
      ✓ Should call addTodo() if length of text is greater than 0

  MainSection component
    Should render correctly
      ✓ Should be a MainSection component
      ✓ Should include a list of todos

  TodoApp component
    Should render correctly
      ✓ Should be a TodoApp
      ✓ Should have a header
      ✓ Should have a main section

  TodoItem component
    Should render correctly
      ✓ Should be an li
      ✓ Should have a label
      ✓ Should have a delete button
      ✓ Should have a toggle complete status checkbox
    Should behave correctly
      ✓ Should switch to edit mode when label onDoubleClick is fired
      ✓ Should call editTodo() when TodoTextInput onSave is called
      ✓ Should leave edit mode after TodoTextInput onSave
      ✓ Should call deleteTodo() when the delete button is clicked
      ✓ Should call deleteTodo() when TodoTextInput onSave is called with no text
      ✓ Should call toggleCompleteOneTodo() when the complete status checkbox is changed

  TodoTextInput component
    ✓ Should not call onSave() on blur if isNew
    Should render correctly
      ✓ Should be a TodoTextInput component
    Should behave correctly
      ✓ Should update value on change
      ✓ Should call onSave() on return key press
      ✓ Should reset state on return key press if isNew
      ✓ Should call onSave() on blur if not isNew

  TodoMVC reducer
    ✓ Should handle initial state
    ✓ Should handle ADD todo
    ✓ Should handle EDIT todo
    ✓ Should handle DELETE todo
    ✓ Should handle TOGGLE_COMPLETE_ONE todo


  34 passing (106ms)
  1 failing

  1) TodoMVC actions Should create an action to toggle all todos between completed and not completed:
     TypeError: _todomvc2.default.actions.toggleCompleteAllTodos is not a function
      at Context.<anonymous> (tests/todomvc/actions.spec.js:50:28)

Write the code to make the test pass.

diff --git a/src/todomvc/ActionTypes.js b/src/todomvc/ActionTypes.js
index 6259983..151042a 100644
--- a/src/todomvc/ActionTypes.js
+++ b/src/todomvc/ActionTypes.js
@@ -4,3 +4,4 @@ export const ADD = 'todomvc/ADD';
 export const EDIT = 'todomvc/EDIT';
 export const DELETE = 'todomvc/DELETE';
 export const TOGGLE_COMPLETE_ONE = 'todomvc/TOGGLE_COMPLETE_ONE';
+export const TOGGLE_COMPLETE_ALL = 'todomvc/TOGGLE_COMPLETE_ALL';

diff --git a/src/todomvc/actions.js b/src/todomvc/actions.js
index 7778446..5109a5a 100644
--- a/src/todomvc/actions.js
+++ b/src/todomvc/actions.js
@@ -17,3 +17,7 @@ export function deleteTodo(id) {
 export function toggleCompleteOneTodo(id) {
   return {type: types.TOGGLE_COMPLETE_ONE, id: id}
 }
+
+export function toggleCompleteAllTodos(all_completed = true) {
+  return {type: types.TOGGLE_COMPLETE_ALL, all_completed: all_completed}
+}
(END)

Run the test and watch it pass.

  TodoMVC actions
    ✓ Should create an action to add a todo
    ✓ Should create an action to edit a todo
    ✓ Should create an action to delete a todo
    ✓ Should create an action to toggle a todo between completed and not completed
    ✓ Should create an action to toggle all todos between completed and not completed

  Header component
    Should render correctly
      ✓ Should be a Header
      ✓ Should have a title
      ✓ Should have a TodoTextInput field
    Should behave correctly
      ✓ Should call addTodo() if length of text is greater than 0

  MainSection component
    Should render correctly
      ✓ Should be a MainSection component
      ✓ Should include a list of todos

  TodoApp component
    Should render correctly
      ✓ Should be a TodoApp
      ✓ Should have a header
      ✓ Should have a main section

  TodoItem component
    Should render correctly
      ✓ Should be an li
      ✓ Should have a label
      ✓ Should have a delete button
      ✓ Should have a toggle complete status checkbox
    Should behave correctly
      ✓ Should switch to edit mode when label onDoubleClick is fired
      ✓ Should call editTodo() when TodoTextInput onSave is called
      ✓ Should leave edit mode after TodoTextInput onSave
      ✓ Should call deleteTodo() when the delete button is clicked
      ✓ Should call deleteTodo() when TodoTextInput onSave is called with no text
      ✓ Should call toggleCompleteOneTodo() when the complete status checkbox is changed

  TodoTextInput component
    ✓ Should not call onSave() on blur if isNew
    Should render correctly
      ✓ Should be a TodoTextInput component
    Should behave correctly
      ✓ Should update value on change
      ✓ Should call onSave() on return key press
      ✓ Should reset state on return key press if isNew
      ✓ Should call onSave() on blur if not isNew

  TodoMVC reducer
    ✓ Should handle initial state
    ✓ Should handle ADD todo
    ✓ Should handle EDIT todo
    ✓ Should handle DELETE todo
    ✓ Should handle TOGGLE_COMPLETE_ONE todo


  35 passing (104ms)

Commit changes.

$ git add .
$ git commit -m 'created an action to toggle all todos'

TodoMVC reducer

It should handle TOGGLE_COMPLETE_ALL todo

Write the test.

diff --git a/tests/todomvc/reducer.spec.js b/tests/todomvc/reducer.spec.js
index c7cd472..9a0defd 100644
--- a/tests/todomvc/reducer.spec.js
+++ b/tests/todomvc/reducer.spec.js
@@ -65,5 +65,29 @@ describe('TodoMVC reducer', () => {
     });

     expect(new_state.get(0).get('completed')).to.equal(!state.get(0).get('completed'))
+  });
+
+  it('Should handle TOGGLE_COMPLETE_ALL todo', () => {
+    const state = List([
+      Map({id: uuid.v4(), description: 'My todo 1', completed: false}),
+      Map({id: uuid.v4(), description: 'My todo 2', completed: true}),
+      Map({id: uuid.v4(), description: 'My todo 3', completed: false}),
+      Map({id: uuid.v4(), description: 'My todo 4', completed: true}),
+      Map({id: uuid.v4(), description: 'My todo 5', completed: false})
+    ]);
+
+    const new_state_1 = todomvc.reducer(state, {
+      type: todomvc.types.TOGGLE_COMPLETE_ALL, all_completed: true
+    });
+
+    expect(new_state_1.size).to.equal(5);
+    new_state_1.map(todo => expect(todo.get('completed')).to.equal(true));
+
+    const new_state_2 = todomvc.reducer(state, {
+      type: todomvc.types.TOGGLE_COMPLETE_ALL, all_completed: false
+    });
+
+    expect(new_state_2.size).to.equal(5);
+    new_state_2.map(todo => expect(todo.get('completed')).to.equal(false))
   })
 });
(END)

Run the test and watch it fail.

  TodoMVC actions
    ✓ Should create an action to add a todo
    ✓ Should create an action to edit a todo
    ✓ Should create an action to delete a todo
    ✓ Should create an action to toggle a todo between completed and not completed
    ✓ Should create an action to toggle all todos between completed and not completed

  Header component
    Should render correctly
      ✓ Should be a Header
      ✓ Should have a title
      ✓ Should have a TodoTextInput field
    Should behave correctly
      ✓ Should call addTodo() if length of text is greater than 0

  MainSection component
    Should render correctly
      ✓ Should be a MainSection component
      ✓ Should include a list of todos

  TodoApp component
    Should render correctly
      ✓ Should be a TodoApp
      ✓ Should have a header
      ✓ Should have a main section

  TodoItem component
    Should render correctly
      ✓ Should be an li
      ✓ Should have a label
      ✓ Should have a delete button
      ✓ Should have a toggle complete status checkbox
    Should behave correctly
      ✓ Should switch to edit mode when label onDoubleClick is fired
      ✓ Should call editTodo() when TodoTextInput onSave is called
      ✓ Should leave edit mode after TodoTextInput onSave
      ✓ Should call deleteTodo() when the delete button is clicked
      ✓ Should call deleteTodo() when TodoTextInput onSave is called with no text
      ✓ Should call toggleCompleteOneTodo() when the complete status checkbox is changed

  TodoTextInput component
    ✓ Should not call onSave() on blur if isNew
    Should render correctly
      ✓ Should be a TodoTextInput component
    Should behave correctly
      ✓ Should update value on change
      ✓ Should call onSave() on return key press
      ✓ Should reset state on return key press if isNew
      ✓ Should call onSave() on blur if not isNew

  TodoMVC reducer
    ✓ Should handle initial state
    ✓ Should handle ADD todo
    ✓ Should handle EDIT todo
    ✓ Should handle DELETE todo
    ✓ Should handle TOGGLE_COMPLETE_ONE todo
    1) Should handle TOGGLE_COMPLETE_ALL todo


  35 passing (117ms)
  1 failing

  1) TodoMVC reducer Should handle TOGGLE_COMPLETE_ALL todo:

      AssertionError: expected false to equal true
      + expected - actual

      -false
      +true

      at tests/todomvc/reducer.spec.js:84:62

Write the code to make the test pass.

diff --git a/src/todomvc/reducer.js b/src/todomvc/reducer.js
index 58f9a29..ff608ef 100644
--- a/src/todomvc/reducer.js
+++ b/src/todomvc/reducer.js
@@ -15,6 +15,8 @@ export default function reducer(state = List([]), action) {
       return state.filter(todo => todo.get('id') !== action.id);
     case types.TOGGLE_COMPLETE_ONE:
       return (state.map(todo => todo.get('id') === action.id ? todo.set('completed', !todo.get('completed')) : todo));
+    case types.TOGGLE_COMPLETE_ALL:
+      return state.map(todo => todo.set('completed', action.all_completed));
     default:
       // just return the same state
       return (state)
(END)

Run the test and watch it pass.

  TodoMVC actions
    ✓ Should create an action to add a todo
    ✓ Should create an action to edit a todo
    ✓ Should create an action to delete a todo
    ✓ Should create an action to toggle a todo between completed and not completed
    ✓ Should create an action to toggle all todos between completed and not completed

  Header component
    Should render correctly
      ✓ Should be a Header
      ✓ Should have a title
      ✓ Should have a TodoTextInput field
    Should behave correctly
      ✓ Should call addTodo() if length of text is greater than 0

  MainSection component
    Should render correctly
      ✓ Should be a MainSection component
      ✓ Should include a list of todos

  TodoApp component
    Should render correctly
      ✓ Should be a TodoApp
      ✓ Should have a header
      ✓ Should have a main section

  TodoItem component
    Should render correctly
      ✓ Should be an li
      ✓ Should have a label
      ✓ Should have a delete button
      ✓ Should have a toggle complete status checkbox
    Should behave correctly
      ✓ Should switch to edit mode when label onDoubleClick is fired
      ✓ Should call editTodo() when TodoTextInput onSave is called
      ✓ Should leave edit mode after TodoTextInput onSave
      ✓ Should call deleteTodo() when the delete button is clicked
      ✓ Should call deleteTodo() when TodoTextInput onSave is called with no text
      ✓ Should call toggleCompleteOneTodo() when the complete status checkbox is changed

  TodoTextInput component
    ✓ Should not call onSave() on blur if isNew
    Should render correctly
      ✓ Should be a TodoTextInput component
    Should behave correctly
      ✓ Should update value on change
      ✓ Should call onSave() on return key press
      ✓ Should reset state on return key press if isNew
      ✓ Should call onSave() on blur if not isNew

  TodoMVC reducer
    ✓ Should handle initial state
    ✓ Should handle ADD todo
    ✓ Should handle EDIT todo
    ✓ Should handle DELETE todo
    ✓ Should handle TOGGLE_COMPLETE_ONE todo
    ✓ Should handle TOGGLE_COMPLETE_ALL todo


  36 passing (103ms)

Commit changes.

$ git add .
$ git commit -m 'handle TOGGLE_COMPLETE_ALL todo'

Header component

It should render correctly

It should have a toggle all complete status checkbox

Write the test.

diff --git a/tests/todomvc/components/Header.spec.js b/tests/todomvc/components/Header.spec.js
index d7db404..7e6bed4 100644
--- a/tests/todomvc/components/Header.spec.js
+++ b/tests/todomvc/components/Header.spec.js
@@ -48,6 +48,15 @@ describe('Header component', () => {
       expect(input.type()).to.equal(TodoTextInput);
       expect(input.props().placeholder).to.equal('What needs to be done?');
       expect(input.props().isNew).to.equal(true)
+    });
+
+    it('Should have a toggle all complete status checkbox', () => {
+      const {component} = setup();
+      const checkbox = component.children('input');
+
+      expect(checkbox).to.have.length(1);
+      expect(checkbox.props().type).to.equal('checkbox');
+      expect(checkbox.props().name).to.equal('all_completed')
     })
   });

(END)

Run the test and watch it fail.

  TodoMVC actions
    ✓ Should create an action to add a todo
    ✓ Should create an action to edit a todo
    ✓ Should create an action to delete a todo
    ✓ Should create an action to toggle a todo between completed and not completed
    ✓ Should create an action to toggle all todos between completed and not completed

  Header component
    Should render correctly
      ✓ Should be a Header
      ✓ Should have a title
      ✓ Should have a TodoTextInput field
      1) Should have a toggle all complete status checkbox
    Should behave correctly
      ✓ Should call addTodo() if length of text is greater than 0

  MainSection component
    Should render correctly
      ✓ Should be a MainSection component
      ✓ Should include a list of todos

  TodoApp component
    Should render correctly
      ✓ Should be a TodoApp
      ✓ Should have a header
      ✓ Should have a main section

  TodoItem component
    Should render correctly
      ✓ Should be an li
      ✓ Should have a label
      ✓ Should have a delete button
      ✓ Should have a toggle complete status checkbox
    Should behave correctly
      ✓ Should switch to edit mode when label onDoubleClick is fired
      ✓ Should call editTodo() when TodoTextInput onSave is called
      ✓ Should leave edit mode after TodoTextInput onSave
      ✓ Should call deleteTodo() when the delete button is clicked
      ✓ Should call deleteTodo() when TodoTextInput onSave is called with no text
      ✓ Should call toggleCompleteOneTodo() when the complete status checkbox is changed

  TodoTextInput component
    ✓ Should not call onSave() on blur if isNew
    Should render correctly
      ✓ Should be a TodoTextInput component
    Should behave correctly
      ✓ Should update value on change
      ✓ Should call onSave() on return key press
      ✓ Should reset state on return key press if isNew
      ✓ Should call onSave() on blur if not isNew

  TodoMVC reducer
    ✓ Should handle initial state
    ✓ Should handle ADD todo
    ✓ Should handle EDIT todo
    ✓ Should handle DELETE todo
    ✓ Should handle TOGGLE_COMPLETE_ONE todo
    ✓ Should handle TOGGLE_COMPLETE_ALL todo


  36 passing (120ms)
  1 failing

  1) Header component Should render correctly Should have a toggle all complete status checkbox:

      AssertionError: expected { Object (root, unrendered, ...) } to have a length of 1 but got 0
      + expected - actual

      -0
      +1

      at Context.<anonymous> (tests/todomvc/components/Header.spec.js:57:32)

Write the code to make the test pass.

diff --git a/src/todomvc/components/Header.js b/src/todomvc/components/Header.js
index 022a8fd..f2d46da 100644
--- a/src/todomvc/components/Header.js
+++ b/src/todomvc/components/Header.js
@@ -21,6 +21,7 @@ export default class Header extends Component {
       <header>
         <h1>todos</h1>
         <TodoTextInput placeholder="What needs to be done?" isNew onSave={this.handleSave.bind(this)}/>
+        <input type="checkbox" name="all_completed" />toggle &quot;completed&quot; status for all todos (checked = completed)
       </header>
     )
   }
(END)

Run the test and watch it pass.

  TodoMVC actions
    ✓ Should create an action to add a todo
    ✓ Should create an action to edit a todo
    ✓ Should create an action to delete a todo
    ✓ Should create an action to toggle a todo between completed and not completed
    ✓ Should create an action to toggle all todos between completed and not completed

  Header component
    Should render correctly
      ✓ Should be a Header
      ✓ Should have a title
      ✓ Should have a TodoTextInput field
      ✓ Should have a toggle all complete status checkbox
    Should behave correctly
      ✓ Should call addTodo() if length of text is greater than 0

  MainSection component
    Should render correctly
      ✓ Should be a MainSection component
      ✓ Should include a list of todos

  TodoApp component
    Should render correctly
      ✓ Should be a TodoApp
      ✓ Should have a header
      ✓ Should have a main section

  TodoItem component
    Should render correctly
      ✓ Should be an li
      ✓ Should have a label
      ✓ Should have a delete button
      ✓ Should have a toggle complete status checkbox
    Should behave correctly
      ✓ Should switch to edit mode when label onDoubleClick is fired
      ✓ Should call editTodo() when TodoTextInput onSave is called
      ✓ Should leave edit mode after TodoTextInput onSave
      ✓ Should call deleteTodo() when the delete button is clicked
      ✓ Should call deleteTodo() when TodoTextInput onSave is called with no text
      ✓ Should call toggleCompleteOneTodo() when the complete status checkbox is changed

  TodoTextInput component
    ✓ Should not call onSave() on blur if isNew
    Should render correctly
      ✓ Should be a TodoTextInput component
    Should behave correctly
      ✓ Should update value on change
      ✓ Should call onSave() on return key press
      ✓ Should reset state on return key press if isNew
      ✓ Should call onSave() on blur if not isNew

  TodoMVC reducer
    ✓ Should handle initial state
    ✓ Should handle ADD todo
    ✓ Should handle EDIT todo
    ✓ Should handle DELETE todo
    ✓ Should handle TOGGLE_COMPLETE_ONE todo
    ✓ Should handle TOGGLE_COMPLETE_ALL todo


  37 passing (109ms)

Commit changes.

$ git add .
$ git commit -m 'have a toggle all complete status checkbox'

It should behave correctly

It should call toggleCompleteAllTodos() when the complete all status checkbox is changed

Write the test.

diff --git a/tests/todomvc/components/Header.spec.js b/tests/todomvc/components/Header.spec.js
index 7e6bed4..c340f53 100644
--- a/tests/todomvc/components/Header.spec.js
+++ b/tests/todomvc/components/Header.spec.js
@@ -12,6 +12,7 @@ function setup() {
   const props = {
     actions: {
       addTodo: sinon.spy(),
+      toggleCompleteAllTodos: sinon.spy()
     }
   };

@@ -69,6 +70,14 @@ describe('Header component', () => {
       expect(props.actions.addTodo.called).to.be.false;
       input.props().onSave('Use Redux');
       expect(props.actions.addTodo.called).to.be.true
+    });
+
+    it('Should call toggleCompleteAllTodos() when the all complete status checkbox is changed', () => {
+      const {component, props} = setup();
+      const input = component.find('input');
+
+      input.simulate('change');
+      expect(props.actions.toggleCompleteAllTodos.called).to.be.true
     })
   })
 });
(END)

Run the test and watch it fail.

  TodoMVC actions
    ✓ Should create an action to add a todo
    ✓ Should create an action to edit a todo
    ✓ Should create an action to delete a todo
    ✓ Should create an action to toggle a todo between completed and not completed
    ✓ Should create an action to toggle all todos between completed and not completed

  Header component
    Should render correctly
      ✓ Should be a Header
      ✓ Should have a title
      ✓ Should have a TodoTextInput field
      ✓ Should have a toggle all complete status checkbox
    Should behave correctly
      ✓ Should call addTodo() if length of text is greater than 0
      1) Should call toggleCompleteAllTodos() when the all complete status checkbox is changed

  MainSection component
    Should render correctly
      ✓ Should be a MainSection component
      ✓ Should include a list of todos

  TodoApp component
    Should render correctly
      ✓ Should be a TodoApp
      ✓ Should have a header
      ✓ Should have a main section

  TodoItem component
    Should render correctly
      ✓ Should be an li
      ✓ Should have a label
      ✓ Should have a delete button
      ✓ Should have a toggle complete status checkbox
    Should behave correctly
      ✓ Should switch to edit mode when label onDoubleClick is fired
      ✓ Should call editTodo() when TodoTextInput onSave is called
      ✓ Should leave edit mode after TodoTextInput onSave
      ✓ Should call deleteTodo() when the delete button is clicked
      ✓ Should call deleteTodo() when TodoTextInput onSave is called with no text
      ✓ Should call toggleCompleteOneTodo() when the complete status checkbox is changed

  TodoTextInput component
    ✓ Should not call onSave() on blur if isNew
    Should render correctly
      ✓ Should be a TodoTextInput component
    Should behave correctly
      ✓ Should update value on change
      ✓ Should call onSave() on return key press
      ✓ Should reset state on return key press if isNew
      ✓ Should call onSave() on blur if not isNew

  TodoMVC reducer
    ✓ Should handle initial state
    ✓ Should handle ADD todo
    ✓ Should handle EDIT todo
    ✓ Should handle DELETE todo
    ✓ Should handle TOGGLE_COMPLETE_ONE todo
    ✓ Should handle TOGGLE_COMPLETE_ALL todo


  37 passing (107ms)
  1 failing

  1) Header component Should behave correctly Should call toggleCompleteAllTodos() when the all complete status checkbox is changed:

      AssertionError: expected false to be true
      + expected - actual

      -false
      +true

      at Context.<anonymous> (tests/todomvc/components/Header.spec.js:80:7)

Write the code to make the test pass, but also let's immediately work on the required prop warning regression.

diff --git a/src/todomvc/components/Header.js b/src/todomvc/components/Header.js
index f2d46da..bb4bb7f 100644
--- a/src/todomvc/components/Header.js
+++ b/src/todomvc/components/Header.js
@@ -10,18 +10,33 @@ export default class Header extends Component {
     actions: PropTypes.object.isRequired
   };

+  constructor(props, context) {
+    super(props, context);
+    this.state = {
+      all_completed: false
+    }
+  }
+
   handleSave(text) {
     if (text.length !== 0) {
       this.props.actions.addTodo(text)
     }
   }

+  handleToggleCompletedAll() {
+    const reversed_completed_status = !this.state.all_completed;
+
+    this.setState({all_completed: reversed_completed_status});
+    this.props.actions.toggleCompleteAllTodos(reversed_completed_status)
+  }
+
   render() {
     return (
       <header>
         <h1>todos</h1>
         <TodoTextInput placeholder="What needs to be done?" isNew onSave={this.handleSave.bind(this)}/>
-        <input type="checkbox" name="all_completed" />toggle &quot;completed&quot; status for all todos (checked = completed)
+        <input type="checkbox" name="all_completed" checked={this.state.all_completed}
+               onChange={ this.handleToggleCompletedAll.bind(this) }/>toggle &quot;completed&quot; status for all todos (checked = completed)
       </header>
     )
   }
(END)

Run the test and watch it pass.

  TodoMVC actions
    ✓ Should create an action to add a todo
    ✓ Should create an action to edit a todo
    ✓ Should create an action to delete a todo
    ✓ Should create an action to toggle a todo between completed and not completed
    ✓ Should create an action to toggle all todos between completed and not completed

  Header component
    Should render correctly
      ✓ Should be a Header
      ✓ Should have a title
      ✓ Should have a TodoTextInput field
      ✓ Should have a toggle all complete status checkbox
    Should behave correctly
      ✓ Should call addTodo() if length of text is greater than 0
      ✓ Should call toggleCompleteAllTodos() when the all complete status checkbox is changed

  MainSection component
    Should render correctly
      ✓ Should be a MainSection component
      ✓ Should include a list of todos

  TodoApp component
    Should render correctly
      ✓ Should be a TodoApp
      ✓ Should have a header
      ✓ Should have a main section

  TodoItem component
    Should render correctly
      ✓ Should be an li
      ✓ Should have a label
      ✓ Should have a delete button
      ✓ Should have a toggle complete status checkbox
    Should behave correctly
      ✓ Should switch to edit mode when label onDoubleClick is fired
      ✓ Should call editTodo() when TodoTextInput onSave is called
      ✓ Should leave edit mode after TodoTextInput onSave
      ✓ Should call deleteTodo() when the delete button is clicked
      ✓ Should call deleteTodo() when TodoTextInput onSave is called with no text
      ✓ Should call toggleCompleteOneTodo() when the complete status checkbox is changed

  TodoTextInput component
    ✓ Should not call onSave() on blur if isNew
    Should render correctly
      ✓ Should be a TodoTextInput component
    Should behave correctly
      ✓ Should update value on change
      ✓ Should call onSave() on return key press
      ✓ Should reset state on return key press if isNew
      ✓ Should call onSave() on blur if not isNew

  TodoMVC reducer
    ✓ Should handle initial state
    ✓ Should handle ADD todo
    ✓ Should handle EDIT todo
    ✓ Should handle DELETE todo
    ✓ Should handle TOGGLE_COMPLETE_ONE todo
    ✓ Should handle TOGGLE_COMPLETE_ALL todo


  38 passing (111ms)

Commit changes.

$ git add .
$ git commit -m 'call toggleCompleteAllTodos() when the all complete status checkbox is changed'

Run It!

Now let's see what this looks like.

Open http://localhost:4000 in your web browser.

When the page loads you will be able to see a new, toggle "completed" status, checkbox appear. Try creating a couple of todos and set their completed statuses randomly. Now make them all completed or not completed by using the new checkbox.

PreviousToggle a Todo Between Completed and Not Completed NextSee the Number of Todos To Be Completed

Last updated 6 years ago

Was this helpful?