Perform single tests using Karma and Angular CLI when tests slow down the development of large projects

The changes to be applied to a standard project to get more control over the execution of unit tests through karma for an Angular 6 or minor version.

For a frontend developer, issues related to testing are often “less linear” than the classic TDD approach of backend development. Those who have had the opportunity to work in angular 2 will certainly have been able to appreciate the tools availabile by angular CLI, especially for testing.

In daily development I found that “ng test”, the command that allows us to perform unit tests using karma, does not provide the ability to choose which tests to perform, which considerably slow the execution with a large number of thest, especially the “Watch” in mode thus making a TDD approach almost impossible.

To solve the problem I have applied the following modifications to my angular project to have the possibility to launch and keep on watch mode only the tests that i chose during the development.

In this way I can watch the status of the tests related to the feature that I am developing in full TDD without having to wait for the complete test suite every time i save or add a line of code, to maintaining the backward compatibility I can launch the complete test suite at any time .

The basic idea is to pass an additional parameter to karma and change the way this “selects” the .spec.ts files to be executed.

Note

This article is the english translation from the original “Eseguire test singoli tramite Karma ed Angular CLI quando i test rallentano lo sviluppo dei progetti più grandi” also written by me for my corporate blog.

This article is also part of a series of publications about testing the frontend that will provide some concrete cases found in the daily development of functional tests of Angular 2 applications . You can read the original Italian version here.

Reference repository

A working example of the angular base project including all tests that we will use as example is available at: https://github.com/mzuccaroli/angular-cli-tests-example, it is a simple angular2 project generated with angular CLI with the command “ng new”. For more information see the quickstart of an angular2 project.

Changes to be made

Step 1. minimist

As a first step you need to install minimist, a library that gives us the ability to read options and arguments directly from bash:

$ npm install --save-dev minimist

Now we can call angular cli with an additional parameter, read it through minimist and pass it to test.ts: the part of the code delegated to select the .spec.ts files

Step 2. karma.conf

Edit karma.conf.js by adding the following code to the beginning of the file:

in the part relative to the “config” object, we add the field ‘components’ readen by minimist, making the parameter available to karma

Step 3. tests.ts

Now modify the src/test.ts file replacing the code fragment:

with:

Simply, if present the “components” option will be used to filter the entire list of .spec.ts files, identifying a subset of the test suite before it is executed.

Run the tests

At this point everything is ready to “ask” karma to perform only the tests that we need, just run the command:

$ ng test --components test3

to verify that only the “app.component.test3.spec.ts” test is launched

It is useful to know that a regular expression is executed on the title of the “.spec.ts” files, so the command:

$ ng test --components header

will run:

  • “header-menu.spec.ts”
  • “header-login-form.spec.ts”
  • “header-search.spec.ts”

which is extremely useful to perform specific subsets of our tests but also to help us to organize the component tree consistently.

Note that angular cli will return a warning as it does not include the additional parameter “components” in version 1.4, this does not affect the operation in any way.

$ ng test --components test3 
The option '--components' is not registered with the test command. Run `ng test --help` for a list of supported options.

Backwards compatibility

As a verification we can launch the test suite in the standard way and see that all the tests are performed in a full-backward compatible way.

$ ng test

Run the tests via npm

If we are used to launch tests via npm, we can modify the package.json file
changing the line:

"test": "ng test",

with:

"test": "ng test --components $tags",

at this point the command:

$ npm test test3

it will be equivalent to

$ ng test --components test3

Other versions of angular cli

The described procedure has been tested with versions 4 and 6 of Angular, it is possible that with subsequent versions some adaptation to the procedure will be necessary or angular CLI will introduce natively the discussed feature.