javacro'14 - unit testing in angularjs – slaven tomac

Slaven Tomac (Amphinicy Technologies)

slaven.tomac@amphinicy.com

@slaventomac

� JavaScript unit testing

� AngularJS application testing tools

� Karma

� Jasmine

Angular Mock� Angular Mock

� What to test

� Example

� JavaScript testing problems◦ Mixed JS/DOM

◦ Mixed backend calls into JS functions

� AngularJS tries to fight it� AngularJS tries to fight it◦ DOM manipulations only in directives

◦ Business logic in services

◦ Flow of application in controllers

◦ . . .

� Karma – test launcher

� Assertion frameworks (Jasmine,

Mocha, QUnit …)

� AngularMock library (optional)

Prerequsitions:� Prerequsitions:◦ Node.js

◦ NPM (Node Package Manager)

� Test runner◦ launches HTTP server

◦ loads needed files

◦ runs test

� All major browsers supported

npm install karma -g

� All major browsers supported

� Available for testing on continuous integration server

� Configuration driven

� Assertion library

� Karma supports it via plugin

� (Custom) Matchers

� Setup and Teardown (beforeEach, afterEach)

Spies

npm install karma----jasmine-g

� Spies

describe("One testing suite", function() {it("contains spec with an expectation", function() {

var javaCroAtendees = 12;expect(javaCroAtendees).totototoBeBeBeBe(12, "number of

javaCroAtendees should be 12”);});

� AngularJS mocking library

� Injecting and mocking Angular services

� Included mocks◦ $exceptionHandler

◦ $log $httpBackend◦ $log

◦ $interval

◦ $timeout

◦ $httpBackend$httpBackend$httpBackend$httpBackend

$httpBackend.when('GET', '/api/1.0/event').respond(

[{

‘event_name’ : ’javaCro’,‘location’ : ’Porec’

},. . .

])

� Directives

� Services

� Controllers

� Filters

Interceptors� Interceptors

� Resources

� . . .

� JavaScript

� Layout

� Functionalities

� Model changes ($apply required)

� Scope

Note:

($compile required)

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 (if includes backend requests, $httpBackend mock required)

� Scope – variable instantiation

� Scope – function definitions and functionality

� Application workflow

Note:Note:

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

$scope: scope});

}));

� Functionality

� DOM changes ($compile needed)

Note:

(dependency injection with suffix ‘Filter’)(dependency injection with suffix ‘Filter’)

beforeEach (inject(function(ageRangeFilter) {myAgeRangeFilter =

ageRangeFilter;}));

� Application for displaying JavaCro atendees and filtering them by agefiltering them by age

� E2E tests

� How to make testing/developing more standard/automated?standard/automated?

◦ Use Yeoman for scaffolding your app structure

◦ Use Grunt for building, deploying and automated testing

yo angular

grunt serve

60%

75% 75%

90%

60%

70%

80%

90%

100%

WebUI unit testing strategy

15%

30%

0%

10%

20%

30%

40%

50%

2y ago 6m ago 3m ago EOY 2014

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 � Integrate Karma on continuous integration server and TEST, TEST, TEST, TEST… you’ll be happier later ☺

Thank you!