Intro to Testing
We support test-focused development over test-driven development
A toolkit
(the test framework)
Testing
Goal: Answer these questions
Take measures to check the quality, performance, or reliability of (something), especially before putting it into widespread use or practice.
Front-end testing
Testing front-end code has traditionally been incredibly difficult
Involves
Types of tests
Unit testing
Testing small composable components of functionality
End-to-end testing
Pretending we’re a user interacting with the site
TDD?
TDD?
Testing philosophy
Our testing philosophy
Write testable code
<code class="javascript">angular.module('myApp', [])
.controller('HomeController', function($scope, api) {
$scope.loadFriends = function() {
api.loadFriends()
.then(function(friends) {
$scope.friends = friends;
api.resetFriendsCache()
.then(function(cache) {
cache.put('friends', friends)
.then(function() {
$scope.ready = true;
});
});
});
}
});
Not testable code
<code class="javascript">angular.module('myApp', [])
.controller('HomeController', function($scope, api) {
var ctrl = this;
// Load friends
$scope.loadFriends = function() {
return api.loadFriends()
.then(ctrl.resetFriendsCache())
.then(function() {
$scope.ready = true;
});
};
// Clear friends cache
this.resetFriendsCache = function() {
return api.resetFriendsCache();
};
});
Testable code means writing small, simple functions easily isolated in tests.
Process of testing
1. Isolate functionality
2. Set expectation
3. Set given conditions
4. Compare given conditions with expectation
5. Rinse and repeat
AngularJS Testing Landscape
Jasmine, Karma, Protractor?
Jasmine
a framework for testing code
Jasmine
<code class="javascript">describe("A suite", function() {
it("contains spec with an expectation", function() {
expect(true).toBe(true);
});
});
Jasmine
Karma
A test
runner
Karma
Karma
Karma
Protractor
end-to-end test framework for AngularJS
Protractor
Jasmine
Jasmine
Karma and Protractor aren’t used together