karma-jspm icon indicating copy to clipboard operation
karma-jspm copied to clipboard

Another approach for code coverage measurement

Open malaupa opened this issue 7 years ago • 15 comments

It was great to see an approach in https://github.com/Workiva/karma-jspm/pull/147 to measure code coverage while using jspm with karma. I searched very long for a transpiler agnostic and more simple attached reporter for karma. But the idea in https://github.com/Workiva/karma-jspm/pull/147 has drawbacks:

  1. instrumented files are loaded twice (in preprocessor and while test running)
  2. preprocessed code has file system relative paths
  3. temp files are created for remapping
  4. instrumented code is stored in jspm.config.coverage and this can be huge
  5. storing instrumended code in causes unpredictable code generation for karma index file, because karma uses replace in https://github.com/karma-runner/karma/blob/master/lib/middleware/karma.js#L213 and that causes unwanted replacing, if you have RegExp expression with $' or $$ in your transpiled code

Thats why i create another implementation using istanbul directly while test running in the browser:

  1. loading istanbul in the client with esprima and escoedgen (for that i must create a postinstall script to build a browser runable version)
  2. polyfill added for base64 source map creation to run in older browsers
  3. creating instrumenter with embed source to prevent temp files
  4. added a new configuration item in jspm configuration jspm.coverage to specify files to track

I think the code is simpler and there is no need for a preprocessor. Feedback is welcome!

The following karma config I used:

'use strict';

var path = require('path');

module.exports = function (config) {

var configuration = {
        basePath: '',

        captureTimeout:             60000,
        browserDisconnectTimeout:   10000,
        browserDisconnectTolerance: 1,
        browserNoActivityTimeout:   60000,

        autoWatch: false

        plugins: [
            'karma-chrome-launcher',
            'karma-jasmine',
            'karma-jspm'
        ],

        frameworks: [
            'jspm',
            'jasmine'
        ],

        browsers: [
            'Chrome'
        ],

        jspm: {
            config:     'jspm.conf.js',
            packages:   'jspm_packages/',
            loadFiles:  ['src/**/*.Spec.js'],
            serveFiles: ['jspm_packages/*.js', 'src/**/!(*.Spec).js', 'src/assets/**/*.json', 'lib/**/*', 'src/app/**/*.html'],
            coverage:   ['src/**/!(*.Spec).js']
        },

        proxies: {
            '/assets':                '/base/src/assets',
            '/app':                   '/base/src/app'
        },

        reporters: ['progress', 'jspm'],

        coverageReporter: {
            dir:       'test_results/coverage/',
            reporters: [
                {
                    type:   'cobertura',
                    subdir: './',
                    file:   'cobertura.xml'
                }, {
                    type:   'html',
                    subdir: './report_html'
                }
            ],
            includeAllSources: true
        }
};

config.set(configuration);
};

I have tested the code against a project with more than 450 tests in Chrome.
Sorry for the whitespace insertion. Was caused by my formatter.

malaupa avatar Sep 16 '16 07:09 malaupa

Raven

Number of Findings: 0

aviary-wf avatar Sep 16 '16 07:09 aviary-wf

No comments? What should be done to get this pull request merged into the master branch?

malaupa avatar Oct 12 '16 06:10 malaupa

