单元测试角指令templateUrl (包括需求和ng-html2js )

Question

我正在开发一个尚未开发的大角度应用程序。我对业力单元测试有问题。长话短说，我用的是角度和要求。如果我将模板嵌入到我的指令中，我的测试就会运行良好。但是，由于这个应用程序将是巨大的，它将不会规模。但是，当我移动模板并使用templateUrl在指令中加载它时，我无法消除以下错误之一(取决于我修改conf的方式)：

1. (初始错误)“意外请求: GET path/to/mytpl.html”
2. "ReferenceError:找不到变量:角“。此错误发生在不同的配置中：

- when I put `{pattern: 'path/to/mytpl.html', included: false}` in my karma.conf and add a requirejs's define `path/to/mytpl.html` in my test file (this is the way I would like that to work).
- when I put `path/to/mytpl.html` in my karma.conf then all my template return this error (whether I am using ng-html2-js preprocessor or not).

​

1. “错误：$injector:modulerr无法实例化模块模板，原因是：$injector:nomod模块‘模板’不可用！”我看到了业力-ng-html2js-预处理程序可以用来创建一个包含所有模板的模块，但是它从来没有起作用。

注:我在karma.conf中不使用FQN，我在这里使用它是为了保持一致性。我认为这不重要，但我更愿意把它说清楚。

我看到有人将每个'path/to/mytpl.html': {deps: ['angular']}都放在了它们的test-main.js的shim部分。但这对我不起作用，这个解决方案也不会扩大规模。

Answer 1

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

简要方法概述:由于业力-ng-html2js-预处理程序或业力-html2js-预处理程序似乎适用于其他一些项目，并且在官方文档中引用它们时，我尝试了许多(我认为几乎所有)可能的配置组合，以便在我的测试环境中运行其中之一。但没有成功，我找到了线索:我必须放下它们，找到另一条路。

解决方案来自grunt-html2js。通过简单地添加基本设置并运行grunt，它生成了一个包含我所有模板的模块--也许，我稍后会将它拆分到更有意义的模块中。但从现在起，工作就快完成了。然后我就不得不：

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

仅此而已！

这种方法有一个缺点，它需要检索或模拟测试指令中使用的所有其他指令的模板。随着指令数量的增加，这可能会令人厌烦。但我现在更喜欢这样，因为它对应用程序的代码不具有侵入性。也许以后，特别是当我将javascript的编译包含在我的过程中时，我也会把它从test移到app。

Answer 2

我也遇到了同样的问题，并在下面的文章中找到了解决方案。我猜您的问题是在错误的业力或requireJS配置，特别是基本路径设置。如果您的指令templateUrl是相对的，并且对于业力基路径或requireJS基路径不能正确地解决url，那么您需要解决这个问题。

让我们假设您的指令具有templateUrl的'app/ directive /myDirective.html‘值。然后：

1. 检查您的html文件是否正确地包含在业力配置的文件部分，注意包含:false设置： 文件://.{模式：'path_to_directive/myDirective.html'，包括: false }，//.， 当然，您可以使用诸如*或**这样的通配符，但为了排除故障，我将从完整的路径值开始。根据业力配置中basePath的值，“path_to_directive”将或不会与应用程序中的路径相同。 例:如果业力基路径比你的应用根目录高一级，那么你的'path_to_directive‘= 'some-folder/app/directive/myDirective.html’
2. 确保您可以从浏览器获取您的文件。转到指令/myDirective.html.js 在进行此测试时，请注意：

- _base_ prefix in the url (karma serves all files from that virtual path and adds this prefix to all urls)
- _'.js'_ at the end of your url

​

1. 在步骤2中获得文件后，您将看到由html2js预处理器创建的实际模块代码。它应该是这样的： angular.module('module_path/myDirective.html'，[]).run(函数($templateCache){ $templateCache.put('module_path/myDirective.html'，//.
2. 确保module_path是‘app/指令/’。如果没有，那么您有两个选项：

- module\_path has some prefix => simply remove it by adding the following to karma config:

ngHtml2JsPreprocessor: { stripPrefix: 'modulePrefix' }

- module_path是较短的=>添加缺失部分：

ngHtml2JsPreprocessor: { prependPrefix: 'missingPart' }

重新启动业力，并确保步骤3中的“module_path”是“app/directive/”

1. 确保您为模板模块添加了角依赖项(请检查test-main.js，它基本上是requireJS的配置文件)。还请记住，shim部分中的值将根据测试-main.js文件中的baseUrl值进行解析。为了简单起见，我假设requireJS可以从'requirejs_ path /myDirective.html‘路径获取文件。 辛：{ //.‘angular_path/myDirective.html’：{ deps：‘角’}，//.}
2. 请确保您已经将模板作为测试的依赖项，并且不要忘记加载模块： 定义(‘requirejs_path/myDirective.html’，‘角-模拟’，‘.’，函数() {描述(‘test套件’，function() {//.( beforeEach(module('app/directive/myDirective.html'))；//. })；

我希望通过完成这6步，你将得到一个工作测试。祝好运。