Implementing "Complete Task" Feature
Explore implementing the Task component that displays tasks, marks them as completed, and reacts to user clicks. This lesson guides you to write failing unit tests first, then develop React code to handle task display, CSS completion status, and click event callbacks, reinforcing test-driven development principles.
We'll cover the following...
Where we left off
In the last lesson, we decided that our TODO app needs to be able to mark tasks as “completed” by clicking on them. The integration test that tests for this behaviour is currently failing, and we will begin fixing it now.
Task component
Stop and think about the behaviour we are going to implement. It assigns some of the responsibility (reacting to user input, e.g., mouse click) to individual tasks. Right now, we only have the TaskList component, which is responsible for displaying all of the tasks. To adhere to the single responsibility principle, we will create another component: Task. It is responsible for displaying a single task and reacting to user interaction for this task.
As usual, we will first write failing unit tests, and fix them with implementation. We will need to test (at least) three aspects of this component:
- It must display the task.
- It must communicate its completion (
completedCSS class). - It must react to user interaction.
Create a file Task.test.js in src/components with these placeholders: