Test Angular2: Quelle est la différence entre un objet DebugElement et un objet NativeElement dans un ComponentFixture?

Question

Je suis actuellement à mettre sur pied des pratiques exemplaires pour les essais Angulaire 2 apps sur un niveau du composant.

J'ai vu quelques tutos requête d'un appareil de NativeElement objet de sélecteurs et de la comme, par exemple,

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

Cependant, dans juliemr Angulaire de l'2 test de la graine , elle accède à la NativeElement par l'intermédiaire d'un parent DebugElement objet.

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

Existe-il des cas spécifiques que vous souhaitez utiliser un appareil de debugElement.nativeElement sur son nativeElement?

Answer 1

• nativeElement renvoie une référence à l'élément DOM
• DebugElement est une classe Angular2 qui contient toutes sortes de références et de méthodes pertinentes pour étudier un élément ou un composant (voir la source de DebugNode et DebugElement

Answer 2

ajouter à ce qui a déjà été mentionné:

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

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

Answer 3

Jetez un coup d’œil à la discussion angulaire sur ce sujet et les relations publiques qui s’y rapportent.

Principalement:

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

Answer 4

.nativeElement() retours arborescence DOM alors qu' debugElement renvoie un objet JS (debugElement de l'arbre). debugElement est un Angulaire de la méthode.

.nativeElement() Navigateur API spécifique qui renvoie ou donner accès à l'arborescence DOM. Mais que faire si l'application est en cours d'exécution sur la non-navigateur plate-forme (comme serveur web ou de travail), dans ce cas .nativeElement() peut jeter l'erreur.

Si nous sommes sûrs que notre application s'exécute sur le navigateur, puis unhesitantly on peut utiliser let el = fixture.nativeElement. Mais si nous n'êtes pas sûr au sujet de la plate-forme, puis à être sur le côté plus sûr d'utiliser let le = fixture.debugElement parce qu'elle renvoie à une plaine JS Objet.