. Part 1 — Link . Part 2 — Link . Part 3 — Link Part 4 — You’re here now. The TodoList component We’ve got a couple more things to do to make our failing e2e test pass; have a element and have it contain the text we submit in our form. .todo-text Create the folder structure and then write our first unit test in that will allow us to create our component: src/components/todoList/ test.js This should be self explanatory, it’s very similar to how we started building our component. addTodo What the component should return in the : index.js We’ll wrap our component in a . Line 4 <ul> Then let’s test for a todo in the list: We create our prop, an array containing one todo as an object with and . Line 8 — 13 todos id text We actually pass that todo in as a prop to our component. Line 15 We expect that our will contain a element with our todo text. Line 22 todoList .todo-text Now we just have to get our todo to render: import for our validation. Line 2 PropTypes We tell our component that it will receive a called , it will be an array of objects, its will be a number and will be a string, and everything is required. . Line 18 — 25 prop todos id text React prop-types validation We pass the prop in to our actual component. Line 4 todos We over our array, returning an whose contents are the and it has a of , the is required by to more efficiently know how to re-render the DOM and if you don’t have it you will get a console warning in dev. Line 5 — 8 map li todo.text key todo.id key React We return our wrapper with all the 's for each todo in our state. Line 11 — 15 ul li . Git commit . State of the repository Displaying todos At this point our component knows how to render itself so can be wired in to our main App. TodoList import our component. Line 5 TodoList Provide proper validation for it. Line 18 — 23 Bring our todos array from state in to our App as a so that we can pass it down. We’ve made it available as a thanks to . Line 8 prop prop line 26 Add the component to our and pass from state to it. Line 12 TodoList App todos We now get a test error because we’ve told the component it requires a array but haven’t passed it in: todos So we make that change: Simply pass an empty array to our prop, that’ll stop our complaining. We don’t want to unit test child components at the parent level. Line 15 todos App.test Now if we view our App in the browser we’ll find that we can actually display those lovely todos we’ve been storing in state. Huzzah! And now our e2e test should pass: . Git commit . State of the repository Deleting a todo First we write our e2e test: Add above to your e2e test. Line 12 — 21 This test runs through the same procedure as the one before and then clicks the element and then expects the selector’s to equal ‘failure’. If it existed (was not deleted), it would equal ‘success’. .todo-delete state I like to implement functionality by writing the action, the reducer, creating the component, then adding it to the App. So let’s test for the right action. First let’s create an appropriate constant: Our new DELETE_TODO constant. Line 3 Then, in the all we need to know to delete a todo will be its unique . action id Then add the code to make it pass: And now let’s unit test our reducer functionality: This should hopefully make a lot of sense by now. We’re giving our a which includes a todo, passing it in the we just created which should delete that todo from the store, and expecting the returned state to indeed not contain the todo. reducer startingState action We now need to add another in our to handle this: case reducer When the DELETE_TODO is encountered we return a new state which includes all of the existing , and we override the array to be only a filtered list where s are not the same as the . Therefore all the s that are not the one we wanted to delete. action.type ...state todos todo.id action.id todo That was easy, wasn’t it? Now let’s test our component can let us delete a todo: Add to the eslint exceptions. Line 1 jest Create a mock function for our delete functionality. Line 8 Refactor our previous single prop to be an object that holds all the props we need. Line 10 — 18 todos Let our shallow render and unpack all the previously specified. Line 20 component props Test that clicking on a element does indeed call our function. Line 30 — 34 .todo-delete deleteTodo And then the code to make our test pass: Validation our prop. Line 36 deleteTodo Pass it in to our component. Line 4 Add a ‘Delete’ button which will call the function with the as the argument on the event. Line 8 — 14 deleteTodo todo.id onClick Now we need to hook it up to our UI via the App: Create the prop that will dispatch the appropriate action. Line 36 — 38 deleteTodo Validate it. Line 24 Add it to the props for our component. Line 8 Add it to the component. Line 12 TodoList And it’s really just that simple. Unit tests and e2e tests should be passing and the functionality should be working in our App in the browser. . Git commit . State of the repository Undelete a todo If you’re still with me then you’re doing pretty good, and definitely not a newbie! So it’s time for a little challenge. I’m not going to tell you how to do this, why not give it a go yourself? Think about what you need. Just above you were able to all the functionality to delete a todo, do the same for undelete. Also think about how, where and when you’re going to store your last deleted todo. With that in place it should click! TDD It won’t be too difficult to do this, it may take half an hour or a couple of hours but you can do it. Try and TDD it for a solid challenge. Then check out how I did it: . Git commit . State of the repository Disabling buttons So our App is sort of working, well the stuff we’ve tested is working. But if you try and use it you may discover some bugs that we’ve not coded for. You could branch off and try and fix them and add more functionality if you wish, but one final challenge I’ll pose you before you do that is to disable the and buttons when it’s not appropriate to click them. ‘Add Todo’ ‘Undelete’ Have a think about how you could implement this, google around a bit and give it a shot. We both know you can do it! When you’re done have a look at how I did it. I definitely wouldn’t say there was a right or a wrong way, just different approaches: . Git commit . State of the repository Style it As a front ender it pains me to even call this but I guess this isn’t a CSS tutorial. If you want to make it pretty then fill your boots. This is just what mine happens to look like: styled High production value . Git commit . State of the repository Deploying to Heroku This is optional and just for a laugh, but if you do want to deploy your app online easily for free then Heroku offers a quick fix. This will allow you to play around with production builds and your own CI/CD pipelines if you so wish. First . Get set up with Heroku Then follow the instructions for the for React. heroku-buildpack Visit the . App online here Writing the readme I’ve gone with the simple approach of just listing out how to setup, run and test our App. . The readme . Final state of the repository Previous parts . Part 1 — Link . Part 2 — Link . Part 3 — Link Part 4 — You’re here now. Aaand that’s it… Yup, it really is. Have any feedback? Leave a message below. I’m outie 9000.

Facebook

Google

Heroku

Too Long; Didn't Read

In your car, at home, or at work — Bosch technology shapes many areas of life.

A guide to TDD a React/Redux TodoList App — Part 4

Too Long; Didn't Read

Companies Mentioned

Sanjay Purswani

About Author

TOPICS

THIS ARTICLE WAS FEATURED IN...

A guide to TDD a React/Redux TodoList App — Part 4

Too Long; Didn't Read

Companies Mentioned

Sanjay Purswani

About Author

TOPICS

THIS ARTICLE WAS FEATURED IN...

RELATED STORIES