docs: fix testing example (#31120)

PR Close #31120

aio/content/examples/http/src/app/heroes/heroes.component.ts

@@ -6,33 +6,35 @@ import { HeroesService } from './heroes.service';
 @Component({
   selector: 'app-heroes',
   templateUrl: './heroes.component.html',
-  providers: [ HeroesService ],
+  providers: [HeroesService],
   styleUrls: ['./heroes.component.css']
 })
 export class HeroesComponent implements OnInit {
   heroes: Hero[];
   editHero: Hero; // the hero currently being edited
 
-  constructor(private heroesService: HeroesService) { }
+  constructor(private heroesService: HeroesService) {}
 
   ngOnInit() {
     this.getHeroes();
   }
 
   getHeroes(): void {
-    this.heroesService.getHeroes()
-      .subscribe(heroes => this.heroes = heroes);
+    this.heroesService.getHeroes().subscribe(heroes => (this.heroes = heroes));
   }
 
   add(name: string): void {
     this.editHero = undefined;
     name = name.trim();
-    if (!name) { return; }
+    if (!name) {
+      return;
+    }
 
     // The server will generate the id for this new hero
     const newHero: Hero = { name } as Hero;
     // #docregion add-hero-subscribe
-    this.heroesService.addHero(newHero)
+    this.heroesService
+      .addHero(newHero)
       .subscribe(hero => this.heroes.push(hero));
     // #enddocregion add-hero-subscribe
   }
@@ -50,26 +52,28 @@ export class HeroesComponent implements OnInit {
     */
   }
 
-  edit(hero) {
+  edit(hero: Hero) {
     this.editHero = hero;
   }
 
   search(searchTerm: string) {
     this.editHero = undefined;
     if (searchTerm) {
-      this.heroesService.searchHeroes(searchTerm)
-        .subscribe(heroes => this.heroes = heroes);
+      this.heroesService
+        .searchHeroes(searchTerm)
+        .subscribe(heroes => (this.heroes = heroes));
     }
   }
 
   update() {
     if (this.editHero) {
-      this.heroesService.updateHero(this.editHero)
-        .subscribe(hero => {
-          // replace the hero in the heroes list with update from server
-          const ix = hero ? this.heroes.findIndex(h => h.id === hero.id) : -1;
-          if (ix > -1) { this.heroes[ix] = hero; }
-        });
+      this.heroesService.updateHero(this.editHero).subscribe(hero => {
+        // replace the hero in the heroes list with update from server
+        const ix = hero ? this.heroes.findIndex(h => h.id === hero.id) : -1;
+        if (ix > -1) {
+          this.heroes[ix] = hero;
+        }
+      });
       this.editHero = undefined;
     }
   }

aio/content/examples/http/src/app/package-search/package-search.service.ts

@@ -48,7 +48,7 @@ export class PackageSearchService {
     // TODO: Add error handling
     return this.http.get(searchUrl, options).pipe(
       map((data: any) => {
-        return data.results.map(entry => ({
+        return data.results.map((entry: any) => ({
             name: entry.name[0],
             version: entry.version[0],
             description: entry.description[0]

aio/content/examples/testing/e2e/src/app.e2e-spec.ts

@@ -0,0 +1,35 @@
+'use strict'; // necessary for es6 output in node
+
+import { browser, element, by, ElementFinder } from 'protractor';
+
+describe('Testing Example', () => {
+  const expectedViewNames = ['Dashboard', 'Heroes', 'About'];
+
+  beforeAll(() => browser.get(''));
+
+  function getPageElts() {
+    let navElts = element.all(by.css('app-root nav a'));
+
+    return {
+      navElts: navElts,
+
+      appDashboard: element(by.css('app-root app-dashboard')),
+    };
+  }
+
+  it('has title', async() => {
+    expect(await browser.getTitle()).toEqual('App Under Test');
+  });
+
+  it(`has views ${expectedViewNames}`, async () => {
+    let viewNames = getPageElts().navElts.map(async(el: ElementFinder) => await el.getText());
+
+    expect(viewNames).toEqual(expectedViewNames);
+  });
+
+  it('has dashboard as the active view', () => {
+    let page = getPageElts();
+
+    expect(page.appDashboard.isPresent()).toBeTruthy();
+  });
+});

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

@@ -20,7 +20,7 @@ describe('DashboardHeroComponent class only', () => {
     const hero: Hero = { id: 42, name: 'Test' };
     comp.hero = hero;
 
-    comp.selected.subscribe(selectedHero => expect(selectedHero).toBe(hero));
+    comp.selected.subscribe((selectedHero: Hero) => expect(selectedHero).toBe(hero));
     comp.click();
   });
   // #enddocregion class-only
@@ -95,7 +95,7 @@ describe('DashboardHeroComponent when tested directly', () => {
   // #docregion click-test-3
   it('should raise selected event when clicked (click helper)', () => {
     let selectedHero: Hero;
-    comp.selected.subscribe(hero => selectedHero = hero);
+    comp.selected.subscribe((hero: Hero) => selectedHero = hero);
 
     click(heroDe); // click helper with DebugElement
     click(heroEl); // click helper with native element

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

@@ -19,7 +19,7 @@ export class Hero {
 // #docregion ValueService
 @Injectable()
 export class ValueService {
-  protected value = 'real value';
+  value = 'real value';
 
   getValue() { return this.value; }
   setValue(value: string) { this.value = value; }

aio/content/examples/testing/src/app/model/hero.ts

@@ -2,7 +2,3 @@ export interface Hero {
   id: number;
   name: string;
 }
-
-// SystemJS bug:
-// TS file must export something real in JS, not just interfaces
-export const _dummy = undefined;

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

@@ -1,4 +1,4 @@
-import { Component, AfterViewInit, ViewChild } from '@angular/core';
+import { Component, AfterViewInit, ViewChild, ElementRef } from '@angular/core';
 
 @Component({
   selector: 'sample-canvas',
@@ -6,7 +6,7 @@ import { Component, AfterViewInit, ViewChild } from '@angular/core';
 })
 export class CanvasComponent implements AfterViewInit {
   blobSize: number;
-  @ViewChild('sampleCanvas', {static: false}) sampleCanvas;
+  @ViewChild('sampleCanvas', {static: false}) sampleCanvas: ElementRef;
 
   constructor() { }
 

aio/content/examples/testing/src/app/shared/shared.module.ts

@@ -4,6 +4,7 @@ import { FormsModule }   from '@angular/forms';
 
 import { HighlightDirective } from './highlight.directive';
 import { TitleCasePipe }      from './title-case.pipe';
+import { CanvasComponent }    from './canvas.component';
 
 @NgModule({
   imports: [ CommonModule ],
@@ -12,8 +13,9 @@ import { TitleCasePipe }      from './title-case.pipe';
     // SharedModule importers won't have to import FormsModule too
     FormsModule,
     HighlightDirective,
-    TitleCasePipe
+    TitleCasePipe,
+    CanvasComponent
   ],
-  declarations: [ HighlightDirective, TitleCasePipe ]
+  declarations: [ HighlightDirective, TitleCasePipe, CanvasComponent ]
 })
 export class SharedModule { }

aio/content/examples/testing/src/app/twain/twain.service.ts

@@ -2,7 +2,7 @@
 import { Injectable } from '@angular/core';
 import { HttpClient, HttpErrorResponse } from '@angular/common/http';
 
-import { Observable, of, throwError } from 'rxjs';
+import { Observable, of, throwError, Observer } from 'rxjs';
 import { concat, map, retryWhen, switchMap, take, tap } from 'rxjs/operators';
 
 import { Quote } from './quote';
@@ -14,7 +14,7 @@ export class TwainService {
   private nextId = 1;
 
   getQuote(): Observable<string> {
-    return Observable.create(observer => observer.next(this.nextId++)).pipe(
+    return Observable.create((observer: Observer<number>) => observer.next(this.nextId++)).pipe(
 
       // tap((id: number) => console.log(id)),
       // tap((id: number) => { throw new Error('Simulated server error'); }),

aio/content/examples/testing/src/testing/global-jasmine.ts

@@ -1,3 +1,3 @@
-import jasmineRequire from 'jasmine-core/lib/jasmine-core/jasmine.js';
+const jasmineRequire = require('jasmine-core/lib/jasmine-core/jasmine.js');
 
 window['jasmineRequire'] = jasmineRequire;