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

Question

我一直在寻找我要问的问题的答案，但没有成功。

假设我有以下指令：

(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 如下：

(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();
}
})();

spec文件如下：

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();
});

});

我不太明白的是，我尝试进行的每个测试运行，指令都没有正确编译或创建，我不确定。

我得到：

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

我试过了：

使用 $injector.get()
看了这个post

任何关于我做错了什么的提示、指示或线索都非常受欢迎

Answer 1

我的大脑出现了问题后，我找到了解决方案:)

在 beforeEach 函数中，我需要做的就是这样引用我的 utils 模块名称：

module('com.acme.myutilsmod');

这一行 "expose" 模块化组件，以便消费者可以使用它。

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

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

unit-testing

jasmine

angularjs-directive