# 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. ```javascript 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. ```bash 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. (tests/todomvc/actions.spec.js:39:28) ``` Write the code to make the test pass. ```javascript 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) ``` ```javascript 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. ```bash 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. ```bash $ git add . $ git commit -m 'created an action to toggle a todo' ``` ## TodoMVC reducer #### It should handle TOGGLE\_COMPLETE\_ONE todo Write the test. ```javascript 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. ```bash 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. (tests/todomvc/reducer.spec.js:67:50) ``` Write the code to make the test pass. ```javascript 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. ```bash 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. ```bash $ 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. ```javascript 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. ```bash 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. (tests/todomvc/components/TodoItem.spec.js:56:32) ``` Write the code to make the test pass. ```javascript 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 { completed + ) } @@ -46,7 +47,8 @@ export default class TodoItem extends Component { return (
  • this.handleSave(todo.get('id'), text)}/> completed +
    • ) } (END) ``` Run the test and watch it pass. ```bash 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. ```bash $ 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. ```javascript 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( @@ -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. ```bash 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. (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. ```javascript 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 (
  • - completed + toggleCompleteOneTodo(todo.get('id')) }/>completed
    • ) } renderTodoTextInput() { - const {todo, deleteTodo} = this.props; + const {todo, deleteTodo, toggleCompleteOneTodo} = this.props; return (
  • this.handleSave(todo.get('id'), text) }/> - completed + toggleCompleteOneTodo(todo.get('id')) }/>completed
    • ) ``` ```javascript 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. ```bash 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. ```bash $ 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 in your web browser. Type "Hello" into the text input box and see a new complete status checkbox appear. ![](/files/-LPqjGHhmtzvWmtt21TA) --- # Agent Instructions: Querying This Documentation If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question. Perform an HTTP GET request on the current page URL with the `ask` query parameter: ``` GET https://hackerati.gitbook.io/react-tutorial/todomvc_app/toggle_a_todo_between_completed_and_not_completed.md?ask= ``` The question should be specific, self-contained, and written in natural language. The response will contain a direct answer to the question and relevant excerpts and sources from the documentation. Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.