Hi there, today we’re going to check out how to let our Angular Tests run in a docker container.
Interested in the final solution? It’s here.
The default configuration of Angular requires a Chrome browser to be installed on your machine. The browser is launched every time you execute tests locally. That might not work for some Continuous Integration Environment, Build Server as it might not have any browsers installed. Therefore we would need to run a browser in headless mode inside the docker container.
If you can run docker containers in your Build Pipeline, it should be possible to adjust Angular project setup to run the tests there. Let us see how a simple Proof of Concept might look like.
Create New Application
To focus on the technic let’s just create a new folder ng-test-docker and execute
ng new app in a command line. You’ll be asked regarding the routing module and stylesheet format – just select anything; I did opt out of the routing, as for stylesheet format – SCSS was my choice.
After that, angular creates a template app along with default tests.
You can check how the tests run by calling
cd ./app and then
ng test. You’ll notice that a browser starts and executes in total 3 tests:
should render title
should have as title 'app'
should create the app
Change Tests Configuration
As you see, the Browser starting with tests is what we try to solve now. Before we proceed with the docker, let’s make some adjustments in our tests’ configuration so that the tests run in headless mode, without Graphical User Interface (GUI).
In the file app/karma.conf.js, add a new custom launcher configuration just right after
The following setting in this file
browsers: ['ChromeHeadless'], should be set to ChromeHeadless – newly described launcher.
And the last thing:
singleRun: true, tells karma to launch test in one single run within one start of the browser.
What we have just done is sufficient not to see the browser when calling
ng test. Try running it in the ./app folder to check it out.
With Docker, we have many choices on how to address the issue. But let us do some simple, minimalistic configuration.
Let’s create a new file frontend.Dockerfile in the root ng-test-docker before app folder.
RUN apk add chromium
COPY ./app/. ./
RUN npm install
RUN npm run test
This Dockerfile is easy to run like this
docker build -f frontend.Dockerfile -t ng-test-docker .
After running the Docker container tests, you would get a console output similar to the one below.
HeadlessChrome 86.0.4240 (Linux 0.0.0): Executed 3 of 3 SUCCESS (0.887 secs / 0.746 secs)
TOTAL: 3 SUCCESS
TOTAL: 3 SUCCESS
Removing intermediate container fedf7a5967b7
Successfully built 8aa93030300d
Successfully tagged ng-test-docker:latest
What the Dockerfile basically does is simple:
- Take npm Alpine Linux base image.
- Install Chromium browser on top of it.
- Specify our working directory /app inside the image.
- Define an environment variable CHROME_BIN with the location to chromium. This will be needed by Angular later on.
- Copy all local files from ./app/ into the working directory of the Docker image.
npm installto install all dependencies.
- Run the tests.
That is it; now you have your tests running in a Docker container.
To get a complete source version of this example, just follow this way.
If you plan to have some pictures or other assets in your tests, please consider adding this setting into karma.conf.js.
I hope it helps you in doing something nice.
If you have any suggestions, questions, or opinions, just let me know; I’d be happy to hear back. You can reach me out over the social links below.
May your tests always be green.