Using remap-istanbul for typescript coverage

[Ludevik]

It would be useful to integrate https://github.com/SitePen/remap-istanbul to this project, so that coverage report displays coverage for original typescript files.

[PatrickJS]

do you think you can make a pull-request?

[antonybudianto]

@Ludevik @gdi2290 , you can take a look at my angular 2 starter, I already integrate it with gulp test task

[blacksails]

I would really like an example of doing this with webpack as well.

@antonybudianto I just checked out your angular 2 starter, it looks awesome.

[antonybudianto]

you may create new npm script to use the remap-istanbul command line, just make sure the sourcemaps and coverage-final.json are ready.

[blacksails]

Hmm im having trouble getting remap-istanbul to find the sourcemaps. I suspect it has something to do with karma-webpack, and the fact that spec-bundle.js sourcemaps are not saved.

[readme42]

@blacksails Did you find a way for remapping with remap-istanbul or is it still a problem because the sourcemaps exist only in memory?

[blacksails]

@readme42 no, but if you find a neat solution please do tell :)

[andreyctkn]

@kitsonk need your help)

[thaiat]

+1

[kitsonk]

Sorry folks, I have been dragged into "real life" and haven't had the time for open source. I will try to take a look at things today.

[PatrickJS]

the real solution might be too hacky. We can just wait for istanbul 1.0.x

[andreyctkn]

gotwarlost/istanbul#212 maybe should wait for non-hack solution
cc @gotwarlost

[MartinMuzatko]

Any updates? I'd love to have a solution. Guess we have to wait for Istanbul?

[mlegenhausen]

+1

[ghost]

Got this to work by adding my typescript files to the 'files' array in karma.config.js like this:

     'src/**/*.ts'

Needed this to exclude the .ts file:

    // list of files to exclude
    exclude: [
        '**/*.ts'
    ],

[jberndsen]

@andrewbetts could you perhaps list the entire karma.conf.js, spec-bundle.js and wbepack.test.config.js (if they differ from the AngularClass seed)? I'm struggling with getting remap-istanbul to find the sourcemaps as well. Thanks!

[bruce-pinto-mitchell]

Has there been any feedback on this matter?

[oshalygin]

Following thread. Would love what @jberndsen suggested

[zakhenry]

I have implemented a hack on top of https://github.com/deepsweet/istanbul-instrumenter-loader which allows for webpack loaded ts files to be remapped.

See https://www.npmjs.com/package/sourcemap-istanbul-instrumenter-loader

Usage example here: https://github.com/ubiquits/core/pull/4/files#diff-0c57afe231fcf93449ecd83381008ec9R28

Bear in mind that this is a pretty dirty hack and so should be treated as temporary until there is a better solution.

[bruce-pinto-mitchell]

I have a similar/potentially the same issue, using angular 2 with typescript. The coverage report is based off the transpiled typescript, not the pretranspiled class. This obviously skews the data report, please can someone point me in the right direction as there seem to be multiple issues open on the same basis but I am yet to find a definitive fix/plan to rectify. Here is the example of the coverage report including the transpiled code:

[kozlice]

I got TS coverage working this way:

1. Enable inlineSourceMap in TS config (this will require disabling simple sourceMap, you can create a separate tsconfig.json for test env and ask awesome-typescript-loader to use it)
2. In Webpack test config, use inline-source-map as devtool, add istanbul-instrumenter-loader to postLoaders (ignores tests files and node modules).
3. In Karma config, I've added source-map-support framework, enabled JSON coverage reporter and used karma-remap-istanbul for report generation.

Result:

[samvloeberghs]

@kozlice woow superb! Will try that out soon

[RyanP13]

@kozlice is there any chance you could post your configuration?

Would be really useful to see all the moving parts :)

[kozlice]

@RyanP13 Sure, I'll create a repo or a gist with whole configuration (this weekend most likely, need some time to comment everything so it'll be clear how it works)

[bennycode]

@kozlice Have you been successful over the weekend? :)

[kozlice]

Sorry for delay, here's the repo: https://github.com/kozlice/angular2-webpack-boilerplate

There are a lot of things to do yet, but since I promised to share solution for code coverage, I've published it as-is for now (I guess everything else can be found in other boilerplates anyway).

[ottoo]

Thanks, got it working with ur tips aswell!

[Raathigesh]

Thank you for the sample repo! Is there a way to include all the sources in the coverage report rather than only the files with test?

[kozlice]

@Raathigesh: @dzolnjan has opened an issue about this, I'm searching for a solution.

[abierbaum]

Is anyone working on getting up a PR to get this back into the main repository?

[gizm0bill]

take in mind so that you don't use istanbul-instrumenter-loader@1.0.0 because it won't work, remap-istanbul doesn't load coverage sourcemap code. been hung up on this the whole day

[emilio-martinez]

I've tried this so many different ways, and I still can't seem to get a html output report in the end. I've tried many things mentioned here:

• adding source-map-support to the frameworks
• a test-specific tsconfig
• istanbul-instrumenter-loader as a post-loader on webpack (which was outright error-ing out as soon as added)

Ultimately the config on my karma conf (roughly)

frameworks: ['jasmine', 'source-map-support'],
files: [
      { pattern: './src/test.ts', watched: false }
    ],
reporters: [ 'progress', 'coverage', 'karma-remap-istanbul' ],
coverageReporter: {
      dir: 'coverage',
      reporters: [
        { type: 'text-summary' },
        {
          type: 'json',
          subdir: '.',
          file: 'coverage-final.json'
        }
      ]
    },

    remapIstanbulReporter: {
      src: 'coverage/coverage-final.json',
      reports: {
        lcovonly: 'coverage/lcov.info',
        html: 'coverage/report'
      },
      timeoutNotCreated: 5000,
      timeoutNoMoreFiles: 1000
    }

