Au début, il y avait une fonction et l'appelait en un seul endroit. Ensuite, nous voulions l'appeler dans un autre endroit avec de nouvelles fonctionnalités et la mettre à jour. Nous avons tellement aimé ce ff que nous l'avons appelé en troisième place et que nous avons quand même apporté des modifications fonctionnelles et ... en premier lieu, quelque chose s'est mal passé. Comment le découvrir? Vérifiez dans tous les endroits où nous avons utilisé cette fonction, tout fonctionne correctement? C'est possible, mais il vaut mieux utiliser des tests unitaires.
Bonjour à tous. Connecté anonyme depuis le bac à sable. Vous pouvez trouver la bonne façon de tester votre code dans les premières lignes du moteur de recherche, mais vous devez bricoler avec la configuration de l'environnement. Donc, aujourd'hui, je veux aider les développeurs novices à configurer l'environnement de test unitaire de leur code.
PS - il est logique de lire l'article plus loin si le lecteur a maîtrisé le travail avec npm ou un gestionnaire de paquets similaire.
Commençons par de petites définitions:
- le test unitaire est une technologie dont le but est de réduire la probabilité d'erreurs et d'effets secondaires (lorsqu'un autre bug est introduit lors de la correction d'un bug).
- karma est un outil qui vous permet d'exécuter des tests de script java dans les navigateurs.
- jasmine est un framework pour tester le code javasctript.
Les instructions d'installation de Karma (comme beaucoup d'autres) indiquent que les packages doivent être installés localement dans le projet.
# Install Karma: $ npm install karma --save-dev
# Install plugins that your project needs: $ npm install karma-jasmine karma-chrome-launcher jasmine-core --save-dev
Pour plus de commodité, nous pouvons également installer karma-cli npm install -g karma-cli , sinon les commandes seront disponibles à partir du terminal comme ceci ./node_modules/karma/bin/karma .
Ensuite, nous pouvons créer un fichier de configuration:
karma init karma.conf.js
- Tout d'abord, il nous sera demandé le cadre de test utilisé. (jasmin)
- Utilisons-nous le chargeur de fichiers / modules Require.js. (Non)
- Quels navigateurs nous voulons afficher (Chrome)
- Quels fichiers écoutons-nous? (* [Ss] pec.js)
- Si des fichiers sont exclus
- Dois-je surveiller les changements de test (oui)
Après avoir répondu aux questions, nous aurons un fichier de configuration.
Fichier de configuration // Karma configuration // Generated on Thu May 09 2019 18:54:02 GMT+0300 (RTZ 2 ()) module.exports = function(config) { config.set({ // base path that will be used to resolve all patterns (eg. files, exclude) basePath: '', // frameworks to use // available frameworks: https://npmjs.org/browse/keyword/karma-adapter frameworks: ['jasmine'], // list of files / patterns to load in the browser files: [ '*[Ss]pec.js' ], // list of files / patterns to exclude exclude: [ ], // preprocess matching files before serving them to the browser // available preprocessors: https://npmjs.org/browse/keyword/karma-preprocessor preprocessors: { }, // test results reporter to use // possible values: 'dots', 'progress' // available reporters: https://npmjs.org/browse/keyword/karma-reporter reporters: ['progress'], // web server port port: 9876, // enable / disable colors in the output (reporters and logs) colors: true, // level of logging // possible values: config.LOG_DISABLE || config.LOG_ERROR || config.LOG_WARN || config.LOG_INFO || config.LOG_DEBUG logLevel: config.LOG_INFO, // enable / disable watching file and executing tests whenever any file changes autoWatch: true, // start these browsers // available browser launchers: https://npmjs.org/browse/keyword/karma-launcher browsers: ['Chrome'], // Continuous Integration mode // if true, Karma captures browsers, runs the tests and exits singleRun: false, // Concurrency level // how many browser should be started simultaneous concurrency: Infinity }) }
Créez un autre fichier de test.
Fichier test // test.spec.js describe("A suite is just a function", function() { var a; it("and so is a spec", function() { a = true; expect(a).toBe(true); }); it("and so is a spec", function() { a = true; expect(a).toBe(false); }); });
Nous pouvons déjà voir comment fonctionne notre test en exécutant la karma start karma.conf.js , mais je recommande d'attendre un peu et de créer des modules complémentaires.
Installez le package npm i -D karma-jasmine-html-reporter , qui affiche dynamiquement les résultats du test dans le navigateur. Ajoutons la configuration du karma:
... reporters: ['progress', 'kjhtml'], client: { clearContext: false // leave Jasmine Spec Runner output visible in browser }, ...
Maintenant, nous sommes tous prêts. Nous lançons karma start karma.conf.js et procédons à nos premiers tests: D