Unit Testing Full Stack Part 2 – AngularJS Part 2 of 3

Reading Time: 5 minutes

This is part 2 of 3 unit testing full stack javascript. In this post we’ll talk about testing some more of Angular: Services, Directives and Filters.

In case you missed it, this unit testing series of posts are:

Part 2A – Installation, Routes, Controllers

Part 2B – Services, Directives, Filters

Part 2C – Coverage Reports, End to End (e2e)

So let’s get started with where we left off, testing services.

Services

Testing services is actually fairly straight forward. The thing to keep in mind is that you intercept all the requests that would normally go to a backend, and return the status code, etc. that you would expect.

describe('Unit: Services', function(){
	beforeEach(module('app'));

	describe('todoService', function(){
		var todoService;
		var $httpBackend;
		var baseUrl = "http://localhost:3000";


		beforeEach(inject(function($injector, _$httpBackend_){
			todoService = $injector.get('todoService');
			$httpBackend = _$httpBackend_;
		}));
		
		it('should have todoService as a service.', function(){
			expect(todoService).toBeDefined();
		});

		it('should get all todos', function(){
			$httpBackend.expectGET(baseUrl + '/todo')
			.respond(200, 'todo API');
		
			todoService.get();

			$httpBackend.flush();
		
		});

		it('should get one todo', function(){
			$httpBackend.expectGET(baseUrl + '/todo/1')
			.respond(200, 'todo API');

			todoService.get(1);

			$httpBackend.flush();
		});

		it('should update a todo item', function(){
			$httpBackend.expectPUT(baseUrl + '/todo')
			.respond(200, 'todo API');

			todoService.update({title: 'My Todo', description: 'Another Todo Update.'});

			$httpBackend.flush();
		});

		it('should delete a todo item', function(){
			$httpBackend.expectDELETE(baseUrl + '/todo/1')
			.respond(200, 'todo API');

			todoService.delete(1);

			$httpBackend.flush();
		});
	});
});

