Logo Questions Linux Laravel Mysql Ubuntu Git Menu
HTML CSS JAVASCRIPT SQL PYTHON PHP BOOTSTRAP JAVA JQUERY R React Kotlin
 

Issue getting Karma 1.1.0 and Angular 2 tests working

Tags:

angular

karma-runner

systemjs

karma-jasmine

I use Karma 1.1.0. Here is my karma.shim:

'use strict';

// Tun 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() {};

var map = {
    'app': 'base/app',
    'rxjs': 'base/node_modules/rxjs',
    '@angular': 'base/node_modules/@angular'
};

// 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' }
};

var packageNames = [
    '@angular/common',
    '@angular/compiler',
    '@angular/core',
    '@angular/http',
    '@angular/platform-browser',
    '@angular/platform-browser-dynamic',
    '@angular/router',
    '@angular/router-deprecated',
    '@angular/testing',
    '@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' };
});

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

var config = {
    //"defaultJSExtensions": true,
    map: map,
    packages: packages
};

System.config(config);

System.import('@angular/platform-browser/src/browser/browser_adapter')
    .then(function(browser_adapter) { browser_adapter.BrowserDomAdapter.makeCurrent(); })
    .then(function() {
        return Promise.all([
            System.import('@angular/core/testing'),
            System.import('@angular/platform-browser-dynamic/testing/browser')
        ]);
    })
    .then(function(modules) {
        var testing = modules[0];
        var testingBrowser = modules[1];
        testing.setBaseTestProviders(testingBrowser.TEST_BROWSER_DYNAMIC_PLATFORM_PROVIDERS,
            testingBrowser.TEST_BROWSER_DYNAMIC_APPLICATION_PROVIDERS);
    })
    .then(function() { return Promise.all(resolveTestFiles()); })
    .then(function() { __karma__.start(); }, function(error) { __karma__.error(error.stack || error); });

function createPathRecords(pathsMapping, appPath) {
    // creates local module name mapping to global path with karma's fingerprint in path, e.g.:
    // './vg-player/vg-player':
    // '/base/dist/vg-player/vg-player.js?f4523daf879cfb7310ef6242682ccf10b2041b3e'
    //console.log('appPath = '+appPath);
    var pathParts = appPath.split('/');
    var moduleName = './' + pathParts.slice(Math.max(pathParts.length - 2, 1)).join('/');
    moduleName = moduleName.replace(/\.js$/, '');
    pathsMapping[moduleName] = appPath + '?' + window.__karma__.files[appPath];
    return pathsMapping;
}

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

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

function resolveTestFiles() {
    return Object.keys(window.__karma__.files)  // All files served by Karma.
        .filter(onlySpecFiles)
        .map(function(moduleName) {
            // loads all spec files via their global module names (e.g.
            // 'base/dist/vg-player/vg-player.spec')
            return System.import(moduleName);
        });
}

Here is my Karma.conf:

'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: [
        // 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: 'node_modules/angular2-moment/*.js', included: false, watched: false},
        {pattern: 'node_modules/ng2-bootstrap/**/*.js', included: false, watched: false},
        {pattern: 'systemjs.config.js', included: true, watched: false},
        'karma-test-shim.js',

        // 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}
    ],


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

};

Here is the output from the tests:

27 06 2016 15:40:15.281:DEBUG [plugin]: Loading plugin karma-jasmine.
27 06 2016 15:40:15.286:DEBUG [plugin]: Loading plugin karma-phantomjs-launcher.
27 06 2016 15:40:15.353:DEBUG [web-server]: Instantiating middleware
27 06 2016 15:40:15.916:INFO [karma]: Karma v1.1.0 server started at http://localhost:9876/
27 06 2016 15:40:15.917:INFO [launcher]: Launching browser PhantomJS with unlimited concurrency
27 06 2016 15:40:15.937:INFO [launcher]: Starting browser PhantomJS
27 06 2016 15:40:15.938:DEBUG [temp-dir]: Creating temp dir at /var/folders/1p/pcqq7s0x58l_s7ds52gxt_fw0000gp/T/karma-11122462
27 06 2016 15:40:15.941:DEBUG [launcher]: /Users/julien/Documents/projects/bignibou/bignibou-site/bignibou-client/node_modules/phantomjs-prebuilt/lib/phantom/bin/phantomjs /var/folders/1p/pcqq7s0x58l_s7ds52gxt_fw0000gp/T/karma-11122462/capture.js
27 06 2016 15:40:16.559:DEBUG [web-server]: serving: /Users/julien/Documents/projects/bignibou/bignibou-site/bignibou-client/node_modules/karma/static/client.html
27 06 2016 15:40:16.568:DEBUG [web-server]: serving: /Users/julien/Documents/projects/bignibou/bignibou-site/bignibou-client/node_modules/karma/static/karma.js
27 06 2016 15:40:16.606:DEBUG [karma]: A browser has connected on socket /#H0v8H2WC0UICSQc6AAAA
27 06 2016 15:40:16.609:DEBUG [web-server]: upgrade /socket.io/?EIO=3&transport=websocket&sid=H0v8H2WC0UICSQc6AAAA
27 06 2016 15:40:16.609:DEBUG [proxy]: NOT upgrading proxyWebSocketRequest /socket.io/?EIO=3&transport=websocket&sid=H0v8H2WC0UICSQc6AAAA
27 06 2016 15:40:16.638:INFO [PhantomJS 2.1.1 (Mac OS X 0.0.0)]: Connected on socket /#H0v8H2WC0UICSQc6AAAA with id 11122462
27 06 2016 15:40:16.638:DEBUG [launcher]: PhantomJS (id 11122462) captured in 0.721 secs
27 06 2016 15:40:16.642:DEBUG [phantomjs.launcher]: 

