In the previous exercise, we checked that the server responded with specific status codes. Now we need to make sure the server is responding with the correct content. Specifically, we are looking at HTML responses that are rendered by the front-end.

Many servers return dynamic HTML content based on the user, the URL accessed, header values, and more. We use TDD to ensure the server responds correctly for each case. When designing our tests, it is important to consider both the intended and unintended user behavior.

We can organize our tests into two categories:

• tests that exercise the “Happy Path” — expected use cases of our application
• tests that exercise the “Sad Path” — unexpected or invalid use of our application

For our tests, once we retrieve the response from the server, we use assert.include() from the Chai library to check the response.

As an example, after requesting a valid profile page for “My Name”, you may receive the following response content:

response.text = '<div><div id="my-name">My Name</div></div>';

You can retrieve the content of #my-name and check it using the following:

assert.include(parseTextFromHTML(response.text, '#my-name'), "My Name"); //True

We could also write a separate test to check the corresponding “sad path”. Perhaps there is not yet a page for “Your Name”, so you should not receive a response containing similar HTML. We use .notInclude() to verify that the response is not including “Your Name” :

assert.notInclude(parseTextFromHTML(response.text, '#my-name'), "Your Name"); //True

Note that here we are identifying the HTML elements by their ID using our parseTextFromHTML() helper but you can use any selectors supported by the jsdom library. This helper is returning the text content of the corresponding HTML element only, but you could write a separate helper for accessing other attributes.