docs(testing): update samples & test config to RC1

public/docs/_examples/karma-test-shim.js

@@ -1,90 +1,93 @@
-/*global jasmine, __karma__, window*/
+// /*global jasmine, __karma__, window*/
-(function () {
+Error.stackTraceLimit = Infinity;
-
-// Error.stackTraceLimit = Infinity;
-
 jasmine.DEFAULT_TIMEOUT_INTERVAL = 1000;
 
-// Cancel Karma's synchronous start,
+__karma__.loaded = function () {
-// we call `__karma__.start()` later, once all the specs are loaded.
+};
-__karma__.loaded = function () { };
 
-// SET THE RUNTIME APPLICATION ROOT HERE
+function isJsFile(path) {
-var appRoot ='app'; // no trailing slash!
+  return path.slice(-3) == '.js';
-
-// RegExp for client application base path within karma (which always starts 'base\')
-var karmaBase = '^\/base\/'; // RegEx string for base of karma folders
-var appPackage = 'base/' + appRoot; //e.g., base/app
-var appRootRe = new RegExp(karmaBase + appRoot + '\/');
-var onlyAppFilesRe = new RegExp(karmaBase + appRoot + '\/(?!.*\.spec\.js$)([a-z0-9-_\.\/]+)\.js$');
-
-var moduleNames = [];
-
-// Configure systemjs packages to use the .js extension for imports from the app folder
-var packages = {};
-packages[appPackage] = {
-    defaultExtension: false,
-    format: 'register',
-    map: Object.keys(window.__karma__.files)
-      .filter(onlyAppFiles)
-      // Create local module name mapping to karma file path for app files
-      // with karma's fingerprint in query string, e.g.:
-      // './hero.service': '/base/app/hero.service.js?f4523daf879cfb7310ef6242682ccf10b2041b3e'
-      .reduce(function (pathsMapping, appPath) {
-        var moduleName = appPath.replace(appRootRe, './').replace(/\.js$/, '');
-        pathsMapping[moduleName] = appPath + '?' + window.__karma__.files[appPath];
-        return pathsMapping;
-      }, {})
 }
 
-System.config({ packages: packages });
+function isSpecFile(path) {
+  return /\.spec\.js$/.test(path);
+}
+
+function isBuiltFile(path) {
+  var builtPath = '/base/app/';
+  return isJsFile(path) && (path.substr(0, builtPath.length) == builtPath);
+}
+
+var allSpecFiles = Object.keys(window.__karma__.files)
+  .filter(isSpecFile)
+  .filter(isBuiltFile);
+
+//////////////////////////
+// Load our SystemJS configuration.
+
+// map tells the System loader where to look for things
+var map = {
+  'app':                        'app',
+
+  '@angular':                   'node_modules/@angular',
+  'angular2-in-memory-web-api': 'node_modules/angular2-in-memory-web-api',
+  'rxjs':                       'node_modules/rxjs'
+};
+
+// packages tells the System loader how to load when no filename and/or no extension
+var packages = {
+  'app':                        { main: 'main.js',  defaultExtension: 'js' },
+  'rxjs':                       { defaultExtension: 'js' },
+  'angular2-in-memory-web-api': { defaultExtension: 'js' },
+};
+
+var ngPackageNames = [
+  'common',
+  'compiler',
+  'core',
+  'http',
+  'platform-browser',
+  'platform-browser-dynamic',
+  'router',
+  'router-deprecated',
+  'upgrade',
+];
+
+// Add package entries for angular packages
+ngPackageNames.forEach(function(pkgName) {
+
+  // Bundled (~40 requests):  DOESN'T WORK IN KARMA OR WALLABY (YET?)
+  //packages['@angular/'+pkgName] = { main: pkgName + '.umd.js', defaultExtension: 'js' };
+
+  // Individual files (~300 requests):
+  packages['@angular/'+pkgName] = { main: 'index.js', defaultExtension: 'js' };
+});
+
+var config = {
+  baseURL: '/base',
+  map: map,
+  packages: packages
+}
+
+System.config(config);
+//////////////
 
-// Configure Angular for the browser and
-// with test versions of the platform providers
 Promise.all([
-    System.import('angular2/testing'),
+  System.import('@angular/core/testing'),
-    System.import('angular2/platform/testing/browser')
+  System.import('@angular/platform-browser-dynamic/testing')
-  ])
+]).then(function (providers) {
-  .then(function (results) {
+  var testing = providers[0];
-    var testing = results[0];
+  var testingBrowser = providers[1];
-    var browser = results[1];
-    testing.setBaseTestProviders(
-      browser.TEST_BROWSER_PLATFORM_PROVIDERS,
-      browser.TEST_BROWSER_APPLICATION_PROVIDERS);
 
-    // Load all spec files
+  testing.setBaseTestProviders(
-    // (e.g. 'base/app/hero.service.spec.js')
+    testingBrowser.TEST_BROWSER_DYNAMIC_PLATFORM_PROVIDERS,
+    testingBrowser.TEST_BROWSER_DYNAMIC_APPLICATION_PROVIDERS);
+
+}).then(function() {
+  // Finally, load all spec files.
+  // This will run the tests directly.
   return Promise.all(
-      Object.keys(window.__karma__.files)
+    allSpecFiles.map(function (moduleName) {
-        .filter(onlySpecFiles)
-        .map(function (moduleName) {
-          moduleNames.push(moduleName);
       return System.import(moduleName);
     }));
-  })
+}).then(__karma__.start, __karma__.error);
-
-  .then(success, fail);
-
-////// Helpers //////
-
-function onlyAppFiles(filePath) {
-  return onlyAppFilesRe.test(filePath);
-}
-
-function onlySpecFiles(filePath) {
-  return /\.spec\.js$/.test(filePath);
-}
-
-function success () {
-  console.log(
-    'Spec files loaded:\n  ' +
-    moduleNames.join('\n  ') +
-    '\nStarting Jasmine testrunner');
-  __karma__.start();
-}
-
-function fail(error) {
-  __karma__.error(error.stack || error);
-}
-
-})();

public/docs/_examples/karma.conf.js

@@ -21,34 +21,30 @@ module.exports = function(config) {
       }
     },
     files: [
-      // Polyfills.
+      // System.js for module loading
-      'node_modules/code-js/client/shim.min.js',
+      'node_modules/systemjs/dist/system.src.js',
 
-      // Zone.js dependencies
+      // Polyfills
-      // Note - do not include zone.js itself here, it is already
+      'node_modules/core-js/client/shim.js',
-      // included in angular2-polyfills
+
+      // Reflect and Zone.js
+      'node_modules/reflect-metadata/Reflect.js',
       'node_modules/zone.js/dist/zone.js',
       'node_modules/zone.js/dist/jasmine-patch.js',
       'node_modules/zone.js/dist/async-test.js',
       'node_modules/zone.js/dist/fake-async-test.js',
 
-      { pattern: 'node_modules/reflect-metadata/Reflect.js', included: true, watched: false },
-      { pattern: 'https://code.angularjs.org/tools/system.js', included: true, watched: false },
-
       // RxJs.
       { pattern: 'node_modules/rxjs/**/*.js', included: false, watched: false },
       { pattern: 'node_modules/rxjs/**/*.js.map', included: false, watched: false },
 
-      {pattern: 'karma-test-shim.js', included: true, watched: true},
+      // Angular 2 itself and the testing library
-      {pattern: 'built/test/matchers.js', included: true, watched: true},
+      {pattern: 'node_modules/@angular/**/*.js', included: false, watched: false},
+      {pattern: 'node_modules/@angular/**/*.js.map', included: false, watched: false},
 
-      // paths loaded via module imports
+      'karma-test-shim.js',
-      {pattern: 'built/**/*.js', included: false, watched: true},
 
-      {pattern: 'node_modules/@angular/**/*.js', included: false, watched: true},
+      // transpiled application & spec code paths loaded via module imports
-      {pattern: 'node_modules/@angular/**/*.js.map', included: false, watched: true},
-
-      // transpiled application & spec code paths to be loaded via module imports
       {pattern: appBase + '**/*.js', included: false, watched: true},
 
       // asset (HTML & CSS) paths loaded via Angular's component compiler

public/docs/_examples/testing/ts/app/app.component.spec.ts

@@ -8,8 +8,10 @@ import {
   beforeEach, beforeEachProviders,
   describe, ddescribe, xdescribe,
   expect, it, iit, xit,
-  async, inject, ComponentFixture, TestComponentBuilder
+  async, inject
-} from '@angular/testing';
+} from '@angular/core/testing';
+
+import { ComponentFixture, TestComponentBuilder } from '@angular/compiler/testing';
 
 import { Hero, HeroService, MockHeroService } from './mock-hero.service';
 
@@ -18,7 +20,7 @@ import { Router,       MockRouter,
          RouterOutlet, MockRouterOutlet} from './mock-router';
 
 describe('AppComponent', () => {
-  let fixture: ComponentFixture;
+  let fixture: ComponentFixture<AppComponent>;
   let comp:    AppComponent;
 
   beforeEach(async(inject([TestComponentBuilder], (tcb: TestComponentBuilder) => {

public/docs/_examples/testing/ts/app/app.component.ts

@@ -3,10 +3,10 @@
 import { Component } from '@angular/core';
 
 // Can't test with ROUTER_DIRECTIVES yet
-// import { RouteConfig, ROUTER_DIRECTIVES, ROUTER_PROVIDERS } from '@angular/router';
+// import { RouteConfig, ROUTER_DIRECTIVES, ROUTER_PROVIDERS } from '@angular/router-deprecated';
 
 import { RouteConfig, RouterLink,
-         RouterOutlet, ROUTER_PROVIDERS } from '@angular/router';
+         RouterOutlet, ROUTER_PROVIDERS } from '@angular/router-deprecated';
 
 import { DashboardComponent }  from './dashboard.component';
 import { HeroesComponent }     from './heroes.component';

public/docs/_examples/testing/ts/app/bad-tests.spec.ts

@@ -19,12 +19,13 @@ import { DebugElement } from '@angular/core';
 import { By }           from '@angular/platform-browser';
 
 import {
-  beforeEach, beforeEachProviders, withProviders,
+  beforeEach, beforeEachProviders,
   describe, ddescribe, xdescribe,
   expect, it, iit, xit,
-  async, inject, fakeAsync, tick,
+  async, inject
-  ComponentFixture, TestComponentBuilder
+} from '@angular/core/testing';
-} from '@angular/testing';
+
+import { ComponentFixture, TestComponentBuilder } from '@angular/compiler/testing';
 
 import { provide }        from '@angular/core';
 import { ViewMetadata }   from '@angular/core';
@@ -90,7 +91,7 @@ xdescribe('async & inject testing errors', () => {
     let itPromise = patchJasmineIt();
 
     it('should fail with an error from a promise', async(() => {
-      return Promise.reject('baz')
+      return Promise.reject('baz');
     }));
 
     itPromise.then(

public/docs/_examples/testing/ts/app/bag.spec.ts

@@ -16,12 +16,14 @@ import { DebugElement } from '@angular/core';
 import { By }           from '@angular/platform-browser';
 
 import {
-  beforeEach, beforeEachProviders, withProviders,
+  beforeEach, beforeEachProviders,
   describe, ddescribe, xdescribe,
   expect, it, iit, xit,
-  async, inject, fakeAsync, tick,
+  async, inject,
-  ComponentFixture, TestComponentBuilder
+  fakeAsync, tick, withProviders
-} from '@angular/testing';
+} from '@angular/core/testing';
+
+import { ComponentFixture, TestComponentBuilder } from '@angular/compiler/testing';
 
 import { provide }        from '@angular/core';
 import { ViewMetadata }   from '@angular/core';
@@ -349,7 +351,7 @@ describe('test component builder', function() {
       })), 10000);  // Long timeout because this test makes an actual XHR.
 
     describe('(lifecycle hooks w/ MyIfParentComp)', () => {
-      let fixture: ComponentFixture;
+      let fixture: ComponentFixture<MyIfParentComp>;
       let parent:  MyIfParentComp;
       let child:   MyIfChildComp;
 

public/docs/_examples/testing/ts/app/dashboard.component.spec.ts

@@ -8,8 +8,10 @@ import {
   beforeEach, beforeEachProviders,
   describe, ddescribe, xdescribe,
   expect, it, iit, xit,
-  async, inject, TestComponentBuilder
+  async, inject
-} from '@angular/testing';
+} from '@angular/core/testing';
+
+import { ComponentFixture, TestComponentBuilder } from '@angular/compiler/testing';
 
 import { Hero, HeroService, MockHeroService } from './mock-hero.service';
 import { Router, MockRouter } from './mock-router';

public/docs/_examples/testing/ts/app/dashboard.component.ts

@@ -2,7 +2,7 @@
 // #docregion
 import { Component, OnInit } from '@angular/core';
 // #docregion import-router
-import { Router } from '@angular/router';
+import { Router } from '@angular/router-deprecated';
 // #enddocregion import-router
 
 import { Hero } from './hero';

public/docs/_examples/testing/ts/app/hero-detail.component.ts

@@ -5,7 +5,7 @@
 import { Component, OnInit } from '@angular/core';
 // #enddocregion import-oninit
 // #docregion import-route-params
-import {RouteParams} from '@angular/router';
+import {RouteParams} from '@angular/router-deprecated';
 // #enddocregion import-route-params
 
 import { Hero } from './hero';

public/docs/_examples/testing/ts/app/heroes.component.ts

@@ -1,7 +1,7 @@
 // #docplaster
 // #docregion
 import { Component, OnInit } from '@angular/core';
-import { Router } from '@angular/router';
+import { Router } from '@angular/router-deprecated';
 
 import { Hero } from './hero';
 import { HeroDetailComponent } from './hero-detail.component';

public/docs/_examples/testing/ts/app/http-hero.service.spec.ts

@@ -1,10 +1,12 @@
 /* tslint:disable:no-unused-variable */
 import {
-  beforeEach, beforeEachProviders, withProviders,
+  beforeEach, beforeEachProviders,
   describe, ddescribe, xdescribe,
   expect, it, iit, xit,
-  async, inject, TestComponentBuilder
+  async, inject, withProviders
-} from '@angular/testing';
+} from '@angular/core/testing';
+
+import { TestComponentBuilder } from '@angular/compiler/testing';
 
 import { provide } from '@angular/core';
 

public/docs/_examples/testing/ts/app/mock-router.ts

@@ -1,10 +1,10 @@
-export * from '@angular/router';
+export * from '@angular/router-deprecated';
 
 import { Directive, DynamicComponentLoader, ViewContainerRef,
          Injectable, Optional, Input } from '@angular/core';
 
 import { ComponentInstruction, Instruction,
-         Router, RouterOutlet} from '@angular/router';
+         Router, RouterOutlet} from '@angular/router-deprecated';
 
 let _resolveToTrue = Promise.resolve(true);
 

public/docs/_examples/wallaby.js

@@ -1,27 +1,25 @@
 // Configuration for the Wallaby Visual Studio Code testing extension
 // https://marketplace.visualstudio.com/items?itemName=WallabyJs.wallaby-vscode
 // 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-polyfills.js', instrument: false},
       {pattern: 'node_modules/systemjs/dist/system.js', instrument: false},
 
       // Polyfills
-      {pattern: 'node_modules/code-js/client/shim.min.js', instrument: false},
+      {pattern: 'node_modules/core-js/client/shim.min.js', instrument: false},
-      {pattern: 'node_modules/angular2/bundles/angular2-polyfills.js', instrument: false},
 
-      // Zone.js dependencies
+      // Reflect, Zone.js, and test shims
-      // Note - do not include zone.js itself or long-stack-trace-zone.js` here as
+      // Rx.js, Angular 2 itself, and the testing library not here because loaded by systemjs
-      // they are included already in angular2-polyfills
+      {pattern: 'node_modules/reflect-metadata/Reflect.js', instrument: false},
+      {pattern: 'node_modules/zone.js/dist/zone.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},
 
-     // Rx.js, Angular 2 itself, and the testing library not here because loaded by systemjs
-
       {pattern: 'app/**/*+(ts|html|css)', load: false},
       {pattern: 'app/**/*.spec.ts', ignore: true}
     ],
@@ -36,41 +34,24 @@ module.exports = function () {
 
     testFramework: 'jasmine',
 
+    debug: true,
+
     bootstrap: function (wallaby) {
       wallaby.delayStart();
+      systemConfig();
 
-      System.config({
-        defaultJSExtensions: true,
-        packages: {
-          app: {
-            meta: {
-              '*': {
-                scriptLoad: true
-              }
-            }
-          }
-        },
-        paths: {
-          'npm:*': 'node_modules/*'
-        },
-        map: {
-          'angular2': 'npm:angular2',
-          'rxjs': 'npm:rxjs'
-        }
-      });
-
-      // Configure Angular for the browser and
-      // with test versions of the platform providers
       Promise.all([
-        System.import('angular2/testing'),
+        System.import('@angular/core/testing'),
-        System.import('angular2/platform/testing/browser')
+        System.import('@angular/platform-browser-dynamic/testing')
       ])
-      .then(function (results) {
+      .then(function (providers) {
-        var testing = results[0];
+        var testing = providers[0];
-        var browser = results[1];
+        var testingBrowser = providers[1];
+
         testing.setBaseTestProviders(
-          browser.TEST_BROWSER_PLATFORM_PROVIDERS,
+          testingBrowser.TEST_BROWSER_DYNAMIC_PLATFORM_PROVIDERS,
-          browser.TEST_BROWSER_APPLICATION_PROVIDERS);
+          testingBrowser.TEST_BROWSER_DYNAMIC_APPLICATION_PROVIDERS);
+
 
         // Load all spec files
         return Promise.all(wallaby.tests.map(function (specFile) {
@@ -85,8 +66,58 @@ module.exports = function () {
           throw e;
         }, 0);
       });
-    },
 
-    debug: true
+      //////////////////////////
+      // SystemJS configuration.
+      function systemConfig() {
+
+        // map tells the System loader where to look for things
+        var map = {
+          'app':                        'app',
+
+          '@angular':                   'node_modules/@angular',
+          'angular2-in-memory-web-api': 'node_modules/angular2-in-memory-web-api',
+          'rxjs':                       'node_modules/rxjs'
         };
+
+        // packages tells the System loader how to load when no filename and/or no extension
+        var packages = {
+          'app':                        { main: 'main.js',  defaultExtension: 'js' },
+          'rxjs':                       { defaultExtension: 'js' },
+          'angular2-in-memory-web-api': { defaultExtension: 'js' },
+        };
+
+        var ngPackageNames = [
+          'common',
+          'compiler',
+          'core',
+          'http',
+          'platform-browser',
+          'platform-browser-dynamic',
+          'router',
+          'router-deprecated',
+          'upgrade',
+        ];
+
+        // Add package entries for angular packages
+        ngPackageNames.forEach(function(pkgName) {
+
+          // Bundled (~40 requests):  DOESN'T WORK IN WALLABY OR KARMA (YET?)
+          // packages['@angular/'+pkgName] = { main: pkgName + '.umd.js', defaultExtension: 'js' };
+
+          // Individual files (~300 requests):
+          packages['@angular/'+pkgName] = { main: 'index.js', defaultExtension: 'js' };
+        });
+
+        var config = {
+          map: map,
+          packages: packages
+        }
+
+        System.config(config);
+      }
+      //////////////////
+    }
+  };
+
 };