chore: remove angular testing libs from systemjs and update testing shims

CHANGELOG.md

+<a name="0.2.8"></a>
+# 0.2.8 (2016-09-01)
+* remove @angular test libraries from system.js (now in shim)
+* update test related files
+* wallaby doesn't completely work. Researching.
 <a name="0.2.7"></a>
 # 0.2.7 (2016-08-31)
 * Angular 2 RC6 version

karma-test-shim.js

+// #docregion
 // /*global jasmine, __karma__, window*/
-Error.stackTraceLimit = Infinity;
+Error.stackTraceLimit = 0; // "No stacktrace"" is usually best for app testing.
+
+// Uncomment to get full stacktrace output. Sometimes helpful, usually not.
+// Error.stackTraceLimit = Infinity; //
+
 jasmine.DEFAULT_TIMEOUT_INTERVAL = 1000;
 
-__karma__.loaded = function () {
-};
+var builtPath = '/base/app/';
+
+__karma__.loaded = function () { };
 
 function isJsFile(path) {
   return path.slice(-3) == '.js';
 }
 
 function isSpecFile(path) {
-  return /\.spec\.js$/.test(path);
+  return /\.spec\.(.*\.)?js$/.test(path);
 }
 
 function isBuiltFile(path) {
-  var builtPath = '/base/app/';
   return isJsFile(path) && (path.substr(0, builtPath.length) == builtPath);
 }
 
@@ -24,28 +29,61 @@ var allSpecFiles = Object.keys(window.__karma__.files)
 
 System.config({
   baseURL: '/base',
-  packageWithIndex: true // sadly, we can't use umd packages (yet?)
+  // Extend usual application package list with test folder
+  packages: { 'testing': { main: 'index.js', defaultExtension: 'js' } },
+
+  // Assume npm: is set in `paths` in systemjs.config
+  // Map the angular testing umd bundles
+  map: {
+    '@angular/core/testing': 'npm:@angular/core/bundles/core-testing.umd.js',
+    '@angular/common/testing': 'npm:@angular/common/bundles/common-testing.umd.js',
+    '@angular/compiler/testing': 'npm:@angular/compiler/bundles/compiler-testing.umd.js',
+    '@angular/platform-browser/testing': 'npm:@angular/platform-browser/bundles/platform-browser-testing.umd.js',
+    '@angular/platform-browser-dynamic/testing': 'npm:@angular/platform-browser-dynamic/bundles/platform-browser-dynamic-testing.umd.js',
+    '@angular/http/testing': 'npm:@angular/http/bundles/http-testing.umd.js',
+    '@angular/router/testing': 'npm:@angular/router/bundles/router-testing.umd.js',
+    '@angular/forms/testing': 'npm:@angular/forms/bundles/forms-testing.umd.js',
+  },
 });
 
 System.import('systemjs.config.js')
-  .then(() => Promise.all([
-      System.import('@angular/core/testing'),
-      System.import('@angular/platform-browser-dynamic/testing')
-    ]))
-  .then((providers) => {
-    var coreTesting = providers[0];
+  .then(importSystemJsExtras)
+  .then(initTestBed)
+  .then(initTesting);
+
+/** Optional SystemJS configuration extras. Keep going w/o it */
+function importSystemJsExtras(){
+  return System.import('systemjs.config.extras.js')
+  .catch(function(reason) {
+    console.log(
+      'WARNING: System.import could not load "systemjs.config.extras.js"; continuing without it.'
+    );
+    console.log(reason);
+  });
+}
+
+function initTestBed(){
+  return Promise.all([
+    System.import('@angular/core/testing'),
+    System.import('@angular/platform-browser-dynamic/testing')
+  ])
+
+  .then(function (providers) {
+    var coreTesting    = providers[0];
     var browserTesting = providers[1];
-    coreTesting.TestBed.initTestEnvironment(
-            browserTesting.BrowserDynamicTestingModule,
-            browserTesting.platformBrowserDynamicTesting());
 
+    coreTesting.TestBed.initTestEnvironment(
+      browserTesting.BrowserDynamicTestingModule,
+      browserTesting.platformBrowserDynamicTesting());
   })
-  .then(function () {
-  // Finally, load all spec files.
-  // This will run the tests directly.
+}
+
+// Import all spec files and start karma
+function initTesting () {
   return Promise.all(
     allSpecFiles.map(function (moduleName) {
       return System.import(moduleName);
-    }));
-  })
+    })
+  )
   .then(__karma__.start, __karma__.error);
+}

karma.conf.js

+// #docregion
 module.exports = function(config) {
 
-  var appBase   = 'app/';      // transpiled app JS files
-  var appAssets ='/base/app/'; // component assets fetched by Angular's compiler
+  var appBase    = 'app/';       // transpiled app JS and map files
+  var appSrcBase = 'app/';       // app source TS files
+  var appAssets  = '/base/app/'; // component assets fetched by Angular's compiler
+
+  var testBase    = 'testing/';       // transpiled test JS and map files
+  var testSrcBase = 'testing/';       // test source TS files
 
   config.set({
     basePath: '',
@@ -26,9 +31,9 @@ module.exports = function(config) {
 
       // Polyfills
       'node_modules/core-js/client/shim.js',
-
-      // Reflect and Zone.js
       'node_modules/reflect-metadata/Reflect.js',
+
+      // zone.js
       'node_modules/zone.js/dist/zone.js',
       'node_modules/zone.js/dist/long-stack-trace-zone.js',
       'node_modules/zone.js/dist/proxy.js',
@@ -37,31 +42,37 @@ module.exports = function(config) {
       'node_modules/zone.js/dist/async-test.js',
       'node_modules/zone.js/dist/fake-async-test.js',
 
-      // RxJs.
+      // RxJs
       { pattern: 'node_modules/rxjs/**/*.js', included: false, watched: false },
       { pattern: 'node_modules/rxjs/**/*.js.map', included: false, watched: false },
 
-      // Angular 2 itself and the testing library
+      // Paths loaded via module imports:
+      // Angular itself
       {pattern: 'node_modules/@angular/**/*.js', included: false, watched: false},
       {pattern: 'node_modules/@angular/**/*.js.map', included: false, watched: false},
 
       {pattern: 'systemjs.config.js', included: false, watched: false},
+      {pattern: 'systemjs.config.extras.js', included: false, watched: false},
       'karma-test-shim.js',
 
       // transpiled application & spec code paths loaded via module imports
       {pattern: appBase + '**/*.js', included: false, watched: true},
+      {pattern: testBase + '**/*.js', included: false, watched: true},
+
 
-      // asset (HTML & CSS) paths loaded via Angular's component compiler
+      // Asset (HTML & CSS) paths loaded via Angular's component compiler
       // (these paths need to be rewritten, see proxies section)
       {pattern: appBase + '**/*.html', included: false, watched: true},
       {pattern: appBase + '**/*.css', included: false, watched: true},
 
-      // paths for debugging with source maps in dev tools
-      {pattern: appBase + '**/*.ts', included: false, watched: false},
-      {pattern: appBase + '**/*.js.map', included: false, watched: false}
+      // Paths for debugging with source maps in dev tools
+      {pattern: appSrcBase + '**/*.ts', included: false, watched: false},
+      {pattern: appBase + '**/*.js.map', included: false, watched: false},
+      {pattern: testSrcBase + '**/*.ts', included: false, watched: false},
+      {pattern: testBase + '**/*.js.map', included: false, watched: false}
     ],
 
-    // proxied base paths for loading assets
+    // Proxied base paths for loading assets
     proxies: {
       // required for component assets fetched by Angular's compiler
       "/app/": appAssets

systemjs.config.js

@@ -23,18 +23,8 @@
       '@angular/router': 'npm:@angular/router/bundles/router.umd.js',
       '@angular/forms': 'npm:@angular/forms/bundles/forms.umd.js',
 
-      // angular testing umd bundles
-      '@angular/core/testing': 'npm:@angular/core/bundles/core-testing.umd.js',
-      '@angular/common/testing': 'npm:@angular/common/bundles/common-testing.umd.js',
-      '@angular/compiler/testing': 'npm:@angular/compiler/bundles/compiler-testing.umd.js',
-      '@angular/platform-browser/testing': 'npm:@angular/platform-browser/bundles/platform-browser-testing.umd.js',
-      '@angular/platform-browser-dynamic/testing': 'npm:@angular/platform-browser-dynamic/bundles/platform-browser-dynamic-testing.umd.js',
-      '@angular/http/testing': 'npm:@angular/http/bundles/http-testing.umd.js',
-      '@angular/router/testing': 'npm:@angular/router/bundles/router-testing.umd.js',
-      '@angular/forms/testing': 'npm:@angular/forms/bundles/forms-testing.umd.js',
-
       // other libraries
-      'rxjs': 'npm:rxjs',
+      'rxjs':                       'npm:rxjs',
       'angular2-in-memory-web-api': 'npm:angular2-in-memory-web-api',
     },
     // packages tells the System loader how to load when no filename and/or no extension

wallaby.js

@@ -3,26 +3,31 @@
 // Note: Wallaby is not open source and costs money
 
 module.exports = function () {
-
   return {
     files: [
       // System.js for module loading
       {pattern: 'node_modules/systemjs/dist/system.js', instrument: false},
       {pattern: 'systemjs.config.js', instrument: false},
+      {pattern: 'systemjs.config.extras.js', instrument: false},
 
       // Polyfills
       {pattern: 'node_modules/core-js/client/shim.min.js', instrument: false},
-
-      // Reflect, Zone.js, and test shims
-      // Rx.js, Angular 2 itself, and the testing library not here because loaded by systemjs
       {pattern: 'node_modules/reflect-metadata/Reflect.js', instrument: false},
+
+      // zone.js
       {pattern: 'node_modules/zone.js/dist/zone.js', instrument: false},
+      {pattern: 'node_modules/zone.js/dist/long-stack-trace-zone.js', instrument: false},
+      {pattern: 'node_modules/zone.js/dist/proxy.js', instrument: false},
+      {pattern: 'node_modules/zone.js/dist/sync-test.js', instrument: false},
       {pattern: 'node_modules/zone.js/dist/jasmine-patch.js', instrument: false},
       {pattern: 'node_modules/zone.js/dist/async-test.js', instrument: false},
       {pattern: 'node_modules/zone.js/dist/fake-async-test.js', instrument: false},
 
+      // application (but not specs) loaded via module imports
       {pattern: 'app/**/*+(ts|html|css)', load: false},
-      {pattern: 'app/**/*.spec.ts', ignore: true}
+      {pattern: 'app/**/*.spec.ts', ignore: true},
+
+      {pattern: 'testing/**/*+(ts|html|css)', load: false},
     ],
 
     tests: [
@@ -37,41 +42,78 @@ module.exports = function () {
 
     debug: true,
 
-    bootstrap: function (wallaby) {
-      wallaby.delayStart();
-
-      System.config({
-        packageWithIndex: true // sadly, we can't use umd packages (yet?)
-      });
-
-      System.import('systemjs.config.js')
-        .then(function () {
-          return Promise.all([
-            System.import('@angular/core/testing'),
-            System.import('@angular/platform-browser-dynamic/testing')
-          ])
-        })
-        .then(function (providers) {
-          var testing = providers[0];
-          var testingBrowser = providers[1];
-
-          testing.setBaseTestProviders(
-            testingBrowser.TEST_BROWSER_DYNAMIC_PLATFORM_PROVIDERS,
-            testingBrowser.TEST_BROWSER_DYNAMIC_APPLICATION_PROVIDERS);
-
-          // Load all spec files
-          return Promise.all(wallaby.tests.map(function (specFile) {
-            return System.import(specFile);
-          }));
-        })
-        .then(function () {
-          wallaby.start();
-        })
-        .catch(function (e) {
-          setTimeout(function () {
-            throw e;
-          }, 0);
-        });
-    }
+    bootstrap: bootstrap
   };
 };
+
+// Like karma-test-shim.js
+function bootstrap (wallaby) {
+  wallaby.delayStart();
+
+  System.config({
+    // Extend usual application package list with test folder
+    packages: { 'testing': { main: 'index.js', defaultExtension: 'js' } },
+
+    // Assume npm: is set in `paths` in systemjs.config
+    // Map the angular testing umd bundles
+    map: {
+      '@angular/core/testing': 'npm:@angular/core/bundles/core-testing.umd.js',
+      '@angular/common/testing': 'npm:@angular/common/bundles/common-testing.umd.js',
+      '@angular/compiler/testing': 'npm:@angular/compiler/bundles/compiler-testing.umd.js',
+      '@angular/platform-browser/testing': 'npm:@angular/platform-browser/bundles/platform-browser-testing.umd.js',
+      '@angular/platform-browser-dynamic/testing': 'npm:@angular/platform-browser-dynamic/bundles/platform-browser-dynamic-testing.umd.js',
+      '@angular/http/testing': 'npm:@angular/http/bundles/http-testing.umd.js',
+      '@angular/router/testing': 'npm:@angular/router/bundles/router-testing.umd.js',
+      '@angular/forms/testing': 'npm:@angular/forms/bundles/forms-testing.umd.js',
+    },
+  });
+
+  System.import('systemjs.config.js')
+    .then(importSystemJsExtras)
+    .then(initTestBed)
+    .then(initTesting);
+
+  /** Optional SystemJS configuration extras. Keep going w/o it */
+  function importSystemJsExtras(){
+    return System.import('systemjs.config.extras.js')
+    .catch(function(reason) {
+      console.log(
+        'WARNING: System.import could not load "systemjs.config.extras.js"; continuing without it.'
+      );
+      console.log(reason);
+    });
+  }
+
+  function initTestBed(){
+    return Promise.all([
+      System.import('@angular/core/testing'),
+      System.import('@angular/platform-browser-dynamic/testing')
+    ])
+
+    .then(function (providers) {
+      var coreTesting    = providers[0];
+      var browserTesting = providers[1];
+
+      coreTesting.TestBed.initTestEnvironment(
+        browserTesting.BrowserDynamicTestingModule,
+        browserTesting.platformBrowserDynamicTesting());
+    })
+  }
+
+  // Load all spec files and start wallaby
+  function initTesting () {
+    return Promise.all(
+      wallaby.tests.map(function (specFile) {
+        return System.import(specFile);
+      })
+    )
+    .then(function () {
+      wallaby.start();
+    })
+    .catch(function (e) {
+      setTimeout(function () {
+        throw e;
+      }, 0);
+    });
+  }
+}