web-dev-qa-db-fra.com

Angular 2 tests d'attributs nativeElement dans le composant d'application

Je travaille sur une application Angular 2 qui, pour des raisons de compatibilité avec le code hérité, doit obtenir des informations via les attributs utilisés dans le composant d'application. Par exemple, le code HTML qui lance l'application angulaire 2 ressemblerait à ceci:

<myApp id="xyz" areaDone="true" value="" requestID="abc"> Loading ... </myApp>

Cependant, lorsque j'essaie d'écrire des tests unitaires autour du comportement supposé se produire en fonction de la présence et de la valeur de ces attributs, ils sont nuls/indéfinis.

Pour obtenir les valeurs, nous les tirons simplement dans le constructeur de la manière suivante:

        let native = this.elementRef.nativeElement;
        this.requestID= native.getAttribute("requestID");

Alors, existe-t-il un moyen à travers le banc d'essai/les fournisseurs de forcer un élément natif qui devrait avoir les attributs attendus?

angularkarma-jasmine
5
jspriggs

Vous pouvez appeler this.elementRef.nativeElement.attribute et cela renverra un NamedNodeMap ( http://www.w3schools.com/jsref/prop_node_attributes.asp ) de vos attributs.

La syntaxe pour obtenir des contenus de NamedNodeMaps n'est pas terrible, c'est moi qui récupère les attributs x1 d'un objet d3 dans l'un de mes tests

const nodeAttributes = compiled.querySelector('#temp-draggable-link-line').attributes as NamedNodeMap;
expect(nodeAttributes.getNamedItem('x1').value).toEqual(200);
5
Ben Hernandez

Vous pouvez utiliser la syntaxe suivante pour obtenir la valeur d'attribut d'un élément html

// pour récupérer un élément HTML

const element = fixture.debugElement.nativeElement.querySelector('name of element'); // example a, h1, p

// obtient la valeur d'attribut de cet élément

  const attributeValue = element.attributeName // like textContent/href
1
Vijay Barot