How to setup Angular Unit Testing in CI

You may think that just adding ng test into your CI setup will do the job for you, but that might not work for some, if not all, CI tools. In my case, it was TeamCity, but this article should be helpful for other CIs, e.g. Jenkins, circleci, etc., too.

By the way, if you are having trouble even getting started to make your Angular application ng test ready after a long time, check out my other article here.

Create a new configuration for CI

Create a copy of ./src/karma.conf.js, let’s call it ./src/karma-ci.conf.js. Keep it open in your favorite IDE. (VS Code! VS Code!)

Karma Reporter Plugin Setup

Install your reporter plugin.

npm install karma-<plugin name> --save-dev

Here, <plugin name> is your CI’s reporter plugin. Check out Karma documentation for more details. You can search npm for a list of their reporter plugins too.

Add reporter plugin to configuration

In karma-ci.conf.js, in plugins: [...] config property, replace the following lines:

require('karma-jasmine-html-reporter'),
require('karma-coverage-istanbul-reporter'),

with…

require('karma-<plugin name>-reporter'),

In reporters config property, replace the following:

reporters: config.angularCli && config.angularCli.codeCoverage
  ? ['progress', 'coverage-istanbul']
  : ['progress', 'kjhtml'],

with…

reporters: ['<plugin name>'],

Note

1. karma-coverage-istanbul-reporter is the Test Coverage reporter.
2. My CI was TeamCity, so I added the karma-teamcity-reporter plugin.
3. Put the right <plugin name> in reporters. For me, it was just teamcity.

Browser configuration

Karma opens up your application in an actual browser to run its test cases. During development, you are fine running tests using a Chrome browser. But, for CI, you need a headless browser. Replace the following:

browsers: ['Chrome']

with…

browsers: ['ChromeHeadlessCI'],
customLaunchers: {
  ChromeHeadlessCI: {
    base: 'ChromeHeadless',
    flags: ['--no-sandbox']
  }
},

Other configuration tweaks

There are a few other minor, good-to-have configuration tweaks. Replace the following:

logLevel: config.LOG_INFO,
autoWatch: true,
singleRun: false

with…

logLevel: config.LOG_ERROR,
autoWatch: false,
singleRun: true,
browserNoActivityTimeout: 40000,

Note

1. Add browserNoActivityTimeout (in milliseconds) if you see timeout errors in your CI when running ng test.
2. There are a lot of other configurations and CLI flags provided by Karma. Check out their documentation for more details. (Let me know if you find anything interesting.)

npm scripts — test-ci

If you like brevity, you can add the following in package.json which lets you run your CI configuration as, simply, npm run test-ci. There are other advantages, like if you want to change your test run configuration, just changing it in package.json is enough; you do not need access to your CI.

"scripts": {
    ...
    "test-ci": "ng test --karma-config=src/karma-ci.conf.js --no-progress",
    ...
}

CI Setup

Go to your CI tool’s settings, add the following to your build step, and watch the magic unfold.

npm run test-ci

And never forget, future is bright — Tomas Trajan