【问题标题】:Angular 2 + Karma + karma-jspm + karma-coverage + typescript report phantomJS failureAngular 2 + Karma + karma-jspm + karma-coverage + typescript 报告 phantomJS 失败
【发布时间】:2016-09-01 11:54:50
【问题描述】:

过去几天,我一直在努力让覆盖报告发挥作用,但我遇到了一个我无法解决的问题。我收到的堆栈跟踪以及几行周围的调试代码是

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

nested-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 中注释掉的代码位),我得到了一份覆盖率报告,但源映射文件无法正确映射,我也想不通。

有没有人遇到过类似的事情并找到解决问题的方法?

【问题讨论】:

    标签: typescript angular phantomjs karma-runner jspm


    【解决方案1】:

    我希望我可以直接回答您的问题,但我也很难让一个具有代码覆盖率的项目运行。我终于分解并重构了 karma-jspm 以明确包含代码覆盖率。

    为了查看示例,我创建了一个种子项目,其中包含您问题中的所有库。关键组件是 SystemJS 用于开发、生产、单元测试、e2e 测试和代码覆盖。

    angular2-jspm-typescript-seed

    本项目使用@uiuxengineering/karma-jspm 代替原来的 karma-jspm 来支持 SystemJS 代码覆盖和 angular2。

    Karma 配置如下所示:

    // 业力配置 // 生成于 2015 年 7 月 15 日星期三 09:44:02 GMT+0200(浪漫夏令时) '使用严格'; var argv = require('yargs').argv; module.exports = 功能(配置){ 配置.set({ // 将用于解析所有模式的基本路径(例如文件、排除) basePath: './src/client', // 要使用的框架 // 可用框架:https://npmjs.org/browse/keyword/karma-adapter 框架:['jspm', 'jasmine'], // 要在浏览器中加载的文件/模式列表 jspm:{ 条扩展:假, /** * 主要配置 */ 配置:'jspm.config.js', /** * 开发 jspm 配置。 */ 开发:空, /** * 节点 jspm 配置 */ 节点:空, /** * 浏览器 jspm 配置。 */ 浏览器:空, 包:'jspm_packages', /** * 适配器在测试开始前使用 systemJs 进行任何预加载, * 并实现 karma.start 方法。 * * 'angular2' 是目前唯一的选择。 * 如果未定义,则使用默认适配器。 * * @param 适配器路径或'angular2' */ 适配器:'angular2', /** * 加载应用程序之前由系统 js 加载的文件。 * 它们将按提供的相同顺序加载。 * * 为“angular2”适配器设置了默认文件。 * 如果设置,此属性将覆盖默认值。 */ // preloadBySystemJS: [ // 'zone.js/dist/zone.js', // '@angular/core/testing', // '@angular/platform-b​​rowser-dynamic/testing', // 'zone.js/dist/jasmine-patch.js', // 'zone.js/dist/async-test.js', // 'zone.js/dist/fake-async-test.js' // ], /** * 可以在对象中提供文件以 *配置特定的服务选项。 * * 文件将被放置在一个类似于以下的对象中: * * { * 模式:'someFile.js, *包括:假,//可配置 * serve: true, // 可配置 * nocache: false, // 可配置 * 观看:true // 可配置 * }; * * 如果在对象中提供,则配置所有选项。 * */ 加载文件:[ 'app/**/*.spec.ts', '测试/**/*.ts' ], /** * 文件将通过以下选项完全放入对象中: * * { * 模式:'someFile.js, * 包括:假, *服务:真实, * nocache:假, *观看:真实 * }; */ 服务文件:[ 'app/**/*!(*.spec|*.e2e-spec).ts', 'app/**/*.html', 'app/**/*.scss', '资产/**/*.json' ] }, // 必须符合上述要求,抑制烦人的 404 警告。 代理:{ '/app/': '/base/app/', '/assets/': '/base/assets/', '/jspm_packages/': '/base/jspm_packages/', '/scss/': '/base/scss/', '/testing/': '/base/testing/' }, // 要排除的文件列表 排除: [], // 在将匹配文件提供给浏览器之前对其进行预处理 // 可用的预处理器:https://npmjs.org/browse/keyword/karma-preprocessor 预处理器:{ 'app/**/!(*.spec).ts': ['jspm'] }, // 测试结果报告器使用 // 可能的值:'dots', 'progress' // 可用的记者:https://npmjs.org/browse/keyword/karma-reporter // 记者:['junit', 'coverage', 'spec'], 记者:['mocha', 'jspm'], 报道记者:{ // 将覆盖率映射到源 typescript 或 es6 文件。 重映射:真的, 目录:process.cwd() + '/test-reports/unit', 子目录:函数(目录){ 返回目录.replace(/\s/g, '_'); }, 记者:【 // 将生成 html 报告 {类型:'html'}, // 将生成 json 报告文件并将此报告加载到 // 确保覆盖失败导致 gulp 退出非零 {类型:'json',文件:'coverage-final.json'}, // 将生成 Icov 报告文件,并将此报告发布到工作服 {类型:'lcov'}, // 它不会生成任何文件,但会将覆盖范围打印到控制台 // 覆盖范围摘要 // {type: '文本摘要'}, // 它不会生成任何文件,但会将覆盖范围打印到控制台 // 每个文件的详细报告 {类型:'文本'} ] }, // 网络服务器端口 端口:9876, // 在输出中启用/禁用颜色(记者和日志) 颜色:真实, // 日志级别 // 可能的值:config.LOG_DISABLE || config.LOG_ERROR || config.LOG_WARN || config.LOG_INFO || config.LOG_DEBUG 日志级别:config.LOG_DEBUG, 记录器:[{ “类型”:“文件”, "文件名": "./log_file.log", “最大日志大小”:20480, “备份”:3, “类别”:“绝对记录器” }], // 启用/禁用监视文件并在任何文件更改时执行测试 自动手表:是的, // 启动这些浏览器 // 可用的浏览器启动器:https://npmjs.org/browse/keyword/karma-launcher 浏览器:[ '铬合金' ], 插件:[ 要求('@uiuxengineering/karma-jspm'), '业力茉莉', '业力铬发射器', '业力摩卡记者', '业力发射器', '业力幻影发射器' ], 自定义启动器:{ Chrome_travis_ci:{ 基地:“铬”, 标志:['--no-sandbox'] } }, // 持续集成模式 // 如果为真,Karma 捕获浏览器,运行测试并退出 单跑:假, // 将命令行参数传递给测试 客户: { 文件:argv.files } }); 如果(process.env.APPVEYOR){ config.browsers = ['IE']; config.singleRun = 真; config.browserNoActivityTimeout = 90000; // 注意:默认值(10000)是不够的 } 如果(process.env.TRAVIS || process.env.CIRCLECI){ config.browsers = ['Chrome_travis_ci']; config.singleRun = 真; } };

    Karma 配置旨在通过 gulp 任务“测试”在 WebStorm 中运行。

    【讨论】:

      【解决方案2】:

      我还在为 karma、systemjs 和 typescript 的工作设置而苦苦挣扎。我找到了一个可行的设置,但它有点难看,并且取决于通过 gulp 重新映射覆​​盖率报告,因为用于重新映射的 karma 插件在 karma 内无法正常工作,而只能在 gulp 中正常工作。 我使用 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
      })
      };
      

      这对我有用。另外我的 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 不会加载任何测试。

      我已经填写了 karma-remap-istanbul 插件的错误报告。 https://github.com/marcules/karma-remap-istanbul/issues/21 也许有机会在业力中得到工作。

      我希望这可能有助于改进您的设置,也许我们甚至可以在一切正常的情况下制定出更好的解决方案。

      顺便说一句:我尝试使用类似于您的设置并收到以下错误,我已经看到很多时间使用 jspm 和 systemjs 扩展:

      Module http://localhost:9876/src/common/modules/product/product.js 解释为全局模块格式,但称为 System.register。

      【讨论】:

        猜你喜欢
        • 2016-03-03
        • 2014-06-06
        • 1970-01-01
        • 2016-09-25
        • 2018-01-27
        • 2016-12-26
        • 2015-01-07
        • 1970-01-01
        • 1970-01-01
        相关资源
        最近更新 更多