Угловое тестирование: какая разница между элементом 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!');
    });
}));

Ответ 1

nativeElement возвращает ссылку на элемент DOM
DebugElement - это класс Angular2, который содержит все виды ссылок и методов, необходимых для исследования элемента или компонента (см. Источник DebugNode и DebugElement

Ответ 2

добавить к уже упомянутому:

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

источник: https://github.com/angular/angular/blob/a7e9bc97f6a19a2b47b962bd021cb91346a44baa/modules/angular2/src/testing/test_component_builder.ts#L31

Ответ 3

Взгляните на Угловую дискуссию по этой теме и связанному с ней PR.

В основном:

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