Using Travis-CI for client-side JavaScript libraries?

Question

I'm not sure to use Travis-CI for my client-side JavaScript library or not, because it compiles with NodeJs on Travis-CI servers.

I want to know is this a good approach to use some kind of continuous integration such as Travis-CI for client-side libraries or not?

Alcmene

Answer 1

Yes of course you should use continous integration with client side libraries.

I personally use PhantomJS (headless webkit browser) which is already installed in Travis-CI. I think this is the better option for client-side stuff than NodeJs.

If you use Grunt, it gets even easier to use, all you need is a simple Gruntfile.js file, your tests that run in browser (I use QUnit), and a simple .travis.yml

Gruntfile.js:

module.exports = function(grunt) {
    // Project configuration.
    grunt.initConfig({
        qunit: {
            files: ['test/index.html']
        }
    });

    // Load plugin
    grunt.loadNpmTasks('grunt-contrib-qunit');

    // Task to run tests
    grunt.registerTask('test', 'qunit');
};

.travis.yml:

before_script:
  - sudo npm install -g grunt

script: grunt test --verbose --force

You can see it in action at one of my projects (source on GitHub).

Kemp

Wouldn't the mention of grunt as a devDependency in the package.json file, eliminate the need for the before_script part? – Rosinski

This is correct if you are using NPM to resolve dependencies. In my case I have a PHP project so I have to specify this dependency in the before_script – Kemp

"see it in action" link is dead. – Demigod

@Demigod you're right, I just fixed it. Thanks for reporting! – Kemp

"see it in action" link is dead again. – Aurangzeb

I believe you also need grunt.loadNpmTasks('grunt-contrib-qunit'); for this to work. I see this in the Gruntfile.js for the repo you reference. – Shalandashale

@Shalandashale I think you're right, I added it to my example – Kemp

grunt.js was changed to Gruntfile.js in 2013. See github.com/gruntjs/grunt/issues/650 – Upsetting

Answer 2

I started with the answer from Odi and moved to gulp to get it working. If you specify node_js as your language in your travis file, travis will automatically run

npm install

followed by

npm test

The first will install any devDependencies specified in a package.json file, the second will run the script named "test" also from package.json. Below you'll find the three files I needed to have in the top level of my repo for travis to run a single qunit suite.

.travis.yml

language: node_js
node_js:
  - "0.10"

gulpfile.js

var gulp = require('gulp'),
    qunit = require('gulp-qunit');

gulp.task('default', function() {
    return gulp.src('./tests/unit/unittests_nupic-js.html')
        .pipe(qunit());
});

package.json

{
  "name": "nupic-js",
  "version": "0.0.1",
  "description": "JavaScript port of NuPIC",
  "license": "GPL-3.0",
  "repository": "iandanforth/nupic-js",
  "bugs": { "url" : "http://github.com/iandanforth/nupic-js/issues"
  },
  "author": {
    "name": "Ian Danforth",
    "email": "[email protected]"
  },
  "engines": {
    "node": ">=0.10.0"
  },
  "scripts": {
    "test": "gulp"
  },
  "keywords": [
    "numenta",
    "nupic",
    "machine learning"
  ],
  "devDependencies": {
    "gulp-qunit": "~0.2.1",
    "gulp-util": "~2.2.14",
    "gulp": "~3.5.1"
  }
}

Needle

Answer 3

Odi's answer updated and using npm to resolve dependencies:

.travis.yml

language: node_js
node_js:
  - "6"

---

.Gruntfile.js

module.exports = function(grunt) {
  // Project configuration.
  grunt.initConfig({
    qunit: {
      files: ['./test/qunit.html']
    }
  });

  // Load plugin
  grunt.loadNpmTasks('grunt-contrib-qunit');

  // Task to run tests
  grunt.registerTask('test', 'qunit');
};

---

Package.json (relevant parts)

  "devDependencies": {
    "grunt": "^1.0.1",
    "grunt-contrib-qunit": "^1.3.0"
  },
  "scripts": {
    "test": "grunt test"
  }

---

You can try the configuration locally by running npm install and then npm test.

Rechaba

Answer 4

I found this example. Quite comprehensive!

https://github.com/jonkemp/gulp-qunit

run:

npm install
gulp test

It also has tasks for lint watching files, coverage reports and more.

Kamseen