attendre karma

Ce projet est basé sur James Shore: le code Let: Test Driven cours Javascript (chapitre 7, Cross-Browser Testing). Nous allons mettre en place un cadre de test côté client à l'aide Grunt comme tâche coureur, Karma comme test coureur, Mocha comme cadre de tests et attendre comme une bibliothèque affirmation.

Karma est un coureur de test. Vous pouvez tester votre code javascript sur de nombreux navigateurs en même temps. Le processus de test peut être automatisé, et il peut être exécuté automatiquement votre changement de code. Comme sa page d'accueil dit

Karma est essentiellement un outil qui génère un serveur Web qui exécute le code source contre code de test pour chacun des navigateurs connectés. sont examinés les résultats pour chaque test contre chaque navigateur et affiché via la ligne de commande pour le développeur de telle sorte qu'ils peuvent voir quels navigateurs et les tests passés ou échoué.

Karma fonctionne sur Node.js. Si vous travaillez sur une machine Windows, ou vous ne l'avez pas encore utilisé Node.js, ce poste peut vous aider à essayer ces outils. Ok, donc, nous allons installer Karma.

(On suppose que vous avez installé Node.js et vous avez un fichier package.json dans votre répertoire de travail)

Une fois l'installation faire un script qui peut lancer Karma:

Courir Karma sans paramètre que nous obtenons ce message:

Maintenant, nous pouvons initialiser Karma:

Nous devons installer Mocha (ou autre framework de test) à utiliser Karma. En plus Mocha, nous installons le karma-mocha, un adaptateur pour Mocha:

Maintenant, nous pouvons démarrer le serveur Karma:

Comme vous pouvez le voir serveur Karma a commencé à l'adresse http: // localhost: 9876 /. Je vous lance un navigateur et tapez cette adresse, le Karma se connecte au navigateur:

Vous pouvez connecter autant de navigateurs que vous le souhaitez (consultez les navigateurs disponibles ici). Si vous voulez lancer un navigateur à partir Virtualbox (par exemple IE8 sous Windows), voici quelques bons conseils sur la façon de répondre à localhost.

Nous avons serveur Karma, mais rien à tester encore. Installons-karma attendre, l'adaptateur Expect.js premier:

Ensuite, nous devons ajouter attendre à des cadres dans le fichier de configuration Karma (karma.conf.js):

Écrivons un test simple qui compare deux chaînes:

Maintenant à nouveau démarrer le serveur Karma (parce que nous avons modifié le fichier de configuration tout à l'heure), et le test dans un autre terminal (et assurez-vous connecté au moins un navigateur Karma):

Nous allons utiliser Grunt pour l'automatisation des tâches. Le flux de travail est le suivant:

  • démarrer le serveur Karma
  • lancer les navigateurs manuellement (si vous utilisez la machine virtuelle pour certains navigateurs exotiques, démarrer la machine et de lancer les navigateurs là-bas)
  • connecter les navigateurs au serveur Karma (voir ci-dessus)
  • commencer à grogner
  • grunt court Karma pour tester votre code, et vérifie si les tests de réussite ou d'échec

D'abord, vous devez Grunt. Après avoir installé Grunt exécutons-le:

Nous devons créer un simple Gruntfile et configurer Karma (ou si existe Gruntfile, ajoute Karma à ce sujet). Nous accomplirons cela avec Node.js child_process.exec ():

Grunt fonctionne de manière synchrone, mais il peut être commuté asynchrone en appelant this.async () dans le corps de la tâche (pour plus d'informations, voir la documentation Grunt).

Vous pouvez obtenir une rétroaction si les tests passés. Selon la documentation Node.js l'argument d'erreur - obtenir le rappel - sera nulle en cas de succès. Tout ce que nous devons faire passe faux au fait () pour signaler à Grunt si les tests ont échoué.

Si nous commençons serveur Karma, lancez nos navigateurs et les connecter, et courons Grunt, nous pouvons voir ce qui suit:

Et seulement avec Chrome, nous allons voir ce qui se passe si le test échoue:

Notre objectif était de mettre en place un cadre simple de test multi-navigateur, en utilisant Karma. Nous avions besoin d'un cadre d'essai - il était Mocha - et une bibliothèque affirmation (j'ai choisi Expect.js). Tout d'abord, nous avons installé Karma et configuré, puis installé un adaptateur Mocha et Expect.js pour Karma. Après installation, nous avons pu démarrer le serveur Karma et connecter les navigateurs à elle. Nous avons écrit un test simple, annonce couru avec Karma. Nous voulions automatiser le test en marche, en utilisant Grunt, le coureur de la tâche. Nous avons configuré une tâche qui peut lancer Karma comme un processus enfant et vérifier si les tests passent ou échouent.

Comme je travaillais sur la mise en place du cadre, j'ai essayé grunt-karma, un plugin runner Karma pour Grunt. Il est vraiment utile, vous pouvez simplement configurer Karma avec cela. Après avoir installé des plugins supplémentaires lance-navigateur, vous n'avez pas besoin de commencer Karma et se connecter manuellement le navigateur, Grunt fait le travail, il démarre le serveur, lance les navigateurs données, exécuter les tests, ferme les navigateurs et le serveur Karma (Single Mode course). Au-delà, vous pouvez définir - chaque fois que vos fichiers de test sont modifiés - pour exécuter Karma automatiquement. Mais j'ai eu des difficultés quand j'ai essayé de connecter les navigateurs lancés dans la machine virtuelle (ai-je besoin vm pour exécuter différents types d'Internet Explorers). Le coureur Karma ne pouvait pas voir que les navigateurs. J'ai essayé « nœud virtualbox », et beaucoup de plugins qui fonctionne avec des machines virtuelles, mais je ne pouvais pas mise au point de travailler avec eux pour le plugin grognement karma. Après avoir expérimenté avec grunt-karma, je l'ai laissé et trouvé un flux de travail, qui doit démarrer le serveur Karma et les navigateurs données manuellement, mais les tests peuvent être automatisés par Grunt.


Tests unitaires React.js Avec Jasmine et Karma

Je suis mentionnais React.js plusieurs fois avant. Récemment, j'eu l'occasion de jouer avec près.

Je voulais aussi faire dès le début. Je voulais des tests unitaires.

Mon choix du cadre est Jasmine

Recherche rapide par exemple de travail n'a donné que cette


Code Couverture de Jasmine tests à l'aide d'Istanbul et Karma

Pour le développement d'applications web moderne, ayant des dizaines de tests unitaires ne suffit plus. La couverture de code réel de ces tests révélerait si l'application est bien souligné ou non. Pour les tests écrits en utilisant la célèbre bibliothèque de test Jasmine, un moyen facile d'avoir le rapport de couverture est via Istanbul et Karma.

Pour cet exemple, supposons que nous avons une simple bibliothèque sqrt.js qui contient une implémentation alternative de Math.sqrt. A noter également la façon dont il lancera une exception au lieu de retourner NaN pour une entrée non valide.

L'utilisation Jasmine placé sous test / lib / jasmin-1.3.1, nous pouvons concevoir un coureur de test qui comprend les spécifications suivantes:

Ouverture du coureur de spec dans un navigateur Web donnera les résultats escomptés:

Karma attendre

Jusqu'ici tout va bien. Maintenant, nous allons voir comment mesurer la couverture de code de notre configuration de test.

Le premier ordre du jour est d'installer Karma. Si vous n'êtes pas familier avec Karma, il est essentiellement un coureur de test qui peut lancer et se connecter à un ensemble spécifique de navigateurs web, exécutez vos tests, puis recueillir le rapport. En utilisant Node.js, ce que nous devons faire est la suivante:

Avant de lancer Karma, nous avons besoin de spécifier sa configuration. Il pourrait être aussi simple que les my.conf.js suivants (la plupart des entrées sont auto-expliqué). Notez que les tests sont exécutés à l'aide PhantomJS pour la simplicité, il est cependant tout à fait trivial d'ajouter d'autres navigateurs Web tels que Chrome et Firefox.

L'exécution des tests, ainsi que l'exécution de couverture de code en même temps, peut être déclenchée via:

qui décharge la sortie comme:

Comme prévu (de l'appel manuel précédent du coureur spec), le test a réussi très bien. Cependant, la pièce la plus intéressante est particulièrement ici le rapport de couverture de code, il est stocké (dans l'emplacement par défaut) sous la couverture sous-répertoire. Ouvrez le rapport dans votre navigateur préféré et vous y trouverez le rapport d'analyse de couverture.

Karma attendre

Derrière la scène, Karma utilise Istanbul, un outil de couverture de code JavaScript complet (lire mon blog précédent sur le code JavaScript avec la couverture Istanbul). Istanbul parse le fichier source, dans cet exemple sqrt.js, en utilisant Esprima et ajoute des fonctionnalités supplémentaires instrumentation qui sera utilisé pour recueillir les statistiques d'exécution. Le rapport ci-dessus que vous voyez est l'une des sorties possibles, Istanbul peut également générer un rapport lcov qui convient à de nombreux systèmes d'intégration continue (Jenkins, TeamCity, etc.). Une analyse approfondie des données de couverture devrait également empêcher toute régression de la couverture future, consultez mon autre post dur sur le code JavaScript Seuils couverture.

Une chose importante à propos de la couverture de code est couverture des branches. Si vous faites attention soigneusement, notre test ci-dessus est toujours pas qu'exercer la situation où l'entrée My.sqrt est négative. Il y a un grand &# 8220; I&# 8221; marquage dans la troisième ligne du code, cela Istanbul nous dit que le si branche n'est pas pris du tout (pour le autre branche, ce sera un &# 8220; E&# 8221; marqueur). Une fois que cette branche manquante est remarqué, l'amélioration de la situation est aussi facile que l'ajout d'un autre test à la spécification:

Une fois que le test est exécuté à nouveau, le rapport de couverture de code semble bien meilleur et tout le monde est heureux.


Tests unitaires avec Karma et Jasmine angulaire 2

Karma attendre

Angulaire 2 offre des options multiples pour soutenir les tests unitaires. Ici, nous verrons comment configurer Jasmine, Karma et écrire des tests unitaires communs pour vos 2 angulaires Applications.

  • Préparation du package.json de nouvelles bibliothèques
  • Introduction à Jasmine et Karma
  • Mise en place Karma
  • Le premier test de karma
  • Test de 2 composants angulaires avec Jasmine

Pour se rendre à l'amusement le plus rapidement possible, nous pouvons commencer un nouveau projet en suivant les instructions du QuickStart. Et assurez-vous que la structure du dossier du projet ressemble à ceci:

préparation de la package.json pour de nouvelles bibliothèques

modifier la &# 8220; scripts&# 8221; propriété dans le package.json comme suit:

Nous avons inclus un certain nombre de scripts NPM nos suggestions package.json pour gérer les tâches de développement commun. Voici ce que ces scripts:

  • NPM début - exécute le compilateur et un serveur en même temps, aussi bien en mode « veille »
  • lite run NPM - court le lite-serveur, un poids léger, serveur de fichiers statique avec un excellent support pour des applications angulaires qui utilisent le routage.
  • NPM course postinstall - appelé par NPM automatiquement après avoir terminé avec succès l'installation du package. Ce script installe les fichiers de définition dactylographiée définis dans typings.json.
  • test de course NPM &# 8211; compile les dactylographiées, exécute des tests unitaires, puis ouvrez le rapport généré
  • NPM course tsc - court une fois que le compilateur tapuscrit
  • NPM exécuter tsc: w - exécute le compilateur dactylographiée en mode veille; le processus continue à fonctionner, en attente de modifications apportées aux fichiers et tapuscrit recompilation quand il les voit
  • NPM exécuter typages - exécute l'outil de typages séparément

, Nous avons aussi besoin d'installer le karma et toutes les autres dépendances. Nous allons modifier la &# 8220; devDependencies&# 8221; propriété comme suit:

En utilisant NPM de la ligne de commande, installez les paquets listés dans package.json avec la commande:

En utilisant une fenêtre de terminal, nous allons besoin de changer dans le répertoire que nous travaillons avant d'utiliser les commandes

messages en erreur rouge peuvent apparaître lors de l'installation, et vous pouvez voir NPM WARN messages. Tant qu'il n'y aura pas ERR NPM! messages à la fin, vous pouvez considérer le succès.

Introduction à Jasmine et Karma

Jasmin est un framework de test open source Pivotal Labs qui utilise la notation axée sur le comportement résultant en une expérience de test fluide et amélioration.

  • Suites - décrire (string, fonction) fonctions, prendre un titre et une fonction contenant un ou plusieurs spécifications.
  • spécifications techniques - il (string, fonction) fonctions, prendre un titre et une fonction contenant un ou plusieurs attentes.
  • Les attentes - sont des affirmations qui évaluent à vrai ou faux. La syntaxe de base lit attendre (réelle) .toBe (prévu)
  • Matchers - sont des aides prédéfinies pour les assertions communes. Par exemple: Tobe (attendu), toEqual (attendu). Trouvez une liste complète ici.

Le coureur de test de karma est idéal pour l'écriture et l'exécution des tests unitaires tout en développant l'application. Il peut faire partie intégrante du projet&# 8217; s le développement et les processus d'intégration continue. Ce chapitre décrit comment installer et exécuter des tests avec le karma.

Avec angulaire 2, Karma a besoin d'un type de fichier d'initialisation qui différentier nos fichiers d'applications de nos fichiers de test et il charge le systemjs.config.js fichier dans le cadre de ce processus .. Nous allons ajouté un fichier nommé karma-test-shim.js dans notre répertoire racine comme ci-dessous:

Karma a également besoin d'un fichier de configuration qui définit quels fichiers doivent être chargés et ce que les navigateurs devraient être utilisés pour les tests. Ce nouveau fichier appelé karma.conf.js sera ajouté à notre répertoire racine:

nous&# 8217; vais commencer par un test simple pour vous assurer que la configuration fonctionne correctement. Il&# 8217; est souvent préférable de créer un dossier approprié pour eux dans le répertoire des tests. Alors on&# 8217; allons créer un nouveau fichier appelé 1st.spec.ts dans l'application / tests dossier.

Les épreuves écrites dans Jasmine sont appelées spécifications. L'extension de nom de fichier doit être .spec.ts, la convention respectée par karma.conf.js et d'autres outils.

Mettez les fichiers spec quelque part dans l'app /. le karma.conf.js dit karma pour rechercher des fichiers de spécifications il

Ajoutez le code suivant à app / tests / 1st.spec.ts:

Compiler et exécuter dans le karma de la ligne de commande.

Après quelques instants, le karma ouvre un navigateur et commence à écrire à la console.

De plus, nous pouvons voir le mode de débogage en cliquant sur le &# 8220; DEBUG&# 8221; bouton; il ouvre un nouvel onglet du navigateur et des rediffusions les tests.

Cette commande compile d'abord l'application, puis en même temps re-Compile et exécute le test-coureur de karma. Tant le compilateur et la montre de karma pour les changements de fichiers (différents).

Éteindre manuellement avec Ctrl-C.

Test de 2 composants angulaires avec Jasmine

nous&# 8217; ajouterons le fichier nommé app / app.component.spec.ts se trouve dans le même dossier en tant que composant.

Commencez par des déclarations d'importation ES6 pour obtenir l'accès aux symboles mentionnés dans les spécifications:

Ici&# 8217; s la configuration pour les essais suivis par des observations au sujet de la beforeeach:

Ne configurez pas le Testbed après avoir appelé createComponent.

Maintenant passons à re-compiler et exécuter dans le karma de la ligne de commande et de voir les modifications du mode de débogage de vue.

Sortie test-runner apparaît dans la fenêtre du terminal. Nous pouvons mettre à jour notre application et nos tests en temps réel, en gardant un œil météo sur la console pour les tests cassés. Le karma est parfois confus et il est souvent nécessaire de fermer son navigateur ou même fermer la commande vers le bas (Ctrl-C) et redémarrez-le. Pas de soucis; il&# 8217; s assez rapide.

nous allons vérifier que nous avons la structure suivante:

Le dépôt de ce projet est disponible à ici.


runkit + Karma attendre

Ceci est un terrain de jeu au code de test. Il gère un environnement Node.js complet et a déjà tous 400.000 paquets pré-installés, y compris karma-expect-maptalks de MNP avec tous les paquets installés MNP. Essaye le :

Ce service est fourni par runkit et n'est pas affilié à NPM, Inc ou les auteurs de l'emballage.