Un guide pour débutant pour tester JavaScript fonctionnel

Points clés

• La combinaison de la programmation et des tests fonctionnels peut écrire plus clair et plus facile à maintenir le code. La programmation fonctionnelle permet un traitement indépendant du comportement et des données dans une application, ce qui entraîne un code plus clair et plus cohérent.
• Les tests visent à garantir que le code s'exécute comme prévu et continue de s'exécuter comme prévu même après que le code change. Différents types de tests incluent les tests unitaires, les tests d'intégration et les tests fonctionnels.
• Le développement basé sur les tests (TDD) est une pratique de la rédaction de tests unitaires avant d'écrire la fonction testée. Cela encourage la rupture des fonctionnalités de l'application et la détermination des résultats attendus avant d'écrire du code.
• Les fonctions pures ne dépendent pas des états ou des variables externes, n'ont aucun effet secondaire et renvoient toujours le même résultat pour la même entrée, qui est la base de la programmation fonctionnelle. Ils facilitent les tests unitaires et assurent la confiance du futur refactorisation de code.
• Jasmine est un puissant cadre de test qui peut être utilisé pour tester JavaScript fonctionnel. Il peut être utilisé pour développer des fonctions pures dans un navigateur à l'aide de méthodes axées sur le test. La pratique de la rédaction du code axé sur les tests peut encourager la création de fonctions pures en raison de sa facilité de test et de modification.

Programmation et test fonctionnels. Vous les avez peut-être essayés séparément, mais vous n'avez jamais incorporé à la fois dans votre pratique régulière. Ils peuvent sembler simples seuls, mais les tests et la programmation fonctionnelle peuvent créer une tentation irrésistible qui vous oblige presque à écrire un code plus clair, plus compact et plus maintenable.

La bonne nouvelle est que l'utilisation des deux technologies offre simultanément certains avantages pratiques. En fait, une fois que vous avez vécu la douceur de cette combinaison, vous pouvez en être accro à moi comme moi, et je parie que vous en voudrez plus.

Regardez le cours "Écriture Clear Pure Code Suivez les principes JavaScript fonctionnels" pour décomposer votre code et faciliter le maintien ... pourquoi pas? Regardez ce cours dans cet article, je vous présenterai les principes du test JavaScript fonctionnel. Je vais vous montrer comment utiliser le cadre du jasmin et créer des fonctions pures à l'aide de méthodes axées sur le test.

Pourquoi le tester?

Les tests visent à s'assurer que le code de l'application s'exécute comme prévu et continue de fonctionner comme prévu lorsque vous apportez des modifications afin d'obtenir les produits disponibles lorsque vous terminez votre travail. Vous écrivez un test qui définit les fonctionnalités attendues dans un ensemble défini de situations, exécutez le test par rapport au code, et vous recevrez un avertissement si le résultat ne correspond pas à ce que le test dit. Et vous continuez à obtenir cet avertissement jusqu'à ce que vous corrigez le code.

Ensuite, vous obtiendrez une récompense.

Oui, cela vous fera vous sentir bien.

Il existe de nombreux types de tests, et il y a beaucoup de place pour la discussion sur les limites de la division, mais en bref:

• Tests unitaires pour vérifier les fonctionnalités de l'isolement du code
• Le test d'intégration valide l'interaction entre le flux de données et les composants
• Les tests fonctionnels affichent le comportement de l'application entière

Remarque: Ne vous laissez pas distraire par un type de test appelé test fonctionnel. Ce n'est pas ce sur quoi nous voulons nous concentrer dans cet article sur le test du JavaScript fonctionnel. En fait, que vous utilisiez ou non des techniques de programmation fonctionnelle en JavaScript, les méthodes de test fonctionnel que vous utilisez pour tester le comportement global de votre application peuvent ne pas changer beaucoup. Ce qui aide vraiment à la programmation fonctionnelle, c'est lors de la construction de tests unitaires.

Vous pouvez écrire des tests à tout moment pendant le processus de codage, mais je trouve toujours le plus efficace d'écrire des tests unitaires avant d'écrire des fonctions qui prévoient de tester. Cette pratique, connue sous le nom de développement axé sur les tests (TDD), vous encourage à décomposer les fonctionnalités de votre application avant de commencer à écrire et de déterminer les résultats que vous voulez de chaque partie de votre code, écrivez d'abord le test, puis écrivez le code pour produire ce résultat.

