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'
},
...

业力测试：

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'
],

业力测试：

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

});