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
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.