docs(testing): fix hero-detail impl and use done for observable tests (#3270)

Author: wardbell

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

@@ -174,7 +174,7 @@ class Page {
   }
 
   constructor() {
-    router.events.forEach(e => this.recordedEvents.push(e));
+    router.events.subscribe(e => this.recordedEvents.push(e));
     const links = fixture.debugElement.queryAll(By.directive(RouterLinkWithHref));
     this.aboutLinkDe     = links[2];
     this.dashboardLinkDe = links[0];

public/docs/_examples/testing/ts/src/app/bag/async-helper.spec.ts

@@ -1,3 +1,4 @@
+// tslint:disable-next-line:no-unused-variable
 import { async, fakeAsync, tick } from '@angular/core/testing';
 
 import { Observable } from 'rxjs/Observable';
@@ -31,26 +32,37 @@ describe('Angular async helper', () => {
     p.catch(() => { actuallyDone = true; });
   }));
 
-  // Fail message: Cannot use setInterval from within an async zone test
+  // Use done. Cannot use setInterval with async or fakeAsync
   // See https://github.com/angular/angular/issues/10127
-  xit('should run async test with successful delayed Observable', async(() => {
+  it('should run async test with successful delayed Observable', done => {
     const source = Observable.of(true).delay(10);
     source.subscribe(
       val => actuallyDone = true,
-      err => fail(err)
+      err => fail(err),
+      done
     );
-  }));
+  });
 
-  // Fail message: Error: 1 periodic timer(s) still in the queue
+  // Cannot use setInterval from within an async zone test
   // See https://github.com/angular/angular/issues/10127
-  xit('should run async test with successful delayed Observable', fakeAsync(() => {
-    const source = Observable.of(true).delay(10);
-    source.subscribe(
-      val => actuallyDone = true,
-      err => fail(err)
-    );
+  // xit('should run async test with successful delayed Observable', async(() => {
+  //   const source = Observable.of(true).delay(10);
+  //   source.subscribe(
+  //     val => actuallyDone = true,
+  //     err => fail(err)
+  //   );
+  // }));
 
-    tick();
-  }));
+  // // Fail message: Error: 1 periodic timer(s) still in the queue
+  // // See https://github.com/angular/angular/issues/10127
+  // xit('should run async test with successful delayed Observable', fakeAsync(() => {
+  //   const source = Observable.of(true).delay(10);
+  //   source.subscribe(
+  //     val => actuallyDone = true,
+  //     err => fail(err)
+  //   );
+
+  //   tick();
+  // }));
 
 });

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

@@ -72,14 +72,14 @@ describe('use inject helper in beforeEach', () => {
     );
   }));
 
-  // #enddocregion FancyService
-  // See https://github.com/angular/angular/issues/10127
-  xit('test should wait for FancyService.getObservableDelayValue', async(() => {
-    service.getObservableDelayValue().subscribe(
-      value => expect(value).toBe('observable delay value')
-    );
-  }));
-  // #docregion FancyService
+  // Must use done. See https://github.com/angular/angular/issues/10127
+  it('test should wait for FancyService.getObservableDelayValue', done => {
+    service.getObservableDelayValue().subscribe(value => {
+      expect(value).toBe('observable delay value');
+      done();
+    });
+  });
+
   it('should allow the use of fakeAsync', fakeAsync(() => {
     let value: any;
     service.getAsyncValue().then((val: any) => value = val);

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

@@ -30,13 +30,17 @@ export class HeroDetailComponent implements OnInit {
   // #docregion ng-on-init
   ngOnInit(): void {
     // get hero when `id` param changes
-    this.route.params.map(p => p['id'])
-      .forEach(id => this.getHero(id))
-      .catch(() => this.hero = new Hero()); // no id; should edit new hero
+    this.route.params.subscribe(p => this.getHero(p && p['id']));
   }
   // #enddocregion ng-on-init
 
   private getHero(id: string): void {
+    // when no id or id===0, create new hero
+    if (!id) {
+      this.hero = new Hero();
+      return;
+    }
+
     this.heroDetailService.getHero(id).then(hero => {
       if (hero) {
         this.hero = hero;

public/docs/ts/latest/guide/testing.jade

@@ -1105,17 +1105,15 @@ a#routed-component-w-param
   Here's the `HeroDetailComponent` constructor:
 +makeExample('testing/ts/src/app/hero/hero-detail.component.ts', 'ctor', 'src/app/hero/hero-detail.component.ts (constructor)')(format='.')
 :marked
-  `HeroDetailComponent`  listens for changes to the `ActivatedRoute.params` in its `ngOnInit` method.
+  `HeroDetailComponent`  subscribes to `ActivatedRoute.params` changes in its `ngOnInit` method.
 +makeExample('testing/ts/src/app/hero/hero-detail.component.ts', 'ng-on-init', 'src/app/hero/hero-detail.component.ts (ngOnInit)')(format='.')
 .l-sub-section
   :marked
-    The expression after `route.params` chains an _Observable_ operator that _plucks_ the `id` from the `params` 
-    and then chains a `forEach` operator to subscribes to `id`-changing events. 
-    The `id` changes every time the user navigates to a different hero.
-    
-    The `forEach` passes the new `id` value to the component's `getHero` method (not shown)
+    The subscription confirms that there are `params` and, if there are,
+    plucks the `id` from those `params`.
+    It passes the `id` to the component's `getHero` method (not shown) 
     which fetches a hero and sets the component's `hero` property. 
-    If the`id` parameter is missing, the `pluck` operator fails and the `catch` treats failure as a request to edit a new hero.
+    The `getHero` method treats an undefined `id` or `id===0` as a request to edit a new hero.
 
     The [Router](router.html#route-parameters) guide covers `ActivatedRoute.params` in more detail.
 :marked