Comment tester le code asynchrone avec Qunit

Points clés

• Les fonctions asynchrones, comme les fonctions synchrones, nécessitent également des tests. Qunit fournit une méthode, QUnit.asyncTest(), en particulier pour tester le code asynchrone.
• QUnit.asyncTest() Doit être utilisé en combinaison avec deux autres méthodes: QUnit.start() et QUnit.stop(). QUnit.start() est utilisé pour démarrer ou reprendre les tests d'exécution après l'arrêt du test, tandis que QUnit.stop() augmente le nombre de QUnit.start() appelle que le coureur de test doit attendre avant de continuer.
• Ce tutoriel fournit des exemples de la façon d'utiliser ces méthodes dans la pratique. Il montre comment utiliser QUnit.start(), QUnit.stop() et QUnit.asyncTest() pour tester les fonctions qui calculent la valeur maximale d'un ensemble de paramètres de manière asynchrone.
• Ce tutoriel recommande également que lors du test du code asynchrone pour les opérations AJAX, il est préférable de ne pas s'appuyer sur les données ou les résultats réels renvoyés par le serveur, car le serveur peut avoir des erreurs potentielles. Au lieu de cela, il recommande d'utiliser des bibliothèques comme jQuery Mockjax ou Sinon.js pour simuler les demandes AJAX.

Il y a quelques semaines, j'ai publié un article intitulé Démarrage avec Qunit, discutant des principaux concepts des tests unitaires et comment tester le code JavaScript à l'aide de QUnit. Dans ce post, je me suis concentré sur les affirmations fournies par le cadre et comment tester le code en cours d'exécution de manière synchrone. Cependant, si nous voulons discuter des cas réels, nous ne pouvons pas éviter de parler de fonctions asynchrones. Tout comme les fonctions synchrones, les fonctions asynchrones nécessitent une attention et encore plus de tests. Dans cet article, je vais vous apprendre à tester le code asynchrone à l'aide de Qunit. Si vous ne vous souvenez pas de la méthode d'affirmation disponible, ou si vous avez complètement manqué mon article, je vous suggère de lire pour démarrer avec Qunit. Les documents couverts dans cet article seront une condition préalable à cet article.

Créer des tests asynchrones à l'aide de Qunit

Chaque projet non trivial écrit en JavaScript contient des fonctions asynchrones. Ils sont utilisés pour effectuer une opération donnée après un certain temps, récupérer des données du serveur et même envoyer des données au serveur. Qunit fournit une méthode appelée QUnit.asyncTest() qui vise à tester le code asynchrone. La signature de cette méthode est la suivante:

QUnit.asyncTest(name, testFunction)

Les paramètres

ont la même signification que QUnit.test(), mais pour plus de commodité, je les signale ici:

• name: une chaîne qui nous aide à identifier les tests créés.
• testFunction: fonction contenant les affirmations que le cadre exécutera. Le cadre transmet un paramètre à cette fonction qui expose toutes les méthodes d'affirmation de Qunit.

Le fait que cette méthode accepte les mêmes paramètres que

peut être trompeur. Vous pourriez penser que le principe est le même, et tout ce que vous avez à faire pour tester une fonction asynchrone est de remplacer l'appel à QUnit.test() par QUnit.asyncTest() et c'est fait. Pas si vite! Pour accomplir son travail, QUnit.test() doit être utilisé en combinaison avec deux autres méthodes: QUnit.asyncTest() et QUnit.start(). Apprenez-en plus à leur sujet. QUnit.stop()

et QUnit.start() QUnit.stop()

Lorsque QUnit exécute un test créé à l'aide de

, il arrête automatiquement le programme d'exécution du test. Il attendra ensuite l'appel de fonction contenant l'affirmation QUnit.asyncTest(). Le but de QUnit.start() est de démarrer ou de reprendre des tests d'exécution après l'arrêt du test. Cette méthode accepte un entier comme son seul paramètre facultatif QUnit.start() pour fusionner plusieurs appels en un QUnit.start(). Le test peut être arrêté à l'aide de la méthode . QUnit.stop() Il augmente le nombre de appelle que le coureur de test doit attendre avant de continuer. Cette méthode accepte un entier comme seul paramètre facultatif qui spécifie le nombre d'appels supplémentaires à QUnit.start() que le cadre doit attendre. Sa valeur par défaut est 1. C'est un peu difficile à comprendre, non? La définition de la méthode impliquant sa méthode correspondante ressemble à un gâchis. Malheureusement, c'est exactement ce qu'ils font. La meilleure façon que je connaisse pour clarifier ces concepts est de vous donner un exemple d'utilisation spécifique. QUnit.start()

Intégrer tous les contenus

Dans cette section, nous mettrons l'approche discutée si loin en pratique. J'espère qu'une fois que vous l'avez lu, vous aurez une compréhension plus profonde de ce mécanisme. Commençons par un exemple simple en utilisant l'une des fonctions développées dans l'article en train de démarrer avec Qunit:

. Cette fonction prend n'importe quel nombre de paramètres et renvoie la valeur maximale. Le code de cette fonction est le suivant:

max()

Maintenant, disons que cette fonction s'exécutera généralement sur de très grands ensembles de paramètres. Nous voulons éviter que le navigateur de l'utilisateur soit bloqué jusqu'à ce que le résultat soit calculé. Pour ce faire, nous placerons l'appel

QUnit.asyncTest(name, testFunction)

avec une valeur de retard de 0 dans le rappel passé à

. Le code utilisé pour les fonctions de test asynchrones (il devrait vous faire sentir l'utilisation de max()) les suivants: window.setTimeout()

QUnit.asyncTest(name, testFunction)

Dans le code ci-dessus, j'ai enveloppé l'appel à la fonction max() comme un rappel de window.setTimeout(). Après avoir exécuté l'affirmation avec max(), nous appelons la méthode QUnit.start() pour permettre au coureur de test de reprendre son exécution. Si nous évitons d'appeler cette méthode, le coureur de test restera coincé et notre test échouera misérablement (en fait, le test est interrompu et ne fait rien d'autre, donc ce n'est pas un véritable échec de l'affirmation). L'exemple précédent devrait être facile à comprendre, car il est très similaire à son homologue synchrone. Cependant, le test d'une situation à lui seul ne nous convainc pas notre code. De plus, nous n'avons pas eu la chance de voir l'application pratique de QUnit.stop(). Pour résoudre ce problème, nous implémenterons toutes les affirmations que nous avons vues dans le post précédent dans la fonction transmise à QUnit.asyncTest(). Le code complet ressemble à ceci:

function max() {
   var max = -Infinity;
   for (var i = 0; i < arguments.length; i++) {
      if (arguments[i] > max) {
         max = arguments[i];
      }
   }

   return max;
}

Dans le test, nous avons défini le nombre d'affirmations que nous prévoyons d'exécuter, comme nous l'avons discuté pour démarrer avec Qunit. La fonction appelle ensuite la méthode QUnit.stop(). Cela est nécessaire car dans le test, nous avons effectué quatre appels asynchrones. Lorsque nous utilisons QUnit.asyncTest(), le framework attend uniquement un appel QUnit.start(). Si nous omettons l'appel QUnit.stop() et spécifions trois autres appels à QUnit.start(), le test échouera car le nombre attendu d'affirmations est différent du nombre d'affirmations exécutées. Une démonstration en direct du code qui inclut l'appel à expect() est présentée ci-dessous et fournie comme JSBIN.

tests asynchrones à l'aide de Qunit

Dans cette section, nous avons vu des exemples de code asynchrone qui n'effectue pas d'opérations Ajax. Cependant, vous souhaitez généralement charger des données ou envoyer des données au serveur. Lorsque cela se produit, il est préférable de ne pas compter sur les données ou les résultats réels renvoyés par le serveur, car il peut avoir des erreurs (vous savez, rien dans le logiciel n'est parfait). Pour éviter ce problème, vous devez simuler les demandes AJAX. Pour ce faire, vous pouvez utiliser jQuery Mockjax, Sinon.js ou toute autre bibliothèque qui répond à vos besoins.

Conclusion

Dans ce tutoriel, vous avez appris à créer des tests pour les fonctions asynchrones. Tout d'abord, nous discutons de la façon de déclarer un test impliquant un code asynchrone à l'aide de la méthode QUnit.asyncTest(). Ensuite, vous comprenez l'existence de deux autres méthodes QUnit.start() et QUnit.stop(), qui doivent être utilisées lors de la création de tests en utilisant QUnit.asyncTest(). Enfin, nous avons mis les connaissances acquises en pratique en développant deux tests pour démontrer comment ces méthodes fonctionnent ensemble. En utilisant les sujets abordés dans ce tutoriel, vous avez toutes les capacités dont vous avez besoin pour tester tout code que vous pourriez écrire dans JavaScript. J'aimerais savoir ce que vous pensez de ce cadre et si vous envisageriez de l'utiliser dans votre projet.

FAQ (FAQ) sur le test du code asynchrone avec Qunit

Qu'est-ce que le code asynchrone et pourquoi est-il important de le tester?

Le code asynchrone fait référence aux opérations qui peuvent être démarrées, exécutées et terminées en périodes de chevauchement. C'est une façon de programmation qui permet à plusieurs choses de se produire en même temps. Ceci est particulièrement utile dans les applications qui nécessitent de nombreuses opérations d'E / S ou nécessitent des tâches telles que l'obtention de données d'un serveur. Tester le code asynchrone est crucial car il permet de s'assurer que toutes les parties du code sont correctement exécutées, même si elles sont exécutées simultanément. Il aide à identifier tous les problèmes potentiels qui peuvent être causés par la chevauchement de l'exécution de différentes pièces de code.

Comment Qunit aide-t-il à tester le code asynchrone?

Qunit est un cadre de test unitaire JavaScript puissant et facile à utiliser. Il est capable de tester n'importe quel code JavaScript commun, y compris le code asynchrone. QUnit fournit une fonction utilitaire "asynchrone" qui facilite le test asynchrone. Cette fonction pause le programme d'exécution de test et la restaure après l'exécution du code asynchrone. Cela garantit que vos tests reflètent avec précision le comportement du code asynchrone.

Comment utiliser la fonction "async" dans QUnit pour tester le code asynchrone?

Utilisez la fonction "Async" dans QUnit en l'appelant dans la fonction de test. Cela renverra une fonction de rappel, que vous devez appeler une fois l'opération asynchrone terminée. Voici un exemple de base:

QUnit.asyncTest(name, testFunction)

Dans cet exemple, la fonction "Async" est utilisée pour suspendre le programme d'exécution de test jusqu'à ce que le rappel "Done" soit appelé.

... (Les questions et réponses de la FAQ restantes peuvent être réécrites de manière similaire en fonction du texte d'origine pour garder le contenu cohérent, mais la structure de la phrase et l'utilisation des mots ont changé pour éviter de copier complètement.)

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!