Angular Function not Recognised in Unit Testing - angularjs

Question

I'm using angular-datatables in our project.
I got this error while testing:
TypeError: DTOptionsBuilder.newOptions(...).withBootstrap is not a function in /var/www/symfony/xxxx/src/XXXX/AdminBundle/Resources/public/js/controllers/category/category-grid.controller.js (line 20)
Which the code is recognised as function in dev code, and here is the testing code:
(function() {
"use strict";
describe('Category Grid Controller Unit Test', function() {
var $controller, $rootScope;
beforeEach(module('category-grid.controller'));
beforeEach(inject(function(_$controller_, _$rootScope_) {
$controller = _$controller_;
$rootScope = _$rootScope_;
}));
it('should define category grid controller', function() {
var $scope = $rootScope;
var CategoryGridController = $controller('CategoryGridController', {$scope: $scope});
expect(CategoryGridController).toBeDefined();
});
});
})();
And here is the controller code:
function CategoryGridController($stateParams, $scope, Category, DTOptionsBuilder, DTColumnDefBuilder, Utils, $window, notify) {
$scope.categories = [];
$scope.dtOptions = DTOptionsBuilder.newOptions().withBootstrap();
$scope.dtColumnDefs = [
DTColumnDefBuilder.newColumnDef(5).notSortable()
];
if (angular.isDefined($stateParams.id)) {
Category.get({id: $stateParams.id}, function(data) {
var categories = data.children;
var translation;
for (var i = 0; i < categories.length; i++) {
translation = Utils.getTranslation(categories[i].translations);
categories[i].name = translation.name;
}
translation = Utils.getTranslation(data.translations);
$scope.categoryName = translation.name;
$scope.categories = categories;
});
}
else {
Category.query({ _level: 1 }, function(data) {
for (var i = 0; i < data.length; i++) {
var translation = Utils.getTranslation(data[i].translations);
data[i].name = translation.name;
}
$scope.categories = data;
});
}
$scope.toggleEnabled = function(id, index) {
console.log(!$scope.categories[index].enabled);
if ($window.confirm($scope.translations.ARE_YOU_SURE)) {
Category.patch({id: id}, {category: {enabled: !$scope.categories[index].enabled}},
function(data) {
$scope.categories[index].enabled = data.enabled;
notify({
messageTemplate: '<span><i class="fa fa-check"></i> ' + $scope.translations.DATA_SAVE_SUCCESS + '</span>'
});
},
function(e) {
notify({
messageTemplate: '<span><i class="fa fa-warning"></i> ' + $scope.translations.DATA_SAVE_ERROR + '</span>',
classes: 'alert-danger'
});
}
);
}
};
}
The controllers code work in development. If I remove the line with DTOptionsBuilder.newOptions(...).withBootstrap, the testing code works. But I need that code in development.

Answer 1

Since you are performing unit testing of controller, all dependencies on the controller need to mocked and injected, including your DTOptionsBuilder.
This dependency can be mocked by either creating you own custom objects and injecting them in the test or using jasmine spy.Read documentation around how to create spy in Jasmine.
For example in your test you can create
var DTOptionsBuilder={
newOptions:function() {
return {
withBootstrap :function() {}
};
}}
and inject this object when you instantiate the controller
var CategoryGridController = $controller('CategoryGridController', {$scope: $scope,'DTOptionsBuilder':DTOptionsBuilder});
The bottom line is if you controller is dependent upon any other service, either a real or mock implementation of that service has to be inject for controller to work, allowing you to unit test it.