Am I glaringly missing something? What's the key element here?

[joshwiens]

@emilio-martinez - https://www.npmjs.com/package/karma-remap-istanbul ??

[emilio-martinez]

@d3viant0ne sorry, can you clarify your comment?

[joshwiens]

@emilio-martinez - That lib was created to solve this exact problem. Essentially, it calls remap-istanbul during test execution giving you accurate TypeScript coverage at the command line as well as in things like lcov / html report output.

In short it's the cleanest solution that currently exists for proper TypeScript coverage imo.

Essentially, it's @kozlice's solution <--- PR Welcome for that one as it's your work. If you don't have time, i'll take care of it.

[pieroway]

the repo: https://github.com/kozlice/angular2-webpack-boilerplate doesn't work for me at all. i download it, run install, then test, and various combinations still result in an empty coverage.json file.
i haven't had any success with any tutorials that try to explain how this could work.
is it just me, or does getting TS code coverage reports with Angular2 appear to be nearly impossible.

I'm out of tutorials to try. :)

[gizm0bill]

@pieroway there must be something wrong with your paths in the configs... check those to be absolute, that's what worked for me...

[pieroway]

the test "angular2-starter" repository by antonybudianto commented on Dec 24, 2015 worked out of the box! yeah!

i'll analyze that and see if I can understand what is needed to make it work in my app. if that fails I'll return and try to make the "angular2-webpack-boilerplate" work.

all the improvements to existing angular2 starters seem to add more than is needed.

what i would like to see is a absolute basic starter project with TS, and a clone of the project with the BARE minimum required to get TS code coverage reports. the delta will make it obvious what is needed. even with the solution by antonybudianto, it's hard to tell what are the actual changes to make to my project to get TS code coverage working.

the necessary changes are not well documented, and in most tutorials hidden in 'other improvements'.

of course, it could just be that I'm just not seeing the tree for the forest. i admit angular2, typescript, jasmine, gulp, etc. are all pretty new to me.

only thing i can do is just keep plugging away at it until the code coverage aspect all clicks together in my mind.

Al

[kozlice]

@pieroway Most likely it has broken again because some dependencies are not frozen at certain version and they had updates with BC breaks since I got coverage working. I'll fix it in a couple of days.

[pieroway]

Does anyone who really understands this process want to write up a summary of what changes are needed to make the process work with an existing project? A what to change where, and why, description of the minimum steps. And to make it really clear avoid the words "just" and "you should alos...(and then leave us hanging as to how or why)". Too many tutorials end in a vague suggestion of a mysterious final step that the newbie just won't understand. Or are promised in the next edition which never quite got written. :)

I know such tutorials exist, but I've tried them all to no avail for the reasons mentioned.

My goal in asking is to help the next person who comes along who will cry in appreciation.

[erikbarke]

Hey guys, having struggled with getting test coverage I decided to create a new plugin, karma-typescript. It compiles Typescript on the fly with type checking and creates coverage using remap-istanbul. It works for Angular2 with this setup:

dependencies in package.json:

"devDependencies": {
    "@angular/common": "2.2.3",
    "@angular/compiler": "2.2.3",
    "@angular/core": "2.2.3",
    "@angular/platform-browser": "2.2.3",
    "@angular/platform-browser-dynamic": "2.2.3",
    "@types/core-js": "^0.9.34",
    "@types/jasmine": "^2.5.37",
    "@types/node": "^6.0.51",
    "core-js": "^2.4.1",
    "jasmine-core": "^2.5.2",
    "karma": "^1.3.0",
    "karma-chrome-launcher": "^2.0.0",
    "karma-jasmine": "^1.0.2",
    "karma-typescript": "beta",
    "karma-typescript-angular2-transform": "latest",
    "rxjs": "5.0.0-beta.12",
    "typescript": "latest",
    "zone.js": "^0.6.26"
  }

karma.conf.js:

frameworks: ["jasmine", "karma-typescript"],

files: [
    { pattern: "base.spec.ts" },
    { pattern: "src/app/**/*.+(ts|html)" }
],

preprocessors: {
    "**/*.ts": ["karma-typescript"]
},

karmaTypescriptConfig: {
    bundlerOptions: {
        entrypoints: /\.spec\.ts$/,
        transforms: [
            require("karma-typescript-angular2-transform")
        ]
    },
    coverageOptions: {
        instrumentation: true
    }
},

reporters: ["progress", "karma-typescript"],

browsers: ["Chrome"]

base.spec.ts:

import "core-js"
import "zone.js/dist/zone";
import "zone.js/dist/long-stack-trace-zone";
import "zone.js/dist/proxy";
import "zone.js/dist/sync-test";
import "zone.js/dist/jasmine-patch";
import "zone.js/dist/async-test";
import "zone.js/dist/fake-async-test";

import { TestBed } from "@angular/core/testing";
import { BrowserDynamicTestingModule, platformBrowserDynamicTesting } from "@angular/platform-browser-dynamic/testing";

TestBed.initTestEnvironment(BrowserDynamicTestingModule, platformBrowserDynamicTesting());

Example coverage:

Runnable example for Angular2

More runnable examples in the integration tests.

Late to the party so hope this helps anyway, cheers!

Edit: typo
Edit: updated example

[oshalygin]

@erikbarke good work man. Confirmed working flawlessly on my POC ng2 project. Thanks!

[trumbitta]

Thanks @kozlice , works like a charm!

Also, @erikbarke your plugin makes me 😍 . Only reason I can't use it (yet) is my project currently has webpack defining some globals and a couple other weird things.

[luchillo17]

@trumbitta I'm in the same boat, using the DefinePlugin for some variables included the current version of the repo.