{"id":1094,"date":"2023-06-22T05:00:00","date_gmt":"2023-06-22T12:00:00","guid":{"rendered":"https:\/\/www.angulartraining.com\/daily-newsletter\/?p=1094"},"modified":"2023-06-21T16:02:19","modified_gmt":"2023-06-21T23:02:19","slug":"how-to-unit-test-an-angular-service","status":"publish","type":"post","link":"https:\/\/www.angulartraining.com\/daily-newsletter\/how-to-unit-test-an-angular-service\/","title":{"rendered":"How to unit test an Angular service?"},"content":{"rendered":"\n

Yesterday, we covered how to unit test an Angular pipe<\/a>. Services are a bit more complex to test because they usually have dependencies that need to be injected. Let’s consider this example:<\/p>\n\n\n

\n
\"\"<\/figure>\n<\/div>\n\n\n

<\/p>\n\n\n\n

All the service does is rely on the HttpClient<\/code> to make requests to a server. In a unit test, we don’t want to have a server up and running for the test to work. Instead, we want to focus on CartService<\/code> only and replace all its dependencies with fake implementations called mocks<\/strong>.<\/p>\n\n\n\n

Replacing a dependency with a mock requires some dependency injection config, which is why the setup of a service test is different. Here is what Angular CLI generates for us automatically:<\/p>\n\n\n

\n
\"\"<\/figure>\n<\/div>\n\n\n

<\/p>\n\n\n\n

We can see that the test relies on a TestBed<\/a><\/code> object to create a testing module and then inject CartService<\/code> in our test. TestBed<\/code> is an Angular utility that enables custom dependency injection in unit tests. We are going to use TestBed<\/code> to replace our real HttpClient<\/code> with a fake one.<\/p>\n\n\n\n

The simplest fake implementation we can create to satisfy our unit test is the following:<\/p>\n\n\n

\n
\"\"<\/figure>\n<\/div>\n\n\n

<\/p>\n\n\n\n

The above mock object has hardcoded methods that return the same Observables for each HTTP request. The next step is to configure our TestBed<\/code> so our test uses that mock instead of the real HttpClient<\/code>:<\/p>\n\n\n

\n
\"\"<\/figure>\n<\/div>\n\n\n

<\/p>\n\n\n\n

At this point, our test setup is ready. We can start writing actual test cases. We want to test getCartContents<\/code> and make sure that it returns an empty array. The challenge at that point is that our method returns an Observable, which means we have to subscribe to it and then test the result:<\/p>\n\n\n

\n
\"\"<\/figure>\n<\/div>\n\n\n

<\/p>\n\n\n\n

The above test works! We got the Observable from our mock and checked the empty array. The test passes. That said, when working with Observables, it is recommended to use the async<\/code> function as follows to make sure that the test waits long enough before completing:<\/p>\n\n\n

\n
\"\"<\/figure>\n<\/div>\n\n\n

<\/p>\n\n\n\n

Note that async<\/code> has to be passed as a parameter to the test function (first line of code) and then called as the last line in our subscribe callback function.<\/p>\n\n\n\n

There are other approaches to testing services that rely on the HttpClient. This one is the most straightforward, but if you’re interested, I have another tutorial that uses the official Angular mock API for the HttpClient<\/code><\/a>.<\/p>\n","protected":false},"excerpt":{"rendered":"

Yesterday, we covered how to unit test an Angular pipe. Services are a bit more complex to test because they usually have dependencies that need to be injected. Let’s consider this example: All the service does is rely on the HttpClient to make requests to a server. In a unit test, we don’t want to […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[4,19],"tags":[],"class_list":["post-1094","post","type-post","status-publish","format-standard","hentry","category-angular","category-testing"],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/www.angulartraining.com\/daily-newsletter\/wp-json\/wp\/v2\/posts\/1094","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.angulartraining.com\/daily-newsletter\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.angulartraining.com\/daily-newsletter\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.angulartraining.com\/daily-newsletter\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.angulartraining.com\/daily-newsletter\/wp-json\/wp\/v2\/comments?post=1094"}],"version-history":[{"count":2,"href":"https:\/\/www.angulartraining.com\/daily-newsletter\/wp-json\/wp\/v2\/posts\/1094\/revisions"}],"predecessor-version":[{"id":1102,"href":"https:\/\/www.angulartraining.com\/daily-newsletter\/wp-json\/wp\/v2\/posts\/1094\/revisions\/1102"}],"wp:attachment":[{"href":"https:\/\/www.angulartraining.com\/daily-newsletter\/wp-json\/wp\/v2\/media?parent=1094"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.angulartraining.com\/daily-newsletter\/wp-json\/wp\/v2\/categories?post=1094"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.angulartraining.com\/daily-newsletter\/wp-json\/wp\/v2\/tags?post=1094"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}