AngularJS From Beginning: Unit Test Of AngularJS Components

I am here to continue the discussion around AngularJS. Today, we will discuss how to perform unit tests of angular js components other than controller using Jasmine. Also in case you have not had a look at our previous articles of this series, go through the following links:

In this article, we will discuss how to perform unit tests using $http or other angularjs service including angularjs directives. First we will discuss about the http responses.

Mocking HTTP Responses

The $httpBackend service provides a low-level API that is used by the $http service to make Ajax requests (and by the $resource service, which in turn relies on $http). The mock $httpBackend service included in the ngMocks module makes it easy to consistently simulate responses from a server, which allows a unit of code to be isolated from the vagaries of real servers and networks. The mock $httpBackend service provides an API that matches requests made through the $http service to canned results and to control when those canned results are sent. The methods defined by the mock $httpBackend service are as below.

Name	Descriptions
expect(method, url, data, headers)	Defines an expectation for a request that matches the method and URL(with optional data and header matches)
flush() flush(count)	Sends back pending results (or the specified number of responses ifthe optional argument is used)
resetExpectations()	Resets the set of expectations
verifyNoOutstandingExpectation()	Checks that all of the expected requests have been received
respond(data) response(status, data, headers)	Defines a response for an expected request

The process for using the mock $httpBackend service is relatively simple and has the following steps:

Define the requests that you expect to get and the responses for them

The expect method is used to define a request that you expect the component being tested to make. The required arguments are the HTTP method and the URL that will be requested, but you can also provide data and headers that will be used to narrow the request that will be matched. The result from the expect method is an object on which the respond method can be called. I have used the basic form of this method, which takes a single argument for the data that will be returned to simulate a response from the server. I used some of the product data from earlier articles. Notice that I don’t have to encode the data as JSON. This is done for me automatically.
Send the responses

To reflect the asynchronous nature of Ajax requests, the mock $httpBackend service won’t send its canned responses until the flush method is called. This allows you to test the effect of long delays or timeouts, but for this test I want the response sent as soon as possible, so I call the flush method immediately after the controller factory function is executed. Calling the flush method resolves the promise returned by the $http service and executes the success function defined by the controller. Notice that I have to use the inject method to obtain the $http service so that I can pass it to the factory function through the $controller service.
Check that all of the expected requests were made

The $httpBackend service expects to receive one HTTP request for each use of the expect method, which makes it easy to check that the code being tested has made all of the requests you expect. My code makes only one request, but I still checked to see that all of my expectations have been met by calling the verifyNoOutstandingExpectation method within a Jasmine it functions. The verifyNoOutstandingExpectation method will throw an exception if not all of the expected requests have been received; for this reason, you don’t need to use the Jasmine expect method.
Evaluate the results

The final step is to evaluate the results of the test. Since I am testing a controller, I perform my tests on the scope object I created

app.js

var testApp = angular.module('TestApp', []);

controller.js

testApp.controller('httpController', function ($scope, $http) {
$http.get("productData.json").success(function (data) {
$scope.products = data;
});
$scope.counter = 0;
$scope.hitCounter = function () {
$scope.counter++;
}
});

Index.html

<!doctype html>
<html>
<head>
<title>Jasmine Spec Runner</title>
<link href="../test_resource/jasmine.css" rel="stylesheet" />
</head>
<body>
<script src="../test_resource/jasmine.js"></script>
<script src="../test_resource/jasmine-html.js"></script>
<script src="../test_resource/boot.js"></script>
<script src="../../../RefScript/angular.min.js"></script>
<script src="../test_resource/angular-mocks.js"></script>
<script src="../CodeJs/testApp.js"></script>
<script src="../CodeJs/httpController.js"></script>
<script src="spec/test.js"></script>
</body>
</html>

test.js

(function () {
'use strict';
describe('Controller Test', function () {
debugger;
var mockScope = {};
var controller, backend;
beforeEach(angular.mock.module("TestApp"));
beforeEach(angular.mock.inject(function ($httpBackend) {
backend = $httpBackend;
backend.expect("GET", "productData.json").respond(
[
{ "name": "Apples", "category": "Fruit", "price": 1.20 },
{ "name": "Bananas", "category": "Fruit", "price": 2.42 },
{ "name": "Pears", "category": "Fruit", "price": 2.02 }
]);
}));
beforeEach(angular.mock.inject(function ($controller, $rootScope, $http) {
mockScope = $rootScope.$new();
$controller("httpController", {
$scope: mockScope,
$http: $http
});
backend.flush();
}));
it("Creates variable", function () {
expect(mockScope.counter).toEqual(0);
});
it("Increments counter", function () {
mockScope.hitCounter();
expect(mockScope.counter).toEqual(1);
});
it("Makes an Ajax request", function () {
backend.verifyNoOutstandingExpectation();
});
it("Processes the data", function () {
expect(mockScope.products).toBeDefined();
expect(mockScope.products.length).toEqual(3);
});
it("Preserves the data order", function () {
expect(mockScope.products[0].name).toEqual("Apples");
expect(mockScope.products[1].name).toEqual("Bananas");
expect(mockScope.products[2].name).toEqual("Pears");
});
});
})();

