在单元测试中访问已编译的模板

Question

大部分Angular教程都讨论了通过Protractor使用端到端测试来测试编译后的模板是否按预期出炉。我想知道是否可以通过单元测试来做到这一点。

大多数讨论在单元测试中引用HTML代码的教程都描述了在测试中编译自己的书面代码，例如，以确保正确访问指令：

describe('some function', function () {
  it('should do something', inject(function ($compile, $rootScope) {
    var element = $compile('<div id = "foo" ng-hide = "somecondition">Bar</div>')($Scope);
    $rootScope.digest();
    //Search for a given DOM element and perform some test here
  }));
});

但是，假设我要测试实际模板文件中的代码。就像我想测试ng-hide是否成功设置一样。我希望能够执行以下操作：

describe('some function', function () {
  it('should do something', function () {
    //Get the div with ID 'foo' in the compiled template
    var elm = $('#foo');
    expect(elm.css('display')).toEqual('none');
  });
});

我这样做时不起作用。elm被设置为一些HTML /
Javascript代码，而不是模板的代码，并elm.css('display')以未定义的形式返回。

是否可以通过Jasmine / Angular设置对它进行单元测试？

Answer 1

$templateCache使用ng-html2js将您的HTML模板加载到Angular中，以便在您的测试中可用。

在测试中检索特定的模板：

var template = $templateCache.get('my/template.html');

将模板包装在一个更易于使用的jqLit​​e / jQuery对象中：

var element = angular.element(template);

然后，您可以在模板中选择元素：

var fooEl = element.find('#foo');

对于断言，您不想测试display: none设置在元素上的东西，而是在测试的内部实现ng- hide。您可以相信Angular团队有自己的测试，涵盖了设置CSS属性的工作。相反，您要测试您是否正确编写了模板，因此它更适合测试ng- hide元素上属性的存在，并且提供了要绑定到的正确的scope属性：

expect(fooEl.attr('ng-hide')).toBe('isFooElHidden');