Toggle a Todo Between Completed and Not Completed
Story: As a user, I want to be able to toggle a todo between completed and not completed statuses, so that I can keep track of it.
TodoMVC actions
It should create an action to toggle a todo between completed and not completed
Write a test.
diff --git a/tests/todomvc/actions.spec.js b/tests/todomvc/actions.spec.js
index fd31f8f..367d6ad 100644
--- a/tests/todomvc/actions.spec.js
+++ b/tests/todomvc/actions.spec.js
@@ -29,5 +29,13 @@ describe('TodoMVC actions', () => {
};
expect(todomvc.actions.deleteTodo('my_id')).to.deep.equal(expectedAction)
+ });
+
+ it('Should create an action to toggle a todo between completed and not completed', () => {
+ const expectedAction = {
+ type: todomvc.types.TOGGLE_COMPLETE_ONE, id: 'my_id'
+ };
+
+ expect(todomvc.actions.toggleCompleteOneTodo('my_id')).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
1) Should create an action to toggle a todo 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 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
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
30 passing (85ms)
1 failing
1) TodoMVC actions Should create an action to toggle a todo between completed and not completed:
TypeError: _todomvc2.default.actions.toggleCompleteOneTodo is not a function
at Context.<anonymous> (tests/todomvc/actions.spec.js:39:28)Write the code to make the test pass.
diff --git a/src/todomvc/ActionTypes.js b/src/todomvc/ActionTypes.js
index 040095a..6259983 100644
--- a/src/todomvc/ActionTypes.js
+++ b/src/todomvc/ActionTypes.js
@@ -3,3 +3,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';
(END)diff --git a/src/todomvc/actions.js b/src/todomvc/actions.js
index 0f1e307..7778446 100644
--- a/src/todomvc/actions.js
+++ b/src/todomvc/actions.js
@@ -13,3 +13,7 @@ export function editTodo(id, text) {
export function deleteTodo(id) {
return {type: types.DELETE, id: id}
}
+
+export function toggleCompleteOneTodo(id) {
+ return {type: types.TOGGLE_COMPLETE_ONE, id: id}
+}
(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
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 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
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
31 passing (98ms)Commit changes.
$ git add .
$ git commit -m 'created an action to toggle a todo'TodoMVC reducer
It should handle TOGGLE_COMPLETE_ONE todo
Write the test.
diff --git a/tests/todomvc/reducer.spec.js b/tests/todomvc/reducer.spec.js
index dd79807..c7cd472 100644
--- a/tests/todomvc/reducer.spec.js
+++ b/tests/todomvc/reducer.spec.js
@@ -54,5 +54,16 @@ describe('TodoMVC reducer', () => {
expect(new_state.size).to.equal(1);
expect(new_state.get(0)).to.equal(state.get(0))
+ });
+
+ it('Should handle TOGGLE_COMPLETE_ONE todo', () => {
+ const state = List([
+ Map({id: uuid.v4(), description: 'My todo', completed: false})
+ ]);
+ const new_state = todomvc.reducer(state, {
+ type: todomvc.types.TOGGLE_COMPLETE_ONE, id: state.get(0).get('id')
+ });
+
+ expect(new_state.get(0).get('completed')).to.equal(!state.get(0).get('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
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 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
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
1) Should handle TOGGLE_COMPLETE_ONE todo
31 passing (110ms)
1 failing
1) TodoMVC reducer Should handle TOGGLE_COMPLETE_ONE todo:
AssertionError: expected false to equal true
+ expected - actual
-false
+true
at Context.<anonymous> (tests/todomvc/reducer.spec.js:67:50)Write the code to make the test pass.
diff --git a/src/todomvc/reducer.js b/src/todomvc/reducer.js
index 5f9a53c..58f9a29 100644
--- a/src/todomvc/reducer.js
+++ b/src/todomvc/reducer.js
@@ -13,6 +13,8 @@ export default function reducer(state = List([]), action) {
return (state.map(todo => todo.get('id') === action.id ? todo.set('description', action.description) : todo));
case types.DELETE:
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));
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
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 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
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
32 passing (104ms)Commit changes.
$ git add .
$ git commit -m 'handle TOGGLE_COMPLETE_ONE todo'TodoItem component
It Should render correctly
It should have a toggle complete status checkbox
Write the test.
diff --git a/tests/todomvc/components/TodoItem.spec.js b/tests/todomvc/components/TodoItem.spec.js
index 9792ed2..67241e8 100644
--- a/tests/todomvc/components/TodoItem.spec.js
+++ b/tests/todomvc/components/TodoItem.spec.js
@@ -47,6 +47,15 @@ describe('TodoItem component', () => {
expect(button).to.have.length(1);
expect(button.children().text()).to.equal('delete todo')
+ });
+
+ it('Should have a toggle 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('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
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
1) 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
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
32 passing (103ms)
1 failing
1) TodoItem component Should render correctly Should have a toggle 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/TodoItem.spec.js:56:32)Write the code to make the test pass.
diff --git a/src/todomvc/components/TodoItem.js b/src/todomvc/components/TodoItem.js
index 384570d..3eea02e 100644
--- a/src/todomvc/components/TodoItem.js
+++ b/src/todomvc/components/TodoItem.js
@@ -35,7 +35,8 @@ export default class TodoItem extends Component {
<label onDoubleClick={this.handleDoubleClick.bind(this)}>
{todo.get('description')}
</label>
<input type="checkbox" name="completed"/>completed
+ <button onClick={() => deleteTodo(todo.get('id'))}>delete todo</button>
</li>
)
}
@@ -46,7 +47,8 @@ export default class TodoItem extends Component {
return (
<li>
<TodoTextInput text={todo.get('description')} onSave={(text) => this.handleSave(todo.get('id'), text)}/>
<input type="checkbox" name="completed"/>completed
+ <button onClick={() => deleteTodo(todo.get('id'))}>delete todo</button>
</li>
)
}
(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
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
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
33 passing (101ms)Commit changes.
$ git add .
$ git commit -m 'have a toggle complete status checkbox'It should behave correctly
It should call toggleCompleteOneTodo() when the complete status checkbox is changed
Write the test.
diff --git a/tests/todomvc/components/TodoItem.spec.js b/tests/todomvc/components/TodoItem.spec.js
index 67241e8..fcfc6e0 100644
--- a/tests/todomvc/components/TodoItem.spec.js
+++ b/tests/todomvc/components/TodoItem.spec.js
@@ -13,7 +13,8 @@ function setup() {
const props = {
todo: Map({id: uuid.v4(), description: 'Use Redux', completed: false}),
editTodo: sinon.spy(),
- deleteTodo: sinon.spy()
+ deleteTodo: sinon.spy(),
+ toggleCompleteOneTodo: sinon.spy()
};
const component = shallow(
<TodoItem {...props} />
@@ -102,6 +103,14 @@ describe('TodoItem component', () => {
component.children('label').simulate('doubleclick'); // switch to edit mode
component.find('TodoTextInput').props().onSave('');
expect(props.deleteTodo.called).to.be.true
+ });
+
+ it('Should call toggleCompleteOneTodo() when the complete status checkbox is changed', () => {
+ const {component, props} = setup();
+ const input = component.find('input');
+
+ input.simulate('change');
+ expect(props.toggleCompleteOneTodo.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
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
1) 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
33 passing (94ms)
1 failing
1) TodoItem component Should behave correctly Should call toggleCompleteOneTodo() when the complete status checkbox is changed:
AssertionError: expected false to be true
+ expected - actual
-false
+true
at Context.<anonymous> (tests/todomvc/components/TodoItem.spec.js:113: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/TodoItem.js b/src/todomvc/components/TodoItem.js
index 9532d03..bb30c72 100644
--- a/src/todomvc/components/TodoItem.js
+++ b/src/todomvc/components/TodoItem.js
@@ -8,7 +8,8 @@ export default class TodoItem extends Component {
static propTypes = {
todo: PropTypes.object.isRequired,
editTodo: PropTypes.func.isRequired,
- deleteTodo: PropTypes.func.isRequired
+ deleteTodo: PropTypes.func.isRequired,
+ toggleCompleteOneTodo: PropTypes.func.isRequired
};
constructor(props, context) {
@@ -28,26 +29,28 @@ export default class TodoItem extends Component {
}
renderTodoListItem() {
- const {todo, deleteTodo} = this.props;
+ const {todo, deleteTodo, toggleCompleteOneTodo} = this.props;
return (
<li>
<label onDoubleClick={ this.handleDoubleClick.bind(this) }>
{ todo.get('description') }
</label>
- <input type="checkbox" name="completed" />completed
+ <input type="checkbox" name="completed" checked={todo.get('completed')}
+ onChange={ () => toggleCompleteOneTodo(todo.get('id')) }/>completed
<button onClick={ () => deleteTodo(todo.get('id')) }>delete todo</button>
</li>
)
}
renderTodoTextInput() {
- const {todo, deleteTodo} = this.props;
+ const {todo, deleteTodo, toggleCompleteOneTodo} = this.props;
return (
<li>
<TodoTextInput text={ todo.get('description') } onSave={ (text) => this.handleSave(todo.get('id'), text) }/>
- <input type="checkbox" name="completed" />completed
+ <input type="checkbox" name="completed" checked={todo.get('completed')}
+ onChange={ () => toggleCompleteOneTodo(todo.get('id')) }/>completed
<button onClick={ () => deleteTodo(todo.get('id')) }>delete todo</button>
</li>
)diff --git a/tests/todomvc/components/MainSection.spec.js b/tests/todomvc/components/MainSection.spec.js
index badf84c..dd90ed1 100644
--- a/tests/todomvc/components/MainSection.spec.js
+++ b/tests/todomvc/components/MainSection.spec.js
@@ -18,7 +18,8 @@ function setup() {
]),
actions: {
editTodo: sinon.spy(),
- deleteTodo: sinon.spy()
+ deleteTodo: sinon.spy(),
+ toggleCompleteOneTodo: sinon.spy()
}
};
(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
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 (103ms)Commit changes.
$ git add .
$ git commit -m 'call toggleCompleteOneTodo() when the complete status checkbox is changed'Run It!
Now let's see what this looks like.
Open http://localhost:4000 in your web browser.
Type "Hello" into the text input box and see a new complete status checkbox appear.
Last updated
Was this helpful?
