测试使用模板的指令

IMO是测试依赖于模板的指令的最简单方法(由 templateUrl )就是把这些模板放在 $templateCache 在最前面(突出)位置的通常这是通过构建过程来完成的。

更详细地说:每个模板标记都被转换为JavaScript代码,并放入 $template缓存 此外,生成AngularJS模块(模块的名称是模板的路径)。

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

我相信这项技术最初是由Vojta Jina的优秀存储库推广的: https://github.com/vojtajina/ng-directive-testing 在那里可以看到模板准备 here 以及实际测试参考具有模板预加载的模块 here .

感谢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完全相同的url获取视图。即/views/而不是views/,否则它将与模板缓存路径不匹配,并且无论如何都会触发请求。