Testez votre unité

ci-dessous:

<!-- load your test files here -->

Une fois que vous avez ajouté le script, vous pouvez ensuite charger la page du runner de test dans votre navigateur de choix.

Les résultats du test

Lorsque vous exécutez vos tests, les résultats des tests ressembleront à ceci:

Notez que ce que nous avons entré dans la description et ses fonctions apparaissent dans la sortie - les tests sont regroupés sous la description. Notez qu'il est également possible de décrire des blocs pour créer d'autres sous-groupes.

Voyons à quoi ressemble un test d'échec.

sur la ligne du test qui dit:

assert.equal(arr.length, 0);

Remplacez le numéro 0 par 1. Cela fait échouer le test, car la longueur du tableau ne correspond plus à la valeur attendue.

Si vous exécutez à nouveau les tests, vous verrez le test d'échec en rouge avec une description de ce qui n'a pas fonctionné.

L'un des avantages des tests est qu'ils vous aident à trouver des bugs plus rapidement, mais cette erreur n'est pas très utile à cet égard. Nous pouvons cependant le réparer.

La plupart des fonctions d'assertion peuvent également prendre un paramètre de message facultatif. Il s'agit du message qui s'affiche lorsque l'affirmation échoue. C'est une bonne idée d'utiliser ce paramètre pour rendre le message d'erreur plus facile à comprendre.

Nous pouvons ajouter un message à notre affirmation comme SO:

assert.equal(arr.length, 1, 'Array length was not 0');

Si vous réévaluez les tests, le message personnalisé apparaîtra au lieu de la valeur par défaut.

Refléchissons l'affirmation à la façon dont elle était - remplacez 1 par 0 et passons à nouveau les tests pour vous assurer qu'ils passent.

le rassembler

Jusqu'à présent, nous avons examiné des exemples assez simples. Mettons ce que nous avons appris en pratique et voyons comment testerions un morceau de code plus réaliste.

Voici une fonction qui ajoute une classe CSS à un élément. Cela devrait aller dans un nouveau fichier js / classname.js.

function addClass(el, newClass) {
  if(el.className.indexOf(newClass) === -1) {
    el.className += newClass;
  }
}

Pour le rendre un peu plus intéressant, je l'ai fait ajouter une nouvelle classe uniquement lorsque cette classe n'existe pas dans la propriété de la classe d'un élément - qui veut voir après tout?

Dans le meilleur cas, nous rédigerions des tests pour cette fonction Avant nous écrivons le code. Mais le développement axé sur les tests est un sujet complexe, et pour l'instant nous voulons juste nous concentrer sur les tests d'écriture.

Pour commencer, rappelons l'idée de base derrière les tests unitaires: nous donnons à la fonction certaines entrées, puis vérifions que la fonction se comporte comme prévu. Alors, quelles sont les entrées et les comportements de cette fonction?

étant donné un élément et un nom de classe:

• Si la propriété ClassName de l'élément ne contient pas le nom de classe, il doit être ajouté.
• Si la propriété ClassName de l'élément contient le nom de classe, il ne doit pas être ajouté.

traduisons ces cas en deux tests. Dans le répertoire de test, créez un nouveau fichier classNameTest.js et ajoutez ce qui suit:

<!-- load your test files here -->

Nous avons légèrement changé le libellé en la forme «Il doit faire x» utilisé avec les tests. Cela signifie qu'il se lit un peu plus agréable, mais est essentiellement la même forme lisible par l'homme que nous avons énumérée ci-dessus. Ce n'est généralement pas beaucoup plus difficile que cela de passer d'une idée à l'autre.

Mais attendez, où sont les fonctions de test? Eh bien, lorsque nous omettons le deuxième paramètre, Mocha marque ces tests comme en attente dans les résultats du test. C'est un moyen pratique de mettre en place un certain nombre de tests - un peu comme une liste de togne de ce que vous avez l'intention d'écrire.

Continuons en implémentant le premier test.

assert.equal(arr.length, 0);

Dans ce test, nous créons une variable d'élément et la passons en tant que paramètre à la fonction AddClass, ainsi qu'une classe de test de chaîne (la nouvelle classe à ajouter). Ensuite, nous vérifions que la classe est incluse dans la valeur à l'aide d'une affirmation.

Encore une fois, nous sommes passés de notre idée initiale - étant donné un élément et un nom de classe, il doit être ajouté dans la liste des classes - et l'avons traduit en code de manière assez simple.

