With several JavaScript projects on my GitHub account, I finally wanted to follow good software engineering practices and utilize Travis for continuous integration. As I used to write unit tests in Jasmine, I consulted the internet and found a bunch of useful references:
- Setting up automated testing for a small client-side Javascript project
- How to install PhantomJS on Windows
- How to install Node.js and NPM on Windows
- Jasmine Documentation
- Travis Documentation: GUI and Headless Browser Testing
- How to Run JavaScript Tests in Chrome on Travis
- Install the Latest Version of Chrome on Trevis
- Running Travis CI Unit Tests on Google Chrome
- Chrome Browser not Captured for Karma Tests
- Karma Chrome Launcher
In the end, - also because I am running Windows - a combination of these articles made the trick. In the following I want to share my solution. Note that a working minimal example can be found on GitHub:
Jasmine-Travis Example on GitHubInstalling NodeJS, PhantomJS and Karma on Windows
This step is not required for Travis integration, but might be useful for running Jasmine tests locally in multiple browsers. For different operating systems, please refer to some of the references above.
Installing NodeJS
For installing NodeJS on Windows follow these steps:
- Download the NodeJS installer from here;
- Start the installer and follow the instructions;
- To verify the installation, start a command line prompt (e.g. throuhg Ctrl + R and entering
cmd
) and enter:
C:\Users\David>node -v v4.5.0 C:\Users\David>npm -v 2.15.9
Installing PhantomJS
For installing PhantomJS on WIndows follow these steps:
- Download PhantomJS (the ZIP-file) from here;
- Create a directory, e.g.
C:\PhantomJs
, to hold PhantomJS and extract the ZIP file to this location; the directory structure should look as follows:
C:\PhantomJs\ |- bin\ |- phantomjs.exe |- examples\ |- README.md |- ...
C:\PhantomJs\bin
to the Path
environment variable.cmd
) and enter:C:\Users\David>phantomjs --version 2.1.1
Installing Karma
Karma can be installed through npm. Open a command line prompt (e.g. using Ctrl + R and entering cmd
) and change to the project directory, then enter:
C:\Windows\system32>npm install --save-dev karma karma-cli karma-jasmine karma-phantomjs-launcher
Make sure that Karma is installed correctly by calling
C:\Users\David\Desktop\jasmine-travis-example>karma --version Karma version: 1.2.0
Writing Tests and Setting up package.json
Create a directory to hold the tests, e.g. tests/
and create the test specification and the test runner. For example
describe("A suite", function() { it("contains spec with an expectation", function() { expect(true).toBe(true); }); });
in tests/tests.js
and
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <title>Document</title> <link rel="shortcut icon" type="image/png" href="../node_modules/jasmine-core/lib/jasmine-core/jasmine_favicon.png"> <link rel="stylesheet" href="../node_modules/jasmine-core/lib/jasmine-core/jasmine.css"> <script src="../node_modules/jasmine-core/lib/jasmine-core/jasmine.js"></script> <script src="../node_modules/jasmine-core/lib/jasmine-core/jasmine-html.js"></script> <script src="../node_modules/jasmine-core/lib/jasmine-core/boot.js"></script> <!-- include the library you want to test here... --> <script src="../anchor.js"></script> <!-- include your test files here... --> <script src="tests.js"></script> </head> <body> </body> </html>
in tests/SpecRunner.html
. Note that Jasmine is included from within node_modules
as Travis will later install Jasmine through npm. For locally running the tests, run npm install jasmine
and run tests/SpecRunner.html
in any browser. Finally, we need to tell Travis which dependencies to install in order to run the tests. This is done in package.json
:
{ "name": "jasmine-travis-example", "description": "Continuous Integration with Jasmine, GitHub and Travis CI.", "version": "1.0.0", "scripts": { "test": "karma start tests/karma.conf.js --single-run" }, "devDependencies": { "jasmine-core": "*", "karma": "*", "karma-cli": "*", "karma-jasmine": "*", "karma-phantomjs-launcher": "*", "karma-chrome-launcher": "*" } }
Now the setup can be tested after initializing Karma. Open a command line prompt (e.g. using Ctrl + R and entering cmd
), changing the directory to tests/
and running:
C:\Users\David\Desktop\jasmine-travis-example\tests>karma init
Follow the instructions to configure Karma; this will create tests/karma.conf.js
. To run the tests in the specified browsers, run npm test
from within the root.
Configuring Travis to Run Tests in Google Chrome
There seem to be two options for running Jasmine tests on Travis. First, using PhantomJs and second using Google Chrome. The first option was used when running npm test
, however on Travis I wanted to use Google Chrome. To this end, the travis configuration file .travis.yml
is created in the root:
language: node_js script: karma start tests/karma.conf.js --single-run node_js: - "0.10" before_install: - export CHROME_BIN=chromium-browser - export DISPLAY=:99.0 - sh -e /etc/init.d/xvfb start
Now, the Karma configuration in tests/karma.conf.js
needs to be adapted to run Google Chrome with --no-sandbox
. Note that karma-chrome-launcher
is already set as dependency in package.json
.
// Karma configuration // Generated on Wed Aug 17 2016 00:01:09 GMT+0200 (Mitteleuropäische Sommerzeit) module.exports = function(config) { var configuration = { // base path that will be used to resolve all patterns (eg. files, exclude) basePath: '', // plugins starting with karma- are autoloaded plugins: ['karma-chrome-launcher', 'karma-jasmine'], // frameworks to use // available frameworks: https://npmjs.org/browse/keyword/karma-adapter frameworks: ['jasmine'], // list of files / patterns to load in the browser files: [ '*.js' ], // list of files to exclude exclude: [ ], // preprocess matching files before serving them to the browser // available preprocessors: https://npmjs.org/browse/keyword/karma-preprocessor preprocessors: { }, // test results reporter to use // possible values: 'dots', 'progress' // available reporters: https://npmjs.org/browse/keyword/karma-reporter reporters: ['progress'], // web server port port: 9876, // enable / disable colors in the output (reporters and logs) colors: true, // level of logging // possible values: config.LOG_DISABLE || config.LOG_ERROR || config.LOG_WARN || config.LOG_INFO || config.LOG_DEBUG logLevel: config.LOG_INFO, // enable / disable watching file and executing tests whenever any file changes autoWatch: true, // start these browsers // available browser launchers: https://npmjs.org/browse/keyword/karma-launcher browsers: ['Chrome', 'ChromeCanary', 'Firefox', 'Opera', 'IE'], // e.g see https://swizec.com/blog/how-to-run-javascript-tests-in-chrome-on-travis/swizec/6647 customLaunchers: { Chrome_travis_ci: { base: 'Chrome', flags: ['--no-sandbox'] } }, // Continuous Integration mode // if true, Karma captures browsers, runs the tests and exits singleRun: false, // Concurrency level // how many browser should be started simultaneous concurrency: Infinity }; if (process.env.TRAVIS) { configuration.browsers = ['Chrome_travis_ci']; } config.set(configuration); }
Note that we confiogure Karma as to use the custom Google Chrome launcher only on Travis. Locally, all the other configured browsers will be used. Here, other libraries could be added either through specific Karma plugins (e.g. the jQuery Karma plugin) or by explicitly including the libraries in the files
array.
Putting it All Together
Finally, the directory structure should look as follows:
/jasmine-travis-example |- tests/ |- tests.js |- SpecRunner.html |- karma.conf.js |- package.json |- .travis.yml
Going to travis-ci.org, logging in through GitHub and selecting the GitHub repository for continuous integration, the last step remaining is to commit and push the above changes. After a short delay, Travis will automatically setup the enviornment and run the tests.