Un avantage secondaire est que TDD vous oblige souvent à avoir des discussions détaillées avec les personnes qui vous paient pour écrire des programmes pour vous assurer que le programme que vous écrivez est en effet celui qu'ils recherchent. Après tout, il est facile d'obtenir un seul test à passer. La difficulté est de déterminer s'il faut traiter toutes les entrées possibles que vous pouvez rencontrer et de traiter correctement toutes les entrées sans rien casser.

Pourquoi choisir la programmation fonctionnelle?

Comme vous pouvez l'imaginer, la façon dont vous écrivez votre code est étroitement liée à la difficulté de tester. Certains modèles de code, tels que le couplage étroitement du comportement d'une fonction à une autre, ou s'appuyant fortement sur les variables globales, rendent les tests unitaires du code plus difficiles. Parfois, vous devrez peut-être utiliser des techniques gênantes telles que «simuler» le comportement d'une base de données externe ou simuler un environnement d'exécution complexe afin d'établir des paramètres et des résultats testables. Ces cas ne sont pas toujours évitables, mais il est souvent possible d'isoler où ces cas sont nécessaires dans le code afin que le reste du code puisse être testé plus facilement.

La programmation fonctionnelle vous permet de gérer les données et le comportement de votre application indépendamment. Vous pouvez créer votre application en créant un ensemble distinct de fonctions qui fonctionnent indépendamment et ne dépendent pas de l'état externe. En conséquence, votre code devient un code presque auto-documenté, combinant de petites fonctions clairement définies qui se comportent constamment et faciles à comprendre.

La programmation fonctionnelle contraste généralement avec la programmation impérative et la programmation orientée objet. JavaScript peut prendre en charge toutes ces technologies et même les mélanger. La programmation fonctionnelle peut être une autre alternative précieuse à la création de séquences de code impératives qui suivent les états d'application jusqu'à ce que le résultat soit renvoyé. Ou créez votre application via des interactions à travers des objets complexes qui résument toutes les méthodes qui s'appliquent à une structure de données spécifique.

Comment travailler les fonctions pures

La programmation fonctionnelle vous encourage à créer votre application en utilisant des fonctions minuscules, réutilisables et composables qui ne font qu'une seule chose spécifique et renvoient la même valeur pour la même entrée à chaque fois. De telles fonctions sont appelées fonctions pures. Les fonctions pures sont la base de la programmation fonctionnelle, et elles ont toutes les trois caractéristiques suivantes:

• ne dépend pas des états ou des variables externes
• Aucun effet secondaire ou modification des variables externes
• Renvoie toujours le même résultat pour la même entrée

Un autre avantage de l'écriture de code fonctionnel est qu'il facilite les tests unitaires. Plus vous pouvez tester de code, plus il sera facile de s'appuyer sur votre capacité à refacter votre code à l'avenir sans casser la fonctionnalité de base.

Qu'est-ce qui rend le code fonctionnel facile à tester?

Si vous considérez le concept dont nous venons de discuter, vous pouvez déjà comprendre pourquoi le code fonctionnel est plus facile à tester. Les tests d'écriture pour les fonctions purs sont très simples car chaque entrée a une sortie cohérente. Vous avez simplement défini les valeurs attendues et les exécuter par rapport au code. Il n'est pas nécessaire d'établir un contexte, pas besoin de suivre les dépendances entre les fonctions, pas besoin de simuler l'état de changement en dehors de la fonction, ni de simuler la source de données externe des variables.

Il existe de nombreuses options de test, des frameworks complets aux bibliothèques de services publics et aux outils de test simples. Il s'agit notamment du jasmin, du moka, de l'enzyme, de la plaisanterie et de nombreux autres outils. Chaque outil a des avantages et des inconvénients différents, les meilleurs cas d'utilisation et un public fidèle. Le jasmin est un cadre puissant qui peut être utilisé dans une variété de situations, alors voici une démonstration rapide de la façon de développer des fonctions pures en utilisant le jasmin et le TDD dans votre navigateur.

Vous pouvez créer un document HTML qui extrait les bibliothèques de test de jasmin à partir de local ou de CDN. Un exemple de page contenant la bibliothèque de jasmin et le coureur de test peut ressembler à ceci:

<code class="language-html"><!DOCTYPE html>


    <meta charset="utf-8">
    <title>Jasmine Test</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jasmine/2.6.1/jasmine.min.css">


    
    
    

</code>

Cela présente la bibliothèque de jasmin, ainsi que les scripts et styles de démarrage HTML Jasmine. Dans ce cas, le corps du document est vide, attendant que votre JavaScript soit testé et vos tests de jasmin.

Test JavaScript fonctionnel - Notre premier test

Tout d'abord, écrivons le premier test. Nous pouvons le faire dans un document séparé ou en l'incluant dans l'élément <script></script> de la page. Nous utiliserons la fonction describe définie par la bibliothèque de jasmin pour décrire le comportement souhaité d'une nouvelle fonction que nous n'avons pas encore écrite.

La nouvelle fonction que nous écrivons sera appelée isPalindrome, et si la chaîne passée est la même avant et après, elle retournera true, sinon il retournera false. Le test ressemblera à ceci:

<code class="language-javascript">describe("isPalindrome", () => {
  it("returns true if the string is a palindrome", () => {
    expect(isPalindrome("abba")).toEqual(true);
  });
});</code>

Lorsque nous l'ajoutons au script dans la page et le chargez dans le navigateur, nous obtenons une page de rapport de jasmin fonctionnant affichant l'erreur. C'est ce que nous voulons en ce moment. Nous voulons savoir si le test est en cours d'exécution et s'il échoue. De cette façon, nos cerveaux qui sont désireux d'être reconnus savent que nous devons réparer quelque chose.

Alors écrivons une fonction simple dans JavaScript où il n'y a que suffisamment de logique pour faire passer nos tests. Dans ce cas, c'est juste une fonction qui fait passer l'un de nos tests en renvoyant la valeur attendue.

<code class="language-html"><!DOCTYPE html>


    <meta charset="utf-8">
    <title>Jasmine Test</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jasmine/2.6.1/jasmine.min.css">


    
    
    

</code>

Oui, vraiment. Je sais que ça a l'air ridicule, mais s'il vous plaît, respectez-le.

Lorsque vous exécutez à nouveau le programme de test, il passera. certainement. Mais évidemment, ce code simple ne répond pas à nos attentes pour le programme de test Palindrome. Ce dont nous avons besoin maintenant, c'est l'attente supplémentaire. Ajoutons donc une autre affirmation à notre fonction describe:

<code class="language-javascript">describe("isPalindrome", () => {
  it("returns true if the string is a palindrome", () => {
    expect(isPalindrome("abba")).toEqual(true);
  });
});</code>

Le rechargement de notre page provoque désormais un tour de sortie de la sortie de test. Nous avons reçu un message indiquant quel était le problème et le résultat du test est devenu rouge.

rouge!

Notre cerveau pense que quelque chose ne va pas.

Bien sûr, il y a un problème. Maintenant, notre fonction simple isPalindrome ne renvoie que true à chaque fois et s'est avérée incapable de cibler efficacement ce nouveau test. Mettons donc à jour isPalindrome et ajoutons la possibilité de comparer les fonctions avant et après la chaîne entrante.

<code class="language-javascript">const isPalindrome = (str) => true;</code>

Les tests sont addictifs

redevenir vert. C'est satisfaisant. Lorsque vous rechargez la page, obtenez-vous cette petite poussée de dopamine?

Avec ces changements, notre test passe à nouveau. Notre nouveau code compare efficacement les chaînes avant et après et les rendements true lorsque les chaînes avant et après sont les mêmes, sinon false.

Ce code est une fonction pure car elle ne fait qu'une seule chose et est systématiquement exécutée étant donné une valeur d'entrée cohérente sans aucun effet secondaire, modifiant des variables ou des dépendances en dehors de lui-même ou dans l'état de l'application. Chaque fois que vous passez une chaîne à cette fonction, elle se compare entre les chaînes avant et arrière et renvoie le résultat, peu importe quand ou comment il est appelé.

