Угловое тестирование: какая разница между элементом DebugElement и NativeElement в ComponentFixture?

В настоящее время я собираю несколько лучших практик для тестирования приложений Angular 2 на уровне компонентов.

Я видел несколько учебников, которые запрашивают объект NativeElement для объективов для селекторов и т.п., Например

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!');
    });
}));

Ответы

  abstract class ComponentFixture {
  debugElement;       // test helper 
  componentInstance;  // access properties and methods
  nativeElement;      // access DOM
  detectChanges();    // trigger component change detection
}

fixture.componentInstance == fixture.debugElement.componentInstance;
fixture.nativeElement == fixture.debugElement.nativeElement;