Issues getting Karma to work with SystemJS, Angular2 and Typescript

Question

I am facing issues getting Karma to work with SystemJS, Angular2 and Typescript.

Here is my karma.conf.js:

'use strict';
module.exports = function (config) {
    config.set({

        // base path, that will be used to resolve files and exclude
        basePath: '.',

        // frameworks to use
        frameworks: ['systemjs', 'jasmine'],

        plugins: ['karma-systemjs', 'karma-jasmine', 'karma-phantomjs-launcher'],

        files: [
            'node_modules/reflect-metadata/Reflect.js',
            'app/**/*.spec.ts',
            //'jspm_packages/system-polyfills.js',
            'karma-test-shim.js'
        ],

        systemjs: {
            configFile: "systemjs.config.js",
            config: {
                //baseURL: ".",
                transpiler: "typescript",
                paths: {
                    "systemjs": "jspm_packages/system.js",
                    "system-polyfills": "jspm_packages/system-polyfills.js",
                    "typescript": "node_modules/typescript/lib/typescript.js"
                },
                packages: {
                    'app': {
                        defaultExtension: 'ts'
                    }
                }
            },
            includeFiles: [
                'node_modules/reflect-metadata/Reflect.js'
            ],
            serveFiles: [
                'app/**/*.ts',
                'main-bundle.js'
            ]
        },


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


        // list of files to exclude
        exclude: [],


        // web server port
        port: 9876,


        // enable / disable colors in the output (reporters and logs)
        colors: true,


        // level of logging
        // possible values: config.LOG_DISABLE || config.LOG_ERROR || config.LOG_WARN || config.LOG_INFO || config.LOG_DEBUG
        logLevel: config.LOG_DEBUG,


        // enable / disable watching file and executing tests whenever any file changes
        autoWatch: false,


        // Start these browsers, currently available:
        // - Chrome
        // - ChromeCanary
        // - Firefox
        // - Opera
        // - Safari (only Mac)
        // - PhantomJS
        // - IE (only Windows)
        browsers: ['PhantomJS'],


        // If browser does not capture in given timeout [ms], kill it
        captureTimeout: 60000,


        // Continuous Integration mode
        // if true, it capture browsers, run tests and exit
        singleRun: true
    });
};

My karma-test-shim.js:

/*global jasmine, __karma__, window*/
Error.stackTraceLimit = Infinity;
jasmine.DEFAULT_TIMEOUT_INTERVAL = 1000;

__karma__.loaded = function () {
};


function isJsFile(path) {
    return path.slice(-3) == '.js';
}

function isSpecFile(path) {
    return path.slice(-8) == '.spec.js';
}

function isBuiltFile(path) {
    var builtPath = '/base/app/';
    return isJsFile(path) && (path.substr(0, builtPath.length) == builtPath);
}

var allSpecFiles = Object.keys(window.__karma__.files)
    .filter(isSpecFile)
    .filter(isBuiltFile);

// Load our SystemJS configuration.
System.config({
    baseURL: '/base'
});

System.config(
    {
        map: {
            'rxjs': 'node_modules/rxjs',
            '@angular': 'node_modules/@angular',
            'app': 'app'
        },
        packages: {
            'app': {
                main: 'main.js',
                defaultExtension: 'js'
            },
            '@angular/core': {
                main: 'index.js',
                defaultExtension: 'js'
            },
            '@angular/compiler': {
                main: 'index.js',
                defaultExtension: 'js'
            },
            '@angular/common': {
                main: 'index.js',
                defaultExtension: 'js'
            },
            '@angular/platform-browser': {
                main: 'index.js',
                defaultExtension: 'js'
            },
            '@angular/platform-browser-dynamic': {
                main: 'index.js',
                defaultExtension: 'js'
            },
            'rxjs': {
                defaultExtension: 'js'
            }
        }
    });

Promise.all([
    System.import('@angular/core/testing'),
    System.import('@angular/platform-browser-dynamic/testing')
]).then(function (providers) {
    var testing = providers[0];
    var testingBrowser = providers[1];

    testing.setBaseTestProviders(testingBrowser.TEST_BROWSER_DYNAMIC_PLATFORM_PROVIDERS,
        testingBrowser.TEST_BROWSER_DYNAMIC_APPLICATION_PROVIDERS);

}).then(function() {
    // Finally, load all spec files.
    // This will run the tests directly.
    return Promise.all(
        allSpecFiles.map(function (moduleName) {
            return System.import(moduleName);
        }));
}).then(__karma__.start, __karma__.error);

My systemjs.config.js:

(function (global) {

    // map tells the System loader where to look for things
    var map = {
        'app': 'app', // 'dist',
        'rxjs': 'node_modules/rxjs',
        'angular2-in-memory-web-api': 'node_modules/angular2-in-memory-web-api',
        '@angular': 'node_modules/@angular',
        'crypto': '@empty'// this fixed my last issue
    };

    // packages tells the System loader how to load when no filename and/or no extension
    var packages = {
        'app': {main: 'main.js', defaultExtension: 'js'},
        'rxjs': {defaultExtension: 'js'},
        'angular2-in-memory-web-api': {defaultExtension: 'js'}
    };

    var packageNames = [
        '@angular/common',
        '@angular/compiler',
        '@angular/core',
        '@angular/http',
        '@angular/platform-browser',
        '@angular/platform-browser-dynamic',
        '@angular/router',
        '@angular/upgrade'
    ];

    // add package entries for angular packages in the form '@angular/common': { main: 'index.js', defaultExtension: 'js' }
    packageNames.forEach(function (pkgName) {
        packages[pkgName] = {main: 'index.js', defaultExtension: 'js'};
    });

    var config = {
        map: map,
        packages: packages
    };

    // filterSystemConfig - index.html's chance to modify config before we register it.
    if (global.filterSystemConfig) {
        global.filterSystemConfig(config);
    }

    System.config(config);

})(this);

When I run my tests with karma start karma.conf.js and my tests are located alongside the main ts files.

I get this error:

11 05 2016 17:02:24.306:DEBUG [web-server]: serving (cached): /Users/julien/Documents/projects/bignibou/bignibou-site/bignibou-client/node_modules/typescript/lib/typescript.js
PhantomJS 2.1.1 (Mac OS X 0.0.0) ERROR
  Error: eval code
    eval@[native code]
    F@/Users/julien/Documents/projects/bignibou/bignibou-site/bignibou-client/jspm_packages/system-polyfills.js:4:12217
    H@/Users/julien/Documents/projects/bignibou/bignibou-site/bignibou-client/jspm_packages/system-polyfills.js:4:11846
    when@/Users/julien/Documents/projects/bignibou/bignibou-site/bignibou-client/jspm_packages/system-polyfills.js:4:15520
    run@/Users/julien/Documents/projects/bignibou/bignibou-site/bignibou-client/jspm_packages/system-polyfills.js:4:14559
    _drain@/Users/julien/Documents/projects/bignibou/bignibou-site/bignibou-client/jspm_packages/system-polyfills.js:4:3250
    drain@/Users/julien/Documents/projects/bignibou/bignibou-site/bignibou-client/jspm_packages/system-polyfills.js:4:1667
    Evaluating /Users/julien/Documents/projects/bignibou/bignibou-site/bignibou-client/karma-test-shim.js
    Error loading /Users/julien/Documents/projects/bignibou/bignibou-site/bignibou-client/karma-test-shim.js


11 05 2016 17:02:24.316:DEBUG [karma]: Run complete, exiting.
11 05 2016 17:02:24.316:DEBUG [launcher]: Disconnecting all browsers
11 05 2016 17:02:24.324:DEBUG [launcher]: Process PhantomJS exited with code 0
11 05 2016 17:02:24.324:DEBUG [temp-dir]: Cleaning temp dir /var/folders/1p/pcqq7s0x58l_s7ds52gxt_fw0000gp/T/karma-62098834
11 05 2016 17:02:24.329:DEBUG [launcher]: Finished all browsers
npm ERR! Test failed.  See above for more details.

Can anyone please help?

Answer 1

I've spent the past couple days looking at all the different A2 seeds/clis and 90% of them are using old A2 code and I found it to be difficult to interpret them into the newest A2 code.

I eventually found this. https://github.com/juliemr/ng2-test-seed

This got my karma tests running with systemjs. It is a very nice very simple project that gets the basics and no extra garbage forced on you.

You will need to change some file urls around to match whatever you are working with. Using this as I guide, I was able to get unit tests running with typescript and systemjs.

Answer 2

I can see several problem in what you did.

First I think that you configure twice SystemJS:

• once in the test-shim-karma.js file
• once in the karma.conf.js one throught the SystemJS karma plugin.

Then you don't configure your source modules that will be used within your spec files:

packages['base/app'] = {
  defaultExtension: 'js',
  format: 'cjs',
  map: Object.keys(window.__karma__.files).filter(onlyAppFiles).reduce(createPathRecords, {})
};

You call several times the System.config method.

I would also add some entries in the files section of your karma.conf.js file:

files: [
  // Paths loaded by Karma
  {pattern: 'node_modules/es6-shim/es6-shim.min.js', included: true, watched: true},
  {pattern: 'node_modules/reflect-metadata/Reflect.js', included: true, watched: true},
  {pattern: 'node_modules/zone.js/dist/zone.js', included: true, watched: true},
  {pattern: 'node_modules/zone.js/dist/async-test.js', included: true, watched: true},
  {pattern: 'node_modules/systemjs/dist/system-polyfills.js', included: true, watched: true},
  {pattern: 'node_modules/systemjs/dist/system.src.js', included: true, watched: true},
  {pattern: 'node_modules/rxjs/**/*.js', included: false, watched: false},
  {pattern: 'node_modules/@angular/**/*.js', included: false, watched: false},
  {pattern: 'karma-test-shim.js', included: true, watched: true},

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

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

You could have a look at this project for a working configuration of Karma with Angular2 RC1 and TypeScript:

• https://github.com/templth/geo-open-data-viz/tree/v2