각도 2 테스트:ComponentFix에서 DebugElement와 NativeElement 개체의 차이점은 무엇입니까?

각도 2 테스트:ComponentFix에서 DebugElement와 NativeElement 개체의 차이점은 무엇입니까?

저는 현재 구성요소 수준에서 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!');
    });
}));

그러나 Juliemr의 Angular 2 테스트 시드에서는 상위 DebugElement 개체를 통해 NativeElement에 액세스합니다.

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

네이티브Element보다 fixture의 debugElement.nativeElement를 사용하는 특정 사례가 있습니까?

• nativeElementDOM 요소에 대한 참조를 반환합니다.
• DebugElementAngular2 클래스는 요소 또는 구성 요소를 조사하는 데 관련된 모든 종류의 참조 및 메서드를 포함합니다(DebugNode 및 DebugElement 소스 참조).

이미 언급된 내용에 추가합니다.

  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

이 주제와 관련 PR에 대한 Angular 토론을 살펴보십시오.

주로:

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

.nativeElement()DOM 트리를 반환하는 반면debugElementJS 개체(debugElement 트리)를 반환합니다.debugElementAngular's 메서드입니다.

.nativeElement()DOM 트리를 반환하거나 DOM 트리에 대한 액세스를 제공하는 브라우저 관련 API입니다.그러나 애플리케이션이 비브라우저 플랫폼(예: 서버 또는 웹 워커)에서 실행되고 있는 경우에는 어떻게 됩니까?.nativeElement()오류가 발생할 수 있습니다.

만약 우리의 애플리케이션이 브라우저에서만 실행될 것이라고 확신한다면, 우리는 주저 없이 사용할 수 있습니다.let el = fixture.nativeElement하지만 플랫폼에 대해 확신이 없다면 안전한 사이드 사용을 해야 합니다.let le = fixture.debugElement일반 JS 개체를 반환하기 때문입니다.

언급URL : https://stackoverflow.com/questions/37705599/angular2-testing-whats-the-difference-between-a-debugelement-and-a-nativeeleme