Creating a testing framework for JBrowse plugins

2016-04-19

Testing client side apps requires a couple of tedious steps: Organizing the git clone, the dependencies, wrangling up a web server, the test framework, etc.

When testing a plugin for jbrowse, the dependency tree is interesting because the plugin "depends" on JBrowse to run, but we will use travis-CI and bower inside the git repo for our plugin to accomplish this.

In this scenario, we will

Use bower to install jasmine and JBrowse (our platform that we write the plugin for)
Use nginx to launch a webserver on travis-CI
Use the phantomjs run-jasmine.js script to check jasmine test results

Without further ado

Here is the .travis.yml

sudo: false
addons:
  apt:
    packages:
      - nginx
cache:
  apt: true
  directories:
    - $HOME/.cache/bower
before_install:
  - npm install -g jshint bower
install:
  - bower install
before_script:
  - cat test/travis.conf | envsubst > test/travis-envsubst.conf
  - nginx -c `pwd`/test/travis-envsubst.conf
script:
  - phantomjs test/run-jasmine.js http://localhost:9000/test/
  - jshint js

Refer to http://searchvoidstar.tumblr.com/post/141858047213/running-nginx-on-containerised-travis-ci-pt-2 for details on the nginx setup

Here is the bower.json

{
  "name": "sashimiplot",
  "homepage": "https://github.com/cmdcolin/sashimiplot",
  "description": "Sashimi track type for jbrowse",
  "main": "js/main.js",
  "keywords": ["bioinformatics", "jbrowse"],
  "license": "MIT",
  "ignore": [
    "**/.*",
    "node_modules",
    "bower_components",
    "src",
    "test",
    "tests"
  ],
  "devDependencies": {
    "jasmine-core": "jasmine#^2.4.1",
    "jbrowse": "git://github.com/GMOD/jbrowse.git#master"
  }
}

The key thing here is that it installs jasmine and JBrowse. I set .bowerrc to install both jasmine and JBrowse to the "test" directory

{
  "directory": "test"
}

With this setup, bower will make a "flat dependency tree" in the test directory, so it will look like this

    $ ls -1 test
    FileSaver
    dbind
    dgrid
    dijit
    dojo
    dojox
    *index.html*
    jDataView
    jasmine-core
    jbrowse
    json-schema
    jszlib
    lazyload
    put-selector
    *run-jasmine.js*
    *spec*
    *travis.conf*
    util
    xstyle

Here the asterisks indicate things that are part of our app, other's are automatically installed by bower (jbrowse, jasmine-core, the dojo dependencies, and other things)

Then we can create the jasmine test/index.html to be something like this

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<meta />
Jasmine Spec Runner

<link rel="stylesheet" href="jasmine-core/lib/jasmine-core/jasmine.css" />
<script src="jasmine-core/lib/jasmine-core/jasmine.js"></script>
<script src="jasmine-core/lib/jasmine-core/boot.js"></script>
<script
  type="text/javascript"
  src="dojo/dojo.js"
  data-dojo-config="async: 1"
></script>
<script type="text/javascript">
  require({
    baseUrl: '.',
    packages: [
      'dojo',
      'dijit',
      'dojox',
      'jszlib',
      { name: 'lazyload', location: 'lazyload', main: 'lazyload' },
      'dgrid',
      'xstyle',
      'put-selector',
      'FileSaver',
      { name: 'jDataView', location: 'jDataView/src', main: 'jdataview' },
      { name: 'JBrowse', location: 'jbrowse/src/JBrowse' },
      { name: 'SashimiPlot', location: '../js' },
    ],
  })
</script>
<script type="text/javascript" src="spec/SashimiPlot.spec.js"></script>
<div id="sandbox" style="overflow:hidden; height:1px;"></div>

The "packages" in the require statement puts all these packages in the right "namespace" for the AMD includes, and the "specs" are defined like <script type="text/javascript" src="spec/Projection.spec.js"></script>

Finally, run-jasmine.js is used to check the results of the jasmine tests (it is run via phantomjs in the travis-CI script). It is a special version for the most recent version of jasmine (2.4) https://gist.github.com/vmeln/b6cbb319d9a0efc816be

For an example of the project using this, see https://github.com/cmdcolin/sashimiplot