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