Test a Custom Filter

For perform a unit test for a custom filter, we can obtain instances of a filter through $filter service, which we already discussed in the series earlier. In case of custom filter, we need to use inject method to obtain an instance of the $filter service and use it to obtain an instance of the filter, which we need to assign within a new variable. We need to obtain the filter object within a beforeEach function, which means that we always get a fresh instance of each test.

Testing a Directive

Testing a directive is a little more complicated because of the way that directives are applied to, and can modify, HTML. This means unit tests for directives rely on jqLite and the $compile service, use the inject method to obtain the $rootScope and $compile services. We need to create a new scope and assign the data that the directive will use to the data property. We also can keep a reference to the $compile service so that we can use it in the test. We need to compile a fragment of HTML to which the directive has been applied, specifying that the source of the data is the scope data array. This produces a function that we need to invoked with the mock scope to get the HTML output from the directive. To assess the results, we can use jqLite to check the structure and the order of the elements that the directive has produced.

Testing a Service

Obtaining an instance of a service to test is easy because the inject method can be used, just as I have been doing to get the built-in and mocked services in earlier tests. We used the factory method described in earlier article, to define a service that maintains a counter and that defines methods that increment and return the counter value. This isn’t a useful service in its own right, but it lets me demonstrate the process for testing a service.

Angular components js file

testApp.controller('httpController', function ($scope, $http) {
$http.get("productData.json").success(function (data) {
$scope.products = data;
});
$scope.counter = 0;
$scope.hitCounter = function () {
$scope.counter++;
}
});
testApp.filter("labelCase", function () {
return function (value, reverse) {
if (angular.isString(value)) {
var intermediate = reverse ? value.toUpperCase() : value.toLowerCase();
return (reverse ? intermediate[0].toLowerCase() :
intermediate[0].toUpperCase()) + intermediate.substr(1);
} else {
return value;
}
};
});
testApp.directive("unorderedList", function () {
return function (scope, element, attrs) {
var data = scope[attrs["unorderedList"]];
if (angular.isArray(data)) {
var listElem = angular.element("<ul>");
element.append(listElem);
for (var i = 0; i < data.length; i++) {
listElem.append(angular.element('<li>').text(data[i].name));
}
}
}
});
testApp.factory("counterService", function () {
var counter = 0;
return {
incrementCounter: function () {
counter++;
},
getCounter: function () {
return counter;
}
}
});

Index.html

<!doctype html>
<html>
<head>
<title>Jasmine Spec Runner</title>
<link href="../test_resource/jasmine.css" rel="stylesheet" />
</head>
<body>
<script src="../test_resource/jasmine.js"></script>
<script src="../test_resource/jasmine-html.js"></script>
<script src="../test_resource/boot.js"></script>
<script src="../../../RefScript/angular.min.js"></script>
<script src="../test_resource/angular-mocks.js"></script>
<script src="../CodeJs/testApp.js"></script>
<script src="../CodeJs/httpController.js"></script>
<script src="spec/test.js"></script>
<script src="spec/test_directive.js"></script>
<script src="spec/test_service.js"></script>
</body>
</html>

test.js (for filter test)

(function () {
'use strict';
describe('Filter Test', function () {
var filterInstance;
beforeEach(angular.mock.module("TestApp"));
beforeEach(angular.mock.inject(function ($filter) {
filterInstance = $filter("labelCase");
}));
it("Changes case", function () {
var result = filterInstance("test phrase");
expect(result).toEqual("Test phrase");
});
it("Reverse case", function () {
var result = filterInstance("test phrase", true);
expect(result).toEqual("tEST PHRASE");
});
});
})();

Test_directive.js (for directive test)'

describe("Directive Tests", function () {
var mockScope;
var compileService;
beforeEach(angular.mock.module("TestApp"));
beforeEach(angular.mock.inject(function ($rootScope, $compile) {
mockScope = $rootScope.$new();
compileService = $compile;
mockScope.data = [
{ name: "Apples", category: "Fruit", price: 1.20, expiry: 10 },
{ name: "Bananas", category: "Fruit", price: 2.42, expiry: 7 },
{ name: "Pears", category: "Fruit", price: 2.02, expiry: 6 }
];
}));
it("Generates list elements", function () {
var compileFn = compileService("<div unordered-list='data'></div>");
var elem = compileFn(mockScope);
expect(elem.children("ul").length).toEqual(1);
expect(elem.find("li").length).toEqual(3);
expect(elem.find("li").eq(0).text()).toEqual("Apples");
expect(elem.find("li").eq(1).text()).toEqual("Bananas");
expect(elem.find("li").eq(2).text()).toEqual("Pears");
});
});

test_service.js (for service test)

(function () {
'use strict';
describe("Service Tests", function () {
beforeEach(angular.mock.module("TestApp"));
it("Increments the counter", function () {
angular.mock.inject(function (counterService) {
expect(counterService.getCounter()).toEqual(0);
counterService.incrementCounter();
expect(counterService.getCounter()).toEqual(1);
});
});
});
})();