angularjs – 单元测试角度指令templateUrl(包括requirejs和ng-h

我遇到了同样的问题,并在以下 article中找到了解决方案.
我想你的问题是错误的业力或者需要JD配置,特别是基本路径设置.
如果您的指令templateUrl是相对的,并且无法针对karma基本路径或requireJS基本路径正确解析该url,那么您需要解决此问题.

假设您的指令具有templateUrl的’app / directive / myDirective.html’值.然后：

>检查你的html文件是否正确包含在karma配置的文件部分中,注意包含：false setting：

files: [
    //...
    { pattern: 'path_to_directive/myDirective.html',included: false },//...
],

当然你可以使用像*或**这样的外卡字符,但为了排除故障,我会从一个完整的路径值开始.根据karma配置中basePath的值,’path_to_directive’将与您应用中的路径相同或不同.

例如：如果业力基础路径是你应用根的一级,那么你的’path_to_directive’=’some-folder / app / directive / myDirective.html’
>确保您可以从浏览器获取文件.转到http://localhost:karma_port/base/path_to_directive/myDirective.html.js

在做这个测试时要注意：

> url中的基本前缀(karma提供来自该虚拟路径的所有文件,并将此前缀添加到所有URL)
>你网址末尾的’.js’

>在步骤2中获得文件后,您将看到由html2js预处理器创建的实际模块代码.它应该看起来像这样：

angular.module('module_path/myDirective.html',[]).run(function($templateCache) {
    $templateCache.put('module_path/myDirective.html',//...

>确保module_path为’app / directive /’.如果没有,那么你有2个选择：

> module_path有一些前缀=>只需将以下内容添加到karma配置中即可将其删除：

ngHtml2JsPreprocessor：{stripPrefix：’modulePrefix’}
> module_path更短=>添加缺失的部分：

ngHtml2JsPreprocessor：{prependPrefix：’missingPart’}

重启业力并确保步骤3中的“module_path”为“app / directive /”
>确保为模板模块添加了角度依赖性(检查test-main.js,它基本上是requireJS的配置文件).另请注意,shim部分中的值将根据test-main.js文件中的baseUrl值进行解析.为简单起见,我假设requireJS可以从’requirejs_path / myDirective.html’路径获取文件.

shim: {
    //..
    'requirejs_path/myDirective.html': { deps: ['angular'] },//..
}

>确保已将模板作为测试依赖项包含在内,并且不要忘记加载模块：

define(['requirejs_path/myDirective.html','angular-mocks','...'],function () {

    describe('test suite',function() {
        //...
        beforeEach(module('app/directive/myDirective.html'));
        //...
    });
});

我希望通过完成这6个步骤,你将得到一个有效的测试.祝好运.