使用VSCode调试karma测试的打字稿

Question

我想使用visual studio代码来调试typescript文件中的karma测试。但我不知道配置，因为我使用gulp compile .ts文件到dist目录。

gulp compile js file to dist

gulp编译：

var appDev = 'src';
var appProd = __dirname + '/dist';
gulp.task('compile', function() {
  return gulp.src('src/**/*.ts')
      .pipe(sourcemaps.init())
      .pipe(tsProject())
      .js.pipe(sourcemaps.write('.'))
      .pipe(gulp.dest(appProd + '/src'));
});

gulp.task('copy:index', function() {
  return gulp.src(['index.html', 'systemjs.config.js'])
    .pipe(gulp.dest(appProd))
});

gulp.task('copy:assets', function() {
  return gulp.src(['src/**/*', '!src/**/*.ts' ], {base: './'})
    .pipe(gulp.dest(appProd))
});

gulp.task('css', function() {
  var lessStream = gulp.src('./less/app.less')
    .pipe(less())
    .pipe(concat('./less/styles.less'));

  return merge(lessStream)
    .pipe(concat('styles.css'))
    .pipe(gulp.dest(appProd + '/styles'));
});

gulp.task('copy:node_modules', function() {
  return gulp.src([
  ... // list file copy
  ], {cwd: 'node_modules/**'}) /* Glob required here. */
    .pipe(gulp.dest(appProd + '/node_modules'));
});

gulp test：

gulp.task('test-compile', function() {
  return gulp.src([
        './src/**/*.ts',
        './testing/**/*.ts'
      ], { base: '.'})
      .pipe(sourcemaps.init())
      .pipe(tsProject())
      .js.pipe(sourcemaps.write('.'))
      .pipe(gulp.dest(appProd));
});
gulp.task('test', [ 'clean', 'copy:bower_components', 'copy:node_modules', 'copy:index',
  'copy:js', 'css', 'copy:html', 'test-compile', 'watch' ], function(done) {
  new Server({
    configFile: __dirname + '/dist/karma.conf.js'
  }, done).start();
});

karma.conf.js：

module.exports = function(config) {

  var appBase    = 'src/';      // transpiled app JS and map files
  var appAssets  = __dirname + '/src/'; // component assets fetched by Angular's compiler

  // Testing helpers (optional) are conventionally in a folder called `testing`
  var testingBase    = 'testing/'; // transpiled test JS and map files

  config.set({
    basePath: '.',
    frameworks: ['jasmine'],

    plugins: [
      require('karma-jasmine'),
      require('karma-chrome-launcher'),
      require('karma-jasmine-html-reporter'),
      require('karma-coverage'),
      require('karma-remap-istanbul')
    ],

    client: {
      builtPaths: [appBase, testingBase], // add more spec base paths as needed
      clearContext: false // leave Jasmine Spec Runner output visible in browser
    },

    customLaunchers: {
      // From the CLI. Not used here but interesting
      // chrome setup for travis CI using chromium
      Chrome_travis_ci: {
        base: 'Chrome',
        flags: ['--no-sandbox']
      }
    },

    files: [
      // System.js for module loading
      'node_modules/systemjs/dist/system.src.js',

      // Polyfills
      'node_modules/core-js/client/shim.min.js',
      'node_modules/reflect-metadata/Reflect.js',

      // zone.js
      'node_modules/zone.js/dist/zone.js',
      'node_modules/zone.js/dist/long-stack-trace-zone.js',
      'node_modules/zone.js/dist/proxy.js',
      'node_modules/zone.js/dist/sync-test.js',
      'node_modules/zone.js/dist/jasmine-patch.js',
      'node_modules/zone.js/dist/async-test.js',
      'node_modules/zone.js/dist/fake-async-test.js',

      // RxJs
      { pattern: 'node_modules/rxjs/**/*.js', included: false, watched: false },
      { pattern: 'node_modules/rxjs/**/*.js.map', included: false, watched: false },

      // Paths loaded via module imports:
      // Angular itself
      { pattern: 'node_modules/@angular/**/*.js', included: false, watched: false },
      { pattern: 'node_modules/@angular/**/*.js.map', included: false, watched: false },

      { pattern: 'systemjs.config.js', included: false, watched: false },
      'karma-test-shim.js', // optionally extend SystemJS mapping e.g., with barrels
      { pattern: 'node_modules/angular2-toaster/**/*.js', included: false, watched: false },
      { pattern: 'node_modules/ng2-cookies/**/*.js', included: false, watched: false },
      { pattern: 'node_modules/lodash/**/*.js', included: false, watched: false },
      { pattern: 'node_modules/dragula/**/*.js', included: false, watched: false },
      { pattern: 'node_modules/ng2-dragula/**/*.js', included: false, watched: false },
      { pattern: 'node_modules/ng2-select/**/*.js', included: false, watched: false },
      { pattern: 'node_modules/ng2-bootstrap/**/*.js', included: false, watched: false },
      { pattern: 'node_modules/ng2-dnd/**/*.js', included: false, watched: false },
      { pattern: 'node_modules/ng2-uploader/**/*.js', included: false, watched: false },
      { pattern: 'node_modules/moment/**/*.js', included: false, watched: false },
      { pattern: 'bower_components/jquery/dist/jquery.min.js', watched: false },
      { pattern: 'bower_components/bootstrap/dist/js/bootstrap.min.js', watched: false },
      { pattern: 'node_modules/**/*.js.map', included: false, watched: false },
      // transpiled application & spec code paths loaded via module imports
      { pattern: appBase + '**/*.js', included: false, watched: true },
      { pattern: testingBase + '**/*.js', included: false, watched: true },

      // Asset (HTML & CSS) paths loaded via Angular's component compiler
      // (these paths need to be rewritten, see proxies section)
      { pattern: appBase + '**/*.html', included: false, watched: true },
      { pattern: 'styles/*.css', included: false, watched: true },

      // Paths for debugging with source maps in dev tools
      { pattern: appBase + '**/*.js.map', included: false, watched: false },
      { pattern: testingBase + '**/*.js.map', included: false, watched: false }
    ],

    // Proxied base paths for loading assets
    proxies: {
      // required for component assets fetched by Angular's compiler
      '/src/': appAssets
    },

    exclude: [],
    preprocessors: {
      'src/**/*.js': ['coverage']
    },
    reporters: ['progress', 'coverage', 'karma-remap-istanbul'],
    remapIstanbulReporter: {
      reports: {
        html: 'coverage'
      }
    },
    port: 9876,
    colors: true,
    logLevel: config.LOG_INFO,
    autoWatch: true,
    browsers: ['Chrome'],
    singleRun: false
  })
}

帮我配置karma，使用typescript文件调试，使用VSCode