Javascript Loves CI

May 5, 2011

Jenkins + Jasmine + PhantomJS + JSHint

We write a great deal of Javascript here at Zendesk, and we use a few great tools to help us make sure we’re committing solid code. First, we run it through JSHint, a slightly-more-friendly port of JSLint. Second, we use Jasmine to test the code. These tools work great in our development environment, but I really wanted to get Jenkins to start doing some of our code-quality checking for us.

Here’s a quick review of how I got these tools working together in one harmonic symphony of Javascript cleanliness and overextended metaphors. (This article assumes that you already have Jenkins running on a machine on which you have administrator permissions.)

  1. Install Node.JS. On OS X,it’s as easy as brew install node.

  2. Install npm:

    curl http://npmjs.org/install.sh | sh
  3. Install JSHint:

    npm install jshint
  4. Add a jshint.rake file:

  5. [gist id=952579 file=04_jshint.rake]

  6. Install Qt. On OS X, everyone recommends
    against using brew install qt; instead, download and install the
    binary.

  7. Install PhantomJS

  8. Add a js_tests.rake file:

    [gist id=952579 file=07_js_tests.rake]

  9. Did you see that config.jasmine_server_port in there? Jasmine::Config
    saves the port on which it starts the server, but it doesn’t make that
    information available. Thus, add it in the config_overrides:

    [gist id=952579 file=08_jasmine_config.rb]

  10. Add a PhantomJS runner for Jasmine. I got mine from
    guard-phantomjs:

    [gist id=952579 file=09_phantom_js_runner.js]

  11. Create a Rake task just for Jenkins:

    [gist id=952579 file=10_ci.rake]

It’s not exactly a fast process, but it works great once you get it going.