docs(aio): update migrated content from anguar.io

aio/content/examples/testing/karma-test-shim.js

@@ -0,0 +1,96 @@
+// #docregion
+// /*global jasmine, __karma__, window*/
+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;
+
+// builtPaths: root paths for output ("built") files
+// get from karma.config.js, then prefix with '/src/' (default is 'app/')
+var builtPaths = (__karma__.config.builtPaths || ['src/'])
+                 .map(function(p) { return '/base/'+p;});
+
+__karma__.loaded = function () { };
+
+function isJsFile(path) {
+  return path.slice(-3) == '.js';
+}
+
+function isSpecFile(path) {
+  return /\.spec\.(.*\.)?js$/.test(path);
+}
+
+// Is a "built" file if is JavaScript file in one of the "built" folders
+function isBuiltFile(path) {
+  return isJsFile(path) &&
+         builtPaths.reduce(function(keep, bp) {
+           return keep || (path.substr(0, bp.length) === bp);
+         }, false);
+}
+
+var allSpecFiles = Object.keys(window.__karma__.files)
+  .filter(isSpecFile)
+  .filter(isBuiltFile);
+
+System.config({
+  baseURL: 'base/src',
+  // Extend usual application package list with testing 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 the optional "systemjs.config.extras.js". Did you omit it by accident? 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());
+  })
+}
+
+// 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);
+}

aio/content/examples/testing/karma.conf.js

@@ -0,0 +1,98 @@
+// #docregion
+module.exports = function(config) {
+
+  var appBase    = 'src/';       // transpiled app JS and map files
+  var appAssets  = '/base/app/'; // component assets fetched by Angular's compiler
+
+  // Testing helpers (optional) are conventionally in a folder called `testing`
+  var testingBase    = 'src/testing/'; // transpiled test JS and map files
+  var testingSrcBase = 'src/testing/'; // test source TS files
+
+  config.set({
+    basePath: '',
+    frameworks: ['jasmine'],
+
+    plugins: [
+      require('karma-jasmine'),
+      require('karma-chrome-launcher'),
+      require('karma-jasmine-html-reporter')
+    ],
+
+    client: {
+      builtPaths: [appBase, testingBase], // add more spec base paths as needed
+      clearContext: false // leave Jasmine Spec Runner output visible in browser
+    },
+
+    customLaunchers: {
+      // From the CLI. Not used here but interesting
+      // chrome setup for travis CI using chromium
+      Chrome_travis_ci: {
+        base: 'Chrome',
+        flags: ['--no-sandbox']
+      }
+    },
+
+    files: [
+      // System.js for module loading
+      'node_modules/systemjs/dist/system.src.js',
+
+      // Polyfills
+      'node_modules/core-js/client/shim.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',
+      'node_modules/zone.js/dist/sync-test.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',
+
+      // RxJs
+      { pattern: 'node_modules/rxjs/**/*.js', included: false, watched: false },
+      { pattern: 'node_modules/rxjs/**/*.js.map', included: false, watched: false },
+
+      // 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: appBase + '/systemjs.config.js', included: false, watched: false },
+      { pattern: appBase + '/systemjs.config.extras.js', included: false, watched: false },
+      'karma-test-shim.js', // optionally extend SystemJS mapping e.g., with barrels
+
+      // transpiled application & spec code paths loaded via module imports
+      { pattern: appBase + '**/*.js', included: false, watched: true },
+      { pattern: testingBase + '**/*.js', included: false, watched: true },
+
+
+      // 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 },
+      { pattern: testingSrcBase + '**/*.ts', included: false, watched: false },
+      { pattern: testingBase + '**/*.js.map', included: false, watched: false}
+    ],
+
+    // Proxied base paths for loading assets
+    proxies: {
+      // required for modules fetched by SystemJS
+      '/base/src/node_modules/': '/base/node_modules/'
+    },
+
+    exclude: [],
+    preprocessors: {},
+    reporters: ['progress', 'kjhtml'],
+
+    port: 9876,
+    colors: true,
+    logLevel: config.LOG_INFO,
+    autoWatch: true,
+    browsers: ['Chrome'],
+    singleRun: false
+  })
+}

aio/content/examples/testing/src/app/app.component.router.spec.ts

@@ -1,5 +1,5 @@
 // For more examples:
-//   https://github.com/angular/angular/blob/master/packages/router/test/integration.spec.ts
+//   https://github.com/angular/angular/blob/master/modules/@angular/router/test/integration.spec.ts
 
 import { async, ComponentFixture, fakeAsync, TestBed, tick,
 } from '@angular/core/testing';

aio/content/examples/testing/src/app/app.component.ts

@@ -1,7 +1,6 @@
 // #docregion
 import { Component } from '@angular/core';
 @Component({
-  moduleId: module.id,
   selector: 'my-app',
   templateUrl: './app.component.html'
 })

aio/content/examples/testing/src/app/bag/bag.ts

@@ -249,7 +249,6 @@ export class TestViewProvidersComponent {
 }
 
 @Component({
-  moduleId: module.id,
   selector: 'external-template-comp',
   templateUrl: './bag-external-template.html'
 })
