Angular 2 + Karma + karma-jspm + karma-coverage + typescript report phantomJS failure

Question

我一直在爭取最近幾天的覆蓋面報告工作，我遇到了一個我一直無法解決的問題。堆棧跟蹤我收到，與一對夫婦的周圍調試代碼行，是

15 07 2016 14:41:53.413:DEBUG [middleware:source-files]: Requesting /jspm_packages/npm/process@0.11.5/browser.js/
15 07 2016 14:41:53.413:DEBUG [middleware:source-files]: Fetching /jspm_packages/npm/process@0.11.5/browser.js 
15 07 2016 14:41:53.415:DEBUG [proxy]: proxying request - /jspm_packages/npm/process@0.11.5/browser.js to localhost:9876 
15 07 2016 14:41:53.417:DEBUG [middleware:source-files]: Requesting /base/jspm_packages/npm/process@0.11.5/browser.js/
15 07 2016 14:41:53.417:DEBUG [middleware:source-files]: Fetching /home/administrator/assist-2.0/client/jspm_packages/npm/process@0.11.5/browser.js 
15 07 2016 14:41:53.419:DEBUG [web-server]: serving: /home/administrator/assist-2.0/client/jspm_packages/npm/process@0.11.5/browser.js 
PhantomJS 2.1.1 (Linux 0.0.0) ERROR 
    Error: (SystemJS) /home/administrator/assist-2.0/client/jspm_packages/system.src.js:3047:137 
     /home/administrator/assist-2.0/client/jspm_packages/system.src.js:3756:33 
     /home/administrator/assist-2.0/client/jspm_packages/system.src.js:4251:37 
     /home/administrator/assist-2.0/client/jspm_packages/system.src.js:1508:27 
     /home/administrator/assist-2.0/client/jspm_packages/system.src.js:2738:28 
     register@/home/administrator/assist-2.0/client/jspm_packages/system.src.js:2998:23 
     eval code 
     eval@[native code] 
     __exec@/home/administrator/assist-2.0/client/jspm_packages/system.src.js:1544:18 
     execute@/home/administrator/assist-2.0/client/jspm_packages/system.src.js:3723:20 
     linkDynamicModule@/home/administrator/assist-2.0/client/jspm_packages/system.src.js:3281:36 
     link@/home/administrator/assist-2.0/client/jspm_packages/system.src.js:3124:28 
     execute@/home/administrator/assist-2.0/client/jspm_packages/system.src.js:3491:17 
     doDynamicExecute@/home/administrator/assist-2.0/client/jspm_packages/system.src.js:774:32 
     link@/home/administrator/assist-2.0/client/jspm_packages/system.src.js:972:36 
     doLink@/home/administrator/assist-2.0/client/jspm_packages/system.src.js:631:11 
     updateLinkSetOnLoad@/home/administrator/assist-2.0/client/jspm_packages/system.src.js:677:24 
     /home/administrator/assist-2.0/client/jspm_packages/system.src.js:493:30 
     invoke@/home/administrator/assist-2.0/client/node_modules/zone.js/dist/zone.js:323:34 
     runGuarded@/home/administrator/assist-2.0/client/node_modules/zone.js/dist/zone.js:230:54 
     /home/administrator/assist-2.0/client/node_modules/zone.js/dist/zone.js:206:40 
     Evaluating http://localhost:9876/dist/src/components/widgets/nested-table/nested-table.component.js 
     Error loading http://localhost:9876/dist/tests/unit/components/nested-table.spec.js 
PhantomJS 2.1.1 (Linux 0.0.0): Executed 0 of 0 ERROR (1.095 secs/0 secs) 
15 07 2016 14:41:53.436:DEBUG [karma]: Run complete, exiting. 
15 07 2016 14:41:53.437:DEBUG [launcher]: Disconnecting all browsers 
15 07 2016 14:41:53.441:DEBUG [launcher]: Process PhantomJS2 exited with code 0 
15 07 2016 14:41:53.442:DEBUG [temp-dir]: Cleaning temp dir /tmp/karma-88547336 
15 07 2016 14:41:53.449:DEBUG [launcher]: Finished all browsers 