27 06 2016 15:40:16.644:DEBUG [middleware:karma]: custom files null null
27 06 2016 15:40:16.644:DEBUG [middleware:karma]: Serving static request /context.html
27 06 2016 15:40:16.652:DEBUG [web-server]: serving: /Users/julien/Documents/projects/bignibou/bignibou-site/bignibou-client/node_modules/karma/static/context.html
27 06 2016 15:40:16.655:DEBUG [web-server]: serving: /Users/julien/Documents/projects/bignibou/bignibou-site/bignibou-client/node_modules/karma/static/context.js
27 06 2016 15:40:16.656:DEBUG [middleware:source-files]: Requesting /base/node_modules/jasmine-core/lib/jasmine-core/jasmine.js?391e45351df9ee35392d2e5cb623221a969fc009 /
27 06 2016 15:40:16.656:DEBUG [middleware:source-files]: Fetching /Users/julien/Documents/projects/bignibou/bignibou-site/bignibou-client/node_modules/jasmine-core/lib/jasmine-core/jasmine.js
27 06 2016 15:40:16.658:DEBUG [web-server]: serving (cached): /Users/julien/Documents/projects/bignibou/bignibou-site/bignibou-client/node_modules/jasmine-core/lib/jasmine-core/jasmine.js
27 06 2016 15:40:16.658:DEBUG [middleware:source-files]: Requesting /base/node_modules/karma-jasmine/lib/boot.js?945a38bf4e45ad2770eb94868231905a04a0bd3e /
27 06 2016 15:40:16.658:DEBUG [middleware:source-files]: Fetching /Users/julien/Documents/projects/bignibou/bignibou-site/bignibou-client/node_modules/karma-jasmine/lib/boot.js
27 06 2016 15:40:16.695:DEBUG [web-server]: serving (cached): /Users/julien/Documents/projects/bignibou/bignibou-site/bignibou-client/node_modules/karma-jasmine/lib/boot.js
27 06 2016 15:40:16.695:DEBUG [middleware:source-files]: Requesting /base/node_modules/zone.js/dist/async-test.js?8f51e44ce2093ec5167bc06760f15344db17d094 /
27 06 2016 15:40:16.695:DEBUG [middleware:source-files]: Fetching /Users/julien/Documents/projects/bignibou/bignibou-site/bignibou-client/node_modules/zone.js/dist/async-test.js
27 06 2016 15:40:16.695:DEBUG [middleware:source-files]: Requesting /base/node_modules/karma-jasmine/lib/adapter.js?7975a273517f1eb29d7bd018790fd4c7b9a485d5 /
27 06 2016 15:40:16.695:DEBUG [middleware:source-files]: Fetching /Users/julien/Documents/projects/bignibou/bignibou-site/bignibou-client/node_modules/karma-jasmine/lib/adapter.js
27 06 2016 15:40:16.696:DEBUG [middleware:source-files]: Requesting /base/node_modules/es6-shim/es6-shim.min.js?a7de8db438da176dd0eeb59efe46306b39f1261f /
27 06 2016 15:40:16.696:DEBUG [middleware:source-files]: Fetching /Users/julien/Documents/projects/bignibou/bignibou-site/bignibou-client/node_modules/es6-shim/es6-shim.min.js
27 06 2016 15:40:16.696:DEBUG [middleware:source-files]: Requesting /base/node_modules/reflect-metadata/Reflect.js?3b29d3315daf7d90c937da02c16da1a21c483296 /
27 06 2016 15:40:16.696:DEBUG [middleware:source-files]: Fetching /Users/julien/Documents/projects/bignibou/bignibou-site/bignibou-client/node_modules/reflect-metadata/Reflect.js
27 06 2016 15:40:16.697:DEBUG [middleware:source-files]: Requesting /base/node_modules/zone.js/dist/zone.js?8b9c8d0a7e549abe9edec8da5a095f206d206277 /
27 06 2016 15:40:16.697:DEBUG [middleware:source-files]: Fetching /Users/julien/Documents/projects/bignibou/bignibou-site/bignibou-client/node_modules/zone.js/dist/zone.js
27 06 2016 15:40:16.697:DEBUG [web-server]: serving (cached): /Users/julien/Documents/projects/bignibou/bignibou-site/bignibou-client/node_modules/zone.js/dist/async-test.js
27 06 2016 15:40:16.697:DEBUG [web-server]: serving (cached): /Users/julien/Documents/projects/bignibou/bignibou-site/bignibou-client/node_modules/karma-jasmine/lib/adapter.js
27 06 2016 15:40:16.698:DEBUG [web-server]: serving (cached): /Users/julien/Documents/projects/bignibou/bignibou-site/bignibou-client/node_modules/es6-shim/es6-shim.min.js
27 06 2016 15:40:16.699:DEBUG [web-server]: serving (cached): /Users/julien/Documents/projects/bignibou/bignibou-site/bignibou-client/node_modules/reflect-metadata/Reflect.js
27 06 2016 15:40:16.699:DEBUG [web-server]: serving (cached): /Users/julien/Documents/projects/bignibou/bignibou-site/bignibou-client/node_modules/zone.js/dist/zone.js
27 06 2016 15:40:16.700:DEBUG [middleware:source-files]: Requesting /base/node_modules/systemjs/dist/system.src.js?ce47c157d0451bc324d5039dfc7b04fa1cf0925d /
27 06 2016 15:40:16.700:DEBUG [middleware:source-files]: Fetching /Users/julien/Documents/projects/bignibou/bignibou-site/bignibou-client/node_modules/systemjs/dist/system.src.js
27 06 2016 15:40:16.700:DEBUG [middleware:source-files]: Requesting /base/systemjs.config.js?26fd20b806e5134f56094fb946fd4773b218adb2 /
27 06 2016 15:40:16.700:DEBUG [middleware:source-files]: Fetching /Users/julien/Documents/projects/bignibou/bignibou-site/bignibou-client/systemjs.config.js
27 06 2016 15:40:16.701:DEBUG [middleware:source-files]: Requesting /base/karma-test-shim.js?7706c128dfffb9507d9be32381f6509fe61a5afd /
27 06 2016 15:40:16.701:DEBUG [middleware:source-files]: Fetching /Users/julien/Documents/projects/bignibou/bignibou-site/bignibou-client/karma-test-shim.js
27 06 2016 15:40:16.702:DEBUG [middleware:source-files]: Requesting /base/node_modules/systemjs/dist/system-polyfills.js?a9f0c97e865a53da4c067b98cf2e65a23b2f0608 /
27 06 2016 15:40:16.702:DEBUG [middleware:source-files]: Fetching /Users/julien/Documents/projects/bignibou/bignibou-site/bignibou-client/node_modules/systemjs/dist/system-polyfills.js
27 06 2016 15:40:16.702:DEBUG [web-server]: serving (cached): /Users/julien/Documents/projects/bignibou/bignibou-site/bignibou-client/node_modules/systemjs/dist/system.src.js
27 06 2016 15:40:16.703:DEBUG [web-server]: serving (cached): /Users/julien/Documents/projects/bignibou/bignibou-site/bignibou-client/systemjs.config.js
27 06 2016 15:40:16.704:DEBUG [web-server]: serving (cached): /Users/julien/Documents/projects/bignibou/bignibou-site/bignibou-client/karma-test-shim.js
27 06 2016 15:40:16.763:DEBUG [web-server]: serving (cached): /Users/julien/Documents/projects/bignibou/bignibou-site/bignibou-client/node_modules/systemjs/dist/system-polyfills.js
27 06 2016 15:40:16.783:DEBUG [middleware:source-files]: Requesting /base/node_modules/@angular/platform-browser/src/browser/browser_adapter.js /
27 06 2016 15:40:16.783:DEBUG [middleware:source-files]: Fetching /Users/julien/Documents/projects/bignibou/bignibou-site/bignibou-client/node_modules/@angular/platform-browser/src/browser/browser_adapter.js
27 06 2016 15:40:16.783:DEBUG [web-server]: serving (cached): /Users/julien/Documents/projects/bignibou/bignibou-site/bignibou-client/node_modules/@angular/platform-browser/src/browser/browser_adapter.js
27 06 2016 15:40:16.794:DEBUG [middleware:source-files]: Requesting /base/node_modules/@angular/platform-browser/src/dom/dom_adapter.js /
27 06 2016 15:40:16.795:DEBUG [middleware:source-files]: Fetching /Users/julien/Documents/projects/bignibou/bignibou-site/bignibou-client/node_modules/@angular/platform-browser/src/dom/dom_adapter.js
27 06 2016 15:40:16.795:DEBUG [web-server]: serving (cached): /Users/julien/Documents/projects/bignibou/bignibou-site/bignibou-client/node_modules/@angular/platform-browser/src/dom/dom_adapter.js
27 06 2016 15:40:16.796:DEBUG [middleware:source-files]: Requesting /base/node_modules/@angular/platform-browser/src/facade/collection.js /
27 06 2016 15:40:16.821:DEBUG [middleware:source-files]: Fetching /Users/julien/Documents/projects/bignibou/bignibou-site/bignibou-client/node_modules/@angular/platform-browser/src/facade/collection.js
27 06 2016 15:40:16.821:DEBUG [middleware:source-files]: Requesting /base/node_modules/@angular/platform-browser/src/facade/lang.js /
27 06 2016 15:40:16.822:DEBUG [middleware:source-files]: Fetching /Users/julien/Documents/projects/bignibou/bignibou-site/bignibou-client/node_modules/@angular/platform-browser/src/facade/lang.js
27 06 2016 15:40:16.822:DEBUG [middleware:source-files]: Requesting /base/node_modules/@angular/platform-browser/src/browser/generic_browser_adapter.js /
27 06 2016 15:40:16.822:DEBUG [middleware:source-files]: Fetching /Users/julien/Documents/projects/bignibou/bignibou-site/bignibou-client/node_modules/@angular/platform-browser/src/browser/generic_browser_adapter.js
27 06 2016 15:40:16.823:DEBUG [web-server]: serving (cached): /Users/julien/Documents/projects/bignibou/bignibou-site/bignibou-client/node_modules/@angular/platform-browser/src/facade/collection.js
27 06 2016 15:40:16.824:DEBUG [web-server]: serving (cached): /Users/julien/Documents/projects/bignibou/bignibou-site/bignibou-client/node_modules/@angular/platform-browser/src/facade/lang.js
27 06 2016 15:40:16.824:DEBUG [web-server]: serving (cached): /Users/julien/Documents/projects/bignibou/bignibou-site/bignibou-client/node_modules/@angular/platform-browser/src/browser/generic_browser_adapter.js
27 06 2016 15:40:16.843:DEBUG [middleware:source-files]: Requesting /base/node_modules/@angular/core/testing.js /
27 06 2016 15:40:16.843:DEBUG [middleware:source-files]: Fetching /Users/julien/Documents/projects/bignibou/bignibou-site/bignibou-client/node_modules/@angular/core/testing.js
27 06 2016 15:40:16.844:DEBUG [web-server]: serving (cached): /Users/julien/Documents/projects/bignibou/bignibou-site/bignibou-client/node_modules/@angular/core/testing.js
27 06 2016 15:40:16.844:DEBUG [middleware:source-files]: Requesting /base/node_modules/@angular/platform-browser-dynamic/testing/browser.js /
27 06 2016 15:40:16.844:DEBUG [middleware:source-files]: Fetching /Users/julien/Documents/projects/bignibou/bignibou-site/bignibou-client/node_modules/@angular/platform-browser-dynamic/testing/browser.js
27 06 2016 15:40:16.845:WARN [web-server]: 404: /base/node_modules/@angular/platform-browser-dynamic/testing/browser.js
27 06 2016 15:40:16.846:DEBUG [middleware:source-files]: Requesting /base/node_modules/@angular/core/testing/fake_async.js /
27 06 2016 15:40:16.847:DEBUG [middleware:source-files]: Fetching /Users/julien/Documents/projects/bignibou/bignibou-site/bignibou-client/node_modules/@angular/core/testing/fake_async.js
27 06 2016 15:40:16.871:DEBUG [web-server]: serving (cached): /Users/julien/Documents/projects/bignibou/bignibou-site/bignibou-client/node_modules/@angular/core/testing/fake_async.js
27 06 2016 15:40:16.872:DEBUG [middleware:source-files]: Requesting /base/node_modules/@angular/core/testing/lang_utils.js /
27 06 2016 15:40:16.872:DEBUG [middleware:source-files]: Fetching /Users/julien/Documents/projects/bignibou/bignibou-site/bignibou-client/node_modules/@angular/core/testing/lang_utils.js
27 06 2016 15:40:16.872:DEBUG [middleware:source-files]: Requesting /base/node_modules/@angular/core/testing/logger.js /
27 06 2016 15:40:16.872:DEBUG [middleware:source-files]: Fetching /Users/julien/Documents/projects/bignibou/bignibou-site/bignibou-client/node_modules/@angular/core/testing/logger.js
27 06 2016 15:40:16.872:DEBUG [middleware:source-files]: Requesting /base/node_modules/@angular/core/testing/ng_zone_mock.js /
27 06 2016 15:40:16.873:DEBUG [middleware:source-files]: Fetching /Users/julien/Documents/projects/bignibou/bignibou-site/bignibou-client/node_modules/@angular/core/testing/ng_zone_mock.js
27 06 2016 15:40:16.873:DEBUG [middleware:source-files]: Requesting /base/node_modules/@angular/core/testing/test_injector.js /
27 06 2016 15:40:16.873:DEBUG [middleware:source-files]: Fetching /Users/julien/Documents/projects/bignibou/bignibou-site/bignibou-client/node_modules/@angular/core/testing/test_injector.js
27 06 2016 15:40:16.873:DEBUG [middleware:source-files]: Requesting /base/node_modules/@angular/core/testing/testing.js /
27 06 2016 15:40:16.874:DEBUG [middleware:source-files]: Fetching /Users/julien/Documents/projects/bignibou/bignibou-site/bignibou-client/node_modules/@angular/core/testing/testing.js
PhantomJS 2.1.1 (Mac OS X 0.0.0) ERROR
  {
    "stack": null,
    "originalErr": {},
    "line": 823,
    "sourceURL": "node_modules/systemjs/dist/system.src.js"
  }


