Юнит тесты: Jasmine Karma Gulp
Сегодня поговорим на тему запуска юнит-тестов.
На вопросы что такое юнит тесты (unit-tests) и зачем их нужно писать — ответы найти в интернете не очень сложно.
Но практических свежих примеров со сборкой необходимых файлов через Gulp и с запуском через Karma тестов, написанных на Jasmine, я не нашла, поэтому решила этот вопрос осветить.
Начнем по порядку.
Jasmine
Jasmine — BDD фреймворк для тестирования javasctript кода. Подробнее о нем я писала в посте юнит тесты на Jasmine.
Karma
Karma — инструмент, позволяющий запустить java-script тесты в браузерах. В конфигурационном файле karma.conf.js мы прописываем различные параметры: используемые фреймворки, базовый путь, браузер, в котором запускать тесты, файлы для теста и прочие.
У меня этот файл довольно минималистичен и выглядит так:
module.exports = function (config) { config.set({ basePath: '..', frameworks: ['jasmine' ], reporters: ['progress'], browsers: ['PhantomJS'], logLevel: config.LOG_INFO, plugins: [ 'karma-coffee-preprocessor', 'karma-phantomjs-launcher', 'karma-jasmine' ], preprocessors: { 'app/scripts/*.coffee': ['coffee'], 'app/scripts/widgets/*.coffee': ['coffee'], 'app/scripts/widgets/**/*.coffee': ['coffee'] } }) };
basePath — путь, который будет использоваться для получения файлов. В моем случае файлов .coffee для препроцессора.
frameworks — фреймворки, которые необходимы для работы тестов. У меня только jasmine, так как все остальное (клиентские компоненты) я получаю, подключая папку с bower-компонентами через gulp.
reporters — выбираем репортера, т.е. в каком виде будут результаты теста. По-умолчанию это progress — просто вывод результатов в консоль.
browsers — браузер, в котором будут тесты запускаться. У меня стоит консольный браузер — PhantomJS, так как смысла запускать для выполнения моих тестов, допустим, Хром нет.
logLevel — тут можно выбрать, что выводить в консоль. Например, в режиме config.LOG_INFO мне выводится только самая необходимая информация, чтоб я знала, что тесты запустились. А в режиме config.LOG_DEBUG информация более детальная, помогающая найти ошибку, если что-то пошло не так.
plugins — тут перечислены необходимые для запуска тестов плагины. Они все серверные, так что через bower в gulp файле их не получить.
‘karma-coffee-preprocessor’ мне нужен, чтобы coffee файлы перед выполнением тестов переводились в javascripts.
‘karma-phantomjs-launcher’ — позволяет запускать тесты в браузере PhantomJS.
‘karma-jasmine’ — без этого плагина Karma и Jasmine не сработаются.
И наконец в переменной preprocessors перечислены все файлы в формате coffee, которые я собираюсь тестировать. Также указано, что они в в формате [‘coffee’].
Gulp
Зачем же нам нужен еще и Gulp? С помощью него удобно подключить все необходимые файлы из сборщика bower.
Ниже в файле мы сначала подключаем gulp, затем wiredep для того, чтобы затем подключить все компоненты из папки bower-компонентов. Далее — карма-сервер.
'use strict'; var gulp = require('gulp'); var wiredep = require('wiredep'); var Server = require('karma').Server;
И начинаем собирать необходимые файлы. Сначала bower компоненты, затем к ним добавляем все остальное. Это и файлы,с функциями, которые тестируем, и те файлы, которые для выполнения кода необходимы и файл с самим тестом.
var bowerDeps = wiredep({ directory: 'app/bower_components', exclude: [], dependencies: true, devDependencies: true }); var testFiles = bowerDeps.js.concat([ '.tmp/js/templates.js', 'app/scripts/*.coffee', 'app/scripts/widgets/*.coffee', 'app/scripts/widgets/**/*.coffee', 'test/uniFrame/tests.js' ]);
Далее я определяю две gulp-задачки: отличаются они только названием да значением singleRun (true или false), которое определяет будет ли karma после выполнения тестов завершать работу, или же продолжит работать, отслеживая изменения в файлах.
Таким образом, мы будет сразу видеть в консоли порушили ли наши изменения корректную работу кода.
gulp.task('test', function (done) { new Server({ configFile: __dirname + '/karma.conf.js', singleRun: true, files: testFiles }, function(err){ if(err === 0){ done(); } }).start(); }); gulp.task('tdd', function (done) { new Server({ configFile: __dirname + '/karma.conf.js', singleRun: false, files: testFiles }, function(err){ if(err === 0){ done(); } }).start(); });
Для запуска теста пишем в консоли gulp test, а для запуска тестов и отслеживания изменений — gulp tdd.
Также замечу, что файл karma.conf.js у меня лежит в папочке gulp, где поживает и описанный выше файл.
На этом всем. В итоге получилось слишком сложно?
Можно запускать по-другому?
На самом деле можно запустить все и без Karma.
У меня все неплохо запускалось через ‘gulp-jasmine-browser’ компонент, который я подключала в gulp файле. Однако, в таком случае тесты в jasmine файле выполнялись не корректно, возникала проблема с асинхронностью их выполнения, которая мне была необходима.
С другой стороны тесты можно запускать и чисто через карму, но у меня подключение через нее всех необходимых файлов вызвало затруднее.
В общем, тесты можно запускать разными способами. Это лишь один из вариантов, и возможно не оптимальный.
Главный вывод, который я сделала после работы с этой темой — больше всего информации и ответов на свои вопросы можно получить из исходных файлов компонентов. В простом случае, например, в файле node_modules/karma/config.tpl.coffee хорошо расписаны основные переменные конфигурационного файла.
Буду рада комментариям, задавайте вопросы, делитесь опытом 🙂