DevOps Frontend Tools

Running Aurelia tests inside Bitbucket pipelines

Inspired by Piotr’s article I decided to play a little with the Bitbucket as an alternative to the GitHub. The thing that I really like about it, is that there’s no need to use any 3rd part CI tool such as TravisCI since Bitbucket offers its own build pipeline. Of course, I wanted to test it as soon as possible, so I created very simple Aurelia application using its CLI and I pushed my changes. My basic pipeline file (with the *.yml extension) presented as follows:

 


image: cstheriot/aurelia-cli:latest

options:
  docker: true

pipelines:
  branches:
    master:
      - step:
          script:
          - npm install
          - au build  
          - au test 

 

If you’re not familiar with Aurelia and Bitbucket, that’s totally fine. The above code defines the pipeline which kicks off each time some changes are pushed to master (so Pull Requests are included). The steps are:

  1. image: cstheriot/aurelia-cli:latest – defines docker image needed to run Aurelia CLI in pipeline
  2. docker: true – enables docker
  3. npm install – restore all dependencies defined in the package.json file
  4. au build – build the Aurelia application
  5. au test – run unit tests

The thing that’s pretty important here, is that Aurelia uses Karma as a test runner. Once I pushed my application to the Bitbucket, I started watching all the steps executing one after another and waited for the whole process to be done and succeed. Well, here’s the  build result:

 

 

The problem

Honestly, that was kind of surprising to me because I ran a default test (so it’s supposed to be fine) and it worked on my local machine. Everything was clear after I looked at the error which says:

No binary for Chrome browser on your platform.

The way that Karma works is that it creates a web server on which all the tests are run for each of the browsers connected. There are two ways to connect them:

  • manually by visiting a specific port when the Karma server is running
  • automatically by adding some code in the configuration file

Let’s move back to my Aurelia project and take a look at the fragment of karma.conf.js file:

 


module.exports = function(config) {
  config.set({
    basePath: '',
    frameworks: [project.testFramework.id],
    files: files,
    exclude: [],
    preprocessors: {
      [project.unitTestRunner.source]: [project.transpiler.id]
    },
    typescriptPreprocessor: {
      typescript: require('typescript'),
      options: tsconfig.compilerOptions
    },
    reporters: ['progress'],
    port: 9876,
    colors: true,
    logLevel: config.LOG_INFO,
    autoWatch: true,
    browsers: ['Chrome'],
    singleRun: false,
    // client.args must be a array of string.
    // Leave 'aurelia-root', project.paths.root in this order so we can find
    // the root of the aurelia project.
    client: {
      args: ['aurelia-root', project.paths.root]
    }
  });
};


 

Now everything is clear. By default, Aurelia CLI configured Karma to run on a Chrome browser, but there’s no browser inside Bitbucket pipeline! To handle it we need to install some additional dependencies.

 

Using PhantomJs

As the description says:

PhantomJS is a headless WebKit scriptable with a JavaScript API. It has fast and native support for various web standards: DOM handling, CSS selector, JSON, Canvas, and SVG.

Why is that so handy? Well, the problem with the „standard” Chrome is that it uses „graphical display” to work, which does not exist inside the Bitbucket’s pipeline. On the other hand, PhantomJs is headless which means it’s a browser but with no GUI. Simple is that. To add PhantomJs to my project I used npm:

 


npm install karma-phantomjs-launcher --save-dev

 

Next step was to modify the Karma configuration and set PhantomJs as a browser to use:

 


module.exports = function(config) {
  config.set({
    basePath: '',
    frameworks: [project.testFramework.id],
    files: files,
    exclude: [],
    preprocessors: {
      [project.unitTestRunner.source]: [project.transpiler.id]
    },
    typescriptPreprocessor: {
      typescript: require('typescript'),
      options: tsconfig.compilerOptions
    },
    reporters: ['progress'],
    port: 9876,
    colors: true,
    logLevel: config.LOG_INFO,
    autoWatch: true,
    browsers: ['PhantomJS', 'PhantomJS_custom'],
    customLaunchers: {
      'PhantomJS_custom': {
        base: 'PhantomJS',
        options: {
          windowName: 'my-window',
          settings: {
            webSecurityEnabled: false
          },
        },
        flags: ['--load-images=true'],
        debug: true
      }
    },
    phantomjsLauncher: {
      exitOnResourceError: true
    },
    singleRun: false,
    // client.args must be a array of string.
    // Leave 'aurelia-root', project.paths.root in this order so we can find
    // the root of the aurelia project.
    client: {
      args: ['aurelia-root', project.paths.root]
    }
  });
};


 

When the configuration was done, I pushed my changes once again to the master branch and moved directly to pipelines view to check the result. What I saw was:

 

 

The result – Successful

Of course, the problem is not related to the Aurelia, so if you’re using Karma with Angular, React, Vue or something else you can use the same technique to make your tests running in the Bitbucket pipelines.

 

Don’t miss new posts!

If you enjoy reading my blog, follow me on Twitter or leave a like on Facebook. It costs nothing and will let you be up to date with new posts 🙂