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()
+    this.heroesService.getHeroes().subscribe(heroes => (this.heroes = heroes));
-      .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)
+      this.heroesService
-        .subscribe(heroes => this.heroes = heroes);
+        .searchHeroes(searchTerm)
+        .subscribe(heroes => (this.heroes = heroes));
     }
   }
 
   update() {
     if (this.editHero) {
-      this.heroesService.updateHero(this.editHero)
+      this.heroesService.updateHero(this.editHero).subscribe(hero => {
-        .subscribe(hero => {
+        // replace the hero in the heroes list with update from server
-          // replace the hero in the heroes list with update from server
+        const ix = hero ? this.heroes.findIndex(h => h.id === hero.id) : -1;
-          const ix = hero ? this.heroes.findIndex(h => h.id === hero.id) : -1;
+        if (ix > -1) {
-          if (ix > -1) { this.heroes[ix] = hero; }
+          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;

aio/tools/examples/example-boilerplate.js

@@ -36,8 +36,8 @@ BOILERPLATE_PATHS['service-worker'] = [...cliRelativePath, 'angular.json', 'pack
 BOILERPLATE_PATHS.testing = [
   ...cliRelativePath,
   'angular.json',
-  'src/tsconfig.app.json',
+  'tsconfig.app.json',
-  'src/tsconfig.spec.json'
+  'tsconfig.spec.json'
 ];
 
 BOILERPLATE_PATHS.universal = [...cliRelativePath, 'angular.json', 'package.json'];

aio/tools/examples/shared/boilerplate/cli/package.json

@@ -37,7 +37,7 @@
     "@types/node": "~8.9.4",
     "codelyzer": "~5.0.0",
     "jasmine-core": "~2.99.1",
-    "jasmine-marbles": "^0.5.0",
+    "jasmine-marbles": "^0.6.0",
     "jasmine-spec-reporter": "~4.2.1",
     "karma": "~4.1.0",
     "karma-chrome-launcher": "~2.2.0",

aio/tools/examples/shared/boilerplate/cli/src/polyfills.ts

@@ -66,7 +66,7 @@ import 'core-js/es7/reflect';
  * Zone JS is required by default for Angular itself.
  */
 import 'zone.js/dist/zone';  // Included with Angular CLI.
-
+import 'zone.js/dist/zone-patch-canvas';
 
 /***************************************************************************************************
  * APPLICATION IMPORTS

aio/tools/examples/shared/boilerplate/i18n/package.json

@@ -39,7 +39,7 @@
     "@types/node": "~8.9.4",
     "codelyzer": "~5.0.0",
     "jasmine-core": "~2.99.1",
-    "jasmine-marbles": "^0.5.0",
+    "jasmine-marbles": "^0.6.0",
     "jasmine-spec-reporter": "~4.2.1",
     "karma": "~4.1.0",
     "karma-chrome-launcher": "~2.2.0",

aio/tools/examples/shared/boilerplate/ivy/cli/tsconfig.app.json

@@ -10,6 +10,7 @@
   "exclude": [
     "src/test.ts",
     "src/**/*.spec.ts",
+    "src/**/*-specs.ts",
     "src/**/*.avoid.ts",
     "src/**/*.0.ts",
     "src/**/*.1.ts",
@@ -19,7 +20,8 @@
     "src/**/*.4.ts",
     "src/**/*.5.ts",
     "src/**/*.6.ts",
-    "src/**/*.7.ts"
+    "src/**/*.7.ts",
+    "src/**/testing"
   ],
   "angularCompilerOptions": {
     "enableIvy": true

aio/tools/examples/shared/boilerplate/service-worker/package.json

@@ -37,7 +37,7 @@
     "@types/node": "~8.9.4",
     "codelyzer": "~5.0.0",
     "jasmine-core": "~2.99.1",
-    "jasmine-marbles": "^0.5.0",
+    "jasmine-marbles": "^0.6.0",
     "jasmine-spec-reporter": "~4.2.1",
     "karma": "~4.1.0",
     "karma-chrome-launcher": "~2.2.0",

aio/tools/examples/shared/boilerplate/testing/angular.json

@@ -23,7 +23,8 @@
               "src/assets"
             ],
             "styles": [
-              "src/styles.css"
+              "src/styles.css",
+              "src/test.css"
             ],
             "scripts": []
           },
@@ -83,8 +84,7 @@
               "src/assets"
             ],
             "styles": [
-              "src/styles.css",
+              "src/styles.css"
-              "src/test.css"
             ],
             "scripts": []
           }

aio/tools/examples/shared/boilerplate/testing/src/tsconfig.app.json

@@ -1,22 +0,0 @@
-{
-  "extends": "../tsconfig.json",
-  "compilerOptions": {
-    "outDir": "../out-tsc/app",
-    "types": []
-  },
-  "exclude": [
-    "test.ts",
-    "**/*.spec.ts",
-    "**/*.avoid.ts",
-    "**/*.0.ts",
-    "**/*.1.ts",
-    "**/*.1b.ts",
-    "**/*.2.ts",
-    "**/*.3.ts",
-    "**/*.4.ts",
-    "**/*.5.ts",
-    "**/*.6.ts",
-    "**/*.7.ts",
-    "**/testing"
-  ]
-}

aio/tools/examples/shared/boilerplate/testing/tsconfig.app.json

@@ -0,0 +1,26 @@
+{
+  "extends": "../tsconfig.json",
+  "compilerOptions": {
+    "outDir": "../out-tsc/app",
+    "types": []
+  },
+  "include": [
+    "src/**/*.ts"
+  ],
+  "exclude": [
+    "src/test.ts",
+    "src/**/*.spec.ts",
+    "src/**/*-specs.ts",
+    "src/**/*.avoid.ts",
+    "src/**/*.0.ts",
+    "src/**/*.1.ts",
+    "src/**/*.1b.ts",
+    "src/**/*.2.ts",
+    "src/**/*.3.ts",
+    "src/**/*.4.ts",
+    "src/**/*.5.ts",
+    "src/**/*.6.ts",
+    "src/**/*.7.ts",
+    "src/**/testing"
+  ]
+}

aio/tools/examples/shared/boilerplate/testing/tsconfig.spec.json

@@ -12,8 +12,8 @@
     "polyfills.ts"
   ],
   "include": [
-    "**/*.spec.ts",
+    "src/**/*.spec.ts",
-    "**/*.d.ts",
+    "src/**/*.d.ts",
-    "**/testing"
+    "src/testing"
   ]
 }

aio/tools/examples/shared/package.json

@@ -61,7 +61,7 @@
     "concurrently": "^3.0.0",
     "http-server": "^0.11.1",
     "jasmine-core": "~3.4.0",
-    "jasmine-marbles": "^0.5.0",
+    "jasmine-marbles": "^0.6.0",
     "jasmine-spec-reporter": "~4.2.1",
     "karma": "~4.1.0",
     "karma-chrome-launcher": "~2.2.0",

aio/tools/examples/shared/yarn.lock

@@ -4264,10 +4264,10 @@ jasmine-core@~2.8.0:
   version "2.8.0"
   resolved "https://registry.yarnpkg.com/jasmine-core/-/jasmine-core-2.8.0.tgz#bcc979ae1f9fd05701e45e52e65d3a5d63f1a24e"
 
-jasmine-marbles@^0.5.0:
+jasmine-marbles@^0.6.0:
-  version "0.5.0"
+  version "0.6.0"
-  resolved "https://registry.yarnpkg.com/jasmine-marbles/-/jasmine-marbles-0.5.0.tgz#5d4c51082fcf619bb8dbc85583cb11718a32b200"
+  resolved "https://registry.yarnpkg.com/jasmine-marbles/-/jasmine-marbles-0.6.0.tgz#f78dc1a3bc452976de10ee8b47c73d616532a954"
-  integrity sha512-hkSYy7VJpcxaKE48s/CasVpGyheElp5ZegguFi5kpYAaUWsyOko6RnMZS1kv14ThMtlJVNqCW5z16f1q6HqbEg==
+  integrity sha512-1uzgjEesEeCb+r+v46qn5x326TiGqk5SUZa+A3O+XnMCjG/pGcUOhL9Xsg5L7gLC6RFHyWGTkB5fei4rcvIOiQ==
   dependencies:
     lodash "^4.5.0"