Saturday, April 21, 2012

Continuous Integration for Javascript

I have been on a journey to introduce Javascript into our Continuous Integration and Test Driven Development eco-system.

For so long, Javascript has been treated like the ugly duckling, but with budding technologies like Knockout.js and Node.js, javascript is becoming a critical component of most systems.

The team at work decided to move forward with QUnit for the testing framework. I found a great link that showed how to get up and running with QUnit and PhantomJs here.

I ended up with the following files (from jQuery and the above blog post). Note I did not use the same name for my phantom-qunit-testrunner.js as the author of the blog post. 

Update – I am now using the run-qunit.js from phantomJS instead of phantom-qunit-testrunner.js from the above blog post.

image

I was then able to run phantomJs

image

Sweet!!

The blog post author was going after Continuous testing, which is very cool – but not what I need.

There is a lot to consider in the context of automation for Continious Integration. Generally, I don’t need my own html file. I just need the tests. So here goes the first feature.

When a js file (ie. coolplugin.js) is discovered during continuous integration, we should look for an associated test file (ie. coolplugin.test.js), if one is found, then we should generate the required qunit html, run the html though PhantomJS. The file should be unique (ie. coolplugin.test.html), and should not be deleted so that it can inspected for a failing test.

There will be times where I do need to provide my own dom elements, and therefore provide my own html. so here goes another feature.

When a js file (ie. coolplugin.js) is discovered during continuous integration, we should first look for an associated html file (ie. coolplugin.test.html), if one is found, then we should run the html though PhantomJS.

For this I created a simple executable which will perform the above tasks. (it is currently available on our internal svn – if you want it just leave a comment and I can put it in git hub).

Then I tied it all together with NAnt.

image

I am new to NAnt so I am sure I did several things wrong but its working….

Tests Passed

image

Tests Failed

image

Whats next? Prototype to production – and continuous testing for local development.

1 comment:

  1. I would like to see that CI executable you mentioned above. Could you throw it out on github?

    ReplyDelete