From da2737fac36a27ef204b12f2a19923aaf97d880c Mon Sep 17 00:00:00 2001
From: Ward Bell <wardbell@hotmail.com>
Date: Sat, 17 Sep 2016 14:50:36 -0700
Subject: [PATCH] docs(testing): more scenarios

---
 .../docs/_examples/testing/ts/app-specs.html  |   1 +
 .../testing/ts/app/about.component.spec.ts    |  26 ++
 .../testing/ts/app/about.component.ts         |   7 +-
 .../testing/ts/app/app-routing.module.ts      |  16 +
 .../testing/ts/app/app.component.html         |   1 +
 .../testing/ts/app/app.component.spec.ts      | 161 ++++++----
 .../_examples/testing/ts/app/app.component.ts |   3 +-
 .../_examples/testing/ts/app/app.module.ts    |  10 +-
 .../app/dashboard/dashboard.component.spec.ts |   2 +-
 .../ts/app/dashboard/dashboard.component.ts   |   5 +-
 .../ts/app/hero/hero-detail.component.spec.ts |   2 +-
 .../ts/app/hero/hero-detail.component.ts      |   5 +-
 .../ts/app/hero/hero-list.component.spec.ts   |   2 +-
 .../ts/app/hero/hero-list.component.ts        |   5 +-
 .../ts/app/shared/highlight.directive.spec.ts |  94 ++++--
 .../ts/app/shared/highlight.directive.ts      |  12 +-
 .../testing/ts/app/shared/styles.css          |   1 -
 .../testing/ts/testing/router-stubs.ts        |  18 +-
 public/docs/ts/latest/guide/testing.jade      | 298 +++++++++++++++---
 .../testing/highlight-directive-spec.png      | Bin 0 -> 7965 bytes
 20 files changed, 489 insertions(+), 180 deletions(-)
 create mode 100644 public/docs/_examples/testing/ts/app/about.component.spec.ts
 create mode 100644 public/docs/_examples/testing/ts/app/app-routing.module.ts
 delete mode 100644 public/docs/_examples/testing/ts/app/shared/styles.css
 create mode 100644 public/resources/images/devguide/testing/highlight-directive-spec.png

