Question

我是Angular单元测试的新手，正在查看其他人编写的一些测试。我看到了尝试访问元素的三种不同方式：

grep -rl 'Control' ./ | xargs sed -i 's/Control/CerbC9/g' sed: 1: ".//C9_chr_binary.txt": invalid command code .
fixture.debugElement.query(By.css('#hello'))
fixture.debugElement.nativeElement.querySelector('#hello')

使用这些方法是否有区别/最佳实践？

Answer 1

对于 html：

<div id="shan">Hey there</div>

fixture.debugElement.query（By.css（'＃hello'））

它用于获取DOM对象的“ DebugElement”。可以找到更多信息here in offical doc。您可以将id传递为By.css('#hello')，将class传递为By.css('.hello')，也可以使用诸如By.css('div')或By.css('some-app-component')

DebugElement是Angular类，其中包含与调查 element 或 component

相关的各种引用和方法。

fixture.debugElement.query(By.css('#shan'))

将返回

DebugElement__PRE_R3 __ {侦听器：[]，父对象：DebugElement__PRE_R3 __ {侦听器：[]，父对象：null， debugContext：DebugContext {view：...，nodeIndex：...，nodeDef：.. 。，elDef：...，elView：...}，nativeNode：嘿，属性：Object {}，属性：Object {ng-version：...}，类：Object {}，样式：Object {} ，childNodes：[...]，nativeElement：嘿}， debugContext：DebugContext {view：对象{def：...，parent：...，viewContainerParent：...，parentNodeDef： ...，上下文：...，组件：...，节点：...，状态：...，根目录：...，渲染器：...，oldValues：...，一次性用品：.. 。，initIndex：...}，nodeIndex：0，nodeDef：Object {nodeIndex：...，parent：...，renderParent：...，bindingIndex：...，outputIndex：...，checkIndex：。 ..，标志：...，childFlags：...，directChildFlags：...，childMatchedQueries：...，matchedQueries：...，matchedQueryIds：...，引用：...，ngContentIndex：... ，childCount：...，bindings：...，bindingFlags：...，输出：...，element：...，provider：.. 。，文本：...，查询：...，ngContent：...}，elDef：Object {nodeIndex：...，parent：...，renderParent：...，bindingIndex：...，outputIndex ：...，checkIndex：...，标志：...，childFlags：...，directChildFlags：...，childMatchedQueries：...，matchedQueries：...，matchedQueryIds：...，引用：。 ..，ngContentIndex：...，childCount：...，绑定：...，bindingFlags：...，输出：...，element：...，provider：...，text：... ，查询：...，ngContent：...}，elView：对象{def：...，父对象：...，viewContainerParent：...，parentNodeDef：...，上下文：...，组件： ...，节点：...，状态：...，根目录：...，渲染器：...，oldValues：...，一次性用品：...，initIndex：...}}，nativeNode：嘿，属性：对象{}，属性：对象{id：'shan'}，类：对象{}，样式：对象{}，childNodes：[DebugNode__PRE_R3 __ {listeners：...，parent：...，_debugContext ：... ..nativeNode：...}]，nativeElement：嘿，名称：'div'}

fixture.debugElement.nativeElement.querySelector（'＃hello'）

nativeElement返回对DOM元素的引用，如上所述，该元素也可以位于debugElement下。您可以使用它执行测试用例中的click()事件之类的动作。

fixture.debugElement.nativeElement.querySelector('#hello').click(); // this will create a click event over this element.

它可以同时查询class (fixture.debugElement.nativeElement.querySelector('.hello'))和id之类的东西。

fixture.debugElement.nativeElement.querySelector('#shan')

将返回

<div _ngcontent-a-c0="" id="shan">Hey there</div>

document.getElementById（'hello'）

这是访问id（而不是class）的一种很好的旧方法。您无法通过类似的操作访问class

document.getElementById('.hello') // will return null

此外，请注意，您无需在此函数参数中传递# 。

document.getElementById('#hello') // will return null

在使用angular时应避免使用它，因为angular有自己的ChangeDetection，这要求它与fixtures一起使用。通过直接调用document，您最终会把头撞在墙上，试图找出为什么元素以null

出现

document.getElementById('shan')

将返回

<div _ngcontent-a-c0="" id="shan">Hey there</div>

Since you are new to unit testing in angular, you can refer my series of articles on Unit testing。我希望这能帮到您。干杯！

在单元测试中，fixture.debugElement.nativeElement.query和document.getElement有什么区别？

1 个答案: