Вопросы, связанные с получением кармы для работы с SystemJS, Angular2 и Typcript

Question

У меня проблемы с получением кармы для работы с SystemJS, Angular2 и Typcript.

Вот мой 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 
    }); 
}; 

Моей карма-тест-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); 

Моего 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); 

Когда я запускаю свои тесты с karma start karma.conf.js, и мои тесты находятся рядом с основными файлами ts.

Я получаю эту ошибку:

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. 

Может кто-нибудь пожалуйста помочь?

Answer 1

Я вижу несколько проблем в том, что вы сделали.

Сначала я думаю, что вы настраиваете дважды SystemJS:

• один раз в test-shim-karma.js файле
• один раз в karma.conf.js один Повсеместно карма плагин SystemJS.

Тогда вы не настроить модули источника, которые будут использоваться в вашей спецификации файлов:

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

Вы называете несколько раз метод System.config.

Я хотел бы также добавить несколько записей в files разделе вашего karma.conf.js файла:

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

Вы могли бы взглянуть на этот проект для рабочей конфигурации Кармы с Angular2 RC1 и машинопись:

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

Answer 2

Я провел последние пару дней, глядя на все разные семена A2/clis, и 90% из них используют старый код A2, и мне было трудно интерпретировать их в новейшем коде A2.

В конце концов я нашел это. https://github.com/juliemr/ng2-test-seed

Это провело мои тесты кармы, работающие с systemjs. Это очень хороший очень простой проект, который получает основы и лишний мусор, навязанный вам.

Вам нужно будет изменить некоторые URL-адреса файлов, чтобы они соответствовали тому, с чем вы работаете. Используя это в качестве руководства, я смог получить модульные тесты, работающие с машинописными и системными.