角2 +噶+卡玛JSPM +卡玛 - 覆盖+打字稿报告phantomJS失败(Angular 2 +

2019-09-26 16:44发布

站内文章 / 后端开发

33 0

冷血范

女 | 书童

私信

我一直在战斗的最后几天让工作覆盖报告，我已经打了一个问题，我一直没能解决。我收到，一对夫妇周围调试代码的行的堆栈跟踪，是

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.conf.js代码注释掉位），并且我得到一个覆盖报告，但sourcemap文件将不会正确映射，这也是我想不通出。

任何人都经历类似的话，并找到一种方法来解决这个问题？

Answer 1:

我希望我可以直接回答你的问题，但我也挣扎着有代码覆盖项目的运行。我终于崩溃了，重构卡玛 - JSPM明确包括代码覆盖。

要看到一个样品，我创建了包含所有图书馆在你的问题中的种子项目。关键组分是SystemJS被用于开发，生产，单元测试，E2E测试，和代码覆盖。

见angular2-JSPM-打字稿种子

该项目使用@ uiuxengineering /卡玛- 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与一饮而尽任务“测试”上运行。

Answer 2:

我还与因果报应，systemjs和打字稿工作设置挣扎。我发现了一个工作设置，但它是一个有点丑陋，取决于通过重映射一饮而尽覆盖报告，因为重映射善缘插件不人缘内，但只有在一饮而尽正常工作。我用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
})
};

这为我工作。 Additionaly我有这样的任务在我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/'));
});

这种设置还是有一些问题。例如一些空或不是“执行”文件可能会打破它，因为SystemJS抱怨注册和未执行。因为使用** / *。spec.js不加载任何测试，测试只能通过* .spec.js包括在内。

我已经填补了卡玛 - 重映射 - 伊斯坦布尔插件的bug报告。 https://github.com/marcules/karma-remap-istanbul/issues/21也许有机会获得在里面因缘工作。

我希望可以帮助改善你的设置，也许我们甚至可以计算出一切工作更好的解决方案。

BTW：我试图用类似您的的设置，得到了下面的错误，我已经看到了大量的时间与JSPM和systemjs扩展：