diff --git a/public/docs/_examples/testing/ts/app-specs.html b/public/docs/_examples/testing/ts/app-specs.html
index 276659e26b..c41fbf88ea 100644
--- a/public/docs/_examples/testing/ts/app-specs.html
+++ b/public/docs/_examples/testing/ts/app-specs.html
@@ -30,6 +30,7 @@
 
   <script>
     var __spec_files__ = [
+      'app/about.component.spec',
       'app/app.component.spec',
       'app/app.component.router.spec',
       'app/banner.component.spec',
diff --git a/public/docs/_examples/testing/ts/app/about.component.spec.ts b/public/docs/_examples/testing/ts/app/about.component.spec.ts
new file mode 100644
index 0000000000..dbc7361823
--- /dev/null
+++ b/public/docs/_examples/testing/ts/app/about.component.spec.ts
@@ -0,0 +1,26 @@
+import { NO_ERRORS_SCHEMA }          from '@angular/core';
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { By }                        from '@angular/platform-browser';
+
+import { AboutComponent }     from './about.component';
+import { HighlightDirective } from './shared/highlight.directive';
+
+let fixture: ComponentFixture<AboutComponent>;
+
+describe('AboutComponent (highlightDirective)', () => {
+  // #docregion tests
+  beforeEach(() => {
+    fixture = TestBed.configureTestingModule({
+      declarations: [ AboutComponent, HighlightDirective],
+      schemas:      [ NO_ERRORS_SCHEMA ]
+    })
+    .createComponent(AboutComponent);
+    fixture.detectChanges(); // initial binding
+  });
+
+  it('should have skyblue <h2>', () => {
+    const de = fixture.debugElement.query(By.css('h2'));
+    expect(de.styles['backgroundColor']).toBe('skyblue');
+  });
+  // #enddocregion tests
+});
diff --git a/public/docs/_examples/testing/ts/app/about.component.ts b/public/docs/_examples/testing/ts/app/about.component.ts
index b2690f5a93..90e7132b4c 100644
--- a/public/docs/_examples/testing/ts/app/about.component.ts
+++ b/public/docs/_examples/testing/ts/app/about.component.ts
@@ -1,12 +1,9 @@
 // #docregion
-import { Component }   from '@angular/core';
-
+import { Component } from '@angular/core';
 @Component({
   template: `
   <h2 highlight="skyblue">About</h2>
   <twain-quote></twain-quote>
-  <p>All about this sample</p>
-  `,
-  styleUrls: ['app/shared/styles.css']
+  <p>All about this sample</p>`
 })
 export class AboutComponent { }
diff --git a/public/docs/_examples/testing/ts/app/app-routing.module.ts b/public/docs/_examples/testing/ts/app/app-routing.module.ts
new file mode 100644
index 0000000000..6096a513df
--- /dev/null
+++ b/public/docs/_examples/testing/ts/app/app-routing.module.ts
@@ -0,0 +1,16 @@
+import { NgModule }       from '@angular/core';
+import { RouterModule }   from '@angular/router';
+
+import { AboutComponent } from './about.component';
+
+@NgModule({
+  imports: [
+    RouterModule.forRoot([
+      { path: '', redirectTo: 'dashboard', pathMatch: 'full'},
+      { path: 'about', component: AboutComponent },
+      { path: 'heroes', loadChildren: 'app/hero/hero.module#HeroModule'}
+    ])
+  ],
+  exports: [ RouterModule ] // re-export the module declarations
+})
+export class AppRoutingModule { };
diff --git a/public/docs/_examples/testing/ts/app/app.component.html b/public/docs/_examples/testing/ts/app/app.component.html
index 3690f3cf11..232bcebb6d 100644
--- a/public/docs/_examples/testing/ts/app/app.component.html
+++ b/public/docs/_examples/testing/ts/app/app.component.html
@@ -1,3 +1,4 @@
+<!-- #docregion -->
 <app-banner></app-banner>
 <app-welcome></app-welcome>
 
diff --git a/public/docs/_examples/testing/ts/app/app.component.spec.ts b/public/docs/_examples/testing/ts/app/app.component.spec.ts
index 388e29a73e..2f10eec6d5 100644
--- a/public/docs/_examples/testing/ts/app/app.component.spec.ts
+++ b/public/docs/_examples/testing/ts/app/app.component.spec.ts
@@ -1,108 +1,94 @@
+// #docplaster
 import { async, ComponentFixture, TestBed
 } from '@angular/core/testing';
 
-import { NO_ERRORS_SCHEMA } from '@angular/core';
+import { DebugElement } from '@angular/core';
 import { By } from '@angular/platform-browser';
 
-import { AppComponent }    from './app.component';
-import { BannerComponent } from './banner.component';
-import { SharedModule }    from './shared/shared.module';
-
-import { Router, RouterStub, RouterLinkDirectiveStub, RouterOutletStubComponent
-} from '../testing';
-
+  // #docregion setup-schemas
+  import { NO_ERRORS_SCHEMA }          from '@angular/core';
+  // #enddocregion setup-schemas
+  // #docregion setup-stubs-w-imports
+  import { Component }                 from '@angular/core';
+  // #docregion setup-schemas
+  import { AppComponent }              from './app.component';
+  // #enddocregion setup-schemas
+  import { BannerComponent }           from './banner.component';
+  import { RouterLinkStubDirective }   from '../testing';
+  // #docregion setup-schemas
+  import { RouterOutletStubComponent } from '../testing';
+
+  // #enddocregion setup-schemas
+  @Component({selector: 'app-welcome', template: ''})
+  class WelcomeStubComponent {}
+
+  // #enddocregion setup-stubs-w-imports
 
 let comp:    AppComponent;
 let fixture: ComponentFixture<AppComponent>;
 
 describe('AppComponent & TestModule', () => {
+  // #docregion setup-stubs, setup-stubs-w-imports
   beforeEach( async(() => {
     TestBed.configureTestingModule({
       declarations: [
-        AppComponent, BannerComponent,
-        RouterLinkDirectiveStub, RouterOutletStubComponent
-      ],
-      providers: [{ provide: Router, useClass: RouterStub }],
-      schemas:   [NO_ERRORS_SCHEMA]
+        AppComponent,
+        BannerComponent, WelcomeStubComponent,
+        RouterLinkStubDirective, RouterOutletStubComponent
+      ]
     })
 
     .compileComponents()
-
     .then(() => {
       fixture = TestBed.createComponent(AppComponent);
       comp    = fixture.componentInstance;
     });
-
   }));
-
+  // #enddocregion setup-stubs, setup-stubs-w-imports
   tests();
 });
 
-function tests() {
-
-  it('can instantiate it', () => {
-    expect(comp).not.toBeNull();
-  });
-
-  it('can get RouterLinks from template', () => {
-    fixture.detectChanges();
-
-    const links = fixture.debugElement
-      // find all elements with an attached FakeRouterLink directive
-      .queryAll(By.directive(RouterLinkDirectiveStub))
-      // use injector to get the RouterLink directive instance attached to each element
-      .map(de => de.injector.get(RouterLinkDirectiveStub) as RouterLinkDirectiveStub);
-
-    expect(links.length).toBe(3, 'should have 3 links');
-    expect(links[0].linkParams).toBe('/dashboard', '1st link should go to Dashboard');
-    expect(links[1].linkParams).toBe('/heroes', '1st link should go to Heroes');
-  });
-
-  it('can click Heroes link in template', () => {
-    fixture.detectChanges();
-
-    // Heroes RouterLink DebugElement
-    const heroesLinkDe = fixture.debugElement
-      .queryAll(By.directive(RouterLinkDirectiveStub))[1];
-
-    expect(heroesLinkDe).toBeDefined('should have a 2nd RouterLink');
-
-    const link = heroesLinkDe.injector.get(RouterLinkDirectiveStub) as RouterLinkDirectiveStub;
-
-    expect(link.navigatedTo).toBeNull('link should not have navigate yet');
-
-    heroesLinkDe.triggerEventHandler('click', null);
+//////// Testing w/ NO_ERRORS_SCHEMA //////
+describe('AppComponent & NO_ERRORS_SCHEMA', () => {
+  // #docregion setup-schemas
+  beforeEach( async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ AppComponent, RouterLinkStubDirective ],
+      schemas:      [ NO_ERRORS_SCHEMA ]
+    })
 
-    fixture.detectChanges();
-    expect(link.navigatedTo).toBe('/heroes');
-  });
-}
+    .compileComponents()
+    .then(() => {
+      fixture = TestBed.createComponent(AppComponent);
+      comp    = fixture.componentInstance;
+    });
+  }));
+  // #enddocregion setup-schemas
+  tests();
+});
 
 //////// Testing w/ real root module //////
-// Best to avoid
 // Tricky because we are disabling the router and its configuration
+// Better to use RouterTestingModule
 import { AppModule }    from './app.module';
+import { AppRoutingModule } from './app-routing.module';
 
 describe('AppComponent & AppModule', () => {
 
   beforeEach( async(() => {
 
     TestBed.configureTestingModule({
-      imports:      [ AppModule ],
-    })
-
-    .overrideModule(AppModule, {
-      // Must get rid of `RouterModule.forRoot` to prevent attempt to configure a router
-      // Can't remove it because it doesn't have a known type (`forRoot` returns an object)
-      // therefore, must reset the entire `imports` with just the necessary stuff
-      set: { imports: [ SharedModule ]}
+      imports: [ AppModule ]
     })
 
-    // Separate override because cannot both `set` and `add/remove` in same override
+    // Get rid of app's Router configuration otherwise many failures.
+    // Doing so removes Router declarations; add the Router stubs
     .overrideModule(AppModule, {
+      remove: {
+        imports: [ AppRoutingModule ]
+      },
       add: {
-        declarations: [ RouterLinkDirectiveStub, RouterOutletStubComponent ],
-        providers:    [{ provide: Router, useClass: RouterStub }]
+        declarations: [ RouterLinkStubDirective, RouterOutletStubComponent ]
       }
     })
 
@@ -117,3 +103,46 @@ describe('AppComponent & AppModule', () => {
   tests();
 });
 
+function tests() {
+  let links: RouterLinkStubDirective[];
+  let linkDes: DebugElement[];
+
+  // #docregion test-setup
+  beforeEach(() => {
+    // trigger initial data binding
+    fixture.detectChanges();
+
+    // find DebugElements with an attached RouterLinkStubDirective
+    linkDes = fixture.debugElement
+      .queryAll(By.directive(RouterLinkStubDirective));
+
+    // get the attached link directive instances using the DebugElement injectors
+    links = linkDes
+      .map(de => de.injector.get(RouterLinkStubDirective) as RouterLinkStubDirective);
+  });
+  // #enddocregion test-setup
+
+  it('can instantiate it', () => {
+    expect(comp).not.toBeNull();
+  });
+
+  // #docregion tests
+  it('can get RouterLinks from template', () => {
+    expect(links.length).toBe(3, 'should have 3 links');
+    expect(links[0].linkParams).toBe('/dashboard', '1st link should go to Dashboard');
+    expect(links[1].linkParams).toBe('/heroes', '1st link should go to Heroes');
+  });
+
+  it('can click Heroes link in template', () => {
+    const heroesLinkDe = linkDes[1];
+    const heroesLink = links[1];
+
+    expect(heroesLink.navigatedTo).toBeNull('link should not have navigated yet');
+
+    heroesLinkDe.triggerEventHandler('click', null);
+    fixture.detectChanges();
+
+    expect(heroesLink.navigatedTo).toBe('/heroes');
+  });
+  // #docregion tests
+}
diff --git a/public/docs/_examples/testing/ts/app/app.component.ts b/public/docs/_examples/testing/ts/app/app.component.ts
index 156feee06d..9b785144ab 100644
--- a/public/docs/_examples/testing/ts/app/app.component.ts
+++ b/public/docs/_examples/testing/ts/app/app.component.ts
@@ -1,6 +1,5 @@
 // #docregion
-import { Component }   from '@angular/core';
-
+import { Component } from '@angular/core';
 @Component({
   selector: 'my-app',
   templateUrl: 'app/app.component.html'
diff --git a/public/docs/_examples/testing/ts/app/app.module.ts b/public/docs/_examples/testing/ts/app/app.module.ts
index adea748781..d3c288ad11 100644
--- a/public/docs/_examples/testing/ts/app/app.module.ts
+++ b/public/docs/_examples/testing/ts/app/app.module.ts
@@ -1,9 +1,9 @@
 import { NgModule }         from '@angular/core';
 import { BrowserModule }    from '@angular/platform-browser';
-import { RouterModule }     from '@angular/router';
-
 
 import { AppComponent }     from './app.component';
+import { AppRoutingModule } from './app-routing.module';
+
 import { AboutComponent }   from './about.component';
 import { BannerComponent }  from './banner.component';
 import { HeroService,
@@ -19,11 +19,7 @@ import { SharedModule }     from './shared/shared.module';
   imports: [
     BrowserModule,
     DashboardModule,
-    RouterModule.forRoot([
-      { path: '', redirectTo: 'dashboard', pathMatch: 'full'},
-      { path: 'about', component: AboutComponent },
-      { path: 'heroes', loadChildren: 'app/hero/hero.module#HeroModule'}
-    ]),
+    AppRoutingModule,
     SharedModule
   ],
   providers:    [ HeroService, TwainService, UserService ],
diff --git a/public/docs/_examples/testing/ts/app/dashboard/dashboard.component.spec.ts b/public/docs/_examples/testing/ts/app/dashboard/dashboard.component.spec.ts
index 7159bb820b..f783899143 100644
--- a/public/docs/_examples/testing/ts/app/dashboard/dashboard.component.spec.ts
+++ b/public/docs/_examples/testing/ts/app/dashboard/dashboard.component.spec.ts
@@ -14,7 +14,7 @@ import { DashboardModule }    from './dashboard.module';
 
 // #docregion router-stub
 class RouterStub {
-  navigateByUrl(url: string) { return url;  }
+  navigateByUrl(url: string) { return url; }
 }
 // #enddocregion router-stub
 
diff --git a/public/docs/_examples/testing/ts/app/dashboard/dashboard.component.ts b/public/docs/_examples/testing/ts/app/dashboard/dashboard.component.ts
index 7c7f4cc077..bc2b707906 100644
--- a/public/docs/_examples/testing/ts/app/dashboard/dashboard.component.ts
+++ b/public/docs/_examples/testing/ts/app/dashboard/dashboard.component.ts
@@ -7,10 +7,7 @@ import { Hero, HeroService } from '../model';
 @Component({
   selector: 'app-dashboard',
   templateUrl: 'app/dashboard/dashboard.component.html',
-  styleUrls:  [
-    'app/shared/styles.css',
-    'app/dashboard/dashboard.component.css'
-  ]
+  styleUrls:  ['app/dashboard/dashboard.component.css']
 })
 export class DashboardComponent implements OnInit {
 
diff --git a/public/docs/_examples/testing/ts/app/hero/hero-detail.component.spec.ts b/public/docs/_examples/testing/ts/app/hero/hero-detail.component.spec.ts
index 6c914a5011..272d69f579 100644
--- a/public/docs/_examples/testing/ts/app/hero/hero-detail.component.spec.ts
+++ b/public/docs/_examples/testing/ts/app/hero/hero-detail.component.spec.ts
@@ -187,7 +187,7 @@ class Page {
     const router       = compInjector.get(Router);
     this.gotoSpy       = spyOn(comp, 'gotoList').and.callThrough();
     this.saveSpy       = spyOn(hds, 'saveHero').and.callThrough();
-    this.navSpy        = spyOn(router, 'navigate').and.callThrough();
+    this.navSpy        = spyOn(router, 'navigate');
   }
 
   /** Add page elements after hero arrives */
diff --git a/public/docs/_examples/testing/ts/app/hero/hero-detail.component.ts b/public/docs/_examples/testing/ts/app/hero/hero-detail.component.ts
index 3b5555c481..1cbf5389b9 100644
--- a/public/docs/_examples/testing/ts/app/hero/hero-detail.component.ts
+++ b/public/docs/_examples/testing/ts/app/hero/hero-detail.component.ts
@@ -8,10 +8,7 @@ import { HeroDetailService } from './hero-detail.service';
 @Component({
   selector: 'app-hero-detail',
   templateUrl: 'app/hero/hero-detail.component.html',
-  styleUrls:   [
-    'app/shared/styles.css',
-    'app/hero/hero-detail.component.css'
-  ],
+  styleUrls:  ['app/hero/hero-detail.component.css'],
   providers:  [ HeroDetailService ]
 })
 export class HeroDetailComponent implements OnInit {
diff --git a/public/docs/_examples/testing/ts/app/hero/hero-list.component.spec.ts b/public/docs/_examples/testing/ts/app/hero/hero-list.component.spec.ts
index ea08cd499c..dbf9d37d71 100644
--- a/public/docs/_examples/testing/ts/app/hero/hero-list.component.spec.ts
+++ b/public/docs/_examples/testing/ts/app/hero/hero-list.component.spec.ts
@@ -132,7 +132,7 @@ class Page {
 
     // Get the component's injected router and spy on it
     const router = fixture.debugElement.injector.get(Router);
-    this.navSpy = spyOn(router, 'navigate').and.callThrough();
+    this.navSpy = spyOn(router, 'navigate');
   };
 }
 
diff --git a/public/docs/_examples/testing/ts/app/hero/hero-list.component.ts b/public/docs/_examples/testing/ts/app/hero/hero-list.component.ts
index d4ad30b019..625c402581 100644
--- a/public/docs/_examples/testing/ts/app/hero/hero-list.component.ts
+++ b/public/docs/_examples/testing/ts/app/hero/hero-list.component.ts
@@ -6,10 +6,7 @@ import { Hero, HeroService } from '../model';
 @Component({
   selector: 'app-heroes',
   templateUrl: 'app/hero/hero-list.component.html',
-  styleUrls:   [
-    'app/shared/styles.css',
-    'app/hero/hero-list.component.css'
-  ]
+  styleUrls:  ['app/hero/hero-list.component.css']
 })
 export class HeroListComponent implements OnInit {
   heroes: Promise<Hero[]>;
diff --git a/public/docs/_examples/testing/ts/app/shared/highlight.directive.spec.ts b/public/docs/_examples/testing/ts/app/shared/highlight.directive.spec.ts
index c5f13934b9..6c219ab808 100644
--- a/public/docs/_examples/testing/ts/app/shared/highlight.directive.spec.ts
+++ b/public/docs/_examples/testing/ts/app/shared/highlight.directive.spec.ts
@@ -1,58 +1,100 @@
 import { Component, DebugElement }   from '@angular/core';
 import { ComponentFixture, TestBed } from '@angular/core/testing';
-import { By }                        from '@angular/platform-browser';
+import { By } from '@angular/platform-browser';
 
-import { HighlightDirective }        from './highlight.directive';
+import { HighlightDirective } from './highlight.directive';
+import { newEvent }           from '../../testing';
 
-// Component to test directive
+// #docregion test-component
 @Component({
   template: `
   <h2 highlight="yellow">Something Yellow</h2>
-  <h2 highlight>Something Gray</h2>
-  <h2>Something White</h2>
-  `
-
+  <h2 highlight>The Default (Gray)</h2>
+  <h2>No Highlight</h2>
+  <input #box [highlight]="box.value" value="cyan"/>`
 })
 class TestComponent { }
+// #enddocregion test-component
 
-////// Tests //////////
 describe('HighlightDirective', () => {
 
   let fixture: ComponentFixture<TestComponent>;
-  let h2Des: DebugElement[];
+  let des: DebugElement[];  // the three elements w/ the directive
+  let bareH2: DebugElement; // the <h2> w/o the directive
 
+  // #docregion selected-tests
   beforeEach(() => {
     fixture = TestBed.configureTestingModule({
       declarations: [ HighlightDirective, TestComponent ]
     })
     .createComponent(TestComponent);
 
-    h2Des = fixture.debugElement.queryAll(By.css('h2'));
+    fixture.detectChanges(); // initial binding
+
+    // all elements with an attached HighlightDirective
+    des = fixture.debugElement.queryAll(By.directive(HighlightDirective));
+
+    // the h2 without the HighlightDirective
+    bareH2 = fixture.debugElement.query(By.css('h2:not([highlight])'));
   });
 
-  it('should have `HighlightDirective`', () => {
-    // The HighlightDirective listed in <h2> tokens means it is attached
-    expect(h2Des[0].providerTokens).toContain(HighlightDirective, 'HighlightDirective');
+  // color tests
+  it('should have three highlighted elements', () => {
+    expect(des.length).toBe(3);
   });
 
-  it('should color first <h2> background "yellow"', () => {
-    fixture.detectChanges();
-    const h2 = h2Des[0].nativeElement as HTMLElement;
-    expect(h2.style.backgroundColor).toBe('yellow');
+  it('should color 1st <h2> background "yellow"', () => {
+    expect(des[0].styles['backgroundColor']).toBe('yellow');
   });
 
-  it('should color second <h2> background w/ default color', () => {
-    fixture.detectChanges();
-    const h2 = h2Des[1].nativeElement as HTMLElement;
-    expect(h2.style.backgroundColor).toBe(HighlightDirective.defaultColor);
+  it('should color 2nd <h2> background w/ default color', () => {
+    const dir = des[1].injector.get(HighlightDirective) as HighlightDirective;
+    expect(des[1].styles['backgroundColor']).toBe(dir.defaultColor);
   });
 
-  it('should NOT color third <h2> (no directive)', () => {
-    // no directive
-    expect(h2Des[2].providerTokens).not.toContain(HighlightDirective, 'HighlightDirective');
+  it('should bind <input> background to value color', () => {
+    // easier to work with nativeElement
+    const input = des[2].nativeElement as HTMLInputElement;
+    expect(input.style.backgroundColor).toBe('cyan', 'initial backgroundColor');
+
+    // dispatch a DOM event so that Angular responds to the input value change.
+    input.value = 'green';
+    input.dispatchEvent(newEvent('input'));
     fixture.detectChanges();
 
-    const h2 = h2Des[2].nativeElement as HTMLElement;
-    expect(h2.style.backgroundColor).toBe('', 'backgroundColor');
+    expect(input.style.backgroundColor).toBe('green', 'changed backgroundColor');
+  });
+
+  // customProperty tests
+  it('all highlighted elements should have a true customProperty', () => {
+    const allTrue = des.map(de => !!de.properties['customProperty']).every(v => v === true);
+    expect(allTrue).toBe(true);
+  });
+
+  it('bare <h2> should not have a customProperty', () => {
+    expect(bareH2.properties['customProperty']).toBeUndefined();
+  });
+  // #enddocregion selected-tests
+
+  // injected directive
+  // attached HighlightDirective can be injected
+  it('can inject `HighlightDirective` in 1st <h2>', () => {
+    const dir = des[0].injector.get(HighlightDirective);
+    expect(dir).toBeTruthy();
+  });
+
+  it('cannot inject `HighlightDirective` in 3rd <h2>', () => {
+    const dir = bareH2.injector.get(HighlightDirective, null);
+    expect(dir).toBe(null);
+  });
+
+  // DebugElement.providerTokens
+  // attached HighlightDirective should be listed in the providerTokens
+  it('should have `HighlightDirective` in 1st <h2> providerTokens', () => {
+    expect(des[0].providerTokens).toContain(HighlightDirective);
+  });
+
+  it('should not have `HighlightDirective` in 3rd <h2> providerTokens', () => {
+    expect(bareH2.providerTokens).not.toContain(HighlightDirective);
   });
 });
diff --git a/public/docs/_examples/testing/ts/app/shared/highlight.directive.ts b/public/docs/_examples/testing/ts/app/shared/highlight.directive.ts
index 9c091b3638..4a45c8d5aa 100644
--- a/public/docs/_examples/testing/ts/app/shared/highlight.directive.ts
+++ b/public/docs/_examples/testing/ts/app/shared/highlight.directive.ts
@@ -1,13 +1,12 @@
+// #docregion
 import { Directive, ElementRef, Input, OnChanges, Renderer } from '@angular/core';
 
 @Directive({ selector: '[highlight]' })
-/**
- * Set backgroundColor for the attached element ton highlight color and
- * set element `customProperty` = true
- */
+/** Set backgroundColor for the attached element to highlight color
+ *  and set the element's customProperty to true */
 export class HighlightDirective implements OnChanges {
 
-  static defaultColor =  'rgb(211, 211, 211)'; // lightgray
+  defaultColor =  'rgb(211, 211, 211)'; // lightgray
 
   @Input('highlight') bgColor: string;
 
@@ -18,7 +17,6 @@ export class HighlightDirective implements OnChanges {
   ngOnChanges() {
     this.renderer.setElementStyle(
       this.el.nativeElement, 'backgroundColor',
-      this.bgColor || HighlightDirective.defaultColor );
+      this.bgColor || this.defaultColor );
   }
 }
-
diff --git a/public/docs/_examples/testing/ts/app/shared/styles.css b/public/docs/_examples/testing/ts/app/shared/styles.css
deleted file mode 100644
index b26317fa5e..0000000000
--- a/public/docs/_examples/testing/ts/app/shared/styles.css
+++ /dev/null
@@ -1 +0,0 @@
-/* MISSING */
diff --git a/public/docs/_examples/testing/ts/testing/router-stubs.ts b/public/docs/_examples/testing/ts/testing/router-stubs.ts
index 83a84fcb3a..75a2858f65 100644
--- a/public/docs/_examples/testing/ts/testing/router-stubs.ts
+++ b/public/docs/_examples/testing/ts/testing/router-stubs.ts
@@ -4,19 +4,14 @@ export { ActivatedRoute, Router, RouterLink, RouterOutlet} from '@angular/router
 import { Component, Directive, Injectable, Input } from '@angular/core';
 import { NavigationExtras } from '@angular/router';
 
+// #docregion router-link
 @Directive({
   selector: '[routerLink]',
   host: {
-    '(click)': 'onClick()',
-    '[attr.href]': 'href',
-    '[class.router-link-active]': 'isRouteActive'
+    '(click)': 'onClick()'
   }
 })
-export class RouterLinkDirectiveStub {
-
-  isRouteActive = false;
-  href: string; // the url displayed on the anchor element.
-
+export class RouterLinkStubDirective {
   @Input('routerLink') linkParams: any;
   navigatedTo: any = null;
 
@@ -24,17 +19,14 @@ export class RouterLinkDirectiveStub {
     this.navigatedTo = this.linkParams;
   }
 }
+// #enddocregion router-link
 
 @Component({selector: 'router-outlet', template: ''})
 export class RouterOutletStubComponent { }
 
 @Injectable()
 export class RouterStub {
-  lastCommand: any[];
-  navigate(commands: any[], extras?: NavigationExtras) {
-    this.lastCommand = commands;
-    return commands;
-  }
+  navigate(commands: any[], extras?: NavigationExtras) { }
 }
 
 
diff --git a/public/docs/ts/latest/guide/testing.jade b/public/docs/ts/latest/guide/testing.jade
index 51ba85876f..8d171fcdcf 100644
--- a/public/docs/ts/latest/guide/testing.jade
+++ b/public/docs/ts/latest/guide/testing.jade
@@ -13,25 +13,63 @@ block includes
 
 a#top
 :marked
-  # Contents
-
-  * [Introduction to Angular Testing](#testing-101)
-  * [Setup](#setup)
-  * [The first karma test](#1st-karma-test)
-  * [The Angular Testing Platform (ATP) ](#atp-intro)
-  * [The sample application and its tests](#sample-app)
-  * [A simple component test](#simple-component-test)
-  * [Test a component with a service dependency](#component-with-dependency)
-  * [Test a component with an async service](#component-with-async-service)
-  * [Test a component with an external template](#component-with-external-template)
-  * [Test a component with inputs and outputs](#component-with-inputs-output)
-  * [Test a component inside a test host component](#component-inside-test-host)
-  * [Test a routed component](#routed-component)
-  * [Test a routed component with parameters](#routed-component-w-param)
-  * [Use a _page_ object to simplify setup](#page-object)
-  * [Isolated tests](#testing-without-atp "Testing without the Angular Testing Platform")
-  * [_TestBed_ API](#atp-api)
-  * [FAQ](#faq "Frequently asked questions")
+  # Table of Contents
+  1. [Introduction to Angular Testing](#testing-intro)
+  <br><br>
+  1. [Setup](#setup)
+    - [setup files](#setup-files): `karma.conf`, `karma-test-shim`, `systemjs.config`
+    - [npm packages](#npm-packages)
+  1. [The first karma test](#1st-karma-test)
+  <br><br>
+  1. [The Angular Testing Platform (ATP) ](#atp-intro)
+  <br><br>
+  1. [The sample application and its tests](#sample-app)
+  <br><br>
+  1. [A simple component test](#simple-component-test)
+    - [_configureTestingModule_](#configure-testing-module)
+    - [_createComponent_](#create-component)
+    - [_detectChanges_](#detect-changes)
+    - [_autoDetectChanges_](#auto-detect-changes)
+  1. [Test a component with a service dependency](#component-with-dependency)
+  <br><br>
+  1. [Test a component with an async service](#component-with-async-service)
+    - [spies](#service-spy)
+    - [_async_](#async)
+    - [_whenStable_](#when-stable)
+    - [_fakeAsync_](#async)
+    - [_tick_](#tick)
+    - [_jasmine.done_](#jasmine-done)
+  1. [Test a component with an external template](#component-with-external-template)
+    - [_async_](#async-in-before-each) in `beforeEach`
+    - [_compileComponents_](#compile-components)
+  1. [Test a component with inputs and outputs](#component-with-inputs-output)
+  <br><br>
+  1. [Test a component inside a test host component](#component-inside-test-host)
+  <br><br>
+  1. [Test a routed component](#routed-component)
+    - [_inject_](#inject)
+  1. [Test a routed component with parameters](#routed-component-w-param)
+    - [_Observable_ test double](#stub-observable)
+  1. [Use a _page_ object to simplify setup](#page-object)
+  <br><br>
+  1. [Test a _RouterOutlet_ component](#router-outlet-component)
+    - [stubbing unneeded components](#stub-component)
+    - [Stubbing the _RouterLink_](#router-link-stub)
+    - [_By.directive_ and injected directives](#by-directive)
+  1. ["Shallow" component tests with  *NO\_ERRORS\_SCHEMA*](#shallow-component-test)
+  <br><br>
+  1. [Test an attribute directive](#attribute-directive)
+  <br><br>  
+  1. [Isolated tests](#testing-without-atp "Testing without the Angular Testing Platform")
+    - [Services](#isolated-service-tests)
+    - [Pipes](#isolated-pipe-tests)
+    - [Components](#isolated-component-tests)
+  1. [_Angular Testing Platform_ API](#atp-api)
+    - [Stand-alone functions](#atp-api): `async`, `fakeAsync`, etc.
+    - [_TestBed_](#testbed-class-summary)
+    - [_ComponentFixture_](#component-fixture-class-summary)
+    - [_DebugElement_](#debug-element-details)
+  1. [FAQ](#faq "Frequently asked questions")
 :marked
   It’s a big agenda. Fortunately, you can learn a little bit at a time and put each lesson to use.
 
@@ -45,7 +83,7 @@ a#top
 a(href="#top").to-top Back to top
 
 .l-hr
-a#testing-101
+a#testing-intro
 :marked
   # Introduction to Angular Testing
 
@@ -146,7 +184,9 @@ a#setup
     you can skip the rest of this section and get on with your first test.
     The QuickStart repo provides all necessary setup.
 
+a#setup-files
 :marked
+  ### Setup files
   Here's brief description of the setup files.
  
 table(width="100%")
@@ -424,7 +464,6 @@ a#simple-component-test
 :marked
   # Test a component
 
-:marked
   The top of the screen displays application title, presented by the `BannerComponent` in `app/banner.component.ts`.
 +makeExample('testing/ts/app/banner.component.ts', '', 'app/banner.component.ts')(format='.')
 :marked
@@ -436,9 +475,11 @@ a#simple-component-test
 
   Start with ES6 import statements to get access to symbols referenced in the spec.
 +makeExample('testing/ts/app/banner.component.spec.ts', 'imports', 'app/banner.component.spec.ts (imports)')(format='.')
+
+a#configure-testing-module
 :marked
   Here's the setup for the tests followed by observations about the `beforeEach`:
-+makeExample('testing/ts/app/banner.component.spec.ts', 'setup', 'app/banner.component.spec.ts (imports)')(format='.')
++makeExample('testing/ts/app/banner.component.spec.ts', 'setup', 'app/banner.component.spec.ts (setup)')(format='.')
 :marked
   `TestBed.configureTestingModule` takes an `@NgModule`-like metadata object.
   This one simply declares the component to test, `BannerComponent`.
@@ -451,6 +492,8 @@ a#simple-component-test
   But that would lead to tons more configuration in order to support the other components within `AppModule` 
   that have nothing to do with `BannerComponent`.
 
+a#create-component
+:marked
   `TestBed.createComponent` creates an instance of `BannerComponent` to test.
   The method returns a `ComponentFixture`, a handle on the test environment surrounding the created component.
   The fixture provides access to the component instance itself and 
@@ -458,7 +501,6 @@ a#simple-component-test
 
   Query the `DebugElement` by CSS selector for the `<h1>` sub-element that holds the actual title.
 
-
   ### _createComponent_ closes configuration
   `TestBed.createComponent` closes the current `TestBed` instance to further configuration.
     You cannot call any more `TestBed` configuration methods, not `configureTestModule` 
@@ -474,7 +516,7 @@ a#simple-component-test
 :markdown
   These tests ask the `DebugElement` for the native HTML element to satisfy their expectations.
 
-a#fixture-detect-changes
+a#detect-changes
 :marked
   ### _detectChanges_: Angular change detection under test
 
@@ -498,7 +540,7 @@ a#fixture-detect-changes
   It gives the tester an opportunity to investigate the state of
   the component _before Angular initiates data binding or calls lifecycle hooks_.
 
-a#automatic-change-detection
+a#auto-detect-changes
 :marked
   ### Automatic change detection
   Some testers prefer that the Angular test environment run change detection automatically.
@@ -805,7 +847,7 @@ a#component-with-external-template
   The `app/dashboard/dashboard-hero.component.spec.ts` demonstrates the pre-compilation process:
 +makeExample('testing/ts/app/dashboard/dashboard-hero.component.spec.ts', 'compile-components', 'app/dashboard/dashboard-hero.component.spec.ts (compileComponents)')(format='.')
 
-a#async-fn-in-before-each
+a#async-in-before-each
 :marked
   ## The _async_ function in _beforeEach_
 
@@ -992,7 +1034,7 @@ a#routed-component
   Stubbing the router with a test implementation is an easy option. This should do the trick:
 +makeExample('testing/ts/app/dashboard/dashboard.component.spec.ts', 'router-stub', 'app/dashboard/dashboard.component.spec.ts (Router Stub)')(format='.')
 :marked
-  Now we setup the testing module with test stubs for the `Router` and `HeroService` and 
+  Now we setup the testing module with the test stubs for the `Router` and `HeroService` and 
   create a test instance of the `DashbaordComponent` for subsequent testing.
 +makeExample('testing/ts/app/dashboard/dashboard.component.spec.ts', 'compile-and-create-body', 'app/dashboard/dashboard.component.spec.ts (compile and create)')(format='.')
 :marked
@@ -1169,10 +1211,187 @@ figure.image-display
   Here are a few more `HeroDetailComponent` tests to drive the point home.
 +makeExample('testing/ts/app/hero/hero-detail.component.spec.ts', 'selected-tests', 'app/hero/hero-detail.component.spec.ts (selected tests)')(format='.')
 :marked
+a(href="#top").to-top Back to top
+.l-hr
+
+a#router-outlet-component
+:marked
+  # Test a _RouterOutlet_ component
+
+  The `AppComponent` displays routed components in a `<router-outlet>`.
+  It also displays a navigation bar with anchors and their `RouterLink` directives.
+a#app-component-html
++makeExample('testing/ts/app/app.component.html', '', 'app/app.component.html')(format='.')
+:marked
+  The component class does nothing.
++makeExample('testing/ts/app/app.component.ts', '', 'app/app.component.ts')(format='.')
+.l-sub-section
+  :marked
+    This component may not seem worth testing but it's instructive to show how to test it.
+:marked
+  Unit tests can confirm that the anchors are wired properly without engaging the router.
+
+a#stub-component
+:marked
+  ### Stubbing unneeded components
+
+  The test setup should look familiar
++makeExample('testing/ts/app/app.component.spec.ts', 'setup-stubs', 'app/app.component.spec.ts (Stub Setup)')(format='.')
+:marked
+  The `AppComponent` is the declared test subject 
+  The setup extends the default testing module with one real component (`BannerComponent`) and several stubs.
+
+  * `BannerComponent` is simple and harmless to use as is.
+
+  * The real `WelcomeComponent` has an injected service. `WelcomeStubComponent` is a placeholder with no service to worry about.
+
+  * The real `RouterOutlet` is complex and errors easily. 
+  The `RouterOutletStubComponent` (in `testing/router-stubs.ts`) is safely inert.
+  
+  The component stubs are essential. 
+  Without them, the Angular compiler doesn't recognize the `<app-welcome>` and `<router-outlet>` tags 
+  and throws an error. 
+a#router-link-stub
+:marked
+  ### Stubbing the _RouterLink_
+
+  The `RouterLinkStubDirective` contributes substantively to the test
++makeExample('testing/ts/testing/router-stubs.ts', 'router-link', 'testing/router-stubs.ts (RouterLinkStubDirective)')(format='.')
+:marked
+  The `host` metadata property wires the click event of the host element (the `<a>`) to the directive's `onClick` method.
+  The URL bound to the `[routerLink]` attribute flows to the directive's `linkParams` property. 
+  Clicking the anchor should trigger the `onClick` method which sets the telltale `navigatedTo` property.
+  Tests can inspect that property to confirm the expected _click-to-navigation_ behavior.
+
+a#by-directive
+a#inject-directive
+:marked
+  ### _By.directive_ and injected directives
+
+  A little more setup triggers the initial data binding and gets references to the navigation links:
++makeExample('testing/ts/app/app.component.spec.ts', 'test-setup', 'app/app.component.spec.ts (test setup)')(format='.')
+:marked
+  Two points of special interest:
+
+  1. You can locate elements _by directive_, using `By.directive`, not just by css selectors.
+
+  1. You can use the component's dependency injector to get an attached directive because 
+  Angular always adds attached directives to the component's injector.
+
+a#app-component-tests
+:marked
+  Here are some tests that leverage this setup:
++makeExample('testing/ts/app/app.component.spec.ts', 'tests', 'app/app.component.spec.ts (selected tests)')(format='.')
+.l-sub-section
+  :marked
+    The "click" test _in this example_ is worthless.
+    It works hard to appear useful when in fact it 
+    tests the `RouterLinkStubDirective` rather than the _component_.
+    This is a common failing of directive stubs.
+    
+    It has a legitimate purpose in this chapter. 
+    It demonstrates how to find a `RouterLink` element, click it, and inspect a result,
+    without engaging the full router machinery.
+    This is a skill you may need to test a more sophisticated component, one that changes the display,
+    re-calculates parameters, or re-arranges navigation options when the user clicks the link.
 
 a(href="#top").to-top Back to top
 .l-hr
 
+a#shallow-component-test
+:marked
+  # "Shallow component tests" with *NO\_ERRORS\_SCHEMA*
+
+  The [previous setup](#stub-component) declared the `BannerComponent` and stubbed two other components 
+  for _no reason other than to avoid a compiler error_.
+  
+  Without them, the Angular compiler doesn't recognize the `<app-banner>`, `<app-welcome>` and `<router-outlet>` tags 
+  in the [_app.component.html_](#app-component-html) template and throws an error. 
+
+  Add `NO_ERRORS_SCHEMA` to the testing module's `schemas` metadata
+  to tell the compiler to ignore unrecognized elements and attributes.
+  You no longer have to declare irrelevant components and directives.
+  
+  These tests are ***shallow*** because they only "go deep" into the components you want to test.
+  Here is a setup (with `import` statements) that demonstrates the improved simplicity of _shallow_ tests, relative to the stubbing setup.
++makeTabs('testing/ts/app/app.component.spec.ts, testing/ts/app/app.component.spec.ts', 
+  'setup-schemas, setup-stubs-w-imports', 
+  'app/app.component.spec.ts (NO_ERRORS_SCHEMA), app/app.component.spec.ts (Stubs)')(format='.')
+:marked
+  The _only_ declarations are the _component-under-test_ (`AppComponent`) and the `RouterLinkStubDirective` 
+  that contributes actively to the tests.
+  The [tests in this example](#app-component-tests) are unchanged.
+
+.alert.is-important
+  :marked
+    _Shallow component tests_ with `NO_ERRORS_SCHEMA` greatly simplify unit testing of complex templates.
+    However, the compiler no longer alerts you to mistakes 
+    such as misspelled or misused components and directives.
+
+a(href="#top").to-top Back to top
+
+.l-hr
+
+a#attribute-directive
+:marked
+  # Test an attribute directive
+
+  An _attribute directive_ modifies the behavior of an element, component or another directive.
+  Its name reflects the way the directive is applied: as an attribute on a host element.
+
+  The sample application's `HighlightDirective` sets the background color of an element
+  based on either a data bound color or a default color (lightgray).
+  It also sets a custom property of the element (`customProperty`) to `true` 
+  for no reason other than to show that it can.
++makeExample('testing/ts/app/shared/highlight.directive.ts', '', 'app/shared/highlight.directive.ts')(format='.')
+:marked
+  It's used throughout the application, perhaps most simply in the `AboutComponent`:
++makeExample('testing/ts/app/about.component.ts', '', 'app/about.component.ts')(format='.')
+:marked
+  Testing the specific use of the `HighlightDirective` within the `AboutComponent` requires only the
+  techniques explored above (in particular the ["Shallow test"](#shallow-component-test) approach).
++makeExample('testing/ts/app/about.component.spec.ts', 'tests', 'app/about.component.spec.ts')(format='.')
+:marked
+  However, testing a single use case is unlikely to explore the full range of a directive's capabilities.
+  Finding and testing all components that use the directive is tedious, brittle, and almost as unlikely to afford full coverage.
+
+  [Isolated unit tests](#isolated-tests) might be helpful. 
+  But attribute directives like this one tend to manipulate the DOM. 
+  Isolated tests don't and therefore don't inspire confidence in the directive's efficacy.
+
+  A better solution is to create an artificial test component that demonstrates all ways to apply the directive.
++makeExample('testing/ts/app/shared/highlight.directive.spec.ts', 'test-component', 'app/shared/highlight.directive.spec.ts (test component)')(format='.')
+figure.image-display
+  img(src='/resources/images/devguide/testing/highlight-directive-spec.png' width="200px" alt="HighlightDirective spec in action")
+.l-sub-section
+  :marked
+    The `<input>` case binds the `HighlightDirective` to the name of a color value in the input box.
+    The initial value is the word "cyan" which should be the background color of the input box.
+:marked
+  Here are some tests of this component:
++makeExample('testing/ts/app/shared/highlight.directive.spec.ts', 'selected-tests', 'app/shared/highlight.directive.spec.ts (selected tests)')
+:marked
+  A few techniques are noteworthy:
+
+  * The `By.directive` predicate is a great way to get the elements that have this directive _when their element types are unknown_.
+
+  * The <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/:not" target="_blank">`:not` pseudo-class</a> 
+  in `By.css('h2:not([highlight])')` helps find `<h2>` elements that _do not_ have the directive.
+  `By.css('*:not([highlight])')` finds _any_ element that does not have the directive.
+
+  * `DebugElement.styles` affords access to element styles even in the absence of a real browser, thanks to the `DebugElement` abstraction.
+  But feel free to exploit the `nativeElement` when that seems easier or more clear than the abstraction.
+
+  * Angular adds a directive to the injector of the element to which it is applied. 
+  The test for the default color uses the injector of the 2nd `<h2>` to get its `HighlightDirective` instance
+  and its `defaultColor`.
+  
+  * `DebugElement.properties` affords access to the artificial custom property that is set by the directive.
+
+a(href="#top").to-top Back to top
+
+.l-hr
+
 a#isolated-tests
 a#testing-without-atp
 :marked
@@ -1204,9 +1423,10 @@ a#testing-without-atp
     Write _Angular_ tests to validate the part as it interacts with Angular,
     updates the DOM, and collaborates with the rest of the application.
 
+a#isolated-service-tests
 :marked
   ## Services
-  Services are good candidates for vanilla unit testing. 
+  Services are good candidates for isolated unit testing. 
   Here are some synchronous and asynchronous unit tests of the `FancyService` 
   written without assistance from Angular Testing Platform.
 
@@ -1254,6 +1474,8 @@ a#testing-without-atp
   Use the Angular Testing Platform when writing tests that validate how a service interacts with components
   _within the Angular runtime environment_.
 
+a#isolated-pipe-tests
+:marked
   ## Pipes
   Pipes are easy to test without the Angular Testing Platform (ATP).
 
@@ -1322,9 +1544,9 @@ a#atp-api
   This section takes inventory of the most useful _Angular Testing Platform_ features and summarizes what they do.
 
   The _Angular Testing Platform_ consists of the `TestBed` and `ComponentFixture` classes plus a handful of functions in the test environment.
-  The [_TestBed_](#testbed-api-summary) and [_ComponentFixture_](#componentfixture-api-summary) classes are covered separately.
+  The [_TestBed_](#testbed-api-summary) and [_ComponentFixture_](#component-fixture-api-summary) classes are covered separately.
 
-  Here's a summary of the functions, in order of likely utility:
+  Here's a summary of the stand-alone functions, in order of likely utility:
 
 table
   tr
@@ -1537,8 +1759,8 @@ table
         if you absolutely need to change this default in the middle of your test run.
 
         Specify the Angular compiler factory, a `PlatformRef`, and a default Angular testing module.
-        Alternatives for non-browser platforms are available from
-        `angular2/platform/testing/<platform_name>`.
+        Alternatives for non-browser platforms are available in the general form
+        `@angular/platform-<platform_name>/testing/<platform_name>`.
   tr
     td(style="vertical-align: top") <code>resetTestEnvironment</code>
     td
@@ -1549,7 +1771,7 @@ table
   A few of the `TestBed` instance methods are not covered by static `TestBed` _class_ methods.
   These are rarely needed.
 
-a#componentfixture-api-summary
+a#component-fixture-api-summary
 :marked
   ## The _ComponentFixture_
 
@@ -1560,7 +1782,7 @@ a#componentfixture-api-summary
   The `ComponentFixture` properties and methods provide access to the component, 
   its DOM representation, and aspects of its Angular environment. 
 
-a#componentfixture-properties
+a#component-fixture-properties
 :marked
   ### _ComponentFixture_ properties
 
@@ -1582,7 +1804,7 @@ table
         The `DebugElement` associated with the root element of the component.
 
         The `debugElement` provides insight into the component and its DOM element during test and debugging.
-        It's a critical property for testers. The most interesting members are covered [below](#debugelement-details).
+        It's a critical property for testers. The most interesting members are covered [below](#debug-element-details).
   tr
     td(style="vertical-align: top") <code>nativeElement</code>
     td
@@ -1598,7 +1820,7 @@ table
         component that has the `ChangeDetectionStrategy.OnPush`
         or the component's change detection is under your programmatic control.
 
-a#componentfixture-methods
+a#component-fixture-methods
 :marked
   ### _ComponentFixture_ methods
 
@@ -1665,7 +1887,7 @@ table
       :marked
         Trigger component destruction.
 
-a#debugelement-details
+a#debug-element-details
 :marked
   ### _DebugElement_
 
@@ -1855,7 +2077,7 @@ a(href="#top").to-top Back to top
     General
     * [When are end-to-end (e2e) tests a good choice?](#q-when-e2e)
     * [When to use the _TestBed_?](#q-why-testbed)
-    * [When to write vanilla tests without the _TestBed_?](#q-when-no-testbed)
+    * [When to write isolated unit tests without the _TestBed_?](#q-when-no-testbed)
     * [When can I skip _TestBed.compileComponents_?](#q-when-no-compile-components)
     * [Why must _TestBed.compileComponents_ be called last?](#q-why-compile-components-is-last)
     * [Why must _inject_ be called last?](#q-why-last-last)  
diff --git a/public/resources/images/devguide/testing/highlight-directive-spec.png b/public/resources/images/devguide/testing/highlight-directive-spec.png
new file mode 100644
index 0000000000000000000000000000000000000000..6eb88b2bd5922fa765e813287a0761db9977b835
GIT binary patch
literal 7965
zcmZ{Ibx_n{wD!-S8*~+<k=~^w1u5y34q-tWTtcK%K$d0+SzxIpL_oS+KtNf#yCtMk
zS~{=y&U`c9oqO*y?|aV7nfJW&oOAv-XHKM+hB6s39Wej^WU49(IskA7{qM>X-uq`+
zjU>qcfV%`*uk;jeZ*NCOM{jTcnE~MTHZ3i!tqoXPTg%DGF*i4tl$303ZIzdoKRyN=
z92~m4yJu%-Yin!u^z;x2ptrX-H8m9s247tPRaI4Q-va#nz{tpmvNEu}4RCUD=H>!E
zK0X5j12;Fo&dv@Q889^kkdTmshlg8PSp^0LHa0ezn3#}}kqr$EwY9Z1H#bvIQ0(pk
z9v&V_N=m}Q!eU~8p`jrkA0G<~i@3P>*47pr4rgKl=;-K{mzO~x5Ca24XJ=<!U0rEu
zX+c53;UVDb3-tH*H#9Wl=H{-g{UZjXrvv)>fR+{jw6)2~%5H4|^YinXnwskB>Zhl`
z<H!G4O`*|f6bcm=7q_tRFD?Mc%gf5j3J3t8P(WH*nw_0}brooC24Z7@hzQ`#8vuz!
zMnpuse-GH(0~{OxaB?y+G11l4B`7FpZVt%E0G*w{&!0efdHLidFgy%YR#t|DgeWKg
z&z}SD-@iXU2e`QbYHGmM)fI4YQBzX`#KpgV2U1din3#Xz16VB9(a~{w8UU1(>g$2h
zQUJKT#9%P9vj7ko3FzsKjRE=jKyWYsY-|8rT*AUYQBe_KW(Iux2#}F|{tN&h5U{rg
zjE@5q6#xbU{L9+h+`rTS4GsTDqfmglIshyzbaViKt*y~iEd>D3534H3>3L6Yr>i?G
z$<l`>({@3=GKM{bGUqZehtIl>2P-uPoAPj-;cqGOKCH)@ZiAviLwSxy{F1Lx>DIP~
z(0cWm?TLx{zZg$Zn!i~-YyO_N4=ho0FYSJ*CZaPG{)b|Plo+{lc?6zlq-Mcrt(C>W
z^-h&aH_t*q-+twz?2P!M$-5d{62H)YpcyL~`wC;d?YW~)DIyt6?5ceKDU<&=kwjl_
zqEb!Fm}S|c#F~cZ79v(rJieUU2K8tm`-6D_3Y@XtP!-Y8da$gTQ6P^1oMk)t?*Qyo
zYutCPr6L*dZzB?k{yh85)+t=eh29W5(R1A`3^fpolOtjI={4cHqjm9&4%eT0$q1X`
z;4#~AME=B^df0RBL`@l;Ga+<M2It0=gFr{)(s$l?Az}OR1s}rC-wi-y-RvU%2Dcr+
z<KsDpaUIq0y+TFzap>JC+e?_5{zWuM%da)*F|UrsV07T(dac#nrf_?ztS1wZPbsV4
zK`tWl;lDVP>tq^`n|WmMOht;|`*VDE)@=1SXF`rQmEnSZiKCqb9y_GOE2^GyBpzw^
z;Zmq~&5R{+L)3ir@_cLBT#90)nKA}Q6N~TozFjUZ>98$-WI!}%NqZm(>`)soI-fu>
zA;hGsVeBW=(o(;qv-RM8R>0OOByDEjNZ0H&NLY-NI=e9~y3p9DCrzAQJ1s|1>=2zK
zX6i^&B563ZX~R1IS(}!?!ah1z_fqvGon>DQZ{>OBHQm}qPRt-KThZ(S?=KR`e<L|$
z`MMxiNUWP}>y$5PI&G;?2`{YffyP{(>J$$rwb&W0Zo?N0Px(h5X&>Ud5Gh{Q4hkvi
zaN%mATiu&9m80JXj&3FtCl~T(fWYVdb7|sZJw{po<>hk{*p!emo)>S}HtTCvxvo2w
zz8RnpVnJCZeB6X}{rV$6mqBlRuQsv0pBv*y3BL$xCt+>D*1$c7$PDqsy}a^0coZ64
z8Ie;Fsd?CRFI+go9?bMrl<-fv^-Y0Pd7i+6W~mSn!X?K{;H{O~%;a``%<-Tb%us-O
z9UYx?eOjWPlE+Np?Hh3TLrSToyo$(!EW>&zCyuM4?D_qQ0K?@&O|+x&o5~SKlcc`<
z*5LO>D%kHb0cA9?G-7i61=mK>a64ggM}sy0Z?D8(SjUjtag57_&lz`dLWlScG}@oY
z63^iuFLu(EOl>Fy?nO<wFTHgx%Nj-?4o2_1EZeDgCZzB>x)XliM+i=I>M7V!Sr=%h
zXwlzU^&~s2BzysyEML%^6Xl3h62~osGgwlsq}st0hOO1HAvZ!*hcD^sHu*_EX%4Ks
z(6hP7sSQw+$c#KU4G}Bpz0tGYglScLh{5srGAT`~o+)+5Ju+_TMH-{jNjCN1nE376
z>MU)S$ho!orgfVmI(v~475aq9aJe>^urDS_2b+CFaONh&>pLD@3tcHbAmDWua8Sww
z9;yXPJHDoukVu{PVN1q+a7i!2(+pd;U{SU(t|VF{FuL-%0n#U1%nb*NLN^FNB@2{W
zO75x(LYbY_k0ZTp?!wZ@Zr<M13+LvQwq@tN`|6PT^tgLa>rV&;XhR8Dc<Qqp`5U@o
zR2fDXy<UwGR%j!%QQZGXK`BE&%->3|8*M$#%Gc7QqHHL~ta4;Jf#BJ)*nPotSZg+c
z@cMLY<PRqvLe(>Mpa$#}{=VSu49Mn`l&=T5wIcbev;S<+&>b_hwtun>km0o%VYMih
zBqse8CeU3?xl95Z8uxj~cBXy(4$Ew20J$Q>|H9G}#zfgTT0NEY9qq@cM)p2DxIo(O
zjgCZ1;((|v2P8Y-p5W&h+j~ifDDR&jN2!XOIRuF6?e5X49O<Z}aQ01*%->vls-1_h
z=#5DM*N3Sxk^NU8k4J2GiMk8$Ho|5PjOk#Db|$@Z$A7TQuU+G6$snF0=s%2X{&WOG
z2tptbU4)1CM+qk2ltr;BHD5e^{Q2?7K=?z+FKG2ys~xqz>*OKU92r@jV9*WzR2XRK
z;8UeX!4z%v!m|ZM2pyJL<eT^S)c9V$is3XxCmU@wy$R}ZUqw#KOA@r-uWCb1<H?-3
z?<93!S_+*xAb)V9Bc1oQ4LEv{K8f%Hb*Lz$`{$!S%Aqoq-bWFFt+NQ0??2u^#BYu?
zY0GBh+HflPkdzj`@(~2h)13nW1cdV43Wsmv_Z0F!snx<mn9r9w2E15nSfmAk8jS;`
z(`9KjWlh@BS%H#}ePNuI=>CWrxNx<E138&pfXP>x{nQ7uTr_t#wV=whnMd5u$4x~s
z@Z%~$mW<V%v3pMgiMY!r<b9_wI3*H?ydC3(zN{nd&`}Lf$e}EOc5l&98{(ci&IKh$
zBFHF`6x&&oySi_0Vte0uEXQaHL-2s{NDq=Sxi>t%blr?}ICOST*C+9CV#@OO<1jeG
zZ_eWM1wmvm3dR=gmam|vWYzSw?dP**_Laqvz1E{o9_Umr1S|l@51FW)_|L+q_013N
zT92WAbZ3d=uz6S2<lO7Fy~o)V2$vHnr<5AVQVJEY5uZ8=dDm|;m|5gRI#w(UDItW&
z^;_4ui5j~=xC%6@TlY*|s}4W2(<0Xn-RuSLapGexDAUelO{<BzvP1c#-qfEQ2PEA2
z!&aANovwTenS#zMNHSm!!?l-svgcliNxoj@!=KM4b}xsuLYiMkKe<Y{n#^W8N6@v}
zVw4v!KWZAL?nQ-#Ai`#oJS<P?!sx-yC8+4o<JHX=?mgos^$$`QBNgk>7Ka?KK0?V|
z{<FN&h5h0m8Q2fJOUqZ}T6&>4j)#$EH<z5T`_66N`ccB6dM4qA4oxFTDkX!Fx3ny?
z9X}l(%Yw}$GRv78$eoL>ZR=TaJ_?-RXM*Zq?kvXMWx_VjbQ{XYLFj&KWQITTdU-v(
zNp4VEEhXbQSi(MOQzMv1UCW6Jg1VX*S&dP%MFq9Jet{NfE0BpW&FU6yl_K%FQI`0z
zCw3PT&?N_rHYhxA%T3SqR|AF)SbrxY@qZb1ICM<%$|h8rYgzqqIb5QwFc4^5<awKO
z8;Vw!xGEeC`2A=hx(5%H3%W@_&B6;4w!3bJgfrXB#MWt&*P=RCV)o(GvrpbONo{2r
zjg^*=tav==Nifl>N|!Mm0#iiVwlb$qrQha;QxRexpJTTpK`rZIP48bxLoRbxe@OZ-
zkuQ!`F~R!M=^5syI5Y(>PkM;O9%iAhho~Kk`Quke_~Jg8p1eeYN?^khEfAMg8cm2_
z4*OO4htW$7xDr1^nFO}^NwY5i&Jy0P=o<IEEMc%O6V9UWUiwvj(34X~Yx=+?2y&3o
z?ic^R8Ege9|5=Oc0deU6q0agTe*NGe53%?VF6aD4`#}TY9Xq}QWLtI)71e9rf?B*6
z1q98RM`NbM5N|HO>CBTKw>xRpN2(ZgD@QQnTHRR68OPt7wdD*ij)&C$H++>9HZGo4
znB?6@7biBkCQ%!f>D=wrS2M3uBLctX4qD~$ST$6tm61#ooxfOd8`CU#(|MRpH>j<4
ze36@y)U8q2Ek=!M6k!z#VkUtmHhz&}`9*(;VU}wTAohSI%mlsCNHowo!5QQ8xkU>p
zb{DD{G(_go=*WE~r`@S65wZMi5szOvF5BWF09J6g2h~!|tC5e(P0nI>MexY<r<1?U
z59)kC#N{(f8ey|v@LsP>r%jYCRRxCaqrB7GnU|L|!$K|rR&w!rk5XM8K#5)sRD9aL
z{$*$`oXlP&sxlRt9;;E%K-ODW(p{=*u7A%W-j>0JO@hU!UpUa&I4?US98aYDK$cky
zoyF!&=~ecM7Oh5Nh~RZ;va~<y-KDf`B;y#w(B-|gOm#C{5z|x}$$42@^~d?^?39nH
z@FP*sA?8cWQ}Q>4X@eoHmPObcpQF)5bC!qc$i|b!kz&EG(zF|Gce#5kj6B7`;);LR
zC{v8|>H}jjQ>0IjdU*rW3oSZ{;@}$4XG^(XACz5=Fxsrwg}l|c6*j{m8*hvAxm@f9
z!n%mrZC}1aUPpavOEM@gm6g#@t(3$(K5A^liYG;PuoKZ7B^Ium|D<U!@t{qA*K*2m
zOf;{9AvTCT<Dex6B;Sr8M%17A7_OAo)>X^f8A*S)heDF5*zXv28LH@gcAu7{zY9(B
zwqW`DsZwC-LDIo!MOSUq*E;PCo#!(2(zGcI^bS;_Xtn4D8rySv5SKNWFdnXdAq8%I
zjYmLPKkldZL{#(AMcF%PWYI#7{o05{%Ng9Q{z}{OiI<94^efWo!u~K$i)Ofn)x+N%
zeuh}1FJ)TOj`M|bmGBrZuH-(VCN(#Dn7zKn@wRu4R}rn}QyKkb{JDp=b8KHXLU*xe
z0Eqh{0~U4ag7S}i?_bfxxI_NKk@@dOP-Ysl*?!VFWhBe`TgKk`sd%{n#Ap{~K4F9A
z^W}sYi$>oH$<>@UIMGx0aubD?>Wb9<I(i||_hPD<F?m0SxpmdqUKO3&)aRxZ#;*P4
zHgsmHKdET8s9g6_YE(w?PrQ6(q^@L1nB@b;sc&T(u2eN3%kGxfuB0}9I3CI#TkFYR
z7%eHWU7mPqZs8iQgG*_@$fzGA;f`da4&M+MY|8mVq+Y#d^q46xrbT`()M%2I(;~i?
z>w7p^84Yq9jxCj+HucjdlF%SMW_nSvzs7v>tfEJlOY!(L@yPbFXx>>k#B`cIm(ocz
za7K5Tn`CF@-Z^$$>eEZ^%$QK8crk}>!xsZn6mxm?b|#0-i1Pgu3|TVM@ccJ47Rzf&
z6e^^>AaTzslBaBYp!GpakBr1v(M?MCjK2f-?wkV3j&oYBv+=uv<GTiEbPDhHB~mb{
zbIY$i@_yfP1tU9Wvp{ggl11xIXQk_g<QIYPx0i%y)`6y;Lc<b?dV`tkjJ+pmLT?+}
zzLDZ|pvV_K(d^qj2CG*p(RB}8db4|_+5$=x?pZCq+Yh*pY*n_Q2Z5^hS->u%G}mbX
zlJ`l@s^aC`np3W<!LdIBvaSU{COXwJR!s%?+ig;g&H*KDMupC-q+l)&FJ}(4Sa%Xc
z)<Le_>J7q&$Fg?tWjP{Vl#UT?J?-Lix4M-8Io9!M&m#D*Ro>k2C|fjS(Y(2Q-@DtL
z8BF!M7m0<t#Z=<Sc`C?BD<faC56Jy-u2=}stv3AxNbK1KpR$2m`H^@oOD7xDTz9|`
zju~_VTVpZo5|v-=t!Rd?Y4)-|zzxr;eXquzkXUByHnoO*Wx6y=I_q7nV7@Pl?KUJc
zNZdToq%Ot7xyhZE&1(d;k05CEy=Hq`p;n7oeN528*cB4Tv-LI}ybMvsoJZ{~mXr#a
zu|LGNF8vJ0R5IwG?v}4$nANvlXx0^)3a({YL#^GSwwe77q1ne{CKf-rK;o3TY$fQN
zmEVRsx(<;PFQw^Nc!lw=pyth3Uq(tORiyvae(Olww^t5RhS>2+Kjem$#QK?eyqUWn
zPpg&ci>mvi_*Wzr!v+ylnw=<&Ic;=pvsJT>o0pI0M=1jh(odD*s>q<qF5`}+$0Sus
z!m)R5sqYAZYt(`&q8lEZvrg@|-PKfQ8t6dv`&h(J&!#@Xd)7W$!Thqz($;*@U{YYA
zRe-fV&a(N7MYXwJqJQPn(J9MCi{MV3Hky!_&>st=JU_WtIhfHpNdI<==EF3_m`)x3
z&``WZRsXgqU9KN-cp}74P~K0Z&`+!Abf`FET{Q<K%)rpQEO!_4-BcTh%GH`Hzz5?6
z<lqgCA%5BEs5cwodHOy~Bz)RtrEE1KTK(w^2?Xd}z>2kI&u8kR?)m`d*|=3B0jS!U
ztFeaZo1SRp4Fx)xVe%Mdj9FPb>b{$~sQ`wbJ#+iQyjn@xJF8Ro-jXS#F4f^AbMCID
zSC&UyY;hhqhFC_+JV4ECsE+|_Fs?-m?Acf~FR8wEukVi@IcGZY21}IxQ5YM>nsk1+
zcSrxX-QqfzZd*%Tf+Iq<K)RT-`yO)4mh{XY(=RE4gEU+K*5=Wi0k=}D<c!EPHQoFa
zhu8j*HhGc`sn$`%>817q{oY+JSrsBb5>ytSQ#?6j?zm`7jppir=}#<uN3jdio(A;Q
z$Rw+ih)KM*Si9N{^d|Ww#U)a`EA+;mI-XaIjA3T_7cpDk7nzzoTo=j7un`e9&96y0
z+VIac6EtzYm?F(D54Y3(`8YN|ar2U?dry(LJwWsRVMV-`P4-aEk$qU6U7>65_EoI*
zrMI`ro4jYUcb~^2iQDDNpdfg_%h2a3^~H(O8G?JwQqvS2>h%|X1$=_9Ya7K$&xYvy
zAIGhJC=B*Y(6Mq&sLPG99?$NdypdKf*4)i)Eu7&HxiTC0v^&C(=J1uU{KxA7?FPH@
zlA>{wYO%pXqVkfl2mW-lRT!~%zd7Q<Dh(o$gLMK6Tl4srPwhn9DUu)PTxgYdh=79d
z{wlj)B-7|z3}yGCPnm;4Rr#0|>OW!;0W!&bgy+0dZ0v4VzTr&>W(Jz5p}ZQS2w~BV
ztCP0@xKB+>q$5naPd`}rbF2A|x`)l*^x?=kD!%{b@=fSwZxi+4L+$LM0#)}useZf<
zQi0K>kcYFESetXV-X<9YwHG>;JZm6LE|9Bqnf|P;UT90m8MJyf&;Em>n>~@o3+^B&
zmFXvab34yY2v+8KH@Px;RJwSe_NmD=?}GK|KODuq5U2dFb?;%|yZie89aEB7lfnqD
zSWTbAcR6~s1^0=Y1;Wp))D_vsleXwc)Scu=I_QZH#!MagBnV%qXm)e2U)6eeDdDUP
zO6&1WzGdk~|Fz}Z`}XX;r=iNfUF-kDN8E6%-??M#JNy8zmtyJzo)j4zh6F0V8Dk>L
zC&*fsj!5Tr#TD7q$V4BRNYZCqli?r3DdP`3;~z1wG`2{c%c9gY&W~#ef}_I|=!~fY
zgjHc@CN%z-M+Y)`3cErcRjP-IrhH&{DndERKGyghHk}|a;W!V}Vb6`q)gyu>g>e`M
z!BgmavZhkBjEDnU@5ilFe1*_!c{<hekI{EJb#qWzAitj$f+o(PD6B*hg2R}xMDWr-
zxv*sar*jQp>g*tQ<@ycpN&`GG;ypCwiF(?6^t?2ou^yC51QU?dG6tbA>ANbH?bC=)
zbq?*nCmcR2EZbC9(0N+^uHNVHv~;jvd>^wju2YCwdB4tH4eY@_K7tT{-j$>GmGic7
z9FQ35ci+%(oC?b7#uwYxf}MkH{{mN#o5rA(LTldi7M#RqkEImm9Z%InsD;ur%0Z-b
z3m#inH)N#3&Wt8<2D{^+_K}U(Lu@=`9&Y*QjdK5<+N=(%Ma>t}zL36GU$z^n;jcle
zQM8S*AYoaU%)?Du7k#J<l>8^>?gTYwnr9i=;r$gA%9g+*>*MI2wGQ{u($<L_=^f7g
z^?w7B-v(`&$6tkWUN<txZY#~rfWf;rDX`hJywz-ZYTo6E7FcNEfaF(U)|qu>CR@AB
zd`{4B$vbweW^gLaOYfo(kYED&%O%c(>mt}}IA;~6y>3H4Q&1MEeapD0EN`vv=3r4r
z{XAJrzmoq+civ-`;}5m@9%SpCecnydhHXk*Hi0ncXbP!}UdLQRJ?MBpH*iz03iIq4
z+008CSexZ@qhdbEXISjC+WMO+T65;FkdO#tJE2V8Ks)W80LK!%Q8=@!cH7*aktKYX
ziCs)W7o*eF=(Hh;2EDrv{bsB(%;g?o<-N|<IX#sT1%(kaSYlOH5jX62ovSvv&qR)X
zd#LcM;<mlbjK|o=Z*PZDg}t_vrVFDi5h`{!BRPrJSZ=KOS^b4Y#S-h<1VZu=*|85y
z#jFG`LCwBdkqSYGv(xTv972o~6@T6JgJrMc1%XsMSeq9GHw#90F+LMI?K;7Vj&C5T
z7rFPqmXf(PIw$cY8M6`%F+Srhzq!pk__S{(M@BBngd0$+f#KNfZJ9~x_?QDbf5;T`
z-YMsd(=wv;E8de8hjsqPBN3hsU;jNB9Lvf3;n2LC>u$kODF=H=qO|iJJ{1Gb*g=Dg
zPU4ZzUXEAQ#!n-@wJ3~^mF@77I`jpDKpsD&j(kesr@kGY>Ler#C^An=C&;ffF$iKn
zKod2?@ir4H@Vn$w+u5iE6s~#>Me6?hYI<`m%lPT^Apb*T!RvOTD>~Rdol&`hbx1jj
zO*{yFlnl~7QRLIo*h^|nzBuQ=?l;VUg*Nn|N1ErnZxM52OAoZ*K5oG#N2e~ntJ=t4
zBF+)ZM$oc|NwVY#*2(2kg<?yy&?<hnphs0<Yb(D-dP<Hi7_lKeYOr*Cc2=l;T^7~+
zMdtv+-x?x37a(xByJZKZP^JAfA_~twjnyjtLO;jj$J2C0e3au(n?i$o!Pw`m2b!sW
z-|@yqd>M?QGv|uD!S#1A=PvL2?U7qbhzB~4S+%eRId6?`w$Pe78q^%=3*%NQR1Wu}
z$~+lMY9FL$*iL%w#i*33*7Nw_i)%7DdX~zIvU}R?4o31WE_ZJ(jp<7|SwCugB~IDD
zr719;0C)abu{j6LF~6Li+jK~%C<r#v&v@1I*>T}dXLT4<UHtc?NgZyG@p7Q3?8AZG
z@|<mv-Xu>Ty8Q~T5<V|-%3srlVB*$fNeAJspGkMu8`$ASJYGEeu90ir`Xh)PnzZEl
zjB+};LglkbSk(?w?x&<cjnL7Lq!vyGF-if#@94E_oTK(ReyzoGUtF9<O6ZrVgdN;c
zA)g&vKmGmLzUzDGN}I895r5rg>W9+j^{gxqsaw>F&9gr50;|efIgn!eaM7(5fo0i4
zZ2sR*uWE~mRTc8N^oP=n&#cpm%1Y8*%|*}nzBKpR-uangScI}(esA)0vx8yg$Ocm%
zwRz<IgtEO0J#q9SbFholO1HqtKv`jOZDn0e4k|T!Jw@+eERDDBpP7=Gr$*1eakqOU
zs$?UCX+S3vo?rYyb+JpI!DbcJeCW!*2)uRR&qcn#+o_vR9(!=)8`E+p*(u~ji*+tr
zt@!Q3j9Gp(Jx3AKA9cn+@?sCn@XY#|6Ul#dz5gaY%4`oe69vmYP#g|A7e(XeBNEN2
zmUJjFiuWJVP`_&8d1hr#D24Ge$m*Pb^Z$A7Q|Nc|Y3S<<%<-_lr7F{L2CecagLqN8
zN+4D1c!mE(9QEp$N#5FfezPD#kLms}zKtzr`fJ}DPMLh=!l>~pKJVtt(`n+wV&?g&
zZB2~kpKxLFjQ6J)8^*8ho#`22x+m`@oeVhcHw%ywNUyI`xf3#me18xEdzzxBA@eOY
z_{u$ia&3m3_1LtyU{!sCSNhwmAt%tN#)4r4+&!Bu_wGi_Pbb=}exx;OvJ)188m-;@
zl2;LHBPI|y)nVp}jlfl@{0)$f$+zY1&ELKIJ{^TWOQ2x;I~ZFIW{@>f>oNjKF14yu
zr)pDtw1Zgnos{^WW`kEh+(N`ZJa+FHySRCLU)+Y9zZ|0d^^y6I&?`x1M*EjzI_RZC
zjXnUm^%lt3%1|-djy*zEJxE>$&2^8vDqOZXMZj=9Wv9M$+)yK*9vt^c>SCzw6IL4G
zbb2N%O=4ayh8=2@+l(hHa+$T7LT)0b`>h=OP4|Y+8Be{xu__`w5VIkE2sYx&Eu^(6
p)Y<XM<&P@Ti~P?+DNlG_D)YAWX4o5<^zuJzr>dx-P$qAV_z%_OHN^k`

literal 0
HcmV?d00001