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

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 属性，并且它提供了正确的范围属性以绑定到：

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

Answer 2

除了@user2943490的正确答案：

• 定义专用范围而不使用 $rootScope 是一种很好的做法 var scope = $rootScope.$new(); var element = $compile(template)(scope);

• 在大多数情况下，您希望测试内部指令范围内的属性。您可以像这样在 beforeEach 方法中定义它并在所有测试中访问它： var isolatedScope = element.isolateScope(); expect(isolatedScope.property).toEqual(value);