Edit a Todo
Story: As a user, I want to edit a todo in my todos list
TodoMVC actions
It should create an action to edit a todo
Write the test. Notice that we're using the string literal 'todomvc/EDIT' for the action type, rather todomvc.types.EDIT. The latter allows the test to pass when todomvc.types.EDIT is undefined, since both the created action and the expected action types will be undefined and therefore equal.
diff --git a/tests/todomvc/actions.spec.js b/tests/todomvc/actions.spec.js
index 614f483..694dd04 100644
--- a/tests/todomvc/actions.spec.js
+++ b/tests/todomvc/actions.spec.js
@@ -12,5 +12,14 @@ describe('TodoMVC actions', () => {
};
expect(todomvc.actions.addTodo(description)).to.deep.equal(expectedAction)
+ });
+
+ it('Should create an action to edit a todo', () => {
+ const description = 'My todo';
+ const expectedAction = {
+ type: 'todomvc/EDIT', id: 'my_id', description: description
+ };
+
+ expect(todomvc.actions.editTodo('my_id', description)).to.deep.equal(expectedAction)
})
});
(END)Run the test and watch it fail.
Write the code to make the test pass.
Run the test and notice that it still fails. This is because we haven't defined the EDIT action type, yet.
Define the action type.
Run the test and watch it pass.
Commit changes.
TodoMVC reducer
It should handle EDIT todo
Write the test.
Run the test and watch it fail.
Write the code to make the test pass.
Run the test and watch it pass.
Commit changes.
TodoItem component
Should behave correctly
It should switch to edit mode when label onDoubleClick is fired
Write the test.
Run the test and watch it fail.
Write the code to make the test pass.
Run the test and watch it pass. We'll get a warning from TodoTextInput because we haven't implement the onSave handler yet.
Commit changes.
It should call editTodo() when TodoTextInput onSave is called
Write the test.
Run the test and watch it fail.
Write the code to make the test pass.
Run the test and watch it pass. Notice that the TodoItem tests now all pass, but we caused a regression in the MainSection tests by adding a required prop to TodoItem. Under normal circumstances, we would address this regression immediately in order to prevent it from festering. However, to maintain the flow of the tutorial, we'll first finish working on the TodoItem component.
Commit changes.
It should leave edit mode after TodoTextInput onSave
Write the test.
Run the test and watch it fail.
Write the code to make the test pass.
Run the test and watch it pass.
Commit changes.
MainSection Component
Add editTodo action to fix required prop warning regression
Write the test. In this case, we're not adding a new test, but fixing a regession in an existing test. We added editTodo as a required prop in the TodoTextInput component, which is a child of the TodoItem component. Now we need to add the editTodo action to our MainSection test setup.
Run the test and watch it pass with the same warning.
Write the code to make the test pass.
Run the test and watch it pass.
Commit changes.
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 what happens. Then enter "World" You can see todos appear in your todo list, as well as watch the state update with each action in the Redux Dev Tools window on the right, as before. Now, doubleclick on "Hello" and watch the TodoItem label switch to a TodoTextInput component. Change the value in the TodoTextInput components and watch the state update in the Redux Dev Tools window, like this:
Last updated
Was this helpful?