QUnit - Guide rapide

Le test est le processus de vérification de la fonctionnalité de l'application pour savoir si elle fonctionne selon les exigences et pour s'assurer qu'au niveau du développeur, les tests unitaires entrent en scène. Le test unitaire est le test d'une seule entité (classe ou méthode). Les tests unitaires sont essentiels pour que chaque organisation logicielle offre des produits de qualité à ses clients.

Les tests unitaires peuvent être effectués de deux manières, comme indiqué dans le tableau suivant.

Test manuel	Test automatisé
L'exécution manuelle des cas de test sans aucune prise en charge d'outil est appelée test manuel.	Prendre en charge les outils et exécuter les cas de test à l'aide d'un outil d'automatisation est connu sous le nom de test d'automatisation.
Prend du temps et fastidieux. Puisque les cas de test sont exécutés par des ressources humaines, c'est très lent et fastidieux.	Automatisation rapide. Exécute les cas de test beaucoup plus rapidement que les ressources humaines.
Énorme investissement en ressources humaines. Les cas de test devant être exécutés manuellement, un plus grand nombre de testeurs est nécessaire.	Moins d'investissement dans les ressources humaines. Les cas de test sont exécutés à l'aide de l'outil d'automatisation, par conséquent, moins de testeurs sont nécessaires.
Moins fiable, car les tests peuvent ne pas être effectués avec précision à chaque fois en raison d'erreurs humaines.	Plus fiable. Les tests d'automatisation exécutent exactement la même opération à chaque fois qu'ils sont exécutés.
Non programmable. Aucune programmation ne peut être effectuée pour écrire des tests sophistiqués, qui récupèrent des informations cachées.	Programmable. Les testeurs peuvent programmer des tests sophistiqués pour faire ressortir des informations cachées.

Qu'est-ce que QUnit?

QUnit est un cadre de test unitaire pour le langage de programmation JavaScript. Il est important dans le développement piloté par les tests et est utilisé par les projets jQuery, jQuery UI et jQuery Mobile. QUnit est capable de tester n'importe quelle base de code JavaScript générique.

QUnit promeut l'idée du «premier test puis du codage», qui met l'accent sur la configuration des données de test pour un morceau de code, qui peut être testé en premier, puis implémenté. Cette approche est comme "tester un peu, coder un peu, tester un peu, coder un peu ..." qui augmente la productivité du programmeur et la stabilité du code du programme en réduisant le stress du programmeur et le temps consacré au débogage.

Caractéristiques de QUnit

QUnit est un framework open source utilisé pour écrire et exécuter des tests. Voici ses caractéristiques les plus importantes -

QUnit fournit des Assertions pour tester les résultats attendus.
QUnit fournit des montages de test pour exécuter des tests.
Les tests QUnit permettent d'écrire du code plus rapidement, ce qui augmente la qualité.
QUnit est d'une simplicité élégante. C'est moins complexe et prend moins de temps.
Les tests QUnit peuvent être exécutés automatiquement et ils vérifient leurs propres résultats et fournissent une rétroaction immédiate. Il n'est pas nécessaire de parcourir manuellement un rapport des résultats de test.
Les tests QUnit peuvent être organisés en suites de tests contenant des cas de test et même d'autres suites de tests.
QUnit affiche la progression du test dans une barre verte si le test se déroule correctement, et devient rouge lorsqu'un test échoue.

Qu'est-ce qu'un scénario de test unitaire?

Un cas de test unitaire est une partie du code qui garantit qu'une autre partie du code (méthode) fonctionne comme prévu. Pour obtenir rapidement les résultats souhaités, un cadre de test est nécessaire. QUnit est un cadre de test unitaire parfait pour le langage de programmation JavaScript.

Un cas de test unitaire écrit formel est caractérisé par une entrée connue et par une sortie attendue, qui est élaborée avant l'exécution du test. L'entrée connue doit tester une condition préalable et la sortie attendue doit tester une post-condition.

Il doit y avoir au moins deux cas de test unitaires pour chaque exigence: un test positif et un test négatif. Si une exigence a des sous-exigences, chaque sous-exigence doit avoir au moins deux cas de test positifs et négatifs.

Il existe deux façons d'utiliser QUnit.

Local Installation - Vous pouvez télécharger la bibliothèque QUnit sur votre machine locale et l'inclure dans votre code HTML.
CDN Based Version - Vous pouvez inclure la bibliothèque QUnit dans votre code HTML directement à partir du Content Delivery Network (CDN).

Installation locale

Aller au https://code.jquery.com/qunit/ pour télécharger la dernière version disponible.
Placez le fichier téléchargé qunit-git.js et qunit-git.css fichier dans un répertoire de votre site Web, par exemple / jquery.

Exemple

Vous pouvez inclure qunit-git.js et qunit-git.css fichiers dans votre fichier HTML comme suit -

<html> 
   <head> 
      <meta charset = "utf-8"> 
      <title>QUnit basic example</title> 
      <link rel = "stylesheet" href = "/jquery/qunit-git.css"> 
      <script src = "/jquery/qunit-git.js"></script> 
   </head> 
   
   <body> 
      <div id = "qunit"></div> 
      <div id = "qunit-fixture"></div>  
      <script> 
         QUnit.test( "My First Test", function( assert ) { 
            var value = "1"; 
            assert.equal( value, "1", "Value should be 1" ); 
         }); 
      </script> 
   </body> 
</html>

Cela produira le résultat suivant -

Version basée sur CDN

Vous pouvez inclure la bibliothèque QUnit dans votre code HTML directement à partir du Content Delivery Network (CDN).

Nous utilisons la version jQuery CDN de la bibliothèque tout au long de ce didacticiel.

Exemple

Réécrivons l'exemple ci-dessus en utilisant la bibliothèque QUnit de jQuery CDN.

<html>
   <head>
      <meta charset = "utf-8">
      <title>QUnit basic example</title>
      <link rel = "stylesheet" href = "https://code.jquery.com/qunit/qunit-1.22.0.css">
      <script src = "https://code.jquery.com/qunit/qunit-1.22.0.js"></script>
   </head>
   
   <body>
      <div id = "qunit"></div>
      <div id = "qunit-fixture"></div> 
      <script>
         QUnit.test( "My First Test", function( assert ) {
            var value = "1";
            assert.equal( value, "1", "Value should be 1" );
         });
      </script>
   </body>
</html>

Cela produira le résultat suivant -

Nous allons maintenant vous montrer un processus étape par étape pour obtenir un kickstart dans QUnit en utilisant un exemple de base.

Importer qunit.js

qunit.js de la bibliothèque Qunit représente le lanceur de tests et le framework de test.

<script src = "https://code.jquery.com/qunit/qunit-1.22.0.js"></script>

Importer qunit.css

qunit.css de la bibliothèque Qunit stylise la page de la suite de tests pour afficher les résultats des tests.

<link rel = "stylesheet" href = "https://code.jquery.com/qunit/qunit-1.22.0.css">

Ajouter un appareil

Ajouter deux éléments div avec id = "qunit" et "qunit-fixture". Ces éléments div sont nécessaires et fournissent le montage pour les tests.

<div id = "qunit"></div>
<div id = "qunit-fixture"></div>

Créer une fonction à tester

function square(x) {
   return x * x;
}

Créer un scénario de test

Appelez la fonction QUnit.test, avec deux arguments.

Name - Le nom du test pour afficher les résultats du test.
Function - Code de test de fonction, ayant une ou plusieurs assertions.

QUnit.test( "TestSquare", function( assert ) {
   var result = square(2);
   assert.equal( result, "4", "square(2) should be 4." );
});

Exécutez le test

Voyons maintenant le code complet en action.

<html>
   <head>
      <meta charset = "utf-8">
      <title>QUnit basic example</title>
      <link rel = "stylesheet" href = "https://code.jquery.com/qunit/qunit-1.22.0.css">
      <script src = "https://code.jquery.com/qunit/qunit-1.22.0.js"></script>
   </head>
   
   <body>
      <div id = "qunit"></div>
      <div id = "qunit-fixture"></div> 
      
      <script>
         function square(x) {
            return x * x;
         }
         QUnit.test( "TestSquare", function( assert ) {
            var result = square(2);
            assert.equal( result, "4", "square(2) should be 4." );
         });
      </script>
   </body>
</html>

Chargez la page dans le navigateur. Le testeur appelleQUnit.test()lorsque la page est chargée et ajoute le test à une file d'attente. L'exécution du cas de test est différée et contrôlée par le testeur.

Vérifiez la sortie

Vous devriez voir le résultat suivant -

Header- L'en-tête de la suite de tests affiche le titre de la page, une barre verte lorsque tous les tests sont réussis. Sinon, une barre rouge quand au moins un test a échoué, une barre avec trois cases à cocher pour filtrer les résultats du test et une barre bleue avec le texte navigator.userAgent pour afficher les détails du navigateur.
Hide passed tests checkbox - Pour masquer les cas de test réussis et afficher uniquement les cas de test ayant échoué.
Check for globals checkbox- Pour afficher la liste de toutes les propriétés de l'objet fenêtre, avant et après chaque test, vérifiez les différences. La modification des propriétés échouera le test.
No try-catch checkbox - Pour exécuter des cas de test en dehors d'un bloc try-catch de sorte qu'en cas de test lançant une exception, le testrunner mourra et affichera l'exception native.
Summary- Affiche le temps total nécessaire pour exécuter les cas de test. Total des cas de test exécutés et des assertions ayant échoué.
Contents- Affiche les résultats du test. Chaque résultat de test porte le nom du test suivi des affirmations échouées, réussies et totales. Chaque entrée peut être cliquée pour obtenir plus de détails.

API importantes de QUnit

Certaines des catégories importantes de QUnit sont -

N ° Sr.	Catégorie	Fonctionnalité
1	Affirmer	Un ensemble de méthodes d'assert.
2	Contrôle asynchrone	Pour les opérations asynchrones.
3	Rappels	Lors de l'intégration de QUnit dans d'autres outils tels que les serveurs CI, ces rappels peuvent être utilisés comme API pour lire les résultats des tests.
4	Configuration et utilitaires	Ces méthodes et propriétés sont utilisées comme aides utilitaires et pour configurer QUnit. Par exemple, pour ajuster directement le comportement d'exécution, étendez l'API QUnit via des assertions personnalisées, etc.
5	Tester	Pour les opérations de test.

Catégorie: Assert

Il fournit un ensemble de méthodes d'assert.

N ° Sr.	Méthodes et description
1	async() Demandez à QUnit d'attendre une opération asynchrone.
2	deepEqual() Une comparaison récursive approfondie, travaillant sur des types primitifs, des tableaux, des objets, des expressions régulières, des dates et des fonctions.
3	equal() Une comparaison non stricte, à peu près équivalente à assertEquals de JUnit.
4	expect() Spécifiez le nombre d'assertions qui doivent être exécutées dans un test.
5	notDeepEqual() Une comparaison récursive profonde inversée, travaillant sur des types primitifs, des tableaux, des objets, des expressions régulières, des dates et des fonctions.
6	notEqual() Une comparaison non stricte, vérifiant les inégalités.
sept	notOk() Une vérification booléenne, inverse de ok () et assert.ok () de CommonJS, et équivalent à assertFalse () de JUnit. Passe si le premier argument est faux.
8	notPropEqual() Une comparaison stricte des propres propriétés d'un objet, en vérifiant l'inégalité.
9	notStrictEqual() Une comparaison stricte, vérifiant les inégalités.
dix	ok() Une vérification booléenne, équivalente à assert.ok () de CommonJS et assertTrue () de JUnit. Passe si le premier argument est vrai.
11	propEqual() Une comparaison stricte du type et de la valeur des propres propriétés d'un objet.
12	push() Signaler le résultat d'une assertion personnalisée.
13	strictEqual() Une comparaison stricte de type et de valeur.
14	throws() Testez si un rappel lève une exception et comparez éventuellement l'erreur levée.

Catégorie: Contrôle Async

Il fournit un ensemble d'opérations asynchrones.

N ° Sr.	Méthodes et description
1	async() Demandez à QUnit d'attendre une opération asynchrone.
2	QUnit.asyncTest() DEPRECATED: ajoutez un test asynchrone à exécuter. Le test doit inclure un appel à QUnit.start ().
3	QUnit.start() PARTIELLEMENT DEPRECATED: recommencez à exécuter les tests après l'arrêt du testrunner. Voir QUnit.stop () et QUnit.config.autostart.
4	QUnit.stop() DEPRECATED: Augmentez le nombre d'appels QUnit.start () que le testrunner doit attendre avant de continuer.
5	QUnit.test() Ajoutez un test à exécuter.

Catégorie: Callbacks

Lors de l'intégration de QUnit dans d'autres outils tels que les serveurs CI, ces rappels peuvent être utilisés comme API pour lire les résultats des tests.

N ° Sr.	Méthodes et description
1	QUnit.begin() Enregistrez un rappel à déclencher chaque fois que la suite de tests commence.
2	QUnit.done() Enregistrez un rappel à déclencher à la fin de la suite de tests.
3	QUnit.log() Enregistrez un rappel à déclencher chaque fois qu'une assertion se termine.
4	QUnit.moduleDone() Enregistrez un rappel à déclencher chaque fois qu'un module se termine.
5	QUnit.moduleStart() Enregistrez un rappel à déclencher chaque fois qu'un module démarre.
6	QUnit.testDone() Enregistrez un rappel à déclencher chaque fois qu'un test se termine.
sept	QUnit.testStart() Enregistrez un rappel à déclencher chaque fois qu'un test commence.

Catégorie: Configuration et utilitaires

Ces méthodes et propriétés sont utilisées comme aides utilitaires et pour configurer QUnit. Par exemple, pour ajuster directement le comportement d'exécution, étendez l'API QUnit via des assertions personnalisées, etc.

N ° Sr.	Méthodes et description
1	QUnit.assert Espace de noms pour les assertions QUnit.
2	QUnit.config Configuration pour QUnit.
3	QUnit.dump.parse() Décharge de données avancée et extensible pour JavaScript.
4	QUnit.extend() Copiez les propriétés définies par l'objet mixin dans l'objet cible.
5	QUnit.init() DEPRECATED: Réinitialisez le testeur.
6	QUnit.push() DEPRECATED: signale le résultat d'une assertion personnalisée.
sept	QUnit.reset() DEPRECATED: réinitialisez le dispositif de test dans le DOM.
8	QUnit.stack() Renvoie une chaîne sur une seule ligne représentant le stacktrace (pile d'appels).

Catégorie: Test

Il fournit un ensemble d'opérations de test.

N ° Sr.	Méthodes et description
1	QUnit.assert Espace de noms pour les assertions QUnit.
2	QUnit.asyncTest() DEPRECATED: ajoutez un test asynchrone à exécuter. Le test doit inclure un appel à QUnit.start ().
3	QUnit.module() Regrouper les tests liés sous une seule étiquette.
4	QUnit.only() Ajoute un test à exécuter exclusivement, empêchant tous les autres tests de s'exécuter.
5	QUnit.skip() Ajoute un objet de type test à ignorer.
6	QUnit.test() Ajoute un test à exécuter.

Toutes les assertions sont dans la catégorie Assert.

Cette catégorie fournit un ensemble de méthodes d'assertion utiles pour écrire des tests. Seules les affirmations ayant échoué sont enregistrées.

N ° Sr.	Méthodes et description
1	async() Demandez à QUnit d'attendre une opération asynchrone.
2	deepEqual() Une comparaison récursive approfondie, travaillant sur des types primitifs, des tableaux, des objets, des expressions régulières, des dates et des fonctions.
3	equal() Une comparaison non stricte, à peu près équivalente à assertEquals de JUnit.
4	expect() Spécifiez le nombre d'assertions qui doivent être exécutées dans un test.
5	notDeepEqual() Une comparaison récursive profonde inversée, travaillant sur des types primitifs, des tableaux, des objets, des expressions régulières, des dates et des fonctions.
6	notEqual() Une comparaison non stricte, vérifiant les inégalités.
sept	notOk() Une vérification booléenne, inverse de ok () et assert.ok () de CommonJS, et équivalent à assertFalse () de JUnit. Passe si le premier argument est faux.
8	notPropEqual() Une comparaison stricte des propres propriétés d'un objet, en vérifiant l'inégalité.
9	notStrictEqual() Une comparaison stricte, vérifiant les inégalités.
dix	ok() Une vérification booléenne, équivalente à assert.ok () de CommonJS et assertTrue () de JUnit. Passe si le premier argument est vrai.
11	propEqual() Une comparaison stricte du type et de la valeur des propres propriétés d'un objet.
12	push() Signaler le résultat d'une assertion personnalisée.
13	strictEqual() Une comparaison stricte de type et de valeur.
14	throws() Testez si un rappel lève une exception et comparez éventuellement l'erreur levée.

Essayons de couvrir la plupart des méthodes mentionnées ci-dessus dans un exemple.

<html>
   <head>
      <meta charset = "utf-8">
      <title>QUnit basic example</title>
      <link rel = "stylesheet" href = "https://code.jquery.com/qunit/qunit-1.22.0.css">
      <script src = "https://code.jquery.com/qunit/qunit-1.22.0.js"></script>
   </head>
   
   <body>
      <div id = "qunit"></div>
      <div id = "qunit-fixture"></div> 
      <script>
         QUnit.test( "TestSuite", function( assert ) {
            //test data
            var str1 = "abc";
            var str2 = "abc";
            var str3 = null;
            var val1 = 5;
            var val2 = 6;
            var expectedArray = ["one", "two", "three"];
            var resultArray =  ["one", "two", "three"];

            //Check that two objects are equal
            assert.equal(str1, str2, "Strings passed are equal.");
			
            //Check that two objects are not equal
            assert.notEqual(str1,str3, "Strings passed are not equal.");

            //Check that a condition is true
            assert.ok(val1 < val2, val1 + " is less than " + val2);
			
            //Check that a condition is false
            assert.notOk(val1 > val2, val2 + " is not less than " + val1);

            //Check whether two arrays are equal to each other.
            assert.deepEqual(expectedArray, resultArray ,"Arrays passed are equal.");
			
            //Check whether two arrays are equal to each other.
            assert.notDeepEqual(expectedArray, ["one", "two"],
               "Arrays passed are not equal.");			
         });
      </script>
   </body>
</html>

Vérifiez la sortie

Vous devriez voir le résultat suivant -

Ce chapitre explique la procédure d'exécution des méthodes dans QUnit, qui indique quelle méthode est appelée en premier et laquelle après. Voici la procédure d'exécution des méthodes de l'API de test QUnit avec un exemple.

<html>
   <head>
      <meta charset = "utf-8">
      <title>QUnit basic example</title>
      <link rel = "stylesheet" href = "https://code.jquery.com/qunit/qunit-1.22.0.css">
      <script src = "https://code.jquery.com/qunit/qunit-1.22.0.js"></script>
   </head>
   
   <body>
      <div id = "qunit"></div>
      <div id = "qunit-fixture"></div> 
      <script>
         QUnit.module( "Module A", {
            beforeEach: function( assert ) {
               assert.ok( true, "before test case" );
            }, afterEach: function( assert ) {
               assert.ok( true, "after test case" );
            }
         });
         
         QUnit.test( "test case 1", function( assert ) {
            assert.ok( true, "Module A: in test case 1" );
         });
         
         QUnit.test( "test case 2", function( assert ) {
            assert.ok( true, "Module A: in test case 2" );
         });
		 		 
         QUnit.module( "Module B" );		
         QUnit.test( "test case 1", function( assert ) {
            assert.ok( true, "Module B: in test case 1" );
         });
         
         QUnit.test( "test case 2", function( assert ) {
            assert.ok( true, "Module B: in test case 2" );
         });		 
      </script>
   </body>
</html>

Vérifiez la sortie

Vous devriez voir le résultat suivant -

C'est ainsi que se déroule la procédure d'exécution QUnit.

Le module est utilisé pour regrouper les cas de test.
beforeEach() Cependant, la méthode s'exécute pour chaque scénario de test avant d'exécuter le scénario de test.
afterEach() Cependant, la méthode s'exécute pour chaque cas de test après l'exécution du cas de test.
Entre beforeEach() et afterEach() chaque scénario de test s'exécute.
Appel QUnit.module() encore une fois, réinitialisez simplement toutes les fonctions beforeEach / afterEach définies par un autre module précédemment.

Parfois, il arrive que notre code ne soit pas prêt et que le cas de test écrit pour tester cette méthode / code échoue s'il est exécuté. QUnit.skipaide à cet égard. Une méthode de test écrite à l'aide de la méthode Skip ne sera pas exécutée. Voyons la méthode Skip en action.

<html>
   <head>
      <meta charset = "utf-8">
      <title>QUnit basic example</title>
      <link rel = "stylesheet" href = "https://code.jquery.com/qunit/qunit-1.22.0.css">
      <script src = "https://code.jquery.com/qunit/qunit-1.22.0.js"></script>
   </head>
   
   <body>
      <div id = "qunit"></div>
      <div id = "qunit-fixture"></div> 
      <script>
         QUnit.module( "Module A", {
            beforeEach: function( assert ) {
               assert.ok( true, "before test case" );
            }, afterEach: function( assert ) {
               assert.ok( true, "after test case" );
            }
         });
         
         QUnit.test( "test case 1", function( assert ) {
            assert.ok( true, "Module A: in test case 1" );
         });
         
         QUnit.skip( "test case 2", function( assert ) {
            assert.ok( true, "Module A: in test case 2" );
         });
		 		 
         QUnit.module( "Module B" );		
         QUnit.test( "test case 1", function( assert ) {
            assert.ok( true, "Module B: in test case 1" );
         });
         
         QUnit.skip( "test case 2", function( assert ) {
            assert.ok( true, "Module B: in test case 2" );
         });		 
      </script>
   </body>
</html>

Vérifiez la sortie

Vous devriez voir le résultat suivant -

Parfois, il arrive que notre code ne soit pas prêt et que le cas de test écrit pour tester cette méthode / code échoue, s'il est exécuté. QUnit.onlyaide à cet égard. Une méthode de test écrite en utilisant uniquement la méthode sera exécutée tandis que les autres tests ne seront pas exécutés. Si plus d'une seule méthode est spécifiée, seule la première s'exécutera. Voyons seulement la méthode en action.

<html>
   <head>
      <meta charset = "utf-8">
      <title>QUnit basic example</title>
      <link rel = "stylesheet" href = "https://code.jquery.com/qunit/qunit-1.22.0.css">
      <script src = "https://code.jquery.com/qunit/qunit-1.22.0.js"></script>
   </head>
   
   <body>
      <div id = "qunit"></div>
      <div id = "qunit-fixture"></div> 
      <script>
         QUnit.module( "Module A", {
            beforeEach: function( assert ) {
               assert.ok( true, "before test case" );
            }, afterEach: function( assert ) {
               assert.ok( true, "after test case" );
            }
         });
         
         QUnit.test( "test case 1", function( assert ) {
            assert.ok( true, "Module A: in test case 1" );
         });
         
         QUnit.only( "test case 2", function( assert ) {
            assert.ok( true, "Module A: in test case 2" );
         });
		      
         QUnit.test( "test case 3", function( assert ) {
            assert.ok( true, "Module A: in test case 3" );
         });
		 
         QUnit.test( "test case 4", function( assert ) {
            assert.ok( true, "Module A: in test case 4" );
         });	 
      </script>
   </body>
</html>

Vérifiez la sortie

Vous devriez voir le résultat suivant -

Pour chaque opération asynchrone dans QUnit.test() rappel, utilisation assert.async(), qui renvoie une fonction "done" qui doit être appelée une fois l'opération terminée. assert.async () accepte le nombre d'appels comme paramètre. Le rappel retourné par assert.async () lèvera une erreur, s'il est appelé plus que le nombre d'appels acceptés, s'il est fourni. Chaquedone()l'appel s'ajoute au nombre d'appels. Une fois que chaque appel est terminé, le test est terminé.

<html>
   <head>
      <meta charset = "utf-8">
      <title>QUnit basic example</title>
      <link rel = "stylesheet" href = "https://code.jquery.com/qunit/qunit-1.22.0.css">
      <script src = "https://code.jquery.com/qunit/qunit-1.22.0.js"></script>
   </head>
   
   <body>
      <div id = "qunit"></div>
      <div id = "qunit-fixture"></div> 
      <script>
         QUnit.test( "multiple call test()", function( assert ) {
            var done = assert.async( 3 );
            
            setTimeout(function() {
               assert.ok( true, "first callback." );
               done();
            }, 500 );

            setTimeout(function() {
               assert.ok( true, "second callback." );
               done();
            }, 500 );

            setTimeout(function() {
               assert.ok( true, "third callback." );
               done();
            }, 500 );
         });		 
      </script>
   </body>
</html>

Vérifiez la sortie

Vous devriez voir le résultat suivant -

On peut utiliser assert.expect()pour vérifier le nombre d'assertions faites dans le test. Dans l'exemple suivant, nous nous attendons à ce que trois assertions soient faites dans le test.

<html>
   <head>
      <meta charset = "utf-8">
      <title>QUnit basic example</title>
      <link rel = "stylesheet" href = "https://code.jquery.com/qunit/qunit-1.22.0.css">
      <script src = "https://code.jquery.com/qunit/qunit-1.22.0.js"></script>
   </head>
   
   <body>
      <div id = "qunit"></div>
      <div id = "qunit-fixture"></div> 
      <script>
         QUnit.test( "multiple call test()", function( assert ) {
            assert.expect( 3 );
            var done = assert.async( 3 );
            
            setTimeout(function() {
               assert.ok( true, "first callback." );
               done();
            }, 500 );

            setTimeout(function() {
               assert.ok( true, "second callback." );
               done();
            }, 500 );

            setTimeout(function() {
               assert.ok( true, "third callback." );
               done();
            }, 500 );
         });		 
      </script>
   </body>
</html>

Vérifiez la sortie

Vous devriez voir le résultat suivant -

Lors de l'intégration de QUnit dans d'autres outils tels que les serveurs CI, ces rappels peuvent être utilisés comme API pour lire les résultats des tests. Voici la procédure d'exécution de la méthode API de rappel QUnit avec un exemple.

<html>
   <head>
      <meta charset = "utf-8">
      <title>QUnit basic example</title>
      <link rel = "stylesheet" href = "https://code.jquery.com/qunit/qunit-1.22.0.css">
      <script src = "https://code.jquery.com/qunit/qunit-1.22.0.js"></script>
   </head>
   
   <body>
      <div id = "qunit"></div>
      <div id = "qunit-fixture"></div> 
      <script>
         //Register a callback to fire whenever a testsuite starts.
         QUnit.begin(function( details ) {
            var data = document.getElementById("console").innerHTML;
            document.getElementById("console").innerHTML = "<br/>" + 
               "QUnit.begin- Test Suite Begins " + "<br/>" + 
               "Total Test: " + details.totalTests;
         });

         //Register a callback to fire whenever a test suite ends.		 
         QUnit.done(function( details ) {
            var data = document.getElementById("console").innerHTML;
            document.getElementById("console").innerHTML = data + "<br/><br/>" + 
               "QUnit.done - Test Suite Finised" +  "<br/>" + "Total: " +  
               details.total + " Failed: " + details.failed + " Passed: 
               " + details.passed;
         });
		 
         //Register a callback to fire whenever a module starts.
            QUnit.moduleStart(function( details ) {
               var data = document.getElementById("console").innerHTML;
               document.getElementById("console").innerHTML = data + "<br/><br/>" + 
                  "QUnit.moduleStart - Module Begins " +  "<br/>" + details.name;
         });
		 
         //Register a callback to fire whenever a module ends.	  
         QUnit.moduleDone(function( details ) {
            var data = document.getElementById("console").innerHTML;
            document.getElementById("console").innerHTML = data + "<br/><br/>" + 
               "QUnit.moduleDone - Module Finished " +  "<br/>" + details.name + 
               " Failed/total: " + details.failed +"/" + details.total ;
         });
		 
         //Register a callback to fire whenever a test starts.
         QUnit.testStart(function( details ) {
            var data = document.getElementById("console").innerHTML;
            document.getElementById("console").innerHTML = data + "<br/><br/>" + 
               "QUnit.testStart - Test Begins " +  "<br/>" + details.module +" 
               " + details.name;
         });
		 
         //Register a callback to fire whenever a test ends.
         QUnit.testDone(function( details ) {
            var data = document.getElementById("console").innerHTML;
            document.getElementById("console").innerHTML = data + "<br/><br/>" + 
               "QUnit.testDone - Test Finished " +  "<br/>" + details.module +" " 
               + details.name + "Failed/total: " + details.failed +" " + details.total+ 
               " "+ details.duration;
         });
		 
         QUnit.module( "Module A", {
            beforeEach: function( assert ) {
               assert.ok( true, "before test case" );
            }, afterEach: function( assert ) {
               assert.ok( true, "after test case" );
            }
         });
         
         QUnit.test( "test case 1", function( assert ) {
            assert.ok( true, "Module A: in test case 1" );
         });
         
         QUnit.test( "test case 2", function( assert ) {
            assert.ok( true, "Module A: in test case 2" );
         });
		 		 
         QUnit.module( "Module B" );		
         QUnit.test( "test case 1", function( assert ) {
            assert.ok( true, "Module B: in test case 1" );
         });
         
         QUnit.test( "test case 2", function( assert ) {
            assert.ok( true, "Module B: in test case 2" );
         });	 
      </script>

      <div id = "console" ></div>
   </body>
</html>

Vérifiez la sortie

Vous devriez voir le résultat suivant -

Des modules avec des fonctions de test groupées sont utilisés pour définir des modules imbriqués. QUnit exécute des tests sur le module parent avant d'approfondir les imbriqués, même s'ils sont déclarés en premier. lebeforeEach et afterEachles rappels sur un appel de module imbriqué seront empilés en mode LIFO (dernier entré, premier sorti) vers les hooks parents. Vous pouvez spécifier le code à exécuter avant et après chaque test à l'aide de l'argument et des hooks.

Les hooks peuvent également être utilisés pour créer des propriétés qui seront partagées sur le contexte de chaque test. Toutes les propriétés supplémentaires de l'objet hooks seront ajoutées à ce contexte. L'argument hooks est facultatif si vous appelez QUnit.module avec un argument de rappel.

Le rappel du module est appelé avec le contexte comme environnement de test, avec les propriétés de l'environnement copiées dans les tests, les hooks et les modules imbriqués du module.

<html>
   <head>
      <meta charset = "utf-8">
      <title>QUnit basic example</title>
      <link rel = "stylesheet" href = "https://code.jquery.com/qunit/qunit-1.22.0.css">
      <script src = "https://code.jquery.com/qunit/qunit-1.22.0.js"></script>
   </head>
   
   <body>
      <div id = "qunit"></div>
      <div id = "qunit-fixture"></div> 
      <script>
         QUnit.module( "parent module", function( hooks ) {
            hooks.beforeEach( function( assert ) {
               assert.ok( true, "beforeEach called" );
            });

            hooks.afterEach( function( assert ) {
               assert.ok( true, "afterEach called" );
            });

            QUnit.test( "hook test 1", function( assert ) {
               assert.expect( 2 );
            });

            QUnit.module( "nested hook module", function( hooks ) {
               // This will run after the parent module's beforeEach hook
               hooks.beforeEach( function( assert ) {
                  assert.ok( true, "nested beforeEach called" );
               });

               // This will run before the parent module's afterEach
               hooks.afterEach( function( assert ) {
                  assert.ok( true, "nested afterEach called" );
               });

               QUnit.test( "hook test 2", function( assert ) {
                  assert.expect( 4 );
               });
            });
         });
      </script>

      <div id = "console" ></div>
   </body>
</html>

Vérifiez la sortie

Vous devriez voir le résultat suivant -