javascript - karma 指令 templateUrl

Question

经过几天的研究并尝试了许多示例，我无法获得带有 templateUrl 的指令来在 karma 测试中运行(该指令的行为与我在常规应用程序中的预期相同)。

这是我所拥有的:

karma.conf.js:

...

// list of files / patterns to load in the browser
files: [
  'js/vendor/angular/angular.min.js',
  'js/vendor/angular/angular-mocks.js',
  'js/common/module.js',
  'js/common/*Service.js',
  'js/common/*Factory.js',
  'moduleToTest/js/module.js',
  'moduleToTest/js/controller.js',
  'moduleToTest/js/directive.js',
  'moduleToTest/index.html',
  'test/*tests.js'
],

// preprocess matching files before serving them to the browser
// available preprocessors: https://npmjs.org/browse/keyword/karma-preprocessor
preprocessors: {
    // karma-ng-html2js-preprocessor for templates in directives
    'moduleToTest/index.html': 'ng-html2js'
},
...

karma 测试:

describe('Directive Tests',function(){
    var $compile, $rootScope, $scope, element;

    //beforeEach(module('./moduleToTest/index.html')); // ???

    beforeEach(inject(
        ['$compile','$rootScope',function($c,$r){
            $compile = $c;
            $rootScope = $r;
            $scope = $r.$new();
            element = angular.element('<module-to-test-dir></module-to-test-dir>');
            $compile(element)($scope);

            //$r.$digest(); // Load the template ???
        }]
    ));

    it('should have N inputs',function(){
        expect(element.html()).not.toBe([]); //element.html()===[] right now
    });
});

moduleToTest/js/directive.js

angular.module('ModuleToTest').directive('moduleToTestDir',moduleToTestDir);
function moduleToTestDir(){
    return {
        restrict: 'E',
        controller: 'moduleToTestCtrl',
        templateUrl: 'moduleToTest/index.html'
    };
};

欢迎提出任何建议、问题、澄清或答案!

Answer 1

好吧，我正在回答我自己的问题，但我希望这可以帮助下一个尝试学习 Karma 的人。

karma.conf.js - 文件顺序错误:

// list of files / patterns to load in the browser
files: [
  'js/vendor/angular/angular.min.js',
  'js/vendor/angular/angular-mocks.js',
  'js/common/module.js',
  'js/common/*Service.js',
  'js/common/*Factory.js',
  'moduleToTest/index.html', // --> Needs to come before .js files <--
  'moduleToTest/js/module.js',
  'moduleToTest/js/controller.js',
  'moduleToTest/js/directive.js',
  'test/*tests.js'
],

karma 测试:

describe('module testing', function(){

    beforeEach(module('ModuleToTest'));

    ... // Other component tests on module

    describe('Directive Tests',function(){
        var $compile, $rootScope, $scope, element;

        beforeEach(module('moduleToTest/index.html'));

        beforeEach(inject(
            ['$compile','$rootScope',function($c,$r){
                $compile = $c;
                $rootScope = $r;
                $scope = $r.$new();
                element = angular.element('<module-to-test-dir></module-to-test-dir>');
                $compile(element)($scope);

                $r.$digest(); // Load the template
            }]
        ));

        it('should not be empty',function(){
            expect(element.html()).not.toBe('');
        });
    });

});