Angular2 тестирование: в чем разница между DebugElement и NativeElement объекта в ComponentFixture?

Question

Angular2 тестирование: в чем разница между DebugElement и NativeElement объекта в ComponentFixture?

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

Я видел несколько учебных пособий, запрашивающих объект nativeelement объекта fixture для селекторов и тому подобное, например

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

    });

}));

Однако в тестовом семени Angular 2 juliemr она обращается к NativeElement через родительский объект DebugElement.

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

    });

}));

Есть ли какие-либо конкретные случаи, когда вы использовали бы отладочный элемент приспособления.nativeElement над своим родным элементом?

565 4

javascript unit-testing dom angular jasmine

4 ответов:

Comments

Ничего не найдено.

Günter Zöchbauer · Accepted Answer · 2016-06-08 17:47:27

nativeElement возвращает ссылку на элемент DOM

DebugElement является классом Angular2, который содержит все виды ссылок и методов, имеющих отношение к исследованию элемента или компонента (см. Источник DebugNode и DebugElement

candidJ · Accepted Answer · 2016-06-08 19:15:48

Чтобы добавить к уже упомянутому:
  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

Wojciech Kwiatek · Accepted Answer · 2016-06-08 17:47:19

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

Главным образом:
fixture.componentInstance == fixture.debugElement.componentInstance;
fixture.nativeElement == fixture.debugElement.nativeElement;

Abhishek · Accepted Answer · 2018-09-26 21:36:11

.nativeElement() возвращает дерево DOM, тогда как debugElement возвращает объект JS (дерево debugElement). debugElement - Это метод углового.

.nativeElement() это специфичный для браузера API, который возвращает или предоставляет доступ к дереву DOM. Но что делать, если приложение работает на не-браузерной платформе (например, сервер или веб-рабочий), в этом случае .nativeElement() может выдать ошибку.

Если мы уверены, что наше приложение будет работать только в браузере, то без колебаний мы можем использовать let el = fixture.nativeElement. Но если мы ... не уверены насчет платформы тогда быть на более безопасной стороне используйте let le = fixture.debugElement, потому что он возвращает простой объект JS.