27 06 2016 15:40:16.878:DEBUG [karma]: Run complete, exiting.
27 06 2016 15:40:16.878:DEBUG [launcher]: Disconnecting all browsers
27 06 2016 15:40:16.879:DEBUG [web-server]: serving (cached): /Users/julien/Documents/projects/bignibou/bignibou-site/bignibou-client/node_modules/@angular/core/testing/lang_utils.js
27 06 2016 15:40:16.880:DEBUG [web-server]: serving (cached): /Users/julien/Documents/projects/bignibou/bignibou-site/bignibou-client/node_modules/@angular/core/testing/logger.js
27 06 2016 15:40:16.880:DEBUG [web-server]: serving (cached): /Users/julien/Documents/projects/bignibou/bignibou-site/bignibou-client/node_modules/@angular/core/testing/ng_zone_mock.js
27 06 2016 15:40:16.881:DEBUG [web-server]: serving (cached): /Users/julien/Documents/projects/bignibou/bignibou-site/bignibou-client/node_modules/@angular/core/testing/test_injector.js
27 06 2016 15:40:16.882:DEBUG [web-server]: serving (cached): /Users/julien/Documents/projects/bignibou/bignibou-site/bignibou-client/node_modules/@angular/core/testing/testing.js
27 06 2016 15:40:16.920:DEBUG [launcher]: Process PhantomJS exited with code 0
27 06 2016 15:40:16.920:DEBUG [temp-dir]: Cleaning temp dir /var/folders/1p/pcqq7s0x58l_s7ds52gxt_fw0000gp/T/karma-11122462
27 06 2016 15:40:16.924:DEBUG [middleware:source-files]: Requesting /base/node_modules/@angular/core/testing/mock_application_ref.js /
27 06 2016 15:40:16.924:DEBUG [middleware:source-files]: Fetching /Users/julien/Documents/projects/bignibou/bignibou-site/bignibou-client/node_modules/@angular/core/testing/mock_application_ref.js
27 06 2016 15:40:16.925:DEBUG [web-server]: serving (cached): /Users/julien/Documents/projects/bignibou/bignibou-site/bignibou-client/node_modules/@angular/core/testing/mock_application_ref.js
27 06 2016 15:40:16.929:DEBUG [launcher]: Finished all browsers
npm ERR! Test failed.  See above for more details.

