angular · wardbell · Dec 5, 2016 · Nov 27, 2016 · Nov 28, 2016 · Nov 28, 2016
diff --git a/gulpfile.js b/gulpfile.js
@@ -104,6 +104,7 @@ var _exampleBoilerplateFiles = [
 var _exampleDartWebBoilerPlateFiles = ['a2docs.css', 'styles.css'];
 
 var _exampleUnitTestingBoilerplateFiles = [
+  'browser-test-shim.js',
   'karma-test-shim.js',
   'karma.conf.js'
 ];
@@ -587,10 +588,14 @@ function deleteExampleBoilerPlate() {
   gutil.log('Deleting example boilerplate files');
   var examplePaths = getExamplePaths(EXAMPLES_PATH);
   var dartExampleWebPaths = getDartExampleWebPaths(EXAMPLES_PATH);
+  var unittestPaths = getUnitTestingPaths(EXAMPLES_PATH);
 
   return deleteFiles(_exampleBoilerplateFiles, examplePaths)
     .then(function() {
       return deleteFiles(_exampleDartWebBoilerPlateFiles, dartExampleWebPaths);
+    })
+    .then(function() {
+      return deleteFiles(_exampleUnitTestingBoilerplateFiles, unittestPaths);
     });
 }
 

diff --git a/public/docs/_examples/_boilerplate/styles.css b/public/docs/_examples/_boilerplate/styles.css
@@ -45,6 +45,7 @@ button:disabled {
 nav a {
   padding: 5px 10px;
   text-decoration: none;
+  margin-right: 10px;
   margin-top: 10px;
   display: inline-block;
   background-color: #eee;

diff --git a/public/docs/_examples/package.json b/public/docs/_examples/package.json
@@ -63,7 +63,6 @@
     "karma": "^1.3.0",
     "karma-chrome-launcher": "^2.0.0",
     "karma-cli": "^1.0.1",
-    "karma-htmlfile-reporter": "^0.3.4",
     "karma-jasmine": "^1.0.2",
     "karma-jasmine-html-reporter": "^0.2.2",
     "karma-phantomjs-launcher": "^1.0.2",

diff --git a/public/docs/_examples/setup/ts/app/app.component.spec.ts b/public/docs/_examples/setup/ts/app/app.component.spec.ts
@@ -1,18 +1,16 @@
-/* tslint:disable:no-unused-variable */
 import { AppComponent } from './app.component';
 
 import { async, ComponentFixture, TestBed } from '@angular/core/testing';
 import { By }           from '@angular/platform-browser';
 import { DebugElement } from '@angular/core';
 
-////////  SPECS  /////////////
 describe('AppComponent', function () {
   let de: DebugElement;
   let comp: AppComponent;
   let fixture: ComponentFixture<AppComponent>;
 
   beforeEach(async(() => {
-   TestBed.configureTestingModule({
+    TestBed.configureTestingModule({
       declarations: [ AppComponent ]
     })
     .compileComponents();

diff --git a/public/docs/_examples/setup/ts/example-config.json b/public/docs/_examples/setup/ts/example-config.json
@@ -0,0 +1,3 @@
+{
+  "unittesting": true
+}
diff --git a/public/docs/_examples/setup/ts/quickstart-specs.html b/public/docs/_examples/setup/ts/quickstart-specs.html
@@ -0,0 +1,40 @@
+<!-- Run application specs in a browser -->
+<!-- #docregion -->
+<!DOCTYPE html>
+<html>
+<head>
+  <base href="/">
+  <title>1st Specs</title>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+  <link rel="stylesheet" href="styles.css">
+  <link rel="stylesheet" href="node_modules/jasmine-core/lib/jasmine-core/jasmine.css">
+</head>
+<body>
+  <script src="node_modules/systemjs/dist/system.src.js"></script>
+
+  <script src="node_modules/jasmine-core/lib/jasmine-core/jasmine.js"></script>
+  <script src="node_modules/jasmine-core/lib/jasmine-core/jasmine-html.js"></script>
+  <script src="node_modules/jasmine-core/lib/jasmine-core/boot.js"></script>
+
+  <script src="node_modules/reflect-metadata/Reflect.js"></script>
+
+  <script src="node_modules/zone.js/dist/zone.js"></script>
+  <script src="node_modules/zone.js/dist/long-stack-trace-zone.js"></script>
+  <script src="node_modules/zone.js/dist/proxy.js"></script>
+  <script src="node_modules/zone.js/dist/sync-test.js"></script>
+  <script src="node_modules/zone.js/dist/jasmine-patch.js"></script>
+  <script src="node_modules/zone.js/dist/async-test.js"></script>
+  <script src="node_modules/zone.js/dist/fake-async-test.js"></script>
+
+  <!-- #docregion files -->
+  <script>
+    var __spec_files__ = [
+      'app/app.component.spec'
+    ];
+  </script>
+  <!-- #enddocregion files-->
+  <script src="browser-test-shim.js"></script>
+</body>
+
+</html>
diff --git a/public/docs/_examples/setup/ts/quickstart-specs.plnkr.json b/public/docs/_examples/setup/ts/quickstart-specs.plnkr.json
@@ -0,0 +1,15 @@
+{
+  "description": "Quickstart AppComponent Testing",
+  "files":[
+    "browser-test-shim.js",
+    "systemjs.config.extras.js",
+
+    "app/app.component.ts",
+    "app/app.component.spec.ts",
+    "quickstart-specs.html"
+  ],
+  "main": "quickstart-specs.html",
+  "open": "app/app.component.spec.ts",
+  "tags": ["quickstart", "setup", "testing"],
+  "includeSystemConfig": true
+}
diff --git a/public/docs/_examples/setup/ts/systemjs.config.extras.js b/public/docs/_examples/setup/ts/systemjs.config.extras.js
@@ -0,0 +1,11 @@
+/**
+ * Add barrels and stuff
+ * Adjust as necessary for your application needs.
+ */
+// (function (global) {
+//   System.config({
+//     packages: {
+//       // add packages here
+//     }
+//   });
+// })(this);
diff --git a/public/docs/_examples/testing/ts/1st-specs.plnkr.json b/public/docs/_examples/testing/ts/1st-specs.plnkr.json
@@ -8,6 +8,7 @@
     "1st-specs.html"
   ],
   "main": "1st-specs.html",
+  "open": "app/1st.spec.ts",
   "tags": ["testing"],
   "includeSystemConfig": true
 }
diff --git a/public/docs/_examples/testing/ts/app-specs.html b/public/docs/_examples/testing/ts/app-specs.html
@@ -34,6 +34,8 @@
       'app/app.component.spec',
       'app/app.component.router.spec',
       'app/banner.component.spec',
+      'app/banner.component.detect-changes.spec',
+      'app/banner-inline.component.spec',
       'app/dashboard/dashboard.component.spec',
       'app/dashboard/dashboard.component.no-testbed.spec',
       'app/dashboard/dashboard-hero.component.spec',

diff --git a/public/docs/_examples/testing/ts/app/banner-inline.component.spec.ts b/public/docs/_examples/testing/ts/app/banner-inline.component.spec.ts
@@ -0,0 +1,55 @@
+// #docplaster
+// #docregion imports
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { By }              from '@angular/platform-browser';
+import { DebugElement }    from '@angular/core';
+
+import { BannerComponent } from './banner-inline.component';
+// #enddocregion imports
+
+// #docregion setup
+describe('BannerComponent (inline template)', () => {
+
+  let comp:    BannerComponent;
+  let fixture: ComponentFixture<BannerComponent>;
+  let de:      DebugElement;
+  let el:      HTMLElement;
+
+// #docregion before-each
+  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;
+  });
+// #enddocregion before-each
+// #enddocregion setup
+
+  // #docregion test-w-o-detect-changes
+  it('no title in the DOM until manually call `detectChanges`', () => {
+    expect(el.textContent).toEqual('');
+  });
+  // #enddocregion test-w-o-detect-changes
+
+  // #docregion tests
+  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');
+  });
+  // #enddocregion tests
+// #docregion setup
+});
+// #enddocregion setup
diff --git a/public/docs/_examples/testing/ts/app/banner-inline.component.ts b/public/docs/_examples/testing/ts/app/banner-inline.component.ts
@@ -0,0 +1,11 @@
+// #docregion
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'app-banner',
+  template: '<h1>{{title}}</h1>'
+})
+export class BannerComponent {
+  title = 'Test Tour of Heroes';
+}
+
diff --git a/public/docs/_examples/testing/ts/app/banner.component.css b/public/docs/_examples/testing/ts/app/banner.component.css
@@ -0,0 +1 @@
+h1 { color: green; font-size: 350%}
diff --git a/public/docs/_examples/testing/ts/app/banner.component.detect-changes.spec.ts b/public/docs/_examples/testing/ts/app/banner.component.detect-changes.spec.ts
@@ -0,0 +1,59 @@
+// #docplaster
+// #docregion
+// #docregion import-async
+import { async } from '@angular/core/testing';
+// #enddocregion import-async
+// #docregion import-ComponentFixtureAutoDetect
+import { ComponentFixtureAutoDetect } from '@angular/core/testing';
+// #enddocregion import-ComponentFixtureAutoDetect
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { By }              from '@angular/platform-browser';
+import { DebugElement }    from '@angular/core';
+
+import { BannerComponent } from './banner.component';
+
+describe('BannerComponent (AutoChangeDetect)', () => {
+  let comp:    BannerComponent;
+  let fixture: ComponentFixture<BannerComponent>;
+  let de:      DebugElement;
+  let el:      HTMLElement;
+
+  beforeEach(async(() => {
+    // #docregion auto-detect
+    TestBed.configureTestingModule({
+      declarations: [ BannerComponent ],
+      providers: [
+        { provide: ComponentFixtureAutoDetect, useValue: true }
+      ]
+    })
+    // #enddocregion auto-detect
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(BannerComponent);
+    comp = fixture.componentInstance;
+    de = fixture.debugElement.query(By.css('h1'));
+    el = de.nativeElement;
+  });
+
+  // #docregion auto-detect-tests
+  it('should display original title', () => {
+    // Hooray! No `fixture.detectChanges()` needed
+    expect(el.textContent).toContain(comp.title);
+  });
+
+  it('should still see original title after comp.title change', () => {
+    const oldTitle = comp.title;
+    comp.title = 'Test Title';
+    // Displayed title is old because Angular didn't hear the change :(
+    expect(el.textContent).toContain(oldTitle);
+  });
+
+  it('should display updated title after detectChanges', () => {
+    comp.title = 'Test Title';
+    fixture.detectChanges(); // detect changes explicitly
+    expect(el.textContent).toContain(comp.title);
+  });
+  // #enddocregion auto-detect-tests
+});
diff --git a/public/docs/_examples/testing/ts/app/banner.component.html b/public/docs/_examples/testing/ts/app/banner.component.html
@@ -0,0 +1 @@
+<h1>{{title}}</h1>