JSPM and testbench and unexplainable "testing.js" output

Question

We have been pulling our hair for a few days and can't really seem to get a hold of the actual problem. We wanted to create a testbench, to increase our code coverage but this proved to be not so easy as anticipated.

After including the correct zone files, we found, by looking at the QuickStart from angular, that we needed to call TestBed.initTestEnvironment. Which needs to parameters, which we imported:

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


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

However, as soon as we try and run this via Karma (with jasmine) we run into a 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/[email protected]/bundles/compiler-testing.umd.js/index.js
20 12 2016 13:22:26.713:WARN [web-server]: 404: /base/jspm_packages/npm/@angular/[email protected]/bundles/core-testing.umd.js/index.js
20 12 2016 13:22:26.714:WARN [web-server]: 404: /base/jspm_packages/npm/@angular/[email protected]/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/[email protected]/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/[email protected]/bundles/compiler-testing.umd.js/index.js
        at XMLHttpRequest.wrapFn [as _onreadystatechange] (/home/arend/Documents/Projects/Barco/opspace/barco-opspace/jspm_packages/npm/[email protected]/dist/zone.js:729:25) [<root>]
        at Zone.runTask (/home/arend/Documents/Projects/Barco/opspace/barco-opspace/jspm_packages/npm/[email protected]/dist/zone.js:135:41) [<root> => <root>]
        at XMLHttpRequest.ZoneTask.invoke (/home/arend/Documents/Projects/Barco/opspace/barco-opspace/jspm_packages/npm/[email protected]/dist/zone.js:285:27) [<root>]
    Error loading /home/arend/Documents/Projects/Barco/opspace/barco-opspace/jspm_packages/npm/@angular/[email protected]/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/[email protected]/testing.js

looking at "jspm_packages/npm/@angular/[email protected]/testing.js", we quickly found that it held the wrong information:

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

instead of the expected:

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

If I manually correct this, all works perfectly. So my question: How do we prevent JSPM or anyone from generating a wrong testing.js file?

Our idea is that, for some reason, jspm thinks the compiler-testing.umd.js file is a folder and so appends /index to it

*we included the angular files via config.js: *

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

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

Answer 1

After a long and extensive search and hours of comparison, I actually found the problem and the solution to all this:

• Problem: the angular2 examples all use the npm_modules and so they adapted the systemjs file to use the npm folder, however, we opt to use JSPM as this makes a clean cut between our backend/infrastructure and our frontend. Allowing us to, without having to change our configuration, add/remove/upgrade packages. Because angular2 modules are actually 2 modules in one, it caused JSPM to to funny things with this and thus, in the end, always tried to load the wrong file: e.g. "core-testing.umd.js/index" instead of just "core-testing.umd".
• Solution: finally I struck gold: update to jspm 0.17 (at the time of writing this is still in beta)

The new JSPM correctly detects the testing module as well and loading is now done correctly!