Can't get a directive using a controller test to pass Jasmine : Error: [$injector:unpr] Unknown provider: utilsProvider <- utils

Question

I've been searching a long time for an answer to the question I'm about to ask without success.

Let's say I have the following directive :

(function () {
'use strict';

angular
    .module('com.acme.mymod')
    .directive('myDirective', myDirective);

function myDirective() {
    var directive = {
        restrict: 'EA',
        scope: {},
        replace: true,
        templateUrl: 'folder/myDirective/myDirective.tpl.html',
        controller: "myDirectiveController",
        controllerAs: 'vm',
        bindToController: {
            somedata: "@?",
            endpoint: "@?"
        },
        link: link
    };
    return directive;

    function link(scope, element) {

        activate();

        function activate() {
            scope.$on('$destroy', destroy);
            element.on('$destroy', destroy);
        }
    }

    function destroy() {
    }
}
})();

myDirectiveController is as follow:

(function () {
'use strict';

angular
    .module('com.acme.mymod')
    .controller('myDirectiveController', myDirectiveController);

myDirectiveController.$inject = ['utils', '$log'];
// utils is an external library factory in another module

function myDirectiveController(utils, $log) {
    var vm = this;
    vm.menuIsOpen = false;

    function activate() {
        vm.dataPromise = utils.getValuePromise(null, vm.somedata, vm.endpoint);
        vm.dataPromise.then(function (result) {
            vm.data = result.data;
        }, function () {
            $log.debug("data is not Valid");
        });
    }
    activate();
}
})();

The spec file is as follow:

describe('myDirective Spec', function () {

'use strict';

angular.module('com.acme.mymod', []);


var compile, scope, directiveElem, utils;

beforeEach(function(){
    module('com.acme.mymod');

    inject(function($compile, $rootScope, $injector,utils){
        compile = $compile;
        scope = $rootScope.$new();
        scope.$digest();
        directiveElem = getCompiledElement();
        //utils=utils;
        console.log(utils.test());

    });


});

function getCompiledElement(){
    var element = angular.element('<div  my-directive=""  data-some-data=\' lorem\'></div>');
    var compiledElement = compile(element)(scope);
    scope.$digest();
    return compiledElement;
}

it('should have a nav element of class', function () {

    var navElement = directiveElem.find('nav');
    expect(navElement.attr('class')).toBeDefined();



});
it('should have a valid json data-model' ,function () {
   var data=directiveElem.attr('data-somedata');
   var validJSON=false;
   try{
       validJSON=JSON.parse(dataNav);
   }
   catch(e){

   }

   expect(validJSON).toBeTruthy();
});

});

What I can't quite figure out is that every test I try to run, the directive is not compiled or created correctly I'm not sure.

I get :

Error: [$injector:unpr] Unknown provider: utilsProvider <- utils

I tried:

• Injecting the controller or utils with $injector.get()
• Looked at this post $injector:unpr Unknown provider error when testing with Jasmine

Any tips, pointers or clues as to what I'm doing wrong would be more than welcome

Answer 1

I found the solution after feeling a hitch in my brain :)

In the beforeEach function, all I needed to do is to reference my utils module name this way:

module('com.acme.myutilsmod');

This line "expose" modules components so consumers can use it.