The document discusses strategies for testing AngularJS applications, including unit testing controllers and services, mocking dependencies like HTTP requests and services, and end-to-end testing. It provides examples of writing tests for controllers, services, directives, and end-to-end tests using Protractor. Key points covered are setting up tests, injecting dependencies, mocking, and making assertions to validate test behavior.

1. AngularJS
testing
strategies
Nate Peterson
@njpetersonPa

2. What’s not in this talk

3. What’s this talk about

4. Why do we care about
testing?

5. Tests help us fail fast

6. Tests give us confidence

7. Tests help us understand what
we’re doing and where we’re going

8. JavaScript is a dynamically typed
language with almost nohelp from
compiler

9. “One of the fundamental reasons
for choosing Angular is cited as that
it is built with testing in
mind.”

12. function MyController() {
var dep1 = new Dep1();
var dep2 = new Dep2();
//do something with dep1 and dep2
...
}

13. someModule.controller('MyController',
['$scope', 'dep1', 'dep2', function($scope, dep1, dep2) {
...
$scope.aMethod = function() {
...
}
...
}]);
The Angular way

15. function AddCtrl() {
var operand1 = $(#operand1);
var operand2 = $(#operand2);
var result = $(#result);
this.add = function() {
result = operand1 + operand2;
}
}

16. var operand1 = $('<input type="text" id="operand1" />');
var operand2 = $('<input type="text" id="operand1" />');
var result = $('<input type="text" id= "result" />');
var span = $('<span>');
$('body').html('<div class="ex1">')
.find('div')
.append(operand1)
.append(operand2)
.append(result);
var ac = new AddCtrl();
operand1.val('1');
operand2.val('1');
ac.add();
expect(result.val()).toEqual('2');
$('body').empty();

17. Controllers - The Angular way
function AddCtrl($scope) {
$scope.Calc = function() {
$scope.result = $scope.operand1 + $scope.operand2;
}
}

18. Controllers - The Angular way
var $scope = {};
var ctrl = $controller(‘AddCtrl’), {$scope: $scope };
$scope.operand1 = 1;
$scope.operand2 = 1;
$scope.calc();
expect($scope.result).toEqual(2);

19. Two types of testing
that
compliment each other

20. unit testing
and
e2e testing

21. How much reality do you need
in your tests?

22. Knowing what to test is just as
important as how to test

23. Test all the
things
is not a strategy

24. “I get paid for code that works,
not for tests, so my philosophy is
to test as little as possible to reach
a given level of confidence…”
-- Kent Beck

25. Focus on behaviors
rather than implementation details

26. Example – Testing a simple controller

27. app.controller('AddCtrl', function($scope) {
$scope.calc = function() {
$scope.result = $scope.operand1 + $scope.operand2;
}
});

28. app.controller('AddCtrl', function($scope) {
$scope.calc = function() {
$scope.result = $scope.operand1 + $scope.operand2;
}
});
describe('adding 1 + 1', function() {
beforeEach(module('myApp'));
});

29. app.controller('AddCtrl', function($scope) {
$scope.calc = function() {
$scope.result = $scope.operand1 + $scope.operand2;
}
});
describe('adding 1 + 1', function() {
beforeEach(module('myApp'));
var ctrl, scope;
beforeEach(inject(function($controller, $rootScope) {
scope = $rootScope.$new();
ctrl = $controller('AddCtrl', { $scope: scope });
}));
});

30. app.controller('AddCtrl', function($scope) {
$scope.calc = function() {
$scope.result = $scope.operand1 + $scope.operand2;
}
});
describe('adding 1 + 1', function() {
beforeEach(module('myApp'));
var ctrl, scope;
beforeEach(inject(function($controller, $rootScope) {
scope = $rootScope.$new();
ctrl = $controller('AddCtrl', { $scope: scope });
}));
it('should equal 2', function() {
scope.operand1 = 1;
scope.operand2 = 1;
scope.calc();
expect(scope.result).toEqual(2);
})
});

31. Example – mocking $http

32. var app = angular.module('myApp', []);
app.controller('MoviesController', function($scope, $http) {
$http.get("/api/movies")
.then(function (result) {
$scope.movies = result.data;
});
});

33. describe("myApp", function () {
beforeEach(module('myApp'));
describe("MoviesController", function () {
var scope, httpBackend, http, controller;
});

34. describe("myApp", function () {
beforeEach(module('myApp'));
describe("MoviesController", function () {
var scope, httpBackend, http, controller;
beforeEach(inject(function ($rootScope, $controller,
$httpBackend, $http) {
scope = $rootScope.$new();
httpBackend = $httpBackend;
http = $http;
controller = $controller;
}));
});

35. describe("myApp", function () {
beforeEach(module('myApp'));
describe("MoviesController", function () {
var scope, httpBackend, http, controller;
beforeEach(inject(function ($rootScope, $controller,
$httpBackend, $http) {
scope = $rootScope.$new();
httpBackend = $httpBackend;
http = $http;
controller = $controller;
httpBackend.when("GET", "/api/movies")
.respond([{}, {}, {}]);
}));
});
});

36. describe("myApp", function () {
beforeEach(module('myApp'));
describe("MoviesController", function () {
var scope, httpBackend, http, controller;
beforeEach(inject(function ($rootScope, $controller,
$httpBackend, $http) {
scope = $rootScope.$new();
httpBackend = $httpBackend;
http = $http;
controller = $controller;
httpBackend.when("GET", "/api/movies")
.respond([{}, {}, {}]);
}));
it('should GET movies', function () {
httpBackend.expectGET('/api/movies');
controller('MoviesController', {
$scope: scope, $http: http
});
});
});
});

37. describe("myApp", function () {
beforeEach(module('myApp'));
describe("MoviesController", function () {
var scope, httpBackend, http, controller;
beforeEach(inject(function ($rootScope, $controller,
$httpBackend, $http) {
scope = $rootScope.$new();
httpBackend = $httpBackend;
http = $http;
controller = $controller;
httpBackend.when("GET", "/api/movies")
.respond([{}, {}, {}]);
}));
it('should GET movies', function () {
httpBackend.expectGET('/api/movies');
controller('MoviesController', {
$scope: scope, $http: http
});
httpBackend.flush();
});
});
});

38. Example - mocking services

39. angular.module('myApp', [])
.factory('greeter', function () {
return 'Hello';
})
.factory('worldGreeter', function (greeter) {
return greeter + ' World';
});

40. angular.module('myApp', [])
.factory('greeter', function () {
return 'Hello';
})
.factory('worldGreeter', function (greeter) {
return greeter + ' World';
});
describe('worldGreeter', function () {
beforeEach(inject(function (_worldGreeter_) {
worldGreeter = _worldGreeter_;
}));
});

41. angular.module('myApp', [])
.factory('greeter', function () {
return 'Hello';
})
.factory('worldGreeter', function (greeter) {
return greeter + ' World';
});
describe('worldGreeter', function () {
beforeEach(inject(function (_worldGreeter_) {
worldGreeter = _worldGreeter_;
}));
it('should work with mocked greeter', function () {
expect(worldGreeter).toEqual('WAT World');
});
});

42. angular.module('myApp', [])
.factory('greeter', function () {
return 'Hello';
})
.factory('worldGreeter', function (greeter) {
return greeter + ' World';
});
describe('worldGreeter', function () {
beforeEach(module('myApp', function($provide) {
$provide.value('greeter', 'WAT');
}));
beforeEach(inject(function (_worldGreeter_) {
worldGreeter = _worldGreeter_;
}));
it('should work with mocked greeter', function () {
expect(worldGreeter).toEqual('WAT World');
});
});

43. angular.module('myApp', [])
.factory('greeter', function () {
return 'Hello';
})
.factory('worldGreeter', function (greeter) {
return greeter + ' World';
});
describe('worldGreeter', function () {
beforeEach(module('myApp', function ($provide) {
$provide.decorator('greeter', function ($delegate) {
return 'WAT';
});
}));
beforeEach(inject(function (_worldGreeter_) {
worldGreeter = _worldGreeter_;
}));
it('should work with mocked greeter', function () {
expect(worldGreeter).toEqual('WAT World');
});
});

44. Example – testing a directive

45. var app = angular.module('myApp', []);
app.directive('simpleDirective', function (){
return {
restrict: 'E',
template: '<div>{{value}}</div>',
scope: {
value: '='
}
};
});

46. describe('Testing simpleDirective', function() {
var scope, elem, directive, compiled, html;
beforeEach(function () {
module('myApp‘);
});
});
it('Should set the text of the element to whatever was passed.',
function() {
});
});

47. describe('Testing simpleDirective', function() {
var scope, elem, directive, compiled, html;
beforeEach(function (){
module('myApp');
html = '<simple-directive value="abc"></simple-directive>';
});
it('Should set the text of the element to whatever was passed.',
function() {
});
});

48. describe('Testing simpleDirective', function() {
var scope, elem, directive, compiled, html;
beforeEach(function (){
module('myApp');
html = ‘<simple-directive value="abc"></simple-directive>';
inject(function($compile, $rootScope) {
scope = $rootScope.$new();
elem = angular.element(html);
compiled = $compile(elem);
compiled(scope);
});
});
it('Should set the text of the element to whatever was passed.',
function() {
});
});

49.
describe('Testing simpleDirective', function() {
var scope, elem, directive, compiled, html;
beforeEach(function (){
module('myApp');
html = ‘<simple-directive value="abc"></simple-directive>';
inject(function($compile, $rootScope) {
scope = $rootScope.$new();
elem = angular.element(html);
compiled = $compile(elem);
compiled(scope);
});
});
it('Should set the text of the element to whatever was passed.',
function() {
expect(elem.text()).toBe('blah');
});
});

50.
describe('Testing simpleDirective', function() {
var scope, elem, directive, compiled, html;
beforeEach(function (){
module('myApp');
html = ‘<simple-directive value="abc"></simple-directive>';
inject(function($compile, $rootScope) {
scope = $rootScope.$new();
elem = angular.element(html);
compiled = $compile(elem);
compiled(scope);
});
});
it('Should set the text of the element to whatever was passed.',
function() {
scope.abc = 'blah';
scope.$digest();
expect(elem.text()).toBe('blah');
});
});

51. e2e testing / protractor

52. <body>
<h1>Sample</h1>
<div>
Two Way Data Binding Sample
<br/><br/>
<input type="text" ng-model="name" />
<span ng-show="name"><h4>Hello {{name}}</h4></span>
</div>
</body>

53. describe(demo page', function() {
it('should greet the user', function() {
browser.get('[some route]');
});
});
<body>
<h1>Sample</h1>
<div>
Two Way Data Binding Sample
<br/><br/>
<input type="text" ng-model="name" />
<span ng-show="name"><h4>Hello {{name}}</h4></span>
</div>
</body>

54. describe(demo page', function() {
it('should greet the user', function() {
browser.get('[some route]');
element(by.model('name')).sendKeys('Nate Peterson');
});
});
<body>
<h1>Sample</h1>
<div>
Two Way Data Binding Sample
<br/><br/>
<input type="text" ng-model="name" />
<span ng-show="name"><h4>Hello {{name}}</h4></span>
</div>
</body>

55. describe(demo page', function() {
it('should greet the user', function() {
browser.get('[some route]');
element(by.model('name')).sendKeys('Nate Peterson');
var greeting = element(by.binding('name'));
});
});
<body>
<h1>Sample</h1>
<div>
Two Way Data Binding Sample
<br/><br/>
<input type="text" ng-model="name" />
<span ng-show="name"><h4>Hello {{name}}</h4></span>
</div>
</body>

56. describe(demo page', function() {
it('should greet the user', function() {
browser.get('[some route]');
element(by.model('name')).sendKeys('Nate Peterson');
var greeting = element(by.binding('name'));
expect(greeting.getText()).toEqual('Hello 'Nate
Peterson');
});
});
<body>
<h1>Sample</h1>
<div>
Two Way Data Binding Sample
<br/><br/>
<input type="text" ng-model="name" />
<span ng-show="name"><h4>Hello {{name}}</h4></span>
</div>
</body>

57. What’s worked well so far

58. Use of a Mock API for e2e tests

59. What’s been hard

60. Bloated controllers
that lead to
bloated specs

61. Complicated unit test setup

62. Hard to read tests

63. Questions?

64. AngularJS
testing
strategies
Nate Peterson
@njpetersonPa