The development of more and more advanced JavaScript applications, increased the need to accurately test the code of such applications.

The software programmers have been releasing many testing framework, including Mocha, Zombie, Karma, Jasmine and the likes. They were created to answer many queries by testers (e.g. complete, function-oriented test environments), but especially to deal with an asynchronous language executed inside browsers. This latter feature makes very difficult testing procedures.

Jasmine is a function-oriented testing tool, BDD, useful to programmers, as it allows approaching problems, with an analysis of how a feature works.

Instead, Karma tool runs a webserver and can interface with the main browsers, executing code inside them. So it can be useful, both when executing tests visually, e.g. by using Chrome browser, and via console, e.g. when using PhantomJS. We are now to present an example using PhantomJS.

{
    "name": "jasmine-jquerty",
    "devDependencies": {
        "karma": "0.12.*",
        "karma-cli": "*",
        "karma-phantomjs-launcher": "*",
        "karma-jasmine": "*",
        "phantomjs": "*",
        "bower": "*"
    },
    "scripts": {
        "postinstall" : "./node_modules/.bin/bower install",
        "test": "./node_modules/.bin/karma start --single-run"
    }
}

After installing the relevant packages, you can execute the initialization Karma command.

$, karma init
Which testing framework do you want to use ?
Press tab to list possible options. Enter to move to the next question.
> jasmine

Do you want to use Require.js ?
This will add Require.js plugin.
Press tab to list possible options. Enter to move to the next question.
> no

Do you want to capture any browsers automatically ?
Press tab to list possible options. Enter empty string to move to the next question.
> PhantomJS
> 

What is the location of your source and test files ?
You can use glob patterns, eg. "js/*.js" or "test/**/*Spec.js".
Enter empty string to move to the next question.
> ./bower_components/jquery/dist/jquery.js
> ./script.jquery.js
> ./spec/*.js

Should any of the files included by the previous patterns be excluded ?
You can use glob patterns, eg. "**/*.swp".
Enter empty string to move to the next question.
> 

Do you want Karma to watch all the files and run the tests on change ?
Press tab to list possible options.
> yes

After this procedure, you have a karma.conf.js file.

By way of example, let's consider a simple jQuery module appending an Input Text to a given element.

$.fn.appendInput = function(id) {
    $(id).append("<input type='text' id='module' />");
};

Now you have to simulate with Jasmine the execution of such procedure, followed by the initialization of a Div#container and finally calling the plugin $.fn.appendInput(‘#container’), to verify the element existence.

describe('AppendInput jquery plugin', function() {
    beforeEach(function(){
        $(document.body).append('<div id="content"></div>');
    });
    it("append input into content", function(){
        $.fn.appendInput("#content");
        expect($('#content').find('#module').length).toBe(1);
    });
});

Now you have simply to check the result.

$. karma start --single-run
INFO [karma]: Karma v0.12.16 server started at http://localhost:9876/
INFO [launcher]: Starting browser PhantomJS
INFO [PhantomJS 1.9.7 (Linux)]: Connected on socket TTcGcXH2aCjaNMyE_ZcG with id 3790162
PhantomJS 1.9.7 (Linux): Executed 1 of 1 SUCCESS (0.038 secs / 0.004 secs)

Comments

comments powered by Disqus

cloudparty

Follow Us