@@ -273,7 +272,6 @@ export class ExternalTemplateComponent implements OnInit {
 export class InnerCompWithExternalTemplateComponent { }
 
 @Component({
-  moduleId: module.id,
   selector: 'bad-template-comp',
   templateUrl: './non-existant.html'
 })

aio/content/examples/testing/src/app/banner.component.ts

@@ -2,7 +2,6 @@
 import { Component } from '@angular/core';
 
 @Component({
-  moduleId: module.id,
   selector: 'app-banner',
   templateUrl: './banner.component.html',
   styleUrls:  ['./banner.component.css']

aio/content/examples/testing/src/app/dashboard/dashboard-hero.component.ts

@@ -5,7 +5,6 @@ import { Hero } from '../model';
 
 // #docregion component
 @Component({
-  moduleId: module.id,
   selector:    'dashboard-hero',
   templateUrl: './dashboard-hero.component.html',
   styleUrls: [ './dashboard-hero.component.css' ]

aio/content/examples/testing/src/app/dashboard/dashboard.component.ts

@@ -5,7 +5,6 @@ import { Router }            from '@angular/router';
 import { Hero, HeroService } from '../model';
 
 @Component({
-  moduleId: module.id,
   selector: 'app-dashboard',
   templateUrl: './dashboard.component.html',
   styleUrls: [ './dashboard.component.css' ]

aio/content/examples/testing/src/app/hero/hero-detail.component.ts

@@ -9,7 +9,6 @@ import { HeroDetailService } from './hero-detail.service';
 
 // #docregion prototype
 @Component({
-  moduleId: module.id,
   selector:    'app-hero-detail',
   templateUrl: './hero-detail.component.html',
   styleUrls:  ['./hero-detail.component.css' ],

aio/content/examples/testing/src/app/hero/hero-list.component.ts

@@ -4,7 +4,6 @@ import { Router }            from '@angular/router';
 import { Hero, HeroService } from '../model';
 
 @Component({
-  moduleId: module.id,
   selector: 'app-heroes',
   templateUrl: './hero-list.component.html',
   styleUrls: [ './hero-list.component.css' ]

aio/content/examples/testing/src/systemjs.config.extras.js

@@ -0,0 +1,9 @@
+// #docregion
+/** App specific SystemJS configuration */
+System.config({
+  packages: {
+    // barrels
+    'app/model': {main:'index.js', defaultExtension:'js'},
+    'app/model/testing': {main:'index.js', defaultExtension:'js'}
+  }
+});

aio/content/examples/testing/ts/1st-specs.plnkr.no-link.html

@@ -1,339 +0,0 @@
-<html lang="en"><head></head><body><form id="mainForm" method="post" action="http://plnkr.co/edit/?p=preview&amp;open=app/1st.spec.ts" target="_self"><input type="hidden" name="files[browser-test-shim.js]" value="// BROWSER TESTING SHIM
-// Keep it in-sync with what karma-test-shim does
-/*global jasmine, __karma__, window*/
-(function () {
-
-Error.stackTraceLimit = 0; // &quot;No stacktrace&quot;&quot; is usually best for app testing.
-
-// Uncomment to get full stacktrace output. Sometimes helpful, usually not.
-// Error.stackTraceLimit = Infinity; //
-
-jasmine.DEFAULT_TIMEOUT_INTERVAL = 3000;
-
-var baseURL = document.baseURI;
-baseURL = baseURL + baseURL[baseURL.length-1] ? '' : '/';
-
-System.config({
-  baseURL: baseURL,
-  // 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(
-      'Note: System.import could not load &quot;systemjs.config.extras.js&quot; where you might have added more configuration. It is an optional file so we will continue 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());
-  })
-}
-
-// Import all spec files defined in the html (__spec_files__)
-// and start Jasmine testrunner
-function initTesting () {
-  console.log('loading spec files: '+__spec_files__.join(', '));
-  return Promise.all(
-    __spec_files__.map(function(spec) {
-      return System.import(spec);
-    })
-  )
-  //  After all imports load,  re-execute `window.onload` which
-  //  triggers the Jasmine test-runner start or explain what went wrong
-  .then(success, console.error.bind(console));
-
-  function success () {
-    console.log('Spec files loaded; starting Jasmine testrunner');
-    window.onload();
-  }
-}
-
-})();
-
-
-/*
-Copyright 2016 Google Inc. All Rights Reserved.
-Use of this source code is governed by an MIT-style license that
-can be found in the LICENSE file at http://angular.io/license
-*/"><input type="hidden" name="files[styles.css]" value="/* Master Styles */
-h1 {
-  color: #369;
-  font-family: Arial, Helvetica, sans-serif;
-  font-size: 250%;
-}
-h2, h3 {
-  color: #444;
-  font-family: Arial, Helvetica, sans-serif;
-  font-weight: lighter;
-}
-body {
-  margin: 2em;
-}
-body, input[text], button {
-  color: #888;
-  font-family: Cambria, Georgia;
-}
-a {
-  cursor: pointer;
-  cursor: hand;
-}
-button {
-  font-family: Arial;
-  background-color: #eee;
-  border: none;
-  padding: 5px 10px;
-  border-radius: 4px;
-  cursor: pointer;
-  cursor: hand;
-}
-button:hover {
-  background-color: #cfd8dc;
-}
-button:disabled {
-  background-color: #eee;
-  color: #aaa;
-  cursor: auto;
-}
-
-/* Navigation link styles */
-nav a {
-  padding: 5px 10px;
-  text-decoration: none;
-  margin-right: 10px;
-  margin-top: 10px;
-  display: inline-block;
-  background-color: #eee;
-  border-radius: 4px;
-}
-nav a:visited, a:link {
-  color: #607D8B;
-}
-nav a:hover {
-  color: #039be5;
-  background-color: #CFD8DC;
-}
-nav a.active {
-  color: #039be5;
-}
-
-/* items class */
-.items {
-  margin: 0 0 2em 0;
-  list-style-type: none;
-  padding: 0;
-  width: 24em;
-}
-.items li {
-  cursor: pointer;
-  position: relative;
-  left: 0;
-  background-color: #EEE;
-  margin: .5em;
-  padding: .3em 0;
-  height: 1.6em;
-  border-radius: 4px;
-}
-.items li:hover {
-  color: #607D8B;
-  background-color: #DDD;
-  left: .1em;
-}
-.items li.selected {
-  background-color: #CFD8DC;
-  color: white;
-}
-.items li.selected:hover {
-  background-color: #BBD8DC;
-}
-.items .text {
-  position: relative;
-  top: -3px;
-}
-.items .badge {
-  display: inline-block;
-  font-size: small;
-  color: white;
-  padding: 0.8em 0.7em 0 0.7em;
-  background-color: #607D8B;
-  line-height: 1em;
-  position: relative;
-  left: -1px;
-  top: -4px;
-  height: 1.8em;
-  margin-right: .8em;
-  border-radius: 4px 0 0 4px;
-}
-/* everywhere else */
-* {
-  font-family: Arial, Helvetica, sans-serif;
-}
-
-
-/*
-Copyright 2016 Google Inc. All Rights Reserved.
-Use of this source code is governed by an MIT-style license that
-can be found in the LICENSE file at http://angular.io/license
-*/"><input type="hidden" name="files[app/1st.spec.ts]" value="describe('1st tests', () => {
-  it('true is true', () => expect(true).toBe(true));
-});
-
-
-/*
-Copyright 2016 Google Inc. All Rights Reserved.
-Use of this source code is governed by an MIT-style license that
-can be found in the LICENSE file at http://angular.io/license
-*/"><input type="hidden" name="files[index.html]" value="<!-- Run application specs in a browser -->
-<!DOCTYPE html>
-<html>
-<head>
-  <script>document.write('<base href=&quot;' + document.location + '&quot; />');</script>
-  <title>1st Specs</title>
-  <meta charset=&quot;UTF-8&quot;>
-  <meta name=&quot;viewport&quot; content=&quot;width=device-width, initial-scale=1&quot;>
-  <link rel=&quot;stylesheet&quot; href=&quot;styles.css&quot;>
-  <link rel=&quot;stylesheet&quot; href=&quot;https://cdnjs.cloudflare.com/ajax/libs/jasmine/2.4.1/jasmine.css&quot;>
-</head>
-<body>
-  <!-- Polyfills -->
-  <script src=&quot;https://unpkg.com/core-js/client/shim.min.js&quot;></script>
-
-  <script src=&quot;https://unpkg.com/systemjs@0.19.39/dist/system.src.js&quot;></script>
-
-  <script src=&quot;https://cdnjs.cloudflare.com/ajax/libs/jasmine/2.4.1/jasmine.js&quot;></script>
-  <script src=&quot;https://cdnjs.cloudflare.com/ajax/libs/jasmine/2.4.1/jasmine-html.js&quot;></script>
-  <script src=&quot;https://cdnjs.cloudflare.com/ajax/libs/jasmine/2.4.1/boot.js&quot;></script>
-
-  <script src=&quot;https://unpkg.com/zone.js@0.7.4?main=browser&quot;></script>
-  <script src=&quot;https://unpkg.com/zone.js/dist/long-stack-trace-zone.js?main=browser&quot;></script>
-  <script src=&quot;https://unpkg.com/zone.js/dist/proxy.js?main=browser&quot;></script>
-  <script src=&quot;https://unpkg.com/zone.js/dist/sync-test.js?main=browser&quot;></script>
-  <script src=&quot;https://unpkg.com/zone.js/dist/jasmine-patch.js?main=browser&quot;></script>
-  <script src=&quot;https://unpkg.com/zone.js/dist/async-test.js?main=browser&quot;></script>
-  <script src=&quot;https://unpkg.com/zone.js/dist/fake-async-test.js?main=browser&quot;></script>
-
-  <script>
-    var __spec_files__ = [
-      'app/1st.spec'
-    ];
-  </script>
-  <script src=&quot;browser-test-shim.js&quot;></script>
-</body>
-
-</html>
-
-
-<!-- 
-Copyright 2016 Google Inc. All Rights Reserved.
-Use of this source code is governed by an MIT-style license that
-can be found in the LICENSE file at http://angular.io/license
--->"><input type="hidden" name="tags[0]" value="angular"><input type="hidden" name="tags[1]" value="example"><input type="hidden" name="tags[2]" value="testing"><input type="hidden" name="private" value="true"><input type="hidden" name="description" value="Angular Example - Testing - 1st.specs"><input type="hidden" name="files[systemjs.config.js]" value="/**
- * WEB ANGULAR VERSION
- * (based on systemjs.config.js in angular.io)
- * System configuration for Angular samples
- * Adjust as necessary for your application needs.
- */
-(function (global) {
-  System.config({
-    // DEMO ONLY! REAL CODE SHOULD NOT TRANSPILE IN THE BROWSER
-    transpiler: 'ts',
-    typescriptOptions: {
-      // Copy of compiler options in standard tsconfig.json
-      &quot;target&quot;: &quot;es5&quot;,
-      &quot;module&quot;: &quot;commonjs&quot;,
-      &quot;moduleResolution&quot;: &quot;node&quot;,
-      &quot;sourceMap&quot;: true,
-      &quot;emitDecoratorMetadata&quot;: true,
-      &quot;experimentalDecorators&quot;: true,
-      &quot;lib&quot;: [&quot;es2015&quot;, &quot;dom&quot;],
-      &quot;noImplicitAny&quot;: true,
-      &quot;suppressImplicitAnyIndexErrors&quot;: true
-    },
-    meta: {
-      'typescript': {
-        &quot;exports&quot;: &quot;ts&quot;
-      }
-    },
-    paths: {
-      // paths serve as alias
-      'npm:': 'https://unpkg.com/'
-    },
-    // map tells the System loader where to look for things
-    map: {
-      // our app is within the app folder
-      app: 'app',
-
-      // angular bundles
-      '@angular/core': 'npm:@angular/core/bundles/core.umd.js',
-      '@angular/common': 'npm:@angular/common/bundles/common.umd.js',
-      '@angular/compiler': 'npm:@angular/compiler/bundles/compiler.umd.js',
-      '@angular/platform-browser': 'npm:@angular/platform-browser/bundles/platform-browser.umd.js',
-      '@angular/platform-browser-dynamic': 'npm:@angular/platform-browser-dynamic/bundles/platform-browser-dynamic.umd.js',
-      '@angular/http': 'npm:@angular/http/bundles/http.umd.js',
-      '@angular/router': 'npm:@angular/router/bundles/router.umd.js',
-      '@angular/router/upgrade': 'npm:@angular/router/bundles/router-upgrade.umd.js',
-      '@angular/forms': 'npm:@angular/forms/bundles/forms.umd.js',
-      '@angular/upgrade': 'npm:@angular/upgrade/bundles/upgrade.umd.js',
-      '@angular/upgrade/static': 'npm:@angular/upgrade/bundles/upgrade-static.umd.js',
-
-      // other libraries
-      'rxjs':                      'npm:rxjs@5.0.1',
-      'angular-in-memory-web-api': 'npm:angular-in-memory-web-api/bundles/in-memory-web-api.umd.js',
-      'ts':                        'npm:plugin-typescript@5.2.7/lib/plugin.js',
-      'typescript':                'npm:typescript@2.0.10/lib/typescript.js',
-
-    },
-    // packages tells the System loader how to load when no filename and/or no extension
-    packages: {
-      app: {
-        main: './main.ts',
-        defaultExtension: 'ts'
-      },
-      rxjs: {
-        defaultExtension: 'js'
-      }
-    }
-  });
-
-})(this);
-
-/*
-Copyright 2016 Google Inc. All Rights Reserved.
-Use of this source code is governed by an MIT-style license that
-can be found in the LICENSE file at http://angular.io/license
-*/
-"></form><script>document.getElementById("mainForm").submit();</script></body></html>

aio/content/examples/testing/ts/bag.plnkr.no-link.html

@@ -1,623 +0,0 @@
-<html lang="en"><head></head><body><form id="mainForm" method="post" action="http://plnkr.co/edit/?p=preview" target="_self"><input type="hidden" name="files[styles.css]" value="/* Master Styles */
-h1 {
-  color: #369;
-  font-family: Arial, Helvetica, sans-serif;
-  font-size: 250%;
-}
-h2, h3 {
-  color: #444;
-  font-family: Arial, Helvetica, sans-serif;
-  font-weight: lighter;
-}
-body {
-  margin: 2em;
-}
-body, input[text], button {
-  color: #888;
-  font-family: Cambria, Georgia;
-}
-a {
-  cursor: pointer;
-  cursor: hand;
-}
-button {
-  font-family: Arial;
-  background-color: #eee;
-  border: none;
-  padding: 5px 10px;
-  border-radius: 4px;
-  cursor: pointer;
-  cursor: hand;
-}
-button:hover {
-  background-color: #cfd8dc;
-}
-button:disabled {
-  background-color: #eee;
-  color: #aaa;
-  cursor: auto;
-}
-
-/* Navigation link styles */
-nav a {
-  padding: 5px 10px;
-  text-decoration: none;
-  margin-right: 10px;
-  margin-top: 10px;
-  display: inline-block;
-  background-color: #eee;
-  border-radius: 4px;
-}
-nav a:visited, a:link {
-  color: #607D8B;
-}
-nav a:hover {
-  color: #039be5;
-  background-color: #CFD8DC;
-}
-nav a.active {
-  color: #039be5;
-}
-
-/* items class */
-.items {
-  margin: 0 0 2em 0;
-  list-style-type: none;
-  padding: 0;
-  width: 24em;
-}
-.items li {
-  cursor: pointer;
-  position: relative;
-  left: 0;
-  background-color: #EEE;
-  margin: .5em;
-  padding: .3em 0;
-  height: 1.6em;
-  border-radius: 4px;
-}
-.items li:hover {
-  color: #607D8B;
-  background-color: #DDD;
-  left: .1em;
-}
-.items li.selected {
-  background-color: #CFD8DC;
-  color: white;
-}
-.items li.selected:hover {
-  background-color: #BBD8DC;
-}
-.items .text {
-  position: relative;
-  top: -3px;
-}
-.items .badge {
-  display: inline-block;
-  font-size: small;
-  color: white;
-  padding: 0.8em 0.7em 0 0.7em;
-  background-color: #607D8B;
-  line-height: 1em;
-  position: relative;
-  left: -1px;
-  top: -4px;
-  height: 1.8em;
-  margin-right: .8em;
-  border-radius: 4px 0 0 4px;
-}
-/* everywhere else */
-* {
-  font-family: Arial, Helvetica, sans-serif;
-}
-
-
-/*
-Copyright 2016 Google Inc. All Rights Reserved.
-Use of this source code is governed by an MIT-style license that
-can be found in the LICENSE file at http://angular.io/license
-*/"><input type="hidden" name="files[app/bag/bag.ts]" value="/* tslint:disable:forin */
-import { Component, ContentChildren, Directive, EventEmitter,
-         Injectable, Input, Output, Optional,
-         HostBinding, HostListener,
-         OnInit, OnChanges, OnDestroy,
-         Pipe, PipeTransform,
-         SimpleChange } from '@angular/core';
-
-import { Observable } from 'rxjs/Observable';
-import 'rxjs/add/observable/of';
-import 'rxjs/add/operator/delay';
-
-////////// The App: Services and Components for the tests. //////////////
-
-export class Hero {
-  name: string;
-}
-
-////////// Services ///////////////
-@Injectable()
-export class FancyService {
-  protected value: string = 'real value';
-
-  getValue() { return this.value; }
-  setValue(value: string) { this.value = value; }
-
-  getAsyncValue() { return Promise.resolve('async value'); }
-
-  getObservableValue() { return Observable.of('observable value'); }
-
-  getTimeoutValue() {
-    return new Promise((resolve) => {
-      setTimeout(() => { resolve('timeout value'); }, 10);
-    });
-  }
-
-  getObservableDelayValue() {
-    return Observable.of('observable delay value').delay(10);
-  }
-}
-
-@Injectable()
-export class DependentService {
-  constructor(private dependentService: FancyService) { }
-  getValue() { return this.dependentService.getValue(); }
-}
-
-/////////// Pipe ////////////////
-/*
- * Reverse the input string.
-*/
-@Pipe({ name: 'reverse' })
-export class ReversePipe implements PipeTransform {
-  transform(s: string) {
-    let r = '';
-    for (let i = s.length; i; )  { r += s[--i]; };
-    return r;
-  }
-}
-
-//////////// Components /////////////
-@Component({
-  selector: 'bank-account',
-  template: `
-   Bank Name: {{bank}}
-   Account Id: {{id}}
- `
-})
-export class BankAccountComponent {
-  @Input() bank: string;
-  @Input('account') id: string;
-
-  // Removed on 12/02/2016 when ceased public discussion of the `Renderer`. Revive in future?
-  // constructor(private renderer: Renderer, private el: ElementRef ) {
-  //   renderer.setElementProperty(el.nativeElement, 'customProperty', true);
-  // }
-}
-
-/** A component with attributes, styles, classes, and property setting */
-@Component({
-  selector: 'bank-account-parent',
-  template: `
-   <bank-account
-      bank=&quot;RBC&quot;
-      account=&quot;4747&quot;
-      [style.width.px]=&quot;width&quot;
-      [style.color]=&quot;color&quot;
-      [class.closed]=&quot;isClosed&quot;
-      [class.open]=&quot;!isClosed&quot;>
-   </bank-account>
- `
-})
-export class BankAccountParentComponent {
-  width = 200;
-  color = 'red';
-  isClosed = true;
-}
-
-@Component({
-  selector: 'button-comp',
-  template: `
-    <button (click)=&quot;clicked()&quot;>Click me!</button>
-    <span>{{message}}</span>`
-})
-export class ButtonComponent {
-  isOn = false;
-  clicked() { this.isOn = !this.isOn; }
-  get message() { return `The light is ${this.isOn ? 'On' : 'Off'}`; }
-}
-
-@Component({
-  selector: 'child-1',
-  template: `<span>Child-1({{text}})</span>`
-})
-export class Child1Component {
-  @Input() text = 'Original';
-}
-
-@Component({
-  selector: 'child-2',
-  template: '<div>Child-2({{text}})</div>'
-})
-export class Child2Component {
-  @Input() text: string;
-}
-
-@Component({
-  selector: 'child-3',
-  template: '<div>Child-3({{text}})</div>'
-})
-export class Child3Component {
-  @Input() text: string;
-}
-
-@Component({
-  selector: 'input-comp',
-  template: `<input [(ngModel)]=&quot;name&quot;>`
-})
-export class InputComponent {
-  name = 'John';
-}
-
-/* Prefer this metadata syntax */
-// @Directive({
-//   selector: 'input[value]',
-//   host: {
-//     '[value]': 'value',
-//     '(input)': 'valueChange.emit($event.target.value)'
-//   },
-//   inputs:  ['value'],
-//   outputs: ['valueChange']
-// })
-// export class InputValueBinderDirective {
-//   value: any;
-//   valueChange: EventEmitter<any> = new EventEmitter();
-// }
-
-// As the style-guide recommends
-@Directive({ selector: 'input[value]' })
-export class InputValueBinderDirective {
-  @HostBinding()
-  @Input()
-  value: any;
-
-  @Output()
-  valueChange: EventEmitter<any> = new EventEmitter();
-
-  @HostListener('input', ['$event.target.value'])
-  onInput(value: any) { this.valueChange.emit(value); }
-}
-
-@Component({
-  selector: 'input-value-comp',
-  template: `
-    Name: <input [(value)]=&quot;name&quot;> {{name}}
-  `
-})
-export class InputValueBinderComponent {
-  name = 'Sally'; // initial value
-}
-
-@Component({
-  selector: 'parent-comp',
-  template: `Parent(<child-1></child-1>)`
-})
-export class ParentComponent { }
-
-@Component({
-  selector: 'io-comp',
-  template: `<div class=&quot;hero&quot; (click)=&quot;click()&quot;>Original {{hero.name}}</div>`
-})
-export class IoComponent {
-  @Input() hero: Hero;
-  @Output() selected = new EventEmitter<Hero>();
-  click() { this.selected.emit(this.hero); }
-}
-
-@Component({
-  selector: 'io-parent-comp',
-  template: `
-  <p *ngIf=&quot;!selectedHero&quot;><i>Click to select a hero</i></p>
-  <p *ngIf=&quot;selectedHero&quot;>The selected hero is {{selectedHero.name}}</p>
-  <io-comp
-    *ngFor=&quot;let hero of heroes&quot;
-    [hero]=hero
-    (selected)=&quot;onSelect($event)&quot;>
-  </io-comp>
-  `
-})
-export class IoParentComponent {
-  heroes: Hero[] = [ {name: 'Bob'}, {name: 'Carol'}, {name: 'Ted'}, {name: 'Alice'} ];
-  selectedHero: Hero;
-  onSelect(hero: Hero) { this.selectedHero = hero; }
-}
-
-@Component({
-  selector: 'my-if-comp',
-  template: `MyIf(<span *ngIf=&quot;showMore&quot;>More</span>)`
-})
-export class MyIfComponent {
-  showMore = false;
-}
-
-@Component({
-  selector: 'my-service-comp',
-  template: `injected value: {{fancyService.value}}`,
-  providers: [FancyService]
-})
-export class TestProvidersComponent {
-  constructor(private fancyService: FancyService) {}
-}
-
-
-@Component({
-  selector: 'my-service-comp',
-  template: `injected value: {{fancyService.value}}`,
-  viewProviders: [FancyService]
-})
-export class TestViewProvidersComponent {
-  constructor(private fancyService: FancyService) {}
-}
-
-@Component({
-  moduleId: module.id,
-  selector: 'external-template-comp',
-  templateUrl: './bag-external-template.html'
-})
-export class ExternalTemplateComponent implements OnInit {
-  serviceValue: string;
-
-  constructor(@Optional() private service: FancyService) {  }
-
-  ngOnInit() {
-    if (this.service) { this.serviceValue = this.service.getValue(); }
-  }
-}
-
-@Component({
-  selector: 'comp-w-ext-comp',
-  template: `
-  <h3>comp-w-ext-comp</h3>
-  <external-template-comp></external-template-comp>
-  `
-})
-export class InnerCompWithExternalTemplateComponent { }
-
-@Component({
-  moduleId: module.id,
-  selector: 'bad-template-comp',
-  templateUrl: './non-existant.html'
-})
-export class BadTemplateUrlComponent { }
-
-
-
-@Component({selector: 'needs-content', template: '<ng-content></ng-content>'})
-export class NeedsContentComponent {
-  // children with #content local variable
-  @ContentChildren('content') children: any;
-}
-
-///////// MyIfChildComp ////////
-@Component({
-  selector: 'my-if-child-1',
-
-  template: `
-    <h4>MyIfChildComp</h4>
-    <div>
-      <label>Child value: <input [(ngModel)]=&quot;childValue&quot;> </label>
-    </div>
-    <p><i>Change log:</i></p>
-    <div *ngFor=&quot;let log of changeLog; let i=index&quot;>{{i + 1}} - {{log}}</div>`
-})
-export class MyIfChildComponent implements OnInit, OnChanges, OnDestroy {
-  @Input() value = '';
-  @Output() valueChange = new EventEmitter<string>();
-
-  get childValue() { return this.value; }
-  set childValue(v: string) {
-    if (this.value === v) { return; }
-    this.value = v;
-    this.valueChange.emit(v);
-  }
-
-  changeLog: string[] = [];
-
-  ngOnInitCalled = false;
-  ngOnChangesCounter = 0;
-  ngOnDestroyCalled = false;
-
-  ngOnInit()    {
-    this.ngOnInitCalled = true;
-    this.changeLog.push('ngOnInit called');
-  }
-
-  ngOnDestroy() {
-    this.ngOnDestroyCalled = true;
-    this.changeLog.push('ngOnDestroy called');
-  }
-
-  ngOnChanges(changes: {[propertyName: string]: SimpleChange}) {
-    for (let propName in changes) {
-      this.ngOnChangesCounter += 1;
-      let prop = changes[propName];
-      let cur  = JSON.stringify(prop.currentValue);
-      let prev = JSON.stringify(prop.previousValue);
-      this.changeLog.push(`${propName}: currentValue = ${cur}, previousValue = ${prev}`);
-    }
-  }
-}
-
-///////// MyIfParentComp ////////
-
-@Component({
-  selector: 'my-if-parent-comp',
-  template: `
-    <h3>MyIfParentComp</h3>
-    <label>Parent value:
-      <input [(ngModel)]=&quot;parentValue&quot;>
-    </label>
-    <button (click)=&quot;clicked()&quot;>{{toggleLabel}} Child</button><br>
-    <div *ngIf=&quot;showChild&quot;
-         style=&quot;margin: 4px; padding: 4px; background-color: aliceblue;&quot;>
-      <my-if-child-1  [(value)]=&quot;parentValue&quot;></my-if-child-1>
-    </div>
-  `
-})
-export class MyIfParentComponent implements OnInit {
-  ngOnInitCalled = false;
-  parentValue = 'Hello, World';
-  showChild = false;
-  toggleLabel = 'Unknown';
-
-  ngOnInit() {
-    this.ngOnInitCalled = true;
-    this.clicked();
-  }
-
-  clicked() {
-    this.showChild = !this.showChild;
-    this.toggleLabel = this.showChild ? 'Close' : 'Show';
-  }
-}
-
-
-@Component({
-  selector: 'reverse-pipe-comp',
-  template: `
-    <input [(ngModel)]=&quot;text&quot;>
-    <span>{{text | reverse}}</span>
-  `
-})
-export class ReversePipeComponent {
-  text = 'my dog has fleas.';
-}
-
-@Component({template: '<div>Replace Me</div>'})
-export class ShellComponent { }
-
-@Component({
-  selector: 'bag-comp',
-  template: `
-    <h1>Specs Bag</h1>
-    <my-if-parent-comp></my-if-parent-comp>
-    <hr>
-    <h3>Input/Output Component</h3>
-    <io-parent-comp></io-parent-comp>
-    <hr>
-    <h3>External Template Component</h3>
-    <external-template-comp></external-template-comp>
-    <hr>
-    <h3>Component With External Template Component</h3>
-    <comp-w-ext-comp></comp-w-ext-comp>
-    <hr>
-    <h3>Reverse Pipe</h3>
-    <reverse-pipe-comp></reverse-pipe-comp>
-    <hr>
-    <h3>InputValueBinder Directive</h3>
-    <input-value-comp></input-value-comp>
-    <hr>
-    <h3>Button Component</h3>
-    <button-comp></button-comp>
-    <hr>
-    <h3>Needs Content</h3>
-    <needs-content #nc>
-      <child-1 #content text=&quot;My&quot;></child-1>
-      <child-2 #content text=&quot;dog&quot;></child-2>
-      <child-2 text=&quot;has&quot;></child-2>
-      <child-3 #content text=&quot;fleas&quot;></child-3>
-      <div #content>!</div>
-    </needs-content>
-  `
-})
-export class BagComponent { }
-//////// Aggregations ////////////
-
-export const bagDeclarations = [
-  BagComponent,
-  BankAccountComponent, BankAccountParentComponent,
-  ButtonComponent,
-  Child1Component, Child2Component, Child3Component,
-  ExternalTemplateComponent, InnerCompWithExternalTemplateComponent,
-  InputComponent,
-  InputValueBinderDirective, InputValueBinderComponent,
-  IoComponent, IoParentComponent,
-  MyIfComponent, MyIfChildComponent, MyIfParentComponent,
-  NeedsContentComponent, ParentComponent,
-  TestProvidersComponent, TestViewProvidersComponent,
-  ReversePipe, ReversePipeComponent, ShellComponent
-];
-
-export const bagProviders = [DependentService, FancyService];
-
-////////////////////
-////////////
-import { NgModule }      from '@angular/core';
-import { BrowserModule } from '@angular/platform-browser';
-import { FormsModule }   from '@angular/forms';
-
-@NgModule({
-  imports: [BrowserModule, FormsModule],
-  declarations: bagDeclarations,
-  providers:    bagProviders,
-  entryComponents: [BagComponent],
-  bootstrap:       [BagComponent]
-})
-export class BagModule { }
-
-
-
-/*
-Copyright 2016 Google Inc. All Rights Reserved.
-Use of this source code is governed by an MIT-style license that
-can be found in the LICENSE file at http://angular.io/license
-*/"><input type="hidden" name="files[app/bag/bag-external-template.html]" value="<span>from external template</span>
-
-
-<!-- 
-Copyright 2016 Google Inc. All Rights Reserved.
-Use of this source code is governed by an MIT-style license that
-can be found in the LICENSE file at http://angular.io/license
--->"><input type="hidden" name="files[app/bag/bag-main.ts]" value="// main app entry point
-import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
-import { BagModule } from './bag';
-
-platformBrowserDynamic().bootstrapModule(BagModule);
-
-
-/*
-Copyright 2016 Google Inc. All Rights Reserved.
-Use of this source code is governed by an MIT-style license that
-can be found in the LICENSE file at http://angular.io/license
-*/"><input type="hidden" name="files[index.html]" value="<!-- Run the bag source as an app -->
-<!DOCTYPE html>
-<html>
-  <head>
-    <script>document.write('<base href=&quot;' + document.location + '&quot; />');</script>
-    <title>Specs Bag</title>
-    <meta charset=&quot;UTF-8&quot;>
-    <meta name=&quot;viewport&quot; content=&quot;width=device-width, initial-scale=1&quot;>
-    <link rel=&quot;stylesheet&quot; href=&quot;styles.css&quot;>
-
-    <!-- Polyfills -->
-    <script src=&quot;https://unpkg.com/core-js/client/shim.min.js&quot;></script>
-
-    <script src=&quot;https://unpkg.com/zone.js@0.7.4?main=browser&quot;></script>
-    <script src=&quot;https://unpkg.com/systemjs@0.19.39/dist/system.src.js&quot;></script>
-
-    <script src=&quot;https://cdn.rawgit.com/angular/angular.io/b3c65a9/public/docs/_examples/_boilerplate/systemjs.config.web.js&quot;></script>
-    <script>
-      System.import('app/bag/bag-main').catch(function(err){ console.error(err); });
-    </script>
-  </head>
-
-  <body>
-    <bag-comp>Loading ...</bag-comp>
-  </body>
-</html>
-
-
-<!-- 
-Copyright 2016 Google Inc. All Rights Reserved.
-Use of this source code is governed by an MIT-style license that
-can be found in the LICENSE file at http://angular.io/license
--->"><input type="hidden" name="tags[0]" value="angular"><input type="hidden" name="tags[1]" value="example"><input type="hidden" name="tags[2]" value="testing"><input type="hidden" name="private" value="true"><input type="hidden" name="description" value="Angular Example - Running the bag"></form><script>document.getElementById("mainForm").submit();</script></body></html>

aio/content/examples/testing/ts/banner-inline-specs.plnkr.no-link.html

@@ -1,289 +0,0 @@
-<html lang="en"><head></head><body><form id="mainForm" method="post" action="http://plnkr.co/edit/?p=preview&amp;open=app/banner-inline.component.spec.ts" target="_self"><input type="hidden" name="files[browser-test-shim.js]" value="// BROWSER TESTING SHIM
-// Keep it in-sync with what karma-test-shim does
-/*global jasmine, __karma__, window*/
-(function () {
-
-Error.stackTraceLimit = 0; // &quot;No stacktrace&quot;&quot; is usually best for app testing.
-
-// Uncomment to get full stacktrace output. Sometimes helpful, usually not.
-// Error.stackTraceLimit = Infinity; //
-
-jasmine.DEFAULT_TIMEOUT_INTERVAL = 3000;
-
-var baseURL = document.baseURI;
-baseURL = baseURL + baseURL[baseURL.length-1] ? '' : '/';
-
-System.config({
-  baseURL: baseURL,
-  // 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(
-      'Note: System.import could not load &quot;systemjs.config.extras.js&quot; where you might have added more configuration. It is an optional file so we will continue 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());
-  })
-}
-
-// Import all spec files defined in the html (__spec_files__)
-// and start Jasmine testrunner
-function initTesting () {
-  console.log('loading spec files: '+__spec_files__.join(', '));
-  return Promise.all(
-    __spec_files__.map(function(spec) {
-      return System.import(spec);
-    })
-  )
-  //  After all imports load,  re-execute `window.onload` which
-  //  triggers the Jasmine test-runner start or explain what went wrong
-  .then(success, console.error.bind(console));
-
-  function success () {
-    console.log('Spec files loaded; starting Jasmine testrunner');
-    window.onload();
-  }
-}
-
-})();
-
-
-/*
-Copyright 2016 Google Inc. All Rights Reserved.
-Use of this source code is governed by an MIT-style license that
-can be found in the LICENSE file at http://angular.io/license
-*/"><input type="hidden" name="files[systemjs.config.extras.js]" value="/** App specific SystemJS configuration */
-System.config({
-  packages: {
-    // barrels
-    'app/model': {main:'index.js', defaultExtension:'js'},
-    'app/model/testing': {main:'index.js', defaultExtension:'js'}
-  }
-});
-
-
-/*
-Copyright 2016 Google Inc. All Rights Reserved.
-Use of this source code is governed by an MIT-style license that
-can be found in the LICENSE file at http://angular.io/license
-*/"><input type="hidden" name="files[app/banner-inline.component.ts]" value="import { Component } from '@angular/core';
-
-@Component({
-  selector: 'app-banner',
-  template: '<h1>{{title}}</h1>'
-})
-export class BannerComponent {
-  title = 'Test Tour of Heroes';
-}
-
-
-
-/*
-Copyright 2016 Google Inc. All Rights Reserved.
-Use of this source code is governed by an MIT-style license that
-can be found in the LICENSE file at http://angular.io/license
-*/"><input type="hidden" name="files[app/banner-inline.component.spec.ts]" value="import { ComponentFixture, TestBed } from '@angular/core/testing';
-import { By }              from '@angular/platform-browser';
-import { DebugElement }    from '@angular/core';
-
-import { BannerComponent } from './banner-inline.component';
-
-describe('BannerComponent (inline template)', () => {
-
-  let comp:    BannerComponent;
-  let fixture: ComponentFixture<BannerComponent>;
-  let de:      DebugElement;
-  let el:      HTMLElement;
-
-  beforeEach(() => {
-    TestBed.configureTestingModule({
-      declarations: [ BannerComponent ], // declare the test component
-    });
-
-    fixture = TestBed.createComponent(BannerComponent);
-
-    comp = fixture.componentInstance; // BannerComponent test instance
-
-    // query for the title <h1> by CSS element selector
-    de = fixture.debugElement.query(By.css('h1'));
-    el = de.nativeElement;
-  });
-
-  it('no title in the DOM until manually call `detectChanges`', () => {
-    expect(el.textContent).toEqual('');
-  });
-
-  it('should display original title', () => {
-    fixture.detectChanges();
-    expect(el.textContent).toContain(comp.title);
-  });
-
-  it('should display a different test title', () => {
-    comp.title = 'Test Title';
-    fixture.detectChanges();
-    expect(el.textContent).toContain('Test Title');
-  });
-});
-
-
-/*
-Copyright 2016 Google Inc. All Rights Reserved.
-Use of this source code is governed by an MIT-style license that
-can be found in the LICENSE file at http://angular.io/license
-*/"><input type="hidden" name="files[index.html]" value="<!-- Run application specs in a browser -->
-<!DOCTYPE html>
-<html>
-<head>
-  <script>document.write('<base href=&quot;' + document.location + '&quot; />');</script>
-  <title>Banner Component (inline template) Specs</title>
-  <meta charset=&quot;UTF-8&quot;>
-  <meta name=&quot;viewport&quot; content=&quot;width=device-width, initial-scale=1&quot;>
-  <link rel=&quot;stylesheet&quot; href=&quot;https://cdnjs.cloudflare.com/ajax/libs/jasmine/2.4.1/jasmine.css&quot;>
-</head>
-<body>
-  <!-- Polyfills -->
-  <script src=&quot;https://unpkg.com/core-js/client/shim.min.js&quot;></script>
-
-  <script src=&quot;https://unpkg.com/systemjs@0.19.39/dist/system.src.js&quot;></script>
-
-  <script src=&quot;https://cdnjs.cloudflare.com/ajax/libs/jasmine/2.4.1/jasmine.js&quot;></script>
-  <script src=&quot;https://cdnjs.cloudflare.com/ajax/libs/jasmine/2.4.1/jasmine-html.js&quot;></script>
-  <script src=&quot;https://cdnjs.cloudflare.com/ajax/libs/jasmine/2.4.1/boot.js&quot;></script>
-
-  <script src=&quot;https://unpkg.com/zone.js@0.7.4?main=browser&quot;></script>
-  <script src=&quot;https://unpkg.com/zone.js/dist/long-stack-trace-zone.js?main=browser&quot;></script>
-  <script src=&quot;https://unpkg.com/zone.js/dist/proxy.js?main=browser&quot;></script>
-  <script src=&quot;https://unpkg.com/zone.js/dist/sync-test.js?main=browser&quot;></script>
-  <script src=&quot;https://unpkg.com/zone.js/dist/jasmine-patch.js?main=browser&quot;></script>
-  <script src=&quot;https://unpkg.com/zone.js/dist/async-test.js?main=browser&quot;></script>
-  <script src=&quot;https://unpkg.com/zone.js/dist/fake-async-test.js?main=browser&quot;></script>
-
-  <script>
-    var __spec_files__ = [
-      'app/banner-inline.component.spec'
-    ];
-  </script>
-  <script src=&quot;browser-test-shim.js&quot;></script>
-</body>
-
-</html>
-
-
-<!-- 
-Copyright 2016 Google Inc. All Rights Reserved.
-Use of this source code is governed by an MIT-style license that
-can be found in the LICENSE file at http://angular.io/license
--->"><input type="hidden" name="tags[0]" value="angular"><input type="hidden" name="tags[1]" value="example"><input type="hidden" name="tags[2]" value="testing"><input type="hidden" name="private" value="true"><input type="hidden" name="description" value="Angular Example - Testing - banner-inline.component.specs"><input type="hidden" name="files[systemjs.config.js]" value="/**
- * WEB ANGULAR VERSION
- * (based on systemjs.config.js in angular.io)
- * System configuration for Angular samples
- * Adjust as necessary for your application needs.
- */
-(function (global) {
-  System.config({
-    // DEMO ONLY! REAL CODE SHOULD NOT TRANSPILE IN THE BROWSER
-    transpiler: 'ts',
-    typescriptOptions: {
-      // Copy of compiler options in standard tsconfig.json
-      &quot;target&quot;: &quot;es5&quot;,
-      &quot;module&quot;: &quot;commonjs&quot;,
-      &quot;moduleResolution&quot;: &quot;node&quot;,
-      &quot;sourceMap&quot;: true,
-      &quot;emitDecoratorMetadata&quot;: true,
-      &quot;experimentalDecorators&quot;: true,
-      &quot;lib&quot;: [&quot;es2015&quot;, &quot;dom&quot;],
-      &quot;noImplicitAny&quot;: true,
-      &quot;suppressImplicitAnyIndexErrors&quot;: true
-    },
-    meta: {
-      'typescript': {
-        &quot;exports&quot;: &quot;ts&quot;
-      }
-    },
-    paths: {
-      // paths serve as alias
-      'npm:': 'https://unpkg.com/'
-    },
-    // map tells the System loader where to look for things
-    map: {
-      // our app is within the app folder
-      app: 'app',
-
-      // angular bundles
-      '@angular/core': 'npm:@angular/core/bundles/core.umd.js',
-      '@angular/common': 'npm:@angular/common/bundles/common.umd.js',
-      '@angular/compiler': 'npm:@angular/compiler/bundles/compiler.umd.js',
-      '@angular/platform-browser': 'npm:@angular/platform-browser/bundles/platform-browser.umd.js',
-      '@angular/platform-browser-dynamic': 'npm:@angular/platform-browser-dynamic/bundles/platform-browser-dynamic.umd.js',
-      '@angular/http': 'npm:@angular/http/bundles/http.umd.js',
-      '@angular/router': 'npm:@angular/router/bundles/router.umd.js',
-      '@angular/router/upgrade': 'npm:@angular/router/bundles/router-upgrade.umd.js',
-      '@angular/forms': 'npm:@angular/forms/bundles/forms.umd.js',
-      '@angular/upgrade': 'npm:@angular/upgrade/bundles/upgrade.umd.js',
-      '@angular/upgrade/static': 'npm:@angular/upgrade/bundles/upgrade-static.umd.js',
-
-      // other libraries
-      'rxjs':                      'npm:rxjs@5.0.1',
-      'angular-in-memory-web-api': 'npm:angular-in-memory-web-api/bundles/in-memory-web-api.umd.js',
-      'ts':                        'npm:plugin-typescript@5.2.7/lib/plugin.js',
-      'typescript':                'npm:typescript@2.0.10/lib/typescript.js',
-
-    },
-    // packages tells the System loader how to load when no filename and/or no extension
-    packages: {
-      app: {
-        main: './main.ts',
-        defaultExtension: 'ts'
-      },
-      rxjs: {
-        defaultExtension: 'js'
-      }
-    }
-  });
-
-})(this);
-
-/*
-Copyright 2016 Google Inc. All Rights Reserved.
-Use of this source code is governed by an MIT-style license that
-can be found in the LICENSE file at http://angular.io/license
-*/
-"></form><script>document.getElementById("mainForm").submit();</script></body></html>

aio/content/examples/testing/ts/banner-specs.plnkr.no-link.html

@@ -1,311 +0,0 @@
-<html lang="en"><head></head><body><form id="mainForm" method="post" action="http://plnkr.co/edit/?p=preview&amp;open=app/banner.component.spec.ts" target="_self"><input type="hidden" name="files[browser-test-shim.js]" value="// BROWSER TESTING SHIM
-// Keep it in-sync with what karma-test-shim does
-/*global jasmine, __karma__, window*/
-(function () {
-
-Error.stackTraceLimit = 0; // &quot;No stacktrace&quot;&quot; is usually best for app testing.
-
-// Uncomment to get full stacktrace output. Sometimes helpful, usually not.
-// Error.stackTraceLimit = Infinity; //
-
-jasmine.DEFAULT_TIMEOUT_INTERVAL = 3000;
-
-var baseURL = document.baseURI;
-baseURL = baseURL + baseURL[baseURL.length-1] ? '' : '/';
-
-System.config({
-  baseURL: baseURL,
-  // 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(
-      'Note: System.import could not load &quot;systemjs.config.extras.js&quot; where you might have added more configuration. It is an optional file so we will continue 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());
-  })
-}
-
-// Import all spec files defined in the html (__spec_files__)
-// and start Jasmine testrunner
-function initTesting () {
-  console.log('loading spec files: '+__spec_files__.join(', '));
-  return Promise.all(
-    __spec_files__.map(function(spec) {
-      return System.import(spec);
-    })
-  )
-  //  After all imports load,  re-execute `window.onload` which
-  //  triggers the Jasmine test-runner start or explain what went wrong
-  .then(success, console.error.bind(console));
-
-  function success () {
-    console.log('Spec files loaded; starting Jasmine testrunner');
-    window.onload();
-  }
-}
-
-})();
-
-
-/*
-Copyright 2016 Google Inc. All Rights Reserved.
-Use of this source code is governed by an MIT-style license that
-can be found in the LICENSE file at http://angular.io/license
-*/"><input type="hidden" name="files[systemjs.config.extras.js]" value="/** App specific SystemJS configuration */
-System.config({
-  packages: {
-    // barrels
-    'app/model': {main:'index.js', defaultExtension:'js'},
-    'app/model/testing': {main:'index.js', defaultExtension:'js'}
-  }
-});
-
-
-/*
-Copyright 2016 Google Inc. All Rights Reserved.
-Use of this source code is governed by an MIT-style license that
-can be found in the LICENSE file at http://angular.io/license
-*/"><input type="hidden" name="files[app/banner.component.css]" value="h1 { color: green; font-size: 350%}
-
-
-/*
-Copyright 2016 Google Inc. All Rights Reserved.
-Use of this source code is governed by an MIT-style license that
-can be found in the LICENSE file at http://angular.io/license
-*/"><input type="hidden" name="files[app/banner.component.html]" value="<h1>{{title}}</h1>
-
-
-<!-- 
-Copyright 2016 Google Inc. All Rights Reserved.
-Use of this source code is governed by an MIT-style license that
-can be found in the LICENSE file at http://angular.io/license
--->"><input type="hidden" name="files[app/banner.component.ts]" value="import { Component } from '@angular/core';
-
-@Component({
-  moduleId: module.id,
-  selector: 'app-banner',
-  templateUrl: './banner.component.html',
-  styleUrls:  ['./banner.component.css']
-})
-export class BannerComponent {
-  title = 'Test Tour of Heroes';
-}
-
-
-
-/*
-Copyright 2016 Google Inc. All Rights Reserved.
-Use of this source code is governed by an MIT-style license that
-can be found in the LICENSE file at http://angular.io/license
-*/"><input type="hidden" name="files[app/banner.component.spec.ts]" value="import { async, ComponentFixture, TestBed } from '@angular/core/testing';
-import { By }              from '@angular/platform-browser';
-import { DebugElement }    from '@angular/core';
-
-import { BannerComponent } from './banner.component';
-
-describe('BannerComponent (templateUrl)', () => {
-
-  let comp:    BannerComponent;
-  let fixture: ComponentFixture<BannerComponent>;
-  let de:      DebugElement;
-  let el:      HTMLElement;
-
-  // async beforeEach
-  beforeEach(async(() => {
-    TestBed.configureTestingModule({
-      declarations: [ BannerComponent ], // declare the test component
-    })
-    .compileComponents();  // compile template and css
-  }));
-
-  // synchronous beforeEach
-  beforeEach(() => {
-    fixture = TestBed.createComponent(BannerComponent);
-
-    comp = fixture.componentInstance; // BannerComponent test instance
-
-    // query for the title <h1> by CSS element selector
-    de = fixture.debugElement.query(By.css('h1'));
-    el = de.nativeElement;
-  });
-
-  it('no title in the DOM until manually call `detectChanges`', () => {
-    expect(el.textContent).toEqual('');
-  });
-
-  it('should display original title', () => {
-    fixture.detectChanges();
-    expect(el.textContent).toContain(comp.title);
-  });
-
-  it('should display a different test title', () => {
-    comp.title = 'Test Title';
-    fixture.detectChanges();
-    expect(el.textContent).toContain('Test Title');
-  });
-
-});
-
-
-/*
-Copyright 2016 Google Inc. All Rights Reserved.
-Use of this source code is governed by an MIT-style license that
-can be found in the LICENSE file at http://angular.io/license
-*/"><input type="hidden" name="files[index.html]" value="<!-- Run application specs in a browser -->
-<!DOCTYPE html>
-<html>
-<head>
-  <script>document.write('<base href=&quot;' + document.location + '&quot; />');</script>
-  <title>Banner Component Specs</title>
-  <meta charset=&quot;UTF-8&quot;>
-  <meta name=&quot;viewport&quot; content=&quot;width=device-width, initial-scale=1&quot;>
-  <link rel=&quot;stylesheet&quot; href=&quot;https://cdnjs.cloudflare.com/ajax/libs/jasmine/2.4.1/jasmine.css&quot;>
-</head>
-<body>
-  <!-- Polyfills -->
-  <script src=&quot;https://unpkg.com/core-js/client/shim.min.js&quot;></script>
-
-  <script src=&quot;https://unpkg.com/systemjs@0.19.39/dist/system.src.js&quot;></script>
-
-  <script src=&quot;https://cdnjs.cloudflare.com/ajax/libs/jasmine/2.4.1/jasmine.js&quot;></script>
-  <script src=&quot;https://cdnjs.cloudflare.com/ajax/libs/jasmine/2.4.1/jasmine-html.js&quot;></script>
-  <script src=&quot;https://cdnjs.cloudflare.com/ajax/libs/jasmine/2.4.1/boot.js&quot;></script>
-
-  <script src=&quot;https://unpkg.com/zone.js@0.7.4?main=browser&quot;></script>
-  <script src=&quot;https://unpkg.com/zone.js/dist/long-stack-trace-zone.js?main=browser&quot;></script>
-  <script src=&quot;https://unpkg.com/zone.js/dist/proxy.js?main=browser&quot;></script>
-  <script src=&quot;https://unpkg.com/zone.js/dist/sync-test.js?main=browser&quot;></script>
-  <script src=&quot;https://unpkg.com/zone.js/dist/jasmine-patch.js?main=browser&quot;></script>
-  <script src=&quot;https://unpkg.com/zone.js/dist/async-test.js?main=browser&quot;></script>
-  <script src=&quot;https://unpkg.com/zone.js/dist/fake-async-test.js?main=browser&quot;></script>
-
-  <script>
-    var __spec_files__ = [
-      'app/banner.component.spec'
-    ];
-  </script>
-  <script src=&quot;browser-test-shim.js&quot;></script>
-</body>
-
-</html>
-
-
-<!-- 
-Copyright 2016 Google Inc. All Rights Reserved.
-Use of this source code is governed by an MIT-style license that
-can be found in the LICENSE file at http://angular.io/license
--->"><input type="hidden" name="tags[0]" value="angular"><input type="hidden" name="tags[1]" value="example"><input type="hidden" name="tags[2]" value="testing"><input type="hidden" name="private" value="true"><input type="hidden" name="description" value="Angular Example - Testing - banner.component.specs"><input type="hidden" name="files[systemjs.config.js]" value="/**
- * WEB ANGULAR VERSION
- * (based on systemjs.config.js in angular.io)
- * System configuration for Angular samples
- * Adjust as necessary for your application needs.
- */
-(function (global) {
-  System.config({
-    // DEMO ONLY! REAL CODE SHOULD NOT TRANSPILE IN THE BROWSER
-    transpiler: 'ts',
-    typescriptOptions: {
-      // Copy of compiler options in standard tsconfig.json
-      &quot;target&quot;: &quot;es5&quot;,
-      &quot;module&quot;: &quot;commonjs&quot;,
-      &quot;moduleResolution&quot;: &quot;node&quot;,
-      &quot;sourceMap&quot;: true,
-      &quot;emitDecoratorMetadata&quot;: true,
-      &quot;experimentalDecorators&quot;: true,
-      &quot;lib&quot;: [&quot;es2015&quot;, &quot;dom&quot;],
-      &quot;noImplicitAny&quot;: true,
-      &quot;suppressImplicitAnyIndexErrors&quot;: true
-    },
-    meta: {
-      'typescript': {
-        &quot;exports&quot;: &quot;ts&quot;
-      }
-    },
-    paths: {
-      // paths serve as alias
-      'npm:': 'https://unpkg.com/'
-    },
-    // map tells the System loader where to look for things
-    map: {
-      // our app is within the app folder
-      app: 'app',
-
-      // angular bundles
-      '@angular/core': 'npm:@angular/core/bundles/core.umd.js',
-      '@angular/common': 'npm:@angular/common/bundles/common.umd.js',
-      '@angular/compiler': 'npm:@angular/compiler/bundles/compiler.umd.js',
-      '@angular/platform-browser': 'npm:@angular/platform-browser/bundles/platform-browser.umd.js',
-      '@angular/platform-browser-dynamic': 'npm:@angular/platform-browser-dynamic/bundles/platform-browser-dynamic.umd.js',
-      '@angular/http': 'npm:@angular/http/bundles/http.umd.js',
-      '@angular/router': 'npm:@angular/router/bundles/router.umd.js',
-      '@angular/router/upgrade': 'npm:@angular/router/bundles/router-upgrade.umd.js',
-      '@angular/forms': 'npm:@angular/forms/bundles/forms.umd.js',
-      '@angular/upgrade': 'npm:@angular/upgrade/bundles/upgrade.umd.js',
-      '@angular/upgrade/static': 'npm:@angular/upgrade/bundles/upgrade-static.umd.js',
-
-      // other libraries
-      'rxjs':                      'npm:rxjs@5.0.1',
-      'angular-in-memory-web-api': 'npm:angular-in-memory-web-api/bundles/in-memory-web-api.umd.js',
-      'ts':                        'npm:plugin-typescript@5.2.7/lib/plugin.js',
-      'typescript':                'npm:typescript@2.0.10/lib/typescript.js',
-
-    },
-    // packages tells the System loader how to load when no filename and/or no extension
-    packages: {
-      app: {
-        main: './main.ts',
-        defaultExtension: 'ts'
-      },
-      rxjs: {
-        defaultExtension: 'js'
-      }
-    }
-  });
-
-})(this);
-
-/*
-Copyright 2016 Google Inc. All Rights Reserved.
-Use of this source code is governed by an MIT-style license that
-can be found in the LICENSE file at http://angular.io/license
-*/
-"></form><script>document.getElementById("mainForm").submit();</script></body></html>