Bien que cette fonction soit conçue pour fonctionner avec les éléments DOM, nous utilisons ici un objet JS simple. Parfois, nous pouvons utiliser la nature dynamique de JavaScript de cette manière pour simplifier nos tests. Si nous ne faisions pas cela, nous aurions besoin de créer un élément réel et cela compliquerait notre code de test. Comme avantage supplémentaire, comme nous n'utilisons pas DOM, nous pouvons également exécuter ce test dans Node.js si nous le souhaitons.

exécuter les tests dans le navigateur

Pour exécuter le test dans le navigateur, vous devrez ajouter classname.js et classNameTest.js au coureur:

assert.equal(arr.length, 1, 'Array length was not 0');

Vous devriez maintenant voir un passage de test et un autre test apparaît en attente, comme le montre le codePEN suivant. Notez que le code diffère légèrement de l'exemple afin de faire fonctionner le code dans l'environnement Codepen.

Voir les tests d'unité Pen avec Mocha (1) par SitePoint (@SitePoint) sur Codepen.

Ensuite, implémentons le deuxième test…

function addClass(el, newClass) {
  if(el.className.indexOf(newClass) === -1) {
    el.className += newClass;
  }
}

C'est une bonne habitude d'exécuter souvent vos tests, alors vérifions ce qui se passe si nous exécutons les tests maintenant. Comme prévu, ils devraient passer.

voici un autre codepen avec le deuxième test implémenté.

Voir les tests d'unité Pen avec Mocha (2) par SitePoint (@SitePoint) sur Codepen.

Mais accrochez-vous! En fait, je vous ai un peu trompé. Il y a un troisième comportement pour cette fonction que nous n'avons pas envisagée. Il y a aussi un bogue dans la fonction - un assez sérieux. Ce n'est qu'une fonction à trois lignes mais l'avez-vous remarqué?

écrivons un autre test pour le troisième comportement qui expose le bug en bonus.

<!-- load your test files here -->

Cette fois, le test échoue. Vous pouvez le voir en action dans le codep suivant. Le problème ici est simple: les noms de classe CSS dans les éléments doivent être séparés par un espace. Cependant, notre implémentation actuelle d'addClass n'ajoute pas d'espace!

Voir les tests d'unité Pen avec Mocha (3) par SitePoint (@SitePoint) sur Codepen.

Fixons la fonction et faisons passer le test.

assert.equal(arr.length, 0);

et voici un code de code final avec la fonction fixe et les tests de passage.

Voir les tests d'unité Pen avec Mocha (4) par SitePoint (@SitePoint) sur Codepen.

exécuter les tests sur le nœud

Dans le nœud, les choses ne sont visibles que d'autres choses dans le même fichier. Comme classname.js et classNameTest.js sont dans différents fichiers, nous devons trouver un moyen d'exposer l'un à l'autre. La façon standard de le faire consiste à utiliser module.exports. Si vous avez besoin d'un rafraîchissement, vous pouvez tout lire à ce sujet ici: Comprendre le module.exports et les exportations dans Node.js

Le code reste essentiellement le même, mais est structuré légèrement différemment:

assert.equal(arr.length, 1, 'Array length was not 0');

function addClass(el, newClass) {
  if(el.className.indexOf(newClass) === -1) {
    el.className += newClass;
  }
}

Et comme vous pouvez le voir, les tests passent.

Quelle est la prochaine étape?

Comme vous pouvez le voir, les tests ne doivent pas être compliqués ou difficiles. Tout comme avec d'autres aspects de la rédaction d'applications JavaScript, vous avez des modèles de base qui se répètent. Une fois que vous vous êtes familiarisé avec ceux-ci, vous pouvez continuer à les utiliser encore et encore.

Mais cela ne fait que gratter la surface. Il y a beaucoup plus à apprendre sur les tests unitaires.

• tester des systèmes plus complexes
• Comment gérer l'Ajax, les bases de données et autres choses «externes»?
• Développement axé sur les tests

Si vous souhaitez continuer à apprendre ceci et plus encore, j'ai créé une série de QuickStart d'unité JavaScript gratuite. Si vous avez trouvé cet article utile, vous devriez certainement le vérifier ici.

Alternativement, si la vidéo est plus votre style, vous pourriez être intéressé par le cours de SitePoint Premium: développement axé sur le test dans Node.js.

Des questions fréquemment posées sur les tests unitaires JavaScript avec Mocha et Chai

Comment installer Mocha et Chai pour les tests unitaires en javascript?