Vous pouvez voir à quel point cette cohérence fait la facilité des tests unitaires de cette fonction. En fait, la rédaction du code axé sur les tests peut vous encourager à écrire des fonctions pures car elles sont plus faciles à tester et à modifier.

et vous voulez obtenir la satisfaction de passer le test. Je sais que tu le feras.

Reconstruire la fonction pure

À ce stade, il est très simple d'ajouter d'autres fonctions (telles que la manipulation des entrées sans cordes, en ignorant les différences entre les lettres supérieures et minuscules, etc.). Demandez simplement au propriétaire du produit comment il souhaite que le programme fonctionne. Étant donné que nous avons déjà des tests pour vérifier que la chaîne sera traitée de manière cohérente, nous pouvons désormais ajouter une vérification des erreurs ou un casting de chaîne ou tout comportement que nous aimons aux valeurs non corrigées.

Par exemple, voyons ce qui se passe si nous ajoutons un test pour le numéro 1001, qui peut être interprété comme palindrome s'il s'agit d'une chaîne:

<code class="language-javascript">describe("isPalindrome", () => {
  it("returns true if the string is a palindrome", () => {
    expect(isPalindrome("abba")).toEqual(true);
  });
  it("returns false if the string isn't a palindrome", () => {
    expect(isPalindrome("Bubba")).toEqual(false);
  });
});</code>

Faire cela rendra notre écran rouge à nouveau et fera échouer le test car notre fonction actuelle isPalindrome ne sait pas comment gérer l'entrée non corporelle.

La panique a commencé. Nous voyons du rouge. Le test a échoué.

Mais maintenant, nous pouvons le mettre à jour en toute sécurité pour gérer les entrées non corrigées, les lancer aux chaînes, puis vérifier. Nous pourrions trouver une fonction qui ressemble plus à ceci:

<code class="language-html"><!DOCTYPE html>


    <meta charset="utf-8">
    <title>Jasmine Test</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jasmine/2.6.1/jasmine.min.css">


    
    
    

</code>

Maintenant que tous les tests sont passés, nous voyons une dopamine verte et douce se déverser dans notre cerveau axé sur les tests.

En ajoutant toString() à la chaîne d'évaluation, nous sommes en mesure de nous adapter à l'entrée non-corde et de le convertir en une chaîne avant les tests. Mieux encore, puisque nos autres tests sont exécutés à chaque fois, nous pouvons être sûrs qu'en ajoutant cette nouvelle fonctionnalité à nos fonctions pures, nous ne brisons pas les fonctionnalités que nous avons précédemment obtenues. Le résultat final est le suivant:

(Le code Codepen doit être inséré ici, mais comme je ne peux pas accéder au site Web externe, je ne peux pas fournir le lien Codepen.)

Essayez ce test et commencez à écrire vos propres tests, en utilisant Jasmine ou toute autre bibliothèque de tests qui fonctionne pour vous.

Une fois que vous avez intégré des tests dans votre flux de travail de conception de code et commencez à écrire des fonctions pures pour les tests unitaires, vous pouvez avoir du mal à revenir à votre vie passée. Mais vous ne voudrez jamais faire ça.

(Cet article a été évalué par des pairs par Vildan Softic. Merci à tous les pair de sitepoint pour avoir obtenu le contenu de sitepoint à son meilleur!)

FAQ sur les tests JavaScript fonctionnels (FAQ)

Qu'est-ce que les tests JavaScript fonctionnels?

Le test JavaScript fonctionnel est un test qui vérifie les fonctions de diverses parties du code (telles que les fonctions) pour s'assurer qu'elles fonctionnent comme prévu. Cela implique d'écrire des cas de test qui appellent les fonctions en utilisant différentes entrées et comparent la sortie aux résultats attendus. C'est une partie cruciale du développement de logiciels et aide à détecter les erreurs dans le processus de développement le plus tôt possible et assure la qualité et la fiabilité du code.

Comment rédiger des tests fonctionnels dans JavaScript?

