Testing Angular Services

An introduction to unit testing, with an example of testing an custom Angular service

Transcript

1. Testing Angular Services QuietStream Financial Lunch-n-Learn August 19, 2015
2. What You Need ➢ An Angular App ➢ A Test Framework (Jasmine) ➢ A Test Runner (Karma) ➢ A Test File
3. An Angular App Prototype of a simple CRUD app, using http: //jsonplaceholder. typicode.com as the datasource. https://github.com/vjwilson/testing-angular-services
4. Something to Test
5. A Test Framework http://jasmine.github.io/
6. A Test Runner http://karma-runner.github.io
7. Install Jasmine, Karma, ...and PhantomJS npm install phantomjs --save-dev npm install jasmine-core --save-dev npm install karma --save-dev npm install karma-jasmine --save-dev npm install karma-phantomjs-launcher --save-dev
8. karma.conf.js // list of files / patterns to load in the browser files: [ 'bower_components/angular/angular.min.js', 'bower_components/angular-route/angular-route.min.js', 'bower_components/angular-mocks/angular-mocks.js', 'app.js', '*.js' ],
9. Start Karma and let it watch our files $ npm test > testing-angular-services@1.0.0 test /Users/van/Projects/testing-angular-services > karma start karma.conf.js 19 08 2015 07:29:34.146:WARN [karma]: No captured browser, open http://localhost:9876/ 19 08 2015 07:29:34.156:INFO [karma]: Karma v0.13.7 server started at http://localhost:9876/ 19 08 2015 07:29:34.165:INFO [launcher]: Starting browser PhantomJS 19 08 2015 07:29:35.335:INFO [PhantomJS 1.9.8 (Mac OS X 0.0.0)]: Connected on socket Ax4qAA6MRxDFJUvQAAAA with id 45108073
10. Let’s write a test Start with a describe block to define our suite of tests. 'use strict'; describe( 'JSON Service', function() { });
11. Inject the module to test describe( 'JSON Service', function() { var jsonService, beforeEach(module('ServiceTest')); beforeEach(inject(function(_jsonService_) { jsonService = _jsonService_; })); });
12. Inject dependencies needed describe( 'JSON Service', function() { var jsonService, httpBackend; ... beforeEach(inject(function($httpBackend) { httpBackend = $httpBackend; })); });
13. The first test it('should get an array of users', function() { jsonService.getUsers().then(function(users) { expect(users.length).toEqual(10); expect(users[1].username).toEqual('Antonette'); expect(users[2].address.geo.lat).toEqual('-68.6102'); } }); });
14. ...and this happens PhantomJS 1.9.8 (Mac OS X 0.0.0) JSON Service should get an array of users FAILED Error: Unexpected request: GET http://jsonplaceholder.typicode.com/users No more request expected at $httpBackend (/Users/van/Projects/testing-angular-services/bower_components/angular-mocks/angular- mocks.js:1211) at n (/Users/van/Projects/testing-angular-services/bower_components/angular/angular.min.js:88) at /Users/van/Projects/testing-angular-services/bower_components/angular/angular.min.js:86 at /Users/van/Projects/testing-angular-services/bower_components/angular/angular.min.js:120 at /Users/van/Projects/testing-angular-services/bower_components/angular/angular.min.js:134 at /Users/van/Projects/testing-angular-services/bower_components/angular/angular.min.js:132 at /Users/van/Projects/testing-angular-services/bower_components/angular-mocks/angular-mocks.js:1541 at /Users/van/Projects/testing-angular-services/json.spec.js:18 PhantomJS 1.9.8 (Mac OS X 0.0.0): Executed 1 of 1 (1 FAILED) ERROR (0.001 secs / 0.009 secs)
15. So, let’s mock the request it('should get an array of users', function() { httpBackend.whenGET('http://jsonplaceholder. typicode.com/users') .respond( function(method, url, data) { var usersResponse = getUsersResponse(); return [200, usersResponse, {}]; }); jsonService.getUsers().then(function(users) { ...
16. ...and now this happens PhantomJS 1.9.8 (Mac OS X 0.0.0) JSON Service should get an array of users FAILED Error: Unflushed requests: 1 at /Users/van/Projects/testing-angular-services/bower_components/angular-mocks/angular-mocks.js:1563 at /Users/van/Projects/testing-angular-services/json.spec.js:19 PhantomJS 1.9.8 (Mac OS X 0.0.0): Executed 1 of 1 (1 FAILED) (0.003 secs / 0.014 secs)
17. Finally, let’s resolve the async call it('should get an array of users', function() { httpBackend.whenGET('http://jsonplaceholder. typicode.com/users') ... }); jsonService.getUsers().then(function(users) { ... httpBackend.flush(); });
18. ...and finally we get this. 19 08 2015 07:22:34.200:INFO [watcher]: Changed file "/Users/van/Projects/testing-angular-services/json.spec.js". PhantomJS 1.9.8 (Mac OS X 0.0.0): Executed 1 of 1 SUCCESS (0 secs / 0.014 secs)
19. Homework ➢ Clone the repo ➢ Write tests for the Create, Update, and Delete functions ➢ (Extra credit) Make tests for the controllers
20. Resources ➢ https://docs.angularjs.org/guide/unit-testing ➢ http://www.sitepoint.com/unit-testing-angularjs-services-controllers- providers/ ➢ https://www.airpair.com/angularjs/posts/unit-testing-angularjs-applications ➢ http://www.pluralsight.com/courses/testing-angularjs-from-scratch ➢ http://www.pluralsight.com/courses/play-by-play-angular-testing-papa-bell