@malaupa Thanks for attempting to provide a better approach! I did explore this route when I crafted the (https://github.com/Workiva/karma-jspm/pull/147) solution and had to drop it early on do to the lack of sourcemap support in Istanbul. Most of the drawbacks that you listed for my solution had to be done in order to enable correct file mappings on the final html coverage report. In your solution, does the original source files show up in the final html report? And does it do so with the correct mappings?

m-a-r-c-e-l-i-n-o avatar Oct 25 '16 20:10 m-a-r-c-e-l-i-n-o

@m-a-r-c-e-l-i-n-o Yes and yes. This was the goal.

malaupa avatar Oct 25 '16 21:10 malaupa

@malaupa fantastic.

Thats why i create another implementation using istanbul directly ...

I couldn't understand how you were generating the correct mapping using Istanbul directly, but looking at the code now, it appears that you are still using my reporter file with remap-istanbul, which is great.

@maxwellpeterson-wf @evanweible-wf This solution does indeed seem more efficient than mine, I think that scratching my pr in favor of this one, might be a good choice.

m-a-r-c-e-l-i-n-o avatar Oct 25 '16 21:10 m-a-r-c-e-l-i-n-o

Attempted to use this PR but unfortunately so far no luck getting coverage.

The tests run just fine but the coverage report is empty.

Chrome 54.0.2840 (Mac OS X 10.12.1): Executed 178 of 178 SUCCESS (1 min 18.974 secs / 0.859 secs)
----------|----------|----------|----------|----------|----------------|
File      |  % Stmts | % Branch |  % Funcs |  % Lines |Uncovered Lines |
----------|----------|----------|----------|----------|----------------|
----------|----------|----------|----------|----------|----------------|
All files |      100 |      100 |      100 |      100 |                |
----------|----------|----------|----------|----------|----------------|


=============================== Coverage summary ===============================
Statements   : 100% ( 0/0 )
Branches     : 100% ( 0/0 )
Functions    : 100% ( 0/0 )
Lines        : 100% ( 0/0 )
================================================================================
Executing task:  test:coverage

Relevant parts of konf:

...
    jspm: {
        config: 'client/jspm.config.js',
        browser: 'client/jspm.browser.js',
        packages: 'client/jspm_packages/',

        loadFiles: [
            'client/components/**/*.spec.js',
            'client/app/**/*.spec.js'
        ],


        // Patterns for files that you want Karma to make available, but not loaded until a module requests them. eg. Third-party libraries.
        serveFiles: [
            'shared/**/!(*spec).js',
            'client/libs/**/*.js',
            'client/components/**/!(*spec).js',
            'client/app/**/!(*spec).js',
            'client/test/mock/**/*.js',
            'client/test/stub/**/*.js'
        ],
        coverage: [
            'client/components/**/*.js',
            'client/app/**/*.js'
        ],
        paths: {}
    },
    proxies: { // avoid Karma's ./base virtual directory
        '/jspm_packages/': '/base/client/jspm_packages/',
        '/shared/': '/base/shared/',
        '/client/': '/base/client/'
    },
    exclude: [],
    frameworks: ['jspm', 'mocha', 'chai-as-promised', 'sinon-chai'], // http://stackoverflow.com/questions/31825745/chai-variable-not-loaded-by-karma-grunt
    browsers: ['Chrome'], // ['PhantomJS2', 'Chrome', 'Firefox', 'Safari' ],
    plugins: [
        'karma-jspm',
        'karma-chrome-launcher',
        'karma-mocha',
        'karma-chai-as-promised',
        'karma-sinon-chai',
        'karma-junit-reporter',
        'karma-sourcemap-loader',
        'karma-ng-html2js-preprocessor',
        'karma-spec-reporter'
    ],


    // Test reporter, that prints detailed results to console (similar to mocha's spec reporter).
    reporters: ['progress', 'jspm'],
    preprocessors: {
        '**/*.js': ['sourcemap'],
        'client/app/**/*.html': ['ng-html2js']
    },
    coverageReporter: {
        dir: path.join(target.coverageFolder),
        reporters: [
            {type: 'cobertura', subdir: '.', file: 'cobertura-coverage.xml'}, // (xml format supported by Jenkins)
            {type: 'html', subdir: '.'},
            {type: 'text'},
            {type: 'text-summary'}
        ],
        includeAllSources: true
    }

cyrixmorten avatar Nov 09 '16 15:11 cyrixmorten

@cyrixmorten I added reporters: text and text-summary to my config and reports are fine. Could you test your config without preprocessors? Could you show your jspm.conf.js?

malaupa avatar Nov 10 '16 09:11 malaupa

Tried removing the preprocessors, updating libraries, switching to jasmine instead of mocha and none of which seems to make the coverage report output come up.

Wonder if I am missing a step, but can't seem to figure it out.

Also dived into init.js within karma-jspm to ensure that the files are being read and consumed, which indeed seems to be the case. Why it is not being instrumented, I cannot figure out.

Here is my jspm conf:

SystemJS.config({
  transpiler: "plugin-typescript",
  typescriptOptions: {
    "module": "commonjs",
    "noImplicitAny": false,
    "typeCheck": false,
    "types": []
  },
  packages: {
    "designer": {
      "main": "app/designer.module",
      "meta": {
        "*.ts": {
          "loader": "ts"
        },
        "*.css": {
          "loader": "css"
        },
        "*.html": {
          "loader": "text"
        }
      }
    },
    "client": {
      "defaultExtension": "js"
    },
    "app": {
      "defaultExtension": "js"
    },
    "components": {
      "defaultExtension": "js"
    },
    "shared": {
      "defaultExtension": "js"
    },
    "npm:[email protected]": {
      "map": {
        "yamlparser": "npm:[email protected]"
      }
    },
    "npm:[email protected]": {
      "map": {}
    },
    "npm:[email protected]": {
      "map": {
        "react-addons-transition-group": "npm:[email protected]",
        "react-dom": "npm:[email protected]",
        "react-addons-css-transition-group": "npm:[email protected]",
        "react": "npm:[email protected]"
      }
    }
  },
  nodeConfig: {
    "paths": {
      "github:": "jspm_packages/github/",
      "npm:": "jspm_packages/npm/",
      "local:": "jspm_packages/local/",
      "shared/": "../shared/",
      "designer/": "src/"
    }
  },
  devConfig: {
    "map": {
      "babel": "npm:[email protected]",
      "babel-runtime": "npm:[email protected]",
      "core-js": "npm:[email protected]",
      "ts-runtime": "npm:[email protected]",
      "plugin-typescript": "github:frankwallis/[email protected]",
      "module": "npm:[email protected]"
    },
    "packages": {
      "npm:[email protected]": {
        "map": {}
      }
    }
  },
  map: {
    "ua-parser": "npm:[email protected]",
    "auth0-lock": "npm:[email protected]",
    "measurementjs": "npm:[email protected]",
    "measurement": "github:cyrixmorten/[email protected]"
  }
});

SystemJS.config({
  packageConfigPaths: [
    "npm:@*/*.json",
    "npm:*.json",
    "github:*/*.json",
    "local:*.json"
  ],
  map: {
    "jspm-nodelibs-process": "npm:[email protected]",
    "angular-hotkeys": "npm:[email protected]",
    "angular-chart.js": "npm:[email protected]",
    "bluebird": "npm:[email protected]",
    "sinon": "npm:[email protected]",
    "sinon-as-promised": "npm:[email protected]",
    "jquery-ui-touch-punch": "npm:[email protected]",
    "angular-mocks": "github:angular/[email protected]",
    "css": "github:systemjs/[email protected]",
    "domain": "npm:[email protected]",
    "https": "npm:[email protected]",
    "jqueryui": "npm:[email protected]",
    "angular": "npm:[email protected]",
    "angular-animate": "github:angular/[email protected]",
    "angular-aria": "github:angular/[email protected]",
    "angular-cookies": "github:angular/[email protected]",
    "angular-dragdrop": "npm:[email protected]",
    "angular-environment": "npm:[email protected]",
    "angular-foundation": "npm:[email protected]",
    "angular-fx": "npm:[email protected]",
    "angular-gravatar": "npm:[email protected]",
    "angular-jwt": "npm:[email protected]",
    "angular-material": "github:angular/[email protected]",
    "angular-mousewheel": "npm:[email protected]",
    "angular-pan-zoom": "npm:[email protected]",
    "angular-sanitize": "github:angular/[email protected]",
    "angular-spinner": "npm:[email protected]",
    "angular-storage": "npm:[email protected]",
    "angular-translate": "github:angular-translate/[email protected]",
    "angular-translate-loader-static-files": "github:angular-translate/[email protected]",
    "angular-translate-storage-cookie": "github:angular-translate/[email protected]",
    "angular-translate-storage-local": "github:angular-translate/[email protected]",
    "angular-tree-control": "npm:[email protected]",
    "angular-ui-router": "npm:[email protected]",
    "angular-utils-pagination": "npm:[email protected]",
    "assert": "npm:[email protected]",
    "auth0-angular": "npm:[email protected]",
    "buffer": "npm:[email protected]",
    "child_process": "npm:[email protected]",
    "constants": "npm:[email protected]",
    "crypto": "npm:[email protected]",
    "events": "npm:[email protected]",
    "fastclick": "npm:[email protected]",
    "fs": "npm:[email protected]",
    "hamsterjs": "npm:[email protected]",
    "http": "npm:[email protected]",
    "jquery": "npm:[email protected]",
    "jquery-ui": "github:components/[email protected]",
    "lodash": "npm:[email protected]",
    "ng-csv": "npm:[email protected]",
    "offline-js": "npm:[email protected]",
    "os": "npm:[email protected]",
    "path": "npm:[email protected]",
    "process": "npm:[email protected]",
    "react": "npm:[email protected]",
    "spin": "github:fgnass/[email protected]",
    "spin.js": "npm:[email protected]",
    "stream": "npm:[email protected]",
    "string_decoder": "npm:[email protected]",
    "ts": "github:frankwallis/[email protected]",
    "ua-parser-js": "npm:[email protected]",
    "url": "npm:[email protected]",
    "util": "npm:[email protected]",
    "vm": "npm:[email protected]",
    "zlib": "npm:[email protected]"
  },
  packages: {
    "github:angular-translate/[email protected]": {
      "map": {
        "angular-translate": "github:angular-translate/[email protected]"
      }
    },
    "github:angular-translate/[email protected]": {
      "map": {
        "angular-translate": "github:angular-translate/[email protected]"
      }
    },
    "github:angular-translate/[email protected]": {
      "map": {
        "angular-translate": "github:angular-translate/[email protected]"
      }
    },
    "github:angular-translate/[email protected]": {
      "map": {
        "angular": "github:angular/[email protected]"
      }
    },
    "github:angular/[email protected]": {
      "map": {
        "angular": "github:angular/[email protected]"
      }
    },
    "github:angular/[email protected]": {
      "map": {
        "angular": "github:angular/[email protected]"
      }
    },
    "github:angular/[email protected]": {
      "map": {
        "angular": "github:angular/[email protected]"
      }
    },
    "github:angular/[email protected]": {
      "map": {
        "angular": "github:angular/[email protected]"
      }
    },
    "github:angular/[email protected]": {
      "map": {
        "angular": "github:angular/[email protected]",
        "angular-animate": "github:angular/[email protected]",
        "angular-aria": "github:angular/[email protected]",
        "css": "github:systemjs/[email protected]"
      }
    },
    "github:components/[email protected]": {
      "map": {
        "jquery": "npm:[email protected]"
      }
    },
    "github:frankwallis/[email protected]": {
      "map": {
        "typescript": "npm:[email protected]"
      }
    },
    "npm:[email protected]": {
      "map": {}
    },
    "npm:[email protected]": {
      "map": {
        "angular": "npm:[email protected]"
      }
    },
    "npm:[email protected]": {
      "map": {
        "animate.css": "npm:[email protected]"
      }
    },
    "npm:[email protected]": {
      "map": {
        "angular": "npm:[email protected]"
      }
    },
    "npm:[email protected]": {
      "map": {
        "angular": "npm:[email protected]",
        "hamsterjs": "npm:[email protected]"
      }
    },
    "npm:[email protected]": {
      "map": {}
    },
    "npm:[email protected]": {
      "map": {
        "spin.js": "npm:[email protected]"
      }
    },
    "npm:[email protected]": {
      "map": {}
    },
    "npm:[email protected]": {
      "map": {
        "systemjs-json": "github:systemjs/[email protected]"
      }
    },
    "npm:[email protected]": {
      "map": {}
    },
    "npm:[email protected]": {
      "map": {
        "buffer-xor": "npm:[email protected]",
        "cipher-base": "npm:[email protected]",
        "create-hash": "npm:[email protected]",
        "evp_bytestokey": "npm:[email protected]",
        "inherits": "npm:[email protected]",
        "systemjs-json": "github:systemjs/[email protected]"
      }
    },
    "npm:[email protected]": {
      "map": {
        "browserify-aes": "npm:[email protected]",
        "browserify-des": "npm:[email protected]",
        "evp_bytestokey": "npm:[email protected]"
      }
    },
    "npm:[email protected]": {
      "map": {
        "cipher-base": "npm:[email protected]",
        "des.js": "npm:[email protected]",
        "inherits": "npm:[email protected]"
      }
    },
    "npm:[email protected]": {
      "map": {
        "bn.js": "npm:[email protected]",
        "randombytes": "npm:[email protected]"
      }
    },
    "npm:[email protected]": {
      "map": {
        "bn.js": "npm:[email protected]",
        "browserify-rsa": "npm:[email protected]",
        "create-hash": "npm:[email protected]",
        "create-hmac": "npm:[email protected]",
        "elliptic": "npm:[email protected]",
        "inherits": "npm:[email protected]",
        "parse-asn1": "npm:[email protected]"
      }
    },
    "npm:[email protected]": {
      "map": {
        "systemjs-json": "github:systemjs/[email protected]"
      }
    },
    "npm:[email protected]": {
      "map": {}
    },
    "npm:[email protected]": {
      "map": {
        "bn.js": "npm:[email protected]",
        "elliptic": "npm:[email protected]"
      }
    },
    "npm:[email protected]": {
      "map": {
        "cipher-base": "npm:[email protected]",
        "inherits": "npm:[email protected]",
        "ripemd160": "npm:[email protected]",
        "sha.js": "npm:[email protected]"
      }
    },
    "npm:[email protected]": {
      "map": {
        "create-hash": "npm:[email protected]",
        "inherits": "npm:[email protected]"
      }
    },
    "npm:[email protected]": {
      "map": {
        "browserify-cipher": "npm:[email protected]",
        "browserify-sign": "npm:[email protected]",
        "create-ecdh": "npm:[email protected]",
        "create-hash": "npm:[email protected]",
        "create-hmac": "npm:[email protected]",
        "diffie-hellman": "npm:[email protected]",
        "inherits": "npm:[email protected]",
        "pbkdf2": "npm:[email protected]",
        "public-encrypt": "npm:[email protected]",
        "randombytes": "npm:[email protected]"
      }
    },
    "npm:[email protected]": {
      "map": {
        "inherits": "npm:[email protected]",
        "minimalistic-assert": "npm:[email protected]"
      }
    },
    "npm:[email protected]": {
      "map": {
        "bn.js": "npm:[email protected]",
        "miller-rabin": "npm:[email protected]",
        "randombytes": "npm:[email protected]",
        "systemjs-json": "github:systemjs/[email protected]"
      }
    },
    "npm:[email protected]": {
      "map": {
        "create-hash": "npm:[email protected]"
      }
    },
    "npm:[email protected]": {
      "map": {
        "inherits": "npm:[email protected]"
      }
    },
    "npm:[email protected]": {
      "map": {
        "bn.js": "npm:[email protected]",
        "brorand": "npm:[email protected]"
      }
    },
    "npm:[email protected]": {
      "map": {
        "asn1.js": "npm:[email protected]",
        "browserify-aes": "npm:[email protected]",
        "create-hash": "npm:[email protected]",
        "evp_bytestokey": "npm:[email protected]",
        "pbkdf2": "npm:[email protected]",
        "systemjs-json": "github:systemjs/[email protected]"
      }
    },
    "npm:[email protected]": {
      "map": {
        "bn.js": "npm:[email protected]",
        "browserify-rsa": "npm:[email protected]",
        "create-hash": "npm:[email protected]",
        "parse-asn1": "npm:[email protected]",
        "randombytes": "npm:[email protected]"
      }
    },
    "npm:[email protected]": {
      "map": {}
    },
    "npm:[email protected]": {
      "map": {}
    },
    "npm:[email protected]": {
      "map": {}
    },
    "npm:[email protected]": {
      "map": {
        "inherits": "npm:[email protected]"
      }
    },
    "npm:[email protected]": {
      "map": {}
    },
    "npm:[email protected]": {
      "map": {}
    },
    "npm:[email protected]": {
      "map": {
        "core-util-is": "npm:[email protected]",
        "inherits": "npm:[email protected]",
        "isarray": "npm:[email protected]",
        "string_decoder": "npm:[email protected]",
        "buffer-shims": "npm:[email protected]",
        "util-deprecate": "npm:[email protected]",
        "process-nextick-args": "npm:[email protected]"
      }
    },
    "npm:[email protected]": {
      "map": {
        "ieee754": "npm:[email protected]",
        "isarray": "npm:[email protected]",
        "base64-js": "npm:[email protected]"
      }
    },
    "npm:[email protected]": {
      "map": {
        "inherits": "npm:[email protected]",
        "readable-stream": "npm:[email protected]"
      }
    },
    "npm:[email protected]": {
      "map": {
        "punycode": "npm:[email protected]",
        "querystring": "npm:[email protected]"
      }
    },
    "npm:[email protected]": {
      "map": {
        "systemjs-json": "github:systemjs/[email protected]"
      }
    },
    "npm:[email protected]": {
      "map": {
        "loose-envify": "npm:[email protected]",
        "fbjs": "npm:[email protected]",
        "object-assign": "npm:[email protected]"
      }
    },
    "npm:[email protected]": {
      "map": {
        "loose-envify": "npm:[email protected]",
        "object-assign": "npm:[email protected]",
        "ua-parser-js": "npm:[email protected]",
        "core-js": "npm:[email protected]",
        "promise": "npm:[email protected]",
        "isomorphic-fetch": "npm:[email protected]",
        "immutable": "npm:[email protected]"
      }
    },
    "npm:[email protected]": {
      "map": {
        "js-tokens": "npm:[email protected]"
      }
    },
    "npm:[email protected]": {
      "map": {
        "whatwg-fetch": "npm:[email protected]",
        "node-fetch": "npm:[email protected]"
      }
    },
    "npm:[email protected]": {
      "map": {
        "asap": "npm:[email protected]"
      }
    },
    "npm:[email protected]": {
      "map": {
        "is-stream": "npm:[email protected]",
        "encoding": "npm:[email protected]"
      }
    },
    "npm:[email protected]": {
      "map": {
        "iconv-lite": "npm:[email protected]"
      }
    },
    "npm:[email protected]": {
      "map": {
        "inherits": "npm:[email protected]",
        "readable-stream": "npm:[email protected]",
        "to-arraybuffer": "npm:[email protected]",
        "xtend": "npm:[email protected]",
        "builtin-status-codes": "npm:[email protected]"
      }
    },
    "npm:[email protected]": {
      "map": {
        "readable-stream": "npm:[email protected]",
        "pako": "npm:[email protected]"
      }
    },
    "github:angular/[email protected]": {
      "map": {
        "angular": "github:angular/[email protected]"
      }
    },
    "npm:[email protected]": {
      "map": {
        "util": "npm:[email protected]",
        "samsam": "npm:[email protected]",
        "formatio": "npm:[email protected]",
        "lolex": "npm:[email protected]"
      }
    },
    "npm:[email protected]": {
      "map": {
        "create-thenable": "npm:[email protected]",
        "native-promise-only": "npm:[email protected]"
      }
    },
    "npm:[email protected]": {
      "map": {
        "samsam": "npm:[email protected]"
      }
    },
    "npm:[email protected]": {
      "map": {
        "inherits": "npm:[email protected]"
      }
    },
    "npm:[email protected]": {
      "map": {
        "unique-concat": "npm:[email protected]",
        "object.omit": "npm:[email protected]"
      }
    },
    "npm:[email protected]": {
      "map": {
        "for-own": "npm:[email protected]",
        "is-extendable": "npm:[email protected]"
      }
    },
    "npm:[email protected]": {
      "map": {
        "for-in": "npm:[email protected]"
      }
    },
    "npm:[email protected]": {
      "map": {
        "create-hmac": "npm:[email protected]"
      }
    },
    "npm:[email protected]": {
      "map": {
        "inherits": "npm:[email protected]"
      }
    },
    "npm:[email protected]": {
      "map": {
        "inherits": "npm:[email protected]",
        "bn.js": "npm:[email protected]",
        "hash.js": "npm:[email protected]",
        "brorand": "npm:[email protected]"
      }
    },
    "npm:[email protected]": {
      "map": {
        "bn.js": "npm:[email protected]",
        "inherits": "npm:[email protected]",
        "minimalistic-assert": "npm:[email protected]"
      }
    },
    "npm:[email protected]": {
      "map": {
        "chart.js": "npm:[email protected]",
        "angular": "npm:[email protected]"
      }
    },
    "npm:[email protected]": {
      "map": {
        "chartjs-color": "npm:[email protected]",
        "moment": "npm:[email protected]"
      }
    },
    "npm:[email protected]": {
      "map": {
        "chartjs-color-string": "npm:[email protected]",
        "color-convert": "npm:[email protected]"
      }
    },
    "npm:[email protected]": {
      "map": {
        "color-name": "npm:[email protected]"
      }
    },
    "npm:[email protected]": {
      "map": {
        "crypto-browserify": "npm:[email protected]"
      }
    },
    "npm:[email protected]": {
      "map": {
        "zlib-browserify": "npm:[email protected]"
      }
    },
    "npm:[email protected]": {
      "map": {
        "stream-browserify": "npm:[email protected]"
      }
    },
    "npm:[email protected]": {
      "map": {
        "string_decoder-browserify": "npm:[email protected]"
      }
    },
    "npm:[email protected]": {
      "map": {
        "http-browserify": "npm:[email protected]"
      }
    },
    "npm:[email protected]": {
      "map": {
        "os-browserify": "npm:[email protected]"
      }
    },
    "npm:[email protected]": {
      "map": {
        "buffer-browserify": "npm:[email protected]"
      }
    },
    "npm:[email protected]": {
      "map": {
        "url-browserify": "npm:[email protected]"
      }
    },
    "npm:[email protected]": {
      "map": {
        "domain-browserify": "npm:[email protected]"
      }
    }
  }
});

cyrixmorten avatar Nov 10 '16 10:11 cyrixmorten

@cyrixmorten Could you please start karma with autoWatch: true and singleRun: false (you have to put these flags in karma.conf.js) to look into the transpiled code. For that you have to open the debug tab by clicking the debug-button of the karma browser instance. After that open the Chrome-Dev-Tools to look in to the sources. You should find the transpiled code with embedded source-map. If source-map is missing, you should enable this by the typeScriptOptions or tsconfig.json. Embedded source-map is used to remap covered lines to the original line.

malaupa avatar Nov 10 '16 10:11 malaupa

Think that you are on to something there 👍

Even though I do have source mapping enabled they are not included in karma for some reason.

Thank you for taking the time :)

