使用模板的测试指令

我如何测试使用templateUrl加载模板的指令？使用模板的测试指令

由于$ httpBackend是一个模拟，它也不会加载模板。我想能够使用像

$httpBackend.whenGET(/^\/views\//).passThrough();

，让它真正得到的模板，但我还没有想出如何正确做到这一点。

我想我有一些关于如何单元测试指令困惑。免责声明：我没有经验测试，或使用茉莉花，也没有唾液。

任何帮助表示赞赏。

来源

2013-03-02 Kenneth Lynne

感谢pkozlowski.opensource带领我走向正确的方向！

对于任何人想知道如何解决它：

添加https://npmjs.org/package/grunt-angular-templates到您的项目。
添加grunt构建任务将所有模板编译为js文件。

此JS文件现在将注册一个模块（名称可以在gruntfile中配置）。

在所有依赖于模板的测试中，您必须加载该模块。

试验例：

'use strict'; 

describe('Component: comments', function() { 
    beforeEach(module('studentportalenApp'), module('app.templates')); 

    var element; 

    it('should render an error message if type is not recognized', inject(function($rootScope, $compile) { 
    element = angular.element('<comments></comments>'); 
    element = $compile(element)($rootScope); 
    expect(element.html()).toBe('Comments directive type not recognized.'); 
    })); 
});

小心使用作为app.templates模块中定义的网址完全相同，让您的观点。即/ views /而不是views /，否则它将无法与模板缓存路径和请求的激发相匹配。

来源

2013-03-02 21:36:30

这有帮助！我还需要一件事情来让它工作，那就是在'$ compile'步骤之后调用'$ rootScope。$ digest（）'。没有这一点，测试将无法看到元素中的任何内容。 – Dave 2014-07-02 14:57:33

IMO根据模板测试指令的最简单方法（参考templateUrl）是将这些模板预先放入$templateCache。通常这是通过构建过程完成的。

详细信息：每个模板标记都转换为JavaScript代码并放入$templateCache。另外，还会生成一个AngularJS模块（模块的名称是模板的路径）。

通过应用这种技术，我们只有JavaScript文件来处理，我们不需要模拟任何HTTP调用。缺点是你需要额外的构建步骤。

我相信，原本这项技术是由Vojta开发集纳了出色的存储库推广：https://github.com/vojtajina/ng-directive-testing在这里你可以看到模板准备here和实际测试引用与模板预紧here的模块。

来源

2013-03-02 20:19:50

非常感谢您为我设置正确的道路！在你的输入后，我发现这个咕噜生成任务，帮助我将模板编译成JS。链接：https：//npmjs.org/package/grunt-angular-templates – 2013-03-02 21:14:29

使用模板的测试指令

回答

相关问题