unit-testing - 测试使用模板的指令

Question

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

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

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

让它真正得到模板，但我还没有弄清楚如何正确地做到这一点。

我想我对如何对指令进行单元测试有些困惑。免责声明：我没有测试经验，也没有使用 jasmine 或 testacular 的经验。

任何帮助表示赞赏。

Answer 1

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

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

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

我相信最初这种技术是由 Vojta Jina 的优秀存储库推广的：https ://github.com/vojtajina/ng-directive-testing 在这里你可以看到模板准备和实际测试引用带有模板预加载的模块在这里.

Answer 2

感谢 pkozlowski.opensource 引导我朝着正确的方向前进！

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

1. 将https://npmjs.org/package/grunt-angular-templates添加到您的项目中。
2. 添加一个 grunt build 任务，将所有模板编译成一个 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/，否则它将与模板缓存路径不匹配并且无论如何都会触发请求。