Can anyone please help?

edit:

I changed from:

 System.import('@angular/platform-browser-dynamic/testing/browser')

to:

 System.import('@angular/platform-browser-dynamic/testing')

It seems to get further (it picks up the spec file) but I now get the error:

27 06 2016 16:53:23.427:DEBUG [middleware:source-files]: Requesting /base/app/session/session.service.spec.js /
27 06 2016 16:53:23.427:DEBUG [middleware:source-files]: Fetching /Users/julien/Documents/projects/bignibou/bignibou-site/bignibou-client/app/session/session.service.spec.js
27 06 2016 16:53:23.427:DEBUG [web-server]: serving (cached): /Users/julien/Documents/projects/bignibou/bignibou-site/bignibou-client/app/session/session.service.spec.js
PhantomJS 2.1.1 (Mac OS X 0.0.0) ERROR
  {
    "stack": null,
    "originalErr": {
      "line": 3016,
      "sourceURL": "node_modules/systemjs/dist/system.src.js",
      "stack": "node_modules/systemjs/dist/system.src.js:3016:137\nnode_modules/systemjs/dist/system.src.js:3685:33\nnode_modules/systemjs/dist/system.src.js:4172:37\nnode_modules/systemjs/dist/system.src.js:1475:27\nnode_modules/systemjs/dist/system.src.js:2707:28\nregister@node_modules/systemjs/dist/system.src.js:2967:23\n\n\neval code\neval@[native code]\n__exec@node_modules/systemjs/dist/system.src.js:1510:18\nexecute@node_modules/systemjs/dist/system.src.js:3926:22\nlinkDynamicModule@node_modules/systemjs/dist/system.src.js:3252:36\nlink@node_modules/systemjs/dist/system.src.js:3095:28\nexecute@node_modules/systemjs/dist/system.src.js:3432:17\ndoDynamicExecute@node_modules/systemjs/dist/system.src.js:798:32\nlink@node_modules/systemjs/dist/system.src.js:1000:36\ndoLink@node_modules/systemjs/dist/system.src.js:652:11\nupdateLinkSetOnLoad@node_modules/systemjs/dist/system.src.js:700:24\nnode_modules/systemjs/dist/system.src.js:512:30\nF@node_modules/systemjs/dist/system-polyfills.js:4:12217\nH@node_modules/systemjs/dist/system-polyfills.js:4:11846\nwhen@node_modules/systemjs/dist/system-polyfills.js:4:15520\nrun@node_modules/systemjs/dist/system-polyfills.js:4:14559\n_drain@node_modules/systemjs/dist/system-polyfills.js:4:3250\ndrain@node_modules/systemjs/dist/system-polyfills.js:4:1667\ne@node_modules/systemjs/dist/system-polyfills.js:4:6607\ninvoke@node_modules/zone.js/dist/zone.js:323:34\nrunGuarded@node_modules/zone.js/dist/zone.js:230:54\nnode_modules/zone.js/dist/zone.js:206:40"
    },
    "line": 823,
    "sourceURL": "node_modules/systemjs/dist/system.src.js"
  }


