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

大多数Angular教程都讨论使用带量角器的端到端测试来测试编译的模板是否如预期的那样输出。我想知道是否有可能通过单元测试来实现这一点

大多数关于在单元测试中引用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
  }));
});

当我这样做的时候，它不起作用

elm

设置为一些HTML/Javascript代码，但不是模板的代码，并且

elm.css（'display'）

返回为未定义

---

有没有一种方法可以使用Jasmine/Angular设置对其进行单元测试？

使用将HTML模板加载到Angular的

$templateCache

中，以便它们在测试中可用

在测试中检索特定模板：

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

将模板包装在更易于使用的jqLite/jQuery对象中：

var element = angular.element(template);

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

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

对于断言，您不想测试元素上是否设置了

display:none

，这是在测试

nghide

的内部实现。您可以相信Angular团队有自己的测试，包括设置CSS属性。相反，您希望测试您是否正确编写了模板，因此更适合测试元素上是否存在

ng hide

属性，以及是否提供了要绑定到的正确范围属性：

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

---

除了@user2943490的正确答案之外：

• 定义专用范围而不使用$rootScope是一种很好的做法

  
  var scope=$rootScope.$new（）；
  var元素=$compile（模板）（范围）；
  

• 在大多数情况下，您希望从内部指令的范围测试属性。您可以在beforeach方法中这样定义它，并在所有测试中访问它：

  
  var isolatedScope=element.isolateScope（）；
  expect（isolatedScope.property）.toEqual（value）；
  

---

您能否提供有关“将HTML模板加载到Angular的$templateCache”的更多详细信息？我正在将该服务注入到我的测试中，但没有加载模板，因此它们返回为未定义。您需要使用上面链接的

ng-html2js

。这是一个Karma插件，可以检索.html文件并将它们插入Angular的

$templateCache

中。或者，您可以使用

$templateCache.put

手动执行此操作，但这可能会很繁琐$TemplateCacheAPI：当我按照您的建议尝试访问element.isolateScope（）时，我得到了未定义的结果。我的指令确实定义了隔离作用域，但此方法不返回它。element.scope（）可以工作，但另一个不行。在什么情况下它是未定义的？在指令的模板加载中使用什么-

template

或

templateUrl

？有人讨论过这样一个事实，即使用templateUrl的指令的$compile不会触发摘要循环，因此您需要手动执行此操作，然后才能访问隔离范围。

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