JSPM 和测试台以及无法解释的 "testing.js" 输出

JSPM and testbench and unexplainable "testing.js" output

几天来我们一直在纠结,似乎无法真正解决实际问题。我们想创建一个测试平台,以增加我们的代码覆盖率,但事实证明这并不像预期的那么容易。

包含正确的区域文件后,我们通过查看来自 angular 的快速入门发现我们需要调用 TestBed.initTestEnvironment。其中需要参数,我们导入:

import * as browserTesting from '@angular/platform-browser-dynamic/testing';


TestBed.initTestEnvironment(
   browserTesting.BrowserDynamicTestingModule,
    browserTesting.platformBrowserDynamicTesting()
);

但是,一旦我们尝试 运行 通过 Karma(使用茉莉花),我们 运行 进入 404:

Running "karma:single" (karma) task
Verifying property karma.single exists in config...OK
File: [no files]
Options: background=false, client={}
20 12 2016 13:22:25.757:INFO [karma]: Karma v0.13.22 server started at http://localhost:9876/
20 12 2016 13:22:25.764:INFO [launcher]: Starting browser Chrome
20 12 2016 13:22:26.439:INFO [Chrome 54.0.2840 (Linux 0.0.0)]: Connected on socket cuixl-0soveFUA_PAAAA with id 58970475
20 12 2016 13:22:26.711:WARN [web-server]: 404: /base/jspm_packages/npm/@angular/compiler@2.3.0/bundles/compiler-testing.umd.js/index.js
20 12 2016 13:22:26.713:WARN [web-server]: 404: /base/jspm_packages/npm/@angular/core@2.3.0/bundles/core-testing.umd.js/index.js
20 12 2016 13:22:26.714:WARN [web-server]: 404: /base/jspm_packages/npm/@angular/platform-browser@2.3.0/bundles/platform-browser-testing.umd.js/index.js
Chrome 54.0.2840 (Linux 0.0.0) ERROR
  Error: (SystemJS) XHR error (404 Not Found) loading /home/arend/Documents/Projects/Barco/opspace/barco-opspace/jspm_packages/npm/@angular/compiler@2.3.0/bundles/compiler-testing.umd.js/index.js
    Error: XHR error (404 Not Found) loading /home/arend/Documents/Projects/Barco/opspace/barco-opspace/jspm_packages/npm/@angular/compiler@2.3.0/bundles/compiler-testing.umd.js/index.js
        at XMLHttpRequest.wrapFn [as _onreadystatechange] (/home/arend/Documents/Projects/Barco/opspace/barco-opspace/jspm_packages/npm/zone.js@0.7.2/dist/zone.js:729:25) [<root>]
        at Zone.runTask (/home/arend/Documents/Projects/Barco/opspace/barco-opspace/jspm_packages/npm/zone.js@0.7.2/dist/zone.js:135:41) [<root> => <root>]
        at XMLHttpRequest.ZoneTask.invoke (/home/arend/Documents/Projects/Barco/opspace/barco-opspace/jspm_packages/npm/zone.js@0.7.2/dist/zone.js:285:27) [<root>]
    Error loading /home/arend/Documents/Projects/Barco/opspace/barco-opspace/jspm_packages/npm/@angular/compiler@2.3.0/bundles/compiler-testing.umd.js/index.js as "./bundles/compiler-testing.umd.js/index" from /home/arend/Documents/Projects/Barco/opspace/barco-opspace/jspm_packages/npm/@angular/compiler@2.3.0/testing.js

查看 "jspm_packages/npm/@angular/compiler@2.3.0/testing.js",我们很快发现它保存了错误的信息:

module.exports = require('./bundles/compiler-testing.umd.js/index');

而不是预期的:

module.exports = require('./bundles/compiler-testing.umd');

如果我手动更正它,一切都会完美无缺。所以我的问题我们如何防止 JSPM 或任何人生成错误的 testing.js 文件?

我们的想法是,出于某种原因,jspm 认为 compiler-testing.umd.js 文件是一个文件夹,因此将 /index 附加到它

*我们通过 config.js 包含了 angular 文件:*

System.config({
  defaultJSExtensions: true,
  transpiler: "typescript",
  paths: {
    "github:*": "jspm_packages/github/*",
    "npm:*": "jspm_packages/npm/*"
  },

  map: {
    "@angular/common": "npm:@angular/common@2.3.0",
    "@angular/compiler": "npm:@angular/compiler@2.3.0",
    "@angular/core": "npm:@angular/core@2.3.0",
    "@angular/core/testing": "npm:@angular/core@2.3.0/bundles/core-testing.umd.js",
    "@angular/forms": "npm:@angular/forms@2.3.0",
    "@angular/http": "npm:@angular/http@2.3.0",
    "@angular/http/testing": "npm:@angular/http@2.3.0/bundles/http-testing.umd.js",
    "@angular/platform-browser": "npm:@angular/platform-browser@2.3.0",
    "@angular/platform-browser-dynamic": "npm:@angular/platform-browser-dynamic@2.3.0",
    "@angular/platform-browser-dynamic/testing": "npm:@angular/platform-browser-dynamic@2.3.0/bundles/platform-browser-dynamic-testing.umd.js",
    "@angular/router": "npm:@angular/router@3.3.0",

经过漫长而广泛的搜索和数小时的比较,我实际上找到了问题和解决所有这些问题的方法:

  • 问题:angular2 示例都使用 npm_modules,因此他们调整了 systemjs 文件以使用 npm 文件夹,但是,我们选择使用 JSPM,因为这使我们的 backend/infrastructure 和我们的前端。让我们无需更改配置即可 add/remove/upgrade 包。因为 angular2 模块实际上是 2 个模块合二为一,它导致 JSPM 对此产生了一些有趣的事情,因此最终总是试图加载错误的文件:例如"core-testing.umd.js/index" 而不仅仅是 "core-testing.umd".
  • 解决方案:终于我找到了金子:更新到 jspm 0.17(在撰写本文时仍处于测试阶段)

新的 JSPM 也能正确检测到测试模块,现在加载已正确完成!