测试使用模板的指令

Question

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

由于$ httpBackend是一个模拟,它也不会加载模板.我希望能够使用类似的东西

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

并让它实际获得模板,但我还没弄明白如何正确地做到这一点.

我想我对如何单元测试指令感到困惑.免责声明:我没有测试经验,也没有使用茉莉花和测试.

任何帮助表示赞赏.

Answer 1

IMO最简单的测试依赖于模板的指令(由参考引用templateUrl)的方法是将这些模板放在$templateCache前面.通常这是由构建过程完成的.

更详细地说:每个模板标记都转换为JavaScript代码并放入$templateCache.此外,还会生成一个AngularJS模块(模块名称是模板的路径).

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

我相信,最初这种技术是由优秀的资源库通过Vojta开发集纳推广:https://github.com/vojtajina/ng-directive-testing在这里你可以看到模板准备在这里与实际测试引用模块模板预紧这里.

Answer 2

感谢 pkozlowski.opensource 引导我走向正确的方向！

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

1. 将https://npmjs.org/package/grunt-angular-templates添加到您的项目中。
2. 添加 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 模块中定义的完全相同的 url 来获取视图。即/views/而不是views/，否则它将与模板缓存路径和请求的触发不匹配。