Angular 2 – Typescript code coverage with Istanbul

One of the important things when you switch to a new framework, like Angular 2, is testing. And one of the important things in testing is code coverage.

TL;DR;

Here is the sample project as a download.

Today I would like to show you, how to implement code coverage with Typescript and Angular 2.

First I create my project from the Quick Start Guide of Angular 2.

Then I will add some new devDependencies to the package.json

  • jasmine-core is the test framework.
  • karma is the test runner.
  • karma-chrome-launcher is necessary because I want to run my tests in Google-Chrome or Chromium.
  • karma-coverage generates the code coverage with Istanbul.
  • karma-jasmine is an adapter for the jasmine test framework.
  • karma-sourcemap-loader is a plugin to load source map files.
  • And remap-istanbul is a package to remap the Istanbul code coverage to its original position (in my case the Typescript files).

Install the dependencies with npm install

Karma TestRunner

The next step is to configure the karma test runner, I create a file karma.conf.js in the root directory of my project.

I commented the important parts in the code file above.

Now I create a file test-main.js in the root directory of my project.

This is the main entry point for the tests and is called by the karma test runner.

I commented the important parts in the code file above.

NPM Scripts

To run the tests I create some new scripts in the package.json.

  • clean:reports is a small script to delete the reports folder every time I run the test script
  • remap-istanbul is a task to fetch the information of coverage-final.json and generate an Html-report
  • test is an orchestration task for cleaning up, run tests and generate an Html-report

Let’s see if everything is ok, run the test task with npm run test. The result should look something like that:

Chrome 48.0.2564 (Windows 10 0.0.0): Executed 0 of 0 ERROR (0.002 secs / 0 secs)

That’s because I have no tests written yet.

Writing Tests

It’s time to create a test, to see if our test system works. I create a new file test.service.spec.ts in the ./app directory.

if you would like to learn how to test an Angular 2 application, I recommend this Tutorial.

And now I implement the test.service. I create a file test.service.ts in the ./app directory.

 

Result

The last Step is to run the test task again and check the results:

Chrome 48.0.2564 (Windows 10 0.0.0): Executed 1 of 1 SUCCESS (0.011 secs / 0.005 secs)

Yay, everything works. One test with one assertion was successful.

Now i navigate to the html-reports directory ./reports/coverage/html-report and open the index.html file.

The result is a code coverage report for your Typescript files:

angular 2 typescript coverage jasmine karma istanbul

Here is the sample project as a download.

2 comments on “Angular 2 – Typescript code coverage with IstanbulAdd yours →

Comments are closed. You can not add new comments.

  1. “I commented the important parts in the code file above.”
    You commented just about everything, does that mean it’s all important?

    In your karma.conf.js you include a lot of node_modules, as well as a bunch of .ts files.
    Are all of those required to make this work and end up with a coverage report mapping back to the .ts files?

    Btw, I think you sample download is out of date and doesn’t work as is. Any chance you can check that and update it?

    Thanks

    Any chance you can provide more details on how this all works from a high level perspective.. ie. how all the pieces fit together.