测试使用document.body.querySelectorAll的代码

Question

尝试测试执行以下操作的指令：

var inputs = angular.element(document.body.querySelectorAll('input[ng-model]', elem));
// [code relying on found elements]

在karma / jasmine / phantomjs中运行，这会失败，因为document似乎返回包含测试的文档，而不是编译模板。有没有办法模拟这个功能，所以它按预期工作（对于我的用例）或其他方式来查询这些元素？

PS：需要定位的元素与指令所适用的元素没有已知关系。

Answer 1

您可以使用$document代替document，然后在测试中模拟它。 请参阅Angular js unit test mock document了解如何模拟$document。

Answer 2

this article中的最后一次更新为我做了诀窍他基本上使用的是$ document服务，它就像是jQuery的包装器，然后你可以直接将元素附加到主体并测试它们：

我引用他的回答：

  

更新2

     

我设法部分嘲笑function ball:touch( event ) local phase = event.phase if ( phase == 'ended' ) then local x, y = ball.x - event.x, ball.y - event.y self:applyLinearImpulse( x / 30, -math.abs(y) / 30, self.x, self.y ) --tapCount = tapCount + 1 --tapText.text = tapCount end return true end ball:addEventListener("touch") 服务，以便您可以使用   实际的页面文档并将所有内容恢复到有效状态：

$document

     

Plunker：this answer

     

我们的想法是将beforeEach(function() { module('plunker'); $document = angular.element(document); // This is exactly what Angular does $document.find('body').append('<content></content>'); var originalFind = $document.find; $document.find = function(selector) { if (selector === 'body') { return originalFind.call($document, 'body').find('content'); } else { return originalFind.call($document, selector); } } module(function($provide) { $provide.value('$document', $document); }); }); afterEach(function() { $document.find('body').html(''); }); 标记替换为您的SUT可以使用的新标记   自由操作，你的测试可以安全地清除每一个   规格。