Angular2, Typescript, Karma, Jasmine command line testing

Question

On the Angular2 website is an example of unit testing with Jasmine in the browser: https://angular.io/docs/ts/latest/testing/first-app-tests.html

While this works it would be nice to run the same tests from the command line using Karma. I've tried many configurations but none of them work for the combination of Angular2, SystemJs, Typescript, Karma, Jasmine.

http://twofuckingdevelopers.com/2016/01/testing-angular-2-with-karma-and-jasmine/ This tutorial uses CommonJS, I tried to replace it with SystemJS which causes errors and libs aren't found.

When I tried the config of https://github.com/juliemr/ng2-test-seed it throws errors like:

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

Has anyone a working example of Angular2, Typescript, Karma, Jasmine command line testing?

Answer 1

I got it working using:

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