web-dev-qa-db-fra.com

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

Je suis en train de mettre en place certaines meilleures pratiques pour tester Angular 2 applications sur un niveau de composant.

J'ai vu quelques tutoriels interroger l'objet NativeElement d'un appareil pour des sélecteurs, etc., 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's Angular 2 graine de test elle accède à NativeElement via un objet parent 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!');
    });
}));

Existe-t-il des cas spécifiques où vous utiliseriez debugElement.nativeElement d'un appareil sur son élément nativeElement?

javascriptunit-testingdomangularjasmine
55
dgkane
  • 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 utiles pour étudier un élément ou un composant (voir source de DebugNode et DebugElement
44
Günter Zöchbauer

pour 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#L31

22
candidJ

Regardez Discussion angulaire sur ce sujet et connexe PR .

Principalement:

fixture.componentInstance == fixture.debugElement.componentInstance;
fixture.nativeElement == fixture.debugElement.nativeElement;
9
Wojciech Kwiatek

.nativeElement() renvoie une arborescence DOM alors que debugElement renvoie un objet JS (arborescence debugElement). debugElement est une méthode angulaire.

.nativeElement() est une API spécifique au navigateur qui renvoie ou donne accès à l'arborescence DOM. Mais que se passe-t-il si l'application est exécutée sur une plate-forme autre que le navigateur (tel qu'un serveur ou un travailleur Web), dans ce cas, .nativeElement() peut renvoyer une erreur.

Si nous sommes sûrs que notre application ne fonctionnera que sur votre navigateur, alors nous pourrons utiliser let el = fixture.nativeElement. Mais si nous ne sommes pas sûrs de la plate-forme, il faut être plus sûr. let le = fixture.debugElement car il retourne un objet JS simple.

3
Abhishek