Testing HTTP Requests in Angular with HttpClientTestingModule

Photo by ian dooley on Unsplash

In this brief article, I will show you how to test your HTTP Requests in Angular, using the HttpClientTestingModule and the HttpTestingController, both from @angular/common/http/testing.

Let’s begin with the basic test setup for our CoursesService:

Basic test setup for our CoursesService

I would like this service to allow us perform two different requests:

1. A POST request to add a new course that belongs to a specific topic.
2. A GET request to get all the courses that belong to a particular topic.

Now, taking a test-first mentality, let’s write a test for the first case:

#addCourse test for CoursesService — POST req

Let’s breakdown this test. This is basically what we want to achieve and what we will have to implement in our service:

• We create a mockCourse with a name and a description.
• We run the addCourse function and we expect that the property name in the response that we will get when the request is carried (when the observable resolves) out is ‘Chessable’ (the same as in the mockCourse).
• Then we have a req URL, when we call the function addCourse, we expect that we can call the endpoint defined as a param of expectOne, which is checking that there is just one request.
• We also check that the type of request is a POST.
• Then we ‘flush’ or respond with the mock data that we pass as a parameter, and that causes the Observable to resolve and evaluate the expect on line 10.
• Finally we run the afterEach block from the first image to verify that there are no pending HTTP requests.

Now that we know the steps to write a test for an HTTP request in Angular, let’s implement our addCourse function into our service:

• We inject a private variable of the HttpClient (Angular module to perform HTTP requests) into our constructor. Unlike in the tests, where we do not really perform real HTTP requests, thanks to the mock provided by Angular, we need to use this module now.
• Now we create a function (addCourse) that will return an Observable to which we can subscribe from our components to consume the data that they will carry with them.
• We pass the course information as a parameter to be able to save it.
• We access the endpoint using the topicId of such course specified as the data of the POST request.

One thing to note is that we will be able to read the data from the response object directly without explicitly parsing a JSON, unlike in the previous HttpModule before Angular 4.3 was released.

If you are getting import errors because of the new modules, first make sure your current Angular version is not older than 4.3.

Let’s now add the test to get our courses by topic:

In this case, we are testing all the information in the objects. As you can see, it looks pretty similar.

Finally, we implement the getCoursesByTopic function into the service, the same way as we did with the addCourse function:

In this case, we just need to take a topicId to be able to match the endpoint and retrieve only the courses for a particular topicId.

I hope you enjoyed this post and that you feel encouraged to write some tests for your services!