JavaCro'14 - Unit testing in AngularJS – Slaven Tomac
-
Upload
hujak-hrvatska-udruga-java-korisnika-croatian-java-user-association -
Category
Technology
-
view
1.463 -
download
0
description
Transcript of JavaCro'14 - Unit testing in AngularJS – Slaven Tomac
� 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!