This document discusses AngularJS unit testing. It covers why unit testing is important, setting up a basic testing environment with tools like Karma and Jasmine, writing different types of tests for controllers, components, directives, services and filters, mocking and stubbing, best practices, and resources for further reading on AngularJS testing.

1. ANGULARJS UNIT TESTING
Hor Norin
7 November 2016

2. Objective & Goals
• Why unit test?
• Basic Setup
• Jasmine
• AngularJS Testing
• Mocking & Stubbing
• Best Practices

3. WHY UNIT TESTING?

4. Why Unit Testing?
• Reduce bug
• Improve code quality
• Good documentation
• Defend against other programmers
• Make you feel confident

5. BASIC SETUP

6. Tools You Need
• Node.js
• Karma
• Jasmine
• Angular Mock
• Browser

7. Package.json
{
"name": "jasmine",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "karma start"
},
"keywords": [],
"author": "",
"license": "ISC",
"dependencies": {
"angular": "^1.5.8"
},
"devDependencies": {
"angular-mocks": "^1.5.8",
"jasmine-core": "^2.5.2",
"karma": "^1.3.0",
"karma-jasmine": "^1.0.2",
"karma-phantomjs-launcher": "^1.0.2"
}
}

8. Setup Karma
• npm install karma-cli –g
• karma init
• karma start

9. Configuration Options
• frameworks
• files
• exclude
• browsers
• basePath
• preprocessors
• singleRun
• autoWatch

10. JASMINE

11. Functions
• Suite: describe
• Spec: it
• Setup: beforeEach
• Teardown: afterEach
• Expectation: expect

12. Matchers
expect(array).toContain(member);
expect(fn).toThrow(string);
expect(fn).toThrowError(string);
expect(instance).toBe(instance);
expect(mixed).toBeDefined();
expect(mixed).toBeFalsy();
expect(mixed).toBeNull();
expect(mixed).toBeTruthy();
expect(mixed).toBeUndefined();
expect(mixed).toEqual(mixed);
expect(mixed).toMatch(pattern);
expect(number).toBeCloseTo(number, decimalPlaces);
expect(number).toBeGreaterThan(number);
expect(number).toBeLessThan(number);
expect(number).toBeNaN();
expect(spy).toHaveBeenCalled();
expect(spy).toHaveBeenCalledTimes(number);
expect(spy).toHaveBeenCalledWith(...arguments);

13. Custom Matcher
• Use addMatchers
• Factory object with factory function
• Return object with compare function
• Result of compare must contains pass and message property

14. Custom Matcher
Example:

15. ANGULARJS TESTING

16. Loading Module
describe('App', function() {
beforeEach(module(’App'));
it('1 + 1 should equal 2', function() {
// some expectations
});
});

17. Controller
describe('SomeController', function() {
var $scope, $controller;
beforeEach(function() {
module('App');
inject(function($rootScope, _$controller_) {
$scope = $rootScope.$new();
$controller = _$controller_;
});
});
it('expect someModel to equal someValue', function() {
var ctrl = $controller('SomeController', { $scope: $scope });
// $scope style
expect($scope.someModel).toEqual(someValue);
// controllerAs style
expect(ctrl.someModel).toEqual(someValue);
});
});

18. Component
describe('SomeComponent', function() {
var $componentController, $scope;
beforeEach(function() {
module('App');
inject(function($rootScope, _$componentController_) {
$scope = $rootScope.$new();
$componentController = _$componentController_;
});
});
it('expect someModel to equal someValue', function() {
var component = $componentController('SomeComponent', null);
expect(component.someModel).toEqual(someValue);
});
});

19. Directive
describe('Greeting', function() {
var $scope, $compile;
beforeEach(function() {
module('App');
inject(function($rootScope, _$compile_) {
$scope = $rootScope.$new();
$compile = _$compile_;
});
});
it('should contain greeting text', function() {
var el = $compile('<greeting name="Norin"></greeting>')($scope);
// fire all watchers so that expression
// like {{ 1 + 1 }} will be evaluate
$scope.$digest();
expect(el.html()).toContain('Hello Norin');
});
});

20. Service
describe('Calculator', function() {
var $scope, calculator;
beforeEach(function() {
module('App');
inject(function($rootScope, _calculator_) {
$scope = $rootScope.$new();
calculator = _calculator_;
});
});
it('should return sum of two value', function() {
expect(calculator.sum(10, 20)).toEqual(30);
});
});

21. Filter
describe('Reverse', function() {
var $scope, $filter;
beforeEach(function() {
module('App');
inject(function($rootScope, _$filter_) {
$scope = $rootScope.$new();
$filter = _$filter_;
});
});
it('should make text reverse', function() {
var reverseText = $filter('reverse')('Hello');
expect(reverseText).toEqual('olleH');
});
});

22. MOCKING & STUBBING

23. Stub Object Method
spyOn(someObj, 'someMethod').and.returnValue(3);
expect(someObj.someMethod()).toEqual(3);
spyOn(someObj, 'someMethod').and.callFake(function() {
return 10;
});
expect(someObj.someMethod()).toEqual(10);

24. Message Expectation
var norin = {
info: function() {
return 'Name: Norin, Gender: Male';
}
};
function greeting(person) {
console.log(person.info());
}
spyOn(norin, 'info');
greeting(norin);
expect(norin.info).toHaveBeenCalled();
expect(norin.info.calls.count()).toBe(1);

25. Mock API Request
$httpBackend.when('GET', 'http://example.com/search?q=product1').respond(200, [1,2]);
var products = null;
expect(products).toBeNull();
productService.search('product1')
.then(function(res) {
products = res.data;
})
.catch(function(error) {
products = [];
});
$httpBackend.flush();
expect(products).not.toBeNull();
expect(products.length).toBe(2);

26. BEST PRACTICES

27. Things to Be Done
• Test case should be done in isolation
• Make use of custom matcher
• Reactor out code if need

28. Things to Avoid
• Directly use global variable & function
• Nest describe block too deep
• DRY too much makes it less readable

29. RESOURCES & REFERENCES

30. Resources & References
• https://jasmine.github.io/2.0/introduction
• https://docs.angularjs.org/api/ngMock

31. Further Reading
• https://docs.angularjs.org/guide/e2e-testing
• https://github.com/angular/protractor