Unit testing in AngularJS: Initializing the controller scope of a directive

Question

Unit testing in AngularJS: Initializing the controller scope of a directive

Here is the code for a directive with a separate controller using the "controller as" syntax:

'use strict';

angular.module('directives.featuredTable', [])

.controller('FeaturedTableCtrl',
['$scope',
function ($scope){
  var controller = this;

  controller.activePage = 1;
  controller.changePaginationCallback =
    controller.changePaginationCallback || function(){};
  controller.density = 10;
  controller.itemsArray = controller.itemsArray || [];
  controller.metadataArray = controller.metadataArray || [];
  controller.numberOfItems = controller.numberOfItems || 0;
  controller.numberOfPages = 1;
  controller.options = controller.options || {
    'pagination': false
  };

  controller.changePaginationDensity = function(){
    controller.activePage = 1;
    controller.numberOfPages =
      computeNumberOfPages(controller.numberOfItems, controller.density);

    controller.changePaginationCallback({
      'page': controller.activePage,
      'perPage': controller.density
    });
  };

  controller.getProperty = function(object, propertyName) {
    var parts = propertyName.split('.');

    for (var i = 0 ; i < parts.length; i++){
      object = object[parts[i]];
    }

    return object;
  };

  controller.setActivePage = function(newActivePage){
    if(newActivePage !== controller.activePage &&
      newActivePage >= 1 && newActivePage <= controller.numberOfPages){

      controller.activePage = newActivePage;
      controller.changePaginationCallback({
        'page': controller.activePage,
        'perPage': controller.density
      });
    }
  };

  initialize();

  $scope.$watch(function () {
    return controller.numberOfItems;
  }, function () {
    controller.numberOfPages =
      computeNumberOfPages(controller.numberOfItems, controller.density);
  });

  function computeNumberOfPages(numberOfItems, density){
    var ceilPage = Math.ceil(numberOfItems / density);
    return ceilPage !== 0 ? ceilPage : 1;
  }

  function initialize(){
    if(controller.options.pagination){
      console.log('paginate');
      controller.changePaginationCallback({
        'page': controller.activePage,
        'perPage': controller.density
      });
    }
  }
}]
)

.directive('featuredTable', [function() {
return {
  'restrict': 'E',
  'scope': {
    'metadataArray': '=',
    'itemsArray': '=',
    'options': '=',
    'numberOfItems': '=',
    'changePaginationCallback': '&'
  },
  'controller': 'FeaturedTableCtrl',
  'bindToController': true,
  'controllerAs': 'featuredTable',
  'templateUrl': 'directives/featuredTable/featuredTable.tpl.html'
};
}]);

The controller initializes its properties at the start based on the attributes passed by the directive or defaults:

controller.activePage = 1;
controller.changePaginationCallback =
    controller.changePaginationCallback || function(){};
controller.density = 10;
controller.itemsArray = controller.itemsArray || [];
controller.metadataArray = controller.metadataArray || [];
controller.numberOfItems = controller.numberOfItems || 0;
controller.numberOfPages = 1;
controller.options = controller.options || {
  'pagination': false
};

At the end of the controller, the initialize(); function is executed to handle callbacks according to the options:

function initialize(){
  if(controller.options.pagination){
    controller.changePaginationCallback({
      'page': controller.activePage,
      'perPage': controller.density
    });
  }
}

For unit testing the controller (using karma and jasmine), an attempt was made to simulate the directive's parameters:

'use strict';

describe('Controller: featured table', function () {

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

  var scope;
  var featuredTable;
  var createCtrlFn;
  beforeEach(inject(function ($controller, $rootScope) {
    scope = $rootScope.$new();

    createCtrlFn = function(){
      featuredTable = $controller('FeaturedTableCtrl', {
        '$scope': scope
      });
      scope.$digest();
    };
  }));

  it('should initialize controller', function () {
    createCtrlFn();

    expect(featuredTable.activePage).toEqual(1);
    expect(featuredTable.changePaginationCallback)
      .toEqual(jasmine.any(Function));
    expect(featuredTable.density).toEqual(10);
    expect(featuredTable.itemsArray).toEqual([]);
    expect(featuredTable.metadataArray).toEqual([]);
    expect(featuredTable.numberOfPages).toEqual(1);
    expect(featuredTable.numberOfItems).toEqual(0);
    expect(featuredTable.options).toEqual({
      'pagination': false
    });
  });

  it('should initialize controller with pagination', function () {
    scope.changePaginationCallback = function(){};
    spyOn(scope, 'changePaginationCallback').and.callThrough();

    scope.options = {
      'pagination': true
    };

    createCtrlFn();

    expect(featuredTable.activePage).toEqual(1);
    expect(featuredTable.changePaginationCallback)
      .toEqual(jasmine.any(Function));
    expect(featuredTable.density).toEqual(10);
    expect(featuredTable.itemsArray).toEqual([]);
    expect(featuredTable.metadataArray).toEqual([]);
    expect(featuredTable.numberOfPages).toEqual(1);
    expect(featuredTable.numberOfItems).toEqual(0);
    expect(featuredTable.options).toEqual({
      'pagination': true
    });

    expect(featuredTable.changePaginationCallback).toHaveBeenCalledWith({
      'page': 1,
      'perPage': 10
   });
  });
});

