Question

在angular指令的单元测试中，我想检查已编译的DOM：

var element = $compile("<div pr-sizeable='...'></div>")($rootScope);
var children = element[0].children;   // HTMLCollection

expect(children.length).toBeGreaterThan(0);  // that's fine

特别是，我想检查是否存在具有属性pr-swipe-handler='right'的特定子元素。

我知道我可以迭代孩子及其属性集合，但我确信有一个更紧张的解决方案。

这是我尝试的内容（参考类似帖子的this answer）：

// TypeError: angular.element(...).querySelector is not a function
angular.element(children).querySelector("[pr-swipe-handler='right']")

// TypeError: children.querySelector is not a function
angular.element(children.querySelector("[pr-swipe-handler='right']"))

Answer 1

这是一个应该帮助你的傻瓜：

http://plnkr.co/edit/YRSgbsGCWGujhiOGV97z?p=preview

代码：

app.controller('MainCtrl', function($compile, $document, $scope) {
  $scope.name = 'World';
  var element = $compile('<div><p></p><div pr-swipe-handler="right"></div></div>')($scope);
  console.log(element[0]);
  console.log(element);
  $document.append(element);
  console.log(document.querySelectorAll('[pr-swipe-handler="right"]'))
});

您不能在元素上调用querySelector，但可以在文档上调用它。你需要在测试中将元素附加到文档中，但无论如何你应该这样做。

Answer 2

Peter Ashwell's answer向我展示了正确的方向。仅当HTMLCollection的元素是实际DOM的一部分时，才可以使用querySelector-api检查HTMLCollection。因此，有必要将编译后的元素附加到它。

感谢that answer到similar question，结果证明已编译的元素必须附加到浏览器DOM中的具体元素，例如{ {1}}。 body还不够：

$document

请参阅此plunk。

按属性值查找HTMLCollection的子项

2 个答案: