Polymer (JS) Testing on Travis CI

Last night, I got a Drone.io build for a Polymer.dart element working in relatively short order. Tonight, I hope to repeat that success for a JavaScript Polymer element.

To be sure, JavaScript testing is far more tedious than the equivalent Dart code. Still, there are services out there, like the excellent Travis CI, that help to ease some of the pain. What I appreciate about Travis CI is that it is one of those tools that makes it easy to work 80% of the use cases and still manages to stay out of the way when working the other 20%. Hopefully that will prove to be the case here since testing Polymer elements almost certainly falls in the latter 20%.

I am working with the a-form-input Polymer class, which enables other Polymer elements to behave like native HTML form inputs. I already have passing Karma / Jasmine tests for this project, so all I need to accomplish tonight is to get them passing on Travis CI.

I start in the Travis CI interface to enable my project from among my GitHub projects:



The Karma project includes Travis CI documentation, which indicates that Firefox testing is likely the easiest path for me. Unfortunately, I have not been testing with Firefox in this project:

$ karma start --single-run --browsers Firefox
INFO [karma]: Karma v0.12.28 server started at http://localhost:9876/
WARN [launcher]: Can not load "Firefox", it is not registered!
  Perhaps you are missing some plugin?

To address this, I need to add the Firefox launcher to my npm package.json's list of dependencies:

{
  "name": "a-form-input",
  "desciption": "Polymer element that mimics a native <form> input",
  "repository": "https://github.com/eee-c/a-form-input",
  "devDependencies": {
    "grunt": "^0.4.5",
    "grunt-contrib-watch": "^0.6.1",
    "karma": "^0.12.24",
    "karma-chrome-launcher": "^0.1.5",
    "karma-firefox-launcher": "^0.1.3",
    "karma-jasmine": "^0.2.2"
  }
}

After a quick install:

$ npm install
karma-firefox-launcher@0.1.3 node_modules/karma-firefox-launcher

I have my Karma setup working with Firefox:

$ karma start --single-run --browsers Firefox
INFO [karma]: Karma v0.12.28 server started at http://localhost:9876/
INFO [launcher]: Starting browser Firefox
INFO [Firefox 34.0.0 (Ubuntu)]: Connected on socket Yd6CO1SBzegq4s_R-7CC with id 53464891
.....
Firefox 34.0.0 (Ubuntu): Executed 5 of 5 SUCCESS (0.336 secs / 0.333 secs)

For that to work on Travis, I need to supply that same command-line as the test script in the npm package.json file:

{
  "name": "a-form-input",
  // ...
  "scripts": {
    "test": "./node_modules/karma/bin/karma start --single-run --browsers Firefox"
  }
}

By default, Travis runs npm test, which looks for this entry.

At this point, I am ready for Travis CI (I hope). I add a .travis.yml to the repository and push it to Github:

language: node_js
node_js:
  - 0.10
before_script:
  - export DISPLAY=:99.0
  - sh -e /etc/init.d/xvfb start

The before_script section comes straight from the Karma Travis CI documentation for running Firefox, which requires an X Window system (virtual in this case).

Just like that, Travis CI springs into action and... I have my first build failure:

WARN [watcher]: Pattern "/home/travis/build/eee-c/a-form-input/bower_components/webcomponentsjs/webcomponents.js" does not match any file.
WARN [watcher]: Pattern "/home/travis/build/eee-c/a-form-input/bower_components/!(a-form-input)/**" does not match any file.
INFO [Firefox 31.0.0 (Linux)]: Connected on socket qvBVzvavVfpYhsSXB3og with id 12698000
Firefox 31.0.0 (Linux) <a-form-input> element form input element is created in the parent light DOM FAILED
 ReferenceError: Polymer is not defined in /home/travis/build/eee-c/a-form-input/test/PolymerSetup.js (line 18)
 waitForPolymer@/home/travis/build/eee-c/a-form-input/test/PolymerSetup.js:18:1
 @/home/travis/build/eee-c/a-form-input/test/PolymerSetup.js:28:3
 env.executeFiltered@/home/travis/build/eee-c/a-form-input/node_modules/karma-jasmine/lib/boot.js:126:7
 createStartFn/<@/home/travis/build/eee-c/a-form-input/node_modules/karma-jasmine/lib/adapter.js:171:5
 [2]</Karma/this.loaded@http://localhost:9876/karma.js:185:7
 @http://localhost:9876/context.html:48:5
 
 Expected null not to be null.
 @/home/travis/build/eee-c/a-form-input/test/AFormInputSpec.js:20:7

Yikes! That is only a portion of the failure even that portion is awfully noisy. Fortunately, I have seen enough Polymer Karma failures to know that I need to look to the top of the error messages before troubleshooting the actual tests. At the top of the build output, I see:

WARN [watcher]: Pattern "/home/travis/build/eee-c/a-form-input/bower_components/webcomponentsjs/webcomponents.js" does not match any file.
WARN [watcher]: Pattern "/home/travis/build/eee-c/a-form-input/bower_components/!(a-form-input)/**" does not match any file.

Wonderful. It seems that my Bower packages are not installed. So in addition to the nice and easy npm install that Travis CI boasts, I am going to have to convince it to also install the Bower npm package and to run the Bower install command.

Installing Bower is the easy part. I add it to the list of the npm package.json development dependencies:

{
  "name": "a-form-input",
  "devDependencies": {
    // ...
    "bower", "^1.3.12"
  },
  "scripts": {
    "test": "./node_modules/karma/bin/karma start --single-run --browsers Firefox"
  }
}

To run a bower install, I add it to the list of before_script actions in my .travis.yml file:

language: node_js
node_js:
  - 0.10
before_script:
  - ./node_modules/bower/bin/bower install
  - export DISPLAY=:99.0
  - sh -e /etc/init.d/xvfb start

And, amazingly, that actually works. All my bower packages are installed. All my npm packages are installed. And the build passes:



In the end, it was not quite as easy getting JavaScript Polymer tests running on Travis CI as it was running Dart Polymer tests on Drone.io. But it was close—and certainly easy enough once I pushed through the Bower nonsense. It might be nice if Travis CI supported Bower out of the box, but let's face it, this is more a win for Dart packaging than anything else. Travis CI's minimal (non) approach to Bower is likely the only rational way to deal with two different package managers for the same language.

Well, that or just use Dart.

At any rate, I have my CI build working for a JavaScript Polymer element thanks to Travis CI.

Day #20

‹prev | My Chain | next›