Webpack Karma Istanbul Remapping dla TypeScript

Question

Pracuję nad aplikacją po stronie klienta i mam problem z tworzeniem właściwych konfiguracji Karmy. Teraz, mam konfigurację następująco:

WebPACK: Korzystanie z TS-ładowarka, kompiluje maszynopis, trwałe itp

Karma: Używanie wtyczki WebPACK, ładuje config WebPACK (który używa TS-ładowarka), następnie uruchamia wszystkie testy jednostkowe za pomocą Jasmine + PhantomJS

Urządzenie testuje wszystkie działa dobrze, ale nie wymyśliłem sposobu obsługi ponownego mapowania stambuka. Karma-webpacks wydaje się nie generować map źródłowych, aby umożliwić ponowne mapowanie. Wszelkie wskazówki będą mile widziane!

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

Obecnie Karma Remap Istanbul jest tylko pakiet stanie generować pokrycia maszynopis inline. Oczywiście można nim zarządzać, wywołując po prostu remap-istanbul na wygenerowanym module coverage.json.

Ten pakiet będzie Ci maszynopis podsumowanie wyjściowy pokrycia na konsoli zakładając ustawić config wyjściowe do text: undefined

Dodanie go do istniejącego workflow jest na tyle prosty, dokumentację, jak dokładnie to zrobić w github pakietów README.md.

Answer 2

Install karma-typescript:

npm install karma-typescript --save-dev 

umieścić to w swoim karma.conf.js:

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

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

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

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

browsers: ["Chrome"] 

To będzie uruchamianie testów jednostkowych maszynopis w locie i generować Istanbul pokrycie html, który wyglądać tak :

Thi s eliminuje potrzebę korzystania z Karmy i WebPack razem, Karma służy do uruchamiania testów i tworzenia zasięgu, Webpack służy do pakowania.