karma tutorial front end unit testing using karma test runner
Ce didacticiel explique comment configurer Karma et automatiser les tests d'unités frontales à l'aide de Karma, les options de configuration de base pour le fichier Karma.conf.js, etc.:
Ce tutoriel explique la procédure d'automatisation des tests unitaires du front-end du logiciel à l'aide de Karma et de certains de ses outils associés.
Nous commencerons par des applications Web développées à l’aide de la bibliothèque JavaScript: «Jquery» et du runtime JavaScript: «NodeJS»; et plus tard, nous examinerons certains frameworks JavaScript tels que AngularJS et ReactJS.
=>DÉFILER VERS LE BASpour voir la liste complète des tutoriels Karma
Ce que vous apprendrez:
- Liste des didacticiels sur le karma
- Présentation des didacticiels sur le karma de cette série
- Qu'est-ce que le test d'unité frontale?
- Qu'est-ce que Karma Test Runner?
- Qu'est-ce que NodeJS?
- Comment installer Karma?
- Questions sur le Karma init
- Conclusion
Liste des didacticiels sur le karma
Tutoriel n ° 1: Tutoriel Karma: Test des unités frontales à l'aide de Karma Test Runner
Tutoriel n ° 2: Tutoriel Jasmine Framework incluant Jasmine Jquery avec des exemples
Tutoriel n ° 3: Exemple de projet sur les tests unitaires frontaux à l'aide de KARMA et JASMINE
Présentation des didacticiels sur le karma de cette série
Didacticiel # | Ce que vous apprendrez |
---|---|
Tutoriel_ # 1: | Tutoriel Karma: Test des unités frontales à l'aide de Karma Test Runner Ce didacticiel d'introduction explique tout sur la configuration de Karma et l'automatisation des tests d'unités frontales à l'aide de Karma, des options de configuration de base pour le fichier Karma.conf.js, etc. |
Tutoriel_ # 2: | Tutoriel Jasmine Framework incluant Jasmine Jquery avec des exemples Ce didacticiel couvre Jasmine Testing Framework et ses constructions. Découvrez également le package Jasmine-Jquery qui étend Jasmine aux applications de test Jquery. |
Tutoriel_ # 3: | Exemple de projet sur les tests unitaires frontaux à l'aide de KARMA et JASMINE Ce tutoriel montre comment écrire des spécifications de test pour un exemple de projet à l'aide de Karma & Jasmine. Vous apprendrez également rapidement à utiliser d'autres outils tels que gulp, browserify. |
Qu'est-ce que le test d'unité frontale?
Le front-end de tout système logiciel est simplement l'interface où l'utilisateur accède à toutes les fonctionnalités fournies par le système. Pour garantir la meilleure expérience utilisateur, il est nécessaire de s'assurer que les développeurs frontaux ont codé le front-end en gardant à l'esprit toutes les exigences des utilisateurs.
La seule façon de faire respecter cela est d’écrire et d’exécuter des tests sur les codes du développeur. Le livrable doit être accepté en tant que code / fonctionnalité frontale de qualité uniquement lorsque tous les résultats de ces tests sont dans le statut «réussite».
Le test unitaire est une sorte de méthode de test logiciel dans laquelle chaque partie individuelle et indépendante du code source est testée pour déterminer qu'elle est suffisamment bonne pour être utilisée.
quand nous effectuer ce test unitaire sur le front-end (côté client) du logiciel, il est appelé test unitaire frontal. Le contraire du test frontal est le test back-end (côté serveur).
Les tests unitaires frontaux peuvent être effectués manuellement ou automatiquement. Les tests unitaires frontaux automatisés sont à la mode ces jours-ci car ils sont plus efficaces et permettent de gagner du temps. Il existe divers outils disponibles pour les tests unitaires frontaux sur différentes plates-formes de programmation.
AngularJS et ReactJS sont deux frameworks JavaScript frontaux populaires, bien que ReactJS soit assez récent.
Pour effectuer des tests unitaires sur une application, les front-end construits avec ces frameworks frontaux ou même ceux construits sans les frameworks, certains outils de test d'automatisation comme Karma, moka, Jasmine, jest, enzyme, etc., sont utilisés.
Tout d'abord, nous apprendrions à effectuer des tests unitaires frontaux en utilisant Karma et Jasmine, puis, plus tard, nous pourrions également jeter un coup d'œil aux autres outils.
Nous commencerons par exécuter des tests unitaires frontaux en utilisant des fixtures pour les frontaux construits sans aucun des frameworks JavaScript pour les frontaux. Au total, nous diviserons nos apprentissages dans cette série en trois tutoriels.
Dans ce tout premier tutoriel, nous tenterions de comprendre comment Karma est mis en place, le deuxième tutoriel expliquera Jasmine en détail, enfin, dans le troisième tutoriel, nous examinerons son application pratique.
Qu'est-ce que Karma Test Runner?
Karma est un outil de test basé sur des nœuds qui vous permet de tester vos codes JavaScript sur plusieurs navigateurs réels. Un outil basé sur les nœuds est tout outil qui nécessite l'installation du moteur Nodejs pour s'exécuter et qui est accessible (installé) via le gestionnaire de packages de nœuds (npm).
Karma est un outil qui rend notre développement basé sur les tests rapide, amusant et facile. Il est techniquement qualifié de testeur. Il est à noter ici que Karma a été développé par l'équipe Angular.
Comment Karma fonctionne-t-il en tant que testeur?
En tant que testeur, Karma fait trois choses importantes:
- Il démarre un serveur Web et sert votre source JavaScript et vos fichiers de test sur ce serveur.
- Charge tous les fichiers source et test dans le bon ordre.
- Enfin, il lance les navigateurs pour exécuter les tests.
Que peut faire le karma?
En dehors des fonctions de Karma énumérées ci-dessus, il y a peu d'autres choses pour lesquelles Karma peut être configuré. Par exemple, pour publier la couverture de test de code sur coveralls.io ; transpilez un code du format es6 au format es5, regroupant plusieurs fichiers dans un seul fichier et générez des cartes source.
Dans nos tutoriels suivants, nous verrons comment certaines de ces choses fonctionnent.
Conditions requises pour démarrer avec Karma
Pour commencer avec Karma, vous devez avoir une compréhension de NodeJS et du gestionnaire de paquets Node.
Qu'est-ce que NodeJS?
Nodejs résout la nature bloquante des appels asynchrones JavaScript, c'est-à-dire que lorsqu'une fonction asynchrone est accessible en JavaScript, il empêche les autres parties du code de s'exécuter jusqu'au retour de l'appel asynchrone. Cependant, avec NodeJS, des appels de fonction non bloquants asynchrones peuvent être effectués.
En termes techniques, NodeJS peut être considéré comme un runtime JavaScript asynchrone piloté par les événements qui rend la création d'applications en réseau évolutives facile et possible.
Premiers pas avec NodeJS
Vous devez simplement installer le framework NodeJS. Tout ce que vous avez à faire est de visiter leur site Internet et, en fonction de votre système d'exploitation, vous devez télécharger le programme d'installation et suivre les instructions sur leur site concernant son installation.
Qu'est-ce que Node Package Manager (Npm)?
Le gestionnaire de packages de nœuds (npm) est un gestionnaire de packages JavaScript utilisé pour installer d'autres applications ou modules basés sur des nœuds prédéfinis que vous souhaiterez peut-être réutiliser dans votre propre application.
Npm est installé lorsque vous installez NodeJS, mais npm est mis à jour plus rapidement que le nœud. Par conséquent, il se peut que vous deviez mettre à jour votre npm à un moment donné. Pour installer la dernière version de npm, vous devez exécuter cette commande à partir de votre ligne de commande: npm installer npm @ dernier -g
La commande ci-dessus indique que vous demandez au shell du système d'exploitation d'exécuter l'application npm et que l'application doit effectuer l'installation du package npm. @latest indique que la dernière version du package doit être installée, l'option -g indique que le package doit être installé globalement.
Plus de détails sur npm peuvent être trouvés ici .
Il y a deux choses importantes à mentionner ici, à savoir l'installation d'un paquet avec l'option –save et –save-dev.
Pendant les tests, tout package installé doit être installé à l'aide de l'option –save-dev, c'est-à-dire pour demander au gestionnaire de packages d'installer le package en tant que dépendance de développement et non en tant que dépendance de projet (lorsque j'utilise –save).
La dépendance au développement doit être choisie car ce package n'est pas nécessaire à l'application pendant la phase de production mais n'est requis que pendant la phase de développement à des fins d'assurance qualité.
Comment installer Karma?
Pour démarrer avec Karma, vous devez créer un dossier pour le projet pour lequel vous êtes sur le point d'écrire les tests unitaires. Vous pouvez le nommer comme «basicUT». J'utilise Visual Studio Code comme éditeur de texte, c'est pourquoi je vous recommande également de le télécharger et de l'installer. Tu peux le trouver ici .
Ouvrez la fenêtre du terminal intégré de Visual Studio Code, cliquez sur «Menu Affichage», puis sélectionnez le sous-menu du terminal intégré.
Dans la fenêtre du terminal, tapez «npminit» comme indiqué dans la figure ci-dessous. Cette commande vous guide pour configurer automatiquement le fichier ‘package.json’ que chaque application basée sur un nœud doit avoir.
Le fichier package.json stocke des informations sur votre application telles que son nom, son numéro de version, son auteur, ses dépendances d'application, ses dépendances de développement, sa commande de test ou son script et son script pour démarrer l'application ou créer l'application sous une forme exécutable.
Cliquez sur ici pour plus de détails sur le fichier ‘package.json’.
Capture d'écran de l'initialisation d'un fichier package.json à l'aide de npminit
Comme décrit ci-dessus, pour installer Karma, il vous suffit d'exécuter la commande npm installe Karma @ latest –save-dev . J'espère que vous pouvez maintenant interpréter ce que cette commande implique.
Maintenant, nous avons installé Karma avec succès, quelle est la prochaine chose que vous devez faire pour utiliser Karma pour vos tests unitaires frontaux?
Tout ce que vous avez à faire est d'écrire le fichier de configuration correspondant, et le fichier est généralement nommé Karma.conf.js pour JavaScript. Cependant, c'est différent pour CoffeeScript. Cliquez sur ici pour en savoir plus sur le fichier de configuration Karma.
Vue d'ensemble des options de configuration du fichier Karma.conf.js
Le fichier de configuration Karma.conf.js doit contenir les instructions de configuration que Karma doit suivre pour exécuter les trois fonctions importantes de Karma.
Ce fichier de configuration peut être créé manuellement ou automatiquement en utilisant la commande: «karma init», qui commence à afficher différentes questions auxquelles vous devez répondre, et Karma utilise les réponses que vous fournissez pour configurer le fichier de configuration.
Vous auriez découvert maintenant que l’exécution de la commande: ‘karma init’, donne l’erreur ' «Karma» n’est pas reconnu comme un programme exécutable par commande interne ou externe ou comme un fichier séquentiel ».
En effet, Karma a été installé localement et non globalement sur le projet sur lequel vous travaillez. Par conséquent, le shell de votre système d'exploitation ne peut pas trouver l'application Karma dans ses paramètres d'environnement de chemin si vous utilisez Windows ou dans le fichier .bash_profile si vous utilisez Mac.
Pour corriger cette erreur, nous devons installer Karma globalement. Pas seulement Karma, mais le paquet spécifiquement conçu pour permettre l'utilisation de Karma sur la ligne de commande qui est Karma-cli. Exécutez simplement la commande, ′ Npm install -g karma-cli ’ .
Maintenant, relancez la commande karma-init, et vous pouvez voir les questions comme indiqué dans la figure ci-dessous. Lorsque vous répondez à chaque question et appuyez sur la touche «ENTER», la question suivante apparaîtra.
Exécution de la commande Karma init sur la ligne de commande.
Le tableau ci-dessous vous donnera une liste des questions, leur signification ainsi que votre réponse dans le cadre de ce tutoriel.
Questions sur le Karma init
Q # 1) Quel cadre de test souhaitez-vous utiliser?
Explication: Un framework de test est un package qui fournit les fonctions et les routines nécessaires pour automatiser le processus de codage des tests pour tout produit logiciel d'un langage particulier. Par exemple, jasmine et mocha testent des frameworks pour les progiciels JavaScript, Junit et JTest testent des frameworks pour Java, vérifiez ce pour plus de détails.
Répondre: Une instruction apparaît vous demandant d'utiliser l'onglet pour afficher d'autres frameworks de test disponibles pour une application basée sur des nœuds, mais par défaut, vous voyez jasmine, alors cliquez simplement sur Entrée.
Q # 2) Voulez-vous utiliser Require.js?
Explication: Require.js est un fichier JavaScript et un chargeur de module. Vous vous demandez peut-être: pourquoi avez-vous besoin d'un chargeur de fichiers ou de modules? Lire ce
Répondre: Dans le code que nous allons écrire, je n’utiliserais pas require.js, alors répondez simplement non. La question est de savoir ce que nous utiliserions? Pour pouvoir utiliser les instructions require pour importer des fichiers externes dans un autre fichier, nous avons besoin d'un chargeur de module, nous opterons donc pour Browserify. Vous verrez plus de détails ci-dessous.
Q # 3) Voulez-vous capturer automatiquement des navigateurs?
Explication: Rappelez-vous que karma est un outil qui vous aide à tester votre front-end sur différents navigateurs, par conséquent, cette question vous permet de sélectionner les navigateurs que vous aimeriez lancer à chaque fois que vous exécutez le test avec karma start.
Répondre: Pour cette leçon, sélectionnez Chrome, Firefox et Phantomjs. Maintenant, la question est qu'est-ce que PhantomJS? PhantomJS est un navigateur Web sans tête destiné aux tests de sites Web sans tête, à la capture d'écran, à l'automatisation des pages et à la surveillance du réseau, vous pouvez voir les détails ici .
Une autre question, qu'est-ce qu'un navigateur Web sans tête? Un navigateur Web sans tête est un navigateur sans interface utilisateur graphique, les codes sont exécutés dans un environnement de type console.
Q # 4) Quel est l'emplacement de vos fichiers source et de test?
Explication: Cette question est destinée à exposer le chemin où vous allez enregistrer les fichiers frontaux et les fichiers de test qui effectueront des tests unitaires sur eux.
Répondre: Pour ce projet, entrez public / js / *. Js pour le chemin des fichiers source et test / * Spec.js pour le chemin des fichiers de test. Le * Spec.js indique que tous les fichiers de test peuvent être appelés n'importe quoi mais doivent contenir Spec à la fin avec une extension de fichier .js.
Q # 5) Est-ce que l'un des fichiers inclus dans les modèles précédents devrait être exclu?
Explication: Parfois, il peut être nécessaire que certains fichiers sources et fichiers de test ne soient pas chargés, cette question vous permet de spécifier ces fichiers qui ne doivent pas être chargés dans le navigateur par Karma.
Répondre: Entrez simplement une chaîne vide en appuyant sur Entrée. Avez-vous vu l'instruction 'Vous pouvez utiliser des modèles globaux, Par exemple, «** / *. Swp». ». Les modèles globaux sont utilisés pour spécifier un ensemble de noms de fichiers dans un environnement de type Unix en utilisant le caractère générique.
Dans notre cas, public / js / *. Js représente tout fichier nommé n'importe quel jeu de caractères comme indiqué par (*) et a l'extension de fichier .js et réside dans le chemin public / js. Lire la suite ici
Q # 6) Voulez-vous que Karma surveille tous les fichiers et exécute les tests de changement?
Explication: Lorsqu'un lanceur de tâche / test regarde vos fichiers, tout cela signifie simplement que chaque fois que vous modifiez les fichiers pendant le développement, le lanceur de test / tâche, recharge le fichier ou réexécute sa fonction sur le fichier, sans que vous veniez demander manuellement pour le faire à nouveau.
Répondre: Alors répondez simplement oui.
Autre contenu du fichier karma.conf.js
# 1) basePath : Cette configuration porte le nom de tout dossier qui doit être utilisé pour résoudre les informations de chemin fournies pour les fichiers de test et source.
# 2) préprocesseurs : Ceci porte le nom des fichiers programme qui doivent être utilisés pour traiter les fichiers source et de test avant de les charger dans le navigateur.
Pourquoi est-ce nécessaire?
Avec l'avènement du style de codage ES6 qui n'est pas encore compris par les navigateurs, il est nécessaire de transpiler le code du format ES6 vers ES5 que le navigateur peut comprendre, par conséquent, le préprocesseur babel pour Karma peut être spécifié pour être utilisé pour transpiler le code entre ES6 et ES5 avant de le charger dans le navigateur.
Il existe d'autres utilisations d'un préprocesseur, Par exemple. publication de couverture de test de code sur coveralls.io, voir ici pour plus de détails.
# 3) journalistes : Cette option de configuration spécifie le package à utiliser pour rapporter les résultats du test. Il existe plusieurs rapporteurs pour signaler la couverture des tests de code; Par exemple. couverture. Mais, par défaut, il est configuré pour progresser. Notez qu'il s'agit d'un tableau, vous pouvez donc également ajouter d'autres journalistes.
# 4) port : Ceci spécifie le port sur lequel le navigateur est lancé.
# 5) couleurs : Spécifie si les journalistes doivent produire les rapports avec des coloris.
# 6) logLevel : Ceci spécifie le niveau de journalisation. Par défaut, il est défini sur config.LOG_INFO, ce qui signifie que seules les informations sont enregistrées.
# 7) singleRun : Ceci spécifie si Karma doit quitter après avoir exécuté le test une fois. S'il est défini sur true, Karma exécute le test et sort avec le statut 0 ou 1 selon que le test a échoué ou réussi, sinon Karma ne s'arrête pas.
Cette configuration est requise à des fins de test d'intégration continue à l'aide d'outils tels que TravisCI et CircleCI.
# 8) Concurrence : Ceci spécifie combien de navigateurs Karma doit démarrer en même temps. Par défaut, il est défini sur l'infini.
Cliquez sur ici pour des informations détaillées sur les options de configuration de Karma.
Si vous êtes un apprenant attentif, vous devez avoir vu ces trois lignes.
23 03 2017 15:47:54.912:WARN [init]: Failed to install 'Karma-firefox-launcher' Please install it manually. 23 03 2017 15:47:54.913:WARN [init]: Failed to install 'Karma-chrome-launcher' Please install it manually. 23 03 2017 15:47:54.914:WARN [init]: Failed to install 'Karma-phantomjs-launcher' Please install it manually.
Explorons cela dans la section ci-dessous.
Lanceurs de navigateur Karma
Karma-firefox-launcher, Karma-chrome-launcher et Karma-phantomjs-launcher peuvent être généralement appelés les lanceurs de navigateur pour Karma.
Karma a besoin de lancer ces applications de navigateur qui sont indépendantes, donc une application tierce est nécessaire pour fournir une interface à Karma pour exécuter la commande shell qui fait tourner les navigateurs dans tout système d'exploitation sur lequel Karma exécute un test.
Ainsi, ce sont des lanceurs de navigateur Karma pour firefox, chrome et phantomjs respectivement. Karma affiche ces déclarations pour nous informer de son incapacité à installer ces exigences et il nous demande ensuite de l'installer nous-mêmes manuellement.
Pour ce faire, nous utiliserons le gestionnaire de packages de nœuds et exécuterons ces commandes à partir de la ligne de commande: npm installer Karma-chrome-launcher Karma-firefox-launcher Karma-phantomjs-launcher –save-dev
Nous devons tous avoir des navigateurs Chrome et Firefox installés, sans phantomjs. Si tel est le cas, vous devez l’installer, voir ici pour plus de détails et cliquez sur ici pour un guide de démarrage rapide.
Conclusion
Dans ce didacticiel, nous avons tenté de comprendre en quoi consistait le test unitaire frontal. Nous avons également introduit un important outil de test unitaire frontal pour le logiciel JavaScript appelé Karma, qui est un outil basé sur des nœuds. Nous avons également présenté les options de configuration de base pour le fichier Karma.conf.js et ce qu'elles impliquent.
no 1 convertisseur vidéo gratuit en ligne sur youtube une vidéo
À emporter
- Le test unitaire est une sorte de méthode de test de logiciel dans laquelle chaque partie individuelle et indépendante du code source est testée pour déterminer si elle est suffisamment bonne pour être utilisée.
- Lorsque nous effectuons ce test unitaire sur le front-end (côté client) du logiciel, il est connu sous le nom de test unitaire frontal.
- Karma est un outil de test basé sur des nœuds qui vous permet de tester vos codes JavaScript sur plusieurs navigateurs réels. Par conséquent, il est appelé test-runner.
- Nodejs est un JavaScript d'exécution asynchrone piloté par les événements qui facilite et rend possible la création d'applications en réseau évolutives.
- Le gestionnaire de packages de nœuds (npm) est un gestionnaire de packages JavaScript utilisé pour installer d'autres applications ou modules basés sur des nœuds prédéfinis que vous souhaiterez peut-être réutiliser dans votre propre application.
Karma seul ne peut pas automatiser les tests unitaires frontaux des applications JavaScript, il doit également fonctionner avec d'autres outils de test comme un framework de test qui facilitera l'écriture de nos cas de test.
Dans notre prochain didacticiel, nous explorerons Jasmine et le package Jasmine-Jquery qui étend les fonctionnalités de Jasmine pour pouvoir tester les montages HTML qui utilisent la bibliothèque JavaScript: Jquery.
lecture recommandée
- 20 outils de test unitaire les plus populaires en 2021
- La clé du succès des tests unitaires - Comment les développeurs testent leur propre code?
- TOP 45 des questions d'entrevue JavaScript avec des réponses détaillées
- Tutoriel AngularJS pour les débutants absolus (avec guide d'installation)
- Différence entre les versions angulaires: Angular Vs AngularJS
- Couverture des tests dans les tests logiciels (conseils pour maximiser la couverture des tests)
- 48 Questions et réponses sur les entretiens avec AngularJS [LISTE 2021]
- Comment configurer le framework de test Node.js: Tutoriel Node.js