Test Angular2: Qual è la differenza tra un oggetto DebugElement e un oggetto NativeElement in ComponentFixture?

Question

Attualmente sto mettendo insieme alcune best practice per testare le app Angular 2 a livello di componente.

Ho visto alcuni tutorial interrogare l'oggetto NativeElement di un dispositivo per i selettori e simili, ad es.

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

Tuttavia, in juliemr's Angular 2 test seed si accede al NativeElement attraverso un oggetto padre 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!'); 
 
    }); 
 
}));

Ci sono casi specifici usereste debugElement.nativeElement di un appuntamento fisso sulla sua nativeElement?

Answer 1

• nativeElement restituisce un riferimento all'elemento DOM
• DebugElement è una classe Angular2 che contiene tutti i tipi di riferimenti e metodi rilevanti per indagare su un elemento o un componente (Vedere la source of DebugNode and DebugElement

Answer 2

Dai uno sguardo allo Angular discussion about this topic e al relativo PR.

Principalmente:

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

Answer 3

da aggiungere a quanto già menzionato:

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

fonte: https://github.com/angular/angular/blob/a7e9bc97f6a19a2b47b962bd021cb91346a44baa/modules/angular2/src/testing/test_component_builder.ts#L31