Unit Testing in AngularJS

Slaven Tomac (Amphinicy Technologies)

slaven.tomac@amphinicy.com

@slaventomac

JavaScript unit testing AngularJS application testing tools Karma Jasmine Angular Mock What to test Example

Agenda

JavaScript testing problems◦ Mixed JS/DOM◦ Mixed backend calls into JS functions

AngularJS tries to fight it◦ DOM manipulations only in directives◦ Business logic in services◦ Flow of application in controllers◦ . . .

JavaScript Unit Testing

Karma – test launcher Assertion frameworks (Jasmine, Mocha, QUnit …) AngularMock library (optional) Prerequsitions:

◦ Node.js◦ NPM (Node Package Manager)

AngularJS Testing Toolset

Test runner◦ launches HTTP server◦ loads needed files◦ runs test

All major browsers supported Available for testing on continuous integration server Configuration driven

Karmanpm install karma -g

Assertion library Karma supports it via plugin (Custom) Matchers Setup and Teardown (beforeEach, afterEach) Spies

Jasmine

describe("One testing suite", function() { it("contains spec with an expectation", function() { var javaCroAtendees = 12; expect(javaCroAtendees).toBe(12, "number of javaCroAtendees should be 12”);});

npm install karma-jasmine -g

AngularJS mocking library Injecting and mocking Angular services Included mocks

◦ $exceptionHandler◦ $log◦ $interval◦ $timeout◦ $httpBackend

AngularMock library

$httpBackend .when('GET', '/api/1.0/event') .respond( [ { ‘event_name’ : ’javaCro’, ‘location’ : ’Porec’ }, . . . ] )

Directives Services Controllers Filters Interceptors Resources . . . JavaScript

What to test in AngularJS?

Layout Functionalities Model changes ($apply required) Scope

Note:($compile required)

What to test in directive?

element = $compile('<card-deck cards="myCards"></card-deck>');

<ul><li>Ace of Spades</li><li>Queen of Hearts</li>

</ul>

Function definition Function testing

Note:(if includes backend requests, $httpBackend mock required)

What to test in service?

Scope – variable instantiation Scope – function definitions and functionality Application workflow

Note:($controller needed)

What to test in controller?

beforeEach (inject(function ($controller) {MainCtrl = $controller('MainCtrl', {

$scope: scope});

}));

Functionality DOM changes ($compile needed)

Note:(dependency injection with suffix ‘Filter’)

What to test in filter?

beforeEach (inject(function(ageRangeFilter) {myAgeRangeFilter = ageRangeFilter;

}));

Application for displaying JavaCro atendees and filtering them by age

Example

E2E tests

How to make testing/developing more standard/automated?

◦ Use Yeoman for scaffolding your app structure

◦ Use Grunt for building, deploying and automated testing

What next?

yo angular

grunt serve

What is Amphinicy doing about it?

2y ago 6m ago 3m ago EOY 20140%

10%

20%

30%

40%

50%

60%

70%

80%

90%

100%

15%

60%

75% 75%

30%

90%

WebUI unit testing strategy

Web GUIs Unit tests Automated tests

Hey, let’s use AngularJS

Use Karma as test runner

Write your tests in Jasmine

Integrate Karma on continuous integration server and TEST, TEST, TEST, TEST… you’ll be happier later

What should you do about it?

Thank you!