The front-end testing I’ve done in the past has always had some friction with respect to getting the tools setup properly. Mostly I have used Jasmine as the testing framework, which is pretty self contained – but to get a node test server setup properly there are a variety of other npm modules and karma configuration settings to deal with. I previously wrote about how the angular-cli makes it easy to get an Angular 2 project setup, and this includes getting the test tools setup as well. So instead of dealing with configuration settings, you can quickly get to just writing tests.
Until recently, the front-end testing I’d done had not directly tested any Angular services. In almost every case, the $http calls in the services were just returning data from an API back to a controller. However, on a recent project I had a scenario where the data from the API had to have some filtering and permission logic applied before passing on the data. This was a case where unit testing the service made sense.
As it turns out, testing a service is very similar to testing a controller in terms of setting up the test, injecting dependencies, and making assertions. The only real difference is the need to mock the $http call in the service. To do this the angular-mocks library provides the $httpBackend tool. Let’s walk through an example of testing a service.