Implementing "Complete Task" Feature

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:

1. It must display the task.
2. It must communicate its completion (completed CSS class).
3. It must react to user interaction.

Create a file Task.test.js in src/components with these placeholders:

...