27 06 2016 16:53:23.436:DEBUG [karma]: Run complete, exiting.
27 06 2016 16:53:23.437:DEBUG [launcher]: Disconnecting all browsers
27 06 2016 16:53:23.451:DEBUG [launcher]: Process PhantomJS exited with code 0
27 06 2016 16:53:23.452:DEBUG [temp-dir]: Cleaning temp dir /var/folders/1p/pcqq7s0x58l_s7ds52gxt_fw0000gp/T/karma-42063498
27 06 2016 16:53:23.456:DEBUG [launcher]: Finished all browsers
like image 737
balteo Avatar asked Jun 27 '16 13:06

balteo

2 Answers

I have a GitHub seed here: https://github.com/Coly010/angular2-karma

Which has the a minimum setup needed for testing to work with SystemJS and Karma.

The Karma.conf.js

// Karma configuration
// Generated on Thu Jun 16 2016 11:08:35 GMT+0100 (GMT Summer Time)

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

    // base path that will be used to resolve all patterns (eg. files, exclude)
    basePath: '',

    // plugins needed for karma to work
    plugins: ['karma-systemjs', 'karma-jasmine', 'karma-chrome-launcher'],

    // frameworks to use
    // available frameworks: https://npmjs.org/browse/keyword/karma-adapter
    frameworks: ['systemjs', 'jasmine'],

    // need to set up SystemJS config for Karma
    systemjs : {
      configFile: 'systemjs.config.js',

      includeFiles: [
        'node_modules/reflect-metadata/Reflect.js',
        'node_modules/zone.js/dist/zone.js'
      ],

      serveFiles: [
        'node_modules/@angular/**/*.js',
        'lib/rxjs/**/*.js',
        'bin/**/*.js'
      ],

      config: {
        paths: {
          'systemjs': 'node_modules/systemjs/dist/system.src.js',
          'system-polyfills': 'node_modules/systemjs/dist/system-polyfills.src.js',
          'typescript': 'node_modules/typescript/lib/typescript.js',
          'rxjs' : 'lib/rxjs/index.js',
          'traceur': '/node_modules/traceur/dist/commonjs/traceur.js',
          'reflect-metadata' : 'node_modules/reflect-metadata/Reflect.js',
          '@angular': '/node_modules/@angular/**/*.js',
                //'angular-mocks': ''
        }
      },

    },


    // list of files / patterns to load in the browser
    files: [
      'node_modules/reflect-metadata/Reflect.js',
      'node_modules/zone.js/dist/zone.js',
      'node_modules/@angular/**/*.js',
      'lib/rxjs/**/*.js',
      'bin/tests/*.spec.js'
    ],


    // list of files to exclude
    exclude: [
      'lib/rxjs/tools/*.js',
    ],


    // preprocess matching files before serving them to the browser
    // available preprocessors: https://npmjs.org/browse/keyword/karma-preprocessor
    preprocessors: {
    },


    // test results reporter to use
    // possible values: 'dots', 'progress'
    // available reporters: https://npmjs.org/browse/keyword/karma-reporter
    reporters: ['progress'],


    // 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_INFO,


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


    // start these browsers
    // available browser launchers: https://npmjs.org/browse/keyword/karma-launcher
    browsers: ['Chrome'],


    // Continuous Integration mode
    // if true, Karma captures browsers, runs the tests and exits
    singleRun: false,

    // Concurrency level
    // how many browser should be started simultaneous
    concurrency: Infinity
  })
}

the systemjs.conf.js

/**
 * System configuration for Angular 2 samples
 * Adjust as necessary for your application needs.
 */
(function(global) {
  // map tells the System loader where to look for things
  var map = {
    'src':                        'src', // 'dist',
    'bin':                        'bin',
    '@angular':                   '/node_modules/@angular',
    'angular2-in-memory-web-api': '/node_modules/angular2-in-memory-web-api',
    'rxjs':                       '/lib/rxjs',
    'crypto':                     '@empty',
    'fs':                         '@empty',
    'minimist':                   '@empty',
    'path':                       '@empty',
    'systemjs-builder':           '@empty',
    'browserify':                 '@empty',
  };
  // packages tells the System loader how to load when no filename and/or no extension
  var packages = {
    'src':                        { defaultExtension: 'js' },
    'bin':                        { defaultExtension: 'js' },
    'rxjs':                       { defaultExtension: 'js' },
    'angular2-in-memory-web-api': { main: 'index.js', defaultExtension: 'js' },
  };
  var ngPackageNames = [
    'common',
    'compiler',
    'core',
    'http',
    'platform-browser',
    'platform-browser-dynamic',
    'router',
    'router-deprecated',
    'upgrade',
  ];
  // Individual files (~300 requests):
  function packIndex(pkgName) {
    packages['@angular/'+pkgName] = { main: 'index.js', defaultExtension: 'js' };
  }
  // Bundled (~40 requests):
  function packUmd(pkgName) {
    packages['@angular/'+pkgName] = { main: pkgName + '.umd.js', defaultExtension: 'js' };
  };
  // Most environments should use UMD; some (Karma) need the individual index files
  var setPackageConfig = System.packageWithIndex ? packIndex : packUmd;
  // Add package entries for angular packages
  ngPackageNames.forEach(setPackageConfig);
  var config = {
    "transpiler": "typescript",
    "typescriptOptions": {
      "module": "commonjs",
      "emitDecoratorMetadata": true
    },
    meta: {
      '/node_modules/systemjs/dist/system.src.js': {format: 'global'}
    },
    map: map,
    packages: packages
  }
  System.config(config);
})(this);

