Test de directive d'attribut

Une directive d'attribut modifie le comportement d'un élément, d'un composant ou d'une autre directive. Son nom reflète la manière dont la directive est appliquée: en tant qu'attribut sur un élément hôte.

L'exemple d'application HighlightDirective définit la couleur d'arrière-plan d'un élément en fonction d'une couleur liée aux données ou d'une couleur par défaut (lightgray). Il définit également une propriété personnalisée de element (customProperty) sur true pour aucune autre raison que celle de montrer qu'elle le peut.

app / shared / highlight.directive.ts

Il est utilisé dans toute l'application, peut-être plus simplement dans les AboutComponent :

app / about / about.component.ts

Tester l'utilisation spécifique de la HighlightDirective dans AboutComponent nécessite uniquement les techniques explorées ci-dessus (en particulier l'approche du "test superficiel" ).

app / about / about.component.spec.ts

Toutefois, il est peu probable que le test d'un cas d'utilisation unique explore toute la gamme des capacités d'une directive. Trouver et tester tous les composants qui utilisent la directive est fastidieux, fragile et il est presque aussi improbable qu'il offre une couverture complète.

Les tests de classe uniquement peuvent être utiles, mais les directives d'attribut comme celle-ci ont tendance à manipuler le DOM. Les tests unitaires isolés ne touchent pas le DOM et n'inspirent donc pas confiance dans l'efficacité de la directive.

Une meilleure solution consiste à créer un composant de test artificiel qui montre toutes les manières d'appliquer la directive.

app / shared / highlight.directive.spec.ts (TestComponent)




Voici quelques tests de ce composant:

app / shared / highlight.directive.spec.ts (tests sélectionnés)

Quelques techniques sont à noter:

• Le prédicat By.directive est un excellent moyen d'obtenir les éléments dotés de cette directive lorsque leurs types d'élément sont inconnus.
• La pseudo-classe :not dans By.css('h2:not([highlight])') aide à trouver des éléments ‹h2› qui n'ont pas la directive. By.css('*:not([highlight])') trouve n'importe quel élément qui n'a pas la directive.
• DebugElement.styles permet d'accéder aux styles d'élément même en l'absence d'un vrai navigateur, grâce à l'abstraction DebugElement. Mais n'hésitez pas à exploiter le nativeElement quand cela semble plus facile ou plus clair que l'abstraction.
• Angular ajoute une directive à l'injecteur de l'élément auquel elle est appliquée. Le test de la couleur par défaut utilise l'injecteur de la seconde ‹h2› pour obtenir son instance HighlightDirective et son defaultColor.
• DebugElement.properties permet d'accéder à la propriété personnalisée artificielle définie par la directive.