Angular 2 + Karma + Karma-jspm + Karma-Abdeckung + Typoskript Bericht PhantomJS Fehler

Question

Ich habe die letzten paar Tage mit der Berichterstattung Berichterstattung arbeiten gearbeitet und ich habe ein Problem getroffen, das ich nicht lösen konnte. Der Stack-Trace Ich erhalte, mit ein paar Zeilen von Debug-Code umgibt, ist

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

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

Wenn ich ändern, um die Präprozessoren

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

Ich erhalte den Stack-Trace nicht, und er gibt mir Deckung, aber offensichtlich nicht auf meinen anderen Komponenten und so. Dies scheint ein Problem beim Laden des SystemJS-Moduls zu sein, aber ich kann nicht herausfinden, was vor sich geht, oder ob das sogar das eigentliche Problem ist.

Die Tests laufen gut, wenn ich die Abdeckung aus der Reporterliste entferne.

Ich habe auch versucht, karma-typescript-preprocessor (siehe die auskommentierten Bits des Codes in karma.conf.js), und ich bekam einen Coverage-Bericht, aber die Quellkartendateien würden nicht korrekt zugeordnet, die ich konnte auch nicht herausfinden.

Hat jemand etwas Ähnliches erfahren und einen Weg gefunden, das Problem zu lösen?

Answer 1

Ich kämpfe auch mit einem funktionierenden Setup für Karma, Systemjs und Typoskript. Ich habe ein funktionierendes Setup gefunden, aber es ist ein bisschen hässlich und hängt davon ab, den Coverage-Report durch Schluck neu zu mappen, weil das Karma-Plugin für Remaping innerhalb von Karma nicht richtig funktioniert, sondern nur im Schluck. Ich habe das Systemjs-Plugin anstelle des Jspm-Plugins verwendet, da es besser funktioniert.

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

Das funktionierte für mich. Zusätzlich habe ich diese Aufgabe in meinem gulpfile

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

Dieses Setup hat noch einige Probleme. Zum Beispiel können einige leere oder nicht "ausgeführte" Dateien sie beschädigen, weil SystemJS sich über die Registrierung beschwert und nicht ausführt. Test ist nur durch * .spec.js enthalten, da die Verwendung von **/*. Spec.js keine Tests lädt.

Ich habe bereits einen Fehlerbericht für Karma-Remap-Istanbul-Plugin gefüllt. https://github.com/marcules/karma-remap-istanbul/issues/21 Vielleicht gibt es eine Chance zu bekommen ist Arbeit im Karma.

Ich hoffe, dass kann helfen, Ihre Einrichtung zu verbessern und vielleicht können wir sogar eine bessere Lösung mit allem arbeiten erarbeiten.

BTW: Ich habe versucht, ein Setup ähnlich wie Ihres zu verwenden und bekam die folgende Fehlermeldung, ich habe schon viel Zeit mit jspm und systemjs Erweiterung gesehen:

Modul http://localhost:9876/src/common/modules/product/product.js als globales Modul-Format interpretiert, aber System.register genannt.

Answer 2

Ich wünschte, ich könnte Ihre Frage direkt beantworten, aber ich hatte auch Probleme, ein laufendes Projekt mit Codeabdeckung zu bekommen.Ich habe schließlich Karma-Jspm kaputt gemacht und neu strukturiert, um Code-Coverage explizit einzuschließen.

Um ein Beispiel zu sehen, habe ich ein Seed-Projekt erstellt, das alle Bibliotheken in Ihrer Frage enthält. Die wichtigste Komponente ist, dass SystemJS für Entwicklung, Produktion, Komponententests, E2e-Tests und Code-Coverage verwendet wird.

Siehe angular2-jspm-typescript-seed

Dieses Projekt wird mit @uiuxengineering/karma-jspm anstelle des ursprünglichen Karma-jspm SystemJS Code Coverage und angular2 zu unterstützen.

Das Karma Config sieht wie folgt aus:

 

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

Die Karma Config ausgelegt ist in WebStorm als auch mit dem Zug Aufgabe "test" laufen.