Écrire des tests fonctionnels dans JavaScript implique la création d'un cas de test qui appelle la fonction à tester à l'aide d'une entrée spécifique, puis vérifie si la sortie correspond au résultat attendu. Cela peut être fait en utilisant divers cadres de test, tels que la plaisanterie, le moka ou le jasmin. Ces cadres fournissent des fonctions pour définir les cas de test, les exécuter et vérifier les résultats.

Quelle est la méthode de test regexp en javascript?

La méthode de test regexp dans JavaScript est un moyen de tester les correspondances dans une chaîne. Renvoie true si une correspondance est trouvée, sinon renvoie false. Cette méthode est particulièrement utile lorsque vous devez vérifier l'entrée de l'utilisateur ou rechercher des modèles dans les chaînes.

Comment utiliser la méthode de test regexp en JavaScript?

Pour utiliser la méthode de test regexp dans JavaScript, vous devez d'abord créer un objet regexp en utilisant le modèle que vous souhaitez correspondre. Vous appelez ensuite la méthode de test de cet objet, en passant la chaîne à tester en tant que paramètre. Si une correspondance est trouvée, la méthode renvoie true, sinon false.

Quelle est la différence entre les tests fonctionnels et les tests unitaires en JavaScript?

Les tests fonctionnels et les tests unitaires sont tous deux des composants importants du processus de test, mais leur objectif est différent. Les tests unitaires se concentrent sur l'isolement de diverses parties du code de test (telles que les fonctions ou les méthodes) et l'isolement du reste du système. Les tests fonctionnels, en revanche, testent les plus grands morceaux de fonctionnalités du système (tels que des modules ou des applications entières) pour s'assurer qu'ils fonctionnent comme prévu lorsqu'ils sont intégrés.

Comment améliorer les tests fonctionnels en JavaScript?

Améliorer les tests fonctionnels en JavaScript implique généralement de s'assurer que vos tests couvrent toutes les situations possibles, y compris des situations extrêmes et des conditions d'erreur potentielles. Il est également important de s'assurer que vos tests sont indépendants et peuvent être exécutés dans n'importe quel ordre, car cela les rend plus fiables et plus faciles à entretenir. L'utilisation d'un cadre de test peut également aider à créer des tests et à fournir des outils utiles pour vérifier les résultats et signaler les erreurs.

Quelles sont les bonnes pratiques pour les tests fonctionnels en JavaScript?

Certaines bonnes pratiques pour les tests fonctionnels dans JavaScript comprennent l'écriture de cas de test clairs et concis, les tests de scénarios positifs et négatifs et s'assurer que les tests sont indépendants et peuvent s'exécuter dans n'importe quel ordre. L'utilisation d'un cadre de test est également une bonne idée car elle fournit des outils et des structures utiles pour vos tests.

Comment déboguer les tests fonctionnels dans JavaScript?

Une variété d'outils et de techniques peuvent être utilisés pour déboguer les tests fonctionnels en JavaScript. Une méthode courante consiste à utiliser l'instruction console.log pour imprimer la valeur pendant l'exécution du test. Vous pouvez également utiliser des outils de débogage fournis par l'environnement de développement ou les cadres de test qui vous permettent de parcourir le code et de vérifier les variables à différents moments.

Quels sont les défis communs dans les tests fonctionnels en JavaScript?

Certains défis courants dans les tests fonctionnels dans JavaScript comprennent la gestion du code asynchrone, le test du code qui interagit avec les systèmes externes et la gestion de la complexité des grandes suites de test. Une variété de technologies et d'outils peuvent être utilisées pour résoudre ces défis, tels que l'utilisation de promesses ou async/await pour le code asynchrone, la simulation de systèmes externes et les tests de construction dans un facile à comprendre et à entretenir.

Comment apprendre davantage les tests fonctionnels en JavaScript?

Il existe de nombreuses ressources pour en savoir plus sur les tests fonctionnels en JavaScript. Cela comprend des tutoriels, des livres et des cours en ligne. Des sites Web tels que W3Schools, Mozilla Developer Network et Geeks for Geeks fournissent des guides et tutoriels complets sur le sujet. Vous pouvez également trouver de nombreux tutoriels vidéo sur des plateformes comme YouTube. De plus, de nombreux cadres de tests JavaScript tels que Jest, Mocha et Jasmine fournissent une documentation et des conseils détaillés sur leur site officiel.

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!