Webpack Karma Istanbul Rimappatura per TypeScript

Question

Sto sviluppando un'applicazione sul lato client e sto avendo problemi con la creazione delle giuste configurazioni di Karma. In questo momento, ho il mio setup:

Webpack: Usando ts-loader, compila tipografico, le attività ecc

Karma: Usando il plugin webpack, carica il config Webpack (che usa ts-loader), quindi esegue tutti i test unitari con Jasmine + PhantomJS

I test di unità vanno tutti bene, ma non ho trovato un modo per gestire il remapping di webpack istanbul. I pacchetti web Karma sembrano non generare mappe sorgente per consentire il remapping. Qualsiasi suggerimento sarebbe apprezzato!

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 
    }) 
}; 

Answer 1

Attualmente Karma Remap Istanbul è l'unico pacchetto in grado di generare copertura tipografico linea. Ovviamente può anche essere gestito semplicemente chiamando remap-istanbul sul coverage.json generato.

Questo pacchetto ti porterà dattiloscritto sintesi uscita la copertura sulla console supponendo che si imposta la configurazione di uscita per text: undefined

aggiunta al vostro flusso di lavoro esistente è abbastanza semplice, la documentazione su come esattamente a farlo nei pacchetti github README.md.

Answer 2

Installare karma-typescript:

npm install karma-typescript --save-dev 

Dieci in karma.conf.js:

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

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

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

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

browsers: ["Chrome"] 

Questo verrà eseguito il test di unità tipografico al volo e generare Istanbul copertura html che assomigliano a questo :

Thi s elimina la necessità di usare Karma e il webpack insieme, Karma è utilizzato per eseguire i test e creare copertura, il webpack è utilizzato per il raggruppamento.