More on Integration Tests

Unit tests are passing. Now what?

When we wrote the integration test in the beginning, we wanted our app to input tasks and display them. We then wrote tests to check that tasks are being saved and displayed. However, if you try running the integration test right now, it will fail:

TimeoutError: Waiting for element to be located By(xpath, //input[@placeholder='Enter new task'])
    Wait timed out after 1042ms

Now, try to recall the difference between unit and integration tests. Unit tests check the system components in isolation. They should be working perfectly fine on their own. Integration tests check the system as a whole. But the reason they are failing is because we did not never tie our components together in a system. We did not even render them!

Let’s fix that. Delete the file App.test.js, as we won’t be needing it. Then, in App.js, we will delete all the existing HTML code and render our components instead:

function App() {
  return (
    <div>
      <TaskInput />
      <TaskList />
    </div>
}

However, the tests are still failing. If you open the project in a browser, you will find out why:

We did not pass anything to the TaskList. To fix that, we should:

<TaskList tasks={[]} />

Now we get a different error:

TimeoutError: Waiting for element to be located By(xpath, //*[text()='new todo!'])
Wait timed out after 1055ms

Selenium now successfully finds our input and submits it, but there is not a created task. Now, we have to implement some logic for that. Let’s use state:

const [tasks, setTasks] = useState([]);

And create a handler function for TaskInput:

const handleNewTask = (task) => setTasks([...tasks, task]);

Now, we can plug these into our components:

<TaskInput onSubmit={handleNewTask}/>
<TaskList tasks={tasks} />

After adding this, the integration test should pass. You can see the code here: