Conseils de test AngularJS: directives de test

Points clés

• Les instructions dans AngularJS sont essentielles pour les opérations DOM et ne peuvent pas être ignorées dans les tests unitaires car elles affectent considérablement la disponibilité de votre application.
• Les tests d'instructions consistent à configurer un environnement de test où les instructions sont compilées manuellement et se moquent des objets et des services nécessaires pour isoler les fonctions des instructions.
La fonction
• dans la directive link est responsable des implémentations de la logique de base, telles que les opérations DOM et la gestion des événements, et doit être testée en profondeur à l'aide de l'utilitaire de test d'AngularJS.
• simplifie le processus de test en intégrant le modèle utilisé par l'instruction dans $templateCache lors des tests.
• Lors du test des instructions qui sont isolées dans la portée, en s'assurant que les propriétés de la portée sont correctement liées et exécutées comme prévu, ce qui est crucial pour la fonctionnalité prévue de la directive dans l'application.

Les tests unitaires font partie intégrante du développement de logiciels et contribuent à réduire les erreurs de code. Les tests sont l'une des nombreuses tâches pour améliorer la qualité du code. AngularJS est créé avec une testabilité à l'esprit, de sorte que tout code écrit en haut du cadre peut être facilement testé. Dans mon dernier article sur les tests, j'ai couvert les contrôleurs de test unitaires, les services et les fournisseurs. Cet article continue de discuter des tests d'instructions. Les directives sont différentes des autres composants car elles ne sont pas utilisées comme objets dans le code JavaScript, mais dans les modèles HTML des applications. Nous écrivons des instructions pour effectuer des opérations DOM et nous ne pouvons pas les ignorer dans les tests unitaires car ils jouent un rôle important. De plus, ils affectent directement la disponibilité de la demande. Je vous suggère de consulter des articles précédents sur les dépendances moqueuses dans les tests AngularJS, car nous utiliserons certaines des techniques de cet article dans cet article. Si vous souhaitez essayer le code développé dans ce tutoriel, vous pouvez consulter le référentiel GitHub que je configure pour vous.

Test d'instructions

Les directives

sont les composants les plus importants et les plus complexes de l'AngularJS. Les tests directifs sont difficiles car ils ne sont pas appelés comme des fonctions. Dans une demande, les directives sont appliquées de manière déclarative sur les modèles HTML. Lorsque les modèles sont compilés et que l'utilisateur interagit avec les instructions, leurs actions sont exécutées. Lorsque vous effectuez des tests unitaires, nous devons automatiser les opérations utilisateur et compiler manuellement HTML pour tester les fonctionnalités de la directive.

Définissez l'objet de la commande de test

Comme tester n'importe quelle langue ou utiliser n'importe quel extrait logique dans n'importe quel cadre, nous devons obtenir une référence à l'objet requis avant de commencer la directive de test. L'objet clé à créer ici est un élément contenant la directive à tester. Nous devons compiler un fragment HTML avec des directives spécifiées pour que la directive prenne effet. Par exemple, considérez la directive suivante:

angular.module('sampleDirectives', []).directive('firstDirective', function() {
  return function(scope, elem){
    elem.append('This span is appended from directive.');
  };
});

Le cycle de vie de la directive

commencera et les fonctions de compilation et de liaison seront exécutées. Nous pouvons compiler manuellement n'importe quel modèle HTML à l'aide du service $compile. Le bloc beforeEach suivant compile les instructions ci-dessus:

angular.module('sampleDirectives', []).directive('firstDirective', function() {
  return function(scope, elem){
    elem.append('This span is appended from directive.');
  };
});

Après la compilation, le cycle de vie de l'instruction commencera. Après le prochain cycle de digest, l'objet directif sera dans le même état qu'il apparaît sur la page. Si la directive dépend de tout service pour implémenter sa fonctionnalité, les services doivent être usurpés avant de compiler les directives afin que les appels vers n'importe quelle méthode de service puissent être vérifiés dans le test. Nous verrons un exemple dans la section suivante.

