使用 Karma、Jasmine 和 ngHtml2JsPreprocessor 进行 AngularJS 测试指令 : template not loaded

Question

我正在使用 Karma + Jasmine 和 ngHtml2JsPreprocessor 测试自定义 AngularJS 指令。插件以便为我的指令模板提供服务，但我不明白为什么我的指令似乎无法访问模板(已编译的元素为空)。我定义了 templateUrl在指令中这样:

templateUrl: 'templates/angular/mywidget.html'

我的 Karma 配置如下(相关部分):

        basePath: '../../main/webapp/static/',
        files: [
            {pattern: 'libs/angular/angular.js', watch: false},
            {pattern: 'libs/angular-resource/angular-resource.js', watch: false},
            {pattern: 'libs/angular-mocks/angular-mocks.js', watch: false},
            {pattern: 'libs/angular-ngkit/js/ngkit.js', watch: false},
            {pattern: 'libs/jquery/dist/jquery.js', watch: false},
            'templates/angular/*.html',
            'js/angular/**/*.js',
            '../../../test/js/spec/angular/*.js'
        ],
        preprocessors: {
            'templates/angular/*.html': ['ng-html2js']
        },
        ngHtml2JsPreprocessor: {
            moduleName: 'templates'
        },
        browsers: [
            'PhantomJS'
        ],
        plugins: [
            'karma-phantomjs-launcher',
            'karma-jasmine',
            'karma-ng-html2js-preprocessor'
        ],

在我的测试中:

beforeEach(module('templates'));
beforeEach(module('ngResource'));
beforeEach(module('mywidget'));

“有趣”的部分是，如果我测试模板缓存，模板就会被加载并编译:

beforeEach(inject(function(_$templateCache_) {
    var template = _$templateCache_.get('templates/angular/mywidget.html');
}));

模板存在!为什么我的指令不能使用它？ (在浏览器中它完美运行)。如果我替换 templateUrl带有内联 template在我的指令中，它在测试中正确呈现...但我必须使用外部模板，将其内联放置是 Not Acceptable ...我被卡住了!有什么聪明的主意吗？

更新(到目前为止我尝试过的):

1. 编写一个没有逻辑的新指令(以排除问题出在实现中)，简单地说:

   angular.module('modulename', []).
directive('foo', function() {
return {
templateUrl: 'path/to/template.html'
}
});

2. 将模板内容简化为:

   <div>hello world</div>

3. 更改模板路径

4. 更改模板名称

5. 更改 karma 配置文件的位置

6. 删除额外的依赖项，例如“ngResource”和类似的

7. 重新安装所有 Bower 依赖项(并清理缓存)

8. 重新安装所有 npm 软件包

9. 从命令行运行测试(我使用 Karma 插件在 Intellij Idea 中运行测试)

10. 用拳头猛击 table ，同时抛出斐波那契数列的亵渎之词，如果教皇听了的话，他会被杀的!

(最新的通常会让我找到解决方案......但这次不是)

更新2:

我通过这样定义我的指令绕过了这个问题:

directive('mywidget', function($templateCache) {
        var config = {}; // directive definition (where you define "link", "restrict"...)
        var templateUrl = 'templates/angular/mywidget.html';
        var cachedTemplate = $templateCache.get(templateUrl);
        if (cache) {
            config.template = cachedTemplate;
        }
        else {
            config.templateUrl = templateUrl;
        }
        return config;
});

通过使用这个技巧，我的指令可以在测试中正确呈现。从这一点来看，这听起来是 AngularJS 中的一个错误……它无法从缓存中加载模板。我真的很失望:(

Answer 1

是啊啊啊啊!!!我终于解决了这个疯狂的问题!问题是我使用了不同版本的 Angular 依赖性( Angular 模拟、 Angular 资源...)，事实证明，如果您使用的是 Angular 1.2.27，那么您必须 另外请务必使用 Angular-Mocks 1.2.27、Angular-Resource 1.2.27 等，否则可能会出现像我遇到的冲突。当然，我无意使用不同的版本，但不知何故，通过 Bower 安装我的依赖项，我使这些库“未对齐”。