hope this helps

like image 174
Colum Avatar answered Sep 19 '22 13:09

Colum

You shouldn't add system.config.js in your karma.conf.js. Correct way to load dependencies in karma.conf.js :

files: [
  // Polyfills.
  'node_modules/es6-shim/es6-shim.js',

  'node_modules/reflect-metadata/Reflect.js',

  // System.js for module loading
  'node_modules/systemjs/dist/system-polyfills.js',
  'node_modules/systemjs/dist/system.src.js',

  // Zone.js dependencies
  'node_modules/zone.js/dist/zone.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 },

  {pattern: 'karma-test-shim.js', included: true, watched: true},


  // Angular itself
  {pattern: 'node_modules/@angular/**/*.js', included: false, watched: true},
  {pattern: 'node_modules/@angular/**/*.js.map', included: false, 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}
    ],    

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

For angular rc1 using angular-cli, you can have karma-test-shim.js as following:

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

__karma__.loaded = function () {
};

var distPath = '/base/dist/';
var appPath = distPath + 'app/';

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

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

function isAppFile(path) {
  return isJsFile(path) && (path.substr(0, appPath.length) == appPath);
}

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

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

System.import('system-config.js').then(function() {
  // Load and configure the TestComponentBuilder.
  return 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);

system.config.js :

const packages: string[] = [
  // Angular specific packages.
  '@angular/core',
  '@angular/common',
  '@angular/compiler',
  '@angular/http',
  '@angular/router',
  '@angular/platform-browser',
  '@angular/platform-browser-dynamic',

  // Thirdparty packages.
  'rxjs',

  // App specific packages.
  'app',
  'app/shared',
  /** @cli-packages*/
];

const cliSystemConfigPackages: any = {};
packages.forEach((packageName: string) => {
  cliSystemConfigPackages[packageName] = { main: 'index' };
});

/** Type declaration for ambient System. */
declare var System: any;

// Apply the CLI SystemJS configuration.
System.config({
  map: {
    '@angular': 'vendor/@angular',
    'rxjs': 'vendor/rxjs',
    'main': 'main.js'
  },
  packages: cliSystemConfigPackages
});

refer angular-cli

for karma.conf.js, replace node_modules with dist/vendor when using angular-cli. hope it helps you.

like image 26
candidJ Avatar answered Sep 19 '22 13:09

candidJ
Sign in to Comment

Related questions

Generating child components in angular2 with NgFor does not work
How can my child component call a method on the parent component in Angular 2?
How to define a variable in an Angular 2 template?
Grunt Typescript can't find angular core
Private variable naming convention in official Angular 2 http tutorial
How to preload angular2 views so will not flicker white page on first load?
Ion-select with dynamic options in Ionic 2?
How to render partial inside template
Configuring Nginx to make Angular 2 quickstart work with Browsersync
Where to filter state?
Resolve a value *before* activating a route in Angular 2
How to access 'this' in angular 2 event handler?
Electron App with Angular 2 reload issue [duplicate]
Angular 2: how to conditionally apply attribute directive?
how to pass object to rxjs subscribe() callback function?
Getting Packery / Masonry to work with angular2
Keep applied filters on browser back and forward Angular 2
Angular 2 mock Http get() to return local json file
Use NPM to create a production build of an Angular2 project
How to watch on complex object in Angular 2 like we did in Angular 1 using $watch

Donate For Us

If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!