Angular2、Typescript、Karma、Jasmine 命令行测试

Question

在 Angular2 网站上有一个在浏览器中使用 Jasmine 进行单元测试的示例：https://angular.io/docs/ts/latest/testing/first-app-tests.html

虽然这行得通，但最好运行使用 Karma 从命令行进行相同的测试。我尝试了很多配置，但是 none 它们适用于 Angular2、SystemJs、Typescript、Karma、Jasmine 的组合。

http://twofuckingdevelopers.com/2016/01/testing-angular-2-with-karma-and-jasmine/ 本教程使用 CommonJS，我尝试用 SystemJS 替换它，这导致错误和找不到库。

当我尝试 https://github.com/juliemr/ng2-test-seed 的配置时，它抛出如下错误：

25 01 2016 16:19:57.489:WARN [web-server]: 404: /angular2/http
25 01 2016 16:19:57.493:WARN [web-server]: 404: /base/app/angular2/components/cities/cities.data.srv
25 01 2016 16:19:57.494:WARN [web-server]: 404: /base/app/angular2/components/cities/city
25 01 2016 16:19:57.695:WARN [web-server]: 404: /base/app/angular2/components/cities/city.model
25 01 2016 16:19:57.703:WARN [web-server]: 404: /base/app/angular2/pipes/init-caps-pipe
25 01 2016 16:19:57.717:WARN [web-server]: 404: /base/app/angular2/pipes/init-caps/init-caps.pipe

有人有 Angular2、Typescript、Karma、Jasmine 命令行测试的工作示例吗？

Answer 1

我使用了它：

karma.conf.js

module.exports = function(config) {
  config.set({

    basePath: '',

    frameworks: ['jasmine'],

    files: [
      // paths loaded by Karma
      {pattern: 'node_modules/angular2/bundles/angular2-polyfills.js', included: true, watched: true},
      {pattern: 'node_modules/systemjs/dist/system.src.js', included: true, watched: true},
      {pattern: 'node_modules/rxjs/bundles/Rx.js', included: true, watched: true},
      {pattern: 'node_modules/angular2/bundles/angular2.dev.js', included: true, watched: true},
      {pattern: 'node_modules/angular2/bundles/testing.dev.js', included: true, watched: true},
      {pattern: 'node_modules/angular2/bundles/http.dev.js', included: true, watched: true},
      {pattern: 'karma-test-shim.js', included: true, watched: true},


      // paths loaded via module imports
      {pattern: 'app/**/*.js', included: false, watched: true},

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

      // paths to support debugging with source maps in dev tools
      {pattern: 'app/**/*.ts', included: false, watched: false},
      {pattern: 'app/**/*.js.map', included: false, watched: false}
    ],

    // proxied base paths
    proxies: {
      // required for component assests fetched by Angular's compiler
      "/app/": "/base/app/"
    },

    reporters: ['progress'],
    port: 9876,
    colors: true,
    logLevel: config.LOG_INFO,
    autoWatch: true,
    browsers: ['Chrome'],
    singleRun: true
  })
}

karma-test-shim.js

// Turn on full stack traces in errors to help debugging
Error.stackTraceLimit=Infinity;


jasmine.DEFAULT_TIMEOUT_INTERVAL = 1000;

// // Cancel Karma's synchronous start,
// // we will call `__karma__.start()` later, once all the specs are loaded.
__karma__.loaded = function() {};


System.config({
  packages: {
    'base/app': {
      defaultExtension: false,
      format: 'register',
      map: Object.keys(window.__karma__.files).
            filter(onlyAppFiles).
            reduce(function createPathRecords(pathsMapping, appPath) {

              // creates local module name mapping to global path with karma's fingerprint in path, e.g.:
              // './hero.service': '/base/src/app/hero.service.js?f4523daf879cfb7310ef6242682ccf10b2041b3e'
              var moduleName = appPath.replace(/^\/base\/app\//, './').replace(/\.js$/, '');
              pathsMapping[moduleName] = appPath + '?' + window.__karma__.files[appPath]
              return pathsMapping;
            }, {})

      }
    }
});

System.import('angular2/src/platform/browser/browser_adapter').then(function(browser_adapter) {
  browser_adapter.BrowserDomAdapter.makeCurrent();
}).then(function() {
  return Promise.all(
    Object.keys(window.__karma__.files) // All files served by Karma.
    .filter(onlySpecFiles)
    // .map(filePath2moduleName)        // Normalize paths to module names.
    .map(function(moduleName) {
      // loads all spec files via their global module names (e.g. 'base/src/app/hero.service.spec')
      return System.import(moduleName);
    }));
})
.then(function() {
  __karma__.start();
}, function(error) {
  __karma__.error(error.stack || error);
});


function filePath2moduleName(filePath) {
  return filePath.
           replace(/^\//, '').              // remove / prefix
           replace(/\.\w+$/, '');           // remove suffix
}


function onlyAppFiles(filePath) {
  return /\/base\/app\/(?!.*\.spec\.js$).*\.js$/.test(filePath);
}


function onlySpecFiles(path) {
  return /spec\.js$/.test(path);
}

Angular2、Typescript、Karma、Jasmine 命令行测试

Angular2, Typescript, Karma, Jasmine command line testing

angularjs

karma-jasmine

angular