Today I’ve done some research how to get my latest jQuery plugin (jquery-numeric_input) to be tested automatically with the help of Travis CI. Travis CI is a hosted continuous integration service for open source projects.
Because I’ve just finished the latest functionality of the plugin I wanted to add the project to Travis CI, just like I do with all my other projects (the ones with unit tests).
grunt init:jquery and you have a entire generated jQuery plugin project.
By default this command configures a jQuery plugin, QUnit test suite, sample plugin, sample tests and some grunt tasks you can use. Running the
grunt command in your project folder will execute the default task meaning:
- lint - Analysis your code with JSLint
- qunit - Runs your QUnit tests using PhantomJS (so it supports the exit code for success or failure)
- concat - Concatenate your project files
- min - Minify your project files using UglifyJS
Really easy to get started coding instead of setting up your environment :)
Integration with Travis CI
Ok so at this point I want to add my project to Travis CI so that it tests my suite when pushing new branches/commits to Github. To do this we have to make a few changes.
Here’s the travis ci integration commit from my plugin with all the steps described below.
Registering the travis task
I’d like to keep the Grunt tasks organized so I register a new task called
travis below the
1 2 3 4 5
As you can see I only added
qunit because we don’t have to concatenate or minify a new build of our plugin. At this point you are able to run
grunt travis from the command line.
Adding the dependency
Now we have to add Grunt as a dependency to our
package.json file so that npm running on Travis CI knows it has to install Grunt. Mine dependencies block looks like this:
1 2 3 4 5 6
Adding the npm task
Travis CI runs
npm test after it fetched your project and installed the dependencies, so we need to add this task to the
1 2 3
I’ve added the
--verbose option, so we’ll see more output of what is going on.
Adding the .travis.yml
Every Travis CI project needs to have a
.travis.yml file in the root of the project folder, so it know what platform and version it should use to build/test your project. Here’s the one I used:
1 2 3 4 5
Ready to go!
Alright after these changes your project is ready to be continuously builded with Travis CI. But don’t forget to setup the Service Hook on Github!
Thanks to Ryan Seddon and Ariya Hidayat for noticing me that the
before_script section for running PhantomJS on the headless server on Travis CI isn’t needed. See this link