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