An error occurred during testing indicating that the scope was not properly initialized:
Expected Object({ pagination: false }) to equal Object({ pagination: true })
at test/spec/app/rightPanel/readView/historyTab/historyTab.controller.spec.js:56

javascript angularjs unit-testing

Answer 1

Answer №1

Replicating the functionality of the bindings in a directive can be quite challenging - it's difficult to precisely understand how compiling and linking a directive interacts with the data it receives...unless you decide to take matters into your own hands!

The angular.js documentation provides a helpful walkthrough on how to compile and link a directive for unit testing - https://docs.angularjs.org/guide/unit-testing#testing-directives. Once you follow those steps, all you need to do is extract the controller from the resulting element(consult the documentation for the controller() method here - https://docs.angularjs.org/api/ng/function/angular.element) and conduct your tests. In this scenario, using ControllerAs is unnecessary - the focus is on directly testing the controller instead of manipulating the scope.

Take a look at this sample module:

var app = angular.module('plunker', []);

app.controller('FooCtrl', function($scope) {
  var ctrl = this;

  ctrl.concatFoo = function () {
    return ctrl.foo + ' world'
  }
})
app.directive('foo', function () {
  return {
    scope: {
      foo: '@'
    },
    controller: 'FooCtrl',
    controllerAs: 'blah',
    bindToController: true,
  }
})

And here's the setup for testing:

describe('Testing a Hello World controller', function() {
  ctrl = null;

  //remember to specify your module in the test
  beforeEach(module('plunker'));

  beforeEach(inject(function($rootScope, $compile) {
    var $scope = $rootScope.$new();
    var template = '<div foo="hello"></div>'
    var element = $compile(template)($scope)

    ctrl = element.controller('foo')

  }));

  it('should generate hello world', function() {
    expect(ctrl.concatFoo()).toEqual('hello world')
  });
});

(Interactive demo: http://plnkr.co/edit/xoGv9q2vkmilHKAKCwFJ?p=preview)

Answer 2

Replicating the functionality of the bindings in a directive can be quite challenging - it's difficult to precisely understand how compiling and linking a directive interacts with the data it receives...unless you decide to take matters into your own hands!

The angular.js documentation provides a helpful walkthrough on how to compile and link a directive for unit testing - https://docs.angularjs.org/guide/unit-testing#testing-directives. Once you follow those steps, all you need to do is extract the controller from the resulting element(consult the documentation for the controller() method here - https://docs.angularjs.org/api/ng/function/angular.element) and conduct your tests. In this scenario, using ControllerAs is unnecessary - the focus is on directly testing the controller instead of manipulating the scope.

Take a look at this sample module:

var app = angular.module('plunker', []);

app.controller('FooCtrl', function($scope) {
  var ctrl = this;

  ctrl.concatFoo = function () {
    return ctrl.foo + ' world'
  }
})
app.directive('foo', function () {
  return {
    scope: {
      foo: '@'
    },
    controller: 'FooCtrl',
    controllerAs: 'blah',
    bindToController: true,
  }
})

And here's the setup for testing:

describe('Testing a Hello World controller', function() {
  ctrl = null;

  //remember to specify your module in the test
  beforeEach(module('plunker'));

  beforeEach(inject(function($rootScope, $compile) {
    var $scope = $rootScope.$new();
    var template = '<div foo="hello"></div>'
    var element = $compile(template)($scope)

    ctrl = element.controller('foo')

  }));

  it('should generate hello world', function() {
    expect(ctrl.concatFoo()).toEqual('hello world')
  });
});

(Interactive demo: http://plnkr.co/edit/xoGv9q2vkmilHKAKCwFJ?p=preview)

Unit testing in AngularJS: Initializing the controller scope of a directive

Answer №1

Similar questions

"Using Mongoose to push objects into an array in a Node.js environment

What is the method to retrieve response text?

The Facebook Comments feature on my React/Node.js app is only visible after the page is refreshed

Error in Typescript: The property 'children' is not included in the type but is necessary in the 'CommonProps' type definition

Using Javascript to Showcase a Video's Number of Views with Brightcove

Incorporate a unique identifier $id within the ajax request

Spacing issues while utilizing the <textarea> element

Automatic capitalization feature for input fields implemented with AngularJS

++first it must decrease before it increases

Arrange the grid in a pleasing manner

Assigning ng-model within a nested ng-repeat to use as parameters in an ajax request

Building Silent Authentication in React Native with the help of Auth0: A Step-by-Step Guide

JavaScript/CSS memory matching game

Utilizing Django models to populate Google Charts with data

What steps should I take to resolve the issue with the error message: "BREAKING CHANGE: webpack < 5 previously included polyfills for node.js core modules by default"?

Is it a mistake to gather errors together and send them to the promise resolve in JavaScript?

Spinning Loader in ui-select AngularJS

Display the list in a grid format with 4 columns and x number of rows by utilizing Angular and Bootstrap

Creating an array of objects sorted in alphabetical order

I am interested in retrieving a variable from a function