Unit testing: Jasmine Karma Gulp

You can find a lot of articles about unit tests: why we need this, how to write etc. But I haven`t found fresh examples about my situation.
I wanted to run jasmine test via karma and build all necessary files with gulp.
So, I decided to publish my final solution.
Let’s look on our characters.

Jasmine

Jasmine – is a behavior-driven development framework for testing JavaScript code. More about Jasmine. I wrote my test using jasmine.
But how to run it?

Karma

Karma – tool for running  java-script tests in browsers.

In the karma.conf.js file we point different options: used frameworks, base path, running-testing browser, files for testing etc.

My file looks quite minimalistic.

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 – path for getting files.  In this case – coffee files for

preprocessor.

frameworks – all necessary frameworks for test work. In this case it is only jasmine, because I get other components (client) to connect bower-components folder using a gulp.

reporters – set reporter, i.e. the view of code result. The default is  progress – just output results in console.

browsers –  browser in which tests will be run. I installed only PhantomJS, because there is no sense to run Chrome for performing my tests.

logLevel –   you can choose what will be output in the console. For example, in config.LOG_INFO  mode only the most relevant information will be shown.  It is a message about running.

The config.LOG_DEBUG mode will show more detailed information. It is useful for searching errors.

plugins – there are all necessary plugins for running tests. They are server plugins, so we can`t get them via bower in gulp file.

‘karma-coffee-preprocessor’ – it is for compiling coffee files into javascript for running in the browser.
‘karma-phantomjs-launcher’ – it allows to run tests in  PhantomJS browser.
‘karma-jasmine’ – adapter for the Jasmine testing framework.

Finaly, in preprocessors we set all coffee files, which we want to test.

Also, they are indicated with  format [‘coffee’].

Gulp

So why do we also need Gulp? It helps to conveniently plug all files from bower manager.

Below firstly we require gulp, then wiredep for getting all components from bower_components folder.
Next – require karma-server.

'use strict';

var gulp = require('gulp');
var wiredep = require('wiredep');
var Server = require('karma').Server;

Let`s build all necessary files. At first bower components, then we will add
the rest.

There are files with functions, which are tested, files for code performing and, lastly, file with the test.

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'
]);

Further, I define two gulp-tasks. They differ only in the name and value of singleRun (true/ false).

The latest determines whether karma to finish work after test running or continue to work watching changes in files.

In this way we will  see in console the result of our changes (was code broken or not).

 

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();
});

For running the test we write in console gulp test. For running and watching – gulp tdd.

Also, I note that file karma.conf.js is in gulp folder (the files above are in the same).

That is all. Is the result too hard?

Can we run test in other way?

I think you can run everything without Karma.

I ran all via ‘gulp-jasmine-browse’ component, but in this case tests performed  incorrectly.

I had a problem with asynchronous of their performance. It was crucial for me.

On the other hand, you can run test just via karma, But it was difficult for me to assemble all necessary files.

In general, the tests can be run in different ways.

It is just one and maybe suboptimal.

 

I’ll appreciate any comments, questions and sharing experiences 🙂