describe('Unit: Services', function(){

beforeEach(module('app'));

describe('todoService', function(){

var todoService;

var $httpBackend;

var baseUrl = "http://localhost:3000";

beforeEach(inject(function($injector, _$httpBackend_){

todoService = $injector.get('todoService');

$httpBackend = _$httpBackend_;

}));

it('should have todoService as a service.', function(){

expect(todoService).toBeDefined();

});

it('should get all todos', function(){

$httpBackend.expectGET(baseUrl + '/todo')

.respond(200, 'todo API');

todoService.get();

$httpBackend.flush();

});

it('should get one todo', function(){

$httpBackend.expectGET(baseUrl + '/todo/1')

.respond(200, 'todo API');

todoService.get(1);

$httpBackend.flush();

});

it('should update a todo item', function(){

$httpBackend.expectPUT(baseUrl + '/todo')

.respond(200, 'todo API');

todoService.update({title: 'My Todo', description: 'Another Todo Update.'});

$httpBackend.flush();

});

it('should delete a todo item', function(){

$httpBackend.expectDELETE(baseUrl + '/todo/1')

.respond(200, 'todo API');

todoService.delete(1);

$httpBackend.flush();

});

Let’s break down one of the unit tests:

it('should get all todos', function(){
	$httpBackend.expectGET(baseUrl + '/todo')
	.respond(200, 'todo API');
		
	todoService.get();

	$httpBackend.flush();
		
});

it('should get all todos', function(){

$httpBackend.expectGET(baseUrl + '/todo')

.respond(200, 'todo API');

todoService.get();

$httpBackend.flush();

});

As you can see the $httpBackend is where we describe the type of http call that the service will attempt to do, and we setup how to return back to the service. You can send data to the $httpBackend, having it expect a certain set of data, or have it return specific data to further test the directive. The link to the Angular Site for $httpBackend will help you read about the different ways to utilize it.

Once we call $httpBackend.flush() we flush all pending requests and respond with the pre-determined responses.

Moving further, you can obviously test any of the functions inside of a service quite easily. Services I would say are one of the easier components to test in Angular.

Directives

I thought that directives were actually one of the components in Angular that I had the hardest time trying to figure out how to properly test all the aspects of. It seems that most people never get into actually testing all of the pieces of them.

Let’s just get into it: isolate scopes are in the vast majority of directives, and most places that show you how to test directives, don’t really specify how to test those.

I’m here to hopefully clear that up. Lets look at en example directive and it’s corresponding code.:

(function(){
	'use strict';

	var directiveId = "todoItem";

	angular.module('app.directives').directive(directiveId, ['todoService', todoItem]);
		
	function todoItem(todoService){
		return {
			restrict: 'E',
			scope: {
				todo: '=',
				refreshFn: '&'
			},
			templateUrl: 'js/directives/todoItem/todoItem.html',
			link: function(scope, element, attr){
				scope.editing = false;

				scope.deleteItem = function(){
					todoService.delete(scope.todo._id).then(
						function(success){
							scope.refreshFn();
						},
						function(error){

						});
				}

				scope.updateItem = function(){
					todoService.update(scope.todo).then(
						function(success){
							scope.refreshFn();
						},
						function(error){

						});
				}

				scope.editItem = function(){
					scope.editing = true;
				}

				scope.cancelUpdate = function(){
					scope.editing = false;
				}

			}
		}
	}
		
}());

(function(){

'use strict';

var directiveId = "todoItem";

angular.module('app.directives').directive(directiveId, ['todoService', todoItem]);

function todoItem(todoService){

return {

restrict: 'E',

scope: {

todo: '=',

refreshFn: '&'

templateUrl: 'js/directives/todoItem/todoItem.html',

link: function(scope, element, attr){

scope.editing = false;

scope.deleteItem = function(){

todoService.delete(scope.todo._id).then(

function(success){

scope.refreshFn();

function(error){

});

}

scope.updateItem = function(){

todoService.update(scope.todo).then(

function(success){

scope.refreshFn();

function(error){

});

}

scope.editItem = function(){

scope.editing = true;

}

scope.cancelUpdate = function(){

scope.editing = false;

}

}());

When the user clicks edit, it sets $scope.editing flag to true, and gives them this view:

So with that in mind, let’s make a directive unit test that allows us to test those isolate scope functions, check the variables on it, and do a save to the API (intercepted with Mocks), and attempt to do things that give back errors and allow us to accommodate for that.

describe('Unit: Directives', function(){
	var elem,
		scope,
		$compile,
		$httpBackend,
		baseUrl = "http://localhost:3000";

	beforeEach(module('app'));
	beforeEach(module('app.directives'));

	/* Directive Templates */
	beforeEach(module('js/directives/todoItem/todoItem.html'));

	beforeEach(inject(function($rootScope, _$compile_, _$httpBackend_){
		scope = $rootScope.$new();
		$compile = _$compile_;
		$httpBackend = _$httpBackend_;
	}));

	describe('todoItem', function(){

		var directiveStr;

		beforeEach(function(){
			var todo = {
				title: "Todo Title",
				description: "Todo Description"
			}

			var refreshFn = function(){
				return "Todo Refresh Fn. Call";
			}

			scope.todo = todo;
			scope.refreshFn = refreshFn;
			scope.editing = false;

			directiveStr = "<todo-item todo='todo' refresh-fn='refreshFn()'></todo-item>";
		});
		
		it('should have a title and description', function(){
			elem = $compile(directiveStr)(scope);

			scope.$digest();

			var elemAsHtml = elem.html();

			expect(elemAsHtml).toContain(scope.todo.title);
			expect(elemAsHtml).toContain(scope.todo.description);
		});

		it('should execute the refreshFn scope function', function(){
			elem = $compile(directiveStr)(scope);

			scope.$digest();

			var elemAsHtml = elem.html();

			expect(elemAsHtml).toContain(scope.todo.title);
			expect(elemAsHtml).toContain(scope.todo.description);
		});

		it('should set the scope edit item to true', function(){
			elem = $compile(directiveStr)(scope);
			
			scope.$digest();
			
			var elemScope = elem.isolateScope();

			elemScope.editItem();		

			expect(elemScope.editing).toBeTruthy();
		});

		it('should set the scope edit item to false', function(){
			elem = $compile(directiveStr)(scope);

			scope.$digest();

			var elemScope = elem.isolateScope();

			elemScope.editItem();
			elemScope.cancelUpdate();

			expect(elemScope.editing).toBeFalsy();
		});

		it('should update the todo item', function(){
			$httpBackend.expectPUT(baseUrl + '/todo')
			.respond(200, 'todo API');

			scope.todo._id = 1;

			elem = $compile(directiveStr)(scope);

			scope.$digest();

			var elemScope = elem.isolateScope();

			elemScope.updateItem();

			$httpBackend.flush();
		});

		it('should throw an error when trying to update the todo item', function(){
			$httpBackend.expectPUT(baseUrl + '/todo')
			.respond(400, 'todo API');

			scope.todo._id = 0;

			elem = $compile(directiveStr)(scope);

			scope.$digest();

			var elemScope = elem.isolateScope();

			elemScope.updateItem();

			$httpBackend.flush();
		});

		it('should delete the todo item', function(){
			$httpBackend.expectDELETE(baseUrl + '/todo/1')
			.respond(200, 'todo API');

			scope.todo._id = 1;

			elem = $compile(directiveStr)(scope);

			scope.$digest();

			var elemScope = elem.isolateScope();

			elemScope.deleteItem();

			$httpBackend.flush();
		});

		it('should throw an error when trying to delete the todo item', function(){
			$httpBackend.expectDELETE(baseUrl + '/todo/0')
			.respond(400, 'todo API');

			scope.todo._id = 0;

			elem = $compile(directiveStr)(scope);

			scope.$digest();

			var elemScope = elem.isolateScope();

			elemScope.deleteItem();

			$httpBackend.flush();
		});

	});

	
});

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

138

139

140

141

142

143

144

145

146

147

148

149

150

151

152

153

154

155

156

157

158

159

describe('Unit: Directives', function(){

var elem,

scope,

$compile,

$httpBackend,

baseUrl = "http://localhost:3000";

beforeEach(module('app'));

beforeEach(module('app.directives'));

/* Directive Templates */

beforeEach(module('js/directives/todoItem/todoItem.html'));

beforeEach(inject(function($rootScope, _$compile_, _$httpBackend_){

scope = $rootScope.$new();

$compile = _$compile_;

$httpBackend = _$httpBackend_;

}));

describe('todoItem', function(){

var directiveStr;

beforeEach(function(){

var todo = {

title: "Todo Title",

description: "Todo Description"

}

var refreshFn = function(){

return "Todo Refresh Fn. Call";

}

scope.todo = todo;

scope.refreshFn = refreshFn;

scope.editing = false;

directiveStr = "<todo-item todo='todo' refresh-fn='refreshFn()'></todo-item>";

});

it('should have a title and description', function(){

elem = $compile(directiveStr)(scope);

scope.$digest();

var elemAsHtml = elem.html();

expect(elemAsHtml).toContain(scope.todo.title);

expect(elemAsHtml).toContain(scope.todo.description);

});

it('should execute the refreshFn scope function', function(){

elem = $compile(directiveStr)(scope);

scope.$digest();

var elemAsHtml = elem.html();

expect(elemAsHtml).toContain(scope.todo.title);

expect(elemAsHtml).toContain(scope.todo.description);

});

it('should set the scope edit item to true', function(){

elem = $compile(directiveStr)(scope);

scope.$digest();

var elemScope = elem.isolateScope();

elemScope.editItem();

expect(elemScope.editing).toBeTruthy();

});

it('should set the scope edit item to false', function(){

elem = $compile(directiveStr)(scope);

scope.$digest();

var elemScope = elem.isolateScope();

elemScope.editItem();

elemScope.cancelUpdate();

expect(elemScope.editing).toBeFalsy();

});

it('should update the todo item', function(){

$httpBackend.expectPUT(baseUrl + '/todo')

.respond(200, 'todo API');

scope.todo._id = 1;

elem = $compile(directiveStr)(scope);

scope.$digest();

var elemScope = elem.isolateScope();

elemScope.updateItem();

$httpBackend.flush();

});

it('should throw an error when trying to update the todo item', function(){

$httpBackend.expectPUT(baseUrl + '/todo')

.respond(400, 'todo API');

scope.todo._id = 0;

elem = $compile(directiveStr)(scope);

scope.$digest();

var elemScope = elem.isolateScope();

elemScope.updateItem();

$httpBackend.flush();

});

it('should delete the todo item', function(){

$httpBackend.expectDELETE(baseUrl + '/todo/1')

.respond(200, 'todo API');

scope.todo._id = 1;

elem = $compile(directiveStr)(scope);

scope.$digest();

var elemScope = elem.isolateScope();

elemScope.deleteItem();

$httpBackend.flush();

});

it('should throw an error when trying to delete the todo item', function(){

$httpBackend.expectDELETE(baseUrl + '/todo/0')

.respond(400, 'todo API');

scope.todo._id = 0;

elem = $compile(directiveStr)(scope);

scope.$digest();

var elemScope = elem.isolateScope();

elemScope.deleteItem();

$httpBackend.flush();

});

That’s quite a long set of unit tests, well, 8 of them to be exact.

Do you remember when we setup the testing in Karma, we added the html2js pre-processor? That’s what allows us to load the html template file in the unit test with this piece of code:

	beforeEach(module('js/directives/todoItem/todoItem.html'));

1	beforeEach(module('js/directives/todoItem/todoItem.html'));

To test any bits and pieces of the isolate scope, you need to do this:

it('should set the scope edit item to true', function(){
			elem = $compile(directiveStr)(scope);
			
			scope.$digest();
			
			var elemScope = elem.isolateScope();

			elemScope.editItem();		

			expect(elemScope.editing).toBeTruthy();
		});

it('should set the scope edit item to true', function(){

elem = $compile(directiveStr)(scope);

scope.$digest();

var elemScope = elem.isolateScope();

elemScope.editItem();

expect(elemScope.editing).toBeTruthy();

});

We need to call elem.isolateScope() on the compiled element, digest the scope, so that we get updated and bound scope items. Now with the elemScope variable that’s returned from calling elem.isolateScope() we can access any of the isolate scope items, functions, etc. as you can see here with the call to elemScope.editItem() .

Everything else is pretty typical standard stuff relating to testing of services with $httpBackend and doing a flush() to validate that the api call is being made and to test different return scenarios (http status codes).

Filters

Testing filters is really quite simple. You would basically invoke them as you would in a controller, testing the return results. Here’s an example:

describe('Unit: Filters', function(){
	var filter;

	beforeEach(module('app'));
	beforeEach(inject(function($filter){
		filter = $filter;
	}));

	it('should filter a number and give it two decimals', function(){
		var num = filter('number')(100, 2);

		expect(num).toEqual("100.00");
	});
});

describe('Unit: Filters', function(){

var filter;

beforeEach(module('app'));

beforeEach(inject(function($filter){

filter = $filter;

}));

it('should filter a number and give it two decimals', function(){

var num = filter('number')(100, 2);

expect(num).toEqual("100.00");

});

So that takes care of our 2nd part for testing Angular JS. Please let me know if you have further questions, so that I can enhance the post for others to learn from.

Our final post on Angular testing we’ll discuss coverage reports and End-to-End testing with Protractor.

Services

Directives

Filters

Leave a Reply Cancel reply