Pipeline with open end pointing to the sky

How to run Angular tests on CI Docker Container with Chrome

In this article, we are going to learn how to run the tests of an Angular solution generated with @angular/cli into a Docker Container without changing any of the initial configuration generated by @angular/cli. This is very important in the context of Continuous Integration workflow when you want to run your tests as you commit to the repo.

For this example I’m gonna use the Atlassian Bitbucket Pipelines for continuous integration, but is not limited to it, you can use it in any other environment that is using a Docker Container, like Bitbucket, to test and build your Angular app.

To be able to test the Angular solution generated with @angular/cli, we need a Docker Container with Node to run npm install in order to install the dependencies and then we need an instance of chrome to run the tests.

For this, we have two solutions. I prefer the first one in which we take the official Node Docker Container, for the time being, 6.9.4, we install the chrome browser, then run npm install to fetch the dependencies of the project, then finally run our tests.

For Atlassian Bitbucket Pipelines, we are going to use the following code in the commit bitbucket-pipelines.yml file:

image: node:6.9.4

pipelines:
  default:
    - step:
        caches:
          - node
        script:
          - apt-get update; apt-get install -y gettext-base;
          - echo 'deb http://dl.google.com/linux/chrome/deb/ stable main' > /etc/apt/sources.list.d/chrome.list
          - wget -q -O - https://dl-ssl.google.com/linux/linux_signing_key.pub | apt-key add -
          - set -x && apt-get update && apt-get install -y xvfb google-chrome-stable
          - wget -q -O /usr/bin/xvfb-chrome https://bitbucket.org/atlassian/docker-node-chrome-firefox/raw/ff180e2f16ea8639d4ca4a3abb0017ee23c2836c/scripts/xvfb-chrome
          - ln -sf /usr/bin/xvfb-chrome /usr/bin/google-chrome
          - chmod 755 /usr/bin/google-chrome
          - npm install
          - ./node_modules/@angular/cli/bin/ng -v
          - ./node_modules/@angular/cli/bin/ng test --watch=false

Please take into consideration that this is the code for a debian linux machine inside the Docker Container, so you have to adapt if you have a different machine.

I said that this solution is my preferred one because I want to test my app against the newest chrome version and I achieve this by installing the latest on each commit I make.

The downside of this solution is that it has to fetch all the updates for the linux machine and install chrome and it will take between 2 and 3 minutes to accomplish so this can become costly if you have a time limit on your Bitbucket account.

The second solution is to take a container from Docker Container Hub containing already Node and Chrome and to run the code starting from npm install. This way you cut in half the runtime, but you are going to test against the version of chrome installed into the Docker Container.

Have fun!

Leave a Reply

Your email address will not be published. Required fields are marked *