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

Question

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

• fixture.debugElement.query(By.css('#hello'))
• fixture.debugElement.nativeElement.querySelector('#hello')
• document.getElementById('#hello')

有difference/best使用这些的实践吗？

Answer 1

对于html:

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

1. fixture.debugElement.query(By.css('#hello'))

用于获取“DebugElement" for a DOM object. More info can be found here in offical doc。您可以将 id 作为 By.css('#hello') 传递，将 class 作为 By.css('.hello') 传递，或者您也可以将元素与By.css('div') 或 By.css('some-app-component')

等方式

DebugElement 是一个 Angular class，其中包含与研究 元素 或 [=69= 相关的各种参考资料和方法]组件

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

将return

DebugElement__PRE_R3__{listeners: [], parent: DebugElement__PRE_R3__{listeners: [], parent: null, debugContext: DebugContext{view: ..., nodeIndex: ..., nodeDef: ..., elDef: ..., elView: ...}, nativeNode: Hey there, properties: Object{}, attributes: Object{ng-version: ...}, classes: Object{}, styles: Object{}, childNodes: [...], nativeElement: Hey there}, debugContext: DebugContext{view: Object{def: ..., parent: ..., viewContainerParent: ..., parentNodeDef: ..., context: ..., component: ..., nodes: ..., state: ..., root: ..., renderer: ..., oldValues: ..., disposables: ..., initIndex: ...}, nodeIndex: 0, nodeDef: Object{nodeIndex: ..., parent: ..., renderParent: ..., bindingIndex: ..., outputIndex: ..., checkIndex: ..., flags: ..., childFlags: ..., directChildFlags: ..., childMatchedQueries: ..., matchedQueries: ..., matchedQueryIds: ..., references: ..., ngContentIndex: ..., childCount: ..., bindings: ..., bindingFlags: ..., outputs: ..., element: ..., provider: ..., text: ..., query: ..., ngContent: ...}, elDef: Object{nodeIndex: ..., parent: ..., renderParent: ..., bindingIndex: ..., outputIndex: ..., checkIndex: ..., flags: ..., childFlags: ..., directChildFlags: ..., childMatchedQueries: ..., matchedQueries: ..., matchedQueryIds: ..., references: ..., ngContentIndex: ..., childCount: ..., bindings: ..., bindingFlags: ..., outputs: ..., element: ..., provider: ..., text: ..., query: ..., ngContent: ...}, elView: Object{def: ..., parent: ..., viewContainerParent: ..., parentNodeDef: ..., context: ..., component: ..., nodes: ..., state: ..., root: ..., renderer: ..., oldValues: ..., disposables: ..., initIndex: ...}}, nativeNode: Hey there, properties: Object{}, attributes: Object{id: 'shan'}, classes: Object{}, styles: Object{}, childNodes:[DebugNode__PRE_R3__{listeners: ..., parent: ..., _debugContext: ..., ..nativeNode: ...}], nativeElement: Hey there, name: 'div'}

---

2. fixture.debugElement.nativeElement.querySelector('#hello')

nativeElement returns 对 DOM 元素的引用，如所述 above.You 也可以属于 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')

将return

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

---

3. document.getElementById('hello')

这是我们访问 id（不是 class）的好旧方法。您无法通过

之类的方式访问 class

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

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

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

在使用 angular 时应避免使用它，因为 angular 有自己的 ChangeDetection，这需要它与 fixtures 一起使用。通过直接调用 document ，您最终会用头撞墙，试图弄清楚 为什么元素会以 null[=44= 的形式出现]

document.getElementById('shan')

将return

<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。我希望这能帮到您。干杯！