Mastering Web Application

Chapter 8

Writing tests for the pagination directive

The tests for this widget need to cover all the changes that can occur both on the
$scope function and from the user clicking on the links. Here is a selection of the
more significant tests:

describe('pagination directive', function () {

var $scope, element, lis;

beforeEach(module('directives'));

beforeEach(inject(function($compile, $rootScope) {

$scope = $rootScope;

$scope.numPages = 5;

$scope.currentPage = 3;

element = $compile('<pagination num-pages="numPages" current-

page="currentPage"></pagination>')($scope);

$scope.$digest();

lis = function() { return element.find('li'); };

}));

it('has the number of the page as text in each page item',

function() {

for(var i=1; i<=$scope.numPages;i++) {

expect(lis().eq(i).text()).toEqual(''+i);

}

});

it('sets the current-page to be active', function() {

var currentPageItem = lis().eq($scope.currentPage);

expect(currentPageItem.hasClass('active')).toBe(true);

});

...

it('disables "next" if current-page is num-pages', function() {

$scope.currentPage = 5;

$scope.$digest();

var nextPageItem = lis().eq(-1);

expect(nextPageItem.hasClass('disabled')).toBe(true);

});

it('changes currentPage if a page link is clicked', function() {

var page2 = lis().eq(2).find('a').eq(0);

page2.click();

$scope.$digest();