IAM

ARTICLE

Running Jasmine Tests in Google Chrome on Travis CI

Given a GitHub project with Jasmine tests, this article discusses how to automatically run the tests in Google Chrome on Travis CI.

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:

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 GitHub

Installing 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
    |- ...
    
  • Add C:\PhantomJs\bin to the Path environment variable.
  • To verify the installation, open a command line prompt (e.g. using Ctrl + R and entering 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.

What is your opinion on this article? Let me know your thoughts on Twitter @davidstutz92 or LinkedIn in/davidstutz92.