Юнит тесты: 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  хорошо расписаны основные переменные конфигурационного файла.

Буду рада комментариям, задавайте вопросы, делитесь опытом  🙂

Хотите быть в курсе новых статей?