Testing AngularJS

Jacopo Nardiello
Padawan Programmer
Presentation code on Github:
github.com/jnardiello/angularjsday-testing-angular

Tests are a tool to handle
complexity

Fast Dev Cycle
Beneﬁts
Rock solid code

Relaxed Team
Beneﬁts
Fast Dev Cycle
Rock solid code

Relaxed Team
Beneﬁts
Fast Dev Cycle
Rock solid code
Relaxed PM

Testing Javascript
describe(“…”, function() {
it(“should do something", function() {
expect(true).toBe(true);
});
});

Unit tests
• Small portions of code
• Code is isolated
• Quick and easy

Integration tests
Interaction between elements

• From the product
owner point of view
• They are
(computationally)
expensive and slow
Acceptance tests

Misko Hevery
“Agile Coach at Google where he is
responsible for coaching Googlers to
maintain the high level of automated
testing culture”
- misko.hevery.com/about/

“Angular is written with
testability in mind”
- Angular Doc

Why is Angular easily
testable?

DI as Pattern
function Car() {
var wheel = new Wheel();
var engine = Engine.getInstance();
var door = app.get(‘Door’);
!
this.move = function() {
engine.on();
wheel.rotate();
door.open();
}
}

DI as Pattern
function Car(wheel, engine, door) {
engine.on();
wheel.rotate();
door.open();
}
}

The problem
function main() {
var fuel = new Fuel();
var electricity = new Electricity();
var engine = new Engine(fuel);
var door = new Door(Electricity);
var wheel = new Wheel();
var car = new Car(wheel, engine, door);
car.move();
}

DI as framework
function main() {
var injector = new Injector(….);
var car = injector.get(Car);
car.move();
}

DI as framework
function main() {
var injector = new Injector(….);
var car = injector.get(Car);
car.move();
}
Car.$inject = [‘wheel’, ‘engine’, ‘door’];
function Car(wheel, engine, door) {
…
}
}

Angular testability
is super-heroic!
but…

“you still have to do the right thing.”
- Angular Doc

Testability
1. Don’t use new
2. Don’t use globals

Controller
function RocketCtrl($scope) {
$scope.maxFuel = 100;
$scope.ﬁnalCheck = function() {
if ($scope.currentFuel < $scope.maxFuel) {
$scope.check = ‘ko’;
} else {
$scope.check = 'ok';
}
};
}

var $scope = {};
var rc = $controller(
'RocketCtrl',
{ $scope: $scope }
);
!
$scope.currentFuel = 80;
$scope.ﬁnalCheck();
expect($scope.check).toEqual('ko');
Controller Test

Directive
app.directive('rocketLaunchPad', function () {
return {
restrict: 'AE',
replace: true,
template:
‘<rocket-launch-pad>
Rocket here
<rocket-launch-pad>’
};
});

Directive Test
it(‘Check launchpad was installed', function() {
var element = $compile(“<rocket-launch-pad></
rocket-launch-pad>”)($rootScope);
!
expect(element.html()).toContain("Rocket here");
});

Filter Test
.ﬁlter('i18n', function() {
return function (str) {
return translations.hasOwnProperty(str)
&& translations[str]
|| str;
}
})
var length = $ﬁlter('i18n');
expect(i18n(‘ciao’)).toEqual(‘hi’);
expect(length(‘abc’)).toEqual(‘abc');

Karma
Run tests against real browsers

Karma
Run tests against real browsers
Unit tests

Conﬁg ﬁle
> karma init
- frameworks: [‘jasmine’]

Conﬁg ﬁle
> karma init
- autoWatch: true

Config file
> karma init
- files: [
‘../tests/controllerSpec.js’
],
- autoWatch: true

Config file
> karma init
- files: [
‘../tests/controllerSpec.js’
],
- autoWatch: true
- browsers: ['Chrome']

Using Karma
> karma start conﬁg.js

• They can be very
slow
• Hard to write
• Hard to keep
updated
Acceptance tests

Protractor
E2E Angular Testing
Angular wrapper for WebDriver

Anatomy of a E2E test
describe(‘…’, function() {
it(‘…’, function() {
browser.get(‘…’);
element(by.model(‘…’)).sendKeys(..);
!
var calculate = element(by.binding(‘…’));
!
expect(some.method()).toEqual(..);
});
});

Global Variables
!
!
});
});

Global Variables
!
!
});
});
Super-Happy Panda!

Page Objects
Protractor provides

Page Objects
Protractor provides
Debugging with superpowers

Page Objects
Protractor provides
Debugging with superpowers
Angular-speciﬁc functions

Get your hands dirty!
https://github.com/jnardiello/angularjsday-testing-angular
Tools in action - http://vimeo.com/86816782

Jacopo Nardiello
Twitter: @jnardiello
Say hi!

Jacopo Nardiello
Twitter: @jnardiello
Questions?

Testing AngularJS

More Related Content

What's hot(20)

Similar to Testing AngularJS(20)

More from Jacopo Nardiello(7)

Recently uploaded(20)

Testing AngularJS