Angular2 testing: What's the difference between a DebugElement and a NativeElement object in a ComponentFixture?

Question

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?

Answer 1

• 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