Pour installer Mocha et Chai, vous devez faire installer Node.js et NPM sur votre système. Une fois que vous en avez, vous pouvez installer Mocha et Chai à l'aide de NPM. Ouvrez votre terminal et accédez à votre répertoire de projet. Ensuite, exécutez les commandes suivantes:

Installer NPM - Save-Dev Mocha Chai

Cette commande installe Mocha et Chai en tant que DevDependces pour votre projet. L'indicateur --Save-Dev est utilisé pour les ajouter comme dépendances de développement dans votre fichier package.json.

Comment rédiger un test de base à l'aide de Mocha et Chai?

Rédaction d'un test de base Avec Mocha et Chai, implique la création d'un fichier de test et la rédaction de vos cas de test. Voici un exemple simple:

var attendre = require ('chai'). nombre de charachters dans une chaîne ', function () {
attendre (' hello '). to.have.lengthof (5);
});
});

dans Cet exemple, décrire est une suite de tests qui regroupe les tests liés, et c'est un cas de test. La fonction attendue de Chai est utilisée pour affirmer la sortie attendue.

Comment puis-je exécuter mes tests Mocha?

Pour exécuter vos tests Mocha, accéder à votre répertoire de projet dans le terminal et exécuter le Commande suivante:

./ node_modules / .bin / mocha

Cette commande exécute le binaire Mocha installé dans votre dossier node_modules. Si vous souhaitez exécuter cette commande simplement en tant que mocha, vous pouvez installer Mocha à l'échelle mondiale à l'aide de NPM Install -g Mocha.

Quels sont les différents styles d'affirmation disponibles dans chai?

chai fournit trois assertions différentes Styles - devraient, attendre et affirmer. Le style devrait étendre chaque objet avec une propriété devrait démarrer votre chaîne. Le style attendu offre une approche plus traditionnelle basée sur les fonctions. Le style Assert fournit un moyen classique et simple d'écrire des affirmations.

Comment puis-je tester du code asynchrone avec Mocha et Chai?

Mocha et Chai fournissent plusieurs façons de tester du code asynchrone. Vous pouvez utiliser des rappels, des promesses ou des asynchrones / attend. Voici un exemple en utilisant Async / Await:

it ('Async Test', Fonction async () {

const Resultime = Await MyasyncFunction ();
attendre (résultat) .to.equal (attendResult );
});

Dans cet exemple, MyasyncFunction est une fonction asynchrone qui renvoie une promesse. Le mot-clé Await est utilisé pour attendre que la promesse se résout avant de continuer avec le test.

Comment puis-je utiliser des crochets dans Mocha?

Mocha fournit des crochets comme avant, après, avant l'enseignement et après que vous puissiez utiliser pour configurer des conditions préalables et nettoyer après vos tests. Voici un exemple:

décrire ('hooks', function () {
avant (fonction () {
// s'exécute une fois avant le premier test de ce bloc
});

after (function () {
// s'exécute une fois après le dernier test de ce bloc
});

avant l'enseigne Chaque test de ce bloc
});

aftereach (function () {
// s'exécute après chaque test de ce bloc
});
});

Comment puis-je tester des exceptions avec chai?

chai fournit l'affirmation de lancer pour tester des exceptions. Voici un exemple:

it ('lance une erreur', function () {
attendre (function () {lance une nouvelle erreur ('mauvaise valeur');}). To.Throw ('mal Valeur ');
});

Dans cet exemple, la fonction passée pour s'attendre à des lancers une erreur. L'affirmation de Throw est utilisée pour affirmer que la fonction lance une erreur avec le message «mauvaise valeur».

Comment puis-je utiliser des espions, des talons et des maquettes avec mocha et chai?

à utiliser Des espions, des talons et des simulations avec Mocha et Chai, vous pouvez utiliser une bibliothèque comme Sinon.js. Sinon.js peut être facilement intégré à Mocha et Chai pour fournir ces fonctionnalités.

Comment puis-je générer des rapports de test avec Mocha?

Mocha prend en charge plusieurs journalistes hors de la boîte, y compris les spec, Dot, Dot, DOT , Nyan, et plus encore. Vous pouvez spécifier le journaliste à utiliser avec l'option --Reporter lors de l'exécution de vos tests. Par exemple, Mocha --Reporter Nyan.

Comment puis-je rendre mes tests plus lisibles avec Chai?

Chai fournit un langage chaînable pour construire vos affirmations, ce qui rend vos tests plus lisibles. Par exemple, au lieu d'écrire attendre (myvar) .to.be.true;, vous pouvez écrire attendre (myvar) .to.be.true;. Cela rend vos tests plus naturels et plus faciles à comprendre.

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!