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

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

虽然这样可行,但使用Karma从命令行运行相同的测试会很不错 . 我尝试了很多配置,但它们都不适用于Angular2,SystemJs,Typescript,Karma,Jasmine的组合 .

http://twofuckingdevelopers.com/2016/01/testing-angular-2-with-karma-and-jasmine/本教程使用CommonJS,我试图用SystemJS替换它,导致错误并且找不到lib .

当我尝试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命令行测试的工作示例?

回答(1)

2 years ago

我使用它了:

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