Angular2测试：ComponentFixture中DebugElement和NativeElement对象之间有什么区别？

问题描述

我目前正在整理一些在组件级别上测试Angular 2应用程序的最佳实践。

我看过一些教程查询fixture的NativeElement对象选择器等，例如

  it（'应渲染Hello World！点击后'，async（ （）=> {builder.createAsync（HelloWorld）.then（（fixture：ComponentFixture< HelloWorld>）=> {fixture.detectChanges（）; let el = fixture.nativeElement; el.querySelector（'h1'）。click （）; fixture.detectChanges（）; expect（el.querySelector（'h1'））。toHaveText（'Hello World！'）;}）;}））;  

然而，在她通过父DebugElement对象访问NativeElement。

  it（'should点击'，async（（）=>后渲染Hello World！ {builder.createAsync（HelloWorld）.then（（fixture：ComponentFixture< HelloWorld>）=> {fixture.detectChanges（）; let compiled = fixture.debugElement.nativeElement; compiled.querySelector（'h1'）。click（）; fixture.detectChanges（）; expect（compiled.querySelector（'h1'））。toHaveText（'Hello World！'）;}）;}））;  

是否有任何特定情况你会在其nativeElement上使用fixture的debugElement.nativeElement？

解决方案

• nativeElement 返回对DOM元素的引用


• DebugElement 是一个Angular2类，包含与调查元素或组件相关的所有类型的引用和方法（请参阅




I'm currently putting together some best practices for testing Angular 2 apps on a component level.

I've seen a few tutorials query a fixture's NativeElement object for selectors and the like, e.g.

it('should render "Hello World!" after click', async(() => {
    builder.createAsync(HelloWorld).then((fixture: ComponentFixture<HelloWorld>) => {
        fixture.detectChanges();
        let el = fixture.nativeElement;
        el.querySelector('h1').click();
        fixture.detectChanges();

        expect(el.querySelector('h1')).toHaveText('Hello World!');
    });
}));

However, in juliemr's Angular 2 test seed she accesses the NativeElement through a parent DebugElement object.

it('should render "Hello World!" after click', async(() => {
    builder.createAsync(HelloWorld).then((fixture: ComponentFixture<HelloWorld>) => {
      fixture.detectChanges();
      let compiled = fixture.debugElement.nativeElement;
      compiled.querySelector('h1').click();
      fixture.detectChanges();

      expect(compiled.querySelector('h1')).toHaveText('Hello World!');
    });
}));

Are there any specific cases you'd use a fixture's debugElement.nativeElement over its nativeElement?

解决方案
• nativeElement returns a reference to the DOM element
• DebugElement is an Angular2 class that contains all kinds of references and methods relevant to investigate an element or component (See the source of DebugNode and DebugElement

这篇关于Angular2测试：ComponentFixture中DebugElement和NativeElement对象之间有什么区别？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！