cyrixmorten avatar Nov 10 '16 10:11 cyrixmorten

Just to clarify, by embedded source maps your mean inline using

    - `"inlineSourceMap": true`

Or separate js.map files using?

   -   "sourceMap": true

cyrixmorten avatar Nov 10 '16 12:11 cyrixmorten

inlineSourceMap could be the right parameter for base64 data url in the transpiled file. No separate *.js.map file.

malaupa avatar Nov 10 '16 15:11 malaupa

My thoughts as well, and I do see the base64 data inlined in the js files now but so far no luck on the report yet.

However, as mentioned before, it may very well be a quirk somewhere in my setup.

cyrixmorten avatar Nov 10 '16 15:11 cyrixmorten

If I can support you, please ask. I have searched for a long time to get coverage with karma, jspm and babel. The result was to write this pr based on @m-a-r-c-e-l-i-n-o idea. Accordingly I want to share my solution and hopefully it will be merged.

malaupa avatar Nov 10 '16 21:11 malaupa

Finally got some time to look at this again.

Following the previous comments, I have made sure that the inline sources are available when debugging the browser instantiated by karma.

By adding karma-source-map-support, any errors are additionally mapped correctly to my TypeScript files.

Yet again I dived into the code of this PR to try and track down why there is no coverage output.

