Rich Quick: JS Continuous integration

Rich Quick (@richquick) was speaking at Glasgow.js about his experiences of continuous integration of JavaScript, these are my notes from his talk.

Front end developer working on a website re-launch for a site with around 4,000 lines of JavaScript. The code quality was in danger of decreasing under deadline pressure. Legacy site had a hard dependency on JavaScript so it was important to ensure that new code didn't break essential legacy code.

A lot of code was UI which isn't easy to test. Split UI code away from business logic to allow the business logic to be independently tested. Moving to Backbone.js to clearly separate the logic - mainly testing the models.

Evaluated several unit test frameworks including Qunit but settled on Jasmine which is closer to Ruby. Jasmine runs its test suite in the browser by including all your scripts into an HTML page.

To ease integration into the developer workflow they built a rake script to run the tests which takes the files from source control and runs the Jasmine scripts. This was built using PhantomJS which is a command line version of the WebKit engine. The script then parses the output from this rendering to produce command line output and email to core devs. If script completes without errors it deploys the code to a staging server. If deploying to production the script will also minimise and concatenate files. One advantage of this is that if a modification is made to the JavaScript that would break the site it will not get deployed. A possible enhancement to this would be to email the commiter of the revision that breaks the tests.

In most cases the tests check that a function exists and executes without errors. This is mostly regression testing but as specific problems are found tests are written for these cases. As more code for business logic is added there are more detailed tests added.

Linting is not included in the tests but could be added.

There are some issues with what PhantomJS returns - stack traces aren't returned and there is some DOM weirdness going on. Jasmine fixtures are available to work with the DOM. CasperJS is a navigation scripting & testing utility built on top of PhantomJS.

This is a continuous build process, the act of using this as a regular part of the development process is continuous integration. If everyone is using this process as they develop then faults are spotted early and are easier to fix.