相关疑难解决方法(0)

我无法使Karma适用于具有外部模板的指令.

这是我的业力配置文件:

preprocessors: {
    'directives/loading/templates/loading.html': 'ng-html2js'
},

files: [
    ...
    'directives/loading/templates/loading.html',
]

ngHtml2JsPreprocessor: {
    prependPrefix: '/app/'
},

在指令文件中:

...
templateUrl: '/app/directives/loading/templates/loading.html'
...

在spec文件中:

describe('Loading directive', function() {
    ...
    beforeEach(module('/app/directives/loading/templates/loading.html'));
    ...
});

我收到以下错误:

由于以下原因无法实例化模块/app/directives/loading/templates/loading.html:错误:无模块:/app/directives/loading/templates/loading.html

如果我修改karma-ng-html2js-preprocessor的源代码来打印生成文件的结果,我得到:

angular.module('/app/directives/loading/templates/loading.html', []).run(function($templateCache) {
    $templateCache.put('/app/directives/loading/templates/loading.html',
        '<div ng-hide="hideLoading" class="loading_panel">\n' +
        '   <div class="center">\n' +
        '       <div class="content">\n' +
        '           <span ng-transclude></span>\n' +
        '           <canvas width="32" height="32"></canvas>\n' +
        '       </div>\n' +
        '   </div>\n' +
    '</div>');
});

所以似乎生成的JS文件是正确的但没有被karma加载......

另外,如果我使用--log-level debug,这里是与模板相关的行:

DEBUG [preprocessor.html2js]:处理"/home/rightink/public_html/bo2/master/web/app/directives/loading/templates/loading.html"

DEBUG [观察者]:已解决的文件:

      /correct/path/to/the/app/directives/loading/templates/loading.html.js

Run Code Online (Sandbox Code Playgroud)

我错过了什么吗？

谢谢,

编辑:在提问之后,我现在正在编辑这个来详细说明我的发现.

我的应用程序使用指令模块化.我正在编写我的指令,以便他们(1)创建自己的范围(2)使用templateUrl,以及(3)在其控制器中执行大部分逻辑和服务器数据提取.

问题是如何使用Mocha和Karma进行单元测试.

angular.js的新功能,无法弄清楚如何使用templateUrl和隔离范围编写指令测试.

这是我的控制器

(function(){
angular.module('buttons')
    .controller('buttonController', ['$scope', function($scope){

        //primary button
        $scope.primaryButton = { name: 'Submit'};
})();

这是我的观点index.html&

<div class="layoutLeft">
        <p>Primary Button</p>
        <primary-button info="primaryButton"></primary-button>
    </div>

初级button.html

<button class="{{buttonInfo.class}}">{{buttonInfo.name}}</button>

这是我的指示

(function(){
    angular.module('buttons')
        .directive('primaryButton', function() {
            return {
                restrict: 'EA',
                scope: {
                    buttonInfo: '=info'
                },
                templateUrl: 'scripts/local/views/primary-button.html'
            }
        })
    })();

这是我的测试

(function(){
    beforeEach(angular.mock.module('buttons'));
describe('Buttons Directive Test', function(){

    var $compile, $scope, $httpBackend;

    beforeEach(module('templates'));

    beforeEach(inject(function(_$compile_, _$rootScope_) {
        $compile = _$compile_;
        $scope = _$rootScope_.$new();

        $scope.primaryButton = {name: 'Save'};

        elm = angular.element("<primary-button info='buttonInfo'></primary-button>");
        e = $compile(elm)($scope);
        e.digest();
    })); …