I found that in src/adapter.js the property load.metadata.sourceMap is always undefined for me.

            System.instantiate = function (load) {
                console.log('load.metadata.sourceMap: ', load.metadata.sourceMap); // always undefined
                var fileKey = load.name.replace(System.baseURL, '');
                if (karma.config.jspm.coverage[fileKey] && load.metadata.sourceMap) {
                    ...
                    // never entered since load.metadata.sourceMap is undefined
                }
            }

Hope you have an idea of why that is? :)

If I print out load.metadata, I get:

Chrome 54.0.2840 (Mac OS X 10.12.1) LOG: 'load.metadata: ', Object{globals: Object{process: 'process'}, format: 'cjs', deps: []}
Chrome 54.0.2840 (Mac OS X 10.12.1) LOG: 'load.metadata: ', Object{globals: Object{process: 'process'}, format: 'cjs', deps: []}
Chrome 54.0.2840 (Mac OS X 10.12.1) LOG: 'load.metadata: ', Object{globals: Object{process: 'process'}, format: 'cjs', deps: []}
Chrome 54.0.2840 (Mac OS X 10.12.1) LOG: 'load.metadata: ', Object{globals: Object{process: 'process'}, format: 'cjs', deps: []}
Chrome 54.0.2840 (Mac OS X 10.12.1) LOG: 'load.metadata: ', Object{globals: Object{process: 'process'}, format: 'cjs', deps: []}
Chrome 54.0.2840 (Mac OS X 10.12.1) LOG: 'load.metadata: ', Object{globals: Object{process: 'process'}, format: 'cjs', deps: []}
Chrome 54.0.2840 (Mac OS X 10.12.1) LOG: 'load.metadata: ', Object{deps: []}
Chrome 54.0.2840 (Mac OS X 10.12.1) LOG: 'load.metadata: ', Object{format: 'cjs', deps: [], use: 'strict''}
Chrome 54.0.2840 (Mac OS X 10.12.1) LOG: 'load.metadata: ', Object{format: 'cjs', deps: []}
Chrome 54.0.2840 (Mac OS X 10.12.1) LOG: 'load.metadata: ', Object{globals: Object{process: 'process'}, format: 'cjs', deps: []}
Chrome 54.0.2840 (Mac OS X 10.12.1) LOG: 'load.metadata: ', Object{globals: Object{process: 'process'}, format: 'cjs', deps: []}

cyrixmorten avatar Dec 07 '16 14:12 cyrixmorten