karma.conf.js

module.exports = function(config) { 
    config.set({ 
     frameworks: ['jspm', 'jasmine'], 

     basePath: '.', 

     files: [ 
      'node_modules/zone.js/dist/zone.js', 
      'node_modules/zone.js/dist/jasmine-patch.js', 
      'node_modules/reflect-metadata/Reflect.js', 
      'node_modules/es6-shim/es6-shim.js', 
      'jspm_packages/system-polyfills.js' 
     ], 

     jspm: { 
      loadFiles: [ 
       'dist/tests/**/*.js', 
      ], 

      serveFiles: [ 
       'dist/src/**/*.js', 
       // 'src/**/*.ts' 
      ] 
     }, 

     proxies: { 
      // '/src/': '/base/src/', 
      '/dist/src/': '/base/dist/src/', 
      '/dist/tests/': '/base/dist/tests/', 
      '/jspm_packages/': '/base/jspm_packages/', 
     }, 

     port: 9876, 
     logLevel: config.LOG_INFO, 
     colors: true, 
     autoWatch: true, 
     browsers: [ 
      // 'PhantomJS', 
      'PhantomJS2', 

     ], 

     plugins: [ 
      'karma-jasmine', 
      'karma-jspm', 
      'karma-phantomjs-launcher', 
      'karma-phantomjs2-launcher', 
      'karma-junit-reporter', 
      'karma-coverage', 
      'karma-sourcemap-loader', 
      // 'karma-typescript-preprocessor' 
     ], 

     reporters: [ 
      'coverage', 
      'junit', 
      'dots', 
     ], 

     junitReporter: { 
      outputDir: '.', 
      outputFile: "./reports/client-test-results.xml", 
      useBrowserName: false 
     }, 

     preprocessors: { 
      'dist/src/**/!(*.spec).js!(.map)': [ 
       'sourcemap', 
       // 'typescript', 
       'coverage' 
      ], 
      // 'src/**/*.ts': [ 
      //  'sourcemap', 
      //  'typescript', 
      //  'coverage', 
      // ], 
     }, 

     coverageReporter: { 
      dir: 'reports', 
      subdir: 'coverage', 
      includeAllSources: true, 
      reporters: [ 
       { 
        type: 'json', 
        file: 'coverage.json' 
       }, 
       // { 
       //  type: 'cobertura', 
       //  file: 'coverage.xml' 
       // }, 
       // { 
       //  type: 'html', 
       //  subdir: 'coverage/html' 
       // } 
      ], 
      instrumenterOptions: { 
       istanbul: { 
        noCompact: true 
       } 
      } 
     }, 

     // typescriptPreprocessor: { 
     //  options: { 
     //   inlineSourceMap: true, 
     //   inlineSources: true, 
     //   "target": "es5", 
     //   "module": "system", 
     //   "sourceMap": true, 
     //   "emitDecoratorMetadata": true, 
     //   "experimentalDecorators": true, 
     //   "removeComments": false, 
     //   "noImplicitAny": false, 
     //  }, 
     //  transformPath: function(path) { 
     //   return path.replace(/\.ts$/, '.js'); 
     //  } 
     // }, 

     singleRun: true 
    }) 
}; 

嵌套table.spec.ts

import {NestedTableComponent} from '../../../src/components/widgets/nested-table/nested-table.component'; 
import {beforeEach, describe, expect, it} from '@angular/core/testing'; 
import {DEBUG_VIEW_TEST_DATA, DEBUG_VIEW_TEST_HEADERS} from '../../../src/db/mockdata'; 
import { ImmutableMatchers } from '../helpers/jasmine-immutable-matchers'; 

describe('Nested Table Component',() => { 
    let ntable, data, headers; 
    beforeEach(function() { 
     jasmine.addMatchers(ImmutableMatchers); 
     ntable = new NestedTableComponent(); 
     data = DEBUG_VIEW_TEST_DATA[0].data; 
     headers = DEBUG_VIEW_TEST_HEADERS[0].headers; 
    }); 

    it('should return an array of keys',() => { 
     expect(ntable.keys(data)).toEqualImmutable(data.keySeq()); 
    }); 

    it('should calculate the widths of columns',() => { 
     let expected = { 
      "Element Property": 4, 
      "Key": 2, 
      "Property Value": 2, 
      "Last Refresh": 2, 
      "Element Definition": 2 
     } 
     expect(ntable.getColWidths(headers)).toEqual(expected); 
    }); 
}); 

當我改變預處理程序，以

preprocessors: { 
    'dist/src/!(*.spec).js!(.map)': [ 
     'sourcemap', 
     // 'typescript', 
     'coverage' 
    ], 
    // 'src/**/*.ts': [ 
    //  'sourcemap', 
    //  'typescript', 
    //  'coverage', 
    // ], 
}, 

我沒有收到堆棧跟蹤，它給我覆蓋，但顯然不在我的其他組件等。這似乎是SystemJS模塊加載時的一個問題，但我無法弄清楚發生了什麼，或者甚至是實際的問題。

當我從記者名單中刪除報道時，測試通過的很好。我也嘗試使用karma-typescript-preprocessor（參考karma.conf.js中的註釋掉的代碼位），並且我得到一個覆蓋報告，但源映射文件映射不正確，我也無法弄清楚。

有沒有人遇到類似的東西，並找到了解決問題的方法？

Answer 1

我也在爲karma，systemjs和typescript工作的設置掙扎。我發現了一個工作設置，但它有點難看，並且依賴於通過吞噬重新映射覆​​蓋率報告，因爲用於重映射的業務插件在業障內不能正確工作，但僅在吞嚥時才工作。 我使用了systemjs插件而不是jspm插件，因爲它的接縫效果更好。

// Karma configuration 
// Generated on Sat Aug 13 2016 18:33:27 GMT+0200 (CEST) 

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

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


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


    // list of files/patterns to load in the browser 
    files: [ 

     'node_modules/core-js/client/shim.min.js', 
     'node_modules/reflect-metadata/Reflect.js', 
     'node_modules/zone.js/dist/zone.js', 

//  {pattern: 'node_modules/systemjs/dist/system.src.js', included: false, watched: false}, 
//  {pattern: 'jspm_packages/**/*.js', included: false, watched: false}, 

     {pattern: 'jspm_packages/npm/@angular/**/*.js', included: false, watched: false}, 
     {pattern: 'jspm_packages/npm/rxjs@5.0.0-beta.10/**/*.js', included: false, watched: false}, 
     'jspm_packages/npm/lodash@4.13.1/lodash.js', 
     'jspm_packages/npm/angular2-swiper@0.4.0/dist/ks-swiper.js', 
     'jspm_packages/npm/swiper@3.3.1/dist/js/swiper.js', 
     'jspm_packages/npm/jquery@2.2.4/dist/jquery.js', 
     'jspm_packages/npm/foundation-sites@6.2.3/dist/foundation.js', 
     'jspm_packages/npm/symbol-observable@1.0.1/index.js', 
     {pattern: 'jspm_packages/npm/symbol-observable@1.0.1/lib/*.js', included: false, watched: false}, 
     {pattern: 'jspm_packages/npm/rxjs@5.0.0-beta.6/**/*.js', included: false, watched: false}, 


     {pattern: 'jspm_packages/npm/crypto-js@3.1.6/*.js', included: false, watched: false}, 
     {pattern: 'jspm_packages/github/**/*.js', included: false, watched: false}, 
     {pattern: 'jspm_packages/npm/*.js', included: false, watched: false}, 
     {pattern: 'dev/**/*.js', included: true, watched: true}, 
     {pattern: 'test/*.spec.js', included: true, watched: true}, 
     {pattern: 'templates/*.html', included: true, watched: true} 
    ], 


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

    proxies: { 
//  '/jspm_packages/': '/base/jspm_packages/' 
//  '/templates/': '/base/templates/' 
    }, 

    systemjs: { 
     configFile: 'dev/systemjs.config.js', 
//  serveFiles: ['test/**/*.spec.js'], 
     config:  { 
      paths: { 
//   "github:*": "./jspm_packages/github/*", 
//   "npm:*": "./jspm_packages/npm/*" 
      }, 
      map: { 
       'systemjs':   'node_modules/systemjs/dist/system.js', 
       'system-polyfills': 'node_modules/systemjs/dist/system-polyfills.js', 
       'es6-module-loader': 'node_modules/es6-module-loader/dist/es6-module-loader.js' 
      }, 
      meta: { 
       'dev/app/*': {format: 'register'} 
      } 
     } 
    }, 

    // preprocess matching files before serving them to the browser 
    // available preprocessors: https://npmjs.org/browse/keyword/karma-preprocessor 
    preprocessors: { 
     'dev/app/**/*.js': ['coverage'] 
    }, 


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

    coverageReporter: { 
     reporters: [{ 
      type: 'json', 
      subdir: '.' 
     }, { 
      type: 'text-summary' 
     }/*, { 
      type: 'html' 
     }*/] 
    }, 

    /* 
    remapIstanbulReporter: { 
     src:  'coverage/coverage-final.json', 
     reports: { 
      html: 'coverage' 
     }, 
     dest: './coverage-source' 
    }, */ 

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


    // 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: ['PhantomJS', '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 
}) 
}; 

這對我有效。另外我有我的大廚文件

gulp.task('coverage', ['test'], function() { 
return gulp.src('coverage/**/coverage-final.json') 
    .pipe(remapIstanbul({ 
     reports: { 
      'json': 'reports/coverage/coverage.json', 
      'html': 'reports/coverage/html' 
     } 
    })) 
    .pipe(gulp.dest('reports/coverage/')); 
}); 

這種設置仍然有一些問題。例如，一些空的或不「執行」的文件可能會破壞它，因爲SystemJS抱怨註冊和不執行。 測試僅通過* .spec.js包含，因爲使用**/*。spec.js不會加載任何測試。

我已經爲karma-remap-istanbul插件填寫了一個bug報告。 https://github.com/marcules/karma-remap-istanbul/issues/21 也許有機會得到是業力內部的工作。

我希望這可能有助於改善您的設置，也許我們甚至可以制定一個更好的解決方案，一切工作。

BTW：我試圖用類似您的的設置，得到了下面的錯誤，我已經看到了大量的時間與JSPM和systemjs擴展：

模塊http://localhost:9876/src/common/modules/product/product.js解釋爲全局模塊格式，但稱爲System.register。

Answer 2

我希望我能直接回答你的問題，但我也努力得到一個有代碼覆蓋率的項目運行。我最終分解並重構了karma-jspm以明確包含代碼覆蓋率。

要查看示例，我創建了一個包含問題中所有庫的種子項目。關鍵部分是SystemJS用於開發，生產，單元測試，e2e測試和代碼覆蓋。

見angular2-jspm-typescript-seed

該項目使用@uiuxengineering/karma-jspm，而不是原來的果報JSPM支持SystemJS代碼覆蓋和angular2。

卡瑪配置是這樣的：

 

    // Karma configuration 
    // Generated on Wed Jul 15 2015 09:44:02 GMT+0200 (Romance Daylight Time) 
    'use strict'; 

    var argv = require('yargs').argv; 

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

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

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

     // list of files/patterns to load in the browser 
     jspm: { 
      stripExtension: false, 

      /** 
      * main config 
      */ 
      config: 'jspm.config.js', 

      /** 
      * dev jspm config. 
      */ 
      dev: null, 

      /** 
      * node jspm config 
      */ 
      node: null, 

      /** 
      * browser jspm config. 
      */ 
      browser: null, 

      packages: 'jspm_packages', 

      /** 
      * Adapters do any preloading with systemJs before tests start, 
      * and impletent the karma.start method. 
      * 
      * 'angular2' is the only option for now. 
      * If not defined, a default adapter is used. 
      * 
      * @param path to adapter or 'angular2' 
      */ 
      adapter: 'angular2', 


      /** 
      * Files loaded by system js before app is loaded. 
      * They will load in same order provided. 
      * 
      * Default files are set for 'angular2' adapter. 
      * This property will override defaults if set. 
      */ 
      // preloadBySystemJS: [ 
      // 'zone.js/dist/zone.js', 
      // '@angular/core/testing', 
      // '@angular/platform-browser-dynamic/testing', 
      // 'zone.js/dist/jasmine-patch.js', 
      // 'zone.js/dist/async-test.js', 
      // 'zone.js/dist/fake-async-test.js' 
      // ], 

      /** 
      * Files may be provided in a object to 
      * configure specific serve options. 
      * 
      * Files will be put in an object similar to: 
      * 
      * { 
      * pattern: 'someFile.js, 
      * included: false, // configurable 
      * served: true,  // configurable 
      * nocache: false, // configurable 
      * watched: true  // configurable 
      * }; 
      * 
      * All options configured if provided in an object. 
      * 
      */ 
      loadFiles: [ 
      'app/**/*.spec.ts', 
      'testing/**/*.ts' 
      ], 

      /** 
      * Files will be put in an object EXACTLY with the options: 
      * 
      * { 
      * pattern: 'someFile.js, 
      * included: false, 
      * served: true, 
      * nocache: false, 
      * watched: true 
      * }; 
      */ 
      serveFiles: [ 
      'app/**/*!(*.spec|*.e2e-spec).ts', 
      'app/**/*.html', 
      'app/**/*.scss', 
      'assets/**/*.json' 
      ] 
     }, 

     // must go along with above, suppress annoying 404 warnings. 
     proxies: { 
      '/app/': '/base/app/', 
      '/assets/': '/base/assets/', 
      '/jspm_packages/': '/base/jspm_packages/', 
      '/scss/': '/base/scss/', 
      '/testing/': '/base/testing/' 
     }, 

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


     // preprocess matching files before serving them to the browser 
     // available preprocessors: https://npmjs.org/browse/keyword/karma-preprocessor 
     preprocessors: { 
      'app/**/!(*.spec).ts': ['jspm'] 
     }, 

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

     coverageReporter: { 

      // map coverage to source typescript or es6 files. 
      remap: true, 

      dir: process.cwd() + '/test-reports/unit', 

      subdir: function(directory) { 
      return directory.replace(/\s/g, '_'); 
      }, 

      reporters: [ 

      // will generate html report 
      {type: 'html'}, 

      // will generate json report file and this report is loaded to 
      // make sure failed coverage cause gulp to exit non-zero 
      {type: 'json', file: 'coverage-final.json'}, 

      // will generate Icov report file and this report is published to coveralls 
      {type: 'lcov'}, 

      // it does not generate any file but it will print coverage to console 
      // a summary of the coverage 
      // {type: 'text-summary'}, 

      // it does not generate any file but it will print coverage to console 
      // a detail report of every file 
      {type: 'text'} 
      ] 
     }, 

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

     loggers: [{ 
      "type": "file", 
      "filename": "./log_file.log", 
      "maxLogSize": 20480, 
      "backups": 3, 
      "category": "absolute-logger" 
     }], 

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

     plugins: [ 
      require('@uiuxengineering/karma-jspm'), 
      'karma-jasmine', 
      'karma-chrome-launcher', 
      'karma-mocha-reporter', 
      'karma-ie-launcher', 
      'karma-phantomjs-launcher' 
     ], 

     customLaunchers: { 
      Chrome_travis_ci: { 
      base: 'Chrome', 
      flags: ['--no-sandbox'] 
      } 
     }, 

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

     // Passing command line arguments to tests 
     client: { 
      files: argv.files 
     } 
     }); 

     if (process.env.APPVEYOR) { 
     config.browsers = ['IE']; 
     config.singleRun = true; 
     config.browserNoActivityTimeout = 90000; // Note: default value (10000) is not enough 
     } 

     if (process.env.TRAVIS || process.env.CIRCLECI) { 
     config.browsers = ['Chrome_travis_ci']; 
     config.singleRun = true; 
     } 
    }; 

卡瑪配置的目的是在WebStorm與一飲而盡任務「測試」上運行。