Question

如何将使用templateUrl加载模板的指令单元化？

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

这样的东西

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

并让它实际获取模板，但我还没弄清楚如何正确地做到这一点。

我认为我对如何单元测试指令感到困惑。免责声明：我没有经验测试，也没有使用茉莉花和测试。

感谢任何帮助。

Answer 1

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

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

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

我相信最初这种技术是由Vojta Jina的优秀存储库推广的：https://github.com/vojtajina/ng-directive-testing您可以在其中看到模板准备here以及引用模板预载here的模块的实际测试}。

Answer 2

感谢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 /，否则无论如何它都不会与模板缓存路径和请求的激活相匹配。

测试使用模板的指令

2 个答案: