Unit testing in JavaScript? There is no such thing.” This is something most of the Java developers would say. With AngularJS coming more and more to scene and Google standing behind it, testing is starting to be core part of all AngularJS project. I would like to show how you can do unit testing in pure JavaScript (AngularJS) application (together with backend mocking…).

1. Slaven Tomac (Amphinicy Technologies)
slaven.tomac@amphinicy.com
@slaventomac

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

3. JavaScript testing problems
◦ Mixed JS/DOM
◦ Mixed backend calls into JS functions
AngularJS tries to fight itAngularJS tries to fight it
◦ DOM manipulations only in directives
◦ Business logic in services
◦ Flow of application in controllers
◦ . . .

4. Karma – test launcher
Assertion frameworks (Jasmine,
Mocha, QUnit …)
AngularMock library (optional)
Prerequsitions:Prerequsitions:
◦ Node.js
◦ NPM (Node Package Manager)

5. 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

6. 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”);
});

7. 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’
},
. . .
]
)

8. Directives
Services
Controllers
Filters
InterceptorsInterceptors
Resources
. . .
JavaScript

9. 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>

10. Function definition
Function testing
Note:
(if includes backend requests, $httpBackend mock(if includes backend requests, $httpBackend mock
required)

11. Scope – variable instantiation
Scope – function definitions and functionality
Application workflow
Note:Note:
($controller needed) beforeEach (inject(function ($controller) {
MainCtrl = $controller('MainCtrl', {
$scope: scope
});
}));

12. Functionality
DOM changes ($compile needed)
Note:
(dependency injection with suffix ‘Filter’)(dependency injection with suffix ‘Filter’)
beforeEach (inject(function(ageRangeFilter) {
myAgeRangeFilter =
ageRangeFilter;
}));

13. Application for displaying JavaCro atendees and
filtering them by agefiltering them by age

14. 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

15. 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

16. Use Karma as test runner
Write your tests in Jasmine
Integrate Karma on continuous integration serverIntegrate Karma on continuous integration server
and TEST, TEST, TEST, TEST… you’ll be happier
later ☺

17. Thank you!