单元测试angular指令templateUrl(包括requirejs和ng-html2js

Question

我正在研究一个尚未庞大的角应用程序.我遇到了业力单元测试的问题.总而言之,我使用带有requirej的角度.如果我将模板嵌入到我的指令中,我的测试运行良好.但是,由于这个应用程序将是巨大的,它将无法扩展.但是当我移动模板并在我的指令中加载它时templateUrl,我无法摆脱以下错误之一(取决于我如何修改conf):

1. (初始错误)"意外请求:GET路径/到/ mytpl.html"

2. "ReferenceError:找不到变量:angular".使用不同的配置会发生此错误:

   • 当我{pattern: 'path/to/mytpl.html', included: false}输入我的karma.conf并path/to/mytpl.html在我的测试文件中添加一个requirejs的define (这是我希望它的工作方式).
   • 当我path/to/mytpl.html输入我的karma.conf 时,我的所有模板都会返回此错误(无论我是否使用ng-html2-js预处理器).

3. "错误:[$ injector:modulerr]由于以下原因无法实例化模块模板:错误:[$ injector:nomod]模块'templates'不可用!" .我看到karma-ng-html2js-preprocessor可用于创建一个包含所有模板的模块,但它从未起作用.

注意:我没有在karma.conf中使用FQN,我在这里使用它是一致的.我认为这不重要,但我更倾向于准确

我看到有人把'path/to/mytpl.html': {deps: ['angular']} 他们放在他们的test-main.js的垫片部分.但它对我不起作用,并且该解决方案不会扩展.

Answer 1

在暂时搁置这个问题并利用这段时间来提高我的知识并扩大我的应用程序之后，我找到了解决方案。

简要方法回顾：由于karma-ng-html2js-preprocessor或karma-html2js-preprocessor似乎适用于其他一些项目，并且正如官方文档中引用的那样，我尝试了许多（我认为几乎所有）可能的配置组合来运行其中之一是在我的测试环境中。由于没有成功，我得到了线索：我必须放弃它们并寻找另一种方法。

解决方案来自 grunt-html2js。通过简单地将基本设置添加到 grunt 配置并运行 grunt，它会生成一个包含我所有模板的模块 - 也许，我稍后会将其拆分为更有意义的模块。但从这里开始，工作就差不多完成了。然后我只需要：

1. 告诉 karma 使用其他外部工具来提供该文件file: [ {pattern: 'path/to/mytplmodule.js', included: false}, ...]
2. 在我的测试所需配置中注册路径path: [ 'templates' : 'path/to/mytplmodule', ...]
3. 填充它，仍然在测试时需要conf，以确保它不会在角度之前加载shim: [ 'templates' : 'angular', ...]
4. 将此模块加载到我的测试文件中define(['templates',...], function(){...});
5. 检索测试指令的模板beforeEach(module('path/to/mytpl.html'));
6. 在 grunt 配置中添加一个步骤，使其在运行测试之前自动生成。

就这样 ！

这种方法有一个缺点，它需要检索或模拟测试指令中使用的所有其他指令的模板。随着指令数量的增加，它可能会很无聊。但我现在更喜欢这样做，因为它不会侵入应用程序的代码。也许稍后，特别是当我将 javascript 的编译包含在我的流程中时，我也会将其从测试移至应用程序。