Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Webpack Karma Istanbul Remapping for TypeScript

I'm developing a client-side app and I'm having trouble with creating the right Karma configs. Right now, I have my setup as follows:

Webpack: Using ts-loader, compiles TypeScript, assets etc.

Karma: Using the webpack plugin, loads the Webpack config (which uses ts-loader), then runs all unit tests with Jasmine + PhantomJS

The unit tests all run fine, but I haven't figured out a way to handle the webpack istanbul remapping. Karma-webpacks seems to not be generating source maps to allow the remapping to happen. Any pointers would be appreciated!

Karma Config:

var webpackConfig = require("./webpack.config.js");
delete webpackConfig.entry;

module.exports = function (config) {
    config.set({
        // base path that will be used to resolve all patterns (eg. files, exclude)
        basePath: '',

        // frameworks to use
        // available frameworks: https://npmjs.org/browse/keyword/karma-adapter
        frameworks: ['jasmine'],

        // list of files / patterns to load in the browser
        files: [
            // Non-automatically bundled libraries
            'app/client/js/lib/easeljs.min.js',
            'app/client/js/lib/tweenjs.min.js',
            // Entry File
            'app/client/js/index.ts',
            'app/client/html/**/*.html',

            // Test files and dependencies
            'node_modules/angular-mocks/angular-mocks.js',
            'test/client/**/*.spec.js'
        ],

        // preprocess matching files before serving them to the browser
        // available preprocessors: https://npmjs.org/browse/keyword/karma-preprocessor
        preprocessors: {
            '**/*.html': ['ng-html2js'],
            'app/client/js/index.ts': ['webpack', 'sourcemap', 'coverage']
        },

        ngHtml2JsPreprocessor: {
            cacheIdFromPath: function (filepath) {
                // Remaps the path for Karma webpack
                return '/_karma_webpack_//' + filepath.replace(/^.*[\\\/]/, '');
            },
            moduleName: 'templates'
        },

        webpack: webpackConfig,

        webpackMiddleware: {
            noInfo: true
        },

        // test results reporter to use
        // possible values: 'dots', 'progress'
        // available reporters: https://npmjs.org/browse/keyword/karma-reporter
        reporters: ['progress', 'coverage'],

        coverageReporter: {
            dir: 'build/client/test/coverage/',
            reporters: [
                {
                    type: 'json',
                    subdir: '.'
                }
            ]
        },

        // web server port
        port: 9876,

        // enable / disable colors in the output (reporters and logs)
        colors: true,

        // level of logging
        // possible values: config.LOG_DISABLE || config.LOG_ERROR || config.LOG_WARN || config.LOG_INFO || config.LOG_DEBUG
        logLevel: config.LOG_INFO,

        // enable / disable watching file and executing tests whenever any file changes
        autoWatch: true,

        // start these browsers
        // available browser launchers: https://npmjs.org/browse/keyword/karma-launcher
        browsers: ['PhantomJS'],

        // Concurrency level
        // how many browser should be started simultaneously
        concurrency: Infinity
    })
};
like image 989
calclavia Avatar asked Mar 19 '16 23:03

calclavia


2 Answers

Currently Karma Remap Istanbul is the only package capable of generating TypeScript coverage inline. It can also obviously be managed by simply calling remap-istanbul on your generated coverage.json.

This package will get you TypeScript coverage output summary on the console assuming you set the output config to text: undefined

Adding it to your existing workflow is simple enough, the documentation on how exactly to do so in the packages github README.md.

like image 118
Joshua Wiens Avatar answered Sep 28 '22 04:09

Joshua Wiens


Install karma-typescript:

npm install karma-typescript --save-dev

Put this in your karma.conf.js:

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

files: [
    { pattern: "src/**/*.ts" }
],

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

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

browsers: ["Chrome"]

This will run your Typescript unit tests on the fly and generate Istanbul html coverage that look like this:

This eliminates the need for using Karma and webpack together, Karma is used for running the tests and creating coverage, webpack is used for bundling.

like image 29
Erik Barke Avatar answered Sep 28 '22 03:09

Erik Barke