How to use code coverage in Electron app which uses Angular?

Question

I write an Electron app (in TypeScript) that I test through AVA (in whose tests I use Spectron to communicate with the app). The (browser) content of my app is generated by using Angular. I execute the tests via:

npm run ava

All of this works great! Now I would like to put code-coverage on top of it. As listed above I use a variety of different frameworks and almost each one brings in their own solution.

• AVA recommends nyc.
• Electron has some user-tutorials which use jest + their coverage?
• Angular brings in their own coverage which AFAIK can only be invoked by ng test so this is out too (I guess) because I have an electron app

I tried nyc but in its default configuration it only records the "main-process", but more importantly would be the (browser) content of the app. AFAIK nyc could instrument all *.ts files to add coverage info but to combine that with the Angular build tools doesn't seem to be easy/possible.

What would be a good way to solve this task? Any experiences on this?

Answer 1

Let's take a look at how test coverage works. It generally consists of 2 parts: instrumenting and reporting.

• Instrumenting is basically wrapping lines of source code with additional counters that increment each time that line of code is executed
• Reporting is reading those counters and presenting/storing in a form of some report.

Instrumenting

nyc automatically instruments the node process it executes (and its child processes). However, in your case the actual code you want to measure is your compiled angular app that runs in a browser and not the Node process with the test runner itself.

What it means is that you need to instrument your app code yourself. For an Angular app it generally means you need a custom builder. Here is a great article that explains how to do that (they talk about Cypress tests - but the instrumenting part is the same). Alternatively, you could pre-process your source files (via nyc instrument) before running ng build. This approach is featured in another article I googled.

Reporting

Code instrumented as above would track its run metrics and store them in an istanbul-specific format in window.__coverage__. But how do we extract it? It doesn't seem like Spectron has built-in support for extracting those metrics (I will be glad to learn otherwise, but... github issues/40, issues/261).

It sounds like our best try would be to implement it ourselves. One could access window object from Spectron's BrowserWindow (e.g. like in this SO answer). And store the content of its __coverage__ property in a file after each test. You could use @cypress/code-coverage source code as an example of such an approach (apparently it's for Cypress, not for Spectron - but the general idea is the same).