karma指令templateUrl

时间:2016-05-09 16:42:57

标签: javascript angularjs-directive karma-jasmine

经过几天的研究,并尝试了很多例子,我无法获得一个带有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'
    };
};

欢迎任何建议,问题,澄清或答案!

1 个答案:

答案 0 :(得分: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('');
        });
    });

});