Fonction de liaison de test

Les fonctions

link sont les propriétés les plus couramment utilisées dans les objets de définition directive (DDOS). Il contient la majeure partie de la logique de base de l'instruction. Cette logique comprend des opérations DOM simples, écouter des événements de publication / d'abonnement, de surveillance des modifications des objets ou des attributs, des services d'appel, des événements d'interface utilisateur, etc. Nous essaierons de couvrir la plupart de ces scénarios.

DOM Operation

Commençons par le cas de la directive définie dans la section précédente. Cette directive ajoute un élément de portée au contenu de l'élément qui applique la directive. Il peut être testé en recherchant une portée à l'intérieur de la directive. Le cas de test suivant affirme ce comportement:

var compile, scope, directiveElem;

beforeEach(function(){
  module('sampleDirectives');

  inject(function($compile, $rootScope){
    compile = $compile;
    scope = $rootScope.$new();
  });

  directiveElem = getCompiledElement();
});

function getCompiledElement(){
  var element = angular.element('<div first-directive=""></div>');
  var compiledElement = compile(element)(scope);
  scope.$digest();
  return compiledElement;
}

Observer

Étant donné que les instructions agissent sur l'état actuel de la portée, ils devraient avoir des observateurs pour mettre à jour les instructions lorsque l'état de la portée change. Le test unitaire de l'observateur doit manipuler les données et forcer l'observateur à s'exécuter en appelant $digest, et l'état de l'instruction doit être vérifié après le cycle de digestion. Le code suivant est une version légèrement modifiée de la directive ci-dessus. Il utilise des champs sur la portée pour lier le texte à l'intérieur de la portée:

it('should have span element', function () {
  var spanElement = directiveElem.find('span');
  expect(spanElement).toBeDefined();
  expect(spanElement.text()).toEqual('This span is appended from directive.');
});

Tester cette directive est similaire à la première directive; sauf qu'elle doit être vérifiée par rapport aux données sur la portée et doit être vérifiée pour les mises à jour. Les cas de test suivants vérifient si l'état de l'instruction a changé:

angular.module('sampleDirectives').directive('secondDirective', function(){
  return function(scope, elem){
    var spanElement = angular.element('' + scope.text + '');
    elem.append(spanElement);

    scope.$watch('text', function(newVal, oldVal){
      spanElement.text(newVal);
    });
  };
});

La même technique peut également être utilisée pour les observateurs sur les propriétés de test.

(Le contenu ultérieur sera simplifié et résumé en raison des limitations de l'espace, et les méthodes et idées de test de base seront conservées)

DOM Event Vous pouvez utiliser JQlite's triggerHandler pour simuler les événements de clic et vérifier les résultats.

Test de modèle d'instruction Test Modèles de précharge avec $templateCache pour simplifier les tests.

Test de portée de la directive Vérifier la liaison de la propriété et les appels de méthode pour les lunettes d'isolement.

nécessitent un test Vérifier les dépendances directives, y compris les dépendances strictes et facultatives.

Remplacez le test Vérifiez si l'élément d'instruction est remplacé.

transcluder le test Vérifiez que la directive gère correctement le contenu traduit.

Résumé

Comme le montre cet article, les instructions sont plus difficiles à tester que les autres concepts dans AngularJS. Dans le même temps, ils ne peuvent pas être ignorés car ils contrôlent certaines parties importantes de l'application. L'écosystème de test d'AngularJS nous permet de tester plus facilement une partie du projet. J'espère que grâce à ce tutoriel, vous serez désormais plus confiant dans le test des instructions. Veuillez me faire savoir ce que vous pensez dans la section des commentaires. Si vous souhaitez essayer le code développé dans ce tutoriel, vous pouvez consulter le référentiel GitHub que je configure pour vous.

(La partie FAQ est omise ici en raison de la durée de l'article. Le contenu de base a été couvert ci-dessus.)

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!