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

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

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

在测试中检索您的特定模板:

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 属性，并且为它提供了正确的范围属性绑定(bind)到:

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