Come configurare il karma in modo che i file di origine dattiloscritti siano debuggabili

Question

Ho scaricato un progetto di seed Angular2 Webpack Starter e l'ho installato e funzionante senza problemi. Un inconveniente che ho con esso è il debug di file sorgente sotto test unitari. Tutti i file *.spec.ts vengono caricati nel browser e debugabili, pertanto i file map vengono generati per loro almeno. Quando faccio un passo in un file sorgente in prova ottengo qualcosa di simile:

karma config:

module.exports = function(config) { 
var testWebpackConfig = require('./webpack.test.js'); 

config.set({ 
    basePath: '', 
    frameworks: ['jasmine'], 
    exclude: [ ], 
    files: [ { pattern: './config/spec-bundle.js', watched: false } ], 
    preprocessors: { './config/spec-bundle.js': ['coverage', 'webpack', 'sourcemap'] }, 
    webpack: testWebpackConfig, 
    coverageReporter: { 
     dir : 'coverage/', 
     reporters: [ 
     { type: 'text-summary' }, 
     { type: 'json' }, 
     { type: 'html' } 
     ] 
    }, 
webpackServer: { noInfo: true }, 
reporters: [ 'mocha', 'coverage' ], 
port: 9876, 
colors: true, 
logLevel: config.LOG_INFO, 
autoWatch: true, 
browsers: [ 
    'Chrome' 
], 
singleRun: false 
}); 
}; 

webpack.test.js:

const helpers = require('./helpers'); 
const ProvidePlugin = require('webpack/lib/ProvidePlugin'); 
const DefinePlugin = require('webpack/lib/DefinePlugin'); 
const ENV = process.env.ENV = process.env.NODE_ENV = 'test'; 
module.exports = { 
    devtool: 'inline-source-map', 
    resolve: { 
     extensions: ['', '.ts', '.js'], 
     root: helpers.root('src'), 
    }, 
    module: { 
    preLoaders: [ 
     { 
     test: /\.ts$/, 
     loader: 'tslint-loader', 
     exclude: [helpers.root('node_modules')] 
     }, 
     { 
     test: /\.js$/, 
     loader: 'source-map-loader', 
     exclude: [ 
      helpers.root('node_modules/rxjs'), 
      helpers.root('node_modules/@angular2-material'), 
      helpers.root('node_modules/@angular') 
     ]} 
    ], 
loaders: [ 
{ 
    test: /\.ts$/, 
    loader: 'awesome-typescript-loader', 
    query: { 
     compilerOptions: { 
      removeComments: true 
     } 
    }, 
    exclude: [/\.e2e\.ts$/] 
    }, 
    { test: /\.json$/, loader: 'json-loader', exclude: [helpers.root('src/index.html')] }, 
    { test: /\.css$/, loaders: ['to-string-loader', 'css-loader'], exclude: [helpers.root('src/index.html')] }, 
    { test: /\.html$/, loader: 'raw-loader', exclude: [helpers.root('src/index.html')] } 
], 
postLoaders: [ 
{ 
    test: /\.(js|ts)$/, loader: 'istanbul-instrumenter-loader', 
    include: helpers.root('src'), 
    exclude: [ 
     /\.(e2e|spec)\.ts$/, 
     /node_modules/ 
    ] 
    } 
] 
}, 
plugins: [ 
new DefinePlugin({ 
    'ENV': JSON.stringify(ENV), 
    'HMR': false, 
    'process.env': { 
    'ENV': JSON.stringify(ENV), 
    'NODE_ENV': JSON.stringify(ENV), 
    'HMR': false, 
    } 
}), 
], 
tslint: { 
    emitErrors: false, 
    failOnHint: false, 
    resourcePath: 'src' 
    }, 
node: { 
    global: 'window', 
    process: false, 
    crypto: 'empty', 
    module: false, 
    clearImmediate: false, 
    setImmediate: false 
} 
}; 

spec-fascio .js:

Error.stackTraceLimit = Infinity; 
require('core-js/es6'); 
require('core-js/es7/reflect'); 
require('ts-helpers'); 
require('zone.js/dist/zone'); 
require('zone.js/dist/long-stack-trace-zone'); 
require('zone.js/dist/jasmine-patch'); 
require('zone.js/dist/async-test'); 
require('zone.js/dist/fake-async-test'); 
require('zone.js/dist/sync-test'); 
require('rxjs/Rx'); 
var testing = require('@angular/core/testing'); 
var browser = require('@angular/platform-browser-dynamic/testing'); 
testing.setBaseTestProviders(
    browser.TEST_BROWSER_DYNAMIC_PLATFORM_PROVIDERS, 
    browser.TEST_BROWSER_DYNAMIC_APPLICATION_PROVIDERS 
); 
var testContext = require.context('../src', true, /\.spec\.ts/); 
function requireAll(requireContext) { 
    return requireContext.keys().map(requireContext); 
} 
var modules = requireAll(testContext); 

Questa configurazione è come nel pacchetto iniziale con modifiche minori o eventuali. Potresti dirmi come modificare questa configurazione in modo che i file sorgente .ts siano debugabili con le statistiche di copertura.

Answer 1

ho avuto un problema simile con il mio progetto (che non è l'Angular2 Webpack Starter, ma credo che ha la stessa causa.)

WebPack, per impostazione predefinita, non passa fonte mappe fino al Karma, a meno l'estensione del file è .js (o .jsx se stai usando React). In una configurazione come questa, Karma + WebPack traspone i file .ts (o .tsx) direttamente da TypeScript in JavaScript e li serve con lo stesso nome di file.

Ho trovato una soluzione che funzionava per me on the GitHub Issues page for karma-webpack. Il trucco è iniettare webpack.SourceMapDevToolPlugin con un filtro di file allargato nella configurazione del webpack. Per te, che dovrebbe essere simile a questa:

var webpack = require('webpack'); 
// in your config.set: 
plugins: [ 
    // existing plugins go here 
    new webpack.SourceMapDevToolPlugin({ 
    filename: null, // if no value is provided the sourcemap is inlined 
    test: /\.(ts|js)($|\?)/i // process .js and .ts files only 
    }) 
] 

Answer 2

È necessario commentare Istanbul caricatore dentro le webpack.test.config.js, come questo

// { 
    // enforce: 'post', 
    // test: /\.(js|ts)$/, 
    // loader: 'istanbul-instrumenter-loader', 
    // include: helpers.root('src'), 
    // exclude: [ 
    //  /\.(e2e|spec)\.ts$/, 
    //  /node_modules/ 
    // ] 
    // } 

poi basta eseguire:

npm run watch:test