+ {{title}} +
+ + ++ customer-dashboard works! +
+ diff --git a/aio/content/examples/feature-modules/src/app/customer-dashboard/customer-dashboard/customer-dashboard.component.spec.ts b/aio/content/examples/feature-modules/src/app/customer-dashboard/customer-dashboard/customer-dashboard.component.spec.ts new file mode 100644 index 0000000000..2420d05521 --- /dev/null +++ b/aio/content/examples/feature-modules/src/app/customer-dashboard/customer-dashboard/customer-dashboard.component.spec.ts @@ -0,0 +1,25 @@ +import { async, ComponentFixture, TestBed } from '@angular/core/testing'; + +import { CustomerDashboardComponent } from './customer-dashboard.component'; + +describe('CustomerDashboardComponent', () => { + let component: CustomerDashboardComponent; + let fixture: ComponentFixtureHTTP Sample
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+Get configuration from JSON file
+
+
+
+
+
+
+
+Heroes API URL is "{{config.heroesUrl}}"
+Textfile URL is "{{config.textfile}}"
+
+ Response headers:
+
+
+-
+
- {{header}} +
{{error | json}}
diff --git a/aio/content/examples/http/src/app/config/config.component.ts b/aio/content/examples/http/src/app/config/config.component.ts new file mode 100644 index 0000000000..f372c81b79 --- /dev/null +++ b/aio/content/examples/http/src/app/config/config.component.ts @@ -0,0 +1,78 @@ +// #docplaster +// #docregion +import { Component } from '@angular/core'; +import { Config, ConfigService } from './config.service'; +import { MessageService } from '../message.service'; + +@Component({ + selector: 'app-config', + templateUrl: './config.component.html', + providers: [ ConfigService ], + styles: ['.error {color: red;}'] +}) +export class ConfigComponent { + error: any; + headers: string[]; + // #docregion v2 + config: Config; + + // #enddocregion v2 + constructor(private configService: ConfigService) {} + + clear() { + this.config = undefined; + this.error = undefined; + this.headers = undefined; + } + + // #docregion v1, v2, v3 + showConfig() { + this.configService.getConfig() + // #enddocregion v1, v2 + .subscribe( + data => this.config = { ...data }, // success path + error => this.error = error // error path + ); + } + // #enddocregion v3 + + showConfig_v1() { + this.configService.getConfig_1() + // #docregion v1, v1_callback + .subscribe(data => this.config = { + heroesUrl: data['heroesUrl'], + textfile: data['textfile'] + }); + // #enddocregion v1_callback + } + // #enddocregion v1 + + showConfig_v2() { + this.configService.getConfig() + // #docregion v2, v2_callback + // clone the data object, using its known Config shape + .subscribe(data => this.config = { ...data }); + // #enddocregion v2_callback + } + // #enddocregion v2 + +// #docregion showConfigResponse + showConfigResponse() { + this.configService.getConfigResponse() + // resp is of type `HttpResponseDownload the textfile
+ + +Contents: "{{contents}}"
diff --git a/aio/content/examples/http/src/app/downloader/downloader.component.ts b/aio/content/examples/http/src/app/downloader/downloader.component.ts new file mode 100644 index 0000000000..21216d1c63 --- /dev/null +++ b/aio/content/examples/http/src/app/downloader/downloader.component.ts @@ -0,0 +1,23 @@ +import { Component } from '@angular/core'; +import { DownloaderService } from './downloader.service'; + +@Component({ + selector: 'app-downloader', + templateUrl: './downloader.component.html', + providers: [ DownloaderService ] +}) +export class DownloaderComponent { + contents: string; + constructor(private downloaderService: DownloaderService) {} + + clear() { + this.contents = undefined; + } + + // #docregion download + download() { + this.downloaderService.getTextFile('assets/textfile.txt') + .subscribe(results => this.contents = results); + } + // #enddocregion download +} diff --git a/aio/content/examples/http/src/app/downloader/downloader.service.ts b/aio/content/examples/http/src/app/downloader/downloader.service.ts new file mode 100644 index 0000000000..e10a4f2b35 --- /dev/null +++ b/aio/content/examples/http/src/app/downloader/downloader.service.ts @@ -0,0 +1,39 @@ +import { Injectable } from '@angular/core'; +import { HttpClient } from '@angular/common/http'; + +import { tap } from 'rxjs/operators'; + +import { MessageService } from '../message.service'; + +@Injectable() +export class DownloaderService { + constructor( + private http: HttpClient, + private messageService: MessageService) { } + + // #docregion getTextFile + getTextFile(filename: string) { + // The Observable returned by get() is of type ObservableHeroes
+ +
+
+
+
+
+
+
+
+
+-
+
- + + {{ hero.id || -1 }} + {{hero.name}} + + + + + + +
+
+
diff --git a/aio/content/examples/http/src/app/messages/messages.component.ts b/aio/content/examples/http/src/app/messages/messages.component.ts
new file mode 100644
index 0000000000..d54a121665
--- /dev/null
+++ b/aio/content/examples/http/src/app/messages/messages.component.ts
@@ -0,0 +1,10 @@
+import { Component } from '@angular/core';
+import { MessageService } from '../message.service';
+
+@Component({
+ selector: 'app-messages',
+ templateUrl: './messages.component.html'
+})
+export class MessagesComponent {
+ constructor(public messageService: MessageService) {}
+}
diff --git a/aio/content/examples/http/src/app/package-search/package-search.component.html b/aio/content/examples/http/src/app/package-search/package-search.component.html
new file mode 100644
index 0000000000..b1bd56d561
--- /dev/null
+++ b/aio/content/examples/http/src/app/package-search/package-search.component.html
@@ -0,0 +1,17 @@
+
+Messages
+ ++
-
+
- {{message}} +
Search Npm Packages
+Searches when typing stops. Caches for 30 seconds.
+ + + + + + + +-
+
- + {{package.name}} v.{{package.version}} - + {{package.description}} + +
Tour of Heroes ({{mode}})
-Heroes:
--
-
- {{hero.name}} -
{{errorMessage}}
diff --git a/aio/content/examples/http/src/app/toh/hero-list.component.promise.ts b/aio/content/examples/http/src/app/toh/hero-list.component.promise.ts deleted file mode 100644 index 4bbe7eade2..0000000000 --- a/aio/content/examples/http/src/app/toh/hero-list.component.promise.ts +++ /dev/null @@ -1,40 +0,0 @@ -// #docregion -// Promise Version -import { Component, OnInit } from '@angular/core'; -import { Hero } from './hero'; -import { HeroService } from './hero.service.promise'; - -@Component({ - selector: 'hero-list-promise', - templateUrl: './hero-list.component.html', - providers: [ HeroService ], - styles: ['.error {color:red;}'] -}) -// #docregion component -export class HeroListPromiseComponent implements OnInit { - errorMessage: string; - heroes: Hero[]; - mode = 'Promise'; - - constructor (private heroService: HeroService) {} - - ngOnInit() { this.getHeroes(); } - - // #docregion methods - getHeroes() { - this.heroService.getHeroes() - .then( - heroes => this.heroes = heroes, - error => this.errorMessage =Upload file
+ diff --git a/aio/content/examples/http/src/app/uploader/uploader.component.ts b/aio/content/examples/http/src/app/uploader/uploader.component.ts new file mode 100644 index 0000000000..f4d2427813 --- /dev/null +++ b/aio/content/examples/http/src/app/uploader/uploader.component.ts @@ -0,0 +1,25 @@ +import { Component } from '@angular/core'; +import { UploaderService } from './uploader.service'; + +@Component({ + selector: 'app-uploader', + templateUrl: './uploader.component.html', + providers: [ UploaderService ] +}) +export class UploaderComponent { + message: string; + + constructor(private uploaderService: UploaderService) {} + + onPicked(input: HTMLInputElement) { + const file = input.files[0]; + if (file) { + this.uploaderService.upload(file).subscribe( + msg => { + input.value = null; + this.message = msg; + } + ); + } + } +} diff --git a/aio/content/examples/http/src/app/uploader/uploader.service.ts b/aio/content/examples/http/src/app/uploader/uploader.service.ts new file mode 100644 index 0000000000..115791a947 --- /dev/null +++ b/aio/content/examples/http/src/app/uploader/uploader.service.ts @@ -0,0 +1,105 @@ +import { Injectable } from '@angular/core'; +import { + HttpClient, HttpEvent, HttpEventType, HttpProgressEvent, + HttpRequest, HttpResponse, HttpErrorResponse +} from '@angular/common/http'; + +import { of } from 'rxjs/observable/of'; +import { catchError, last, map, tap } from 'rxjs/operators'; + +import { MessageService } from '../message.service'; + +@Injectable() +export class UploaderService { + constructor( + private http: HttpClient, + private messenger: MessageService) {} + + // If uploading multiple files, change to: + // upload(files: FileList) { + // const formData = new FormData(); + // files.forEach(f => formData.append(f.name, f)); + // new HttpRequest('POST', '/upload/file', formData, {reportProgress: true}); + // ... + // } + + upload(file: File) { + if (!file) { return; } + + // COULD HAVE WRITTEN: + // return this.http.post('/upload/file', file, { + // reportProgress: true, + // observe: 'events' + // }).pipe( + + // Create the request object that POSTs the file to an upload endpoint. + // The `reportProgress` option tells HttpClient to listen and return + // XHR progress events. + // #docregion upload-request + const req = new HttpRequest('POST', '/upload/file', file, { + reportProgress: true + }); + // #enddocregion upload-request + + // #docregion upload-body + // The `HttpClient.request` API produces a raw event stream + // which includes start (sent), progress, and response events. + return this.http.request(req).pipe( + map(event => this.getEventMessage(event, file)), + tap(message => this.showProgress(message)), + last(), // return last (completed) message to caller + catchError(this.handleError(file)) + ); + // #enddocregion upload-body + } + + // #docregion getEventMessage + /** Return distinct message for sent, upload progress, & response events */ + private getEventMessage(event: HttpEventSmarter Wikipedia Demo
-Search when typing stops
- --
-
- {{item}} -
Wikipedia Demo
-Search after each keystroke
- --
-
- {{item}} -
-The author is {gender, select, m {male} f {female} o {other}} +The author is {gender, select, male {male} female {female} other {other}}
Updated: {minutes, plural, =0 {just now} =1 {one minute ago} - other {{{minutes}} minutes ago by {gender, select, m {male} f {female} o {other}}}} + other {{{minutes}} minutes ago by {gender, select, male {male} female {female} other {other}}}} diff --git a/aio/content/examples/i18n/src/app/app.component.ts b/aio/content/examples/i18n/src/app/app.component.ts index a39745714f..d8e79acf50 100644 --- a/aio/content/examples/i18n/src/app/app.component.ts +++ b/aio/content/examples/i18n/src/app/app.component.ts @@ -7,15 +7,15 @@ import { Component } from '@angular/core'; }) export class AppComponent { minutes = 0; - gender = 'f'; + gender = 'female'; fly = true; logo = 'https://angular.io/assets/images/logos/angular/angular.png'; heroes: string[] = ['Magneta', 'Celeritas', 'Dynama']; inc(i: number) { this.minutes = Math.min(5, Math.max(0, this.minutes + i)); } - male() { this.gender = 'm'; } - female() { this.gender = 'f'; } - other() { this.gender = 'o'; } + male() { this.gender = 'male'; } + female() { this.gender = 'female'; } + other() { this.gender = 'other'; } } diff --git a/aio/content/examples/i18n/src/locale/messages.fr.xlf b/aio/content/examples/i18n/src/locale/messages.fr.xlf index 4b16a22496..464488a8c1 100644 --- a/aio/content/examples/i18n/src/locale/messages.fr.xlf +++ b/aio/content/examples/i18n/src/locale/messages.fr.xlf @@ -48,23 +48,23 @@
+ {{title}} +
+ + + + + ++ customer-list works! +
diff --git a/aio/content/examples/lazy-loading-ngmodules/src/app/customers/customer-list/customer-list.component.spec.ts b/aio/content/examples/lazy-loading-ngmodules/src/app/customers/customer-list/customer-list.component.spec.ts new file mode 100644 index 0000000000..c34e342ba0 --- /dev/null +++ b/aio/content/examples/lazy-loading-ngmodules/src/app/customers/customer-list/customer-list.component.spec.ts @@ -0,0 +1,25 @@ +import { async, ComponentFixture, TestBed } from '@angular/core/testing'; + +import { CustomerListComponent } from './customer-list.component'; + +describe('CustomerListComponent', () => { + let component: CustomerListComponent; + let fixture: ComponentFixture+ order-list works! +
diff --git a/aio/content/examples/lazy-loading-ngmodules/src/app/orders/order-list/order-list.component.spec.ts b/aio/content/examples/lazy-loading-ngmodules/src/app/orders/order-list/order-list.component.spec.ts new file mode 100644 index 0000000000..2688bcf420 --- /dev/null +++ b/aio/content/examples/lazy-loading-ngmodules/src/app/orders/order-list/order-list.component.spec.ts @@ -0,0 +1,25 @@ +import { async, ComponentFixture, TestBed } from '@angular/core/testing'; + +import { OrderListComponent } from './order-list.component'; + +describe('OrderListComponent', () => { + let component: OrderListComponent; + let fixture: ComponentFixture+ {{title}} +
diff --git a/aio/content/examples/ngmodules/src/app/app.component.spec.ts b/aio/content/examples/ngmodules/src/app/app.component.spec.ts new file mode 100644 index 0000000000..13c632d676 --- /dev/null +++ b/aio/content/examples/ngmodules/src/app/app.component.spec.ts @@ -0,0 +1,32 @@ +import { TestBed, async } from '@angular/core/testing'; +import { AppComponent } from './app.component'; + +describe('AppComponent', () => { + beforeEach(() => { + TestBed.configureTestingModule({ + declarations: [ + AppComponent + ], + }); + TestBed.compileComponents(); + }); + + it('should create the app', async(() => { + const fixture = TestBed.createComponent(AppComponent); + const app = fixture.debugElement.componentInstance; + expect(app).toBeTruthy(); + })); + + it(`should have as title 'app works!'`, async(() => { + const fixture = TestBed.createComponent(AppComponent); + const app = fixture.debugElement.componentInstance; + expect(app.title).toEqual('app works!'); + })); + + it('should render title in a h1 tag', async(() => { + const fixture = TestBed.createComponent(AppComponent); + fixture.detectChanges(); + const compiled = fixture.debugElement.nativeElement; + expect(compiled.querySelector('h1').textContent).toContain('app works!'); + })); +}); diff --git a/aio/content/examples/ngmodules/src/app/app.component.ts b/aio/content/examples/ngmodules/src/app/app.component.ts new file mode 100644 index 0000000000..41c28b9ed6 --- /dev/null +++ b/aio/content/examples/ngmodules/src/app/app.component.ts @@ -0,0 +1,16 @@ +import { Component } from '@angular/core'; + +@Component({ + selector: 'app-root', + template: ` +Contact of {{userName}}
+{{msg}}
+
+
diff --git a/aio/content/examples/ngmodules/src/app/contact/contact.component.spec.ts b/aio/content/examples/ngmodules/src/app/contact/contact.component.spec.ts
new file mode 100644
index 0000000000..427633e0a0
--- /dev/null
+++ b/aio/content/examples/ngmodules/src/app/contact/contact.component.spec.ts
@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { ContactComponent } from './contact.component';
+
+describe('ContactComponent', () => {
+ let component: ContactComponent;
+ let fixture: ComponentFixture{{title}}
++ Welcome, {{user}} +
diff --git a/aio/content/examples/ngmodules/src/app/core/title.component.ts b/aio/content/examples/ngmodules/src/app/core/title.component.ts new file mode 100644 index 0000000000..979a5803ab --- /dev/null +++ b/aio/content/examples/ngmodules/src/app/core/title.component.ts @@ -0,0 +1,15 @@ +import { Component, Input } from '@angular/core'; +import { UserService } from '../core/user.service'; + +@Component({ + selector: 'app-title', + templateUrl: './title.component.html', +}) +export class TitleComponent { + title = 'NgModules'; + user = ''; + + constructor(userService: UserService) { + this.user = userService.userName; + } +} diff --git a/aio/content/examples/ngmodules/src/app/core/user.service.ts b/aio/content/examples/ngmodules/src/app/core/user.service.ts new file mode 100644 index 0000000000..d1ab1cd6b3 --- /dev/null +++ b/aio/content/examples/ngmodules/src/app/core/user.service.ts @@ -0,0 +1,31 @@ +// Proves that UserService is an app-wide singleton and only instantiated once +// IFF shared.module follows the `forRoot` pattern. +// +// If it didn't, a new instance of UserService would be created +// after each lazy load and the userName would double up. + +import { Injectable, Optional } from '@angular/core'; + +let nextId = 1; + +export class UserServiceConfig { + userName = 'Philip Marlowe'; +} + +@Injectable() +export class UserService { + id = nextId++; + private _userName = 'Sherlock Holmes'; + + // #docregion ctor + constructor(@Optional() config: UserServiceConfig) { + if (config) { this._userName = config.userName; } + } + // #enddocregion ctor + + get userName() { + // Demo: add a suffix if this service has been created more than once + const suffix = this.id > 1 ? ` times ${this.id}` : ''; + return this._userName + suffix; + } +} diff --git a/aio/content/examples/ngmodules/src/app/customers/customers-detail.component.ts b/aio/content/examples/ngmodules/src/app/customers/customers-detail.component.ts new file mode 100644 index 0000000000..11683c9d68 --- /dev/null +++ b/aio/content/examples/ngmodules/src/app/customers/customers-detail.component.ts @@ -0,0 +1,31 @@ +import { Component, OnInit } from '@angular/core'; +import { ActivatedRoute } from '@angular/router'; + +import { Customer, + CustomersService } from './customers.service'; + +@Component({ + template: ` +
Customer Detail
+
+
+ +
+ Id: {{customer.id}}
+ +
+ Customer List + ` +}) +export class CustomersDetailComponent implements OnInit { + customer: Customer; + + constructor( + private route: ActivatedRoute, + private customersService: CustomersService) { } + + ngOnInit() { + let id = parseInt(this.route.snapshot.paramMap.get('id'), 10); + this.customersService.getCustomer(id).subscribe(customer => this.customer = customer); + } +} diff --git a/aio/content/examples/ngmodules/src/app/customers/customers-list.component.ts b/aio/content/examples/ngmodules/src/app/customers/customers-list.component.ts new file mode 100644 index 0000000000..42cf434763 --- /dev/null +++ b/aio/content/examples/ngmodules/src/app/customers/customers-list.component.ts @@ -0,0 +1,22 @@ +import { Component, OnInit } from '@angular/core'; +import { Observable } from 'rxjs/Observable'; + +import { Customer, + CustomersService } from './customers.service'; + +@Component({ + template: ` +
Customer List
+ + ` +}) + +export class CustomersListComponent { + customers: ObservableCustomers of {{userName}}
+Item Detail
+Item id: {{id}}
+ + Items List + ` +}) +export class ItemsDetailComponent implements OnInit { + id: number; + constructor(private route: ActivatedRoute) { } + + ngOnInit() { + this.id = parseInt(this.route.snapshot.paramMap.get('id'), 10); + } +} + diff --git a/aio/content/examples/ngmodules/src/app/items/items-list.component.ts b/aio/content/examples/ngmodules/src/app/items/items-list.component.ts new file mode 100644 index 0000000000..2c74ff7f47 --- /dev/null +++ b/aio/content/examples/ngmodules/src/app/items/items-list.component.ts @@ -0,0 +1,23 @@ +import { Component, OnInit } from '@angular/core'; +import { Observable }from 'rxjs/Observable'; + +import { Item, + ItemService } from './items.service'; + +@Component({ + template: ` +
Items List
+ + ` +}) +export class ItemsListComponent { + items: Observable+ items works! +
diff --git a/aio/content/examples/ngmodules/src/app/items/items.component.spec.ts b/aio/content/examples/ngmodules/src/app/items/items.component.spec.ts new file mode 100644 index 0000000000..b77cce74ec --- /dev/null +++ b/aio/content/examples/ngmodules/src/app/items/items.component.spec.ts @@ -0,0 +1,25 @@ +import { async, ComponentFixture, TestBed } from '@angular/core/testing'; + +import { ItemsComponent } from './items.component'; + +describe('ItemsComponent', () => { + let component: ItemsComponent; + let fixture: ComponentFixture
+
`})
+
+export class ZippyComponent {
+ visible = true;
+ @Output() open = new EventEmitterToggle
+
+
+ observable|async:
+ Time: {{ time | async }}+ {{title}} +
+ +$any type cast function $any( ).
+ +
+
+
+
+
+
+ The hero's marker is {{$any(hero).marker}}
+
+
+
+
+
+
+
+top
+
+ Undeclared members is {{$any(this).member}}
+
+
+Enums in binding
diff --git a/aio/content/examples/template-syntax/plnkr.json b/aio/content/examples/template-syntax/stackblitz.json similarity index 83% rename from aio/content/examples/template-syntax/plnkr.json rename to aio/content/examples/template-syntax/stackblitz.json index 099616ad7c..5ba51f973b 100644 --- a/aio/content/examples/template-syntax/plnkr.json +++ b/aio/content/examples/template-syntax/stackblitz.json @@ -1,6 +1,5 @@ { "description": "Template Syntax Collection", - "basePath": "src/", "files":["!**/*.d.ts", "!**/*.js"], "tags": ["template"] } diff --git a/aio/content/examples/testing/1st-specs.plnkr.json b/aio/content/examples/testing/1st-specs.plnkr.json deleted file mode 100644 index 9fe15ddef1..0000000000 --- a/aio/content/examples/testing/1st-specs.plnkr.json +++ /dev/null @@ -1,14 +0,0 @@ -{ - "description": "Testing - 1st.specs", - "basePath": "src/", - "files":[ - "browser-test-shim.js", - "styles.css", - - "app/1st.spec.ts", - "1st-specs.html" - ], - "main": "1st-specs.html", - "open": "app/1st.spec.ts", - "tags": ["testing"] -} diff --git a/aio/content/examples/testing/app-specs.plnkr.json b/aio/content/examples/testing/app-specs.plnkr.json deleted file mode 100644 index d97bf82c86..0000000000 --- a/aio/content/examples/testing/app-specs.plnkr.json +++ /dev/null @@ -1,24 +0,0 @@ -{ - "description": "Testing - app.specs", - "basePath": "src/", - "files":[ - "browser-test-shim.js", - "systemjs.config.extras.js", - "styles.css", - - "app/**/*.css", - "app/**/*.html", - "app/**/*.ts", - "app/**/*.spec.ts", - - "testing/*.ts", - - "!main.ts", - "!app/bag/*.*", - "!app/1st.spec.ts", - - "app-specs.html" - ], - "main": "app-specs.html", - "tags": ["testing"] -} diff --git a/aio/content/examples/testing/bag-specs.plnkr.json b/aio/content/examples/testing/bag-specs.plnkr.json deleted file mode 100644 index cd22e10c28..0000000000 --- a/aio/content/examples/testing/bag-specs.plnkr.json +++ /dev/null @@ -1,21 +0,0 @@ -{ - "description": "Testing - bag.specs", - "basePath": "src/", - "files":[ - "browser-test-shim.js", - "systemjs.config.extras.js", - "styles.css", - - "app/bag/**/*.html", - "app/bag/**/*.ts", - "app/bag/**/*.spec.ts", - - "!app/bag/bag-main.ts", - - "testing/*.ts", - - "bag-specs.html" - ], - "main": "bag-specs.html", - "tags": ["testing"] -} diff --git a/aio/content/examples/testing/bag.plnkr.json b/aio/content/examples/testing/bag.plnkr.json deleted file mode 100644 index 4bb0ac9c5b..0000000000 --- a/aio/content/examples/testing/bag.plnkr.json +++ /dev/null @@ -1,14 +0,0 @@ -{ - "description": "Running the bag", - "basePath": "src/", - "files":[ - "styles.css", - - "app/bag/bag.ts", - "app/bag/bag-external-template.html", - "app/bag/bag-main.ts", - "bag.html" - ], - "main": "bag.html", - "tags": ["testing"] -} diff --git a/aio/content/examples/testing/banner-inline-specs.plnkr.json b/aio/content/examples/testing/banner-inline-specs.plnkr.json deleted file mode 100644 index 77b8c212cf..0000000000 --- a/aio/content/examples/testing/banner-inline-specs.plnkr.json +++ /dev/null @@ -1,15 +0,0 @@ -{ - "description": "Testing - banner-inline.component.specs", - "basePath": "src/", - "files":[ - "browser-test-shim.js", - "systemjs.config.extras.js", - - "app/banner-inline.component.ts", - "app/banner-inline.component.spec.ts", - "banner-inline-specs.html" - ], - "main": "banner-inline-specs.html", - "open": "app/banner-inline.component.spec.ts", - "tags": ["testing"] -} diff --git a/aio/content/examples/testing/banner-specs.plnkr.json b/aio/content/examples/testing/banner-specs.plnkr.json deleted file mode 100644 index 6e5f20bccb..0000000000 --- a/aio/content/examples/testing/banner-specs.plnkr.json +++ /dev/null @@ -1,17 +0,0 @@ -{ - "description": "Testing - banner.component.specs", - "basePath": "src/", - "files":[ - "browser-test-shim.js", - "systemjs.config.extras.js", - - "app/banner.component.css", - "app/banner.component.html", - "app/banner.component.ts", - "app/banner.component.spec.ts", - "banner-specs.html" - ], - "main": "banner-specs.html", - "open": "app/banner.component.spec.ts", - "tags": ["testing"] -} diff --git a/aio/content/examples/testing/example-config.json b/aio/content/examples/testing/example-config.json index e69de29bb2..317e9458f3 100644 --- a/aio/content/examples/testing/example-config.json +++ b/aio/content/examples/testing/example-config.json @@ -0,0 +1,3 @@ +{ + "projectType": "testing" +} diff --git a/aio/content/examples/testing/plnkr.json b/aio/content/examples/testing/plnkr.json deleted file mode 100644 index 899867159f..0000000000 --- a/aio/content/examples/testing/plnkr.json +++ /dev/null @@ -1,18 +0,0 @@ -{ - "description": "Heroes Test App", - "basePath": "src/", - "files":[ - "styles.css", - "systemjs.config.extras.js", - - "app/**/*.css", - "app/**/*.html", - "app/**/*.ts", - - "!app/bag/*.*", - - "main.ts", - "index.html" - ], - "tags": ["testing"] -} diff --git a/aio/content/examples/testing/specs.stackblitz.json b/aio/content/examples/testing/specs.stackblitz.json new file mode 100644 index 0000000000..627630f6ed --- /dev/null +++ b/aio/content/examples/testing/specs.stackblitz.json @@ -0,0 +1,25 @@ +{ + "description": "Testing - specs", + "files":[ + "src/styles.css", + + "src/app/**/*.css", + "src/app/**/*.html", + "src/app/**/*.ts", + "src/app/**/*.spec.ts", + + "src/testing/*.ts", + + "!src/main.ts", + "!src/app/bag/*.*", + "!src/app/1st.spec.ts", + + "src/expected.ts", + "src/test.css", + "src/tests.sb.ts", + "src/main-specs.ts", + "src/index-specs.html" + ], + "main": "src/index-specs.html", + "tags": ["testing"] +} diff --git a/aio/content/examples/testing/src/1st-specs.html b/aio/content/examples/testing/src/1st-specs.html deleted file mode 100644 index 5876a65b9a..0000000000 --- a/aio/content/examples/testing/src/1st-specs.html +++ /dev/null @@ -1,41 +0,0 @@ - - - - - -', () => {
- const de = fixture.debugElement.query(By.css('h2'));
- const bgColor = de.nativeElement.style.backgroundColor;
+ const h2: HTMLElement = fixture.nativeElement.querySelector('h2');
+ const bgColor = h2.style.backgroundColor;
expect(bgColor).toBe('skyblue');
});
// #enddocregion tests
diff --git a/aio/content/examples/testing/src/app/about.component.ts b/aio/content/examples/testing/src/app/about/about.component.ts
similarity index 84%
rename from aio/content/examples/testing/src/app/about.component.ts
rename to aio/content/examples/testing/src/app/about/about.component.ts
index 90e7132b4c..465d081d25 100644
--- a/aio/content/examples/testing/src/app/about.component.ts
+++ b/aio/content/examples/testing/src/app/about/about.component.ts
@@ -3,7 +3,8 @@ import { Component } from '@angular/core';
@Component({
template: `
About
+ Quote of the day:
All about this sample
` + ` }) export class AboutComponent { } diff --git a/aio/content/examples/testing/src/app/app-initial.component.spec.ts b/aio/content/examples/testing/src/app/app-initial.component.spec.ts new file mode 100644 index 0000000000..3e3e6a847c --- /dev/null +++ b/aio/content/examples/testing/src/app/app-initial.component.spec.ts @@ -0,0 +1,76 @@ +// #docplaster +// #docregion +import { TestBed, async } from '@angular/core/testing'; +// #enddocregion +import { AppComponent } from './app-initial.component'; +/* +// #docregion +import { AppComponent } from './app.component'; + +describe('AppComponent', () => { +// #enddocregion +*/ +describe('AppComponent (initial CLI version)', () => { + // #docregion + beforeEach(async(() => { + TestBed.configureTestingModule({ + declarations: [ + AppComponent + ], + }).compileComponents(); + })); + it('should create the app', async(() => { + const fixture = TestBed.createComponent(AppComponent); + const app = fixture.debugElement.componentInstance; + expect(app).toBeTruthy(); + })); + it(`should have as title 'app'`, async(() => { + const fixture = TestBed.createComponent(AppComponent); + const app = fixture.debugElement.componentInstance; + expect(app.title).toEqual('app'); + })); + it('should render title in a h1 tag', async(() => { + const fixture = TestBed.createComponent(AppComponent); + fixture.detectChanges(); + const compiled = fixture.nativeElement; + expect(compiled.querySelector('h1').textContent).toContain('Welcome to app!'); + })); +}); +// #enddocregion + +/// As it should be +import { DebugElement } from '@angular/core'; +import { ComponentFixture } from '@angular/core/testing'; + +describe('AppComponent (initial CLI version - as it should be)', () => { + + let app: AppComponent; + let de: DebugElement; + let fixture: ComponentFixtureWelcome to {{title}}!
' +}) +export class AppComponent { + title = 'app'; +} diff --git a/aio/content/examples/testing/src/app/app-routing.module.ts b/aio/content/examples/testing/src/app/app-routing.module.ts index 6096a513df..f9fd0bdc83 100644 --- a/aio/content/examples/testing/src/app/app-routing.module.ts +++ b/aio/content/examples/testing/src/app/app-routing.module.ts @@ -1,7 +1,7 @@ import { NgModule } from '@angular/core'; import { RouterModule } from '@angular/router'; -import { AboutComponent } from './about.component'; +import { AboutComponent } from './about/about.component'; @NgModule({ imports: [ diff --git a/aio/content/examples/testing/src/app/app.component.html b/aio/content/examples/testing/src/app/app.component.html index 232bcebb6d..d73c1162c0 100644 --- a/aio/content/examples/testing/src/app/app.component.html +++ b/aio/content/examples/testing/src/app/app.component.html @@ -1,11 +1,11 @@!
- 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/aio/content/examples/testing/src/app/banner.component.spec.ts b/aio/content/examples/testing/src/app/banner.component.spec.ts
deleted file mode 100644
index a564c45c85..0000000000
--- a/aio/content/examples/testing/src/app/banner.component.spec.ts
+++ /dev/null
@@ -1,53 +0,0 @@
-// #docplaster
-import { async, ComponentFixture, TestBed } from '@angular/core/testing';
-import { By } from '@angular/platform-browser';
-import { DebugElement } from '@angular/core';
-
-import { BannerComponent } from './banner.component';
-
-describe('BannerComponent (templateUrl)', () => {
-
- let comp: BannerComponent;
- let fixture: ComponentFixture;
- let de: DebugElement;
- let el: HTMLElement;
-
- // #docregion async-before-each
- // async beforeEach
- beforeEach(async(() => {
- TestBed.configureTestingModule({
- declarations: [ BannerComponent ], // declare the test component
- })
- .compileComponents(); // compile template and css
- }));
- // #enddocregion async-before-each
-
- // #docregion sync-before-each
- // synchronous beforeEach
- beforeEach(() => {
- fixture = TestBed.createComponent(BannerComponent);
-
- comp = fixture.componentInstance; // BannerComponent test instance
-
- // query for the title by CSS element selector
- de = fixture.debugElement.query(By.css('h1'));
- el = de.nativeElement;
- });
- // #enddocregion sync-before-each
-
- it('no title in the DOM until manually call `detectChanges`', () => {
- expect(el.textContent).toEqual('');
- });
-
- 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');
- });
-
-});
diff --git a/aio/content/examples/testing/src/app/banner.component.css b/aio/content/examples/testing/src/app/banner/banner-external.component.css
similarity index 100%
rename from aio/content/examples/testing/src/app/banner.component.css
rename to aio/content/examples/testing/src/app/banner/banner-external.component.css
diff --git a/aio/content/examples/testing/src/app/banner.component.html b/aio/content/examples/testing/src/app/banner/banner-external.component.html
similarity index 100%
rename from aio/content/examples/testing/src/app/banner.component.html
rename to aio/content/examples/testing/src/app/banner/banner-external.component.html
diff --git a/aio/content/examples/testing/src/app/banner/banner-external.component.spec.ts b/aio/content/examples/testing/src/app/banner/banner-external.component.spec.ts
new file mode 100644
index 0000000000..d5fc9c8cbe
--- /dev/null
+++ b/aio/content/examples/testing/src/app/banner/banner-external.component.spec.ts
@@ -0,0 +1,72 @@
+// #docplaster
+// #docregion import-async
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+// #enddocregion import-async
+import { By } from '@angular/platform-browser';
+import { DebugElement } from '@angular/core';
+
+import { BannerComponent } from './banner-external.component';
+
+describe('BannerComponent (external files)', () => {
+ let component: BannerComponent;
+ let fixture: ComponentFixture;
+ let h1: HTMLElement;
+
+ describe('Two beforeEach', () => {
+ // #docregion async-before-each
+ beforeEach(async(() => {
+ TestBed.configureTestingModule({
+ declarations: [ BannerComponent ],
+ })
+ .compileComponents(); // compile template and css
+ }));
+ // #enddocregion async-before-each
+
+ // synchronous beforeEach
+ // #docregion sync-before-each
+ beforeEach(() => {
+ fixture = TestBed.createComponent(BannerComponent);
+ component = fixture.componentInstance; // BannerComponent test instance
+ h1 = fixture.nativeElement.querySelector('h1');
+ });
+ // #enddocregion sync-before-each
+
+ tests();
+ });
+
+ describe('One beforeEach', () => {
+ // #docregion one-before-each
+ beforeEach(async(() => {
+ TestBed.configureTestingModule({
+ declarations: [ BannerComponent ],
+ })
+ .compileComponents()
+ .then(() => {
+ fixture = TestBed.createComponent(BannerComponent);
+ component = fixture.componentInstance;
+ h1 = fixture.nativeElement.querySelector('h1');
+ });
+ }));
+ // #enddocregion one-before-each
+
+ tests();
+ });
+
+ function tests() {
+ it('no title in the DOM until manually call `detectChanges`', () => {
+ expect(h1.textContent).toEqual('');
+ });
+
+ it('should display original title', () => {
+ fixture.detectChanges();
+ expect(h1.textContent).toContain(component.title);
+ });
+
+ it('should display a different test title', () => {
+ component.title = 'Test Title';
+ fixture.detectChanges();
+ expect(h1.textContent).toContain('Test Title');
+ });
+ }
+});
+
diff --git a/aio/content/examples/testing/src/app/banner-inline.component.ts b/aio/content/examples/testing/src/app/banner/banner-external.component.ts
similarity index 50%
rename from aio/content/examples/testing/src/app/banner-inline.component.ts
rename to aio/content/examples/testing/src/app/banner/banner-external.component.ts
index 7ec4ef6999..dfec36074d 100644
--- a/aio/content/examples/testing/src/app/banner-inline.component.ts
+++ b/aio/content/examples/testing/src/app/banner/banner-external.component.ts
@@ -1,11 +1,14 @@
+// #docplaster
// #docregion
import { Component } from '@angular/core';
+// #docregion metadata
@Component({
selector: 'app-banner',
- template: '{{title}}
'
+ templateUrl: './banner-external.component.html',
+ styleUrls: ['./banner-external.component.css']
})
+// #enddocregion metadata
export class BannerComponent {
title = 'Test Tour of Heroes';
}
-
diff --git a/aio/content/examples/testing/src/app/banner/banner-initial.component.spec.ts b/aio/content/examples/testing/src/app/banner/banner-initial.component.spec.ts
new file mode 100644
index 0000000000..8a45df5023
--- /dev/null
+++ b/aio/content/examples/testing/src/app/banner/banner-initial.component.spec.ts
@@ -0,0 +1,119 @@
+// #docplaster
+// #docregion import-by
+import { By } from '@angular/platform-browser';
+// #enddocregion import-by
+// #docregion import-debug-element
+import { DebugElement } from '@angular/core';
+// #enddocregion import-debug-element
+// #docregion v1
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+// #enddocregion v1
+import { BannerComponent } from './banner-initial.component';
+/*
+// #docregion v1
+import { BannerComponent } from './banner.component';
+
+describe('BannerComponent', () => {
+// #enddocregion v1
+*/
+describe('BannerComponent (initial CLI generated)', () => {
+// #docregion v1
+ let component: BannerComponent;
+ let fixture: ComponentFixture;
+
+ beforeEach(async(() => {
+ TestBed.configureTestingModule({
+ declarations: [ BannerComponent ]
+ })
+ .compileComponents();
+ }));
+
+ beforeEach(() => {
+ fixture = TestBed.createComponent(BannerComponent);
+ component = fixture.componentInstance;
+ fixture.detectChanges();
+ });
+
+ it('should create', () => {
+ expect(component).toBeDefined();
+ });
+});
+// #enddocregion v1
+
+// #docregion v2
+describe('BannerComponent (minimal)', () => {
+ it('should create', () => {
+ // #docregion configureTestingModule
+ TestBed.configureTestingModule({
+ declarations: [ BannerComponent ]
+ });
+ // #enddocregion configureTestingModule
+ // #docregion createComponent
+ const fixture = TestBed.createComponent(BannerComponent);
+ // #enddocregion createComponent
+ // #docregion componentInstance
+ const component = fixture.componentInstance;
+ expect(component).toBeDefined();
+ // #enddocregion componentInstance
+ });
+});
+// #enddocregion v2
+
+// #docregion v3, v4
+describe('BannerComponent (with beforeEach)', () => {
+ let component: BannerComponent;
+ let fixture: ComponentFixture;
+
+ beforeEach(() => {
+ TestBed.configureTestingModule({
+ declarations: [ BannerComponent ]
+ });
+ fixture = TestBed.createComponent(BannerComponent);
+ component = fixture.componentInstance;
+ });
+
+ it('should create', () => {
+ expect(component).toBeDefined();
+ });
+// #enddocregion v3
+
+// #docregion v4-test-2
+ it('should contain "banner works!"', () => {
+ const bannerElement: HTMLElement = fixture.nativeElement;
+ expect(bannerElement.textContent).toContain('banner works!');
+ });
+// #enddocregion v4-test-2
+
+// #docregion v4-test-3
+ it('should have with "banner works!"', () => {
+ // #docregion nativeElement
+ const bannerElement: HTMLElement = fixture.nativeElement;
+ // #enddocregion nativeElement
+ const p = bannerElement.querySelector('p');
+ expect(p.textContent).toEqual('banner works!');
+ });
+// #enddocregion v4-test-3
+
+
+// #docregion v4-test-4
+it('should find the
with fixture.debugElement.nativeElement)', () => {
+ // #docregion debugElement-nativeElement
+ const bannerDe: DebugElement = fixture.debugElement;
+ const bannerEl: HTMLElement = bannerDe.nativeElement;
+ // #enddocregion debugElement-nativeElement
+ const p = bannerEl.querySelector('p');
+ expect(p.textContent).toEqual('banner works!');
+});
+// #enddocregion v4-test-4
+
+// #docregion v4-test-5
+it('should find the
with fixture.debugElement.query(By.css)', () => {
+ const bannerDe: DebugElement = fixture.debugElement;
+ const paragraphDe = bannerDe.query(By.css('p'));
+ const p: HTMLElement = paragraphDe.nativeElement;
+ expect(p.textContent).toEqual('banner works!');
+});
+// #enddocregion v4-test-5
+// #docregion v3
+});
+// #enddocregion v3, v4
diff --git a/aio/content/examples/testing/src/app/banner/banner-initial.component.ts b/aio/content/examples/testing/src/app/banner/banner-initial.component.ts
new file mode 100644
index 0000000000..a7959e5573
--- /dev/null
+++ b/aio/content/examples/testing/src/app/banner/banner-initial.component.ts
@@ -0,0 +1,10 @@
+// BannerComponent as initially generated by the CLI
+// #docregion
+import { Component } from '@angular/core';
+
+@Component({
+ selector: 'app-banner',
+ template: `
banner works!
`,
+ styles: []
+})
+export class BannerComponent { }
diff --git a/aio/content/examples/testing/src/app/banner.component.detect-changes.spec.ts b/aio/content/examples/testing/src/app/banner/banner.component.detect-changes.spec.ts
similarity index 76%
rename from aio/content/examples/testing/src/app/banner.component.detect-changes.spec.ts
rename to aio/content/examples/testing/src/app/banner/banner.component.detect-changes.spec.ts
index 412f5be586..3310fbdad0 100644
--- a/aio/content/examples/testing/src/app/banner.component.detect-changes.spec.ts
+++ b/aio/content/examples/testing/src/app/banner/banner.component.detect-changes.spec.ts
@@ -7,53 +7,45 @@ import { async } from '@angular/core/testing';
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;
- let de: DebugElement;
- let el: HTMLElement;
+ let h1: HTMLElement;
- beforeEach(async(() => {
+ beforeEach(() => {
// #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;
+ h1 = fixture.nativeElement.querySelector('h1');
});
// #docregion auto-detect-tests
it('should display original title', () => {
// Hooray! No `fixture.detectChanges()` needed
- expect(el.textContent).toContain(comp.title);
+ expect(h1.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);
+ expect(h1.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);
+ expect(h1.textContent).toContain(comp.title);
});
// #enddocregion auto-detect-tests
});
diff --git a/aio/content/examples/testing/src/app/banner/banner.component.spec.ts b/aio/content/examples/testing/src/app/banner/banner.component.spec.ts
new file mode 100644
index 0000000000..a731debbd1
--- /dev/null
+++ b/aio/content/examples/testing/src/app/banner/banner.component.spec.ts
@@ -0,0 +1,56 @@
+// #docplaster
+// #docregion
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { DebugElement } from '@angular/core';
+
+import { BannerComponent } from './banner.component';
+
+describe('BannerComponent (inline template)', () => {
+// #docregion setup
+ let component: BannerComponent;
+ let fixture: ComponentFixture;
+ let h1: HTMLElement;
+
+ // #docregion configure-and-create
+ beforeEach(() => {
+ TestBed.configureTestingModule({
+ declarations: [ BannerComponent ],
+ });
+ fixture = TestBed.createComponent(BannerComponent);
+ // #enddocregion configure-and-create
+ component = fixture.componentInstance; // BannerComponent test instance
+ h1 = fixture.nativeElement.querySelector('h1');
+ // #docregion configure-and-create
+ });
+// #enddocregion setup, configure-and-create
+
+// #docregion test-w-o-detect-changes
+ it('no title in the DOM after createComponent()', () => {
+ expect(h1.textContent).toEqual('');
+ });
+// #enddocregion test-w-o-detect-changes
+
+// #docregion expect-h1-default-v1
+ it('should display original title', () => {
+ // #enddocregion expect-h1-default-v1
+ fixture.detectChanges();
+ // #docregion expect-h1-default-v1
+ expect(h1.textContent).toContain(component.title);
+ });
+ // #enddocregion expect-h1-default-v1
+
+// #docregion expect-h1-default
+it('should display original title after detectChanges()', () => {
+ fixture.detectChanges();
+ expect(h1.textContent).toContain(component.title);
+});
+// #enddocregion expect-h1-default
+
+// #docregion after-change
+it('should display a different test title', () => {
+ component.title = 'Test Title';
+ fixture.detectChanges();
+ expect(h1.textContent).toContain('Test Title');
+});
+// #enddocregion after-change
+});
diff --git a/aio/content/examples/testing/src/app/banner.component.ts b/aio/content/examples/testing/src/app/banner/banner.component.ts
similarity index 52%
rename from aio/content/examples/testing/src/app/banner.component.ts
rename to aio/content/examples/testing/src/app/banner/banner.component.ts
index 4355a40867..3354801d0a 100644
--- a/aio/content/examples/testing/src/app/banner.component.ts
+++ b/aio/content/examples/testing/src/app/banner/banner.component.ts
@@ -1,12 +1,12 @@
-// #docregion
import { Component } from '@angular/core';
+// #docregion component
@Component({
selector: 'app-banner',
- templateUrl: './banner.component.html',
- styleUrls: ['./banner.component.css']
+ template: '{{title}}
',
+ styles: ['h1 { color: green; font-size: 350%}']
})
export class BannerComponent {
title = 'Test Tour of Heroes';
}
-
+// #enddocregion component
diff --git a/aio/content/examples/testing/src/app/dashboard/dashboard-hero.component.html b/aio/content/examples/testing/src/app/dashboard/dashboard-hero.component.html
deleted file mode 100644
index ff49bd17a5..0000000000
--- a/aio/content/examples/testing/src/app/dashboard/dashboard-hero.component.html
+++ /dev/null
@@ -1,4 +0,0 @@
-
-
- {{hero.name | uppercase}}
-
diff --git a/aio/content/examples/testing/src/app/dashboard/dashboard-hero.component.spec.ts b/aio/content/examples/testing/src/app/dashboard/dashboard-hero.component.spec.ts
index 40c01571e6..84d73e45f4 100644
--- a/aio/content/examples/testing/src/app/dashboard/dashboard-hero.component.spec.ts
+++ b/aio/content/examples/testing/src/app/dashboard/dashboard-hero.component.spec.ts
@@ -1,7 +1,9 @@
+
+// #docplaster
import { async, ComponentFixture, TestBed
} from '@angular/core/testing';
-import { By } from '@angular/platform-browser';
+import { By } from '@angular/platform-browser';
import { DebugElement } from '@angular/core';
import { addMatchers, click } from '../../testing';
@@ -11,64 +13,96 @@ import { DashboardHeroComponent } from './dashboard-hero.component';
beforeEach( addMatchers );
+describe('DashboardHeroComponent class only', () => {
+ // #docregion class-only
+ it('raises the selected event when clicked', () => {
+ const comp = new DashboardHeroComponent();
+ const hero: Hero = { id: 42, name: 'Test' };
+ comp.hero = hero;
+
+ comp.selected.subscribe(selectedHero => expect(selectedHero).toBe(hero));
+ comp.click();
+ });
+ // #enddocregion class-only
+});
+
describe('DashboardHeroComponent when tested directly', () => {
let comp: DashboardHeroComponent;
let expectedHero: Hero;
let fixture: ComponentFixture;
- let heroEl: DebugElement;
+ let heroDe: DebugElement;
+ let heroEl: HTMLElement;
- // #docregion setup, compile-components
- // async beforeEach
- beforeEach( async(() => {
+ beforeEach(async(() => {
+ // #docregion setup, config-testbed
TestBed.configureTestingModule({
- declarations: [ DashboardHeroComponent ],
+ declarations: [ DashboardHeroComponent ]
})
- .compileComponents(); // compile template and css
+ // #enddocregion setup, config-testbed
+ .compileComponents();
}));
- // #enddocregion compile-components
- // synchronous beforeEach
beforeEach(() => {
+ // #docregion setup
fixture = TestBed.createComponent(DashboardHeroComponent);
comp = fixture.componentInstance;
- heroEl = fixture.debugElement.query(By.css('.hero')); // find hero element
- // pretend that it was wired to something that supplied a hero
- expectedHero = new Hero(42, 'Test Name');
+ // find the hero's DebugElement and element
+ heroDe = fixture.debugElement.query(By.css('.hero'));
+ heroEl = heroDe.nativeElement;
+
+ // mock the hero supplied by the parent component
+ expectedHero = { id: 42, name: 'Test Name' };
+
+ // simulate the parent setting the input property with that hero
comp.hero = expectedHero;
- fixture.detectChanges(); // trigger initial data binding
+
+ // trigger initial data binding
+ fixture.detectChanges();
+ // #enddocregion setup
});
- // #enddocregion setup
// #docregion name-test
- it('should display hero name', () => {
+ it('should display hero name in uppercase', () => {
const expectedPipedName = expectedHero.name.toUpperCase();
- expect(heroEl.nativeElement.textContent).toContain(expectedPipedName);
+ expect(heroEl.textContent).toContain(expectedPipedName);
});
// #enddocregion name-test
// #docregion click-test
- it('should raise selected event when clicked', () => {
+ it('should raise selected event when clicked (triggerEventHandler)', () => {
let selectedHero: Hero;
comp.selected.subscribe((hero: Hero) => selectedHero = hero);
// #docregion trigger-event-handler
- heroEl.triggerEventHandler('click', null);
+ heroDe.triggerEventHandler('click', null);
// #enddocregion trigger-event-handler
expect(selectedHero).toBe(expectedHero);
});
// #enddocregion click-test
- // #docregion click-test-2
- it('should raise selected event when clicked', () => {
- let selectedHero: Hero;
- comp.selected.subscribe((hero: Hero) => selectedHero = hero);
+ // #docregion click-test-2
+ it('should raise selected event when clicked (element.click)', () => {
+ let selectedHero: Hero;
+ comp.selected.subscribe((hero: Hero) => selectedHero = hero);
+
+ heroEl.click();
+ expect(selectedHero).toBe(expectedHero);
+ });
+ // #enddocregion click-test-2
+
+ // #docregion click-test-3
+ it('should raise selected event when clicked (click helper)', () => {
+ let selectedHero: Hero;
+ comp.selected.subscribe(hero => selectedHero = hero);
+
+ click(heroDe); // click helper with DebugElement
+ click(heroEl); // click helper with native element
- click(heroEl); // triggerEventHandler helper
expect(selectedHero).toBe(expectedHero);
});
- // #enddocregion click-test-2
+ // #enddocregion click-test-3
});
//////////////////
@@ -76,28 +110,31 @@ describe('DashboardHeroComponent when tested directly', () => {
describe('DashboardHeroComponent when inside a test host', () => {
let testHost: TestHostComponent;
let fixture: ComponentFixture;
- let heroEl: DebugElement;
+ let heroEl: HTMLElement;
- // #docregion test-host-setup
- beforeEach( async(() => {
+ beforeEach(async(() => {
+ // #docregion test-host-setup
TestBed.configureTestingModule({
- declarations: [ DashboardHeroComponent, TestHostComponent ], // declare both
- }).compileComponents();
+ declarations: [ DashboardHeroComponent, TestHostComponent ]
+ })
+ // #enddocregion test-host-setup
+ .compileComponents();
}));
beforeEach(() => {
+ // #docregion test-host-setup
// create TestHostComponent instead of DashboardHeroComponent
fixture = TestBed.createComponent(TestHostComponent);
testHost = fixture.componentInstance;
- heroEl = fixture.debugElement.query(By.css('.hero')); // find hero
+ heroEl = fixture.nativeElement.querySelector('.hero');
fixture.detectChanges(); // trigger initial data binding
+ // #enddocregion test-host-setup
});
- // #enddocregion test-host-setup
// #docregion test-host-tests
it('should display hero name', () => {
const expectedPipedName = testHost.hero.name.toUpperCase();
- expect(heroEl.nativeElement.textContent).toContain(expectedPipedName);
+ expect(heroEl.textContent).toContain(expectedPipedName);
});
it('should raise selected event when clicked', () => {
@@ -114,10 +151,12 @@ import { Component } from '@angular/core';
// #docregion test-host
@Component({
template: `
-
+ `
})
class TestHostComponent {
- hero = new Hero(42, 'Test Name');
+ hero: Hero = {id: 42, name: 'Test Name' };
selectedHero: Hero;
onSelected(hero: Hero) { this.selectedHero = hero; }
}
diff --git a/aio/content/examples/testing/src/app/dashboard/dashboard-hero.component.ts b/aio/content/examples/testing/src/app/dashboard/dashboard-hero.component.ts
index 3b6de56cf4..ca1ff573bf 100644
--- a/aio/content/examples/testing/src/app/dashboard/dashboard-hero.component.ts
+++ b/aio/content/examples/testing/src/app/dashboard/dashboard-hero.component.ts
@@ -5,13 +5,17 @@ import { Hero } from '../model/hero';
// #docregion component
@Component({
- selector: 'dashboard-hero',
- templateUrl: './dashboard-hero.component.html',
+ selector: 'dashboard-hero',
+ template: `
+
+ {{hero.name | uppercase}}
+ `,
styleUrls: [ './dashboard-hero.component.css' ]
})
+// #docregion class
export class DashboardHeroComponent {
@Input() hero: Hero;
@Output() selected = new EventEmitter();
click() { this.selected.emit(this.hero); }
}
-// #enddocregion component
+// #enddocregion component, class
diff --git a/aio/content/examples/testing/src/app/dashboard/dashboard.component.no-testbed.spec.ts b/aio/content/examples/testing/src/app/dashboard/dashboard.component.no-testbed.spec.ts
index 125e5193b7..1d372bfe0e 100644
--- a/aio/content/examples/testing/src/app/dashboard/dashboard.component.no-testbed.spec.ts
+++ b/aio/content/examples/testing/src/app/dashboard/dashboard.component.no-testbed.spec.ts
@@ -1,24 +1,24 @@
import { Router } from '@angular/router';
import { DashboardComponent } from './dashboard.component';
-import { Hero } from '../model';
+import { Hero } from '../model/hero';
import { addMatchers } from '../../testing';
-import { FakeHeroService } from '../model/testing';
+import { TestHeroService, HeroService } from '../model/testing/test-hero.service';
class FakeRouter {
navigateByUrl(url: string) { return url; }
}
-describe('DashboardComponent: w/o Angular TestBed', () => {
+describe('DashboardComponent class only', () => {
let comp: DashboardComponent;
- let heroService: FakeHeroService;
+ let heroService: TestHeroService;
let router: Router;
beforeEach(() => {
addMatchers();
router = new FakeRouter() as any as Router;
- heroService = new FakeHeroService();
+ heroService = new TestHeroService();
comp = new DashboardComponent(router, heroService);
});
@@ -35,17 +35,19 @@ describe('DashboardComponent: w/o Angular TestBed', () => {
it('should HAVE heroes after HeroService gets them', (done: DoneFn) => {
comp.ngOnInit(); // ngOnInit -> getHeroes
- heroService.lastPromise // the one from getHeroes
- .then(() => {
+ heroService.lastResult // the one from getHeroes
+ .subscribe(
+ () => {
// throw new Error('deliberate error'); // see it fail gracefully
expect(comp.heroes.length).toBeGreaterThan(0,
'should have heroes after service promise resolves');
- })
- .then(done, done.fail);
+ done();
+ },
+ done.fail);
});
it('should tell ROUTER to navigate by hero id', () => {
- const hero = new Hero(42, 'Abbracadabra');
+ const hero: Hero = {id: 42, name: 'Abbracadabra' };
const spy = spyOn(router, 'navigateByUrl');
comp.gotoDetail(hero);
diff --git a/aio/content/examples/testing/src/app/dashboard/dashboard.component.spec.ts b/aio/content/examples/testing/src/app/dashboard/dashboard.component.spec.ts
index 0b0f9e213a..9beef762a0 100644
--- a/aio/content/examples/testing/src/app/dashboard/dashboard.component.spec.ts
+++ b/aio/content/examples/testing/src/app/dashboard/dashboard.component.spec.ts
@@ -2,9 +2,9 @@
import { async, inject, ComponentFixture, TestBed
} from '@angular/core/testing';
-import { addMatchers, click } from '../../testing';
-import { HeroService } from '../model';
-import { FakeHeroService } from '../model/testing';
+import { addMatchers, asyncData, click } from '../../testing';
+import { HeroService } from '../model/hero.service';
+import { getTestHeroes } from '../model/testing/test-heroes';
import { By } from '@angular/platform-browser';
import { Router } from '@angular/router';
@@ -12,12 +12,6 @@ import { Router } from '@angular/router';
import { DashboardComponent } from './dashboard.component';
import { DashboardModule } from './dashboard.module';
-// #docregion router-stub
-class RouterStub {
- navigateByUrl(url: string) { return url; }
-}
-// #enddocregion router-stub
-
beforeEach ( addMatchers );
let comp: DashboardComponent;
@@ -37,8 +31,8 @@ describe('DashboardComponent (deep)', () => {
tests(clickForDeep);
function clickForDeep() {
- // get first DebugElement
- const heroEl = fixture.debugElement.query(By.css('.hero'));
+ // get first
+ const heroEl: HTMLElement = fixture.nativeElement.querySelector('.hero');
click(heroEl);
}
});
@@ -61,24 +55,32 @@ describe('DashboardComponent (shallow)', () => {
function clickForShallow() {
// get first DebugElement
- const heroEl = fixture.debugElement.query(By.css('dashboard-hero'));
- heroEl.triggerEventHandler('selected', comp.heroes[0]);
+ const heroDe = fixture.debugElement.query(By.css('dashboard-hero'));
+ heroDe.triggerEventHandler('selected', comp.heroes[0]);
}
});
/** Add TestBed providers, compile, and create DashboardComponent */
function compileAndCreate() {
// #docregion compile-and-create-body
- beforeEach( async(() => {
+ beforeEach(async(() => {
+ // #docregion router-spy
+ const routerSpy = jasmine.createSpyObj('Router', ['navigateByUrl']);
+ const heroServiceSpy = jasmine.createSpyObj('HeroService', ['getHeroes']);
+
TestBed.configureTestingModule({
providers: [
- { provide: HeroService, useClass: FakeHeroService },
- { provide: Router, useClass: RouterStub }
+ { provide: HeroService, useValue: heroServiceSpy },
+ { provide: Router, useValue: routerSpy }
]
})
+ // #enddocregion router-spy
.compileComponents().then(() => {
fixture = TestBed.createComponent(DashboardComponent);
comp = fixture.componentInstance;
+
+ // getHeroes spy returns observable of test heroes
+ heroServiceSpy.getHeroes.and.returnValue(asyncData(getTestHeroes()));
});
// #enddocregion compile-and-create-body
}));
@@ -104,8 +106,11 @@ function tests(heroClick: Function) {
describe('after get dashboard heroes', () => {
+ let router: Router;
+
// Trigger component so it gets heroes and binds to them
- beforeEach( async(() => {
+ beforeEach(async(() => {
+ router = fixture.debugElement.injector.get(Router);
fixture.detectChanges(); // runs ngOnInit -> getHeroes
fixture.whenStable() // No need for the `lastPromise` hack!
.then(() => fixture.detectChanges()); // bind to heroes
@@ -119,29 +124,25 @@ function tests(heroClick: Function) {
it('should DISPLAY heroes', () => {
// Find and examine the displayed heroes
// Look for them in the DOM by css class
- const heroes = fixture.debugElement.queryAll(By.css('dashboard-hero'));
+ const heroes = fixture.nativeElement.querySelectorAll('dashboard-hero');
expect(heroes.length).toBe(4, 'should display 4 heroes');
});
- // #docregion navigate-test, inject
- it('should tell ROUTER to navigate when hero clicked',
- inject([Router], (router: Router) => { // ...
- // #enddocregion inject
-
- const spy = spyOn(router, 'navigateByUrl');
+ // #docregion navigate-test
+ it('should tell ROUTER to navigate when hero clicked', () => {
heroClick(); // trigger click on first inner
- // args passed to router.navigateByUrl()
+ // args passed to router.navigateByUrl() spy
+ const spy = router.navigateByUrl as jasmine.Spy;
const navArgs = spy.calls.first().args[0];
// expecting to navigate to id of the component's first hero
const id = comp.heroes[0].id;
expect(navArgs).toBe('/heroes/' + id,
'should nav to HeroDetail for first hero');
- // #docregion inject
- }));
- // #enddocregion navigate-test, inject
+ });
+ // #enddocregion navigate-test
});
}
diff --git a/aio/content/examples/testing/src/app/dashboard/dashboard.component.ts b/aio/content/examples/testing/src/app/dashboard/dashboard.component.ts
index 6521f4b52e..6ab4e6f324 100644
--- a/aio/content/examples/testing/src/app/dashboard/dashboard.component.ts
+++ b/aio/content/examples/testing/src/app/dashboard/dashboard.component.ts
@@ -2,7 +2,7 @@
import { Component, OnInit } from '@angular/core';
import { Router } from '@angular/router';
-import { Hero } from '../model/hero';
+import { Hero } from '../model/hero';
import { HeroService } from '../model/hero.service';
@Component({
@@ -23,7 +23,7 @@ export class DashboardComponent implements OnInit {
ngOnInit() {
this.heroService.getHeroes()
- .then(heroes => this.heroes = heroes.slice(1, 5));
+ .subscribe(heroes => this.heroes = heroes.slice(1, 5));
}
// #docregion goto-detail
diff --git a/aio/content/examples/testing/src/app/bag/async-helper.spec.ts b/aio/content/examples/testing/src/app/demo/async-helper.spec.ts
similarity index 89%
rename from aio/content/examples/testing/src/app/bag/async-helper.spec.ts
rename to aio/content/examples/testing/src/app/demo/async-helper.spec.ts
index 12c8a4fbbd..4ca986badb 100644
--- a/aio/content/examples/testing/src/app/bag/async-helper.spec.ts
+++ b/aio/content/examples/testing/src/app/demo/async-helper.spec.ts
@@ -1,7 +1,8 @@
// tslint:disable-next-line:no-unused-variable
import { async, fakeAsync, tick } from '@angular/core/testing';
-import { Observable } from 'rxjs/Observable';
+import { of } from 'rxjs/observable/of';
+import { delay } from 'rxjs/operators';
describe('Angular async helper', () => {
let actuallyDone = false;
@@ -34,8 +35,8 @@ describe('Angular async helper', () => {
// Use done. Cannot use setInterval with async or fakeAsync
// See https://github.com/angular/angular/issues/10127
- it('should run async test with successful delayed Observable', (done: any) => {
- const source = Observable.of(true).delay(10);
+ it('should run async test with successful delayed Observable', (done: DoneFn) => {
+ const source = of(true).pipe(delay(10));
source.subscribe(
val => actuallyDone = true,
err => fail(err),
@@ -46,7 +47,7 @@ describe('Angular async helper', () => {
// 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', async(() => {
- // const source = Observable.of(true).delay(10);
+ // const source = of(true).pipe(delay(10));
// source.subscribe(
// val => actuallyDone = true,
// err => fail(err)
@@ -56,7 +57,7 @@ describe('Angular async helper', () => {
// // 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);
+ // const source = of(true).pipe(delay(10));
// source.subscribe(
// val => actuallyDone = true,
// err => fail(err)
diff --git a/aio/content/examples/testing/src/app/bag/bag-external-template.html b/aio/content/examples/testing/src/app/demo/demo-external-template.html
similarity index 100%
rename from aio/content/examples/testing/src/app/bag/bag-external-template.html
rename to aio/content/examples/testing/src/app/demo/demo-external-template.html
diff --git a/aio/content/examples/testing/src/app/bag/bag-main.ts b/aio/content/examples/testing/src/app/demo/demo-main.ts
similarity index 52%
rename from aio/content/examples/testing/src/app/bag/bag-main.ts
rename to aio/content/examples/testing/src/app/demo/demo-main.ts
index 27b78200ae..9243428b7a 100644
--- a/aio/content/examples/testing/src/app/bag/bag-main.ts
+++ b/aio/content/examples/testing/src/app/demo/demo-main.ts
@@ -1,5 +1,5 @@
// main app entry point
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
-import { BagModule } from './bag';
+import { DemoModule } from './demo';
-platformBrowserDynamic().bootstrapModule(BagModule);
+platformBrowserDynamic().bootstrapModule(DemoModule);
diff --git a/aio/content/examples/testing/src/app/demo/demo.spec.ts b/aio/content/examples/testing/src/app/demo/demo.spec.ts
new file mode 100644
index 0000000000..d65b9acfb8
--- /dev/null
+++ b/aio/content/examples/testing/src/app/demo/demo.spec.ts
@@ -0,0 +1,153 @@
+// #docplaster
+import {
+ LightswitchComponent,
+ MasterService,
+ ValueService,
+ ReversePipe
+} from './demo';
+
+///////// Fakes /////////
+export class FakeValueService extends ValueService {
+ value = 'faked service value';
+}
+////////////////////////
+describe('demo (no TestBed):', () => {
+
+ // #docregion ValueService
+ // Straight Jasmine testing without Angular's testing support
+ describe('ValueService', () => {
+ let service: ValueService;
+ beforeEach(() => { service = new ValueService(); });
+
+ it('#getValue should return real value', () => {
+ expect(service.getValue()).toBe('real value');
+ });
+
+ it('#getObservableValue should return value from observable',
+ (done: DoneFn) => {
+ service.getObservableValue().subscribe(value => {
+ expect(value).toBe('observable value');
+ done();
+ });
+ });
+
+ it('#getPromiseValue should return value from a promise',
+ (done: DoneFn) => {
+ service.getPromiseValue().then(value => {
+ expect(value).toBe('promise value');
+ done();
+ });
+ });
+ });
+ // #enddocregion ValueService
+
+ // MasterService requires injection of a ValueService
+ // #docregion MasterService
+ describe('MasterService without Angular testing support', () => {
+ let masterService: MasterService;
+
+ it('#getValue should return real value from the real service', () => {
+ masterService = new MasterService(new ValueService());
+ expect(masterService.getValue()).toBe('real value');
+ });
+
+ it('#getValue should return faked value from a fakeService', () => {
+ masterService = new MasterService(new FakeValueService());
+ expect(masterService.getValue()).toBe('faked service value');
+ });
+
+ it('#getValue should return faked value from a fake object', () => {
+ const fake = { getValue: () => 'fake value' };
+ masterService = new MasterService(fake as ValueService);
+ expect(masterService.getValue()).toBe('fake value');
+ });
+
+ it('#getValue should return stubbed value from a spy', () => {
+ // create `getValue` spy on an object representing the ValueService
+ const valueServiceSpy =
+ jasmine.createSpyObj('ValueService', ['getValue']);
+
+ // set the value to return when the `getValue` spy is called.
+ const stubValue = 'stub value';
+ valueServiceSpy.getValue.and.returnValue(stubValue);
+
+ masterService = new MasterService(valueServiceSpy);
+
+ expect(masterService.getValue())
+ .toBe(stubValue, 'service returned stub value');
+ expect(valueServiceSpy.getValue.calls.count())
+ .toBe(1, 'spy method was called once');
+ expect(valueServiceSpy.getValue.calls.mostRecent().returnValue)
+ .toBe(stubValue);
+ });
+ });
+ // #enddocregion MasterService
+
+ describe('MasterService (no beforeEach)', () => {
+ // #docregion no-before-each-test
+ it('#getValue should return stubbed value from a spy', () => {
+ // #docregion no-before-each-setup-call
+ const { masterService, stubValue, valueServiceSpy } = setup();
+ // #enddocregion no-before-each-setup-call
+ expect(masterService.getValue())
+ .toBe(stubValue, 'service returned stub value');
+ expect(valueServiceSpy.getValue.calls.count())
+ .toBe(1, 'spy method was called once');
+ expect(valueServiceSpy.getValue.calls.mostRecent().returnValue)
+ .toBe(stubValue);
+ });
+ // #enddocregion no-before-each-test
+
+ // #docregion no-before-each-setup
+ function setup() {
+ const valueServiceSpy =
+ jasmine.createSpyObj('ValueService', ['getValue']);
+ const stubValue = 'stub value';
+ const masterService = new MasterService(valueServiceSpy);
+
+ valueServiceSpy.getValue.and.returnValue(stubValue);
+ return { masterService, stubValue, valueServiceSpy };
+ }
+ // #enddocregion no-before-each-setup
+ });
+
+ // #docregion ReversePipe
+
+ describe('ReversePipe', () => {
+ let pipe: ReversePipe;
+
+ beforeEach(() => { pipe = new ReversePipe(); });
+
+ it('transforms "abc" to "cba"', () => {
+ expect(pipe.transform('abc')).toBe('cba');
+ });
+
+ it('no change to palindrome: "able was I ere I saw elba"', () => {
+ const palindrome = 'able was I ere I saw elba';
+ expect(pipe.transform(palindrome)).toBe(palindrome);
+ });
+
+ });
+ // #enddocregion ReversePipe
+
+ // #docregion Lightswitch
+ describe('LightswitchComp', () => {
+ it('#clicked() should toggle #isOn', () => {
+ const comp = new LightswitchComponent();
+ expect(comp.isOn).toBe(false, 'off at first');
+ comp.clicked();
+ expect(comp.isOn).toBe(true, 'on after click');
+ comp.clicked();
+ expect(comp.isOn).toBe(false, 'off after second click');
+ });
+
+ it('#clicked() should set #message to "is on"', () => {
+ const comp = new LightswitchComponent();
+ expect(comp.message).toMatch(/is off/i, 'off at first');
+ comp.clicked();
+ expect(comp.message).toMatch(/is on/i, 'on after clicked');
+ });
+ });
+ // #enddocregion Lightswitch
+
+});
diff --git a/aio/content/examples/testing/src/app/demo/demo.testbed.spec.ts b/aio/content/examples/testing/src/app/demo/demo.testbed.spec.ts
new file mode 100644
index 0000000000..2c0ba58e99
--- /dev/null
+++ b/aio/content/examples/testing/src/app/demo/demo.testbed.spec.ts
@@ -0,0 +1,706 @@
+// #docplaster
+import {
+ DemoModule,
+ BankAccountComponent, BankAccountParentComponent,
+ LightswitchComponent,
+ Child1Component, Child2Component, Child3Component,
+ MasterService,
+ ValueService,
+ ExternalTemplateComponent,
+ InputComponent,
+ IoComponent, IoParentComponent,
+ MyIfComponent, MyIfChildComponent, MyIfParentComponent,
+ NeedsContentComponent, ParentComponent,
+ TestProvidersComponent, TestViewProvidersComponent,
+ ReversePipeComponent, ShellComponent
+} from './demo';
+
+import { By } from '@angular/platform-browser';
+import { Component,
+ DebugElement,
+ Injectable } from '@angular/core';
+import { FormsModule } from '@angular/forms';
+
+// Forms symbols imported only for a specific test below
+import { NgModel, NgControl } from '@angular/forms';
+
+import { async, ComponentFixture, fakeAsync, inject, TestBed, tick
+} from '@angular/core/testing';
+
+import { addMatchers, newEvent, click } from '../../testing';
+
+export class NotProvided extends ValueService { /* example below */}
+beforeEach( addMatchers );
+
+describe('demo (with TestBed):', () => {
+
+//////// Service Tests /////////////
+
+ // #docregion ValueService
+ describe('ValueService', () => {
+
+ // #docregion value-service-before-each
+ let service: ValueService;
+
+ // #docregion value-service-inject-before-each
+ beforeEach(() => {
+ TestBed.configureTestingModule({ providers: [ValueService] });
+ // #enddocregion value-service-before-each
+ service = TestBed.get(ValueService);
+ // #docregion value-service-before-each
+ });
+ // #enddocregion value-service-before-each, value-service-inject-before-each
+
+ // #docregion value-service-inject-it
+ it('should use ValueService', () => {
+ service = TestBed.get(ValueService);
+ expect(service.getValue()).toBe('real value');
+ });
+ // #enddocregion value-service-inject-it
+
+ it('can inject a default value when service is not provided', () => {
+ // #docregion testbed-get-w-null
+ service = TestBed.get(NotProvided, null); // service is null
+ // #enddocregion testbed-get-w-null
+ });
+
+ it('test should wait for ValueService.getPromiseValue', async(() => {
+ service.getPromiseValue().then(
+ value => expect(value).toBe('promise value')
+ );
+ }));
+
+ it('test should wait for ValueService.getObservableValue', async(() => {
+ service.getObservableValue().subscribe(
+ value => expect(value).toBe('observable value')
+ );
+ }));
+
+ // Must use done. See https://github.com/angular/angular/issues/10127
+ it('test should wait for ValueService.getObservableDelayValue', (done: DoneFn) => {
+ service.getObservableDelayValue().subscribe(value => {
+ expect(value).toBe('observable delay value');
+ done();
+ });
+ });
+
+ it('should allow the use of fakeAsync', fakeAsync(() => {
+ let value: any;
+ service.getPromiseValue().then((val: any) => value = val);
+ tick(); // Trigger JS engine cycle until all promises resolve.
+ expect(value).toBe('promise value');
+ }));
+ });
+ // #enddocregion ValueService
+
+ describe('MasterService', () => {
+ // #docregion master-service-before-each
+ let masterService: MasterService;
+ let valueServiceSpy: jasmine.SpyObj;
+
+ beforeEach(() => {
+ const spy = jasmine.createSpyObj('ValueService', ['getValue']);
+
+ TestBed.configureTestingModule({
+ // Provide both the service-to-test and its (spy) dependency
+ providers: [
+ MasterService,
+ { provide: ValueService, useValue: spy }
+ ]
+ });
+ // Inject both the service-to-test and its (spy) dependency
+ masterService = TestBed.get(MasterService);
+ valueServiceSpy = TestBed.get(ValueService);
+ });
+ // #enddocregion master-service-before-each
+
+ // #docregion master-service-it
+ it('#getValue should return stubbed value from a spy', () => {
+ const stubValue = 'stub value';
+ valueServiceSpy.getValue.and.returnValue(stubValue);
+
+ expect(masterService.getValue())
+ .toBe(stubValue, 'service returned stub value');
+ expect(valueServiceSpy.getValue.calls.count())
+ .toBe(1, 'spy method was called once');
+ expect(valueServiceSpy.getValue.calls.mostRecent().returnValue)
+ .toBe(stubValue);
+ });
+ // #enddocregion master-service-it
+ });
+
+ describe('use inject within `it`', () => {
+ beforeEach(() => {
+ TestBed.configureTestingModule({ providers: [ValueService] });
+ });
+
+ it('should use modified providers',
+ inject([ValueService], (service: ValueService) => {
+ service.setValue('value modified in beforeEach');
+ expect(service.getValue())
+ .toBe('value modified in beforeEach');
+ })
+ );
+ });
+
+ describe('using async(inject) within beforeEach', () => {
+ let serviceValue: string;
+
+ beforeEach(() => {
+ TestBed.configureTestingModule({ providers: [ValueService] });
+ });
+
+ beforeEach(async(inject([ValueService], (service: ValueService) => {
+ service.getPromiseValue().then(value => serviceValue = value);
+ })));
+
+ it('should use asynchronously modified value ... in synchronous test', () => {
+ expect(serviceValue).toBe('promise value');
+ });
+ });
+
+/////////// Component Tests //////////////////
+
+ describe('TestBed component tests', () => {
+
+ beforeEach(async(() => {
+ TestBed
+ .configureTestingModule({
+ imports: [DemoModule],
+ })
+ // Compile everything in DemoModule
+ .compileComponents();
+ }));
+
+ it('should create a component with inline template', () => {
+ const fixture = TestBed.createComponent(Child1Component);
+ fixture.detectChanges();
+
+ expect(fixture).toHaveText('Child');
+ });
+
+ it('should create a component with external template', () => {
+ const fixture = TestBed.createComponent(ExternalTemplateComponent);
+ fixture.detectChanges();
+
+ expect(fixture).toHaveText('from external template');
+ });
+
+ it('should allow changing members of the component', () => {
+ const fixture = TestBed.createComponent(MyIfComponent);
+
+ fixture.detectChanges();
+ expect(fixture).toHaveText('MyIf()');
+
+ fixture.componentInstance.showMore = true;
+ fixture.detectChanges();
+ expect(fixture).toHaveText('MyIf(More)');
+ });
+
+ it('should create a nested component bound to inputs/outputs', () => {
+ const fixture = TestBed.createComponent(IoParentComponent);
+
+ fixture.detectChanges();
+ const heroes = fixture.debugElement.queryAll(By.css('.hero'));
+ expect(heroes.length).toBeGreaterThan(0, 'has heroes');
+
+ const comp = fixture.componentInstance;
+ const hero = comp.heroes[0];
+
+ click(heroes[0]);
+ fixture.detectChanges();
+
+ const selected = fixture.debugElement.query(By.css('p'));
+ expect(selected).toHaveText(hero.name);
+ });
+
+ it('can access the instance variable of an `*ngFor` row component', () => {
+ const fixture = TestBed.createComponent(IoParentComponent);
+ const comp = fixture.componentInstance;
+ const heroName = comp.heroes[0].name; // first hero's name
+
+ fixture.detectChanges();
+ const ngForRow = fixture.debugElement.query(By.directive(IoComponent)); // first hero ngForRow
+
+ const hero = ngForRow.context['hero']; // the hero object passed into the row
+ expect(hero.name).toBe(heroName, 'ngRow.context.hero');
+
+ const rowComp = ngForRow.componentInstance;
+ // jasmine.any is an "instance-of-type" test.
+ expect(rowComp).toEqual(jasmine.any(IoComponent), 'component is IoComp');
+ expect(rowComp.hero.name).toBe(heroName, 'component.hero');
+ });
+
+
+ // #docregion ButtonComp
+ it('should support clicking a button', () => {
+ const fixture = TestBed.createComponent(LightswitchComponent);
+ const btn = fixture.debugElement.query(By.css('button'));
+ const span = fixture.debugElement.query(By.css('span')).nativeElement;
+
+ fixture.detectChanges();
+ expect(span.textContent).toMatch(/is off/i, 'before click');
+
+ click(btn);
+ fixture.detectChanges();
+ expect(span.textContent).toMatch(/is on/i, 'after click');
+ });
+ // #enddocregion ButtonComp
+
+ // ngModel is async so we must wait for it with promise-based `whenStable`
+ it('should support entering text in input box (ngModel)', async(() => {
+ const expectedOrigName = 'John';
+ const expectedNewName = 'Sally';
+
+ const fixture = TestBed.createComponent(InputComponent);
+ fixture.detectChanges();
+
+ const comp = fixture.componentInstance;
+ const input = fixture.debugElement.query(By.css('input')).nativeElement;
+
+ expect(comp.name).toBe(expectedOrigName,
+ `At start name should be ${expectedOrigName} `);
+
+ // wait until ngModel binds comp.name to input box
+ fixture.whenStable().then(() => {
+ expect(input.value).toBe(expectedOrigName,
+ `After ngModel updates input box, input.value should be ${expectedOrigName} `);
+
+ // simulate user entering new name in input
+ input.value = expectedNewName;
+
+ // that change doesn't flow to the component immediately
+ expect(comp.name).toBe(expectedOrigName,
+ `comp.name should still be ${expectedOrigName} after value change, before binding happens`);
+
+ // dispatch a DOM event so that Angular learns of input value change.
+ // then wait while ngModel pushes input.box value to comp.name
+ input.dispatchEvent(newEvent('input'));
+ return fixture.whenStable();
+ })
+ .then(() => {
+ expect(comp.name).toBe(expectedNewName,
+ `After ngModel updates the model, comp.name should be ${expectedNewName} `);
+ });
+ }));
+
+ // fakeAsync version of ngModel input test enables sync test style
+ // synchronous `tick` replaces asynchronous promise-base `whenStable`
+ it('should support entering text in input box (ngModel) - fakeAsync', fakeAsync(() => {
+ const expectedOrigName = 'John';
+ const expectedNewName = 'Sally';
+
+ const fixture = TestBed.createComponent(InputComponent);
+ fixture.detectChanges();
+
+ const comp = fixture.componentInstance;
+ const input = fixture.debugElement.query(By.css('input')).nativeElement;
+
+ expect(comp.name).toBe(expectedOrigName,
+ `At start name should be ${expectedOrigName} `);
+
+ // wait until ngModel binds comp.name to input box
+ tick();
+ expect(input.value).toBe(expectedOrigName,
+ `After ngModel updates input box, input.value should be ${expectedOrigName} `);
+
+ // simulate user entering new name in input
+ input.value = expectedNewName;
+
+ // that change doesn't flow to the component immediately
+ expect(comp.name).toBe(expectedOrigName,
+ `comp.name should still be ${expectedOrigName} after value change, before binding happens`);
+
+ // dispatch a DOM event so that Angular learns of input value change.
+ // then wait a tick while ngModel pushes input.box value to comp.name
+ input.dispatchEvent(newEvent('input'));
+ tick();
+ expect(comp.name).toBe(expectedNewName,
+ `After ngModel updates the model, comp.name should be ${expectedNewName} `);
+ }));
+
+ // #docregion ReversePipeComp
+ it('ReversePipeComp should reverse the input text', fakeAsync(() => {
+ const inputText = 'the quick brown fox.';
+ const expectedText = '.xof nworb kciuq eht';
+
+ const fixture = TestBed.createComponent(ReversePipeComponent);
+ fixture.detectChanges();
+
+ const comp = fixture.componentInstance;
+ const input = fixture.debugElement.query(By.css('input')).nativeElement as HTMLInputElement;
+ const span = fixture.debugElement.query(By.css('span')).nativeElement as HTMLElement;
+
+ // simulate user entering new name in input
+ input.value = inputText;
+
+ // dispatch a DOM event so that Angular learns of input value change.
+ // then wait a tick while ngModel pushes input.box value to comp.text
+ // and Angular updates the output span
+ input.dispatchEvent(newEvent('input'));
+ tick();
+ fixture.detectChanges();
+ expect(span.textContent).toBe(expectedText, 'output span');
+ expect(comp.text).toBe(inputText, 'component.text');
+ }));
+ // #enddocregion ReversePipeComp
+
+ // Use this technique to find attached directives of any kind
+ it('can examine attached directives and listeners', () => {
+ const fixture = TestBed.createComponent(InputComponent);
+ fixture.detectChanges();
+
+ const inputEl = fixture.debugElement.query(By.css('input'));
+
+ expect(inputEl.providerTokens).toContain(NgModel, 'NgModel directive');
+
+ const ngControl = inputEl.injector.get(NgControl);
+ expect(ngControl).toEqual(jasmine.any(NgControl), 'NgControl directive');
+
+ expect(inputEl.listeners.length).toBeGreaterThan(2, 'several listeners attached');
+ });
+
+ // #docregion dom-attributes
+ it('BankAccountComponent should set attributes, styles, classes, and properties', () => {
+ const fixture = TestBed.createComponent(BankAccountParentComponent);
+ fixture.detectChanges();
+ const comp = fixture.componentInstance;
+
+ // the only child is debugElement of the BankAccount component
+ const el = fixture.debugElement.children[0];
+ const childComp = el.componentInstance as BankAccountComponent;
+ expect(childComp).toEqual(jasmine.any(BankAccountComponent));
+
+ expect(el.context).toBe(childComp, 'context is the child component');
+
+ expect(el.attributes['account']).toBe(childComp.id, 'account attribute');
+ expect(el.attributes['bank']).toBe(childComp.bank, 'bank attribute');
+
+ expect(el.classes['closed']).toBe(true, 'closed class');
+ expect(el.classes['open']).toBe(false, 'open class');
+
+ expect(el.styles['color']).toBe(comp.color, 'color style');
+ expect(el.styles['width']).toBe(comp.width + 'px', 'width style');
+ // #enddocregion dom-attributes
+
+ // Removed on 12/02/2016 when ceased public discussion of the `Renderer`. Revive in future?
+ // expect(el.properties['customProperty']).toBe(true, 'customProperty');
+
+ // #docregion dom-attributes
+ });
+ // #enddocregion dom-attributes
+
+
+ });
+
+ describe('TestBed component overrides:', () => {
+
+ it('should override ChildComp\'s template', () => {
+
+ const fixture = TestBed.configureTestingModule({
+ declarations: [Child1Component],
+ })
+ .overrideComponent(Child1Component, {
+ set: { template: 'Fake' }
+ })
+ .createComponent(Child1Component);
+
+ fixture.detectChanges();
+ expect(fixture).toHaveText('Fake');
+ });
+
+ it('should override TestProvidersComp\'s ValueService provider', () => {
+ const fixture = TestBed.configureTestingModule({
+ declarations: [TestProvidersComponent],
+ })
+ .overrideComponent(TestProvidersComponent, {
+ remove: { providers: [ValueService]},
+ add: { providers: [{ provide: ValueService, useClass: FakeValueService }] },
+
+ // Or replace them all (this component has only one provider)
+ // set: { providers: [{ provide: ValueService, useClass: FakeValueService }] },
+ })
+ .createComponent(TestProvidersComponent);
+
+ fixture.detectChanges();
+ expect(fixture).toHaveText('injected value: faked value', 'text');
+
+ // Explore the providerTokens
+ const tokens = fixture.debugElement.providerTokens;
+ expect(tokens).toContain(fixture.componentInstance.constructor, 'component ctor');
+ expect(tokens).toContain(TestProvidersComponent, 'TestProvidersComp');
+ expect(tokens).toContain(ValueService, 'ValueService');
+ });
+
+ it('should override TestViewProvidersComp\'s ValueService viewProvider', () => {
+ const fixture = TestBed.configureTestingModule({
+ declarations: [TestViewProvidersComponent],
+ })
+ .overrideComponent(TestViewProvidersComponent, {
+ // remove: { viewProviders: [ValueService]},
+ // add: { viewProviders: [{ provide: ValueService, useClass: FakeValueService }] },
+
+ // Or replace them all (this component has only one viewProvider)
+ set: { viewProviders: [{ provide: ValueService, useClass: FakeValueService }] },
+ })
+ .createComponent(TestViewProvidersComponent);
+
+ fixture.detectChanges();
+ expect(fixture).toHaveText('injected value: faked value');
+ });
+
+ it('injected provider should not be same as component\'s provider', () => {
+
+ // TestComponent is parent of TestProvidersComponent
+ @Component({ template: '
+
+ `
+ }
+ })
+ .createComponent(ShellComponent);
+
+ fixture.detectChanges();
+
+ // NeedsContentComp is the child of ShellComp
+ const el = fixture.debugElement.children[0];
+ const comp = el.componentInstance;
+
+ expect(comp.children.toArray().length).toBe(4,
+ 'three different child components and an ElementRef with #content');
+
+ expect(el.references['nc']).toBe(comp, '#nc reference to component');
+
+ // #docregion custom-predicate
+ // Filter for DebugElements with a #content reference
+ const contentRefs = el.queryAll( de => de.references['content']);
+ // #enddocregion custom-predicate
+ expect(contentRefs.length).toBe(4, 'elements w/ a #content reference');
+ });
+
+ });
+
+ describe('nested (one-deep) component override', () => {
+
+ beforeEach(() => {
+ TestBed.configureTestingModule({
+ declarations: [ParentComponent, FakeChildComponent]
+ });
+ });
+
+ it('ParentComp should use Fake Child component', () => {
+ const fixture = TestBed.createComponent(ParentComponent);
+ fixture.detectChanges();
+ expect(fixture).toHaveText('Parent(Fake Child)');
+ });
+ });
+
+ describe('nested (two-deep) component override', () => {
+
+ beforeEach(() => {
+ TestBed.configureTestingModule({
+ declarations: [ParentComponent, FakeChildWithGrandchildComponent, FakeGrandchildComponent]
+ });
+ });
+
+ it('should use Fake Grandchild component', () => {
+ const fixture = TestBed.createComponent(ParentComponent);
+ fixture.detectChanges();
+ expect(fixture).toHaveText('Parent(Fake Child(Fake Grandchild))');
+ });
+ });
+
+ describe('lifecycle hooks w/ MyIfParentComp', () => {
+ let fixture: ComponentFixture;
+ let parent: MyIfParentComponent;
+ let child: MyIfChildComponent;
+
+ beforeEach(() => {
+ TestBed.configureTestingModule({
+ imports: [FormsModule],
+ declarations: [MyIfChildComponent, MyIfParentComponent]
+ });
+
+ fixture = TestBed.createComponent(MyIfParentComponent);
+ parent = fixture.componentInstance;
+ });
+
+ it('should instantiate parent component', () => {
+ expect(parent).not.toBeNull('parent component should exist');
+ });
+
+ it('parent component OnInit should NOT be called before first detectChanges()', () => {
+ expect(parent.ngOnInitCalled).toBe(false);
+ });
+
+ it('parent component OnInit should be called after first detectChanges()', () => {
+ fixture.detectChanges();
+ expect(parent.ngOnInitCalled).toBe(true);
+ });
+
+ it('child component should exist after OnInit', () => {
+ fixture.detectChanges();
+ getChild();
+ expect(child instanceof MyIfChildComponent).toBe(true, 'should create child');
+ });
+
+ it('should have called child component\'s OnInit ', () => {
+ fixture.detectChanges();
+ getChild();
+ expect(child.ngOnInitCalled).toBe(true);
+ });
+
+ it('child component called OnChanges once', () => {
+ fixture.detectChanges();
+ getChild();
+ expect(child.ngOnChangesCounter).toBe(1);
+ });
+
+ it('changed parent value flows to child', () => {
+ fixture.detectChanges();
+ getChild();
+
+ parent.parentValue = 'foo';
+ fixture.detectChanges();
+
+ expect(child.ngOnChangesCounter).toBe(2,
+ 'expected 2 changes: initial value and changed value');
+ expect(child.childValue).toBe('foo',
+ 'childValue should eq changed parent value');
+ });
+
+ // must be async test to see child flow to parent
+ it('changed child value flows to parent', async(() => {
+ fixture.detectChanges();
+ getChild();
+
+ child.childValue = 'bar';
+
+ return new Promise(resolve => {
+ // Wait one JS engine turn!
+ setTimeout(() => resolve(), 0);
+ })
+ .then(() => {
+ fixture.detectChanges();
+
+ expect(child.ngOnChangesCounter).toBe(2,
+ 'expected 2 changes: initial value and changed value');
+ expect(parent.parentValue).toBe('bar',
+ 'parentValue should eq changed parent value');
+ });
+
+ }));
+
+ it('clicking "Close Child" triggers child OnDestroy', () => {
+ fixture.detectChanges();
+ getChild();
+
+ const btn = fixture.debugElement.query(By.css('button'));
+ click(btn);
+
+ fixture.detectChanges();
+ expect(child.ngOnDestroyCalled).toBe(true);
+ });
+
+ ////// helpers ///
+ /**
+ * Get the MyIfChildComp from parent; fail w/ good message if cannot.
+ */
+ function getChild() {
+
+ let childDe: DebugElement; // DebugElement that should hold the MyIfChildComp
+
+ // The Hard Way: requires detailed knowledge of the parent template
+ try {
+ childDe = fixture.debugElement.children[4].children[0];
+ } catch (err) { /* we'll report the error */ }
+
+ // DebugElement.queryAll: if we wanted all of many instances:
+ childDe = fixture.debugElement
+ .queryAll(function (de) { return de.componentInstance instanceof MyIfChildComponent; })[0];
+
+ // WE'LL USE THIS APPROACH !
+ // DebugElement.query: find first instance (if any)
+ childDe = fixture.debugElement
+ .query(function (de) { return de.componentInstance instanceof MyIfChildComponent; });
+
+ if (childDe && childDe.componentInstance) {
+ child = childDe.componentInstance;
+ } else {
+ fail('Unable to find MyIfChildComp within MyIfParentComp');
+ }
+
+ return child;
+ }
+ });
+
+});
+////////// Fakes ///////////
+
+@Component({
+ selector: 'child-1',
+ template: `Fake Child`
+})
+class FakeChildComponent { }
+
+@Component({
+ selector: 'child-1',
+ template: `Fake Child(Specs Bag
+ Specs Demo
Input/Output Component
@@ -405,7 +390,7 @@ export class ShellComponent { }
Button Component
-
Needs Content
@@ -417,13 +402,13 @@ export class ShellComponent { }
`
})
-export class BagComponent { }
+export class DemoComponent { }
//////// Aggregations ////////////
-export const bagDeclarations = [
- BagComponent,
+export const demoDeclarations = [
+ DemoComponent,
BankAccountComponent, BankAccountParentComponent,
- ButtonComponent,
+ LightswitchComponent,
Child1Component, Child2Component, Child3Component,
ExternalTemplateComponent, InnerCompWithExternalTemplateComponent,
InputComponent,
@@ -435,7 +420,7 @@ export const bagDeclarations = [
ReversePipe, ReversePipeComponent, ShellComponent
];
-export const bagProviders = [DependentService, FancyService];
+export const demoProviders = [MasterService, ValueService];
////////////////////
////////////
@@ -445,10 +430,10 @@ import { FormsModule } from '@angular/forms';
@NgModule({
imports: [BrowserModule, FormsModule],
- declarations: bagDeclarations,
- providers: bagProviders,
- entryComponents: [BagComponent],
- bootstrap: [BagComponent]
+ declarations: demoDeclarations,
+ providers: demoProviders,
+ entryComponents: [DemoComponent],
+ bootstrap: [DemoComponent]
})
-export class BagModule { }
+export class DemoModule { }
diff --git a/aio/content/examples/testing/src/app/dummy.module.ts b/aio/content/examples/testing/src/app/dummy.module.ts
new file mode 100644
index 0000000000..7ca52420d2
--- /dev/null
+++ b/aio/content/examples/testing/src/app/dummy.module.ts
@@ -0,0 +1,15 @@
+// These unused NgModules keep the Angular Language Service happy.
+// The AppModule registers the final versions of these components
+import { NgModule } from '@angular/core';
+
+import { AppComponent as app_initial } from './app-initial.component';
+@NgModule({ declarations: [ app_initial ] })
+export class AppModuleInitial {}
+
+import { BannerComponent as bc_initial } from './banner/banner-initial.component';
+@NgModule({ declarations: [ bc_initial ] })
+export class BannerModuleInitial {}
+
+import { BannerComponent as bc_external } from './banner/banner-external.component';
+@NgModule({ declarations: [ bc_external ] })
+export class BannerModuleExternal {}
diff --git a/aio/content/examples/testing/src/app/hero/hero-detail.component.no-testbed.spec.ts b/aio/content/examples/testing/src/app/hero/hero-detail.component.no-testbed.spec.ts
index 9dffe6f9de..4e806da3f9 100644
--- a/aio/content/examples/testing/src/app/hero/hero-detail.component.no-testbed.spec.ts
+++ b/aio/content/examples/testing/src/app/hero/hero-detail.component.no-testbed.spec.ts
@@ -1,7 +1,7 @@
-import { HeroDetailComponent } from './hero-detail.component';
-import { Hero } from '../model';
+import { asyncData, ActivatedRouteStub } from '../../testing';
-import { ActivatedRouteStub } from '../../testing';
+import { HeroDetailComponent } from './hero-detail.component';
+import { Hero } from '../model/hero';
////////// Tests ////////////////////
@@ -12,22 +12,21 @@ describe('HeroDetailComponent - no TestBed', () => {
let hds: any;
let router: any;
- beforeEach((done: any) => {
- expectedHero = new Hero(42, 'Bubba');
- activatedRoute = new ActivatedRouteStub();
- activatedRoute.testParamMap = { id: expectedHero.id };
-
+ beforeEach((done: DoneFn) => {
+ expectedHero = {id: 42, name: 'Bubba' };
+ const activatedRoute = new ActivatedRouteStub({ id: expectedHero.id });
router = jasmine.createSpyObj('router', ['navigate']);
hds = jasmine.createSpyObj('HeroDetailService', ['getHero', 'saveHero']);
- hds.getHero.and.returnValue(Promise.resolve(expectedHero));
- hds.saveHero.and.returnValue(Promise.resolve(expectedHero));
+ hds.getHero.and.returnValue(asyncData(expectedHero));
+ hds.saveHero.and.returnValue(asyncData(expectedHero));
comp = new HeroDetailComponent(hds, activatedRoute, router);
comp.ngOnInit();
// OnInit calls HDS.getHero; wait for it to get the fake hero
- hds.getHero.calls.first().returnValue.then(done);
+ hds.getHero.calls.first().returnValue.subscribe(done);
+
});
it('should expose the hero retrieved from the service', () => {
@@ -45,11 +44,11 @@ describe('HeroDetailComponent - no TestBed', () => {
expect(router.navigate.calls.any()).toBe(false, 'router.navigate not called yet');
});
- it('should navigate when click save resolves', (done: any) => {
+ it('should navigate when click save resolves', (done: DoneFn) => {
comp.save();
// waits for async save to complete before navigating
hds.saveHero.calls.first().returnValue
- .then(() => {
+ .subscribe(() => {
expect(router.navigate.calls.any()).toBe(true, 'router.navigate called');
done();
});
diff --git a/aio/content/examples/testing/src/app/hero/hero-detail.component.spec.ts b/aio/content/examples/testing/src/app/hero/hero-detail.component.spec.ts
index 050fe46eec..2326e3dded 100644
--- a/aio/content/examples/testing/src/app/hero/hero-detail.component.spec.ts
+++ b/aio/content/examples/testing/src/app/hero/hero-detail.component.spec.ts
@@ -3,21 +3,20 @@ import {
async, ComponentFixture, fakeAsync, inject, TestBed, tick
} from '@angular/core/testing';
-import { By } from '@angular/platform-browser';
-import { DebugElement } from '@angular/core';
+import { Router } from '@angular/router';
import {
- ActivatedRoute, ActivatedRouteStub, click, newEvent, Router, RouterStub
+ ActivatedRoute, ActivatedRouteStub, asyncData, click, newEvent
} from '../../testing';
-import { Hero } from '../model';
+import { Hero } from '../model/hero';
import { HeroDetailComponent } from './hero-detail.component';
import { HeroDetailService } from './hero-detail.service';
import { HeroModule } from './hero.module';
////// Testing Vars //////
let activatedRoute: ActivatedRouteStub;
-let comp: HeroDetailComponent;
+let component: HeroDetailComponent;
let fixture: ComponentFixture;
let page: Page;
@@ -32,36 +31,38 @@ describe('HeroDetailComponent', () => {
describe('with SharedModule setup', sharedModuleSetup);
});
-////////////////////
+///////////////////
+
function overrideSetup() {
// #docregion hds-spy
class HeroDetailServiceSpy {
- testHero = new Hero(42, 'Test Hero');
+ testHero: Hero = {id: 42, name: 'Test Hero' };
+ /* emit cloned test hero */
getHero = jasmine.createSpy('getHero').and.callFake(
- () => Promise
- .resolve(true)
- .then(() => Object.assign({}, this.testHero))
+ () => asyncData(Object.assign({}, this.testHero))
);
+ /* emit clone of test hero, with changes merged in */
saveHero = jasmine.createSpy('saveHero').and.callFake(
- (hero: Hero) => Promise
- .resolve(true)
- .then(() => Object.assign(this.testHero, hero))
+ (hero: Hero) => asyncData(Object.assign(this.testHero, hero))
);
}
+
// #enddocregion hds-spy
// the `id` value is irrelevant because ignored by service stub
- beforeEach(() => activatedRoute.testParamMap = { id: 99999 } );
+ beforeEach(() => activatedRoute.setParamMap({ id: 99999 }));
// #docregion setup-override
- beforeEach( async(() => {
+ beforeEach(async(() => {
+ const routerSpy = createRouterSpy();
+
TestBed.configureTestingModule({
imports: [ HeroModule ],
providers: [
{ provide: ActivatedRoute, useValue: activatedRoute },
- { provide: Router, useClass: RouterStub},
+ { provide: Router, useValue: routerSpy},
// #enddocregion setup-override
// HeroDetailService at this level is IRRELEVANT!
{ provide: HeroDetailService, useValue: {} }
@@ -87,7 +88,7 @@ function overrideSetup() {
// #docregion override-tests
let hdsSpy: HeroDetailServiceSpy;
- beforeEach( async(() => {
+ beforeEach(async(() => {
createComponent();
// get the component's injected HeroDetailServiceSpy
hdsSpy = fixture.debugElement.injector.get(HeroDetailService) as any;
@@ -108,7 +109,7 @@ function overrideSetup() {
page.nameInput.value = newName;
page.nameInput.dispatchEvent(newEvent('input')); // tell Angular
- expect(comp.hero.name).toBe(newName, 'component hero has new name');
+ expect(component.hero.name).toBe(newName, 'component hero has new name');
expect(hdsSpy.testHero.name).toBe(origName, 'service hero unchanged before save');
click(page.saveBtn);
@@ -116,36 +117,40 @@ function overrideSetup() {
tick(); // wait for async save to complete
expect(hdsSpy.testHero.name).toBe(newName, 'service hero has new name after save');
- expect(page.navSpy.calls.any()).toBe(true, 'router.navigate called');
+ expect(page.navigateSpy.calls.any()).toBe(true, 'router.navigate called');
}));
// #enddocregion override-tests
it('fixture injected service is not the component injected service',
- inject([HeroDetailService], (service: HeroDetailService) => {
+ // inject gets the service from the fixture
+ inject([HeroDetailService], (fixtureService: HeroDetailService) => {
- expect(service).toEqual({}, 'service injected from fixture');
- expect(hdsSpy).toBeTruthy('service injected into component');
+ // use `fixture.debugElement.injector` to get service from component
+ const componentService = fixture.debugElement.injector.get(HeroDetailService);
+
+ expect(fixtureService).not.toBe(componentService, 'service injected from fixture');
}));
}
////////////////////
-import { HEROES, FakeHeroService } from '../model/testing';
-import { HeroService } from '../model';
+import { getTestHeroes, TestHeroService, HeroService } from '../model/testing/test-hero.service';
-const firstHero = HEROES[0];
+const firstHero = getTestHeroes()[0];
function heroModuleSetup() {
// #docregion setup-hero-module
- beforeEach( async(() => {
- TestBed.configureTestingModule({
+ beforeEach(async(() => {
+ const routerSpy = createRouterSpy();
+
+ TestBed.configureTestingModule({
imports: [ HeroModule ],
// #enddocregion setup-hero-module
// declarations: [ HeroDetailComponent ], // NO! DOUBLE DECLARATION
// #docregion setup-hero-module
providers: [
{ provide: ActivatedRoute, useValue: activatedRoute },
- { provide: HeroService, useClass: FakeHeroService },
- { provide: Router, useClass: RouterStub},
+ { provide: HeroService, useClass: TestHeroService },
+ { provide: Router, useValue: routerSpy},
]
})
.compileComponents();
@@ -156,9 +161,9 @@ function heroModuleSetup() {
describe('when navigate to existing hero', () => {
let expectedHero: Hero;
- beforeEach( async(() => {
+ beforeEach(async(() => {
expectedHero = firstHero;
- activatedRoute.testParamMap = { id: expectedHero.id };
+ activatedRoute.setParamMap({ id: expectedHero.id });
createComponent();
}));
@@ -170,7 +175,7 @@ function heroModuleSetup() {
it('should navigate when click cancel', () => {
click(page.cancelBtn);
- expect(page.navSpy.calls.any()).toBe(true, 'router.navigate called');
+ expect(page.navigateSpy.calls.any()).toBe(true, 'router.navigate called');
});
it('should save when click save but not navigate immediately', () => {
@@ -181,30 +186,31 @@ function heroModuleSetup() {
click(page.saveBtn);
expect(saveSpy.calls.any()).toBe(true, 'HeroDetailService.save called');
- expect(page.navSpy.calls.any()).toBe(false, 'router.navigate not called');
+ expect(page.navigateSpy.calls.any()).toBe(false, 'router.navigate not called');
});
it('should navigate when click save and save resolves', fakeAsync(() => {
click(page.saveBtn);
tick(); // wait for async save to complete
- expect(page.navSpy.calls.any()).toBe(true, 'router.navigate called');
+ expect(page.navigateSpy.calls.any()).toBe(true, 'router.navigate called');
}));
// #docregion title-case-pipe
it('should convert hero name to Title Case', () => {
const inputName = 'quick BROWN fox';
const titleCaseName = 'Quick Brown Fox';
+ const { nameInput, nameDisplay } = page;
// simulate user entering new name into the input box
- page.nameInput.value = inputName;
+ nameInput.value = inputName;
// dispatch a DOM event so that Angular learns of input value change.
- page.nameInput.dispatchEvent(newEvent('input'));
+ nameInput.dispatchEvent(newEvent('input'));
// Tell Angular to update the output span through the title pipe
fixture.detectChanges();
- expect(page.nameDisplay.textContent).toBe(titleCaseName);
+ expect(nameDisplay.textContent).toBe(titleCaseName);
});
// #enddocregion title-case-pipe
// #enddocregion selected-tests
@@ -214,10 +220,10 @@ function heroModuleSetup() {
// #docregion route-no-id
describe('when navigate with no hero id', () => {
- beforeEach( async( createComponent ));
+ beforeEach(async( createComponent ));
it('should have hero.id === 0', () => {
- expect(comp.hero.id).toBe(0);
+ expect(component.hero.id).toBe(0);
});
it('should display empty hero name', () => {
@@ -228,14 +234,14 @@ function heroModuleSetup() {
// #docregion route-bad-id
describe('when navigate to non-existent hero id', () => {
- beforeEach( async(() => {
- activatedRoute.testParamMap = { id: 99999 };
+ beforeEach(async(() => {
+ activatedRoute.setParamMap({ id: 99999 });
createComponent();
}));
it('should try to navigate back to hero list', () => {
- expect(page.gotoSpy.calls.any()).toBe(true, 'comp.gotoList called');
- expect(page.navSpy.calls.any()).toBe(true, 'router.navigate called');
+ expect(page.gotoListSpy.calls.any()).toBe(true, 'comp.gotoList called');
+ expect(page.navigateSpy.calls.any()).toBe(true, 'router.navigate called');
});
});
// #enddocregion route-bad-id
@@ -263,23 +269,25 @@ import { TitleCasePipe } from '../shared/title-case.pipe';
function formsModuleSetup() {
// #docregion setup-forms-module
- beforeEach( async(() => {
- TestBed.configureTestingModule({
+ beforeEach(async(() => {
+ const routerSpy = createRouterSpy();
+
+ TestBed.configureTestingModule({
imports: [ FormsModule ],
declarations: [ HeroDetailComponent, TitleCasePipe ],
providers: [
{ provide: ActivatedRoute, useValue: activatedRoute },
- { provide: HeroService, useClass: FakeHeroService },
- { provide: Router, useClass: RouterStub},
+ { provide: HeroService, useClass: TestHeroService },
+ { provide: Router, useValue: routerSpy},
]
})
.compileComponents();
}));
// #enddocregion setup-forms-module
- it('should display 1st hero\'s name', fakeAsync(() => {
+ it('should display 1st hero\'s name', async(() => {
const expectedHero = firstHero;
- activatedRoute.testParamMap = { id: expectedHero.id };
+ activatedRoute.setParamMap({ id: expectedHero.id });
createComponent().then(() => {
expect(page.nameDisplay.textContent).toBe(expectedHero.name);
});
@@ -291,23 +299,25 @@ import { SharedModule } from '../shared/shared.module';
function sharedModuleSetup() {
// #docregion setup-shared-module
- beforeEach( async(() => {
+ beforeEach(async(() => {
+ const routerSpy = createRouterSpy();
+
TestBed.configureTestingModule({
imports: [ SharedModule ],
declarations: [ HeroDetailComponent ],
providers: [
{ provide: ActivatedRoute, useValue: activatedRoute },
- { provide: HeroService, useClass: FakeHeroService },
- { provide: Router, useClass: RouterStub},
+ { provide: HeroService, useClass: TestHeroService },
+ { provide: Router, useValue: routerSpy},
]
})
.compileComponents();
}));
// #enddocregion setup-shared-module
- it('should display 1st hero\'s name', fakeAsync(() => {
+ it('should display 1st hero\'s name', async(() => {
const expectedHero = firstHero;
- activatedRoute.testParamMap = { id: expectedHero.id };
+ activatedRoute.setParamMap({ id: expectedHero.id });
createComponent().then(() => {
expect(page.nameDisplay.textContent).toBe(expectedHero.name);
});
@@ -320,45 +330,51 @@ function sharedModuleSetup() {
/** Create the HeroDetailComponent, initialize it, set test variables */
function createComponent() {
fixture = TestBed.createComponent(HeroDetailComponent);
- comp = fixture.componentInstance;
- page = new Page();
+ component = fixture.componentInstance;
+ page = new Page(fixture);
// 1st change detection triggers ngOnInit which gets a hero
fixture.detectChanges();
return fixture.whenStable().then(() => {
// 2nd change detection displays the async-fetched hero
fixture.detectChanges();
- page.addPageElements();
});
}
// #enddocregion create-component
// #docregion page
class Page {
- gotoSpy: jasmine.Spy;
- navSpy: jasmine.Spy;
+ // getter properties wait to query the DOM until called.
+ get buttons() { return this.queryAll('button'); }
+ get saveBtn() { return this.buttons[0]; }
+ get cancelBtn() { return this.buttons[1]; }
+ get nameDisplay() { return this.query('span'); }
+ get nameInput() { return this.query('input'); }
- saveBtn: DebugElement;
- cancelBtn: DebugElement;
- nameDisplay: HTMLElement;
- nameInput: HTMLInputElement;
+ gotoListSpy: jasmine.Spy;
+ navigateSpy: jasmine.Spy;
- constructor() {
- const router = TestBed.get(Router); // get router from root injector
- this.gotoSpy = spyOn(comp, 'gotoList').and.callThrough();
- this.navSpy = spyOn(router, 'navigate');
+ constructor(fixture: ComponentFixture) {
+ // get the navigate spy from the injected router spy object
+ const routerSpy = fixture.debugElement.injector.get(Router);
+ this.navigateSpy = routerSpy.navigate;
+
+ // spy on component's `gotoList()` method
+ const component = fixture.componentInstance;
+ this.gotoListSpy = spyOn(component, 'gotoList').and.callThrough();
}
- /** Add page elements after hero arrives */
- addPageElements() {
- if (comp.hero) {
- // have a hero so these elements are now in the DOM
- const buttons = fixture.debugElement.queryAll(By.css('button'));
- this.saveBtn = buttons[0];
- this.cancelBtn = buttons[1];
- this.nameDisplay = fixture.debugElement.query(By.css('span')).nativeElement;
- this.nameInput = fixture.debugElement.query(By.css('input')).nativeElement;
- }
+ //// query helpers ////
+ private query(selector: string): T {
+ return fixture.nativeElement.querySelector(selector);
+ }
+
+ private queryAll(selector: string): T[] {
+ return fixture.nativeElement.querySelectorAll(selector);
}
}
// #enddocregion page
+
+function createRouterSpy() {
+ return jasmine.createSpyObj('Router', ['navigate']);
+}
diff --git a/aio/content/examples/testing/src/app/hero/hero-detail.component.ts b/aio/content/examples/testing/src/app/hero/hero-detail.component.ts
index b595a51371..fdfea6c4fa 100644
--- a/aio/content/examples/testing/src/app/hero/hero-detail.component.ts
+++ b/aio/content/examples/testing/src/app/hero/hero-detail.component.ts
@@ -2,7 +2,6 @@
// #docplaster
import { Component, Input, OnInit } from '@angular/core';
import { ActivatedRoute, Router } from '@angular/router';
-import 'rxjs/add/operator/map';
import { Hero } from '../model/hero';
import { HeroDetailService } from './hero-detail.service';
@@ -29,18 +28,18 @@ export class HeroDetailComponent implements OnInit {
// #docregion ng-on-init
ngOnInit(): void {
// get hero when `id` param changes
- this.route.paramMap.subscribe(p => this.getHero(p.has('id') && p.get('id')));
+ this.route.paramMap.subscribe(pmap => this.getHero(pmap.get('id')));
}
// #enddocregion ng-on-init
private getHero(id: string): void {
- // when no id or id===0, create new hero
+ // when no id or id===0, create new blank hero
if (!id) {
- this.hero = new Hero();
+ this.hero = { id: 0, name: '' } as Hero;
return;
}
- this.heroDetailService.getHero(id).then(hero => {
+ this.heroDetailService.getHero(id).subscribe(hero => {
if (hero) {
this.hero = hero;
} else {
@@ -50,7 +49,7 @@ export class HeroDetailComponent implements OnInit {
}
save(): void {
- this.heroDetailService.saveHero(this.hero).then(() => this.gotoList());
+ this.heroDetailService.saveHero(this.hero).subscribe(() => this.gotoList());
}
cancel() { this.gotoList(); }
diff --git a/aio/content/examples/testing/src/app/hero/hero-detail.service.ts b/aio/content/examples/testing/src/app/hero/hero-detail.service.ts
index f7dc887827..fc875f2df7 100644
--- a/aio/content/examples/testing/src/app/hero/hero-detail.service.ts
+++ b/aio/content/examples/testing/src/app/hero/hero-detail.service.ts
@@ -1,5 +1,8 @@
import { Injectable } from '@angular/core';
+import { Observable } from 'rxjs/Observable';
+import { map } from 'rxjs/operators';
+
import { Hero } from '../model/hero';
import { HeroService } from '../model/hero.service';
@@ -10,13 +13,15 @@ export class HeroDetailService {
// #enddocregion prototype
// Returns a clone which caller may modify safely
- getHero(id: number | string): Promise {
+ getHero(id: number | string): Observable {
if (typeof id === 'string') {
id = parseInt(id as string, 10);
}
- return this.heroService.getHero(id).then(hero => {
- return hero ? Object.assign({}, hero) : null; // clone or null
- });
+ return this.heroService.getHero(id).pipe(
+ map(hero => {
+ return hero ? Object.assign({}, hero) : null; // clone or null
+ })
+ );
}
saveHero(hero: Hero) {
diff --git a/aio/content/examples/testing/src/app/hero/hero-list.component.css b/aio/content/examples/testing/src/app/hero/hero-list.component.css
index d939ab565d..35e45af98d 100644
--- a/aio/content/examples/testing/src/app/hero/hero-list.component.css
+++ b/aio/content/examples/testing/src/app/hero/hero-list.component.css
@@ -6,7 +6,7 @@
margin: 0 0 2em 0;
list-style-type: none;
padding: 0;
- width: 10em;
+ width: 15em;
}
.heroes li {
cursor: pointer;
diff --git a/aio/content/examples/testing/src/app/hero/hero-list.component.spec.ts b/aio/content/examples/testing/src/app/hero/hero-list.component.spec.ts
index dbf9d37d71..d178fa6098 100644
--- a/aio/content/examples/testing/src/app/hero/hero-list.component.spec.ts
+++ b/aio/content/examples/testing/src/app/hero/hero-list.component.spec.ts
@@ -4,15 +4,18 @@ import { async, ComponentFixture, fakeAsync, TestBed, tick
import { By } from '@angular/platform-browser';
import { DebugElement } from '@angular/core';
-import { addMatchers, newEvent, Router, RouterStub
-} from '../../testing';
+import { Router } from '@angular/router';
-import { HEROES, FakeHeroService } from '../model/testing';
+import { addMatchers, newEvent } from '../../testing';
+
+import { getTestHeroes, TestHeroService } from '../model/testing/test-hero.service';
import { HeroModule } from './hero.module';
import { HeroListComponent } from './hero-list.component';
import { HighlightDirective } from '../shared/highlight.directive';
-import { HeroService } from '../model';
+import { HeroService } from '../model/hero.service';
+
+const HEROES = getTestHeroes();
let comp: HeroListComponent;
let fixture: ComponentFixture;
@@ -22,13 +25,15 @@ let page: Page;
describe('HeroListComponent', () => {
- beforeEach( async(() => {
+ beforeEach(async(() => {
addMatchers();
+ const routerSpy = jasmine.createSpyObj('Router', ['navigate']);
+
TestBed.configureTestingModule({
imports: [HeroModule],
providers: [
- { provide: HeroService, useClass: FakeHeroService },
- { provide: Router, useClass: RouterStub}
+ { provide: HeroService, useClass: TestHeroService },
+ { provide: Router, useValue: routerSpy}
]
})
.compileComponents()
@@ -42,7 +47,7 @@ describe('HeroListComponent', () => {
it('1st hero should match 1st test hero', () => {
const expectedHero = HEROES[0];
const actualHero = page.heroRows[0].textContent;
- expect(actualHero).toContain(expectedHero.id, 'hero.id');
+ expect(actualHero).toContain(expectedHero.id.toString(), 'hero.id');
expect(actualHero).toContain(expectedHero.name, 'hero.name');
});
@@ -118,22 +123,21 @@ class Page {
/** Hero line elements */
heroRows: HTMLLIElement[];
- /** Highlighted element */
+ /** Highlighted DebugElement */
highlightDe: DebugElement;
/** Spy on router navigate method */
navSpy: jasmine.Spy;
constructor() {
- this.heroRows = fixture.debugElement.queryAll(By.css('li')).map(de => de.nativeElement);
+ const heroRowNodes = fixture.nativeElement.querySelectorAll('li');
+ this.heroRows = Array.from(heroRowNodes);
// Find the first element with an attached HighlightDirective
this.highlightDe = fixture.debugElement.query(By.directive(HighlightDirective));
- // Get the component's injected router and spy on it
- const router = fixture.debugElement.injector.get(Router);
- this.navSpy = spyOn(router, 'navigate');
+ // Get the component's injected router navigation spy
+ const routerSpy = fixture.debugElement.injector.get(Router);
+ this.navSpy = routerSpy.navigate as jasmine.Spy;
};
}
-
-
diff --git a/aio/content/examples/testing/src/app/hero/hero-list.component.ts b/aio/content/examples/testing/src/app/hero/hero-list.component.ts
index 614976319b..e28d4b5c48 100644
--- a/aio/content/examples/testing/src/app/hero/hero-list.component.ts
+++ b/aio/content/examples/testing/src/app/hero/hero-list.component.ts
@@ -1,6 +1,8 @@
import { Component, OnInit } from '@angular/core';
import { Router } from '@angular/router';
+import { Observable } from 'rxjs/Observable';
+
import { Hero } from '../model/hero';
import { HeroService } from '../model/hero.service';
@@ -10,7 +12,7 @@ import { HeroService } from '../model/hero.service';
styleUrls: [ './hero-list.component.css' ]
})
export class HeroListComponent implements OnInit {
- heroes: Promise;
+ heroes: Observable;
selectedHero: Hero;
constructor(
diff --git a/aio/content/examples/testing/src/app/in-memory-data.service.ts b/aio/content/examples/testing/src/app/in-memory-data.service.ts
new file mode 100644
index 0000000000..81f26b674a
--- /dev/null
+++ b/aio/content/examples/testing/src/app/in-memory-data.service.ts
@@ -0,0 +1,26 @@
+// #docregion , init
+import { InMemoryDbService } from 'angular-in-memory-web-api';
+import { QUOTES } from './twain/twain.data';
+
+// Adjust to reduce number of quotes
+const maxQuotes = Infinity; // 0;
+
+/** Create in-memory database of heroes and quotes */
+export class InMemoryDataService implements InMemoryDbService {
+ createDb() {
+ const heroes = [
+ { id: 11, name: 'Mr. Nice' },
+ { id: 12, name: 'Narco' },
+ { id: 13, name: 'Bombasto' },
+ { id: 14, name: 'Celeritas' },
+ { id: 15, name: 'Magneta' },
+ { id: 16, name: 'RubberMan' },
+ { id: 17, name: 'Dynama' },
+ { id: 18, name: 'Dr IQ' },
+ { id: 19, name: 'Magma' },
+ { id: 20, name: 'Tornado' }
+ ];
+
+ return { heroes, quotes: QUOTES.slice(0, maxQuotes) };
+ }
+}
diff --git a/aio/content/examples/testing/src/app/model/hero.service.spec.ts b/aio/content/examples/testing/src/app/model/hero.service.spec.ts
new file mode 100644
index 0000000000..b228692154
--- /dev/null
+++ b/aio/content/examples/testing/src/app/model/hero.service.spec.ts
@@ -0,0 +1,215 @@
+import { HttpClientTestingModule, HttpTestingController } from '@angular/common/http/testing';
+
+// Other imports
+import { TestBed } from '@angular/core/testing';
+import { HttpClient, HttpResponse, HttpErrorResponse } from '@angular/common/http';
+
+import { asyncData, asyncError } from '../../testing/async-observable-helpers';
+
+import { Hero } from './hero';
+import { HeroService } from './hero.service';
+
+describe ('HeroesService (with spies)', () => {
+ // #docregion test-with-spies
+ let httpClientSpy: { get: jasmine.Spy };
+ let heroService: HeroService;
+
+ beforeEach(() => {
+ // Todo: spy on other methods too
+ httpClientSpy = jasmine.createSpyObj('HttpClient', ['get']);
+ heroService = new HeroService( httpClientSpy);
+ });
+
+ it('should return expected heroes (HttpClient called once)', () => {
+ const expectedHeroes: Hero[] =
+ [{ id: 1, name: 'A' }, { id: 2, name: 'B' }];
+
+ httpClientSpy.get.and.returnValue(asyncData(expectedHeroes));
+
+ heroService.getHeroes().subscribe(
+ heroes => expect(heroes).toEqual(expectedHeroes, 'expected heroes'),
+ fail
+ );
+ expect(httpClientSpy.get.calls.count()).toBe(1, 'one call');
+ });
+
+ it('should return an error when the server returns a 404', () => {
+ const errorResponse = new HttpErrorResponse({
+ error: 'test 404 error',
+ status: 404, statusText: 'Not Found'
+ });
+
+ httpClientSpy.get.and.returnValue(asyncError(errorResponse));
+
+ heroService.getHeroes().subscribe(
+ heroes => fail('expected an error, not heroes'),
+ error => expect(error.message).toContain('test 404 error')
+ );
+ });
+ // #enddocregion test-with-spies
+
+});
+
+describe('HeroesService (with mocks)', () => {
+ let httpClient: HttpClient;
+ let httpTestingController: HttpTestingController;
+ let heroService: HeroService;
+
+ beforeEach(() => {
+ TestBed.configureTestingModule({
+ // Import the HttpClient mocking services
+ imports: [ HttpClientTestingModule ],
+ // Provide the service-under-test
+ providers: [ HeroService ]
+ });
+
+ // Inject the http, test controller, and service-under-test
+ // as they will be referenced by each test.
+ httpClient = TestBed.get(HttpClient);
+ httpTestingController = TestBed.get(HttpTestingController);
+ heroService = TestBed.get(HeroService);
+ });
+
+ afterEach(() => {
+ // After every test, assert that there are no more pending requests.
+ httpTestingController.verify();
+ });
+
+ /// HeroService method tests begin ///
+ describe('#getHeroes', () => {
+ let expectedHeroes: Hero[];
+
+ beforeEach(() => {
+ heroService = TestBed.get(HeroService);
+ expectedHeroes = [
+ { id: 1, name: 'A' },
+ { id: 2, name: 'B' },
+ ] as Hero[];
+ });
+
+ it('should return expected heroes (called once)', () => {
+ heroService.getHeroes().subscribe(
+ heroes => expect(heroes).toEqual(expectedHeroes, 'should return expected heroes'),
+ fail
+ );
+
+ // HeroService should have made one request to GET heroes from expected URL
+ const req = httpTestingController.expectOne(heroService.heroesUrl);
+ expect(req.request.method).toEqual('GET');
+
+ // Respond with the mock heroes
+ req.flush(expectedHeroes);
+ });
+
+ it('should be OK returning no heroes', () => {
+ heroService.getHeroes().subscribe(
+ heroes => expect(heroes.length).toEqual(0, 'should have empty heroes array'),
+ fail
+ );
+
+ const req = httpTestingController.expectOne(heroService.heroesUrl);
+ req.flush([]); // Respond with no heroes
+ });
+
+ it('should turn 404 into a user-friendly error', () => {
+ const msg = 'Deliberate 404';
+ heroService.getHeroes().subscribe(
+ heroes => fail('expected to fail'),
+ error => expect(error.message).toContain(msg)
+ );
+
+ const req = httpTestingController.expectOne(heroService.heroesUrl);
+
+ // respond with a 404 and the error message in the body
+ req.flush(msg, {status: 404, statusText: 'Not Found'});
+ });
+
+ it('should return expected heroes (called multiple times)', () => {
+ heroService.getHeroes().subscribe();
+ heroService.getHeroes().subscribe();
+ heroService.getHeroes().subscribe(
+ heroes => expect(heroes).toEqual(expectedHeroes, 'should return expected heroes'),
+ fail
+ );
+
+ const requests = httpTestingController.match(heroService.heroesUrl);
+ expect(requests.length).toEqual(3, 'calls to getHeroes()');
+
+ // Respond to each request with different mock hero results
+ requests[0].flush([]);
+ requests[1].flush([{id: 1, name: 'bob'}]);
+ requests[2].flush(expectedHeroes);
+ });
+ });
+
+ describe('#updateHero', () => {
+ // Expecting the query form of URL so should not 404 when id not found
+ const makeUrl = (id: number) => `${heroService.heroesUrl}/?id=${id}`;
+
+ it('should update a hero and return it', () => {
+
+ const updateHero: Hero = { id: 1, name: 'A' };
+
+ heroService.updateHero(updateHero).subscribe(
+ data => expect(data).toEqual(updateHero, 'should return the hero'),
+ fail
+ );
+
+ // HeroService should have made one request to PUT hero
+ const req = httpTestingController.expectOne(heroService.heroesUrl);
+ expect(req.request.method).toEqual('PUT');
+ expect(req.request.body).toEqual(updateHero);
+
+ // Expect server to return the hero after PUT
+ const expectedResponse = new HttpResponse(
+ { status: 200, statusText: 'OK', body: updateHero });
+ req.event(expectedResponse);
+ });
+
+ it('should turn 404 error into user-facing error', () => {
+ const msg = 'Deliberate 404';
+ const updateHero: Hero = { id: 1, name: 'A' };
+ heroService.updateHero(updateHero).subscribe(
+ heroes => fail('expected to fail'),
+ error => expect(error.message).toContain(msg)
+ );
+
+ const req = httpTestingController.expectOne(heroService.heroesUrl);
+
+ // respond with a 404 and the error message in the body
+ req.flush(msg, {status: 404, statusText: 'Not Found'});
+ });
+
+ // #docregion network-error
+ it('should turn network error into user-facing error', () => {
+ const emsg = 'simulated network error';
+
+ const updateHero: Hero = { id: 1, name: 'A' };
+ heroService.updateHero(updateHero).subscribe(
+ heroes => fail('expected to fail'),
+ error => expect(error.message).toContain(emsg)
+ );
+
+ const req = httpTestingController.expectOne(heroService.heroesUrl);
+
+ // Create mock ErrorEvent, raised when something goes wrong at the network level.
+ // Connection timeout, DNS error, offline, etc
+ const errorEvent = new ErrorEvent('so sad', {
+ message: emsg,
+ // #enddocregion network-error
+ // The rest of this is optional and not used.
+ // Just showing that you could provide this too.
+ filename: 'HeroService.ts',
+ lineno: 42,
+ colno: 21
+ // #docregion network-error
+ });
+
+ // Respond with mock error
+ req.error(errorEvent);
+ });
+ // #enddocregion network-error
+ });
+
+ // TODO: test other HeroService methods
+});
diff --git a/aio/content/examples/testing/src/app/model/hero.service.ts b/aio/content/examples/testing/src/app/model/hero.service.ts
index 667d47312b..ac55cde5fc 100644
--- a/aio/content/examples/testing/src/app/model/hero.service.ts
+++ b/aio/content/examples/testing/src/app/model/hero.service.ts
@@ -1,30 +1,98 @@
import { Injectable } from '@angular/core';
+import { HttpClient, HttpHeaders, HttpErrorResponse } from '@angular/common/http';
-import { Hero } from './hero';
-import { HEROES } from './test-heroes';
+import { Observable } from 'rxjs/Observable';
+import { of } from 'rxjs/observable/of';
+import { catchError, map, tap } from 'rxjs/operators';
+
+import { Hero } from './hero';
+
+const httpOptions = {
+ headers: new HttpHeaders({ 'Content-Type': 'application/json' })
+};
@Injectable()
-/** Dummy HeroService. Pretend it makes real http requests */
export class HeroService {
- getHeroes() {
- return Promise.resolve(HEROES);
+
+ readonly heroesUrl = 'api/heroes'; // URL to web api
+
+ constructor(private http: HttpClient) { }
+
+ /** GET heroes from the server */
+ getHeroes (): Observable {
+ return this.http.get(this.heroesUrl)
+ .pipe(
+ tap(heroes => this.log(`fetched heroes`)),
+ catchError(this.handleError('getHeroes'))
+ ) as Observable;
}
- getHero(id: number | string): Promise {
+ /** GET hero by id. Return `undefined` when id not found */
+ getHero(id: number | string): Observable {
if (typeof id === 'string') {
id = parseInt(id as string, 10);
}
- return this.getHeroes().then(
- heroes => heroes.find(hero => hero.id === id)
+ const url = `${this.heroesUrl}/?id=${id}`;
+ return this.http.get(url)
+ .pipe(
+ map(heroes => heroes[0]), // returns a {0|1} element array
+ tap(h => {
+ const outcome = h ? `fetched` : `did not find`;
+ this.log(`${outcome} hero id=${id}`);
+ }),
+ catchError(this.handleError(`getHero id=${id}`))
+ );
+ }
+
+ //////// Save methods //////////
+
+ /** POST: add a new hero to the server */
+ addHero (hero: Hero): Observable {
+ return this.http.post(this.heroesUrl, hero, httpOptions).pipe(
+ tap((hero: Hero) => this.log(`added hero w/ id=${hero.id}`)),
+ catchError(this.handleError('addHero'))
+ );
+ }
+ /** DELETE: delete the hero from the server */
+ deleteHero (hero: Hero | number): Observable {
+ const id = typeof hero === 'number' ? hero : hero.id;
+ const url = `${this.heroesUrl}/${id}`;
+
+ return this.http.delete(url, httpOptions).pipe(
+ tap(_ => this.log(`deleted hero id=${id}`)),
+ catchError(this.handleError('deleteHero'))
);
}
- updateHero(hero: Hero): Promise {
- return this.getHero(hero.id).then(h => {
- if (!h) {
- throw new Error(`Hero ${hero.id} not found`);
- }
- return Object.assign(h, hero);
- });
+ /** PUT: update the hero on the server */
+ updateHero (hero: Hero): Observable {
+ return this.http.put(this.heroesUrl, hero, httpOptions).pipe(
+ tap(_ => this.log(`updated hero id=${hero.id}`)),
+ catchError(this.handleError('updateHero'))
+ );
+ }
+ /**
+ * Returns a function that handles Http operation failures.
+ * This error handler lets the app continue to run as if no error occurred.
+ * @param operation - name of the operation that failed
+ */
+ private handleError (operation = 'operation') {
+ return (error: HttpErrorResponse): Observable => {
+
+ // TODO: send the error to remote logging infrastructure
+ console.error(error); // log to console instead
+
+ const message = (error.error instanceof ErrorEvent) ?
+ error.error.message :
+ `server returned code ${error.status} with body "${error.error}"`;
+
+ // TODO: better job of transforming error for user consumption
+ throw new Error(`${operation} failed: ${message}`);
+ };
+
+ }
+
+ private log(message: string) {
+ console.log('HeroService: ' + message);
}
}
diff --git a/aio/content/examples/testing/src/app/model/hero.spec.ts b/aio/content/examples/testing/src/app/model/hero.spec.ts
deleted file mode 100644
index e8acf913f2..0000000000
--- a/aio/content/examples/testing/src/app/model/hero.spec.ts
+++ /dev/null
@@ -1,20 +0,0 @@
-// #docregion
-import { Hero } from './hero';
-
-describe('Hero', () => {
- it('has name', () => {
- const hero = new Hero(1, 'Super Cat');
- expect(hero.name).toBe('Super Cat');
- });
-
- it('has id', () => {
- const hero = new Hero(1, 'Super Cat');
- expect(hero.id).toBe(1);
- });
-
- it('can clone itself', () => {
- const hero = new Hero(1, 'Super Cat');
- const clone = hero.clone();
- expect(hero).toEqual(clone);
- });
-});
diff --git a/aio/content/examples/testing/src/app/model/hero.ts b/aio/content/examples/testing/src/app/model/hero.ts
index 6a98f0dfdc..93e87f4770 100644
--- a/aio/content/examples/testing/src/app/model/hero.ts
+++ b/aio/content/examples/testing/src/app/model/hero.ts
@@ -1,4 +1,8 @@
-export class Hero {
- constructor(public id = 0, public name = '') { }
- clone() { return new Hero(this.id, this.name); }
+export interface Hero {
+ id: number;
+ name: string;
}
+
+// SystemJS bug:
+// TS file must export something real in JS, not just interfaces
+export const _dummy = undefined;
diff --git a/aio/content/examples/testing/src/app/model/http-hero.service.spec.ts b/aio/content/examples/testing/src/app/model/http-hero.service.spec.ts
index c16b421274..6973d01c15 100644
--- a/aio/content/examples/testing/src/app/model/http-hero.service.spec.ts
+++ b/aio/content/examples/testing/src/app/model/http-hero.service.spec.ts
@@ -1,3 +1,6 @@
+/**
+ * Test the HeroService when implemented with the OLD HttpModule
+ */
import {
async, inject, TestBed
} from '@angular/core/testing';
@@ -12,14 +15,11 @@ import {
} from '@angular/http';
import { Observable } from 'rxjs/Observable';
-import 'rxjs/add/observable/of';
-
-import 'rxjs/add/operator/catch';
-import 'rxjs/add/operator/do';
-import 'rxjs/add/operator/toPromise';
+import { of } from 'rxjs/observable/of';
+import { catchError, tap } from 'rxjs/operators';
import { Hero } from './hero';
-import { HttpHeroService as HeroService } from './http-hero.service';
+import { HttpHeroService } from './http-hero.service';
const makeHeroData = () => [
{ id: 1, name: 'Windstorm' },
@@ -29,99 +29,100 @@ const makeHeroData = () => [
] as Hero[];
//////// Tests /////////////
-describe('Http-HeroService (mockBackend)', () => {
+describe('HttpHeroService (using old HttpModule)', () => {
+ let backend: MockBackend;
+ let service: HttpHeroService;
- beforeEach( async(() => {
+ beforeEach( () => {
TestBed.configureTestingModule({
imports: [ HttpModule ],
providers: [
- HeroService,
+ HttpHeroService,
{ provide: XHRBackend, useClass: MockBackend }
]
- })
- .compileComponents();
- }));
+ });
+ });
- it('can instantiate service when inject service',
- inject([HeroService], (service: HeroService) => {
- expect(service instanceof HeroService).toBe(true);
- }));
+ it('can instantiate service via DI', () => {
+ service = TestBed.get(HttpHeroService);
+ expect(service instanceof HttpHeroService).toBe(true);
+ });
-
-
- it('can instantiate service with "new"', inject([Http], (http: Http) => {
+ it('can instantiate service with "new"', () => {
+ const http = TestBed.get(Http);
expect(http).not.toBeNull('http should be provided');
- let service = new HeroService(http);
- expect(service instanceof HeroService).toBe(true, 'new service should be ok');
- }));
+ let service = new HttpHeroService(http);
+ expect(service instanceof HttpHeroService).toBe(true, 'new service should be ok');
+ });
-
- it('can provide the mockBackend as XHRBackend',
- inject([XHRBackend], (backend: MockBackend) => {
- expect(backend).not.toBeNull('backend should be provided');
- }));
+ it('can provide the mockBackend as XHRBackend', () => {
+ const backend = TestBed.get(XHRBackend);
+ expect(backend).not.toBeNull('backend should be provided');
+ });
describe('when getHeroes', () => {
- let backend: MockBackend;
- let service: HeroService;
- let fakeHeroes: Hero[];
- let response: Response;
+ let fakeHeroes: Hero[];
+ let http: Http;
+ let response: Response;
- beforeEach(inject([Http, XHRBackend], (http: Http, be: MockBackend) => {
- backend = be;
- service = new HeroService(http);
- fakeHeroes = makeHeroData();
- let options = new ResponseOptions({status: 200, body: {data: fakeHeroes}});
- response = new Response(options);
- }));
+ beforeEach(() => {
- it('should have expected fake heroes (then)', async(inject([], () => {
- backend.connections.subscribe((c: MockConnection) => c.mockRespond(response));
+ backend = TestBed.get(XHRBackend);
+ http = TestBed.get(Http);
- service.getHeroes().toPromise()
- // .then(() => Promise.reject('deliberate'))
- .then(heroes => {
- expect(heroes.length).toBe(fakeHeroes.length,
- 'should have expected no. of heroes');
- });
- })));
+ service = new HttpHeroService(http);
+ fakeHeroes = makeHeroData();
+ let options = new ResponseOptions({status: 200, body: {data: fakeHeroes}});
+ response = new Response(options);
+ });
- it('should have expected fake heroes (Observable.do)', async(inject([], () => {
- backend.connections.subscribe((c: MockConnection) => c.mockRespond(response));
+ it('should have expected fake heroes (then)', () => {
+ backend.connections.subscribe((c: MockConnection) => c.mockRespond(response));
- service.getHeroes()
- .do(heroes => {
- expect(heroes.length).toBe(fakeHeroes.length,
- 'should have expected no. of heroes');
- })
- .toPromise();
- })));
+ service.getHeroes().toPromise()
+ // .then(() => Promise.reject('deliberate'))
+ .then(heroes => {
+ expect(heroes.length).toBe(fakeHeroes.length,
+ 'should have expected no. of heroes');
+ })
+ .catch(fail);
+ });
+
+ it('should have expected fake heroes (Observable tap)', () => {
+ backend.connections.subscribe((c: MockConnection) => c.mockRespond(response));
+
+ service.getHeroes().subscribe(
+ heroes => {
+ expect(heroes.length).toBe(fakeHeroes.length,
+ 'should have expected no. of heroes');
+ },
+ fail
+ );
+ });
- it('should be OK returning no heroes', async(inject([], () => {
- let resp = new Response(new ResponseOptions({status: 200, body: {data: []}}));
- backend.connections.subscribe((c: MockConnection) => c.mockRespond(resp));
+ it('should be OK returning no heroes', () => {
+ let resp = new Response(new ResponseOptions({status: 200, body: {data: []}}));
+ backend.connections.subscribe((c: MockConnection) => c.mockRespond(resp));
- service.getHeroes()
- .do(heroes => {
- expect(heroes.length).toBe(0, 'should have no heroes');
- })
- .toPromise();
- })));
+ service.getHeroes().subscribe(
+ heroes => {
+ expect(heroes.length).toBe(0, 'should have no heroes');
+ },
+ fail
+ );
+ });
- it('should treat 404 as an Observable error', async(inject([], () => {
- let resp = new Response(new ResponseOptions({status: 404}));
- backend.connections.subscribe((c: MockConnection) => c.mockRespond(resp));
+ it('should treat 404 as an Observable error', () => {
+ let resp = new Response(new ResponseOptions({status: 404}));
+ backend.connections.subscribe((c: MockConnection) => c.mockRespond(resp));
- service.getHeroes()
- .do(heroes => {
- fail('should not respond with heroes');
- })
- .catch(err => {
- expect(err).toMatch(/Bad response status/, 'should catch bad response status code');
- return Observable.of(null); // failure is the expected test result
- })
- .toPromise();
- })));
+ service.getHeroes().subscribe(
+ heroes => fail('should not respond with heroes'),
+ err => {
+ expect(err).toMatch(/Bad response status/, 'should catch bad response status code');
+ return of(null); // failure is the expected test result
+ });
+ });
});
});
diff --git a/aio/content/examples/testing/src/app/model/http-hero.service.ts b/aio/content/examples/testing/src/app/model/http-hero.service.ts
index a5fe46b801..11a08f3de3 100644
--- a/aio/content/examples/testing/src/app/model/http-hero.service.ts
+++ b/aio/content/examples/testing/src/app/model/http-hero.service.ts
@@ -1,3 +1,4 @@
+// The OLD Http module. See HeroService for use of the current HttpClient
// #docplaster
// #docregion
import { Injectable } from '@angular/core';
@@ -5,12 +6,9 @@ import { Http, Response } from '@angular/http';
import { Headers, RequestOptions } from '@angular/http';
import { Hero } from './hero';
-import { Observable } from 'rxjs/Observable';
-import 'rxjs/add/observable/throw';
-
-import 'rxjs/add/operator/do';
-import 'rxjs/add/operator/catch';
-import 'rxjs/add/operator/map';
+import { Observable } from 'rxjs/Observable';
+import { ErrorObservable } from 'rxjs/observable/ErrorObservable';
+import { catchError, map, tap } from 'rxjs/operators';
@Injectable()
export class HttpHeroService {
@@ -19,16 +17,17 @@ export class HttpHeroService {
constructor (private http: Http) {}
getHeroes (): Observable {
- return this.http.get(this._heroesUrl)
- .map(this.extractData)
- // .do(data => console.log(data)) // eyeball results in the console
- .catch(this.handleError);
+ return this.http.get(this._heroesUrl).pipe(
+ map(this.extractData),
+ // tap(data => console.log(data)), // eyeball results in the console
+ catchError(this.handleError)
+ );
}
getHero(id: number | string) {
- return this.http
- .get('app/heroes/?id=${id}')
- .map((r: Response) => r.json().data as Hero[]);
+ return this.http.get('app/heroes/?id=${id}').pipe(
+ map((r: Response) => r.json().data as Hero[])
+ );
}
addHero (name: string): Observable {
@@ -36,9 +35,10 @@ export class HttpHeroService {
let headers = new Headers({ 'Content-Type': 'application/json' });
let options = new RequestOptions({ headers: headers });
- return this.http.post(this._heroesUrl, body, options)
- .map(this.extractData)
- .catch(this.handleError);
+ return this.http.post(this._heroesUrl, body, options).pipe(
+ map(this.extractData),
+ catchError(this.handleError)
+ );
}
updateHero (hero: Hero): Observable {
@@ -46,9 +46,10 @@ export class HttpHeroService {
let headers = new Headers({ 'Content-Type': 'application/json' });
let options = new RequestOptions({ headers: headers });
- return this.http.put(this._heroesUrl, body, options)
- .map(this.extractData)
- .catch(this.handleError);
+ return this.http.put(this._heroesUrl, body, options).pipe(
+ map(this.extractData),
+ catchError(this.handleError)
+ );
}
private extractData(res: Response) {
@@ -63,6 +64,6 @@ export class HttpHeroService {
// In a real world app, we might send the error to remote logging infrastructure
let errMsg = error.message || 'Server error';
console.error(errMsg); // log to console instead
- return Observable.throw(errMsg);
+ return new ErrorObservable(errMsg);
}
}
diff --git a/aio/content/examples/testing/src/app/model/index.ts b/aio/content/examples/testing/src/app/model/index.ts
new file mode 100644
index 0000000000..694c333a87
--- /dev/null
+++ b/aio/content/examples/testing/src/app/model/index.ts
@@ -0,0 +1,3 @@
+export * from './hero';
+export * from './hero.service';
+export * from './user.service';
diff --git a/aio/content/examples/testing/src/app/model/test-heroes.ts b/aio/content/examples/testing/src/app/model/test-heroes.ts
deleted file mode 100644
index 2dc0f92502..0000000000
--- a/aio/content/examples/testing/src/app/model/test-heroes.ts
+++ /dev/null
@@ -1,11 +0,0 @@
-// #docregion
-import { Hero } from './hero';
-
-export const HEROES: Hero[] = [
- new Hero(11, 'Mr. Nice'),
- new Hero(12, 'Narco'),
- new Hero(13, 'Bombasto'),
- new Hero(14, 'Celeritas'),
- new Hero(15, 'Magneta'),
- new Hero(16, 'RubberMan')
-];
diff --git a/aio/content/examples/testing/src/app/model/testing/fake-hero.service.ts b/aio/content/examples/testing/src/app/model/testing/fake-hero.service.ts
deleted file mode 100644
index 02e1484df4..0000000000
--- a/aio/content/examples/testing/src/app/model/testing/fake-hero.service.ts
+++ /dev/null
@@ -1,41 +0,0 @@
-// re-export for tester convenience
-export { Hero } from '../hero';
-export { HeroService } from '../hero.service';
-
-import { Hero } from '../hero';
-import { HeroService } from '../hero.service';
-
-export const HEROES: Hero[] = [
- new Hero(41, 'Bob'),
- new Hero(42, 'Carol'),
- new Hero(43, 'Ted'),
- new Hero(44, 'Alice'),
- new Hero(45, 'Speedy'),
- new Hero(46, 'Stealthy')
-];
-
-export class FakeHeroService implements HeroService {
-
- heroes = HEROES.map(h => h.clone());
- lastPromise: Promise; // remember so we can spy on promise calls
-
- getHero(id: number | string) {
- if (typeof id === 'string') {
- id = parseInt(id as string, 10);
- }
- let hero = this.heroes.find(h => h.id === id);
- return this.lastPromise = Promise.resolve(hero);
- }
-
- getHeroes() {
- return this.lastPromise = Promise.resolve(this.heroes);
- }
-
- updateHero(hero: Hero): Promise {
- return this.lastPromise = this.getHero(hero.id).then(h => {
- return h ?
- Object.assign(h, hero) :
- Promise.reject(`Hero ${hero.id} not found`) as any as Promise;
- });
- }
-}
diff --git a/aio/content/examples/testing/src/app/model/testing/http-client.spec.ts b/aio/content/examples/testing/src/app/model/testing/http-client.spec.ts
new file mode 100644
index 0000000000..2c5b5ffd46
--- /dev/null
+++ b/aio/content/examples/testing/src/app/model/testing/http-client.spec.ts
@@ -0,0 +1,192 @@
+// #docplaster
+// #docregion imports
+// Http testing module and mocking controller
+import { HttpClientTestingModule, HttpTestingController } from '@angular/common/http/testing';
+
+// Other imports
+import { TestBed } from '@angular/core/testing';
+import { HttpClient, HttpErrorResponse } from '@angular/common/http';
+
+// #enddocregion imports
+import { HttpHeaders } from '@angular/common/http';
+
+interface Data {
+ name: string;
+}
+
+const testUrl = '/data';
+
+// #docregion setup
+describe('HttpClient testing', () => {
+ let httpClient: HttpClient;
+ let httpTestingController: HttpTestingController;
+
+ beforeEach(() => {
+ TestBed.configureTestingModule({
+ imports: [ HttpClientTestingModule ]
+ });
+
+ // Inject the http service and test controller for each test
+ httpClient = TestBed.get(HttpClient);
+ httpTestingController = TestBed.get(HttpTestingController);
+ });
+ // #enddocregion setup
+ // #docregion afterEach
+ afterEach(() => {
+ // After every test, assert that there are no more pending requests.
+ httpTestingController.verify();
+ });
+ // #enddocregion afterEach
+ // #docregion setup
+ /// Tests begin ///
+ // #enddocregion setup
+ // #docregion get-test
+ it('can test HttpClient.get', () => {
+ const testData: Data = {name: 'Test Data'};
+
+ // Make an HTTP GET request
+ httpClient.get(testUrl)
+ .subscribe(data =>
+ // When observable resolves, result should match test data
+ expect(data).toEqual(testData)
+ );
+
+ // The following `expectOne()` will match the request's URL.
+ // If no requests or multiple requests matched that URL
+ // `expectOne()` would throw.
+ const req = httpTestingController.expectOne('/data');
+
+ // Assert that the request is a GET.
+ expect(req.request.method).toEqual('GET');
+
+ // Respond with mock data, causing Observable to resolve.
+ // Subscribe callback asserts that correct data was returned.
+ req.flush(testData);
+
+ // Finally, assert that there are no outstanding requests.
+ httpTestingController.verify();
+ });
+ // #enddocregion get-test
+ it('can test HttpClient.get with matching header', () => {
+ const testData: Data = {name: 'Test Data'};
+
+ // Make an HTTP GET request with specific header
+ httpClient.get(testUrl, {
+ headers: new HttpHeaders({'Authorization': 'my-auth-token'})
+ })
+ .subscribe(data =>
+ expect(data).toEqual(testData)
+ );
+
+ // Find request with a predicate function.
+ // #docregion predicate
+ // Expect one request with an authorization header
+ const req = httpTestingController.expectOne(
+ req => req.headers.has('Authorization')
+ );
+ // #enddocregion predicate
+ req.flush(testData);
+ });
+
+ it('can test multiple requests', () => {
+ let testData: Data[] = [
+ { name: 'bob' }, { name: 'carol' },
+ { name: 'ted' }, { name: 'alice' }
+ ];
+
+ // Make three requests in a row
+ httpClient.get(testUrl)
+ .subscribe(d => expect(d.length).toEqual(0, 'should have no data'));
+
+ httpClient.get(testUrl)
+ .subscribe(d => expect(d).toEqual([testData[0]], 'should be one element array'));
+
+ httpClient.get(testUrl)
+ .subscribe(d => expect(d).toEqual(testData, 'should be expected data'));
+
+ // #docregion multi-request
+ // get all pending requests that match the given URL
+ const requests = httpTestingController.match(testUrl);
+ expect(requests.length).toEqual(3);
+
+ // Respond to each request with different results
+ requests[0].flush([]);
+ requests[1].flush([testData[0]]);
+ requests[2].flush(testData);
+ // #enddocregion multi-request
+ });
+
+ // #docregion 404
+ it('can test for 404 error', () => {
+ const emsg = 'deliberate 404 error';
+
+ httpClient.get(testUrl).subscribe(
+ data => fail('should have failed with the 404 error'),
+ (error: HttpErrorResponse) => {
+ expect(error.status).toEqual(404, 'status');
+ expect(error.error).toEqual(emsg, 'message');
+ }
+ );
+
+ const req = httpTestingController.expectOne(testUrl);
+
+ // Respond with mock error
+ req.flush(emsg, { status: 404, statusText: 'Not Found' });
+ });
+ // #enddocregion 404
+
+ // #docregion network-error
+ it('can test for network error', () => {
+ const emsg = 'simulated network error';
+
+ httpClient.get(testUrl).subscribe(
+ data => fail('should have failed with the network error'),
+ (error: HttpErrorResponse) => {
+ expect(error.error.message).toEqual(emsg, 'message');
+ }
+ );
+
+ const req = httpTestingController.expectOne(testUrl);
+
+ // Create mock ErrorEvent, raised when something goes wrong at the network level.
+ // Connection timeout, DNS error, offline, etc
+ const errorEvent = new ErrorEvent('so sad', {
+ message: emsg,
+ // #enddocregion network-error
+ // The rest of this is optional and not used.
+ // Just showing that you could provide this too.
+ filename: 'HeroService.ts',
+ lineno: 42,
+ colno: 21
+ // #docregion network-error
+ });
+
+ // Respond with mock error
+ req.error(errorEvent);
+ });
+ // #enddocregion network-error
+
+ it('httpTestingController.verify should fail if HTTP response not simulated', () => {
+ // Sends request
+ httpClient.get('some/api').subscribe();
+
+ // verify() should fail because haven't handled the pending request.
+ expect(() => httpTestingController.verify()).toThrow();
+
+ // Now get and flush the request so that afterEach() doesn't fail
+ const req = httpTestingController.expectOne('some/api');
+ req.flush(null);
+ });
+
+ // Proves that verify in afterEach() really would catch error
+ // if test doesn't simulate the HTTP response.
+ //
+ // Must disable this test because can't catch an error in an afterEach().
+ // Uncomment if you want to confirm that afterEach() does the job.
+ // it('afterEach() should fail when HTTP response not simulated',() => {
+ // // Sends request which is never handled by this test
+ // httpClient.get('some/api').subscribe();
+ // });
+// #docregion setup
+});
+// #enddocregion setup
diff --git a/aio/content/examples/testing/src/app/model/testing/index.ts b/aio/content/examples/testing/src/app/model/testing/index.ts
new file mode 100644
index 0000000000..6da76e67db
--- /dev/null
+++ b/aio/content/examples/testing/src/app/model/testing/index.ts
@@ -0,0 +1 @@
+export * from './fake-hero.service';
diff --git a/aio/content/examples/testing/src/app/model/testing/test-hero.service.ts b/aio/content/examples/testing/src/app/model/testing/test-hero.service.ts
new file mode 100644
index 0000000000..14ad8453d6
--- /dev/null
+++ b/aio/content/examples/testing/src/app/model/testing/test-hero.service.ts
@@ -0,0 +1,61 @@
+import { Injectable } from '@angular/core';
+
+import { Observable } from 'rxjs/Observable';
+import { asyncData } from '../../../testing';
+
+import { map } from 'rxjs/operators';
+
+// re-export for tester convenience
+export { Hero } from '../hero';
+export { HeroService } from '../hero.service';
+export { getTestHeroes } from './test-heroes';
+
+import { Hero } from '../hero';
+import { HeroService } from '../hero.service';
+import { getTestHeroes } from './test-heroes';
+
+@Injectable()
+/**
+ * FakeHeroService pretends to make real http requests.
+ * implements only as much of HeroService as is actually consumed by the app
+*/
+export class TestHeroService extends HeroService {
+
+ constructor() {
+ super(null);
+ }
+
+ heroes = getTestHeroes();
+ lastResult: Observable; // result from last method call
+
+ addHero(hero: Hero): Observable {
+ throw new Error('Method not implemented.');
+ }
+
+ deleteHero(hero: number | Hero): Observable {
+ throw new Error('Method not implemented.');
+ }
+
+ getHeroes(): Observable {
+ return this.lastResult = asyncData(this.heroes);
+ }
+
+ getHero(id: number | string): Observable {
+ if (typeof id === 'string') {
+ id = parseInt(id as string, 10);
+ }
+ let hero = this.heroes.find(h => h.id === id);
+ return this.lastResult = asyncData(hero);
+ }
+
+ updateHero(hero: Hero): Observable {
+ return this.lastResult = this.getHero(hero.id).pipe(
+ map(h => {
+ if (h) {
+ return Object.assign(h, hero);
+ }
+ throw new Error(`Hero ${hero.id} not found`);
+ })
+ );
+ }
+}
diff --git a/aio/content/examples/testing/src/app/model/testing/test-heroes.ts b/aio/content/examples/testing/src/app/model/testing/test-heroes.ts
new file mode 100644
index 0000000000..2af87f0e0d
--- /dev/null
+++ b/aio/content/examples/testing/src/app/model/testing/test-heroes.ts
@@ -0,0 +1,13 @@
+import { Hero } from '../hero';
+
+/** return fresh array of test heroes */
+export function getTestHeroes(): Hero[] {
+ return [
+ {id: 41, name: 'Bob' },
+ {id: 42, name: 'Carol' },
+ {id: 43, name: 'Ted' },
+ {id: 44, name: 'Alice' },
+ {id: 45, name: 'Speedy' },
+ {id: 46, name: 'Stealthy' }
+ ];
+}
diff --git a/aio/content/examples/testing/src/app/shared/shared.module.ts b/aio/content/examples/testing/src/app/shared/shared.module.ts
index 17c41c0410..cb2e6e7f90 100644
--- a/aio/content/examples/testing/src/app/shared/shared.module.ts
+++ b/aio/content/examples/testing/src/app/shared/shared.module.ts
@@ -4,12 +4,16 @@ import { FormsModule } from '@angular/forms';
import { HighlightDirective } from './highlight.directive';
import { TitleCasePipe } from './title-case.pipe';
-import { TwainComponent } from './twain.component';
@NgModule({
- imports: [ CommonModule ],
- exports: [ CommonModule, FormsModule,
- HighlightDirective, TitleCasePipe, TwainComponent ],
- declarations: [ HighlightDirective, TitleCasePipe, TwainComponent ]
+ imports: [ CommonModule ],
+ exports: [
+ CommonModule,
+ // SharedModule importers won't have to import FormsModule too
+ FormsModule,
+ HighlightDirective,
+ TitleCasePipe
+ ],
+ declarations: [ HighlightDirective, TitleCasePipe ]
})
export class SharedModule { }
diff --git a/aio/content/examples/testing/src/app/shared/twain.component.spec.ts b/aio/content/examples/testing/src/app/shared/twain.component.spec.ts
deleted file mode 100644
index b177c0bfc3..0000000000
--- a/aio/content/examples/testing/src/app/shared/twain.component.spec.ts
+++ /dev/null
@@ -1,92 +0,0 @@
-// #docplaster
-import { async, fakeAsync, ComponentFixture, TestBed, tick } from '@angular/core/testing';
-import { By } from '@angular/platform-browser';
-import { DebugElement } from '@angular/core';
-
-import { TwainService } from './twain.service';
-import { TwainComponent } from './twain.component';
-
-describe('TwainComponent', () => {
-
- let comp: TwainComponent;
- let fixture: ComponentFixture;
-
- let spy: jasmine.Spy;
- let de: DebugElement;
- let el: HTMLElement;
- let twainService: TwainService; // the actually injected service
-
- const testQuote = 'Test Quote';
-
- // #docregion setup
- beforeEach(() => {
- TestBed.configureTestingModule({
- declarations: [ TwainComponent ],
- providers: [ TwainService ],
- });
-
- fixture = TestBed.createComponent(TwainComponent);
- comp = fixture.componentInstance;
-
- // TwainService actually injected into the component
- twainService = fixture.debugElement.injector.get(TwainService);
-
- // Setup spy on the `getQuote` method
- // #docregion spy
- spy = spyOn(twainService, 'getQuote')
- .and.returnValue(Promise.resolve(testQuote));
- // #enddocregion spy
-
- // Get the Twain quote element by CSS selector (e.g., by class name)
- de = fixture.debugElement.query(By.css('.twain'));
- el = de.nativeElement;
- });
- // #enddocregion setup
-
- // #docregion tests
- it('should not show quote before OnInit', () => {
- expect(el.textContent).toBe('', 'nothing displayed');
- expect(spy.calls.any()).toBe(false, 'getQuote not yet called');
- });
-
- it('should still not show quote after component initialized', () => {
- fixture.detectChanges();
- // getQuote service is async => still has not returned with quote
- expect(el.textContent).toBe('...', 'no quote yet');
- expect(spy.calls.any()).toBe(true, 'getQuote called');
- });
-
- // #docregion async-test
- it('should show quote after getQuote promise (async)', async(() => {
- fixture.detectChanges();
-
- fixture.whenStable().then(() => { // wait for async getQuote
- fixture.detectChanges(); // update view with quote
- expect(el.textContent).toBe(testQuote);
- });
- }));
- // #enddocregion async-test
-
- // #docregion fake-async-test
- it('should show quote after getQuote promise (fakeAsync)', fakeAsync(() => {
- fixture.detectChanges();
- tick(); // wait for async getQuote
- fixture.detectChanges(); // update view with quote
- expect(el.textContent).toBe(testQuote);
- }));
- // #enddocregion fake-async-test
- // #enddocregion tests
-
- // #docregion done-test
- it('should show quote after getQuote promise (done)', (done: any) => {
- fixture.detectChanges();
-
- // get the spy promise and wait for it to resolve
- spy.calls.mostRecent().returnValue.then(() => {
- fixture.detectChanges(); // update view with quote
- expect(el.textContent).toBe(testQuote);
- done();
- });
- });
- // #enddocregion done-test
-});
diff --git a/aio/content/examples/testing/src/app/shared/twain.component.timer.spec.ts.no-work b/aio/content/examples/testing/src/app/shared/twain.component.timer.spec.ts.no-work
deleted file mode 100644
index 74dec3e766..0000000000
--- a/aio/content/examples/testing/src/app/shared/twain.component.timer.spec.ts.no-work
+++ /dev/null
@@ -1,116 +0,0 @@
-// #docplaster
-// When AppComponent learns to present quote with intervalTimer
-import { async, discardPeriodicTasks, fakeAsync, ComponentFixture, TestBed, tick } from '@angular/core/testing';
-import { By } from '@angular/platform-browser';
-import { DebugElement } from '@angular/core';
-
-import { TwainService } from './model';
-import { TwainComponent } from './twain.component';
-
-xdescribe('TwainComponent', () => {
-
- let comp: TwainComponent;
- let fixture: ComponentFixture;
-
- const quotes = [
- 'Test Quote 1',
- 'Test Quote 2',
- 'Test Quote 3'
- ];
-
- let spy: jasmine.Spy;
- let twainEl: DebugElement; // the element with the Twain quote
- let twainService: TwainService; // the actually injected service
-
- function getQuote() { return twainEl.nativeElement.textContent; }
-
- // #docregion setup
- beforeEach(() => {
- TestBed.configureTestingModule({
- declarations: [ TwainComponent ],
- providers: [ TwainService ],
- });
-
- fixture = TestBed.createComponent(TwainComponent);
- comp = fixture.componentInstance;
-
- // TwainService actually injected into the component
- twainService = fixture.debugElement.injector.get(TwainService);
-
- // Setup spy on the `getQuote` method
- spy = spyOn(twainService, 'getQuote')
- .and.returnValues(...quotes.map(q => Promise.resolve(q)));
-
- // Get the Twain quote element by CSS selector (e.g., by class name)
- twainEl = fixture.debugElement.query(By.css('.twain'));
- });
-
- afterEach(() => {
- // destroy component to stop the component timer
- fixture.destroy();
- });
- // #enddocregion setup
-
- // #docregion tests
- it('should not show quote before OnInit', () => {
- expect(getQuote()).toBe('');
- });
-
- it('should still not show quote after component initialized', () => {
- // because the getQuote service is async
- fixture.detectChanges(); // trigger data binding
- expect(getQuote()).toContain('not initialized');
- });
-
- // WIP
- // If go this way, add jasmine.clock().uninstall(); to afterEach
- // it('should show quote after Angular "settles"', async(() => {
- // //jasmine.clock().install();
- // fixture.detectChanges(); // trigger data binding
- // fixture.whenStable().then(() => {
- // fixture.detectChanges(); // update view with the quote
- // expect(getQuote()).toBe(quotes[0]);
- // });
- // // jasmine.clock().tick(5000);
- // // fixture.whenStable().then(() => {
- // // fixture.detectChanges(); // update view with the quote
- // // expect(getQuote()).toBe(quotes[1]);
- // // });
- // }));
-
- it('should show quote after getQuote promise returns', fakeAsync(() => {
- fixture.detectChanges(); // trigger data binding
- tick(); // wait for first async getQuote to return
- fixture.detectChanges(); // update view with the quote
- expect(getQuote()).toBe(quotes[0]);
-
- // destroy component to stop the component timer before test ends
- // else test errors because still have timer in the queue
- fixture.destroy();
- }));
-
- it('should show 2nd quote after 5 seconds pass', fakeAsync(() => {
- fixture.detectChanges(); // trigger data binding
- tick(5000); // wait for second async getQuote to return
- fixture.detectChanges(); // update view with the quote
- expect(getQuote()).toBe(quotes[1]);
-
- // still have intervalTimer queuing requres
- // discardPeriodicTasks() else test errors
- discardPeriodicTasks();
- }));
-
- fit('should show 3rd quote after 10 seconds pass', fakeAsync(() => {
- fixture.detectChanges(); // trigger data binding
- tick(5000); // wait for second async getQuote to return
- fixture.detectChanges(); // update view with the 2nd quote
- tick(5000); // wait for third async getQuote to return
- fixture.detectChanges(); // update view with the 3rd quote
- expect(getQuote()).toBe(quotes[2]);
-
- // still have intervalTimer queuing requres
- // discardPeriodicTasks() else test errors
- discardPeriodicTasks();
- }));
- // #enddocregion tests
-});
diff --git a/aio/content/examples/testing/src/app/shared/twain.component.timer.ts.no-work b/aio/content/examples/testing/src/app/shared/twain.component.timer.ts.no-work
deleted file mode 100644
index d3dc1f205d..0000000000
--- a/aio/content/examples/testing/src/app/shared/twain.component.timer.ts.no-work
+++ /dev/null
@@ -1,27 +0,0 @@
-// #docregion
-import { Component, OnInit, OnDestroy } from '@angular/core';
-
-import { TwainService } from './twain.service';
-
-@Component({
- selector: 'twain-quote',
- template: '{{quote}}
'
-})
-export class TwainComponent implements OnInit, OnDestroy {
- intervalId: number;
- quote = '-- not initialized yet --';
- constructor(private twainService: TwainService) { }
-
- getQuote() {
- this.twainService.getQuote().then(quote => this.quote = quote);
- }
-
- ngOnInit(): void {
- this.getQuote();
- this.intervalId = window.setInterval(() => this.getQuote(), 5000);
- }
-
- ngOnDestroy(): void {
- clearInterval(this.intervalId);
- }
-}
diff --git a/aio/content/examples/testing/src/app/shared/twain.component.ts b/aio/content/examples/testing/src/app/shared/twain.component.ts
deleted file mode 100644
index 29f24459ab..0000000000
--- a/aio/content/examples/testing/src/app/shared/twain.component.ts
+++ /dev/null
@@ -1,20 +0,0 @@
-// #docregion
-import { Component, OnInit } from '@angular/core';
-
-import { TwainService } from './twain.service';
-
-// #docregion component
-@Component({
- selector: 'twain-quote',
- template: '{{quote}}
'
-})
-export class TwainComponent implements OnInit {
- intervalId: number;
- quote = '...';
- constructor(private twainService: TwainService) { }
-
- ngOnInit(): void {
- this.twainService.getQuote().then(quote => this.quote = quote);
- }
-}
-// #enddocregion component
diff --git a/aio/content/examples/testing/src/app/shared/twain.service.ts b/aio/content/examples/testing/src/app/shared/twain.service.ts
deleted file mode 100644
index 9e394df1ee..0000000000
--- a/aio/content/examples/testing/src/app/shared/twain.service.ts
+++ /dev/null
@@ -1,32 +0,0 @@
-import { Injectable } from '@angular/core';
-
-const quotes = [
-'Always do right. This will gratify some people and astonish the rest.',
-'I have never let my schooling interfere with my education.',
-'Don\'t go around saying the world owes you a living. The world owes you nothing. It was here first.',
-'Whenever you find yourself on the side of the majority, it is time to pause and reflect.',
-'If you tell the truth, you don\'t have to remember anything.',
-'Clothes make the man. Naked people have little or no influence on society.',
-'It\'s not the size of the dog in the fight, it\'s the size of the fight in the dog.',
-'Truth is stranger than fiction, but it is because Fiction is obliged to stick to possibilities; Truth isn\'t.',
-'The man who does not read good books has no advantage over the man who cannot read them.',
-'Get your facts first, and then you can distort them as much as you please.',
-];
-
-@Injectable()
-export class TwainService {
- private next = 0;
-
- // Imaginary todo: get quotes from a remote quote service
- // returns quote after delay simulating server latency
- getQuote(): Promise {
- return new Promise(resolve => {
- setTimeout( () => resolve(this.nextQuote()), 500 );
- });
- }
-
- private nextQuote() {
- if (this.next === quotes.length) { this.next = 0; }
- return quotes[ this.next++ ];
- }
-}
diff --git a/aio/content/examples/testing/src/app/twain/quote.ts b/aio/content/examples/testing/src/app/twain/quote.ts
new file mode 100644
index 0000000000..803cae0f60
--- /dev/null
+++ b/aio/content/examples/testing/src/app/twain/quote.ts
@@ -0,0 +1,4 @@
+export class Quote {
+ id: number;
+ quote: string;
+}
diff --git a/aio/content/examples/testing/src/app/twain/twain.component.marbles.spec.ts b/aio/content/examples/testing/src/app/twain/twain.component.marbles.spec.ts
new file mode 100644
index 0000000000..7e2926001d
--- /dev/null
+++ b/aio/content/examples/testing/src/app/twain/twain.component.marbles.spec.ts
@@ -0,0 +1,93 @@
+// #docplaster
+import { async, fakeAsync, ComponentFixture, TestBed, tick } from '@angular/core/testing';
+
+// #docregion import-marbles
+import { cold, getTestScheduler } from 'jasmine-marbles';
+// #enddocregion import-marbles
+
+import { Observable } from 'rxjs/Observable';
+import { of } from 'rxjs/observable/of';
+
+import { ErrorObservable } from 'rxjs/observable/ErrorObservable';
+import { last } from 'rxjs/operators';
+
+import { TwainService } from './twain.service';
+import { TwainComponent } from './twain.component';
+
+
+describe('TwainComponent (marbles)', () => {
+ let component: TwainComponent;
+ let fixture: ComponentFixture;
+ let getQuoteSpy: jasmine.Spy;
+ let quoteEl: HTMLElement;
+ let testQuote: string;
+
+ // Helper function to get the error message element value
+ // An *ngIf keeps it out of the DOM until there is an error
+ const errorMessage = () => {
+ const el = fixture.nativeElement.querySelector('.error');
+ return el ? el.textContent : null;
+ };
+
+ beforeEach(() => {
+ // Create a fake TwainService object with a `getQuote()` spy
+ const twainService = jasmine.createSpyObj('TwainService', ['getQuote']);
+ getQuoteSpy = twainService.getQuote;
+
+ TestBed.configureTestingModule({
+ declarations: [ TwainComponent ],
+ providers: [
+ { provide: TwainService, useValue: twainService }
+ ]
+ });
+
+ fixture = TestBed.createComponent(TwainComponent);
+ component = fixture.componentInstance;
+ quoteEl = fixture.nativeElement.querySelector('.twain');
+ testQuote = 'Test Quote';
+ });
+
+ // A synchronous test that simulates async behavior
+ // #docregion get-quote-test
+ it('should show quote after getQuote (marbles)', () => {
+ // observable test quote value and complete(), after delay
+ // #docregion test-quote-marbles
+ const q$ = cold('---x|', { x: testQuote });
+ // #enddocregion test-quote-marbles
+ getQuoteSpy.and.returnValue( q$ );
+
+ fixture.detectChanges(); // ngOnInit()
+ expect(quoteEl.textContent).toBe('...', 'should show placeholder');
+
+ // #docregion test-scheduler-flush
+ getTestScheduler().flush(); // flush the observables
+ // #enddocregion test-scheduler-flush
+
+ fixture.detectChanges(); // update view
+
+ expect(quoteEl.textContent).toBe(testQuote, 'should show quote');
+ expect(errorMessage()).toBeNull('should not show error');
+ });
+ // #enddocregion get-quote-test
+
+ // Still need fakeAsync() because of component's setTimeout()
+ // #docregion error-test
+ it('should display error when TwainService fails', fakeAsync(() => {
+ // observable error after delay
+ // #docregion error-marbles
+ const q$ = cold('---#|', null, new Error('TwainService test failure'));
+ // #enddocregion error-marbles
+ getQuoteSpy.and.returnValue( q$ );
+
+ fixture.detectChanges(); // ngOnInit()
+ expect(quoteEl.textContent).toBe('...', 'should show placeholder');
+
+ getTestScheduler().flush(); // flush the observables
+ tick(); // component shows error after a setTimeout()
+ fixture.detectChanges(); // update error message
+
+ expect(errorMessage()).toMatch(/test failure/, 'should display error');
+ expect(quoteEl.textContent).toBe('...', 'should show placeholder');
+ }));
+ // #enddocregion error-test
+});
diff --git a/aio/content/examples/testing/src/app/twain/twain.component.spec.ts b/aio/content/examples/testing/src/app/twain/twain.component.spec.ts
new file mode 100644
index 0000000000..ae71da68f5
--- /dev/null
+++ b/aio/content/examples/testing/src/app/twain/twain.component.spec.ts
@@ -0,0 +1,184 @@
+// #docplaster
+import { async, fakeAsync, ComponentFixture, TestBed, tick } from '@angular/core/testing';
+
+import { asyncData, asyncError } from '../../testing';
+
+import { Observable } from 'rxjs/Observable';
+import { of } from 'rxjs/observable/of';
+
+import { ErrorObservable } from 'rxjs/observable/ErrorObservable';
+import { last } from 'rxjs/operators';
+
+import { TwainService } from './twain.service';
+import { TwainComponent } from './twain.component';
+
+describe('TwainComponent', () => {
+ let component: TwainComponent;
+ let fixture: ComponentFixture;
+ let getQuoteSpy: jasmine.Spy;
+ let quoteEl: HTMLElement;
+ let testQuote: string;
+
+ // Helper function to get the error message element value
+ // An *ngIf keeps it out of the DOM until there is an error
+ const errorMessage = () => {
+ const el = fixture.nativeElement.querySelector('.error');
+ return el ? el.textContent : null;
+ };
+
+ // #docregion setup
+ beforeEach(() => {
+ testQuote = 'Test Quote';
+
+ // #docregion spy
+ // Create a fake TwainService object with a `getQuote()` spy
+ const twainService = jasmine.createSpyObj('TwainService', ['getQuote']);
+ // Make the spy return a synchronous Observable with the test data
+ getQuoteSpy = twainService.getQuote.and.returnValue( of(testQuote) );
+ // #enddocregion spy
+
+ TestBed.configureTestingModule({
+ declarations: [ TwainComponent ],
+ providers: [
+ { provide: TwainService, useValue: twainService }
+ ]
+ });
+
+ fixture = TestBed.createComponent(TwainComponent);
+ component = fixture.componentInstance;
+ quoteEl = fixture.nativeElement.querySelector('.twain');
+ });
+ // #enddocregion setup
+
+ describe('when test with synchronous observable', () => {
+ it('should not show quote before OnInit', () => {
+ expect(quoteEl.textContent).toBe('', 'nothing displayed');
+ expect(errorMessage()).toBeNull('should not show error element');
+ expect(getQuoteSpy.calls.any()).toBe(false, 'getQuote not yet called');
+ });
+
+ // The quote would not be immediately available if the service were truly async.
+ // #docregion sync-test
+ it('should show quote after component initialized', () => {
+ fixture.detectChanges(); // onInit()
+
+ // sync spy result shows testQuote immediately after init
+ expect(quoteEl.textContent).toBe(testQuote);
+ expect(getQuoteSpy.calls.any()).toBe(true, 'getQuote called');
+ });
+ // #enddocregion sync-test
+
+
+ // The error would not be immediately available if the service were truly async.
+ // Use `fakeAsync` because the component error calls `setTimeout`
+ // #docregion error-test
+ it('should display error when TwainService fails', fakeAsync(() => {
+ // tell spy to return an error observable
+ getQuoteSpy.and.returnValue(
+ new ErrorObservable('TwainService test failure'));
+
+ fixture.detectChanges(); // onInit()
+ // sync spy errors immediately after init
+
+ tick(); // flush the component's setTimeout()
+
+ fixture.detectChanges(); // update errorMessage within setTimeout()
+
+ expect(errorMessage()).toMatch(/test failure/, 'should display error');
+ expect(quoteEl.textContent).toBe('...', 'should show placeholder');
+ }));
+ // #enddocregion error-test
+ });
+
+ describe('when test with asynchronous observable', () => {
+ beforeEach(() => {
+ // #docregion async-setup
+ // Simulate delayed observable values with the `asyncData()` helper
+ getQuoteSpy.and.returnValue(asyncData(testQuote));
+ // #enddocregion async-setup
+ });
+
+ it('should not show quote before OnInit', () => {
+ expect(quoteEl.textContent).toBe('', 'nothing displayed');
+ expect(errorMessage()).toBeNull('should not show error element');
+ expect(getQuoteSpy.calls.any()).toBe(false, 'getQuote not yet called');
+ });
+
+ it('should still not show quote after component initialized', () => {
+ fixture.detectChanges();
+ // getQuote service is async => still has not returned with quote
+ // so should show the start value, '...'
+ expect(quoteEl.textContent).toBe('...', 'should show placeholder');
+ expect(errorMessage()).toBeNull('should not show error');
+ expect(getQuoteSpy.calls.any()).toBe(true, 'getQuote called');
+ });
+
+ // #docregion fake-async-test
+ it('should show quote after getQuote (fakeAsync)', fakeAsync(() => {
+ fixture.detectChanges(); // ngOnInit()
+ expect(quoteEl.textContent).toBe('...', 'should show placeholder');
+
+ tick(); // flush the observable to get the quote
+ fixture.detectChanges(); // update view
+
+ expect(quoteEl.textContent).toBe(testQuote, 'should show quote');
+ expect(errorMessage()).toBeNull('should not show error');
+ }));
+ // #enddocregion fake-async-test
+
+ // #docregion async-test
+ it('should show quote after getQuote (async)', async(() => {
+ fixture.detectChanges(); // ngOnInit()
+ expect(quoteEl.textContent).toBe('...', 'should show placeholder');
+
+ fixture.whenStable().then(() => { // wait for async getQuote
+ fixture.detectChanges(); // update view with quote
+ expect(quoteEl.textContent).toBe(testQuote);
+ expect(errorMessage()).toBeNull('should not show error');
+ });
+ }));
+ // #enddocregion async-test
+
+
+ // #docregion quote-done-test
+ it('should show last quote (quote done)', (done: DoneFn) => {
+ fixture.detectChanges();
+
+ component.quote.pipe( last() ).subscribe(() => {
+ fixture.detectChanges(); // update view with quote
+ expect(quoteEl.textContent).toBe(testQuote);
+ expect(errorMessage()).toBeNull('should not show error');
+ done();
+ });
+ });
+ // #enddocregion quote-done-test
+
+ // #docregion spy-done-test
+ it('should show quote after getQuote (spy done)', (done: DoneFn) => {
+ fixture.detectChanges();
+
+ // the spy's most recent call returns the observable with the test quote
+ getQuoteSpy.calls.mostRecent().returnValue.subscribe(() => {
+ fixture.detectChanges(); // update view with quote
+ expect(quoteEl.textContent).toBe(testQuote);
+ expect(errorMessage()).toBeNull('should not show error');
+ done();
+ });
+ });
+ // #enddocregion spy-done-test
+
+ // #docregion async-error-test
+ it('should display error when TwainService fails', fakeAsync(() => {
+ // tell spy to return an async error observable
+ getQuoteSpy.and.returnValue(asyncError('TwainService test failure'));
+
+ fixture.detectChanges();
+ tick(); // component shows error after a setTimeout()
+ fixture.detectChanges(); // update error message
+
+ expect(errorMessage()).toMatch(/test failure/, 'should display error');
+ expect(quoteEl.textContent).toBe('...', 'should show placeholder');
+ }));
+ // #enddocregion async-error-test
+ });
+});
diff --git a/aio/content/examples/testing/src/app/twain/twain.component.ts b/aio/content/examples/testing/src/app/twain/twain.component.ts
new file mode 100644
index 0000000000..6e40b6dd54
--- /dev/null
+++ b/aio/content/examples/testing/src/app/twain/twain.component.ts
@@ -0,0 +1,49 @@
+// #docregion
+import { Component, OnInit } from '@angular/core';
+
+import { Observable } from 'rxjs/Observable';
+import { of } from 'rxjs/observable/of';
+import { catchError, startWith } from 'rxjs/operators';
+
+import { TwainService } from './twain.service';
+
+// #docregion component
+@Component({
+ selector: 'twain-quote',
+ // #docregion template
+ template: `
+ {{quote | async}}
+
+ {{ errorMessage }}
`,
+ // #enddocregion template
+ styles: [
+ `.twain { font-style: italic; } .error { color: red; }`
+ ]
+
+})
+export class TwainComponent implements OnInit {
+ errorMessage: string;
+ quote: Observable;
+
+ constructor(private twainService: TwainService) {}
+
+ ngOnInit(): void {
+ this.getQuote();
+ }
+
+ // #docregion get-quote
+ getQuote() {
+ this.errorMessage = '';
+ this.quote = this.twainService.getQuote().pipe(
+ startWith('...'),
+ catchError( (err: any) => {
+ // Wait a turn because errorMessage already set once this turn
+ setTimeout(() => this.errorMessage = err.message || err.toString());
+ return of('...'); // reset message to placeholder
+ })
+ );
+ // #enddocregion get-quote
+ }
+
+}
+// #enddocregion component
diff --git a/aio/content/examples/testing/src/app/twain/twain.data.ts b/aio/content/examples/testing/src/app/twain/twain.data.ts
new file mode 100644
index 0000000000..a228ef5bbc
--- /dev/null
+++ b/aio/content/examples/testing/src/app/twain/twain.data.ts
@@ -0,0 +1,15 @@
+import { Quote } from './quote';
+
+export const QUOTES: Quote[] = [
+ 'Always do right. This will gratify some people and astonish the rest.',
+ 'I have never let my schooling interfere with my education.',
+ 'Don\'t go around saying the world owes you a living. The world owes you nothing. It was here first.',
+ 'Whenever you find yourself on the side of the majority, it is time to pause and reflect.',
+ 'If you tell the truth, you don\'t have to remember anything.',
+ 'Clothes make the man. Naked people have little or no influence on society.',
+ 'It\'s not the size of the dog in the fight, it\'s the size of the fight in the dog.',
+ 'Truth is stranger than fiction, but it is because Fiction is obliged to stick to possibilities; Truth isn\'t.',
+ 'The man who does not read good books has no advantage over the man who cannot read them.',
+ 'Get your facts first, and then you can distort them as much as you please.',
+]
+.map((q, i) => ({ id: i + 1, quote: q }));
diff --git a/aio/content/examples/testing/src/app/twain/twain.service.ts b/aio/content/examples/testing/src/app/twain/twain.service.ts
new file mode 100644
index 0000000000..da4386f5b1
--- /dev/null
+++ b/aio/content/examples/testing/src/app/twain/twain.service.ts
@@ -0,0 +1,47 @@
+// Mark Twain Quote service gets quotes from server
+import { Injectable } from '@angular/core';
+import { HttpClient, HttpErrorResponse } from '@angular/common/http';
+
+import { Observable } from 'rxjs/Observable';
+import { ErrorObservable } from 'rxjs/observable/ErrorObservable';
+import { of } from 'rxjs/observable/of';
+import { concat, map, retryWhen, switchMap, take, tap } from 'rxjs/operators';
+
+import { Quote } from './quote';
+
+@Injectable()
+export class TwainService {
+ constructor(private http: HttpClient) { }
+
+ private nextId = 1;
+
+ getQuote(): Observable {
+ return Observable.create(observer => observer.next(this.nextId++)).pipe(
+
+ // tap((id: number) => console.log(id)),
+ // tap((id: number) => { throw new Error('Simulated server error'); }),
+
+ switchMap((id: number) => this.http.get(`api/quotes/${id}`)),
+ // tap((q : Quote) => console.log(q)),
+ map((q: Quote) => q.quote),
+
+ // `errors` is observable of http.get errors
+ retryWhen(errors => errors.pipe(
+ switchMap((error: HttpErrorResponse) => {
+ if (error.status === 404) {
+ // Queried for quote that doesn't exist.
+ this.nextId = 1; // retry with quote id:1
+ return of(null); // signal OK to retry
+ }
+ // Some other HTTP error.
+ console.error(error);
+ return new ErrorObservable('Cannot get Twain quotes from the server');
+ }),
+ take(2),
+ // If a second retry value, then didn't find id:1 and triggers the following error
+ concat(new ErrorObservable('There are no Twain quotes')) // didn't find id:1
+ ))
+ );
+ }
+}
+
diff --git a/aio/content/examples/testing/src/app/welcome.component.spec.ts b/aio/content/examples/testing/src/app/welcome/welcome.component.spec.ts
similarity index 67%
rename from aio/content/examples/testing/src/app/welcome.component.spec.ts
rename to aio/content/examples/testing/src/app/welcome/welcome.component.spec.ts
index e506dda396..25f3b28c77 100644
--- a/aio/content/examples/testing/src/app/welcome.component.spec.ts
+++ b/aio/content/examples/testing/src/app/welcome/welcome.component.spec.ts
@@ -1,26 +1,66 @@
// #docplaster
import { ComponentFixture, inject, TestBed } from '@angular/core/testing';
-import { By } from '@angular/platform-browser';
-import { DebugElement } from '@angular/core';
-import { UserService } from './model';
+import { UserService } from '../model/user.service';
import { WelcomeComponent } from './welcome.component';
+// #docregion mock-user-service
+class MockUserService {
+ isLoggedIn = true;
+ user = { name: 'Test User'};
+};
+// #enddocregion mock-user-service
+
+describe('WelcomeComponent (class only)', () => {
+ let comp: WelcomeComponent;
+ let userService: UserService;
+
+ // #docregion class-only-before-each
+ beforeEach(() => {
+ TestBed.configureTestingModule({
+ // provide the component-under-test and dependent service
+ providers: [
+ WelcomeComponent,
+ { provide: UserService, useClass: MockUserService }
+ ]
+ });
+ // inject both the component and the dependent service.
+ comp = TestBed.get(WelcomeComponent);
+ userService = TestBed.get(UserService);
+ });
+ // #enddocregion class-only-before-each
+
+ // #docregion class-only-tests
+ it('should not have welcome message after construction', () => {
+ expect(comp.welcome).toBeUndefined();
+ });
+
+ it('should welcome logged in user after Angular calls ngOnInit', () => {
+ comp.ngOnInit();
+ expect(comp.welcome).toContain(userService.user.name);
+ });
+
+ it('should ask user to log in if not logged in after ngOnInit', () => {
+ userService.isLoggedIn = false;
+ comp.ngOnInit();
+ expect(comp.welcome).not.toContain(userService.user.name);
+ expect(comp.welcome).toContain('log in');
+ });
+ // #enddocregion class-only-tests
+});
+
describe('WelcomeComponent', () => {
let comp: WelcomeComponent;
let fixture: ComponentFixture;
let componentUserService: UserService; // the actually injected service
let userService: UserService; // the TestBed injected service
- let de: DebugElement; // the DebugElement with the welcome message
let el: HTMLElement; // the DOM element with the welcome message
- let userServiceStub: {
- isLoggedIn: boolean;
- user: { name: string}
- };
+ // #docregion setup, user-service-stub
+ let userServiceStub: Partial;
- // #docregion setup
+ // #enddocregion user-service-stub
beforeEach(() => {
// stub UserService for test purposes
// #docregion user-service-stub
@@ -57,8 +97,7 @@ describe('WelcomeComponent', () => {
// #enddocregion inject-from-testbed
// get the "welcome" element by CSS selector (e.g., by class name)
- de = fixture.debugElement.query(By.css('.welcome'));
- el = de.nativeElement;
+ el = fixture.nativeElement.querySelector('.welcome');
});
// #enddocregion setup
@@ -85,12 +124,10 @@ describe('WelcomeComponent', () => {
});
// #enddocregion tests
- // #docregion inject-it
it('should inject the component\'s UserService instance',
inject([UserService], (service: UserService) => {
expect(service).toBe(componentUserService);
}));
- // #enddocregion inject-it
it('TestBed and Component UserService should be the same', () => {
expect(userService === componentUserService).toBe(true);
diff --git a/aio/content/examples/testing/src/app/welcome.component.ts b/aio/content/examples/testing/src/app/welcome/welcome.component.ts
similarity index 50%
rename from aio/content/examples/testing/src/app/welcome.component.ts
rename to aio/content/examples/testing/src/app/welcome/welcome.component.ts
index 9bc5ca33c4..802f30cc4a 100644
--- a/aio/content/examples/testing/src/app/welcome.component.ts
+++ b/aio/content/examples/testing/src/app/welcome/welcome.component.ts
@@ -1,19 +1,20 @@
// #docregion
import { Component, OnInit } from '@angular/core';
+import { UserService } from '../model/user.service';
-import { UserService } from './model/user.service';
-
+// #docregion component
@Component({
selector: 'app-welcome',
- template: '{{welcome}}
'
+ template: '{{welcome}}
'
})
+// #docregion class
export class WelcomeComponent implements OnInit {
- welcome = '-- not initialized yet --';
+ welcome: string;
constructor(private userService: UserService) { }
ngOnInit(): void {
this.welcome = this.userService.isLoggedIn ?
- 'Welcome, ' + this.userService.user.name :
- 'Please log in.';
+ 'Welcome, ' + this.userService.user.name : 'Please log in.';
}
}
+// #enddocregion component, class
diff --git a/aio/content/examples/testing/src/bag-specs.html b/aio/content/examples/testing/src/bag-specs.html
deleted file mode 100644
index 89b46f7056..0000000000
--- a/aio/content/examples/testing/src/bag-specs.html
+++ /dev/null
@@ -1,42 +0,0 @@
-
-
-
-
-
- Specs Bag
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
diff --git a/aio/content/examples/testing/src/bag.html b/aio/content/examples/testing/src/bag.html
deleted file mode 100644
index 3e0fcb9025..0000000000
--- a/aio/content/examples/testing/src/bag.html
+++ /dev/null
@@ -1,26 +0,0 @@
-
-
-
-
- Specs Bag
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- Loading ...
-
-
diff --git a/aio/content/examples/testing/src/banner-inline-specs.html b/aio/content/examples/testing/src/banner-inline-specs.html
deleted file mode 100644
index 2a512a5647..0000000000
--- a/aio/content/examples/testing/src/banner-inline-specs.html
+++ /dev/null
@@ -1,40 +0,0 @@
-
-
-
-
-
- Banner Component (inline template) Specs
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
diff --git a/aio/content/examples/testing/src/banner-specs.html b/aio/content/examples/testing/src/banner-specs.html
deleted file mode 100644
index d16dd977a4..0000000000
--- a/aio/content/examples/testing/src/banner-specs.html
+++ /dev/null
@@ -1,40 +0,0 @@
-
-
-
-
-
- Banner Component Specs
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
diff --git a/aio/content/examples/testing/src/browser-test-shim.js b/aio/content/examples/testing/src/browser-test-shim.js
deleted file mode 100644
index ee21831e22..0000000000
--- a/aio/content/examples/testing/src/browser-test-shim.js
+++ /dev/null
@@ -1,87 +0,0 @@
-// BROWSER TESTING SHIM
-// Keep it in-sync with what karma-test-shim does
-// #docregion
-/*global jasmine, __karma__, window*/
-(function () {
-
-Error.stackTraceLimit = 0; // "No stacktrace"" is usually best for app testing.
-
-// Uncomment to get full stacktrace output. Sometimes helpful, usually not.
-// Error.stackTraceLimit = Infinity; //
-
-jasmine.DEFAULT_TIMEOUT_INTERVAL = 3000;
-
-var baseURL = document.baseURI;
-baseURL = baseURL + baseURL[baseURL.length-1] ? '' : '/';
-
-System.config({
- baseURL: baseURL,
- // Extend usual application package list with test folder
- packages: { 'testing': { main: 'index.js', defaultExtension: 'js' } },
-
- // Assume npm: is set in `paths` in systemjs.config
- // Map the angular testing umd bundles
- map: {
- '@angular/core/testing': 'npm:@angular/core/bundles/core-testing.umd.js',
- '@angular/common/testing': 'npm:@angular/common/bundles/common-testing.umd.js',
- '@angular/compiler/testing': 'npm:@angular/compiler/bundles/compiler-testing.umd.js',
- '@angular/platform-browser/testing': 'npm:@angular/platform-browser/bundles/platform-browser-testing.umd.js',
- '@angular/platform-browser-dynamic/testing': 'npm:@angular/platform-browser-dynamic/bundles/platform-browser-dynamic-testing.umd.js',
- '@angular/http/testing': 'npm:@angular/http/bundles/http-testing.umd.js',
- '@angular/router/testing': 'npm:@angular/router/bundles/router-testing.umd.js',
- '@angular/forms/testing': 'npm:@angular/forms/bundles/forms-testing.umd.js',
- },
-});
-
-System.import('systemjs.config.js')
- .then(importSystemJsExtras)
- .then(initTestBed)
- .then(initTesting);
-
-/** Optional SystemJS configuration extras. Keep going w/o it */
-function importSystemJsExtras(){
- return System.import('systemjs.config.extras.js')
- .catch(function(reason) {
- console.log(
- 'Note: System.import could not load "systemjs.config.extras.js" where you might have added more configuration. It is an optional file so we will continue without it.'
- );
- console.log(reason);
- });
-}
-
-function initTestBed(){
- return Promise.all([
- System.import('@angular/core/testing'),
- System.import('@angular/platform-browser-dynamic/testing')
- ])
-
- .then(function (providers) {
- var coreTesting = providers[0];
- var browserTesting = providers[1];
-
- coreTesting.TestBed.initTestEnvironment(
- browserTesting.BrowserDynamicTestingModule,
- browserTesting.platformBrowserDynamicTesting());
- })
-}
-
-// Import all spec files defined in the html (__spec_files__)
-// and start Jasmine testrunner
-function initTesting () {
- console.log('loading spec files: '+__spec_files__.join(', '));
- return Promise.all(
- __spec_files__.map(function(spec) {
- return System.import(spec);
- })
- )
- // After all imports load, re-execute `window.onload` which
- // triggers the Jasmine test-runner start or explain what went wrong
- .then(success, console.error.bind(console));
-
- function success () {
- console.log('Spec files loaded; starting Jasmine testrunner');
- window.onload();
- }
-}
-
-})();
diff --git a/aio/content/examples/testing/src/expected.ts b/aio/content/examples/testing/src/expected.ts
new file mode 100644
index 0000000000..5339fa9725
--- /dev/null
+++ b/aio/content/examples/testing/src/expected.ts
@@ -0,0 +1 @@
+/* Ignore. Satisfies static analysis of router config in app.component.router.spec.ts */
diff --git a/aio/content/examples/testing/src/index-specs.html b/aio/content/examples/testing/src/index-specs.html
new file mode 100644
index 0000000000..ca132f6cd0
--- /dev/null
+++ b/aio/content/examples/testing/src/index-specs.html
@@ -0,0 +1,4 @@
+
diff --git a/aio/content/examples/testing/src/main-specs.ts b/aio/content/examples/testing/src/main-specs.ts
new file mode 100644
index 0000000000..4bb1949ae9
--- /dev/null
+++ b/aio/content/examples/testing/src/main-specs.ts
@@ -0,0 +1,45 @@
+import './testing/global-jasmine';
+import 'jasmine-core/lib/jasmine-core/jasmine-html.js';
+import 'jasmine-core/lib/jasmine-core/boot.js';
+
+declare var jasmine;
+
+import './polyfills';
+
+import 'zone.js/dist/async-test';
+import 'zone.js/dist/fake-async-test';
+import 'zone.js/dist/long-stack-trace-zone';
+import 'zone.js/dist/proxy.js';
+import 'zone.js/dist/sync-test';
+import 'zone.js/dist/jasmine-patch';
+
+import { getTestBed } from '@angular/core/testing';
+import {
+ BrowserDynamicTestingModule,
+ platformBrowserDynamicTesting
+} from '@angular/platform-browser-dynamic/testing';
+
+// Spec files to include in the Stackblitz tests
+import './tests.sb.ts';
+
+//
+
+bootstrap();
+
+//
+
+function bootstrap () {
+ if (window['jasmineRef']) {
+ location.reload();
+ return;
+ } else {
+ window.onload(undefined);
+ window['jasmineRef'] = jasmine.getEnv();
+ }
+
+ // First, initialize the Angular testing environment.
+ getTestBed().initTestEnvironment(
+ BrowserDynamicTestingModule,
+ platformBrowserDynamicTesting()
+ );
+}
diff --git a/aio/content/examples/testing/src/test.css b/aio/content/examples/testing/src/test.css
new file mode 100644
index 0000000000..6010a5d9ba
--- /dev/null
+++ b/aio/content/examples/testing/src/test.css
@@ -0,0 +1 @@
+@import "~jasmine-core/lib/jasmine-core/jasmine.css"
diff --git a/aio/content/examples/testing/src/testing/activated-route-stub.ts b/aio/content/examples/testing/src/testing/activated-route-stub.ts
new file mode 100644
index 0000000000..04fb7cb92b
--- /dev/null
+++ b/aio/content/examples/testing/src/testing/activated-route-stub.ts
@@ -0,0 +1,29 @@
+// export for convenience.
+export { ActivatedRoute } from '@angular/router';
+
+// #docregion activated-route-stub
+import { ReplaySubject } from 'rxjs/ReplaySubject';
+import { convertToParamMap, ParamMap, Params } from '@angular/router';
+
+/**
+ * An ActivateRoute test double with a `paramMap` observable.
+ * Use the `setParamMap()` method to add the next `paramMap` value.
+ */
+export class ActivatedRouteStub {
+ // Use a ReplaySubject to share previous values with subscribers
+ // and pump new values into the `paramMap` observable
+ private subject = new ReplaySubject();
+
+ constructor(initialParams?: Params) {
+ this.setParamMap(initialParams);
+ }
+
+ /** The mock paramMap observable */
+ readonly paramMap = this.subject.asObservable();
+
+ /** Set the paramMap observables's next value */
+ setParamMap(params?: Params) {
+ this.subject.next(convertToParamMap(params));
+ };
+}
+// #enddocregion activated-route-stub
diff --git a/aio/content/examples/testing/src/testing/async-observable-helpers.ts b/aio/content/examples/testing/src/testing/async-observable-helpers.ts
new file mode 100644
index 0000000000..3282bcbe37
--- /dev/null
+++ b/aio/content/examples/testing/src/testing/async-observable-helpers.ts
@@ -0,0 +1,30 @@
+/*
+* Mock async observables that return asynchronously.
+* The observable either emits once and completes or errors.
+*
+* Must call `tick()` when test with `fakeAsync()`.
+*
+* THE FOLLOWING DON'T WORK
+* Using `of().delay()` triggers TestBed errors;
+* see https://github.com/angular/angular/issues/10127 .
+*
+* Using `asap` scheduler - as in `of(value, asap)` - doesn't work either.
+*/
+import { Observable } from 'rxjs/Observable';
+import { defer } from 'rxjs/observable/defer';
+
+// #docregion async-data
+/** Create async observable that emits-once and completes
+ * after a JS engine turn */
+export function asyncData(data: T) {
+ return defer(() => Promise.resolve(data));
+}
+// #enddocregion async-data
+
+// #docregion async-error
+/** Create async observable error that errors
+ * after a JS engine turn */
+export function asyncError(errorObject: any) {
+ return defer(() => Promise.reject(errorObject));
+}
+// #enddocregion async-error
diff --git a/aio/content/examples/testing/src/testing/global-jasmine.ts b/aio/content/examples/testing/src/testing/global-jasmine.ts
new file mode 100644
index 0000000000..560ff97d66
--- /dev/null
+++ b/aio/content/examples/testing/src/testing/global-jasmine.ts
@@ -0,0 +1,3 @@
+import jasmineRequire from 'jasmine-core/lib/jasmine-core/jasmine.js';
+
+window['jasmineRequire'] = jasmineRequire;
diff --git a/aio/content/examples/testing/src/testing/index.ts b/aio/content/examples/testing/src/testing/index.ts
index e3de5164ca..1fddaf8c4d 100644
--- a/aio/content/examples/testing/src/testing/index.ts
+++ b/aio/content/examples/testing/src/testing/index.ts
@@ -1,8 +1,10 @@
import { DebugElement } from '@angular/core';
import { tick, ComponentFixture } from '@angular/core/testing';
+export * from './async-observable-helpers';
+export * from './activated-route-stub';
export * from './jasmine-matchers';
-export * from './router-stubs';
+export * from './router-link-directive-stub';
///// Short utilities /////
diff --git a/aio/content/examples/testing/src/testing/router-link-directive-stub.ts b/aio/content/examples/testing/src/testing/router-link-directive-stub.ts
new file mode 100644
index 0000000000..761529d726
--- /dev/null
+++ b/aio/content/examples/testing/src/testing/router-link-directive-stub.ts
@@ -0,0 +1,30 @@
+import { Directive, Input } from '@angular/core';
+
+// export for convenience.
+export { RouterLink} from '@angular/router';
+
+/* tslint:disable:directive-class-suffix */
+// #docregion router-link
+@Directive({
+ selector: '[routerLink]',
+ host: { '(click)': 'onClick()' }
+})
+export class RouterLinkDirectiveStub {
+ @Input('routerLink') linkParams: any;
+ navigatedTo: any = null;
+
+ onClick() {
+ this.navigatedTo = this.linkParams;
+ }
+}
+// #enddocregion router-link
+
+/// Dummy module to satisfy Angular Language service. Never used.
+import { NgModule } from '@angular/core';
+
+@NgModule({
+ declarations: [
+ RouterLinkDirectiveStub
+ ]
+})
+export class RouterStubsModule {}
diff --git a/aio/content/examples/testing/src/testing/router-stubs.ts b/aio/content/examples/testing/src/testing/router-stubs.ts
deleted file mode 100644
index 880302c7be..0000000000
--- a/aio/content/examples/testing/src/testing/router-stubs.ts
+++ /dev/null
@@ -1,58 +0,0 @@
- // export for convenience.
-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()'
- }
-})
-export class RouterLinkStubDirective {
- @Input('routerLink') linkParams: any;
- navigatedTo: any = null;
-
- onClick() {
- this.navigatedTo = this.linkParams;
- }
-}
-// #enddocregion router-link
-
-@Component({selector: 'router-outlet', template: ''})
-export class RouterOutletStubComponent { }
-
-@Injectable()
-export class RouterStub {
- navigate(commands: any[], extras?: NavigationExtras) { }
-}
-
-
-// Only implements params and part of snapshot.paramMap
-// #docregion activated-route-stub
-import { BehaviorSubject } from 'rxjs/BehaviorSubject';
-import { convertToParamMap, ParamMap } from '@angular/router';
-
-@Injectable()
-export class ActivatedRouteStub {
-
- // ActivatedRoute.paramMap is Observable
- private subject = new BehaviorSubject(convertToParamMap(this.testParamMap));
- paramMap = this.subject.asObservable();
-
- // Test parameters
- private _testParamMap: ParamMap;
- get testParamMap() { return this._testParamMap; }
- set testParamMap(params: {}) {
- this._testParamMap = convertToParamMap(params);
- this.subject.next(this._testParamMap);
- }
-
- // ActivatedRoute.snapshot.paramMap
- get snapshot() {
- return { paramMap: this.testParamMap };
- }
-}
-// #enddocregion activated-route-stub
diff --git a/aio/content/examples/testing/src/app-specs.html b/aio/content/examples/testing/src/tests.html
similarity index 75%
rename from aio/content/examples/testing/src/app-specs.html
rename to aio/content/examples/testing/src/tests.html
index 7b7292ed7c..c988c457cb 100644
--- a/aio/content/examples/testing/src/app-specs.html
+++ b/aio/content/examples/testing/src/tests.html
@@ -31,23 +31,31 @@
diff --git a/aio/content/examples/testing/src/tests.sb.ts b/aio/content/examples/testing/src/tests.sb.ts
new file mode 100644
index 0000000000..3f1c8fe61a
--- /dev/null
+++ b/aio/content/examples/testing/src/tests.sb.ts
@@ -0,0 +1,26 @@
+// Import spec files individually for Stackblitz
+import 'app/about/about.component.spec.ts';
+import 'app/app-initial.component.spec.ts';
+import 'app/app.component.router.spec.ts';
+import 'app/app.component.spec.ts';
+import 'app/banner/banner-initial.component.spec.ts';
+import 'app/banner/banner.component.spec.ts';
+import 'app/banner/banner.component.detect-changes.spec.ts';
+import 'app/banner/banner-external.component.spec.ts';
+import 'app/dashboard/dashboard-hero.component.spec.ts';
+import 'app/dashboard/dashboard.component.no-testbed.spec.ts';
+import 'app/dashboard/dashboard.component.spec.ts';
+import 'app/demo/async-helper.spec.ts';
+import 'app/demo/demo.spec.ts';
+import 'app/demo/demo.testbed.spec.ts';
+import 'app/hero/hero-detail.component.no-testbed.spec.ts';
+import 'app/hero/hero-detail.component.spec.ts';
+import 'app/hero/hero-list.component.spec.ts';
+import 'app/model/hero.service.spec.ts';
+import 'app/model/http-hero.service.spec.ts';
+import 'app/model/testing/http-client.spec.ts';
+import 'app/shared/highlight.directive.spec.ts';
+import 'app/shared/title-case.pipe.spec.ts';
+import 'app/twain/twain.component.spec.ts';
+import 'app/twain/twain.component.marbles.spec.ts';
+import 'app/welcome/welcome.component.spec.ts';
diff --git a/aio/content/examples/testing/stackblitz.json b/aio/content/examples/testing/stackblitz.json
new file mode 100644
index 0000000000..d05e3dbb1a
--- /dev/null
+++ b/aio/content/examples/testing/stackblitz.json
@@ -0,0 +1,19 @@
+{
+ "description": "Heroes Test App",
+ "files":[
+ "src/styles.css",
+
+ "src/app/**/*.css",
+ "src/app/**/*.html",
+ "src/app/**/*.ts",
+
+ "!src/app/bag/*.*",
+
+ "!src/test.ts",
+
+ "src/test.css",
+ "src/main.ts",
+ "src/index.html"
+ ],
+ "tags": ["testing"]
+}
diff --git a/aio/content/examples/toh-pt0/plnkr.json b/aio/content/examples/toh-pt0/stackblitz.json
similarity index 87%
rename from aio/content/examples/toh-pt0/plnkr.json
rename to aio/content/examples/toh-pt0/stackblitz.json
index 3caa575acd..c2cf48171f 100644
--- a/aio/content/examples/toh-pt0/plnkr.json
+++ b/aio/content/examples/toh-pt0/stackblitz.json
@@ -1,6 +1,5 @@
{
"description": "Tour of Heroes: Part 0",
- "basePath": "src/",
"files":[
"!**/*.d.ts",
"!**/*.js",
diff --git a/aio/content/examples/toh-pt1/plnkr.json b/aio/content/examples/toh-pt1/stackblitz.json
similarity index 89%
rename from aio/content/examples/toh-pt1/plnkr.json
rename to aio/content/examples/toh-pt1/stackblitz.json
index 5ac3b2d3ce..880b28fae6 100644
--- a/aio/content/examples/toh-pt1/plnkr.json
+++ b/aio/content/examples/toh-pt1/stackblitz.json
@@ -1,6 +1,5 @@
{
"description": "Tour of Heroes: Part 1",
- "basePath": "src/",
"files":[
"!**/*.d.ts",
"!**/*.js",
diff --git a/aio/content/examples/toh-pt2/plnkr.json b/aio/content/examples/toh-pt2/stackblitz.json
similarity index 87%
rename from aio/content/examples/toh-pt2/plnkr.json
rename to aio/content/examples/toh-pt2/stackblitz.json
index 08c7b9581a..8f3cefdaeb 100644
--- a/aio/content/examples/toh-pt2/plnkr.json
+++ b/aio/content/examples/toh-pt2/stackblitz.json
@@ -1,6 +1,5 @@
{
"description": "Tour of Heroes: Part 2",
- "basePath": "src/",
"files":[
"!**/*.d.ts",
"!**/*.js",
diff --git a/aio/content/examples/toh-pt3/plnkr.json b/aio/content/examples/toh-pt3/stackblitz.json
similarity index 87%
rename from aio/content/examples/toh-pt3/plnkr.json
rename to aio/content/examples/toh-pt3/stackblitz.json
index 829715877e..c4ef78dc9f 100644
--- a/aio/content/examples/toh-pt3/plnkr.json
+++ b/aio/content/examples/toh-pt3/stackblitz.json
@@ -1,6 +1,5 @@
{
"description": "Tour of Heroes: Part 3",
- "basePath": "src/",
"files":[
"!**/*.d.ts",
"!**/*.js",
diff --git a/aio/content/examples/toh-pt4/src/app/app.module.ts b/aio/content/examples/toh-pt4/src/app/app.module.ts
index 70b26976da..f3cc34faff 100644
--- a/aio/content/examples/toh-pt4/src/app/app.module.ts
+++ b/aio/content/examples/toh-pt4/src/app/app.module.ts
@@ -21,7 +21,14 @@ import { MessagesComponent } from './messages/messages.component';
FormsModule
],
// #docregion providers
- providers: [ HeroService, MessageService ],
+ // #docregion providers-heroservice
+ providers: [
+ HeroService,
+ // #enddocregion providers-heroservice
+ MessageService
+ // #docregion providers-heroservice
+ ],
+ // #enddocregion providers-heroservice
// #enddocregion providers
bootstrap: [ AppComponent ]
})
diff --git a/aio/content/examples/toh-pt4/plnkr.json b/aio/content/examples/toh-pt4/stackblitz.json
similarity index 87%
rename from aio/content/examples/toh-pt4/plnkr.json
rename to aio/content/examples/toh-pt4/stackblitz.json
index 95987d95ce..1b3e442ac0 100644
--- a/aio/content/examples/toh-pt4/plnkr.json
+++ b/aio/content/examples/toh-pt4/stackblitz.json
@@ -1,6 +1,5 @@
{
"description": "Tour of Heroes: Part 4",
- "basePath": "src/",
"files":[
"!**/*.d.ts",
"!**/*.js",
diff --git a/aio/content/examples/toh-pt5/src/app/messages/messages.component.html b/aio/content/examples/toh-pt5/src/app/messages/messages.component.html
index 1df7dfd989..8e86f5247d 100644
--- a/aio/content/examples/toh-pt5/src/app/messages/messages.component.html
+++ b/aio/content/examples/toh-pt5/src/app/messages/messages.component.html
@@ -3,6 +3,6 @@
Messages
- {{message}}
+ {{message}}
diff --git a/aio/content/examples/toh-pt5/plnkr.json b/aio/content/examples/toh-pt5/stackblitz.json
similarity index 88%
rename from aio/content/examples/toh-pt5/plnkr.json
rename to aio/content/examples/toh-pt5/stackblitz.json
index df6999a611..17390ecfc6 100644
--- a/aio/content/examples/toh-pt5/plnkr.json
+++ b/aio/content/examples/toh-pt5/stackblitz.json
@@ -1,6 +1,5 @@
{
"description": "Tour of Heroes: Part 5",
- "basePath": "src/",
"files":[
"!**/*.d.ts",
"!**/*.js",
diff --git a/aio/content/examples/toh-pt6/e2e/app.e2e-spec.ts b/aio/content/examples/toh-pt6/e2e/app.e2e-spec.ts
index b51be25f84..cbd0df76d4 100644
--- a/aio/content/examples/toh-pt6/e2e/app.e2e-spec.ts
+++ b/aio/content/examples/toh-pt6/e2e/app.e2e-spec.ts
@@ -190,6 +190,29 @@ describe('Tutorial part 6', () => {
const maxId = heroesBefore[heroesBefore.length - 1].id;
expect(heroesAfter[numHeroes]).toEqual({id: maxId + 1, name: newHeroName});
});
+
+ it('displays correctly styled buttons', async () => {
+ element.all(by.buttonText('x')).then(buttons => {
+ for (const button of buttons) {
+ // Inherited styles from styles.css
+ expect(button.getCssValue('font-family')).toBe('Arial');
+ expect(button.getCssValue('border')).toContain('none');
+ expect(button.getCssValue('padding')).toBe('5px 10px');
+ expect(button.getCssValue('border-radius')).toBe('4px');
+ // Styles defined in heroes.component.css
+ expect(button.getCssValue('left')).toBe('194px');
+ expect(button.getCssValue('top')).toBe('-32px');
+ }
+ });
+
+ const addButton = element(by.buttonText('add'));
+ // Inherited styles from styles.css
+ expect(addButton.getCssValue('font-family')).toBe('Arial');
+ expect(addButton.getCssValue('border')).toContain('none');
+ expect(addButton.getCssValue('padding')).toBe('5px 10px');
+ expect(addButton.getCssValue('border-radius')).toBe('4px');
+ });
+
});
describe('Progressive hero search', () => {
diff --git a/aio/content/examples/toh-pt6/src/app/heroes/heroes.component.css b/aio/content/examples/toh-pt6/src/app/heroes/heroes.component.css
index 62634648ad..c345d1d970 100644
--- a/aio/content/examples/toh-pt6/src/app/heroes/heroes.component.css
+++ b/aio/content/examples/toh-pt6/src/app/heroes/heroes.component.css
@@ -51,7 +51,7 @@
}
/* #docregion additions */
-.button {
+button {
background-color: #eee;
border: none;
padding: 5px 10px;
diff --git a/aio/content/examples/toh-pt6/plnkr.json b/aio/content/examples/toh-pt6/stackblitz.json
similarity index 88%
rename from aio/content/examples/toh-pt6/plnkr.json
rename to aio/content/examples/toh-pt6/stackblitz.json
index d355bc9ff2..777d9ad1f1 100644
--- a/aio/content/examples/toh-pt6/plnkr.json
+++ b/aio/content/examples/toh-pt6/stackblitz.json
@@ -1,6 +1,5 @@
{
"description": "Tour of Heroes: Part 6",
- "basePath": "src/",
"files":[
"!**/*.d.ts",
"!**/*.js",
diff --git a/aio/content/examples/universal/src/app/app.module.ts b/aio/content/examples/universal/src/app/app.module.ts
index 6d07040733..1dab81e17b 100644
--- a/aio/content/examples/universal/src/app/app.module.ts
+++ b/aio/content/examples/universal/src/app/app.module.ts
@@ -53,7 +53,7 @@ export class AppModule {
@Inject(PLATFORM_ID) private platformId: Object,
@Inject(APP_ID) private appId: string) {
const platform = isPlatformBrowser(platformId) ?
- 'on the server' : 'in the browser';
+ 'in the browser' : 'on the server';
console.log(`Running ${platform} with appId=${appId}`);
}
// #enddocregion platform-detection
diff --git a/aio/content/examples/upgrade-phonecat-2-hybrid/karma-test-shim.1.js b/aio/content/examples/upgrade-phonecat-2-hybrid/karma-test-shim.1.js
index 19fcc89fe9..b92085c014 100644
--- a/aio/content/examples/upgrade-phonecat-2-hybrid/karma-test-shim.1.js
+++ b/aio/content/examples/upgrade-phonecat-2-hybrid/karma-test-shim.1.js
@@ -37,6 +37,7 @@ System.config({
map: {
'@angular/core/testing': 'npm:@angular/core/bundles/core-testing.umd.js',
'@angular/common/testing': 'npm:@angular/common/bundles/common-testing.umd.js',
+ '@angular/common/http/testing': 'npm:@angular/common/bundles/common-http-testing.umd.js',
'@angular/compiler/testing': 'npm:@angular/compiler/bundles/compiler-testing.umd.js',
'@angular/platform-browser/testing': 'npm:@angular/platform-browser/bundles/platform-browser-testing.umd.js',
'@angular/platform-browser-dynamic/testing': 'npm:@angular/platform-browser-dynamic/bundles/platform-browser-dynamic-testing.umd.js',
diff --git a/aio/content/examples/user-input/plnkr.json b/aio/content/examples/user-input/stackblitz.json
similarity index 82%
rename from aio/content/examples/user-input/plnkr.json
rename to aio/content/examples/user-input/stackblitz.json
index dd8f063d37..d60beb9e7e 100644
--- a/aio/content/examples/user-input/plnkr.json
+++ b/aio/content/examples/user-input/stackblitz.json
@@ -1,6 +1,5 @@
{
"description": "User Input",
- "basePath": "src/",
"files": [
"!**/*.d.ts",
"!**/*.js"
diff --git a/aio/content/guide/ajs-quick-reference.md b/aio/content/guide/ajs-quick-reference.md
index 987ca23405..6a3018367f 100644
--- a/aio/content/guide/ajs-quick-reference.md
+++ b/aio/content/guide/ajs-quick-reference.md
@@ -1423,10 +1423,9 @@ The Angular code is shown using TypeScript.
`declaration`: 用于记录组件、管道和指令。
- For more information on modules, see [NgModules](guide/ngmodule).
+ For more information on modules, see [NgModules](guide/ngmodules).
要了解关于模块的更多知识，参见[NgModules](guide/ngmodule)。
-
@@ -1660,7 +1659,7 @@ also encapsulate a style sheet within a specific component.
### 样式配置
-
+
diff --git a/aio/content/guide/aot-compiler.md b/aio/content/guide/aot-compiler.md
index 05ed37395e..1ca15ebf88 100644
--- a/aio/content/guide/aot-compiler.md
+++ b/aio/content/guide/aot-compiler.md
@@ -4,7 +4,7 @@ The Angular Ahead-of-Time (AOT) compiler converts your Angular HTML and TypeScri
Angular 的“预先（AOT）编译器”会在构建期间把 Angular 应用的 HTML 和 TypeScript 代码编译成高效的 JavaScript 代码，之后浏览器就可以下载并快速运行这些代码。
-This guide explains how to build with the AOT compiler and how to write Angular metadata that AOT can compile.
+This guide explains how to build with the AOT compiler using different compiler options and how to write Angular metadata that AOT can compile.
本章描述了如何使用 AOT 编译器，以及如何书写能被 AOT 编译的 Angular 元数据。
@@ -116,6 +116,182 @@ there are fewer opportunities for injection attacks.
AOT编译远在HTML模版和组件被服务到客户端之前，将它们编译到JavaScript文件。
没有模版可以阅读，没有高风险客户端HTML或JavaScript可利用，所以注入攻击的机会较少。
+{@a compiler-options}
+
+## Angular Compiler Options
+
+You can control your app compilation by providing template compiler options in the `tsconfig.json` file along with the options supplied to the TypeScript compiler. The template compiler options are specified as members of
+`"angularCompilerOptions"` object as shown below:
+
+```json
+{
+ "compilerOptions": {
+ "experimentalDecorators": true,
+ ...
+ },
+ "angularCompilerOptions": {
+ "fullTemplateTypeCheck": true,
+ "preserveWhitespaces": true,
+ ...
+ }
+}
+```
+
+### *skipMetadataEmit*
+
+This option tells the compiler not to produce `.metadata.json` files.
+The option is `false` by default.
+
+`.metadata.json` files contain infomration needed by the template compiler from a `.ts`
+file that is not included in the `.d.ts` file produced by the TypeScript compiler. This information contains,
+for example, the content of annotations (such as a component's template) which TypeScript
+emits to the `.js` file but not to the `.d.ts` file.
+
+This option should be set to `true` if using TypeScript's `--outFile` option, as the metadata files
+are not valid for this style of TypeScript output. It is not recommeded to use `--outFile` with
+Angular. Use a bundler, such as [webpack](https://webpack.js.org/), instead.
+
+This option can also be set to `true` when using factory summaries as the factory summaries
+include a copy of the information that is in the `.metadata.json` file.
+
+### *strictMetadataEmit*
+
+This option tells the template compiler to report an error to the `.metadata.json`
+file if `"skipMetadataEmit"` is `false` . This option is `false` by default. This should only be used when `"skipMetadataEmit"` is `false` and `"skipTemplateCodeGen"` is `true`.
+
+It is intended to validate the `.metadata.json` files emitted for bundling with an `npm` package. The validation is overly strict and can emit errors for metadata that would never produce an error when used by the template compiler. You can choose to suppress the error emitted by this option for an exported symbol by including `@dynamic` in the comment documenting the symbol.
+
+It is valid for `.metadata.json` files to contain errors. The template compiler reports these errors
+if the metadata is used to determine the contents of an annotation. The metadata
+collector cannot predict the symbols that are designed to use in an annotation, so it will preemptively
+include error nodes in the metadata for the exported symbols. The template compiler can then use the error
+nodes to report an error if these symbols are used. If the client of a library intends to use a symbol in an annotation, the template compiler will not normally report
+this until the client uses the symbol. This option allows detecting these errors during the build phase of
+the library and is used, for example, in producing Angular libraries themselves.
+
+### *skipTemplateCodegen*
+
+This option tells the compiler to suppress emitting `.ngfactory.js` and `.ngstyle.js` files. When set,
+this turns off most of the template compiler and disables reporting template diagnostics.
+This option can be used to instruct the
+template compiler to produce `.metadata.json` files for distribution with an `npm` package while
+avoiding the production of `.ngfactory.js` and `.ngstyle.js` files that cannot be distributed to
+`npm`.
+
+### *strictInjectionParameters*
+
+When set to `true`, this options tells the compiler to report an error for a parameter supplied
+whose injection type cannot be determined. When this value option is not provided or is `false`, constructor parameters of classes marked with `@Injectable` whose type cannot be resolved will
+produce a warning.
+
+*Note*: It is recommended to change this option explicitly to `true` as this option will default to `true` in the future.
+
+### *flatModuleOutFile*
+
+When set to `true`, this option tells the template compiler to generate a flat module
+index of the given file name and the corresponding flat module metadata. Use this option when creating
+flat modules that are packaged similarly to `@angular/core` and `@angular/common`. When this option
+is used, the `package.json` for the library should refer
+to the generated flat module index instead of the library index file. With this
+option only one `.metadata.json` file is produced that contains all the metadata necessary
+for symbols exported from the library index. In the generated `.ngfactory.js` files, the flat
+module index is used to import symbols that includes both the public API from the library index
+as well as shrowded internal symbols.
+
+By default the `.ts` file supplied in the `files` field is assumed to be library index.
+If more than one `.ts` file is specified, `libraryIndex` is used to select the file to use.
+If more than one `.ts` file is supplied without a `libraryIndex`, an error is produced. A flat module
+index `.d.ts` and `.js` will be created with the given `flatModuleOutFile` name in the same
+location as the library index `.d.ts` file. For example, if a library uses
+`public_api.ts` file as the library index of the module, the `tsconfig.json` `files` field
+would be `["public_api.ts"]`. The `flatModuleOutFile` options could then be set to, for
+example `"index.js"`, which produces `index.d.ts` and `index.metadata.json` files. The
+library's `package.json`'s `module` field would be `"index.js"` and the `typings` field
+would be `"index.d.ts"`.
+
+### *flatModuleId*
+
+This option specifies the preferred module id to use for importing a flat module.
+References generated by the template compiler will use this module name when importing symbols
+from the flat module.
+This is only meaningful when `flatModuleOutFile` is also supplied. Otherwise the compiler ignores
+this option.
+
+### *generateCodeForLibraries*
+
+This option tells the template compiler to generate factory files (`.ngfactory.js` and `.ngstyle.js`)
+for `.d.ts` files with a corresponding `.metadata.json` file. This option defaults to
+`true`. When this option is `false`, factory files are generated only for `.ts` files.
+
+This option should be set to `false` when using factory summaries.
+
+### *fullTemplateTypeCheck*
+
+This option tells the compiler to enable the [binding expression validation](#binding-expresion-validation)
+phase of the template compiler which uses TypeScript to validate binding expressions.
+
+This option is `false` by default.
+
+*Note*: It is recommended to set this to `true` as this option will default to `true` in the future.
+
+### *annotateForClosureCompiler*
+
+This option tells the compiler to use [Tsickle](https://github.com/angular/tsickle) to annotate the emitted
+JavaScript with [JsDoc](http://usejsdoc.org/) comments needed by the
+[Closure Compiler](https://github.com/google/closure-compiler). This option defaults to `false`.
+
+### *annotationsAs*
+
+Use this option to modify how the Angular specific annotations are emitted to improve tree-shaking. Non-Angular
+annotations and decorators are unnaffected. Default is `static fields`.
+
+value | description
+----------------|-------------------------------------------------------------
+`decorators` | Leave the Decorators in-place. This makes compilation faster. TypeScript will emit calls to the __decorate helper. Use `--emitDecoratorMetadata` for runtime reflection. However, the resulting code will not properly tree-shake.
+`static fields` | Replace decorators with a static field in the class. Allows advanced tree-shakers like [Closure Compiler](https://github.com/google/closure-compiler) to remove unused classes.
+
+### *trace*
+
+This tells the compiler to print extra information while compiling templates.
+
+### *enableLegacyTemplate*
+
+The use of `` element was deprecated starting in Angular 4.0 in favor of using
+`` to avoid colliding with the DOM's element of the same name. Setting this option to
+`true` enables the use of the deprecated `` element . This option
+is `false` by default. This option might be required by some third-party Angular libraries.
+
+### *disableExpressionLowering*
+
+The Angular template compiler transforms code that is used, or could be used, in an annotation
+to allow it to be imported from template factory modules. See
+[metadata rewriting](#metadata-rewriting) for more information.
+
+Setting this option to `false` disables this rewriting, requiring the rewriting to be
+done manually.
+
+### *preserveWhitespaces*
+
+This option tells the compiler whether to remove blank text nodes from compiled templates.
+As of v6, this option is `false` by default, which results in smaller emitted template factory modules.
+
+### *allowEmptyCodegenFiles*
+
+Tells the compiler to generate all the possible generated files even if they are empty. This option is
+`false` by default. This is an option used by `bazel` build rules and is needed to simplify
+how `bazel` rules track file dependencies. It is not recommended to use this option outside of the `bazel`
+rules.
+
+ ### *enableIvy*
+
+ Tells the compiler to generate definitions using the Render3 style code generation. This option defaults to `false`.
+
+ Not all features are supported with this option enabled. It is only supported
+ for experimentation and testing of Render3 style code generation.
+
+ *Note*: Is it not recommended to use this option as it is not yet feature complete with the Render2 code generation.
+
+
## Angular Metadata and AOT
## Angular 元数据与 AOT
@@ -278,7 +454,7 @@ and [arrow functions](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Re
Consider the following component decorator:
-```ts
+```typescript
@Component({
...
providers: [{provide: server, useFactory: () => new Server()}]
@@ -292,7 +468,7 @@ When the compiler later interprets this node, it reports an error that invites y
You can fix the error by converting to this:
-```ts
+```typescript
export function serverFactory() {
return new Server();
}
@@ -305,6 +481,7 @@ export function serverFactory() {
Beginning in version 5, the compiler automatically performs this rewritting while emitting the `.js` file.
+{@a function-calls}
### Limited function calls
The _collector_ can represent a function call or object creation with `new` as long as the syntax is valid. The _collector_ only cares about proper syntax.
@@ -330,7 +507,7 @@ module-local `const` declarations and initialized `var` and `let` declarations,
Consider the following component definition:
-```ts
+```typescript
const template = '{{hero.name}}';
@Component({
@@ -347,7 +524,7 @@ The compiler could not refer to the `template` constant because it isn't exporte
But the _collector_ can _fold_ the `template` constant into the metadata definition by inlining its contents.
The effect is the same as if you had written:
-```TypeScript
+```typescript
@Component({
selector: 'app-hero',
template: '{{hero.name}}'
@@ -361,7 +538,7 @@ There is no longer a reference to `template` and, therefore, nothing to trouble
You can take this example a step further by including the `template` constant in another expression:
-```TypeScript
+```typescript
const template = '{{hero.name}}';
@Component({
@@ -419,7 +596,7 @@ Decorated component class members must be public. You cannot make an `@Input()`
Data bound properties must also be public.
-```TypeScript
+```typescript
// BAD CODE - title is private
@Component({
selector: 'app-root',
@@ -471,7 +648,7 @@ methods that return an expression.
For example, consider the following function:
-```TypeScript
+```typescript
export function wrapInArray(value: T): T[] {
return [value];
}
@@ -481,7 +658,7 @@ You can call the `wrapInArray` in a metadata definition because it returns the v
You might use `wrapInArray()` like this:
-```TypeScript
+```typescript
@NgModule({
declarations: wrapInArray(TypicalComponent)
})
@@ -490,7 +667,7 @@ export class TypicalModule {}
The compiler treats this usage as if you had written:
-```TypeScript
+```typescript
@NgModule({
declarations: [TypicalComponent]
})
@@ -502,7 +679,9 @@ function; it can only contain a single `return` statement.
The Angular [`RouterModule`](api/router/RouterModule) exports two macro static methods, `forRoot` and `forChild`, to help declare root and child routes.
Review the [source code](https://github.com/angular/angular/blob/master/packages/router/src/router_module.ts#L139 "RouterModule.forRoot source code")
-for these methods to see how macros can simplify configuration of complex [NgModules](guide/ngmodule).
+for these methods to see how macros can simplify configuration of complex [NgModules](guide/ngmodules).
+
+{@a metadata-rewriting}
### Metadata rewriting
@@ -513,7 +692,7 @@ the compiler doesn't need to know the expression's value—it just needs to
You might write something like:
-```ts
+```typescript
class TypicalServer {
}
@@ -528,7 +707,7 @@ Without rewriting, this would be invalid because lambdas are not supported and `
To allow this, the compiler automatically rewrites this to something like:
-```ts
+```typescript
class TypicalServer {
}
@@ -1053,7 +1232,155 @@ This error can occur if you use an expression in the `extends` clause of a class
Chuck: After reviewing your PR comment I'm still at a loss. See [comment there](https://github.com/angular/angular/pull/17712#discussion_r132025495).
-->
+{@a binding-expresion-validation}
+ ## Phase 3: binding expression validation
+
+ In the validation phase, the Angular template compiler uses the TypeScript compiler to validate the
+ binding expressions in templates. Enable this phase explicity by adding the compiler
+ option `"fullTemplateTypeCheck"` in the `"angularCompilerOptions"` of the project's `tsconfig.json` (see
+ [Angular Compiler Options](#compiler-options)).
+
+ Template validation produces error messages when a type error is detected in a template binding
+ expression, similar to how type errors are reported by the TypeScript compiler against code in a `.ts`
+ file.
+
+ For example, consider the following component:
+
+ ```typescript
+ @Component({
+ selector: 'my-component',
+ template: '{{person.addresss.street}}'
+ })
+ class MyComponent {
+ person?: Person;
+ }
+ ```
+
+ This will produce the following error:
+
+ ```
+ my.component.ts.MyComponent.html(1,1): : Property 'addresss' does not exist on type 'Person'. Did you mean 'address'?
+ ```
+
+ The file name reported in the error message, `my.component.ts.MyComponent.html`, is a synthetic file
+ generated by the template compiler that holds contents of the `MyComponent` class template.
+ Compiler never writes this file to disk. The line and column numbers are relative to the template string
+ in the `@Component` annotation of the class, `MyComponent` in this case. If a component uses
+ `templateUrl` instead of `template`, the errors are reported in the HTML file refereneced by the
+ `templateUrl` instead of a synthetic file.
+
+ The error location is the beginning of the text node that contains the interpolation expression with
+ the error. If the error is in an attribute binding such as `[value]="person.address.street"`, the error
+ location is the location of the attribute that contains the error.
+
+ The validation uses the TypeScript type checker and the options supplied to the TypeScript compiler to control
+ how detailed the type validation is. For example, if the `strictTypeChecks` is specified, the error ```my.component.ts.MyComponent.html(1,1): : Object is possibly 'undefined'``` is reported as well as the above error message.
+
+ ### Type narrowing
+
+ The expression used in an `ngIf` directive is used to narrow type unions in the Angular
+ template compiler, the same way the `if` expression does in TypeScript. For example, to avoid
+ `Object is possibly 'undefined'` error in the template above, modify it to only emit the
+ interpolation if the value of `person` is initialized as shown below:
+
+ ```typescript
+ @Component({
+ selector: 'my-component',
+ template: ' {{person.addresss.street}} '
+ })
+ class MyComponent {
+ person?: Person;
+ }
+ ```
+
+ Using `*ngIf` allows the TypeScript compiler to infer that the `person` used in the
+ binding expression will never be `undefined`.
+
+ #### Custom `ngIf` like directives
+
+ Directives that behave like `*ngIf` can declare that they want the same treatment by including
+ a static member marker that is a signal to the template compiler to treat them
+ like `*ngIf`. This static member for `*ngIf` is:
+
+ ```typescript
+ public static ngIfUseIfTypeGuard: void;
+ ```
+
+ This declares that the input property `ngIf` of the `NgIf` directive should be treated as a
+ guard to the use of its template, implying that the template will only be instantiated if
+ the `ngIf` input property is true.
+
+
+ ### Non-null type assertion operator
+
+ Use the [non-null type assertion operator](guide/template-syntax#non-null-assertion-operator)
+ to suppress the `Object is possibly 'undefined'` error when it is incovienent to use
+ `*ngIf` or when some constraint in the component ensures that the expression is always
+ non-null when the binding expression is interpolated.
+
+ In the following example, the `person` and `address` properties are always set together,
+ implying that `address` is always non-null if `person` is non-null. There is no convenient
+ way to describe this constraint to TypeScript and the template compiler, but the error
+ is suppressed in the example by using `address!.street`.
+
+ ```typescript
+ @Component({
+ selector: 'my-component',
+ template: ' {{person.name}} lives on {{address!.street}} '
+ })
+ class MyComponent {
+ person?: Person;
+ address?: Address;
+
+ setData(person: Person, address: Address) {
+ this.person = person;
+ this.address = address;
+ }
+ }
+ ```
+
+ The non-null assertion operator should be used sparingly as refactoring of the component
+ might break this constraint.
+
+ In this example it is recommended to include the checking of `address`
+ in the `*ngIf`as shown below:
+
+ ```typescript
+ @Component({
+ selector: 'my-component',
+ template: ' {{person.name}} lives on {{address.street}} '
+ })
+ class MyComponent {
+ person?: Person;
+ address?: Address;
+
+ setData(person: Person, address: Address) {
+ this.person = person;
+ this.address = address;
+ }
+ }
+ ```
+
+ ### Disabling type checking using `$any()`
+
+ Disable checking of a binding expression by surrounding the expression
+ in a call to the [`$any()` cast pseudo-function](guide/template-syntax).
+ The compiler treats it as a cast to the `any` type just like in TypeScript when a ``
+ or `as any` cast is used.
+
+ In the following example, the error `Property addresss does not exist` is suppressed
+ by casting `person` to the `any` type.
+
+ ```typescript
+ @Component({
+ selector: 'my-component',
+ template: '{{$any(person).addresss.street}}'
+ })
+ class MyComponent {
+ person?: Person;
+ }
+ ```
## Summary
* What the AOT compiler does and why it is important.
@@ -1062,3 +1389,4 @@ Chuck: After reviewing your PR comment I'm still at a loss. See [comment there](
* Other restrictions on metadata definition.
* Macro-functions and macro-static methods.
* Compiler errors related to metadata.
+* Validation of binding expressions
diff --git a/aio/content/guide/api-page-class.md b/aio/content/guide/api-page-class.md
new file mode 100644
index 0000000000..989bd0f327
--- /dev/null
+++ b/aio/content/guide/api-page-class.md
@@ -0,0 +1,175 @@
+
+
+ Class Name
+
+
+Class description goes here. This is a short and to the point one or two sentence description that easily introduces the reader to the class.
+
+
+ Overview
+
+ class Compiler {
+ compileModuleSync<T>(moduleType: Type<T>): NgModuleFactory<T>
+ compileModuleAsync<T>(moduleType: Type<T>): Promise<NgModuleFactory<T>>
+ compileModuleAndAllComponentsSync<T>(moduleType: Type<T>): ModuleWithComponentFactories<T>
+ compileModuleAndAllComponentsAsync<T>(moduleType: Type<T>): Promise<ModuleWithComponentFactories<T>>
+ clearCache(): void
+ clearCacheFor(type: Type<any>)
+ }
+
+
+ Description
+ The longer class description goes here which can include multiple paragraphs.
+ Bacon ipsum dolor amet pork belly capicola sirloin venison alcatra ground round ham hock jowl turkey picanha bresaola pancetta brisket chicken fatback. Burgdoggen kevin salami jowl shoulder jerky leberkas meatball. Ham hock picanha burgdoggen pork belly rump bacon cupim. Bacon kielbasa sirloin shank strip steak ground round. Bresaola cow salami meatloaf pork chop leberkas flank turducken biltong meatball chuck pork tri-tip chicken. Ribeye corned beef shoulder, meatloaf strip steak jerky porchetta capicola alcatra ham.
+ Subclasses
+
+ See Also
+
+
+
+ Constructor
+
+
+ constructor(element: any, keyframes: {
+ [key: string]: string | number;
+ }[], duration: number, delay: number, easing: string, previousPlayers: any[])
+
+
+
+ Properties
+
+
+
+ Property
+ Type
+ Description
+
+
+
+
+
+ Property1
+
+ Description goes here
+
+
+
+ Property2
+
+ Type
+ Description goes here
+
+
+
+ Property3
+
+ Type
+ Description goes here
+
+
+
+
+
+ Methods
+
+
+
+ Method1Name( )
+
+
+
+
+
+ Description goes here
+
+ Bacon ipsum dolor amet pork belly capicola sirloin venison alcatra ground round ham hock jowl turkey picanha bresaola pancetta brisket chicken fatback. Burgdoggen kevin salami jowl shoulder jerky leberkas meatball. Ham hock picanha burgdoggen pork belly rump bacon cupim. Bacon kielbasa sirloin shank strip steak ground round. Bresaola cow salami meatloaf pork chop leberkas flank turducken biltong meatball chuck pork tri-tip chicken. Ribeye corned beef shoulder, meatloaf strip steak jerky porchetta capicola alcatra ham.
+
+
+
+
+
+
+
+ Method2Name( )
+
+
+
+
+
+ Description goes here
+
+ Declaration
+
+
+ class AnimationBuilder {build(animation: AnimationMetadata | AnimationMetadata[]): AnimationFactory}
+
+ Parameters
+ Returns
+ Returns information and results goes here.
+ Errors
+ Error information goes here
+
+ Further details provided as needed. Bacon ipsum dolor amet pork belly capicola sirloin venison alcatra ground round ham hock jowl turkey picanha bresaola pancetta brisket chicken fatback. Burgdoggen kevin salami jowl shoulder jerky leberkas meatball.
+ Overloads
+
+
+
+
+
+
+ constructor(element: any, keyframes: {
+ [key: string]: string | number;
+ }[], duration: number, delay: number, easing: string, previousPlayers: any[])
+
+
+ Description goes here
+
+
+
+
+
+ constructor(element: any, keyframes: {
+ [key: string]: string | number;
+ }[], duration: number, delay: number, easing: string, previousPlayers: any[])
+
+
+ Description goes here
+
+
+
+
+ Example: Descriptive Title of Method Example
+ Bacon ipsum dolor amet pork belly capicola sirloin venison alcatra ground round ham hock jowl turkey picanha bresaola pancetta brisket chicken fatback. Burgdoggen kevin salami jowl shoulder jerky leberkas meatball. Ham hock picanha burgdoggen pork belly rump bacon cupim. Bacon kielbasa sirloin shank strip steak ground round. Bresaola cow salami meatloaf pork chop leberkas flank turducken biltong meatball chuck pork tri-tip chicken. Ribeye corned beef shoulder, meatloaf strip steak jerky porchetta capicola alcatra ham.
+
+
+
+
+
+
+ Example: Descriptive Title of Combined Example Goes Here
+ Intro description text about what the example is and how it can be used.
+
+
+ constructor(element: any, keyframes: {
+ [key: string]: string | number;
+ }[], duration: number, delay: number, easing: string, previousPlayers: any[])
+
+ Further explanation provided as needed. Bacon ipsum dolor amet pork belly capicola sirloin venison alcatra ground round ham hock jowl turkey picanha bresaola pancetta brisket chicken fatback. Burgdoggen kevin salami jowl shoulder jerky leberkas meatball.
+
+
\ No newline at end of file
diff --git a/aio/content/guide/architecture.md b/aio/content/guide/architecture.md
index 95f0b1e257..fc60aa9b19 100644
--- a/aio/content/guide/architecture.md
+++ b/aio/content/guide/architecture.md
@@ -62,7 +62,8 @@ Angular apps are modular and Angular has its own modularity system called _NgMod
Angular 应用是模块化的，并且 Angular 有自己的模块系统，它被称为 _Angular 模块_或 _NgModules_。
NgModules are a big deal.
-This page introduces modules; the [NgModules](guide/ngmodule) page covers them in depth.
+This page introduces modules; the [NgModules](guide/ngmodules) pages
+relating to NgModules covers them in detail.
_Angular 模块_很重要。这里只是简单介绍，在 [Angular 模块](guide/ngmodule)中会做深入讲解。
@@ -242,7 +243,7 @@ Hang in there. The confusion yields to clarity with time and experience.
-Learn more from the [NgModules](guide/ngmodule) page.
+Learn more from the [NgModules](guide/ngmodules) page.
更多信息，见 [Angular 模块](guide/ngmodule)。
@@ -327,12 +328,12 @@ template for our `HeroListComponent`:
-Although this template uses typical HTML elements like `` and `
`, it also has some differences. Code like `*ngFor`, `{{hero.name}}`, `(click)`, `[hero]`, and `` uses Angular's [template syntax](guide/template-syntax).
+Although this template uses typical HTML elements like `` and `
`, it also has some differences. Code like `*ngFor`, `{{hero.name}}`, `(click)`, `[hero]`, and `` uses Angular's [template syntax](guide/template-syntax).
模板除了可以使用像``和`
`这样的典型的 HTML 元素，还能使用其它元素。
例如，像`*ngFor`、`{{hero.name}}`、`(click)`、`[hero]`和``这样的代码使用了 Angular 的[模板语法](guide/template-syntax)。
-In the last line of the template, the `` tag is a custom element that represents a new component, `HeroDetailComponent`.
+In the last line of the template, the `` tag is a custom element that represents a new component, `HeroDetailComponent`.
在模板的最后一行，``标签就是一个用来表示新组件`HeroDetailComponent`的自定义元素。
@@ -347,7 +348,7 @@ The `HeroDetailComponent` is a **child** of the `HeroListComponent`.
-Notice how `` rests comfortably among native HTML elements. Custom components mix seamlessly with native HTML in the same layouts.
+Notice how `` rests comfortably among native HTML elements. Custom components mix seamlessly with native HTML in the same layouts.
注意到了吗？``舒适地躺在原生 HTML 元素之间。
自定义组件和原生 HTML 在同一布局中融合得天衣无缝。
@@ -409,8 +410,8 @@ Here are a few of the most useful `@Component` configuration options:
* `selector`: CSS selector that tells Angular to create and insert an instance of this component
-where it finds a `` tag in *parent* HTML.
-For example, if an app's HTML contains `` tag in *parent* HTML.
+For example, if an app's HTML contains ``标签，创建并插入该组件。
diff --git a/aio/content/guide/attribute-directives.md b/aio/content/guide/attribute-directives.md
index ec0d81a8b3..54f1a78d69 100644
--- a/aio/content/guide/attribute-directives.md
+++ b/aio/content/guide/attribute-directives.md
@@ -94,7 +94,7 @@ CLI 会创建`src/app/highlight.directive.ts`及相应的测试文件（`.../spe
-_Directives_ must be declared in [Angular Modules](guide/ngmodule) in the same manner as _components_.
+_Directives_ must be declared in [Angular Modules](guide/ngmodules) in the same manner as _components_.
和**组件**一样，这些**指令**也必须在[Angular模块](guide/ngmodule)中进行声明。
diff --git a/aio/content/guide/bootstrapping.md b/aio/content/guide/bootstrapping.md
index e05317bda6..046555b18d 100644
--- a/aio/content/guide/bootstrapping.md
+++ b/aio/content/guide/bootstrapping.md
@@ -1,280 +1,180 @@
# Bootstrapping
-# 启动过程
+#### Prerequisites
-An Angular Module (NgModule) class describes how the application parts fit together.
-Every application has at least one Angular Module, the _root_ module
-that you [bootstrap](#main) to launch the application.
-You can call the class anything you want. The conventional name is `AppModule`.
+A basic understanding of the following:
+* [JavaScript Modules vs. NgModules](guide/ngmodule-vs-jsmodule).
-Angular 模块类描述应用的部件是如何组合在一起的。
-每个应用都至少有一个 Angular 模块，也就是*根*模块，用来[引导](#main)并运行应用。
-你可以为它取任何名字。常规名字是`AppModule`。
+
-The [**Angular CLI**](https://cli.angular.io/) produces a new project with the following minimal `AppModule`.
-You evolve this module as your application grows.
+An NgModule describes how the application parts fit together.
+Every application has at least one Angular module, the _root_ module
+that you bootstrap to launch the application.
+By convention, it is usually called `AppModule`.
+If you use the CLI to generate an app, the default `AppModule` is as follows:
-[开发环境](guide/setup)讲解了如何使用下面这个最小的`AppModule`来创建一个新项目。
-这个模块随着应用的成长而演变。
-
+```typescript
+/* JavaScript imports */
+import { BrowserModule } from '@angular/platform-browser';
+import { NgModule } from '@angular/core';
+import { FormsModule } from '@angular/forms';
+import { HttpModule } from '@angular/http';
+import { AppComponent } from './app.component';
-After the `import` statements, you come to a class adorned with the
-**`@NgModule`** [_decorator_](guide/glossary#decorator '"Decorator" explained').
+/* the AppModule class with the @NgModule decorator */
+@NgModule({
+ declarations: [
+ AppComponent
+ ],
+ imports: [
+ BrowserModule,
+ FormsModule,
+ HttpModule
+ ],
+ providers: [],
+ bootstrap: [AppComponent]
+})
+export class AppModule { }
-`import`语句之后，可以看到一个**`@NgModule`**[装饰器](guide/glossary#decorator '"Decorator" explained')修饰的类。
+```
+
+After the import statements is a class with the
+**`@NgModule`** [decorator](guide/glossary#decorator '"Decorator" explained').
The `@NgModule` decorator identifies `AppModule` as an `NgModule` class.
-`@NgModule` takes a _metadata_ object that tells Angular how to compile and launch the application.
+`@NgModule` takes a metadata object that tells Angular how to compile and launch the application.
-`@NgModule`装饰器将`AppModule`标记为 Angular 模块类（也叫`NgModule`类）。
-`@NgModule`接受一个_元数据_对象，告诉 Angular 如何编译和启动应用。
+* **_declarations_**—this application's lone component.
+* **_imports_**—import `BrowserModule` to have browser specific services such as DOM rendering, sanitization, and location.
+* **_providers_**—the service providers.
+* **_bootstrap_**—the _root_ component that Angular creates and inserts
+into the `index.html` host web page.
-The `@NgModule` properties for the minimal `AppModule` generated by the CLI are as follows:
-
-在 CLI 生成的初始 `AppModule`中，`@NgModule` 包括下列属性：
-
-* **[_declarations_](#declarations)** — declares the application components. At the moment, there is only the `AppComponent`.
-
- **[_declarations_](#declarations)** —— 声明该应用的组件，刚创建时只有一个`AppComponent`。
-
-* **[_imports_](#imports)** — the `BrowserModule`, which this and every application must import in order to run the app in a browser.
-
- **[_imports_](#imports)** —— `BrowserModule`，每个应用都必须引入它，以便在浏览器中运行该应用。
-
-* **[_providers_](#providers)** — there are none to start but you are likely to add some soon.
-
- **[_providers_](#providers)** —— 开始时它是空的，不过你可能很快就会添加一个了。
-
-* **[_bootstrap_](#bootstrap-array)** — the _root_ `AppComponent` that Angular creates and inserts into the `index.html` host web page.
-
- **_bootstrap_** — _根_组件 `AppComponent`，Angular 创建它并把它插入到`index.html`宿主页面。
-
-The [Angular Modules (NgModules)](guide/ngmodule) guide dives deeply into the details of `@NgModule`.
-All you need to know at the moment is a few basics about these four properties.
-
-[Angular 模块 (NgModules)](guide/ngmodule) 指南深入讲解了 Angular 模块。
-现在先初步了解这三个属性。
+The default CLI application only has one component, `AppComponent`, so it
+is in both the `declarations` and the `bootstrap` arrays.
{@a declarations}
+## The `declarations` array
-### The _declarations_ array
+The module's `declarations` array tells Angular which components belong to that module.
+As you create more components, add them to `declarations`.
-### _declarations_ 数组
+You must declare every component in exactly one `NgModule` class.
+If you use a component without declaring it, Angular returns an
+error message.
-You tell Angular which components belong to the `AppModule` by listing it in the module's `declarations` array.
-As you create more components, you'll add them to `declarations`.
+The `declarations` array only takes declarables. Declarables
+are components, [directives](guide/attribute-directives) and [pipes](guide/pipes).
+All of a module's declarables must be in the `declarations` array.
+Declarables must belong to exactly one module. The compiler emits
+an error if you try to declare the same class in more than one module.
-通过把组件添加到模块的 `declarations` 数组中，我们会告诉 Angular 哪些组件属于这个 `AppModule`。创建更多组件时，我们也要把它们添加到 `declarations` 中。
+These declared classes are visible within the module but invisible
+to components in a different module unless they are exported from
+this module and the other module imports this one.
-You must declare _every_ component in an Angular Module class.
-If you use a component without declaring it, you'll see a clear error message in the browser console.
+An example of what goes into a declarations array follows:
-我们必须把 **每个** 组件都声明到某个 Angular 的模块类中，否则就会在浏览器的控制台中看到一个明确的错误信息。
+```typescript
+ declarations: [
+ YourComponent,
+ YourPipe,
+ YourDirective
+ ],
+```
-You'll learn to create two other kinds of classes —
-[directives](guide/attribute-directives) and [pipes](guide/pipes) —
-that you must also add to the `declarations` array.
+A declarable can only belong to one module, so only declare it in
+one `@NgModule`. When you need it elsewhere,
+import the module that has the declarable you need in it.
-我们后面要学的另外两种类（[指令](guide/attribute-directives)和[管道](guide/pipes)）也同样必须添加到`declarations`数组中。
+**Only `@NgModule` references** go in the `imports` array.
-
-**Only _declarables_** — _components_, _directives_ and _pipes_ — belong in the `declarations` array.
-Do not put any other kind of class in `declarations`. Do _not_ declare `NgModule` classes. Do _not_ declare service classes. Do _not_ declare model classes.
+### Using directives with `@NgModule`
+
+Use the `declarations` array for directives.
+To use a directive, component, or pipe in a module, you must do a few things:
+
+1. Export it from the file where you wrote it.
+2. Import it into the appropriate module.
+3. Declare it in the `@NgModule` `declarations` array.
+
+
+Those three steps look like the following. In the file where you create your directive, export it.
+The following example, named `ItemDirective` is the default directive structure that the CLI generates in its own file, `item.directive.ts`:
+
+
+
+
+The key point here is that you have to export it so you can import it elsewhere. Next, import it
+into the NgModule, in this example `app.module.ts`, with a JavaScript import statement:
+
+
+
+
+And in the same file, add it to the `@NgModule` `declarations` array:
+
+
+
+
+
+Now you could use your `ItemDirective` in a component. This example uses `AppModule`, but you'd do it the same way for a feature module. For more about directives, see [Attribute Directives](guide/attribute-directives) and [Structural Directives](guide/structural-directives). You'd also use the same technique for [pipes](guide/pipes) and components.
+
+Remember, components, directives, and pipes belong to one module only. You only need to declare them once in your app because you share them by importing the necessary modules. This saves you time and helps keep your app lean.
+
-**只有“可声明的类”（组件、指令和管道）能添加到`declarations`数组中。
-其它类型的类都不要往里放。**不要**添加`NgModule`。不要添加服务类。不要添加模型类。
-
{@a imports}
-### The _imports_ array
+## The `imports` array
-### _imports_ 数组
+The module's `imports` array appears exclusively in the `@NgModule` metadata object.
+It tells Angular about other NgModules that this particular module needs to function properly.
-Angular Modules are a way to consolidate features that belong together into discrete units.
-Many features of Angular itself are organized as Angular Modules.
-HTTP services are in the `HttpClientModule`. The router is in the `RouterModule`.
-Eventually you may create your own modules.
-
-Angular 模块把特性合并成离散单元的一种方式。
-Angular 自身的许多特性也是通过 Angular 模块组织的。
-HTTP 服务在`HttpClientModule`里。路由器在`RouterModule`中。
-最终，我们还可能创建自己的模块。
-
-Add a module to the `imports` array when the application requires its features.
-
-当应用需要模块的特性时，将其添加到`imports`数组中。
-
-_This_ application, like most applications, executes in a browser.
-Every application that executes in a browser needs the `BrowserModule` from `@angular/platform-browser`.
-So every such application includes the `BrowserModule` in its _root_ `AppModule`'s `imports` array.
-Other guide pages will tell you when you need to add additional modules to this array.
-
-_这个_应用和大多数其他应用一样，在浏览器中运行。
-每个浏览器中运行的应用都需要`@angular/platform-browser`里的`BrowserModule`。
-所以每个这样的应用都在其_根_`AppModule`的`imports`数组中包含`BrowserModule`。
-在需要添加额外模块到此数组时，其他指南和烹饪宝典页面会告诉你。
-
-
-
-
-
-**Only `@NgModule` classes** go in the `imports` array. Do not put any other kind of class in `imports`.
-
-`imports`数组中应该**只有`NgModule`类**。不要放置其它类型的类。
-
-
-
-
-The `import` statements at the top of the file and the NgModule's `imports` array
-are unrelated and have completely different jobs.
-
-不要将 Angular 模块的`imports`数组与文件顶部的`import`语句弄混淆了。它们的功能不同。
-
-The _JavaScript_ `import` statements give you access to symbols _exported_ by other files
-so you can reference them within _this_ file.
-You add `import` statements to almost every application file.
-They have nothing to do with Angular and Angular knows nothing about them.
-
-_JavaScript_ 的`import`声明允许你访问在其他文件中_导出_的符号，这样你可以在_当前_文件引用它们。
-我们会往几乎所有类型的应用中加入`import`语句。
-它们与 Angular 毫无关系，Angular 对它们也一无所知。
-
-The _module's_ `imports` array appears _exclusively_ in the `@NgModule` metadata object.
-It tells Angular about specific _other_ Angular Modules—all of them classes decorated
-with `@NgModule`—that the application needs to function properly.
-
-_模块_的`imports`数组是`@NgModule`元数据中*独有的*。它告诉 Angular 特定 Angular 模块的信息 — 用`@NgModule`装饰的类 — 应用需要它们来正常工作。
-
-
-
-{@a providers}
-
-### The _providers_ array
-
-### _providers_ 数组
-
-Angular apps rely on [_dependency injection (DI)_](guide/dependency-injection)
-to deliver services to various parts of the application.
-
-Angular 应用靠 [_依赖注入（DI）_](guide/dependency-injection) 机制为应用中的各个部件提供服务。
-
-Before DI can inject a service, it must create that service with the help of a _provider_.
-You can tell DI about a service's _provider_ in a number of ways.
-Among the most popular ways is to register the service in the root `ngModule.providers` array, which will make that service available _everywhere_.
-
-要想注入一个服务，就要先在**服务提供商（provider）**的帮助下创建这个服务。
-我们可以用多种方式告诉 DI 某个服务的提供商是谁。
-最常见的方式是在根模块的`ngModule.providers`数组中注册这个服务。这样一来，这个服务就**在哪里**都可以用了。
-
-For example, a data service provided in the `AppModule`s _providers_ can be injected into any
-component anywhere in the application.
-
-比如，在根模块 `AppModule` 的 _providers_ 数组中提供的数据服务可以被注入到该应用中任意地方的任意组件中。
+This list of modules are those that export components, directives, or pipes
+that the component templates in this module reference. In this case, the component is
+`AppComponent`, which references components, directives, or pipes in `BrowserModule`,
+`FormsModule`, or `HttpModule`.
+A component template can reference another component, directive,
+or pipe when the referenced class is declared in this module or
+the class was imported from another module.
You don't have any services to provide yet.
But you will create some before long and you may chose to provide many of them here.
-我们还没有提供任何服务，但是很快就会创建一些，而且可能也会选择在这里提供它们。
-
{@a bootstrap-array}
-### The _bootstrap_ array
+## The `providers` array
-### _bootstrap_ 数组
+The providers array is where you list the services the app needs. When
+you list services here, they are available app-wide. You can scope
+them when using feature modules and lazy loading. For more information, see
+[Providers](guide/providers).
-You launch the application by [_bootstrapping_](#main) the root `AppModule`.
-Among other things, the _bootstrapping_ process creates the component(s) listed in the `bootstrap` array
+## The `bootstrap` array
+
+The application launches by bootstrapping the root `AppModule`, which is
+also referred to as an `entryComponent`.
+Among other things, the bootstrapping process creates the component(s) listed in the `bootstrap` array
and inserts each one into the browser DOM.
-通过[_引导_](#main)根`AppModule`来启动应用。
-在启动过程中，其中一步是创建列在`bootstrap`数组的组件，
-并将它们每一个都插入到浏览器的DOM中。
-
Each bootstrapped component is the base of its own tree of components.
-Inserting a bootstrapped component usually triggers a cascade of component creations that fill out that tree.
+Inserting a bootstrapped component usually triggers a cascade of
+component creations that fill out that tree.
-每个被引导的组件都是它自己的组件树的根。
-插入一个被引导的组件通常触发一系列组件的创建并形成组件树。
+While you can put more than one component tree on a host web page,
+most applications have only one component tree and bootstrap a single root component.
-While you can put more than one component tree on a host web page, that's not typical.
-Most applications have only one component tree and they bootstrap a single _root_ component.
+This one root component is usually called `AppComponent` and is in the
+root module's `bootstrap` array.
-虽然你可以将多个组件树插入到宿主页面，但并不普遍。
-大多数应用只有一个组件树，它们引导单一_根_组件。
-You can call the one _root_ component anything you want but most developers call it `AppComponent`.
-
-你可以为这个_根_组件取任何名字，但是大多数程序员将其取名为`AppComponent`。
-
-Which brings us to the _bootstrapping_ process itself.
-
-下面让我们来看看*引导*过程本身。
-
-{@a main}
-
-## Bootstrap in _main.ts_
-
-## 在 _main.ts_ 中引导
-
-While there are many ways to bootstrap an application, most applications do so in the `src/main.ts` that is generated by the Angular CLI.
-
-虽然有很多方式来引导应用，不过大多数应用还是选择在 Angular CLI 生成的 `src/main.ts` 中进行引导。
-
-
-
-
-This code creates a browser platform for dynamic compilation and
-bootstraps the `AppModule` described above.
-
-上面的代码为动态 (JiT) 编译创建浏览器平台，并引导上面提到的`AppModule`。
-
-The _bootstrapping_ process sets up the execution environment,
-digs the _root_ `AppComponent` out of the module's `bootstrap` array,
-creates an instance of the component and inserts it within the element tag identified by the component's `selector`.
-
-引导过程搭建运行环境，从模块的`bootstrap`数组中提出_根_`AppComponent`， 创建该组件的实例，并将其插入到组件`selector`标识的元素标签中。
-
-The `AppComponent` selector — here and in most documentation samples — is `app-root`
-so Angular looks for a `` tag in the `index.html` like this one ...
-
-`AppComponent`选择器 — 在这里以及文档大部分例子中 — 是`my-app`，
-所以 Angular 在`index.html`中查找像这样的``标签...
-
-
-
- <body>
- <app-root></app-root>
- </body>
-
-
-
-... and displays the `AppComponent` there.
-
-...然后在那儿显示`AppComponent`。
-
-The `main.ts` file is very stable. Once you've set it up, you may never change it again.
-
-The `main.ts` 文件非常稳定，一旦配置好，可能永远都不会再修改它。
## More about Angular Modules
-## 关于Angular模块的更多知识
-
-Your initial app has only a single module, the _root_ module.
-As your app grows, you'll consider subdividing it into multiple "feature" modules,
-some of which can be loaded later ("lazy loaded") if and when the user chooses
-to visit those features.
-
-你最初的应用只有一个单一的模块 —— *根*模块。
-当这个应用不断成长时，你就要考虑把它们拆分到多个 "特性" 模块中了。
-这些特性模块中的一部分可以稍后加载（即惰性加载），它们只会在用户访问到这些特性时才会加载。
-
-When you're ready to explore these possibilities, visit the [Angular Modules](guide/ngmodule) guide.
-
-如果你要了解这些知识，请访问[Angular 模块 (NgModule)](guide/ngmodule)页
\ No newline at end of file
+For more on NgModules you're likely to see frequently in apps,
+see [Frequently Used Modules](#).
diff --git a/aio/content/guide/browser-support.md b/aio/content/guide/browser-support.md
index df1cd8dc83..c2cea558c2 100644
--- a/aio/content/guide/browser-support.md
+++ b/aio/content/guide/browser-support.md
@@ -11,199 +11,100 @@ Angular 支持大多数常用浏览器，包括下列版本：
-
+
+ Browser
+
+
+
+ Supported versions
+
+
+
+
+
+
+
Chrome
-
+
-
+
+
+
+ latest
+
+
+
+ 最新版
+
+
+
+
+
+
+
+
Firefox
-
+
-
+
+ latest
+
+
+
+
+
+
Edge
-
+
-
+
+ 2 most recent major versions
+
+
+
+
IE
-
-
-
- Safari
-
-
-
- iOS
-
-
-
- Android
-
-
-
+
+
+ 11
10
9
+
+
+
+
+
IE Mobile
-
-
-
-
-
-
-
-
-
- latest
-
-
-
- 最新版
-
-
-
-
-
-
- latest
-
-
-
- 最新版
-
-
-
-
-
- 14
-
-
11
-
-
- 10
-
-
-
- 10
-
-
-
- Nougat (7.0)
Marshmallow (6.0)
-
-
-
- 11
-
-
+
+
+ Safari
+
+
+ 2 most recent major versions
+
+
-
-
+ iOS
-
+ 2 most recent major versions
-
-
- 13
-
-
-
- 10
-
-
-
- 9
-
-
-
- 9
-
-
-
- Lollipop
(5.0, 5.1)
-
-
-
-
-
-
-
-
+
-
-
+ Android
-
+ Nougat (7.0)
Marshmallow (6.0)
Lollipop (5.0, 5.1)
KitKat (4.4)
-
-
-
-
-
-
- 9
-
-
-
- 8
-
-
-
- 8
-
-
-
- KitKat
(4.4)
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- 7
-
-
-
- 7
-
-
-
- Jelly Bean
(4.1, 4.2, 4.3)
-
-
-
-
-
-
-
+
@@ -261,26 +162,23 @@ This file incorporates the mandatory and many of the optional polyfills as JavaS
这个文件把强制的和很多可选的填充脚本组织成 JavaScript 的 `import` 语句。
-The npm packages for the _mandatory_ polyfills (such as `zone.js`) were installed automatically for you when you created your project and
-their corresponding `import` statements are ready to go.
-You probably won't touch these.
+The npm packages for the _mandatory_ polyfills (such as `zone.js`) were installed automatically for you when you created your project and their corresponding `import` statements are ready to go. You probably won't touch these.
**强制性** 填充脚本（如`zone.js`）的npm 包在创建工程时就已经自动安装了，相应的 `import` 语句也都加好了。我们一般不用动它们。
-But if you need an optional polyfill, you'll have to install its npm package with `npm` or `yarn`.
-For example, [if you need the web animations polyfill](http://caniuse.com/#feat=web-animation),
-you could install it with either of the following commands:
+But if you need an optional polyfill, you'll have to install its npm package.
+For example, [if you need the web animations polyfill](http://caniuse.com/#feat=web-animation), you could install it with `npm`, using the following command (or the `yarn` equivalent):
但是如果要用一个可选的填充库，就要通过 `npm` 或 `yarn` 来安装它们的 npm 包了。
比如，[如果你需要 web 动画的填充脚本](http://caniuse.com/#feat=web-animation)，就要通过下列命令之一来安装它：
+ # note that the web-animations-js polyfill is only here as an example
+ # it isn't a strict requirement of Angular anymore (more below)
npm install --save web-animations-js
- yarn add web-animations-js
-Then open the `polyfills.ts` file and un-comment the corresponding `import` statement
-as in the following example:
+Then open the `polyfills.ts` file and un-comment the corresponding `import` statement as in the following example:
然后打开 `polyfills.ts` 文件，并反注释对应的 `import` 语句，就像这样：
@@ -292,7 +190,7 @@ as in the following example:
import 'web-animations-js'; // Run `npm install --save web-animations-js`.
-If you can't find the polyfill you want in `polyfills.ts`,
+If you can't find the polyfill you want in `polyfills.ts`,
add it yourself, following the same pattern:
如果在 `polyfills.ts` 中找不到要使用的填充脚本，就可以仿照下列模式自行添加它：
@@ -363,6 +261,7 @@ These are the polyfills required to run an Angular application on each supported
[ES7/reflect](guide/browser-support#core-es7-reflect) (JIT only)
+
@@ -375,8 +274,8 @@ These are the polyfills required to run an Angular application on each supported
-
[ES6](guide/browser-support#core-es6)
+
@@ -389,7 +288,6 @@ These are the polyfills required to run an Angular application on each supported
-
[ES6
classList](guide/browser-support#classlist)
@@ -408,7 +306,7 @@ Some features of Angular may require additional polyfills.
有些 Angular 特性可能需要额外的填充库。
For example, the animations library relies on the standard web animation API, which is only available in Chrome and Firefox today.
-You'll need a polyfill to use animations in other browsers.
+(note that the dependency of web-animations-js in Angular is only necessary if `AnimationBuilder` is used.)
例如，动画库依赖于标准的 web 动画 API，目前它只在 Chrome 和 Firefox 上可用。你可能需要一个填充库来在其它浏览器上使用动画功能。
@@ -448,7 +346,8 @@ Here are the features which may require additional polyfills:
- [JIT compilation](guide/aot-compiler).
+ [JIT compilation](guide/aot-compiler).
+
Required to reflect for metadata.
[JIT 编译](guide/aot-compiler) 需要 reflect 来提供元数据。
@@ -458,13 +357,11 @@ Here are the features which may require additional polyfills:
[ES7/reflect](guide/browser-support#core-es7-reflect)
-
- All current browsers.
- Enabled by default.
- Can remove If you always use AOT and only use Angular decorators.
+ All current browsers. Enabled by default.
+ Can remove if you always use AOT and only use Angular decorators.
默认对目前的所有浏览器都启用了。如果总是使用 AOT 模式，并且只使用 Angular 自带的装饰器，那么可以移除它。
@@ -480,22 +377,25 @@ Here are the features which may require additional polyfills:
[动画](guide/animations)
+
Only if `Animation Builder` is used within the application--standard
+ animation support in Angular doesn't require any polyfills (as of NG6).
+
+
只有在应用中用到了 `Animation Builder` 时才需要；Angular 标准的动画支持是不需要任何填充库的（截至 NG6）。
+
-
[Web Animations](guide/browser-support#web-animations)
[Web 动画](guide/browser-support#web-animations)
-
- All but Chrome and Firefox
Not supported in IE9
+ If AnimationBuilder is used then the polyfill will enable scrubbing
+ support for IE/Edge and Safari (Chrome and Firefox support this natively).
- 除 Chrome 和 Firefox 外的所有，但不支持 IE9
-
+ 如果使用了AnimationBuilder，那么填充库将为 IE/Edge 和 Safari 启用擦除（scrubbing）支持（Chrome 和 Firefox 原生支持此特性）
@@ -504,17 +404,24 @@ Here are the features which may require additional polyfills:
- If you use the following deprecated i18n pipes: [date](api/common/DeprecatedDatePipe), [currency](api/common/DeprecatedCurrencyPipe), [decimal](api/common/DeprecatedDecimalPipe) and [percent](api/common/DeprecatedPercentPipe)
-
+ If you use the following deprecated i18n pipes:
+
如果你使用下列已废弃的i18n管道：
- [date](api/common/DeprecatedDatePipe)、[currency](api/common/DeprecatedCurrencyPipe)、[decimal](api/common/DeprecatedDecimalPipe) 和 [percent](api/common/DeprecatedPercentPipe)
+
+ [date](api/common/DeprecatedDatePipe),
+
+ [currency](api/common/DeprecatedCurrencyPipe),
+
+ [decimal](api/common/DeprecatedDecimalPipe),
+
+ [percent](api/common/DeprecatedPercentPipe)
-
[Intl API](guide/browser-support#intl)
+
@@ -530,15 +437,17 @@ Here are the features which may require additional polyfills:
- [NgClass](api/common/NgClass) on SVG elements
+ [NgClass](api/common/NgClass)
+
+ on SVG elements
在 SVG 元素上应用 [NgClass](api/common/NgClass)
-
[classList](guide/browser-support#classlist)
+
@@ -551,7 +460,9 @@ Here are the features which may require additional polyfills:
- [Http](guide/http) when sending and receiving binary data
+ [Http](guide/http)
+
+ when sending and receiving binary data
用 [Http](guide/http) 发送和接收二进制数据
@@ -560,8 +471,11 @@ Here are the features which may require additional polyfills:
[Typed Array](guide/browser-support#typedarray)
+
[Blob](guide/browser-support#blob)
+
[FormData](guide/browser-support#formdata)
+
@@ -575,7 +489,9 @@ Here are the features which may require additional polyfills:
### Suggested polyfills ##
+
### 建议的填充库 ##
+
Below are the polyfills which are used to test the framework itself. They are a good starting point for an application.
下表中是用来测试框架本身的填充库，它们是应用程序的优质起点。
@@ -628,6 +544,7 @@ Below are the polyfills which are used to test the framework itself. They are a
ES7/reflect
+
@@ -643,7 +560,9 @@ Below are the polyfills which are used to test the framework itself. They are a
+
ES6
+
@@ -659,7 +578,9 @@ Below are the polyfills which are used to test the framework itself. They are a
+
classList
+
@@ -683,7 +604,9 @@ Below are the polyfills which are used to test the framework itself. They are a
+
Intl
+
@@ -699,7 +622,7 @@ Below are the polyfills which are used to test the framework itself. They are a
- Web Animations
+ Web Animations
@@ -715,7 +638,9 @@ Below are the polyfills which are used to test the framework itself. They are a
+
Typed Array
+
@@ -731,7 +656,9 @@ Below are the polyfills which are used to test the framework itself. They are a
+
Blob
+
@@ -747,7 +674,9 @@ Below are the polyfills which are used to test the framework itself. They are a
+
FormData
+
@@ -763,7 +692,6 @@ Below are the polyfills which are used to test the framework itself. They are a
-
\* Figures are for minified and gzipped code,
computed with the closure compiler.
@@ -772,7 +700,7 @@ computed with the closure co
## 不使用 CLI 的用户的填充库
-If you aren't using the CLI, you should add your polyfill scripts directly to the host web page (`index.html`), perhaps like this.
+If you are not using the CLI, you should add your polyfill scripts directly to the host web page (`index.html`), perhaps like this.
如果你不使用 CLI，就要直接把填充库添加到宿主页（`index.html`）中，就像这样：
@@ -780,10 +708,24 @@ If you aren't using the CLI, you should add your polyfill scripts directly to th
<!-- pre-zone polyfills -->
<script src="node_modules/core-js/client/shim.min.js"></script>
<script src="node_modules/web-animations-js/web-animations.min.js"></script>
+ <script>
+ /**
+ * you can configure some zone flags which can disable zone interception for some
+ * asynchronous activities to improve startup performance - use these options only
+ * if you know what you are doing as it could result in hard to trace down bugs..
+ */
+ // __Zone_disable_requestAnimationFrame = true; // disable patch requestAnimationFrame
+ // __Zone_disable_on_property = true; // disable patch onProperty such as onclick
+ // __zone_symbol__BLACK_LISTED_EVENTS = ['scroll', 'mousemove']; // disable patch specified eventNames
+ /*
+ * in IE/Edge developer tools, the addEventListener will also be wrapped by zone.js
+ * with the following flag, it will bypass `zone.js` patch for IE/Edge
+ */
+ // __Zone_enable_cross_context_check = true;
+ </script>
<!-- zone.js required by Angular -->
<script src="node_modules/zone.js/dist/zone.js"></script>
<!-- application polyfills -->
-
diff --git a/aio/content/guide/change-log.md b/aio/content/guide/change-log.md
index 2f7425e5d8..fa1497c134 100644
--- a/aio/content/guide/change-log.md
+++ b/aio/content/guide/change-log.md
@@ -174,7 +174,7 @@ HTTP guide.
## 测试：添加了组件测试的plunker范例 (2016-12-02)
Added two plunkers that each test _one simple component_ so you can write a component test plunker of your own: one for the QuickStart seed's `AppComponent` and another for the Testing guide's `BannerComponent`.
-Linked to these plunkers in [Testing](guide/testing#live-examples) and [Setup anatomy](guide/setup-systemjs-anatomy) guides.
+Linked to these plunkers in "Testing" and "Setup anatomy" guides.
添加了两个plunker例子，每个都测试一个简单的组件，以便你可以自己在plunker中写组件测试：一个 用于测试快速起步中的`AppComponent`，另一个 用于测试“测试”章节的`BannerComponent`。
并在[测试](guide/testing#live-examples)和[环境设置剖析](guide/setup-systemjs-anatomy)中链接到它们。
@@ -244,16 +244,17 @@ The documentation for the version prior to v.2.2.0 has been removed.
## 在“从TypeScript到JavaScript”增加ES6的描述 (2016-11-14)
-The updated TypeScript to JavaScript guide (removed August 2017, PR #18694)
-explains how to write apps in ES6/7
+The updated TypeScript to JavaScript guide explains how to write apps in ES6/7
更新了“[从TypeScript到JavaScript](guide/ts-to-js)”烹饪宝典，解释如何使用ES6/7编写应用
-
by translating the common idioms in the TypeScript documentation examples
(and elsewhere on the web) to ES6/7 and ES5.
将TypeScript文档示例中（以及网站其它地方）的习惯用法翻译成ES6/7和ES5。
+This was [removed in August 2017](https://github.com/angular/angular/pull/18694) but can still be
+viewed in the [v2 documentation](https://v2.angular.io/docs/ts/latest/cookbook/ts-to-js.html).
+
## Sync with Angular v.2.1.1 (2016-10-21)
## 与Angular v.2.1.1 同步(2016-10-21)
@@ -360,7 +361,7 @@ The _Routing Module_ replaces the previous _routing object_ involving the `Modul
All guided samples with routing use the _Routing Module_ and prose content has been updated,
most conspicuously in the
-[NgModule](guide/ngmodule) guide and [NgModule FAQ](guide/ngmodule-faq) guide.
+[NgModule](guide/ngmodules) guide and [NgModule FAQ](guide/ngmodule-faq) guide.
所有使用路由的例子都使用**路由模块**，相关内容也被更新。更新最多的是[Angular模块（NgModule）](guide/ngmodule)章和[Angular模块常见问题](guide/ngmodule-faq)烹饪书。
diff --git a/aio/content/guide/cheatsheet.md b/aio/content/guide/cheatsheet.md
index 570eaae499..3c43d6e33b 100644
--- a/aio/content/guide/cheatsheet.md
+++ b/aio/content/guide/cheatsheet.md
@@ -178,6 +178,11 @@ is available to declarations of this module.
根据 map 中的 value 是否为真，来决定该元素上是否出现与 name 对应的 CSS 类。右侧的表达式应该返回一个形如 {class-name: true/false} 的 map。
+
+<div [ngStyle]="{'property': 'value'}">
<div [ngStyle]="dynamicStyles()">Allows you to assign styles to an HTML element using CSS. You can use CSS directly, as in the first example, or you can call a method from the component.
+
diff --git a/aio/content/guide/comparing-observables.md b/aio/content/guide/comparing-observables.md
new file mode 100644
index 0000000000..9cb663cd56
--- /dev/null
+++ b/aio/content/guide/comparing-observables.md
@@ -0,0 +1,313 @@
+# Observables compared to other techniques
+
+You can often use observables instead of promises to deliver values asynchronously. Similarly, observables can take the place of event handlers. Finally, because observables deliver multiple values, you can use them where you might otherwise build and operate on arrays.
+
+Observables behave somewhat differently from the alternative techniques in each of these situations, but offer some significant advantages. Here are detailed comparisons of the differences.
+
+## Observables compared to promises
+
+Observables are often compared to promises. Here are some key differences:
+
+* Observables are declarative; computation does not start until subscription. Promises execute immediately on creation. This makes observables useful for defining recipes that can be run whenever you need the result.
+
+* Observables provide many values. Promises provide one. This makes observables useful for getting multiple values over time.
+
+* Observables differentiate between chaining and subscription. Promises only have `.then()` clauses. This makes observables useful for creating complex transformation recipes to be used by other part of the system, without causing the work to be executed.
+
+* Observables `subscribe()` is responsible for handling errors. Promises push errors to the child promises. This makes observables useful for centralized and predictable error handling.
+
+
+### Creation and subscription
+
+* Observables are not executed until a consumer subcribes. The `subscribe()` executes the defined behavior once, and it can be called again. Each subscription has its own computation. Resubscription causes recomputation of values.
+
+
+// declare a publishing operation
+new Observable((observer) => { subscriber_fn });
+// initiate execution
+observable.subscribe(() => {
+ // observer handles notifications
+ });
+
+
+* Promises execute immediately, and just once. The computation of the result is initiated when the promise is created. There is no way to restart work. All `then` clauses (subscriptions) share the same computation.
+
+
+// initiate execution
+new Promise((resolve, reject) => { executer_fn });
+// handle return value
+promise.then((value) => {
+ // handle result here
+ });
+
+
+### Chaining
+
+* Observables differentiate between transformation function such as a map and subscription. Only subscription activates the subscriber function to start computing the values.
+
+
+observable.map((v) => 2*v);
+
+
+* Promises do not differentiate between the last `.then` clauses (equivalent to subscription) and intermediate `.then` clauses (equivalent to map).
+
+
+promise.then((v) => 2*v);
+
+
+### Cancellation
+
+* Observable subscriptions are cancellable. Unsubscribing removes the listener from receiving further values, and notifies the subscriber function to cancel work.
+
+
+const sub = obs.subscribe(...);
+sub.unsubscribe();
+
+
+* Promises are not cancellable.
+
+### Error handling
+
+* Observable execution errors are delivered to the subscriber's error handler, and the subscriber automatically unsubscribes from the observable.
+
+
+obs.subscribe(() => {
+ throw Error('my error');
+});
+
+
+* Promises push errors to the child promises.
+
+
+promise.then(() => {
+ throw Error('my error');
+});
+
+
+### Cheat sheet
+
+The following code snippets illustrate how the same kind of operation is defined using observables and promises.
+
+
+
+ Operation
+ Observable
+ Promise
+
+
+ Creation
+
+ new Observable((observer) => {
+ observer.next(123);
+});
+
+
+ new Promise((resolve, reject) => {
+ resolve(123);
+});
+
+
+
+ Transform
+ obs.map((value) => value * 2 );
promise.then((value) => value * 2);
+
+ Subscribe
+
+ sub = obs.subscribe((value) => {
+ console.log(value)
+});
+
+
+ promise.then((value) => {
+ console.log(value);
+});
+
+
+
+ Unsubscribe
+ sub.unsubscribe();
Implied by promise resolution.
+
+
+
+## Observables compared to events API
+
+Observables are very similar to event handlers that use the events API. Both techniques define notification handlers, and use them to process multiple values delivered over time. Subscribing to an observable is equivalent to adding an event listener. One significant difference is that you can configure an observable to transform an event before passing the event to the handler.
+
+Using observables to handle events and asynchronous operations can have the advantage of greater consistency in contexts such as HTTP requests.
+
+Here are some code samples that illustrate how the same kind of operation is defined using observables and the events API.
+
+
+
+ Observable
+ Events API
+
+
+ Creation & cancellation
+
+// Setup
+let clicks$ = fromEvent(buttonEl, ‘click’);
+// Begin listening
+let subscription = clicks$
+ .subscribe(e => console.log(‘Clicked’, e))
+// Stop listening
+subscription.unsubscribe();
+
+
+function handler(e) {
+ console.log(‘Clicked’, e);
+}
+
+// Setup & begin listening
+button.addEventListener(‘click’, handler);
+// Stop listening
+button.removeEventListener(‘click’, handler);
+
+
+
+
+ Subscription
+
+observable.subscribe(() => {
+ // notification handlers here
+});
+
+
+element.addEventListener(eventName, (event) => {
+ // notification handler here
+});
+
+
+
+ Configuration
+ Listen for keystrokes, but provide a stream representing the value in the input.
+fromEvent(inputEl, 'keydown').pipe(
+ map(e => e.target.value)
+);
+
+ Does not support configuration.
+element.addEventListener(eventName, (event) => {
+ // Cannot change the passed Event into another
+ // value before it gets to the handler
+});
+
+
+
+
+
+## Observables compared to arrays
+
+An observable produces values over time. An array is created as a static set of values. In a sense, observables are asynchronous where arrays are synchronous. In the following examples, ➞ implies asynchronous value delivery.
+
+
+
+ Observable
+ Array
+
+
+ Given
+
+ obs: ➞1➞2➞3➞5➞7
+ obsB: ➞'a'➞'b'➞'c'
+
+
+ arr: [1, 2, 3, 5, 7]
+ arrB: ['a', 'b', 'c']
+
+
+
+ concat()
+ obs.concat(obsB)
+ ➞1➞2➞3➞5➞7➞'a'➞'b'➞'c'
+
+
+ arr.concat(arrB)
+ [1,2,3,5,7,'a','b','c']
+
+
+
+ filter()
+ obs.filter((v) => v>3)
+ ➞5➞7
+
+
+ arr.filter((v) => v>3)
+ [5, 7]
+
+
+
+ find()
+ obs.find((v) => v>3)
+ ➞5
+
+
+ arr.find((v) => v>10)
+ 5
+
+
+
+ findIndex()
+ obs.findIndex((v) => v>3)
+ ➞3
+
+
+ arr.findIndex((v) => v>3)
+ 3
+
+
+
+ forEach()
+ obs.forEach((v) => {
+ console.log(v);
+})
+1
+2
+3
+4
+5
+
+
+ arr.forEach((v) => {
+ console.log(v);
+})
+1
+2
+3
+4
+5
+
+
+
+ map()
+ obs.map((v) => -v)
+ ➞-1➞-2➞-3➞-5➞-7
+
+
+ arr.map((v) => -v)
+ [-1, -2, -3, -5, -7]
+
+
+
+ reduce()
+ obs.scan((s,v)=> s+v, 0)
+ ➞1➞3➞6➞11➞18
+
+
+ arr.reduce((s,v) => s+v, 0)
+ 18
+
+
+
+
+
+
diff --git a/aio/content/guide/component-styles.md b/aio/content/guide/component-styles.md
index e39b4d5707..ad421a15a6 100644
--- a/aio/content/guide/component-styles.md
+++ b/aio/content/guide/component-styles.md
@@ -16,19 +16,15 @@ with components, enabling a more modular design than regular stylesheets.
This page describes how to load and apply these component styles.
-在本章中，我们将学到如何加载和使用这些*组件样式*。
-
-You can run the ` elements, from the host element down
-through this component to all of its child elements in the DOM.
+The following example targets all `` elements, from the host element down
+through this component to all of its child elements in the DOM.
在这个例子中，我们以所有的``元素为目标，从宿主元素到当前元素再到 DOM 中的所有子元素：
@@ -226,7 +220,7 @@ CSS标准中用于 "刺穿Shadow DOM" 的组合器已经被废弃，并将[这
## 把样式加载进组件中
-There are several ways to add styles to a component:
+There are several ways to add styles to a component:
有几种方式把样式加入组件：
@@ -290,8 +284,8 @@ to a component's `@Component` decorator:
+ 
');
+ if (this.inertBodyElement.querySelector && this.inertBodyElement.querySelector('svg img')) {
+ // We just hit the Firefox bug - which prevents the inner img JS from being sanitized
+ // so use the DOMParser strategy, if it is available.
+ // If the DOMParser is not available then we are not in Firefox (Server/WebWorker?) so we
+ // fall through to the default strategy below.
+ if (isDOMParserAvailable()) {
+ this.getInertBodyElement = this.getInertBodyElement_DOMParser;
+ return;
+ }
+ }
+
+ // None of the bugs were hit so it is safe for us to use the default InertDocument strategy
+ this.getInertBodyElement = this.getInertBodyElement_InertDocument;
+ }
+
+ /**
+ * Get an inert DOM element containing DOM created from the dirty HTML string provided.
+ * The implementation of this is determined in the constructor, when the class is instantiated.
+ */
+ getInertBodyElement: (html: string) => HTMLElement | null;
+
+ /**
+ * Use XHR to create and fill an inert body element (on Safari 10.1)
+ * See
+ * https://github.com/cure53/DOMPurify/blob/a992d3a75031cb8bb032e5ea8399ba972bdf9a65/src/purify.js#L439-L449
+ */
+ private getInertBodyElement_XHR(html: string) {
+ // We add these extra elements to ensure that the rest of the content is parsed as expected
+ // e.g. leading whitespace is maintained and tags like `` do not get hoisted to the
+ // `` tag.
+ html = '
by CSS element selector
- de = fixture.debugElement.query(By.css('h1'));
- el = de.nativeElement;
- });
- // #enddocregion sync-before-each
-
- it('no title in the DOM until manually call `detectChanges`', () => {
- expect(el.textContent).toEqual('');
- });
-
- 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');
- });
-
-});
diff --git a/aio/content/examples/testing/src/app/banner.component.css b/aio/content/examples/testing/src/app/banner/banner-external.component.css
similarity index 100%
rename from aio/content/examples/testing/src/app/banner.component.css
rename to aio/content/examples/testing/src/app/banner/banner-external.component.css
diff --git a/aio/content/examples/testing/src/app/banner.component.html b/aio/content/examples/testing/src/app/banner/banner-external.component.html
similarity index 100%
rename from aio/content/examples/testing/src/app/banner.component.html
rename to aio/content/examples/testing/src/app/banner/banner-external.component.html
diff --git a/aio/content/examples/testing/src/app/banner/banner-external.component.spec.ts b/aio/content/examples/testing/src/app/banner/banner-external.component.spec.ts
new file mode 100644
index 0000000000..d5fc9c8cbe
--- /dev/null
+++ b/aio/content/examples/testing/src/app/banner/banner-external.component.spec.ts
@@ -0,0 +1,72 @@
+// #docplaster
+// #docregion import-async
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+// #enddocregion import-async
+import { By } from '@angular/platform-browser';
+import { DebugElement } from '@angular/core';
+
+import { BannerComponent } from './banner-external.component';
+
+describe('BannerComponent (external files)', () => {
+ let component: BannerComponent;
+ let fixture: ComponentFixture;
+ let h1: HTMLElement;
+
+ describe('Two beforeEach', () => {
+ // #docregion async-before-each
+ beforeEach(async(() => {
+ TestBed.configureTestingModule({
+ declarations: [ BannerComponent ],
+ })
+ .compileComponents(); // compile template and css
+ }));
+ // #enddocregion async-before-each
+
+ // synchronous beforeEach
+ // #docregion sync-before-each
+ beforeEach(() => {
+ fixture = TestBed.createComponent(BannerComponent);
+ component = fixture.componentInstance; // BannerComponent test instance
+ h1 = fixture.nativeElement.querySelector('h1');
+ });
+ // #enddocregion sync-before-each
+
+ tests();
+ });
+
+ describe('One beforeEach', () => {
+ // #docregion one-before-each
+ beforeEach(async(() => {
+ TestBed.configureTestingModule({
+ declarations: [ BannerComponent ],
+ })
+ .compileComponents()
+ .then(() => {
+ fixture = TestBed.createComponent(BannerComponent);
+ component = fixture.componentInstance;
+ h1 = fixture.nativeElement.querySelector('h1');
+ });
+ }));
+ // #enddocregion one-before-each
+
+ tests();
+ });
+
+ function tests() {
+ it('no title in the DOM until manually call `detectChanges`', () => {
+ expect(h1.textContent).toEqual('');
+ });
+
+ it('should display original title', () => {
+ fixture.detectChanges();
+ expect(h1.textContent).toContain(component.title);
+ });
+
+ it('should display a different test title', () => {
+ component.title = 'Test Title';
+ fixture.detectChanges();
+ expect(h1.textContent).toContain('Test Title');
+ });
+ }
+});
+
diff --git a/aio/content/examples/testing/src/app/banner-inline.component.ts b/aio/content/examples/testing/src/app/banner/banner-external.component.ts
similarity index 50%
rename from aio/content/examples/testing/src/app/banner-inline.component.ts
rename to aio/content/examples/testing/src/app/banner/banner-external.component.ts
index 7ec4ef6999..dfec36074d 100644
--- a/aio/content/examples/testing/src/app/banner-inline.component.ts
+++ b/aio/content/examples/testing/src/app/banner/banner-external.component.ts
@@ -1,11 +1,14 @@
+// #docplaster
// #docregion
import { Component } from '@angular/core';
+// #docregion metadata
@Component({
selector: 'app-banner',
- template: '{{title}}
'
+ templateUrl: './banner-external.component.html',
+ styleUrls: ['./banner-external.component.css']
})
+// #enddocregion metadata
export class BannerComponent {
title = 'Test Tour of Heroes';
}
-
diff --git a/aio/content/examples/testing/src/app/banner/banner-initial.component.spec.ts b/aio/content/examples/testing/src/app/banner/banner-initial.component.spec.ts
new file mode 100644
index 0000000000..8a45df5023
--- /dev/null
+++ b/aio/content/examples/testing/src/app/banner/banner-initial.component.spec.ts
@@ -0,0 +1,119 @@
+// #docplaster
+// #docregion import-by
+import { By } from '@angular/platform-browser';
+// #enddocregion import-by
+// #docregion import-debug-element
+import { DebugElement } from '@angular/core';
+// #enddocregion import-debug-element
+// #docregion v1
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+// #enddocregion v1
+import { BannerComponent } from './banner-initial.component';
+/*
+// #docregion v1
+import { BannerComponent } from './banner.component';
+
+describe('BannerComponent', () => {
+// #enddocregion v1
+*/
+describe('BannerComponent (initial CLI generated)', () => {
+// #docregion v1
+ let component: BannerComponent;
+ let fixture: ComponentFixture;
+
+ beforeEach(async(() => {
+ TestBed.configureTestingModule({
+ declarations: [ BannerComponent ]
+ })
+ .compileComponents();
+ }));
+
+ beforeEach(() => {
+ fixture = TestBed.createComponent(BannerComponent);
+ component = fixture.componentInstance;
+ fixture.detectChanges();
+ });
+
+ it('should create', () => {
+ expect(component).toBeDefined();
+ });
+});
+// #enddocregion v1
+
+// #docregion v2
+describe('BannerComponent (minimal)', () => {
+ it('should create', () => {
+ // #docregion configureTestingModule
+ TestBed.configureTestingModule({
+ declarations: [ BannerComponent ]
+ });
+ // #enddocregion configureTestingModule
+ // #docregion createComponent
+ const fixture = TestBed.createComponent(BannerComponent);
+ // #enddocregion createComponent
+ // #docregion componentInstance
+ const component = fixture.componentInstance;
+ expect(component).toBeDefined();
+ // #enddocregion componentInstance
+ });
+});
+// #enddocregion v2
+
+// #docregion v3, v4
+describe('BannerComponent (with beforeEach)', () => {
+ let component: BannerComponent;
+ let fixture: ComponentFixture;
+
+ beforeEach(() => {
+ TestBed.configureTestingModule({
+ declarations: [ BannerComponent ]
+ });
+ fixture = TestBed.createComponent(BannerComponent);
+ component = fixture.componentInstance;
+ });
+
+ it('should create', () => {
+ expect(component).toBeDefined();
+ });
+// #enddocregion v3
+
+// #docregion v4-test-2
+ it('should contain "banner works!"', () => {
+ const bannerElement: HTMLElement = fixture.nativeElement;
+ expect(bannerElement.textContent).toContain('banner works!');
+ });
+// #enddocregion v4-test-2
+
+// #docregion v4-test-3
+ it('should have with "banner works!"', () => {
+ // #docregion nativeElement
+ const bannerElement: HTMLElement = fixture.nativeElement;
+ // #enddocregion nativeElement
+ const p = bannerElement.querySelector('p');
+ expect(p.textContent).toEqual('banner works!');
+ });
+// #enddocregion v4-test-3
+
+
+// #docregion v4-test-4
+it('should find the
with fixture.debugElement.nativeElement)', () => {
+ // #docregion debugElement-nativeElement
+ const bannerDe: DebugElement = fixture.debugElement;
+ const bannerEl: HTMLElement = bannerDe.nativeElement;
+ // #enddocregion debugElement-nativeElement
+ const p = bannerEl.querySelector('p');
+ expect(p.textContent).toEqual('banner works!');
+});
+// #enddocregion v4-test-4
+
+// #docregion v4-test-5
+it('should find the
with fixture.debugElement.query(By.css)', () => {
+ const bannerDe: DebugElement = fixture.debugElement;
+ const paragraphDe = bannerDe.query(By.css('p'));
+ const p: HTMLElement = paragraphDe.nativeElement;
+ expect(p.textContent).toEqual('banner works!');
+});
+// #enddocregion v4-test-5
+// #docregion v3
+});
+// #enddocregion v3, v4
diff --git a/aio/content/examples/testing/src/app/banner/banner-initial.component.ts b/aio/content/examples/testing/src/app/banner/banner-initial.component.ts
new file mode 100644
index 0000000000..a7959e5573
--- /dev/null
+++ b/aio/content/examples/testing/src/app/banner/banner-initial.component.ts
@@ -0,0 +1,10 @@
+// BannerComponent as initially generated by the CLI
+// #docregion
+import { Component } from '@angular/core';
+
+@Component({
+ selector: 'app-banner',
+ template: `
banner works!
`,
+ styles: []
+})
+export class BannerComponent { }
diff --git a/aio/content/examples/testing/src/app/banner.component.detect-changes.spec.ts b/aio/content/examples/testing/src/app/banner/banner.component.detect-changes.spec.ts
similarity index 76%
rename from aio/content/examples/testing/src/app/banner.component.detect-changes.spec.ts
rename to aio/content/examples/testing/src/app/banner/banner.component.detect-changes.spec.ts
index 412f5be586..3310fbdad0 100644
--- a/aio/content/examples/testing/src/app/banner.component.detect-changes.spec.ts
+++ b/aio/content/examples/testing/src/app/banner/banner.component.detect-changes.spec.ts
@@ -7,53 +7,45 @@ import { async } from '@angular/core/testing';
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;
- let de: DebugElement;
- let el: HTMLElement;
+ let h1: HTMLElement;
- beforeEach(async(() => {
+ beforeEach(() => {
// #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;
+ h1 = fixture.nativeElement.querySelector('h1');
});
// #docregion auto-detect-tests
it('should display original title', () => {
// Hooray! No `fixture.detectChanges()` needed
- expect(el.textContent).toContain(comp.title);
+ expect(h1.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);
+ expect(h1.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);
+ expect(h1.textContent).toContain(comp.title);
});
// #enddocregion auto-detect-tests
});
diff --git a/aio/content/examples/testing/src/app/banner/banner.component.spec.ts b/aio/content/examples/testing/src/app/banner/banner.component.spec.ts
new file mode 100644
index 0000000000..a731debbd1
--- /dev/null
+++ b/aio/content/examples/testing/src/app/banner/banner.component.spec.ts
@@ -0,0 +1,56 @@
+// #docplaster
+// #docregion
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { DebugElement } from '@angular/core';
+
+import { BannerComponent } from './banner.component';
+
+describe('BannerComponent (inline template)', () => {
+// #docregion setup
+ let component: BannerComponent;
+ let fixture: ComponentFixture;
+ let h1: HTMLElement;
+
+ // #docregion configure-and-create
+ beforeEach(() => {
+ TestBed.configureTestingModule({
+ declarations: [ BannerComponent ],
+ });
+ fixture = TestBed.createComponent(BannerComponent);
+ // #enddocregion configure-and-create
+ component = fixture.componentInstance; // BannerComponent test instance
+ h1 = fixture.nativeElement.querySelector('h1');
+ // #docregion configure-and-create
+ });
+// #enddocregion setup, configure-and-create
+
+// #docregion test-w-o-detect-changes
+ it('no title in the DOM after createComponent()', () => {
+ expect(h1.textContent).toEqual('');
+ });
+// #enddocregion test-w-o-detect-changes
+
+// #docregion expect-h1-default-v1
+ it('should display original title', () => {
+ // #enddocregion expect-h1-default-v1
+ fixture.detectChanges();
+ // #docregion expect-h1-default-v1
+ expect(h1.textContent).toContain(component.title);
+ });
+ // #enddocregion expect-h1-default-v1
+
+// #docregion expect-h1-default
+it('should display original title after detectChanges()', () => {
+ fixture.detectChanges();
+ expect(h1.textContent).toContain(component.title);
+});
+// #enddocregion expect-h1-default
+
+// #docregion after-change
+it('should display a different test title', () => {
+ component.title = 'Test Title';
+ fixture.detectChanges();
+ expect(h1.textContent).toContain('Test Title');
+});
+// #enddocregion after-change
+});
diff --git a/aio/content/examples/testing/src/app/banner.component.ts b/aio/content/examples/testing/src/app/banner/banner.component.ts
similarity index 52%
rename from aio/content/examples/testing/src/app/banner.component.ts
rename to aio/content/examples/testing/src/app/banner/banner.component.ts
index 4355a40867..3354801d0a 100644
--- a/aio/content/examples/testing/src/app/banner.component.ts
+++ b/aio/content/examples/testing/src/app/banner/banner.component.ts
@@ -1,12 +1,12 @@
-// #docregion
import { Component } from '@angular/core';
+// #docregion component
@Component({
selector: 'app-banner',
- templateUrl: './banner.component.html',
- styleUrls: ['./banner.component.css']
+ template: '{{title}}
',
+ styles: ['h1 { color: green; font-size: 350%}']
})
export class BannerComponent {
title = 'Test Tour of Heroes';
}
-
+// #enddocregion component
diff --git a/aio/content/examples/testing/src/app/dashboard/dashboard-hero.component.html b/aio/content/examples/testing/src/app/dashboard/dashboard-hero.component.html
deleted file mode 100644
index ff49bd17a5..0000000000
--- a/aio/content/examples/testing/src/app/dashboard/dashboard-hero.component.html
+++ /dev/null
@@ -1,4 +0,0 @@
-
-
- {{hero.name | uppercase}}
-
diff --git a/aio/content/examples/testing/src/app/dashboard/dashboard-hero.component.spec.ts b/aio/content/examples/testing/src/app/dashboard/dashboard-hero.component.spec.ts
index 40c01571e6..84d73e45f4 100644
--- a/aio/content/examples/testing/src/app/dashboard/dashboard-hero.component.spec.ts
+++ b/aio/content/examples/testing/src/app/dashboard/dashboard-hero.component.spec.ts
@@ -1,7 +1,9 @@
+
+// #docplaster
import { async, ComponentFixture, TestBed
} from '@angular/core/testing';
-import { By } from '@angular/platform-browser';
+import { By } from '@angular/platform-browser';
import { DebugElement } from '@angular/core';
import { addMatchers, click } from '../../testing';
@@ -11,64 +13,96 @@ import { DashboardHeroComponent } from './dashboard-hero.component';
beforeEach( addMatchers );
+describe('DashboardHeroComponent class only', () => {
+ // #docregion class-only
+ it('raises the selected event when clicked', () => {
+ const comp = new DashboardHeroComponent();
+ const hero: Hero = { id: 42, name: 'Test' };
+ comp.hero = hero;
+
+ comp.selected.subscribe(selectedHero => expect(selectedHero).toBe(hero));
+ comp.click();
+ });
+ // #enddocregion class-only
+});
+
describe('DashboardHeroComponent when tested directly', () => {
let comp: DashboardHeroComponent;
let expectedHero: Hero;
let fixture: ComponentFixture;
- let heroEl: DebugElement;
+ let heroDe: DebugElement;
+ let heroEl: HTMLElement;
- // #docregion setup, compile-components
- // async beforeEach
- beforeEach( async(() => {
+ beforeEach(async(() => {
+ // #docregion setup, config-testbed
TestBed.configureTestingModule({
- declarations: [ DashboardHeroComponent ],
+ declarations: [ DashboardHeroComponent ]
})
- .compileComponents(); // compile template and css
+ // #enddocregion setup, config-testbed
+ .compileComponents();
}));
- // #enddocregion compile-components
- // synchronous beforeEach
beforeEach(() => {
+ // #docregion setup
fixture = TestBed.createComponent(DashboardHeroComponent);
comp = fixture.componentInstance;
- heroEl = fixture.debugElement.query(By.css('.hero')); // find hero element
- // pretend that it was wired to something that supplied a hero
- expectedHero = new Hero(42, 'Test Name');
+ // find the hero's DebugElement and element
+ heroDe = fixture.debugElement.query(By.css('.hero'));
+ heroEl = heroDe.nativeElement;
+
+ // mock the hero supplied by the parent component
+ expectedHero = { id: 42, name: 'Test Name' };
+
+ // simulate the parent setting the input property with that hero
comp.hero = expectedHero;
- fixture.detectChanges(); // trigger initial data binding
+
+ // trigger initial data binding
+ fixture.detectChanges();
+ // #enddocregion setup
});
- // #enddocregion setup
// #docregion name-test
- it('should display hero name', () => {
+ it('should display hero name in uppercase', () => {
const expectedPipedName = expectedHero.name.toUpperCase();
- expect(heroEl.nativeElement.textContent).toContain(expectedPipedName);
+ expect(heroEl.textContent).toContain(expectedPipedName);
});
// #enddocregion name-test
// #docregion click-test
- it('should raise selected event when clicked', () => {
+ it('should raise selected event when clicked (triggerEventHandler)', () => {
let selectedHero: Hero;
comp.selected.subscribe((hero: Hero) => selectedHero = hero);
// #docregion trigger-event-handler
- heroEl.triggerEventHandler('click', null);
+ heroDe.triggerEventHandler('click', null);
// #enddocregion trigger-event-handler
expect(selectedHero).toBe(expectedHero);
});
// #enddocregion click-test
- // #docregion click-test-2
- it('should raise selected event when clicked', () => {
- let selectedHero: Hero;
- comp.selected.subscribe((hero: Hero) => selectedHero = hero);
+ // #docregion click-test-2
+ it('should raise selected event when clicked (element.click)', () => {
+ let selectedHero: Hero;
+ comp.selected.subscribe((hero: Hero) => selectedHero = hero);
+
+ heroEl.click();
+ expect(selectedHero).toBe(expectedHero);
+ });
+ // #enddocregion click-test-2
+
+ // #docregion click-test-3
+ it('should raise selected event when clicked (click helper)', () => {
+ let selectedHero: Hero;
+ comp.selected.subscribe(hero => selectedHero = hero);
+
+ click(heroDe); // click helper with DebugElement
+ click(heroEl); // click helper with native element
- click(heroEl); // triggerEventHandler helper
expect(selectedHero).toBe(expectedHero);
});
- // #enddocregion click-test-2
+ // #enddocregion click-test-3
});
//////////////////
@@ -76,28 +110,31 @@ describe('DashboardHeroComponent when tested directly', () => {
describe('DashboardHeroComponent when inside a test host', () => {
let testHost: TestHostComponent;
let fixture: ComponentFixture;
- let heroEl: DebugElement;
+ let heroEl: HTMLElement;
- // #docregion test-host-setup
- beforeEach( async(() => {
+ beforeEach(async(() => {
+ // #docregion test-host-setup
TestBed.configureTestingModule({
- declarations: [ DashboardHeroComponent, TestHostComponent ], // declare both
- }).compileComponents();
+ declarations: [ DashboardHeroComponent, TestHostComponent ]
+ })
+ // #enddocregion test-host-setup
+ .compileComponents();
}));
beforeEach(() => {
+ // #docregion test-host-setup
// create TestHostComponent instead of DashboardHeroComponent
fixture = TestBed.createComponent(TestHostComponent);
testHost = fixture.componentInstance;
- heroEl = fixture.debugElement.query(By.css('.hero')); // find hero
+ heroEl = fixture.nativeElement.querySelector('.hero');
fixture.detectChanges(); // trigger initial data binding
+ // #enddocregion test-host-setup
});
- // #enddocregion test-host-setup
// #docregion test-host-tests
it('should display hero name', () => {
const expectedPipedName = testHost.hero.name.toUpperCase();
- expect(heroEl.nativeElement.textContent).toContain(expectedPipedName);
+ expect(heroEl.textContent).toContain(expectedPipedName);
});
it('should raise selected event when clicked', () => {
@@ -114,10 +151,12 @@ import { Component } from '@angular/core';
// #docregion test-host
@Component({
template: `
-
+ `
})
class TestHostComponent {
- hero = new Hero(42, 'Test Name');
+ hero: Hero = {id: 42, name: 'Test Name' };
selectedHero: Hero;
onSelected(hero: Hero) { this.selectedHero = hero; }
}
diff --git a/aio/content/examples/testing/src/app/dashboard/dashboard-hero.component.ts b/aio/content/examples/testing/src/app/dashboard/dashboard-hero.component.ts
index 3b6de56cf4..ca1ff573bf 100644
--- a/aio/content/examples/testing/src/app/dashboard/dashboard-hero.component.ts
+++ b/aio/content/examples/testing/src/app/dashboard/dashboard-hero.component.ts
@@ -5,13 +5,17 @@ import { Hero } from '../model/hero';
// #docregion component
@Component({
- selector: 'dashboard-hero',
- templateUrl: './dashboard-hero.component.html',
+ selector: 'dashboard-hero',
+ template: `
+
+ {{hero.name | uppercase}}
+ `,
styleUrls: [ './dashboard-hero.component.css' ]
})
+// #docregion class
export class DashboardHeroComponent {
@Input() hero: Hero;
@Output() selected = new EventEmitter();
click() { this.selected.emit(this.hero); }
}
-// #enddocregion component
+// #enddocregion component, class
diff --git a/aio/content/examples/testing/src/app/dashboard/dashboard.component.no-testbed.spec.ts b/aio/content/examples/testing/src/app/dashboard/dashboard.component.no-testbed.spec.ts
index 125e5193b7..1d372bfe0e 100644
--- a/aio/content/examples/testing/src/app/dashboard/dashboard.component.no-testbed.spec.ts
+++ b/aio/content/examples/testing/src/app/dashboard/dashboard.component.no-testbed.spec.ts
@@ -1,24 +1,24 @@
import { Router } from '@angular/router';
import { DashboardComponent } from './dashboard.component';
-import { Hero } from '../model';
+import { Hero } from '../model/hero';
import { addMatchers } from '../../testing';
-import { FakeHeroService } from '../model/testing';
+import { TestHeroService, HeroService } from '../model/testing/test-hero.service';
class FakeRouter {
navigateByUrl(url: string) { return url; }
}
-describe('DashboardComponent: w/o Angular TestBed', () => {
+describe('DashboardComponent class only', () => {
let comp: DashboardComponent;
- let heroService: FakeHeroService;
+ let heroService: TestHeroService;
let router: Router;
beforeEach(() => {
addMatchers();
router = new FakeRouter() as any as Router;
- heroService = new FakeHeroService();
+ heroService = new TestHeroService();
comp = new DashboardComponent(router, heroService);
});
@@ -35,17 +35,19 @@ describe('DashboardComponent: w/o Angular TestBed', () => {
it('should HAVE heroes after HeroService gets them', (done: DoneFn) => {
comp.ngOnInit(); // ngOnInit -> getHeroes
- heroService.lastPromise // the one from getHeroes
- .then(() => {
+ heroService.lastResult // the one from getHeroes
+ .subscribe(
+ () => {
// throw new Error('deliberate error'); // see it fail gracefully
expect(comp.heroes.length).toBeGreaterThan(0,
'should have heroes after service promise resolves');
- })
- .then(done, done.fail);
+ done();
+ },
+ done.fail);
});
it('should tell ROUTER to navigate by hero id', () => {
- const hero = new Hero(42, 'Abbracadabra');
+ const hero: Hero = {id: 42, name: 'Abbracadabra' };
const spy = spyOn(router, 'navigateByUrl');
comp.gotoDetail(hero);
diff --git a/aio/content/examples/testing/src/app/dashboard/dashboard.component.spec.ts b/aio/content/examples/testing/src/app/dashboard/dashboard.component.spec.ts
index 0b0f9e213a..9beef762a0 100644
--- a/aio/content/examples/testing/src/app/dashboard/dashboard.component.spec.ts
+++ b/aio/content/examples/testing/src/app/dashboard/dashboard.component.spec.ts
@@ -2,9 +2,9 @@
import { async, inject, ComponentFixture, TestBed
} from '@angular/core/testing';
-import { addMatchers, click } from '../../testing';
-import { HeroService } from '../model';
-import { FakeHeroService } from '../model/testing';
+import { addMatchers, asyncData, click } from '../../testing';
+import { HeroService } from '../model/hero.service';
+import { getTestHeroes } from '../model/testing/test-heroes';
import { By } from '@angular/platform-browser';
import { Router } from '@angular/router';
@@ -12,12 +12,6 @@ import { Router } from '@angular/router';
import { DashboardComponent } from './dashboard.component';
import { DashboardModule } from './dashboard.module';
-// #docregion router-stub
-class RouterStub {
- navigateByUrl(url: string) { return url; }
-}
-// #enddocregion router-stub
-
beforeEach ( addMatchers );
let comp: DashboardComponent;
@@ -37,8 +31,8 @@ describe('DashboardComponent (deep)', () => {
tests(clickForDeep);
function clickForDeep() {
- // get first DebugElement
- const heroEl = fixture.debugElement.query(By.css('.hero'));
+ // get first
+ const heroEl: HTMLElement = fixture.nativeElement.querySelector('.hero');
click(heroEl);
}
});
@@ -61,24 +55,32 @@ describe('DashboardComponent (shallow)', () => {
function clickForShallow() {
// get first DebugElement
- const heroEl = fixture.debugElement.query(By.css('dashboard-hero'));
- heroEl.triggerEventHandler('selected', comp.heroes[0]);
+ const heroDe = fixture.debugElement.query(By.css('dashboard-hero'));
+ heroDe.triggerEventHandler('selected', comp.heroes[0]);
}
});
/** Add TestBed providers, compile, and create DashboardComponent */
function compileAndCreate() {
// #docregion compile-and-create-body
- beforeEach( async(() => {
+ beforeEach(async(() => {
+ // #docregion router-spy
+ const routerSpy = jasmine.createSpyObj('Router', ['navigateByUrl']);
+ const heroServiceSpy = jasmine.createSpyObj('HeroService', ['getHeroes']);
+
TestBed.configureTestingModule({
providers: [
- { provide: HeroService, useClass: FakeHeroService },
- { provide: Router, useClass: RouterStub }
+ { provide: HeroService, useValue: heroServiceSpy },
+ { provide: Router, useValue: routerSpy }
]
})
+ // #enddocregion router-spy
.compileComponents().then(() => {
fixture = TestBed.createComponent(DashboardComponent);
comp = fixture.componentInstance;
+
+ // getHeroes spy returns observable of test heroes
+ heroServiceSpy.getHeroes.and.returnValue(asyncData(getTestHeroes()));
});
// #enddocregion compile-and-create-body
}));
@@ -104,8 +106,11 @@ function tests(heroClick: Function) {
describe('after get dashboard heroes', () => {
+ let router: Router;
+
// Trigger component so it gets heroes and binds to them
- beforeEach( async(() => {
+ beforeEach(async(() => {
+ router = fixture.debugElement.injector.get(Router);
fixture.detectChanges(); // runs ngOnInit -> getHeroes
fixture.whenStable() // No need for the `lastPromise` hack!
.then(() => fixture.detectChanges()); // bind to heroes
@@ -119,29 +124,25 @@ function tests(heroClick: Function) {
it('should DISPLAY heroes', () => {
// Find and examine the displayed heroes
// Look for them in the DOM by css class
- const heroes = fixture.debugElement.queryAll(By.css('dashboard-hero'));
+ const heroes = fixture.nativeElement.querySelectorAll('dashboard-hero');
expect(heroes.length).toBe(4, 'should display 4 heroes');
});
- // #docregion navigate-test, inject
- it('should tell ROUTER to navigate when hero clicked',
- inject([Router], (router: Router) => { // ...
- // #enddocregion inject
-
- const spy = spyOn(router, 'navigateByUrl');
+ // #docregion navigate-test
+ it('should tell ROUTER to navigate when hero clicked', () => {
heroClick(); // trigger click on first inner
- // args passed to router.navigateByUrl()
+ // args passed to router.navigateByUrl() spy
+ const spy = router.navigateByUrl as jasmine.Spy;
const navArgs = spy.calls.first().args[0];
// expecting to navigate to id of the component's first hero
const id = comp.heroes[0].id;
expect(navArgs).toBe('/heroes/' + id,
'should nav to HeroDetail for first hero');
- // #docregion inject
- }));
- // #enddocregion navigate-test, inject
+ });
+ // #enddocregion navigate-test
});
}
diff --git a/aio/content/examples/testing/src/app/dashboard/dashboard.component.ts b/aio/content/examples/testing/src/app/dashboard/dashboard.component.ts
index 6521f4b52e..6ab4e6f324 100644
--- a/aio/content/examples/testing/src/app/dashboard/dashboard.component.ts
+++ b/aio/content/examples/testing/src/app/dashboard/dashboard.component.ts
@@ -2,7 +2,7 @@
import { Component, OnInit } from '@angular/core';
import { Router } from '@angular/router';
-import { Hero } from '../model/hero';
+import { Hero } from '../model/hero';
import { HeroService } from '../model/hero.service';
@Component({
@@ -23,7 +23,7 @@ export class DashboardComponent implements OnInit {
ngOnInit() {
this.heroService.getHeroes()
- .then(heroes => this.heroes = heroes.slice(1, 5));
+ .subscribe(heroes => this.heroes = heroes.slice(1, 5));
}
// #docregion goto-detail
diff --git a/aio/content/examples/testing/src/app/bag/async-helper.spec.ts b/aio/content/examples/testing/src/app/demo/async-helper.spec.ts
similarity index 89%
rename from aio/content/examples/testing/src/app/bag/async-helper.spec.ts
rename to aio/content/examples/testing/src/app/demo/async-helper.spec.ts
index 12c8a4fbbd..4ca986badb 100644
--- a/aio/content/examples/testing/src/app/bag/async-helper.spec.ts
+++ b/aio/content/examples/testing/src/app/demo/async-helper.spec.ts
@@ -1,7 +1,8 @@
// tslint:disable-next-line:no-unused-variable
import { async, fakeAsync, tick } from '@angular/core/testing';
-import { Observable } from 'rxjs/Observable';
+import { of } from 'rxjs/observable/of';
+import { delay } from 'rxjs/operators';
describe('Angular async helper', () => {
let actuallyDone = false;
@@ -34,8 +35,8 @@ describe('Angular async helper', () => {
// Use done. Cannot use setInterval with async or fakeAsync
// See https://github.com/angular/angular/issues/10127
- it('should run async test with successful delayed Observable', (done: any) => {
- const source = Observable.of(true).delay(10);
+ it('should run async test with successful delayed Observable', (done: DoneFn) => {
+ const source = of(true).pipe(delay(10));
source.subscribe(
val => actuallyDone = true,
err => fail(err),
@@ -46,7 +47,7 @@ describe('Angular async helper', () => {
// 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', async(() => {
- // const source = Observable.of(true).delay(10);
+ // const source = of(true).pipe(delay(10));
// source.subscribe(
// val => actuallyDone = true,
// err => fail(err)
@@ -56,7 +57,7 @@ describe('Angular async helper', () => {
// // 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);
+ // const source = of(true).pipe(delay(10));
// source.subscribe(
// val => actuallyDone = true,
// err => fail(err)
diff --git a/aio/content/examples/testing/src/app/bag/bag-external-template.html b/aio/content/examples/testing/src/app/demo/demo-external-template.html
similarity index 100%
rename from aio/content/examples/testing/src/app/bag/bag-external-template.html
rename to aio/content/examples/testing/src/app/demo/demo-external-template.html
diff --git a/aio/content/examples/testing/src/app/bag/bag-main.ts b/aio/content/examples/testing/src/app/demo/demo-main.ts
similarity index 52%
rename from aio/content/examples/testing/src/app/bag/bag-main.ts
rename to aio/content/examples/testing/src/app/demo/demo-main.ts
index 27b78200ae..9243428b7a 100644
--- a/aio/content/examples/testing/src/app/bag/bag-main.ts
+++ b/aio/content/examples/testing/src/app/demo/demo-main.ts
@@ -1,5 +1,5 @@
// main app entry point
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
-import { BagModule } from './bag';
+import { DemoModule } from './demo';
-platformBrowserDynamic().bootstrapModule(BagModule);
+platformBrowserDynamic().bootstrapModule(DemoModule);
diff --git a/aio/content/examples/testing/src/app/demo/demo.spec.ts b/aio/content/examples/testing/src/app/demo/demo.spec.ts
new file mode 100644
index 0000000000..d65b9acfb8
--- /dev/null
+++ b/aio/content/examples/testing/src/app/demo/demo.spec.ts
@@ -0,0 +1,153 @@
+// #docplaster
+import {
+ LightswitchComponent,
+ MasterService,
+ ValueService,
+ ReversePipe
+} from './demo';
+
+///////// Fakes /////////
+export class FakeValueService extends ValueService {
+ value = 'faked service value';
+}
+////////////////////////
+describe('demo (no TestBed):', () => {
+
+ // #docregion ValueService
+ // Straight Jasmine testing without Angular's testing support
+ describe('ValueService', () => {
+ let service: ValueService;
+ beforeEach(() => { service = new ValueService(); });
+
+ it('#getValue should return real value', () => {
+ expect(service.getValue()).toBe('real value');
+ });
+
+ it('#getObservableValue should return value from observable',
+ (done: DoneFn) => {
+ service.getObservableValue().subscribe(value => {
+ expect(value).toBe('observable value');
+ done();
+ });
+ });
+
+ it('#getPromiseValue should return value from a promise',
+ (done: DoneFn) => {
+ service.getPromiseValue().then(value => {
+ expect(value).toBe('promise value');
+ done();
+ });
+ });
+ });
+ // #enddocregion ValueService
+
+ // MasterService requires injection of a ValueService
+ // #docregion MasterService
+ describe('MasterService without Angular testing support', () => {
+ let masterService: MasterService;
+
+ it('#getValue should return real value from the real service', () => {
+ masterService = new MasterService(new ValueService());
+ expect(masterService.getValue()).toBe('real value');
+ });
+
+ it('#getValue should return faked value from a fakeService', () => {
+ masterService = new MasterService(new FakeValueService());
+ expect(masterService.getValue()).toBe('faked service value');
+ });
+
+ it('#getValue should return faked value from a fake object', () => {
+ const fake = { getValue: () => 'fake value' };
+ masterService = new MasterService(fake as ValueService);
+ expect(masterService.getValue()).toBe('fake value');
+ });
+
+ it('#getValue should return stubbed value from a spy', () => {
+ // create `getValue` spy on an object representing the ValueService
+ const valueServiceSpy =
+ jasmine.createSpyObj('ValueService', ['getValue']);
+
+ // set the value to return when the `getValue` spy is called.
+ const stubValue = 'stub value';
+ valueServiceSpy.getValue.and.returnValue(stubValue);
+
+ masterService = new MasterService(valueServiceSpy);
+
+ expect(masterService.getValue())
+ .toBe(stubValue, 'service returned stub value');
+ expect(valueServiceSpy.getValue.calls.count())
+ .toBe(1, 'spy method was called once');
+ expect(valueServiceSpy.getValue.calls.mostRecent().returnValue)
+ .toBe(stubValue);
+ });
+ });
+ // #enddocregion MasterService
+
+ describe('MasterService (no beforeEach)', () => {
+ // #docregion no-before-each-test
+ it('#getValue should return stubbed value from a spy', () => {
+ // #docregion no-before-each-setup-call
+ const { masterService, stubValue, valueServiceSpy } = setup();
+ // #enddocregion no-before-each-setup-call
+ expect(masterService.getValue())
+ .toBe(stubValue, 'service returned stub value');
+ expect(valueServiceSpy.getValue.calls.count())
+ .toBe(1, 'spy method was called once');
+ expect(valueServiceSpy.getValue.calls.mostRecent().returnValue)
+ .toBe(stubValue);
+ });
+ // #enddocregion no-before-each-test
+
+ // #docregion no-before-each-setup
+ function setup() {
+ const valueServiceSpy =
+ jasmine.createSpyObj('ValueService', ['getValue']);
+ const stubValue = 'stub value';
+ const masterService = new MasterService(valueServiceSpy);
+
+ valueServiceSpy.getValue.and.returnValue(stubValue);
+ return { masterService, stubValue, valueServiceSpy };
+ }
+ // #enddocregion no-before-each-setup
+ });
+
+ // #docregion ReversePipe
+
+ describe('ReversePipe', () => {
+ let pipe: ReversePipe;
+
+ beforeEach(() => { pipe = new ReversePipe(); });
+
+ it('transforms "abc" to "cba"', () => {
+ expect(pipe.transform('abc')).toBe('cba');
+ });
+
+ it('no change to palindrome: "able was I ere I saw elba"', () => {
+ const palindrome = 'able was I ere I saw elba';
+ expect(pipe.transform(palindrome)).toBe(palindrome);
+ });
+
+ });
+ // #enddocregion ReversePipe
+
+ // #docregion Lightswitch
+ describe('LightswitchComp', () => {
+ it('#clicked() should toggle #isOn', () => {
+ const comp = new LightswitchComponent();
+ expect(comp.isOn).toBe(false, 'off at first');
+ comp.clicked();
+ expect(comp.isOn).toBe(true, 'on after click');
+ comp.clicked();
+ expect(comp.isOn).toBe(false, 'off after second click');
+ });
+
+ it('#clicked() should set #message to "is on"', () => {
+ const comp = new LightswitchComponent();
+ expect(comp.message).toMatch(/is off/i, 'off at first');
+ comp.clicked();
+ expect(comp.message).toMatch(/is on/i, 'on after clicked');
+ });
+ });
+ // #enddocregion Lightswitch
+
+});
diff --git a/aio/content/examples/testing/src/app/demo/demo.testbed.spec.ts b/aio/content/examples/testing/src/app/demo/demo.testbed.spec.ts
new file mode 100644
index 0000000000..2c0ba58e99
--- /dev/null
+++ b/aio/content/examples/testing/src/app/demo/demo.testbed.spec.ts
@@ -0,0 +1,706 @@
+// #docplaster
+import {
+ DemoModule,
+ BankAccountComponent, BankAccountParentComponent,
+ LightswitchComponent,
+ Child1Component, Child2Component, Child3Component,
+ MasterService,
+ ValueService,
+ ExternalTemplateComponent,
+ InputComponent,
+ IoComponent, IoParentComponent,
+ MyIfComponent, MyIfChildComponent, MyIfParentComponent,
+ NeedsContentComponent, ParentComponent,
+ TestProvidersComponent, TestViewProvidersComponent,
+ ReversePipeComponent, ShellComponent
+} from './demo';
+
+import { By } from '@angular/platform-browser';
+import { Component,
+ DebugElement,
+ Injectable } from '@angular/core';
+import { FormsModule } from '@angular/forms';
+
+// Forms symbols imported only for a specific test below
+import { NgModel, NgControl } from '@angular/forms';
+
+import { async, ComponentFixture, fakeAsync, inject, TestBed, tick
+} from '@angular/core/testing';
+
+import { addMatchers, newEvent, click } from '../../testing';
+
+export class NotProvided extends ValueService { /* example below */}
+beforeEach( addMatchers );
+
+describe('demo (with TestBed):', () => {
+
+//////// Service Tests /////////////
+
+ // #docregion ValueService
+ describe('ValueService', () => {
+
+ // #docregion value-service-before-each
+ let service: ValueService;
+
+ // #docregion value-service-inject-before-each
+ beforeEach(() => {
+ TestBed.configureTestingModule({ providers: [ValueService] });
+ // #enddocregion value-service-before-each
+ service = TestBed.get(ValueService);
+ // #docregion value-service-before-each
+ });
+ // #enddocregion value-service-before-each, value-service-inject-before-each
+
+ // #docregion value-service-inject-it
+ it('should use ValueService', () => {
+ service = TestBed.get(ValueService);
+ expect(service.getValue()).toBe('real value');
+ });
+ // #enddocregion value-service-inject-it
+
+ it('can inject a default value when service is not provided', () => {
+ // #docregion testbed-get-w-null
+ service = TestBed.get(NotProvided, null); // service is null
+ // #enddocregion testbed-get-w-null
+ });
+
+ it('test should wait for ValueService.getPromiseValue', async(() => {
+ service.getPromiseValue().then(
+ value => expect(value).toBe('promise value')
+ );
+ }));
+
+ it('test should wait for ValueService.getObservableValue', async(() => {
+ service.getObservableValue().subscribe(
+ value => expect(value).toBe('observable value')
+ );
+ }));
+
+ // Must use done. See https://github.com/angular/angular/issues/10127
+ it('test should wait for ValueService.getObservableDelayValue', (done: DoneFn) => {
+ service.getObservableDelayValue().subscribe(value => {
+ expect(value).toBe('observable delay value');
+ done();
+ });
+ });
+
+ it('should allow the use of fakeAsync', fakeAsync(() => {
+ let value: any;
+ service.getPromiseValue().then((val: any) => value = val);
+ tick(); // Trigger JS engine cycle until all promises resolve.
+ expect(value).toBe('promise value');
+ }));
+ });
+ // #enddocregion ValueService
+
+ describe('MasterService', () => {
+ // #docregion master-service-before-each
+ let masterService: MasterService;
+ let valueServiceSpy: jasmine.SpyObj;
+
+ beforeEach(() => {
+ const spy = jasmine.createSpyObj('ValueService', ['getValue']);
+
+ TestBed.configureTestingModule({
+ // Provide both the service-to-test and its (spy) dependency
+ providers: [
+ MasterService,
+ { provide: ValueService, useValue: spy }
+ ]
+ });
+ // Inject both the service-to-test and its (spy) dependency
+ masterService = TestBed.get(MasterService);
+ valueServiceSpy = TestBed.get(ValueService);
+ });
+ // #enddocregion master-service-before-each
+
+ // #docregion master-service-it
+ it('#getValue should return stubbed value from a spy', () => {
+ const stubValue = 'stub value';
+ valueServiceSpy.getValue.and.returnValue(stubValue);
+
+ expect(masterService.getValue())
+ .toBe(stubValue, 'service returned stub value');
+ expect(valueServiceSpy.getValue.calls.count())
+ .toBe(1, 'spy method was called once');
+ expect(valueServiceSpy.getValue.calls.mostRecent().returnValue)
+ .toBe(stubValue);
+ });
+ // #enddocregion master-service-it
+ });
+
+ describe('use inject within `it`', () => {
+ beforeEach(() => {
+ TestBed.configureTestingModule({ providers: [ValueService] });
+ });
+
+ it('should use modified providers',
+ inject([ValueService], (service: ValueService) => {
+ service.setValue('value modified in beforeEach');
+ expect(service.getValue())
+ .toBe('value modified in beforeEach');
+ })
+ );
+ });
+
+ describe('using async(inject) within beforeEach', () => {
+ let serviceValue: string;
+
+ beforeEach(() => {
+ TestBed.configureTestingModule({ providers: [ValueService] });
+ });
+
+ beforeEach(async(inject([ValueService], (service: ValueService) => {
+ service.getPromiseValue().then(value => serviceValue = value);
+ })));
+
+ it('should use asynchronously modified value ... in synchronous test', () => {
+ expect(serviceValue).toBe('promise value');
+ });
+ });
+
+/////////// Component Tests //////////////////
+
+ describe('TestBed component tests', () => {
+
+ beforeEach(async(() => {
+ TestBed
+ .configureTestingModule({
+ imports: [DemoModule],
+ })
+ // Compile everything in DemoModule
+ .compileComponents();
+ }));
+
+ it('should create a component with inline template', () => {
+ const fixture = TestBed.createComponent(Child1Component);
+ fixture.detectChanges();
+
+ expect(fixture).toHaveText('Child');
+ });
+
+ it('should create a component with external template', () => {
+ const fixture = TestBed.createComponent(ExternalTemplateComponent);
+ fixture.detectChanges();
+
+ expect(fixture).toHaveText('from external template');
+ });
+
+ it('should allow changing members of the component', () => {
+ const fixture = TestBed.createComponent(MyIfComponent);
+
+ fixture.detectChanges();
+ expect(fixture).toHaveText('MyIf()');
+
+ fixture.componentInstance.showMore = true;
+ fixture.detectChanges();
+ expect(fixture).toHaveText('MyIf(More)');
+ });
+
+ it('should create a nested component bound to inputs/outputs', () => {
+ const fixture = TestBed.createComponent(IoParentComponent);
+
+ fixture.detectChanges();
+ const heroes = fixture.debugElement.queryAll(By.css('.hero'));
+ expect(heroes.length).toBeGreaterThan(0, 'has heroes');
+
+ const comp = fixture.componentInstance;
+ const hero = comp.heroes[0];
+
+ click(heroes[0]);
+ fixture.detectChanges();
+
+ const selected = fixture.debugElement.query(By.css('p'));
+ expect(selected).toHaveText(hero.name);
+ });
+
+ it('can access the instance variable of an `*ngFor` row component', () => {
+ const fixture = TestBed.createComponent(IoParentComponent);
+ const comp = fixture.componentInstance;
+ const heroName = comp.heroes[0].name; // first hero's name
+
+ fixture.detectChanges();
+ const ngForRow = fixture.debugElement.query(By.directive(IoComponent)); // first hero ngForRow
+
+ const hero = ngForRow.context['hero']; // the hero object passed into the row
+ expect(hero.name).toBe(heroName, 'ngRow.context.hero');
+
+ const rowComp = ngForRow.componentInstance;
+ // jasmine.any is an "instance-of-type" test.
+ expect(rowComp).toEqual(jasmine.any(IoComponent), 'component is IoComp');
+ expect(rowComp.hero.name).toBe(heroName, 'component.hero');
+ });
+
+
+ // #docregion ButtonComp
+ it('should support clicking a button', () => {
+ const fixture = TestBed.createComponent(LightswitchComponent);
+ const btn = fixture.debugElement.query(By.css('button'));
+ const span = fixture.debugElement.query(By.css('span')).nativeElement;
+
+ fixture.detectChanges();
+ expect(span.textContent).toMatch(/is off/i, 'before click');
+
+ click(btn);
+ fixture.detectChanges();
+ expect(span.textContent).toMatch(/is on/i, 'after click');
+ });
+ // #enddocregion ButtonComp
+
+ // ngModel is async so we must wait for it with promise-based `whenStable`
+ it('should support entering text in input box (ngModel)', async(() => {
+ const expectedOrigName = 'John';
+ const expectedNewName = 'Sally';
+
+ const fixture = TestBed.createComponent(InputComponent);
+ fixture.detectChanges();
+
+ const comp = fixture.componentInstance;
+ const input = fixture.debugElement.query(By.css('input')).nativeElement;
+
+ expect(comp.name).toBe(expectedOrigName,
+ `At start name should be ${expectedOrigName} `);
+
+ // wait until ngModel binds comp.name to input box
+ fixture.whenStable().then(() => {
+ expect(input.value).toBe(expectedOrigName,
+ `After ngModel updates input box, input.value should be ${expectedOrigName} `);
+
+ // simulate user entering new name in input
+ input.value = expectedNewName;
+
+ // that change doesn't flow to the component immediately
+ expect(comp.name).toBe(expectedOrigName,
+ `comp.name should still be ${expectedOrigName} after value change, before binding happens`);
+
+ // dispatch a DOM event so that Angular learns of input value change.
+ // then wait while ngModel pushes input.box value to comp.name
+ input.dispatchEvent(newEvent('input'));
+ return fixture.whenStable();
+ })
+ .then(() => {
+ expect(comp.name).toBe(expectedNewName,
+ `After ngModel updates the model, comp.name should be ${expectedNewName} `);
+ });
+ }));
+
+ // fakeAsync version of ngModel input test enables sync test style
+ // synchronous `tick` replaces asynchronous promise-base `whenStable`
+ it('should support entering text in input box (ngModel) - fakeAsync', fakeAsync(() => {
+ const expectedOrigName = 'John';
+ const expectedNewName = 'Sally';
+
+ const fixture = TestBed.createComponent(InputComponent);
+ fixture.detectChanges();
+
+ const comp = fixture.componentInstance;
+ const input = fixture.debugElement.query(By.css('input')).nativeElement;
+
+ expect(comp.name).toBe(expectedOrigName,
+ `At start name should be ${expectedOrigName} `);
+
+ // wait until ngModel binds comp.name to input box
+ tick();
+ expect(input.value).toBe(expectedOrigName,
+ `After ngModel updates input box, input.value should be ${expectedOrigName} `);
+
+ // simulate user entering new name in input
+ input.value = expectedNewName;
+
+ // that change doesn't flow to the component immediately
+ expect(comp.name).toBe(expectedOrigName,
+ `comp.name should still be ${expectedOrigName} after value change, before binding happens`);
+
+ // dispatch a DOM event so that Angular learns of input value change.
+ // then wait a tick while ngModel pushes input.box value to comp.name
+ input.dispatchEvent(newEvent('input'));
+ tick();
+ expect(comp.name).toBe(expectedNewName,
+ `After ngModel updates the model, comp.name should be ${expectedNewName} `);
+ }));
+
+ // #docregion ReversePipeComp
+ it('ReversePipeComp should reverse the input text', fakeAsync(() => {
+ const inputText = 'the quick brown fox.';
+ const expectedText = '.xof nworb kciuq eht';
+
+ const fixture = TestBed.createComponent(ReversePipeComponent);
+ fixture.detectChanges();
+
+ const comp = fixture.componentInstance;
+ const input = fixture.debugElement.query(By.css('input')).nativeElement as HTMLInputElement;
+ const span = fixture.debugElement.query(By.css('span')).nativeElement as HTMLElement;
+
+ // simulate user entering new name in input
+ input.value = inputText;
+
+ // dispatch a DOM event so that Angular learns of input value change.
+ // then wait a tick while ngModel pushes input.box value to comp.text
+ // and Angular updates the output span
+ input.dispatchEvent(newEvent('input'));
+ tick();
+ fixture.detectChanges();
+ expect(span.textContent).toBe(expectedText, 'output span');
+ expect(comp.text).toBe(inputText, 'component.text');
+ }));
+ // #enddocregion ReversePipeComp
+
+ // Use this technique to find attached directives of any kind
+ it('can examine attached directives and listeners', () => {
+ const fixture = TestBed.createComponent(InputComponent);
+ fixture.detectChanges();
+
+ const inputEl = fixture.debugElement.query(By.css('input'));
+
+ expect(inputEl.providerTokens).toContain(NgModel, 'NgModel directive');
+
+ const ngControl = inputEl.injector.get(NgControl);
+ expect(ngControl).toEqual(jasmine.any(NgControl), 'NgControl directive');
+
+ expect(inputEl.listeners.length).toBeGreaterThan(2, 'several listeners attached');
+ });
+
+ // #docregion dom-attributes
+ it('BankAccountComponent should set attributes, styles, classes, and properties', () => {
+ const fixture = TestBed.createComponent(BankAccountParentComponent);
+ fixture.detectChanges();
+ const comp = fixture.componentInstance;
+
+ // the only child is debugElement of the BankAccount component
+ const el = fixture.debugElement.children[0];
+ const childComp = el.componentInstance as BankAccountComponent;
+ expect(childComp).toEqual(jasmine.any(BankAccountComponent));
+
+ expect(el.context).toBe(childComp, 'context is the child component');
+
+ expect(el.attributes['account']).toBe(childComp.id, 'account attribute');
+ expect(el.attributes['bank']).toBe(childComp.bank, 'bank attribute');
+
+ expect(el.classes['closed']).toBe(true, 'closed class');
+ expect(el.classes['open']).toBe(false, 'open class');
+
+ expect(el.styles['color']).toBe(comp.color, 'color style');
+ expect(el.styles['width']).toBe(comp.width + 'px', 'width style');
+ // #enddocregion dom-attributes
+
+ // Removed on 12/02/2016 when ceased public discussion of the `Renderer`. Revive in future?
+ // expect(el.properties['customProperty']).toBe(true, 'customProperty');
+
+ // #docregion dom-attributes
+ });
+ // #enddocregion dom-attributes
+
+
+ });
+
+ describe('TestBed component overrides:', () => {
+
+ it('should override ChildComp\'s template', () => {
+
+ const fixture = TestBed.configureTestingModule({
+ declarations: [Child1Component],
+ })
+ .overrideComponent(Child1Component, {
+ set: { template: 'Fake' }
+ })
+ .createComponent(Child1Component);
+
+ fixture.detectChanges();
+ expect(fixture).toHaveText('Fake');
+ });
+
+ it('should override TestProvidersComp\'s ValueService provider', () => {
+ const fixture = TestBed.configureTestingModule({
+ declarations: [TestProvidersComponent],
+ })
+ .overrideComponent(TestProvidersComponent, {
+ remove: { providers: [ValueService]},
+ add: { providers: [{ provide: ValueService, useClass: FakeValueService }] },
+
+ // Or replace them all (this component has only one provider)
+ // set: { providers: [{ provide: ValueService, useClass: FakeValueService }] },
+ })
+ .createComponent(TestProvidersComponent);
+
+ fixture.detectChanges();
+ expect(fixture).toHaveText('injected value: faked value', 'text');
+
+ // Explore the providerTokens
+ const tokens = fixture.debugElement.providerTokens;
+ expect(tokens).toContain(fixture.componentInstance.constructor, 'component ctor');
+ expect(tokens).toContain(TestProvidersComponent, 'TestProvidersComp');
+ expect(tokens).toContain(ValueService, 'ValueService');
+ });
+
+ it('should override TestViewProvidersComp\'s ValueService viewProvider', () => {
+ const fixture = TestBed.configureTestingModule({
+ declarations: [TestViewProvidersComponent],
+ })
+ .overrideComponent(TestViewProvidersComponent, {
+ // remove: { viewProviders: [ValueService]},
+ // add: { viewProviders: [{ provide: ValueService, useClass: FakeValueService }] },
+
+ // Or replace them all (this component has only one viewProvider)
+ set: { viewProviders: [{ provide: ValueService, useClass: FakeValueService }] },
+ })
+ .createComponent(TestViewProvidersComponent);
+
+ fixture.detectChanges();
+ expect(fixture).toHaveText('injected value: faked value');
+ });
+
+ it('injected provider should not be same as component\'s provider', () => {
+
+ // TestComponent is parent of TestProvidersComponent
+ @Component({ template: '
+
+ `
+ }
+ })
+ .createComponent(ShellComponent);
+
+ fixture.detectChanges();
+
+ // NeedsContentComp is the child of ShellComp
+ const el = fixture.debugElement.children[0];
+ const comp = el.componentInstance;
+
+ expect(comp.children.toArray().length).toBe(4,
+ 'three different child components and an ElementRef with #content');
+
+ expect(el.references['nc']).toBe(comp, '#nc reference to component');
+
+ // #docregion custom-predicate
+ // Filter for DebugElements with a #content reference
+ const contentRefs = el.queryAll( de => de.references['content']);
+ // #enddocregion custom-predicate
+ expect(contentRefs.length).toBe(4, 'elements w/ a #content reference');
+ });
+
+ });
+
+ describe('nested (one-deep) component override', () => {
+
+ beforeEach(() => {
+ TestBed.configureTestingModule({
+ declarations: [ParentComponent, FakeChildComponent]
+ });
+ });
+
+ it('ParentComp should use Fake Child component', () => {
+ const fixture = TestBed.createComponent(ParentComponent);
+ fixture.detectChanges();
+ expect(fixture).toHaveText('Parent(Fake Child)');
+ });
+ });
+
+ describe('nested (two-deep) component override', () => {
+
+ beforeEach(() => {
+ TestBed.configureTestingModule({
+ declarations: [ParentComponent, FakeChildWithGrandchildComponent, FakeGrandchildComponent]
+ });
+ });
+
+ it('should use Fake Grandchild component', () => {
+ const fixture = TestBed.createComponent(ParentComponent);
+ fixture.detectChanges();
+ expect(fixture).toHaveText('Parent(Fake Child(Fake Grandchild))');
+ });
+ });
+
+ describe('lifecycle hooks w/ MyIfParentComp', () => {
+ let fixture: ComponentFixture;
+ let parent: MyIfParentComponent;
+ let child: MyIfChildComponent;
+
+ beforeEach(() => {
+ TestBed.configureTestingModule({
+ imports: [FormsModule],
+ declarations: [MyIfChildComponent, MyIfParentComponent]
+ });
+
+ fixture = TestBed.createComponent(MyIfParentComponent);
+ parent = fixture.componentInstance;
+ });
+
+ it('should instantiate parent component', () => {
+ expect(parent).not.toBeNull('parent component should exist');
+ });
+
+ it('parent component OnInit should NOT be called before first detectChanges()', () => {
+ expect(parent.ngOnInitCalled).toBe(false);
+ });
+
+ it('parent component OnInit should be called after first detectChanges()', () => {
+ fixture.detectChanges();
+ expect(parent.ngOnInitCalled).toBe(true);
+ });
+
+ it('child component should exist after OnInit', () => {
+ fixture.detectChanges();
+ getChild();
+ expect(child instanceof MyIfChildComponent).toBe(true, 'should create child');
+ });
+
+ it('should have called child component\'s OnInit ', () => {
+ fixture.detectChanges();
+ getChild();
+ expect(child.ngOnInitCalled).toBe(true);
+ });
+
+ it('child component called OnChanges once', () => {
+ fixture.detectChanges();
+ getChild();
+ expect(child.ngOnChangesCounter).toBe(1);
+ });
+
+ it('changed parent value flows to child', () => {
+ fixture.detectChanges();
+ getChild();
+
+ parent.parentValue = 'foo';
+ fixture.detectChanges();
+
+ expect(child.ngOnChangesCounter).toBe(2,
+ 'expected 2 changes: initial value and changed value');
+ expect(child.childValue).toBe('foo',
+ 'childValue should eq changed parent value');
+ });
+
+ // must be async test to see child flow to parent
+ it('changed child value flows to parent', async(() => {
+ fixture.detectChanges();
+ getChild();
+
+ child.childValue = 'bar';
+
+ return new Promise(resolve => {
+ // Wait one JS engine turn!
+ setTimeout(() => resolve(), 0);
+ })
+ .then(() => {
+ fixture.detectChanges();
+
+ expect(child.ngOnChangesCounter).toBe(2,
+ 'expected 2 changes: initial value and changed value');
+ expect(parent.parentValue).toBe('bar',
+ 'parentValue should eq changed parent value');
+ });
+
+ }));
+
+ it('clicking "Close Child" triggers child OnDestroy', () => {
+ fixture.detectChanges();
+ getChild();
+
+ const btn = fixture.debugElement.query(By.css('button'));
+ click(btn);
+
+ fixture.detectChanges();
+ expect(child.ngOnDestroyCalled).toBe(true);
+ });
+
+ ////// helpers ///
+ /**
+ * Get the MyIfChildComp from parent; fail w/ good message if cannot.
+ */
+ function getChild() {
+
+ let childDe: DebugElement; // DebugElement that should hold the MyIfChildComp
+
+ // The Hard Way: requires detailed knowledge of the parent template
+ try {
+ childDe = fixture.debugElement.children[4].children[0];
+ } catch (err) { /* we'll report the error */ }
+
+ // DebugElement.queryAll: if we wanted all of many instances:
+ childDe = fixture.debugElement
+ .queryAll(function (de) { return de.componentInstance instanceof MyIfChildComponent; })[0];
+
+ // WE'LL USE THIS APPROACH !
+ // DebugElement.query: find first instance (if any)
+ childDe = fixture.debugElement
+ .query(function (de) { return de.componentInstance instanceof MyIfChildComponent; });
+
+ if (childDe && childDe.componentInstance) {
+ child = childDe.componentInstance;
+ } else {
+ fail('Unable to find MyIfChildComp within MyIfParentComp');
+ }
+
+ return child;
+ }
+ });
+
+});
+////////// Fakes ///////////
+
+@Component({
+ selector: 'child-1',
+ template: `Fake Child`
+})
+class FakeChildComponent { }
+
+@Component({
+ selector: 'child-1',
+ template: `Fake Child(Specs Bag
+ Specs Demo
Input/Output Component
@@ -405,7 +390,7 @@ export class ShellComponent { }
Button Component
-
Needs Content
@@ -417,13 +402,13 @@ export class ShellComponent { }
`
})
-export class BagComponent { }
+export class DemoComponent { }
//////// Aggregations ////////////
-export const bagDeclarations = [
- BagComponent,
+export const demoDeclarations = [
+ DemoComponent,
BankAccountComponent, BankAccountParentComponent,
- ButtonComponent,
+ LightswitchComponent,
Child1Component, Child2Component, Child3Component,
ExternalTemplateComponent, InnerCompWithExternalTemplateComponent,
InputComponent,
@@ -435,7 +420,7 @@ export const bagDeclarations = [
ReversePipe, ReversePipeComponent, ShellComponent
];
-export const bagProviders = [DependentService, FancyService];
+export const demoProviders = [MasterService, ValueService];
////////////////////
////////////
@@ -445,10 +430,10 @@ import { FormsModule } from '@angular/forms';
@NgModule({
imports: [BrowserModule, FormsModule],
- declarations: bagDeclarations,
- providers: bagProviders,
- entryComponents: [BagComponent],
- bootstrap: [BagComponent]
+ declarations: demoDeclarations,
+ providers: demoProviders,
+ entryComponents: [DemoComponent],
+ bootstrap: [DemoComponent]
})
-export class BagModule { }
+export class DemoModule { }
diff --git a/aio/content/examples/testing/src/app/dummy.module.ts b/aio/content/examples/testing/src/app/dummy.module.ts
new file mode 100644
index 0000000000..7ca52420d2
--- /dev/null
+++ b/aio/content/examples/testing/src/app/dummy.module.ts
@@ -0,0 +1,15 @@
+// These unused NgModules keep the Angular Language Service happy.
+// The AppModule registers the final versions of these components
+import { NgModule } from '@angular/core';
+
+import { AppComponent as app_initial } from './app-initial.component';
+@NgModule({ declarations: [ app_initial ] })
+export class AppModuleInitial {}
+
+import { BannerComponent as bc_initial } from './banner/banner-initial.component';
+@NgModule({ declarations: [ bc_initial ] })
+export class BannerModuleInitial {}
+
+import { BannerComponent as bc_external } from './banner/banner-external.component';
+@NgModule({ declarations: [ bc_external ] })
+export class BannerModuleExternal {}
diff --git a/aio/content/examples/testing/src/app/hero/hero-detail.component.no-testbed.spec.ts b/aio/content/examples/testing/src/app/hero/hero-detail.component.no-testbed.spec.ts
index 9dffe6f9de..4e806da3f9 100644
--- a/aio/content/examples/testing/src/app/hero/hero-detail.component.no-testbed.spec.ts
+++ b/aio/content/examples/testing/src/app/hero/hero-detail.component.no-testbed.spec.ts
@@ -1,7 +1,7 @@
-import { HeroDetailComponent } from './hero-detail.component';
-import { Hero } from '../model';
+import { asyncData, ActivatedRouteStub } from '../../testing';
-import { ActivatedRouteStub } from '../../testing';
+import { HeroDetailComponent } from './hero-detail.component';
+import { Hero } from '../model/hero';
////////// Tests ////////////////////
@@ -12,22 +12,21 @@ describe('HeroDetailComponent - no TestBed', () => {
let hds: any;
let router: any;
- beforeEach((done: any) => {
- expectedHero = new Hero(42, 'Bubba');
- activatedRoute = new ActivatedRouteStub();
- activatedRoute.testParamMap = { id: expectedHero.id };
-
+ beforeEach((done: DoneFn) => {
+ expectedHero = {id: 42, name: 'Bubba' };
+ const activatedRoute = new ActivatedRouteStub({ id: expectedHero.id });
router = jasmine.createSpyObj('router', ['navigate']);
hds = jasmine.createSpyObj('HeroDetailService', ['getHero', 'saveHero']);
- hds.getHero.and.returnValue(Promise.resolve(expectedHero));
- hds.saveHero.and.returnValue(Promise.resolve(expectedHero));
+ hds.getHero.and.returnValue(asyncData(expectedHero));
+ hds.saveHero.and.returnValue(asyncData(expectedHero));
comp = new HeroDetailComponent(hds, activatedRoute, router);
comp.ngOnInit();
// OnInit calls HDS.getHero; wait for it to get the fake hero
- hds.getHero.calls.first().returnValue.then(done);
+ hds.getHero.calls.first().returnValue.subscribe(done);
+
});
it('should expose the hero retrieved from the service', () => {
@@ -45,11 +44,11 @@ describe('HeroDetailComponent - no TestBed', () => {
expect(router.navigate.calls.any()).toBe(false, 'router.navigate not called yet');
});
- it('should navigate when click save resolves', (done: any) => {
+ it('should navigate when click save resolves', (done: DoneFn) => {
comp.save();
// waits for async save to complete before navigating
hds.saveHero.calls.first().returnValue
- .then(() => {
+ .subscribe(() => {
expect(router.navigate.calls.any()).toBe(true, 'router.navigate called');
done();
});
diff --git a/aio/content/examples/testing/src/app/hero/hero-detail.component.spec.ts b/aio/content/examples/testing/src/app/hero/hero-detail.component.spec.ts
index 050fe46eec..2326e3dded 100644
--- a/aio/content/examples/testing/src/app/hero/hero-detail.component.spec.ts
+++ b/aio/content/examples/testing/src/app/hero/hero-detail.component.spec.ts
@@ -3,21 +3,20 @@ import {
async, ComponentFixture, fakeAsync, inject, TestBed, tick
} from '@angular/core/testing';
-import { By } from '@angular/platform-browser';
-import { DebugElement } from '@angular/core';
+import { Router } from '@angular/router';
import {
- ActivatedRoute, ActivatedRouteStub, click, newEvent, Router, RouterStub
+ ActivatedRoute, ActivatedRouteStub, asyncData, click, newEvent
} from '../../testing';
-import { Hero } from '../model';
+import { Hero } from '../model/hero';
import { HeroDetailComponent } from './hero-detail.component';
import { HeroDetailService } from './hero-detail.service';
import { HeroModule } from './hero.module';
////// Testing Vars //////
let activatedRoute: ActivatedRouteStub;
-let comp: HeroDetailComponent;
+let component: HeroDetailComponent;
let fixture: ComponentFixture;
let page: Page;
@@ -32,36 +31,38 @@ describe('HeroDetailComponent', () => {
describe('with SharedModule setup', sharedModuleSetup);
});
-////////////////////
+///////////////////
+
function overrideSetup() {
// #docregion hds-spy
class HeroDetailServiceSpy {
- testHero = new Hero(42, 'Test Hero');
+ testHero: Hero = {id: 42, name: 'Test Hero' };
+ /* emit cloned test hero */
getHero = jasmine.createSpy('getHero').and.callFake(
- () => Promise
- .resolve(true)
- .then(() => Object.assign({}, this.testHero))
+ () => asyncData(Object.assign({}, this.testHero))
);
+ /* emit clone of test hero, with changes merged in */
saveHero = jasmine.createSpy('saveHero').and.callFake(
- (hero: Hero) => Promise
- .resolve(true)
- .then(() => Object.assign(this.testHero, hero))
+ (hero: Hero) => asyncData(Object.assign(this.testHero, hero))
);
}
+
// #enddocregion hds-spy
// the `id` value is irrelevant because ignored by service stub
- beforeEach(() => activatedRoute.testParamMap = { id: 99999 } );
+ beforeEach(() => activatedRoute.setParamMap({ id: 99999 }));
// #docregion setup-override
- beforeEach( async(() => {
+ beforeEach(async(() => {
+ const routerSpy = createRouterSpy();
+
TestBed.configureTestingModule({
imports: [ HeroModule ],
providers: [
{ provide: ActivatedRoute, useValue: activatedRoute },
- { provide: Router, useClass: RouterStub},
+ { provide: Router, useValue: routerSpy},
// #enddocregion setup-override
// HeroDetailService at this level is IRRELEVANT!
{ provide: HeroDetailService, useValue: {} }
@@ -87,7 +88,7 @@ function overrideSetup() {
// #docregion override-tests
let hdsSpy: HeroDetailServiceSpy;
- beforeEach( async(() => {
+ beforeEach(async(() => {
createComponent();
// get the component's injected HeroDetailServiceSpy
hdsSpy = fixture.debugElement.injector.get(HeroDetailService) as any;
@@ -108,7 +109,7 @@ function overrideSetup() {
page.nameInput.value = newName;
page.nameInput.dispatchEvent(newEvent('input')); // tell Angular
- expect(comp.hero.name).toBe(newName, 'component hero has new name');
+ expect(component.hero.name).toBe(newName, 'component hero has new name');
expect(hdsSpy.testHero.name).toBe(origName, 'service hero unchanged before save');
click(page.saveBtn);
@@ -116,36 +117,40 @@ function overrideSetup() {
tick(); // wait for async save to complete
expect(hdsSpy.testHero.name).toBe(newName, 'service hero has new name after save');
- expect(page.navSpy.calls.any()).toBe(true, 'router.navigate called');
+ expect(page.navigateSpy.calls.any()).toBe(true, 'router.navigate called');
}));
// #enddocregion override-tests
it('fixture injected service is not the component injected service',
- inject([HeroDetailService], (service: HeroDetailService) => {
+ // inject gets the service from the fixture
+ inject([HeroDetailService], (fixtureService: HeroDetailService) => {
- expect(service).toEqual({}, 'service injected from fixture');
- expect(hdsSpy).toBeTruthy('service injected into component');
+ // use `fixture.debugElement.injector` to get service from component
+ const componentService = fixture.debugElement.injector.get(HeroDetailService);
+
+ expect(fixtureService).not.toBe(componentService, 'service injected from fixture');
}));
}
////////////////////
-import { HEROES, FakeHeroService } from '../model/testing';
-import { HeroService } from '../model';
+import { getTestHeroes, TestHeroService, HeroService } from '../model/testing/test-hero.service';
-const firstHero = HEROES[0];
+const firstHero = getTestHeroes()[0];
function heroModuleSetup() {
// #docregion setup-hero-module
- beforeEach( async(() => {
- TestBed.configureTestingModule({
+ beforeEach(async(() => {
+ const routerSpy = createRouterSpy();
+
+ TestBed.configureTestingModule({
imports: [ HeroModule ],
// #enddocregion setup-hero-module
// declarations: [ HeroDetailComponent ], // NO! DOUBLE DECLARATION
// #docregion setup-hero-module
providers: [
{ provide: ActivatedRoute, useValue: activatedRoute },
- { provide: HeroService, useClass: FakeHeroService },
- { provide: Router, useClass: RouterStub},
+ { provide: HeroService, useClass: TestHeroService },
+ { provide: Router, useValue: routerSpy},
]
})
.compileComponents();
@@ -156,9 +161,9 @@ function heroModuleSetup() {
describe('when navigate to existing hero', () => {
let expectedHero: Hero;
- beforeEach( async(() => {
+ beforeEach(async(() => {
expectedHero = firstHero;
- activatedRoute.testParamMap = { id: expectedHero.id };
+ activatedRoute.setParamMap({ id: expectedHero.id });
createComponent();
}));
@@ -170,7 +175,7 @@ function heroModuleSetup() {
it('should navigate when click cancel', () => {
click(page.cancelBtn);
- expect(page.navSpy.calls.any()).toBe(true, 'router.navigate called');
+ expect(page.navigateSpy.calls.any()).toBe(true, 'router.navigate called');
});
it('should save when click save but not navigate immediately', () => {
@@ -181,30 +186,31 @@ function heroModuleSetup() {
click(page.saveBtn);
expect(saveSpy.calls.any()).toBe(true, 'HeroDetailService.save called');
- expect(page.navSpy.calls.any()).toBe(false, 'router.navigate not called');
+ expect(page.navigateSpy.calls.any()).toBe(false, 'router.navigate not called');
});
it('should navigate when click save and save resolves', fakeAsync(() => {
click(page.saveBtn);
tick(); // wait for async save to complete
- expect(page.navSpy.calls.any()).toBe(true, 'router.navigate called');
+ expect(page.navigateSpy.calls.any()).toBe(true, 'router.navigate called');
}));
// #docregion title-case-pipe
it('should convert hero name to Title Case', () => {
const inputName = 'quick BROWN fox';
const titleCaseName = 'Quick Brown Fox';
+ const { nameInput, nameDisplay } = page;
// simulate user entering new name into the input box
- page.nameInput.value = inputName;
+ nameInput.value = inputName;
// dispatch a DOM event so that Angular learns of input value change.
- page.nameInput.dispatchEvent(newEvent('input'));
+ nameInput.dispatchEvent(newEvent('input'));
// Tell Angular to update the output span through the title pipe
fixture.detectChanges();
- expect(page.nameDisplay.textContent).toBe(titleCaseName);
+ expect(nameDisplay.textContent).toBe(titleCaseName);
});
// #enddocregion title-case-pipe
// #enddocregion selected-tests
@@ -214,10 +220,10 @@ function heroModuleSetup() {
// #docregion route-no-id
describe('when navigate with no hero id', () => {
- beforeEach( async( createComponent ));
+ beforeEach(async( createComponent ));
it('should have hero.id === 0', () => {
- expect(comp.hero.id).toBe(0);
+ expect(component.hero.id).toBe(0);
});
it('should display empty hero name', () => {
@@ -228,14 +234,14 @@ function heroModuleSetup() {
// #docregion route-bad-id
describe('when navigate to non-existent hero id', () => {
- beforeEach( async(() => {
- activatedRoute.testParamMap = { id: 99999 };
+ beforeEach(async(() => {
+ activatedRoute.setParamMap({ id: 99999 });
createComponent();
}));
it('should try to navigate back to hero list', () => {
- expect(page.gotoSpy.calls.any()).toBe(true, 'comp.gotoList called');
- expect(page.navSpy.calls.any()).toBe(true, 'router.navigate called');
+ expect(page.gotoListSpy.calls.any()).toBe(true, 'comp.gotoList called');
+ expect(page.navigateSpy.calls.any()).toBe(true, 'router.navigate called');
});
});
// #enddocregion route-bad-id
@@ -263,23 +269,25 @@ import { TitleCasePipe } from '../shared/title-case.pipe';
function formsModuleSetup() {
// #docregion setup-forms-module
- beforeEach( async(() => {
- TestBed.configureTestingModule({
+ beforeEach(async(() => {
+ const routerSpy = createRouterSpy();
+
+ TestBed.configureTestingModule({
imports: [ FormsModule ],
declarations: [ HeroDetailComponent, TitleCasePipe ],
providers: [
{ provide: ActivatedRoute, useValue: activatedRoute },
- { provide: HeroService, useClass: FakeHeroService },
- { provide: Router, useClass: RouterStub},
+ { provide: HeroService, useClass: TestHeroService },
+ { provide: Router, useValue: routerSpy},
]
})
.compileComponents();
}));
// #enddocregion setup-forms-module
- it('should display 1st hero\'s name', fakeAsync(() => {
+ it('should display 1st hero\'s name', async(() => {
const expectedHero = firstHero;
- activatedRoute.testParamMap = { id: expectedHero.id };
+ activatedRoute.setParamMap({ id: expectedHero.id });
createComponent().then(() => {
expect(page.nameDisplay.textContent).toBe(expectedHero.name);
});
@@ -291,23 +299,25 @@ import { SharedModule } from '../shared/shared.module';
function sharedModuleSetup() {
// #docregion setup-shared-module
- beforeEach( async(() => {
+ beforeEach(async(() => {
+ const routerSpy = createRouterSpy();
+
TestBed.configureTestingModule({
imports: [ SharedModule ],
declarations: [ HeroDetailComponent ],
providers: [
{ provide: ActivatedRoute, useValue: activatedRoute },
- { provide: HeroService, useClass: FakeHeroService },
- { provide: Router, useClass: RouterStub},
+ { provide: HeroService, useClass: TestHeroService },
+ { provide: Router, useValue: routerSpy},
]
})
.compileComponents();
}));
// #enddocregion setup-shared-module
- it('should display 1st hero\'s name', fakeAsync(() => {
+ it('should display 1st hero\'s name', async(() => {
const expectedHero = firstHero;
- activatedRoute.testParamMap = { id: expectedHero.id };
+ activatedRoute.setParamMap({ id: expectedHero.id });
createComponent().then(() => {
expect(page.nameDisplay.textContent).toBe(expectedHero.name);
});
@@ -320,45 +330,51 @@ function sharedModuleSetup() {
/** Create the HeroDetailComponent, initialize it, set test variables */
function createComponent() {
fixture = TestBed.createComponent(HeroDetailComponent);
- comp = fixture.componentInstance;
- page = new Page();
+ component = fixture.componentInstance;
+ page = new Page(fixture);
// 1st change detection triggers ngOnInit which gets a hero
fixture.detectChanges();
return fixture.whenStable().then(() => {
// 2nd change detection displays the async-fetched hero
fixture.detectChanges();
- page.addPageElements();
});
}
// #enddocregion create-component
// #docregion page
class Page {
- gotoSpy: jasmine.Spy;
- navSpy: jasmine.Spy;
+ // getter properties wait to query the DOM until called.
+ get buttons() { return this.queryAll('button'); }
+ get saveBtn() { return this.buttons[0]; }
+ get cancelBtn() { return this.buttons[1]; }
+ get nameDisplay() { return this.query('span'); }
+ get nameInput() { return this.query('input'); }
- saveBtn: DebugElement;
- cancelBtn: DebugElement;
- nameDisplay: HTMLElement;
- nameInput: HTMLInputElement;
+ gotoListSpy: jasmine.Spy;
+ navigateSpy: jasmine.Spy;
- constructor() {
- const router = TestBed.get(Router); // get router from root injector
- this.gotoSpy = spyOn(comp, 'gotoList').and.callThrough();
- this.navSpy = spyOn(router, 'navigate');
+ constructor(fixture: ComponentFixture) {
+ // get the navigate spy from the injected router spy object
+ const routerSpy = fixture.debugElement.injector.get(Router);
+ this.navigateSpy = routerSpy.navigate;
+
+ // spy on component's `gotoList()` method
+ const component = fixture.componentInstance;
+ this.gotoListSpy = spyOn(component, 'gotoList').and.callThrough();
}
- /** Add page elements after hero arrives */
- addPageElements() {
- if (comp.hero) {
- // have a hero so these elements are now in the DOM
- const buttons = fixture.debugElement.queryAll(By.css('button'));
- this.saveBtn = buttons[0];
- this.cancelBtn = buttons[1];
- this.nameDisplay = fixture.debugElement.query(By.css('span')).nativeElement;
- this.nameInput = fixture.debugElement.query(By.css('input')).nativeElement;
- }
+ //// query helpers ////
+ private query(selector: string): T {
+ return fixture.nativeElement.querySelector(selector);
+ }
+
+ private queryAll(selector: string): T[] {
+ return fixture.nativeElement.querySelectorAll(selector);
}
}
// #enddocregion page
+
+function createRouterSpy() {
+ return jasmine.createSpyObj('Router', ['navigate']);
+}
diff --git a/aio/content/examples/testing/src/app/hero/hero-detail.component.ts b/aio/content/examples/testing/src/app/hero/hero-detail.component.ts
index b595a51371..fdfea6c4fa 100644
--- a/aio/content/examples/testing/src/app/hero/hero-detail.component.ts
+++ b/aio/content/examples/testing/src/app/hero/hero-detail.component.ts
@@ -2,7 +2,6 @@
// #docplaster
import { Component, Input, OnInit } from '@angular/core';
import { ActivatedRoute, Router } from '@angular/router';
-import 'rxjs/add/operator/map';
import { Hero } from '../model/hero';
import { HeroDetailService } from './hero-detail.service';
@@ -29,18 +28,18 @@ export class HeroDetailComponent implements OnInit {
// #docregion ng-on-init
ngOnInit(): void {
// get hero when `id` param changes
- this.route.paramMap.subscribe(p => this.getHero(p.has('id') && p.get('id')));
+ this.route.paramMap.subscribe(pmap => this.getHero(pmap.get('id')));
}
// #enddocregion ng-on-init
private getHero(id: string): void {
- // when no id or id===0, create new hero
+ // when no id or id===0, create new blank hero
if (!id) {
- this.hero = new Hero();
+ this.hero = { id: 0, name: '' } as Hero;
return;
}
- this.heroDetailService.getHero(id).then(hero => {
+ this.heroDetailService.getHero(id).subscribe(hero => {
if (hero) {
this.hero = hero;
} else {
@@ -50,7 +49,7 @@ export class HeroDetailComponent implements OnInit {
}
save(): void {
- this.heroDetailService.saveHero(this.hero).then(() => this.gotoList());
+ this.heroDetailService.saveHero(this.hero).subscribe(() => this.gotoList());
}
cancel() { this.gotoList(); }
diff --git a/aio/content/examples/testing/src/app/hero/hero-detail.service.ts b/aio/content/examples/testing/src/app/hero/hero-detail.service.ts
index f7dc887827..fc875f2df7 100644
--- a/aio/content/examples/testing/src/app/hero/hero-detail.service.ts
+++ b/aio/content/examples/testing/src/app/hero/hero-detail.service.ts
@@ -1,5 +1,8 @@
import { Injectable } from '@angular/core';
+import { Observable } from 'rxjs/Observable';
+import { map } from 'rxjs/operators';
+
import { Hero } from '../model/hero';
import { HeroService } from '../model/hero.service';
@@ -10,13 +13,15 @@ export class HeroDetailService {
// #enddocregion prototype
// Returns a clone which caller may modify safely
- getHero(id: number | string): Promise {
+ getHero(id: number | string): Observable {
if (typeof id === 'string') {
id = parseInt(id as string, 10);
}
- return this.heroService.getHero(id).then(hero => {
- return hero ? Object.assign({}, hero) : null; // clone or null
- });
+ return this.heroService.getHero(id).pipe(
+ map(hero => {
+ return hero ? Object.assign({}, hero) : null; // clone or null
+ })
+ );
}
saveHero(hero: Hero) {
diff --git a/aio/content/examples/testing/src/app/hero/hero-list.component.css b/aio/content/examples/testing/src/app/hero/hero-list.component.css
index d939ab565d..35e45af98d 100644
--- a/aio/content/examples/testing/src/app/hero/hero-list.component.css
+++ b/aio/content/examples/testing/src/app/hero/hero-list.component.css
@@ -6,7 +6,7 @@
margin: 0 0 2em 0;
list-style-type: none;
padding: 0;
- width: 10em;
+ width: 15em;
}
.heroes li {
cursor: pointer;
diff --git a/aio/content/examples/testing/src/app/hero/hero-list.component.spec.ts b/aio/content/examples/testing/src/app/hero/hero-list.component.spec.ts
index dbf9d37d71..d178fa6098 100644
--- a/aio/content/examples/testing/src/app/hero/hero-list.component.spec.ts
+++ b/aio/content/examples/testing/src/app/hero/hero-list.component.spec.ts
@@ -4,15 +4,18 @@ import { async, ComponentFixture, fakeAsync, TestBed, tick
import { By } from '@angular/platform-browser';
import { DebugElement } from '@angular/core';
-import { addMatchers, newEvent, Router, RouterStub
-} from '../../testing';
+import { Router } from '@angular/router';
-import { HEROES, FakeHeroService } from '../model/testing';
+import { addMatchers, newEvent } from '../../testing';
+
+import { getTestHeroes, TestHeroService } from '../model/testing/test-hero.service';
import { HeroModule } from './hero.module';
import { HeroListComponent } from './hero-list.component';
import { HighlightDirective } from '../shared/highlight.directive';
-import { HeroService } from '../model';
+import { HeroService } from '../model/hero.service';
+
+const HEROES = getTestHeroes();
let comp: HeroListComponent;
let fixture: ComponentFixture;
@@ -22,13 +25,15 @@ let page: Page;
describe('HeroListComponent', () => {
- beforeEach( async(() => {
+ beforeEach(async(() => {
addMatchers();
+ const routerSpy = jasmine.createSpyObj('Router', ['navigate']);
+
TestBed.configureTestingModule({
imports: [HeroModule],
providers: [
- { provide: HeroService, useClass: FakeHeroService },
- { provide: Router, useClass: RouterStub}
+ { provide: HeroService, useClass: TestHeroService },
+ { provide: Router, useValue: routerSpy}
]
})
.compileComponents()
@@ -42,7 +47,7 @@ describe('HeroListComponent', () => {
it('1st hero should match 1st test hero', () => {
const expectedHero = HEROES[0];
const actualHero = page.heroRows[0].textContent;
- expect(actualHero).toContain(expectedHero.id, 'hero.id');
+ expect(actualHero).toContain(expectedHero.id.toString(), 'hero.id');
expect(actualHero).toContain(expectedHero.name, 'hero.name');
});
@@ -118,22 +123,21 @@ class Page {
/** Hero line elements */
heroRows: HTMLLIElement[];
- /** Highlighted element */
+ /** Highlighted DebugElement */
highlightDe: DebugElement;
/** Spy on router navigate method */
navSpy: jasmine.Spy;
constructor() {
- this.heroRows = fixture.debugElement.queryAll(By.css('li')).map(de => de.nativeElement);
+ const heroRowNodes = fixture.nativeElement.querySelectorAll('li');
+ this.heroRows = Array.from(heroRowNodes);
// Find the first element with an attached HighlightDirective
this.highlightDe = fixture.debugElement.query(By.directive(HighlightDirective));
- // Get the component's injected router and spy on it
- const router = fixture.debugElement.injector.get(Router);
- this.navSpy = spyOn(router, 'navigate');
+ // Get the component's injected router navigation spy
+ const routerSpy = fixture.debugElement.injector.get(Router);
+ this.navSpy = routerSpy.navigate as jasmine.Spy;
};
}
-
-
diff --git a/aio/content/examples/testing/src/app/hero/hero-list.component.ts b/aio/content/examples/testing/src/app/hero/hero-list.component.ts
index 614976319b..e28d4b5c48 100644
--- a/aio/content/examples/testing/src/app/hero/hero-list.component.ts
+++ b/aio/content/examples/testing/src/app/hero/hero-list.component.ts
@@ -1,6 +1,8 @@
import { Component, OnInit } from '@angular/core';
import { Router } from '@angular/router';
+import { Observable } from 'rxjs/Observable';
+
import { Hero } from '../model/hero';
import { HeroService } from '../model/hero.service';
@@ -10,7 +12,7 @@ import { HeroService } from '../model/hero.service';
styleUrls: [ './hero-list.component.css' ]
})
export class HeroListComponent implements OnInit {
- heroes: Promise;
+ heroes: Observable;
selectedHero: Hero;
constructor(
diff --git a/aio/content/examples/testing/src/app/in-memory-data.service.ts b/aio/content/examples/testing/src/app/in-memory-data.service.ts
new file mode 100644
index 0000000000..81f26b674a
--- /dev/null
+++ b/aio/content/examples/testing/src/app/in-memory-data.service.ts
@@ -0,0 +1,26 @@
+// #docregion , init
+import { InMemoryDbService } from 'angular-in-memory-web-api';
+import { QUOTES } from './twain/twain.data';
+
+// Adjust to reduce number of quotes
+const maxQuotes = Infinity; // 0;
+
+/** Create in-memory database of heroes and quotes */
+export class InMemoryDataService implements InMemoryDbService {
+ createDb() {
+ const heroes = [
+ { id: 11, name: 'Mr. Nice' },
+ { id: 12, name: 'Narco' },
+ { id: 13, name: 'Bombasto' },
+ { id: 14, name: 'Celeritas' },
+ { id: 15, name: 'Magneta' },
+ { id: 16, name: 'RubberMan' },
+ { id: 17, name: 'Dynama' },
+ { id: 18, name: 'Dr IQ' },
+ { id: 19, name: 'Magma' },
+ { id: 20, name: 'Tornado' }
+ ];
+
+ return { heroes, quotes: QUOTES.slice(0, maxQuotes) };
+ }
+}
diff --git a/aio/content/examples/testing/src/app/model/hero.service.spec.ts b/aio/content/examples/testing/src/app/model/hero.service.spec.ts
new file mode 100644
index 0000000000..b228692154
--- /dev/null
+++ b/aio/content/examples/testing/src/app/model/hero.service.spec.ts
@@ -0,0 +1,215 @@
+import { HttpClientTestingModule, HttpTestingController } from '@angular/common/http/testing';
+
+// Other imports
+import { TestBed } from '@angular/core/testing';
+import { HttpClient, HttpResponse, HttpErrorResponse } from '@angular/common/http';
+
+import { asyncData, asyncError } from '../../testing/async-observable-helpers';
+
+import { Hero } from './hero';
+import { HeroService } from './hero.service';
+
+describe ('HeroesService (with spies)', () => {
+ // #docregion test-with-spies
+ let httpClientSpy: { get: jasmine.Spy };
+ let heroService: HeroService;
+
+ beforeEach(() => {
+ // Todo: spy on other methods too
+ httpClientSpy = jasmine.createSpyObj('HttpClient', ['get']);
+ heroService = new HeroService( httpClientSpy);
+ });
+
+ it('should return expected heroes (HttpClient called once)', () => {
+ const expectedHeroes: Hero[] =
+ [{ id: 1, name: 'A' }, { id: 2, name: 'B' }];
+
+ httpClientSpy.get.and.returnValue(asyncData(expectedHeroes));
+
+ heroService.getHeroes().subscribe(
+ heroes => expect(heroes).toEqual(expectedHeroes, 'expected heroes'),
+ fail
+ );
+ expect(httpClientSpy.get.calls.count()).toBe(1, 'one call');
+ });
+
+ it('should return an error when the server returns a 404', () => {
+ const errorResponse = new HttpErrorResponse({
+ error: 'test 404 error',
+ status: 404, statusText: 'Not Found'
+ });
+
+ httpClientSpy.get.and.returnValue(asyncError(errorResponse));
+
+ heroService.getHeroes().subscribe(
+ heroes => fail('expected an error, not heroes'),
+ error => expect(error.message).toContain('test 404 error')
+ );
+ });
+ // #enddocregion test-with-spies
+
+});
+
+describe('HeroesService (with mocks)', () => {
+ let httpClient: HttpClient;
+ let httpTestingController: HttpTestingController;
+ let heroService: HeroService;
+
+ beforeEach(() => {
+ TestBed.configureTestingModule({
+ // Import the HttpClient mocking services
+ imports: [ HttpClientTestingModule ],
+ // Provide the service-under-test
+ providers: [ HeroService ]
+ });
+
+ // Inject the http, test controller, and service-under-test
+ // as they will be referenced by each test.
+ httpClient = TestBed.get(HttpClient);
+ httpTestingController = TestBed.get(HttpTestingController);
+ heroService = TestBed.get(HeroService);
+ });
+
+ afterEach(() => {
+ // After every test, assert that there are no more pending requests.
+ httpTestingController.verify();
+ });
+
+ /// HeroService method tests begin ///
+ describe('#getHeroes', () => {
+ let expectedHeroes: Hero[];
+
+ beforeEach(() => {
+ heroService = TestBed.get(HeroService);
+ expectedHeroes = [
+ { id: 1, name: 'A' },
+ { id: 2, name: 'B' },
+ ] as Hero[];
+ });
+
+ it('should return expected heroes (called once)', () => {
+ heroService.getHeroes().subscribe(
+ heroes => expect(heroes).toEqual(expectedHeroes, 'should return expected heroes'),
+ fail
+ );
+
+ // HeroService should have made one request to GET heroes from expected URL
+ const req = httpTestingController.expectOne(heroService.heroesUrl);
+ expect(req.request.method).toEqual('GET');
+
+ // Respond with the mock heroes
+ req.flush(expectedHeroes);
+ });
+
+ it('should be OK returning no heroes', () => {
+ heroService.getHeroes().subscribe(
+ heroes => expect(heroes.length).toEqual(0, 'should have empty heroes array'),
+ fail
+ );
+
+ const req = httpTestingController.expectOne(heroService.heroesUrl);
+ req.flush([]); // Respond with no heroes
+ });
+
+ it('should turn 404 into a user-friendly error', () => {
+ const msg = 'Deliberate 404';
+ heroService.getHeroes().subscribe(
+ heroes => fail('expected to fail'),
+ error => expect(error.message).toContain(msg)
+ );
+
+ const req = httpTestingController.expectOne(heroService.heroesUrl);
+
+ // respond with a 404 and the error message in the body
+ req.flush(msg, {status: 404, statusText: 'Not Found'});
+ });
+
+ it('should return expected heroes (called multiple times)', () => {
+ heroService.getHeroes().subscribe();
+ heroService.getHeroes().subscribe();
+ heroService.getHeroes().subscribe(
+ heroes => expect(heroes).toEqual(expectedHeroes, 'should return expected heroes'),
+ fail
+ );
+
+ const requests = httpTestingController.match(heroService.heroesUrl);
+ expect(requests.length).toEqual(3, 'calls to getHeroes()');
+
+ // Respond to each request with different mock hero results
+ requests[0].flush([]);
+ requests[1].flush([{id: 1, name: 'bob'}]);
+ requests[2].flush(expectedHeroes);
+ });
+ });
+
+ describe('#updateHero', () => {
+ // Expecting the query form of URL so should not 404 when id not found
+ const makeUrl = (id: number) => `${heroService.heroesUrl}/?id=${id}`;
+
+ it('should update a hero and return it', () => {
+
+ const updateHero: Hero = { id: 1, name: 'A' };
+
+ heroService.updateHero(updateHero).subscribe(
+ data => expect(data).toEqual(updateHero, 'should return the hero'),
+ fail
+ );
+
+ // HeroService should have made one request to PUT hero
+ const req = httpTestingController.expectOne(heroService.heroesUrl);
+ expect(req.request.method).toEqual('PUT');
+ expect(req.request.body).toEqual(updateHero);
+
+ // Expect server to return the hero after PUT
+ const expectedResponse = new HttpResponse(
+ { status: 200, statusText: 'OK', body: updateHero });
+ req.event(expectedResponse);
+ });
+
+ it('should turn 404 error into user-facing error', () => {
+ const msg = 'Deliberate 404';
+ const updateHero: Hero = { id: 1, name: 'A' };
+ heroService.updateHero(updateHero).subscribe(
+ heroes => fail('expected to fail'),
+ error => expect(error.message).toContain(msg)
+ );
+
+ const req = httpTestingController.expectOne(heroService.heroesUrl);
+
+ // respond with a 404 and the error message in the body
+ req.flush(msg, {status: 404, statusText: 'Not Found'});
+ });
+
+ // #docregion network-error
+ it('should turn network error into user-facing error', () => {
+ const emsg = 'simulated network error';
+
+ const updateHero: Hero = { id: 1, name: 'A' };
+ heroService.updateHero(updateHero).subscribe(
+ heroes => fail('expected to fail'),
+ error => expect(error.message).toContain(emsg)
+ );
+
+ const req = httpTestingController.expectOne(heroService.heroesUrl);
+
+ // Create mock ErrorEvent, raised when something goes wrong at the network level.
+ // Connection timeout, DNS error, offline, etc
+ const errorEvent = new ErrorEvent('so sad', {
+ message: emsg,
+ // #enddocregion network-error
+ // The rest of this is optional and not used.
+ // Just showing that you could provide this too.
+ filename: 'HeroService.ts',
+ lineno: 42,
+ colno: 21
+ // #docregion network-error
+ });
+
+ // Respond with mock error
+ req.error(errorEvent);
+ });
+ // #enddocregion network-error
+ });
+
+ // TODO: test other HeroService methods
+});
diff --git a/aio/content/examples/testing/src/app/model/hero.service.ts b/aio/content/examples/testing/src/app/model/hero.service.ts
index 667d47312b..ac55cde5fc 100644
--- a/aio/content/examples/testing/src/app/model/hero.service.ts
+++ b/aio/content/examples/testing/src/app/model/hero.service.ts
@@ -1,30 +1,98 @@
import { Injectable } from '@angular/core';
+import { HttpClient, HttpHeaders, HttpErrorResponse } from '@angular/common/http';
-import { Hero } from './hero';
-import { HEROES } from './test-heroes';
+import { Observable } from 'rxjs/Observable';
+import { of } from 'rxjs/observable/of';
+import { catchError, map, tap } from 'rxjs/operators';
+
+import { Hero } from './hero';
+
+const httpOptions = {
+ headers: new HttpHeaders({ 'Content-Type': 'application/json' })
+};
@Injectable()
-/** Dummy HeroService. Pretend it makes real http requests */
export class HeroService {
- getHeroes() {
- return Promise.resolve(HEROES);
+
+ readonly heroesUrl = 'api/heroes'; // URL to web api
+
+ constructor(private http: HttpClient) { }
+
+ /** GET heroes from the server */
+ getHeroes (): Observable {
+ return this.http.get(this.heroesUrl)
+ .pipe(
+ tap(heroes => this.log(`fetched heroes`)),
+ catchError(this.handleError('getHeroes'))
+ ) as Observable;
}
- getHero(id: number | string): Promise {
+ /** GET hero by id. Return `undefined` when id not found */
+ getHero(id: number | string): Observable {
if (typeof id === 'string') {
id = parseInt(id as string, 10);
}
- return this.getHeroes().then(
- heroes => heroes.find(hero => hero.id === id)
+ const url = `${this.heroesUrl}/?id=${id}`;
+ return this.http.get(url)
+ .pipe(
+ map(heroes => heroes[0]), // returns a {0|1} element array
+ tap(h => {
+ const outcome = h ? `fetched` : `did not find`;
+ this.log(`${outcome} hero id=${id}`);
+ }),
+ catchError(this.handleError(`getHero id=${id}`))
+ );
+ }
+
+ //////// Save methods //////////
+
+ /** POST: add a new hero to the server */
+ addHero (hero: Hero): Observable {
+ return this.http.post(this.heroesUrl, hero, httpOptions).pipe(
+ tap((hero: Hero) => this.log(`added hero w/ id=${hero.id}`)),
+ catchError(this.handleError('addHero'))
+ );
+ }
+ /** DELETE: delete the hero from the server */
+ deleteHero (hero: Hero | number): Observable {
+ const id = typeof hero === 'number' ? hero : hero.id;
+ const url = `${this.heroesUrl}/${id}`;
+
+ return this.http.delete(url, httpOptions).pipe(
+ tap(_ => this.log(`deleted hero id=${id}`)),
+ catchError(this.handleError('deleteHero'))
);
}
- updateHero(hero: Hero): Promise {
- return this.getHero(hero.id).then(h => {
- if (!h) {
- throw new Error(`Hero ${hero.id} not found`);
- }
- return Object.assign(h, hero);
- });
+ /** PUT: update the hero on the server */
+ updateHero (hero: Hero): Observable {
+ return this.http.put(this.heroesUrl, hero, httpOptions).pipe(
+ tap(_ => this.log(`updated hero id=${hero.id}`)),
+ catchError(this.handleError('updateHero'))
+ );
+ }
+ /**
+ * Returns a function that handles Http operation failures.
+ * This error handler lets the app continue to run as if no error occurred.
+ * @param operation - name of the operation that failed
+ */
+ private handleError (operation = 'operation') {
+ return (error: HttpErrorResponse): Observable => {
+
+ // TODO: send the error to remote logging infrastructure
+ console.error(error); // log to console instead
+
+ const message = (error.error instanceof ErrorEvent) ?
+ error.error.message :
+ `server returned code ${error.status} with body "${error.error}"`;
+
+ // TODO: better job of transforming error for user consumption
+ throw new Error(`${operation} failed: ${message}`);
+ };
+
+ }
+
+ private log(message: string) {
+ console.log('HeroService: ' + message);
}
}
diff --git a/aio/content/examples/testing/src/app/model/hero.spec.ts b/aio/content/examples/testing/src/app/model/hero.spec.ts
deleted file mode 100644
index e8acf913f2..0000000000
--- a/aio/content/examples/testing/src/app/model/hero.spec.ts
+++ /dev/null
@@ -1,20 +0,0 @@
-// #docregion
-import { Hero } from './hero';
-
-describe('Hero', () => {
- it('has name', () => {
- const hero = new Hero(1, 'Super Cat');
- expect(hero.name).toBe('Super Cat');
- });
-
- it('has id', () => {
- const hero = new Hero(1, 'Super Cat');
- expect(hero.id).toBe(1);
- });
-
- it('can clone itself', () => {
- const hero = new Hero(1, 'Super Cat');
- const clone = hero.clone();
- expect(hero).toEqual(clone);
- });
-});
diff --git a/aio/content/examples/testing/src/app/model/hero.ts b/aio/content/examples/testing/src/app/model/hero.ts
index 6a98f0dfdc..93e87f4770 100644
--- a/aio/content/examples/testing/src/app/model/hero.ts
+++ b/aio/content/examples/testing/src/app/model/hero.ts
@@ -1,4 +1,8 @@
-export class Hero {
- constructor(public id = 0, public name = '') { }
- clone() { return new Hero(this.id, this.name); }
+export interface Hero {
+ id: number;
+ name: string;
}
+
+// SystemJS bug:
+// TS file must export something real in JS, not just interfaces
+export const _dummy = undefined;
diff --git a/aio/content/examples/testing/src/app/model/http-hero.service.spec.ts b/aio/content/examples/testing/src/app/model/http-hero.service.spec.ts
index c16b421274..6973d01c15 100644
--- a/aio/content/examples/testing/src/app/model/http-hero.service.spec.ts
+++ b/aio/content/examples/testing/src/app/model/http-hero.service.spec.ts
@@ -1,3 +1,6 @@
+/**
+ * Test the HeroService when implemented with the OLD HttpModule
+ */
import {
async, inject, TestBed
} from '@angular/core/testing';
@@ -12,14 +15,11 @@ import {
} from '@angular/http';
import { Observable } from 'rxjs/Observable';
-import 'rxjs/add/observable/of';
-
-import 'rxjs/add/operator/catch';
-import 'rxjs/add/operator/do';
-import 'rxjs/add/operator/toPromise';
+import { of } from 'rxjs/observable/of';
+import { catchError, tap } from 'rxjs/operators';
import { Hero } from './hero';
-import { HttpHeroService as HeroService } from './http-hero.service';
+import { HttpHeroService } from './http-hero.service';
const makeHeroData = () => [
{ id: 1, name: 'Windstorm' },
@@ -29,99 +29,100 @@ const makeHeroData = () => [
] as Hero[];
//////// Tests /////////////
-describe('Http-HeroService (mockBackend)', () => {
+describe('HttpHeroService (using old HttpModule)', () => {
+ let backend: MockBackend;
+ let service: HttpHeroService;
- beforeEach( async(() => {
+ beforeEach( () => {
TestBed.configureTestingModule({
imports: [ HttpModule ],
providers: [
- HeroService,
+ HttpHeroService,
{ provide: XHRBackend, useClass: MockBackend }
]
- })
- .compileComponents();
- }));
+ });
+ });
- it('can instantiate service when inject service',
- inject([HeroService], (service: HeroService) => {
- expect(service instanceof HeroService).toBe(true);
- }));
+ it('can instantiate service via DI', () => {
+ service = TestBed.get(HttpHeroService);
+ expect(service instanceof HttpHeroService).toBe(true);
+ });
-
-
- it('can instantiate service with "new"', inject([Http], (http: Http) => {
+ it('can instantiate service with "new"', () => {
+ const http = TestBed.get(Http);
expect(http).not.toBeNull('http should be provided');
- let service = new HeroService(http);
- expect(service instanceof HeroService).toBe(true, 'new service should be ok');
- }));
+ let service = new HttpHeroService(http);
+ expect(service instanceof HttpHeroService).toBe(true, 'new service should be ok');
+ });
-
- it('can provide the mockBackend as XHRBackend',
- inject([XHRBackend], (backend: MockBackend) => {
- expect(backend).not.toBeNull('backend should be provided');
- }));
+ it('can provide the mockBackend as XHRBackend', () => {
+ const backend = TestBed.get(XHRBackend);
+ expect(backend).not.toBeNull('backend should be provided');
+ });
describe('when getHeroes', () => {
- let backend: MockBackend;
- let service: HeroService;
- let fakeHeroes: Hero[];
- let response: Response;
+ let fakeHeroes: Hero[];
+ let http: Http;
+ let response: Response;
- beforeEach(inject([Http, XHRBackend], (http: Http, be: MockBackend) => {
- backend = be;
- service = new HeroService(http);
- fakeHeroes = makeHeroData();
- let options = new ResponseOptions({status: 200, body: {data: fakeHeroes}});
- response = new Response(options);
- }));
+ beforeEach(() => {
- it('should have expected fake heroes (then)', async(inject([], () => {
- backend.connections.subscribe((c: MockConnection) => c.mockRespond(response));
+ backend = TestBed.get(XHRBackend);
+ http = TestBed.get(Http);
- service.getHeroes().toPromise()
- // .then(() => Promise.reject('deliberate'))
- .then(heroes => {
- expect(heroes.length).toBe(fakeHeroes.length,
- 'should have expected no. of heroes');
- });
- })));
+ service = new HttpHeroService(http);
+ fakeHeroes = makeHeroData();
+ let options = new ResponseOptions({status: 200, body: {data: fakeHeroes}});
+ response = new Response(options);
+ });
- it('should have expected fake heroes (Observable.do)', async(inject([], () => {
- backend.connections.subscribe((c: MockConnection) => c.mockRespond(response));
+ it('should have expected fake heroes (then)', () => {
+ backend.connections.subscribe((c: MockConnection) => c.mockRespond(response));
- service.getHeroes()
- .do(heroes => {
- expect(heroes.length).toBe(fakeHeroes.length,
- 'should have expected no. of heroes');
- })
- .toPromise();
- })));
+ service.getHeroes().toPromise()
+ // .then(() => Promise.reject('deliberate'))
+ .then(heroes => {
+ expect(heroes.length).toBe(fakeHeroes.length,
+ 'should have expected no. of heroes');
+ })
+ .catch(fail);
+ });
+
+ it('should have expected fake heroes (Observable tap)', () => {
+ backend.connections.subscribe((c: MockConnection) => c.mockRespond(response));
+
+ service.getHeroes().subscribe(
+ heroes => {
+ expect(heroes.length).toBe(fakeHeroes.length,
+ 'should have expected no. of heroes');
+ },
+ fail
+ );
+ });
- it('should be OK returning no heroes', async(inject([], () => {
- let resp = new Response(new ResponseOptions({status: 200, body: {data: []}}));
- backend.connections.subscribe((c: MockConnection) => c.mockRespond(resp));
+ it('should be OK returning no heroes', () => {
+ let resp = new Response(new ResponseOptions({status: 200, body: {data: []}}));
+ backend.connections.subscribe((c: MockConnection) => c.mockRespond(resp));
- service.getHeroes()
- .do(heroes => {
- expect(heroes.length).toBe(0, 'should have no heroes');
- })
- .toPromise();
- })));
+ service.getHeroes().subscribe(
+ heroes => {
+ expect(heroes.length).toBe(0, 'should have no heroes');
+ },
+ fail
+ );
+ });
- it('should treat 404 as an Observable error', async(inject([], () => {
- let resp = new Response(new ResponseOptions({status: 404}));
- backend.connections.subscribe((c: MockConnection) => c.mockRespond(resp));
+ it('should treat 404 as an Observable error', () => {
+ let resp = new Response(new ResponseOptions({status: 404}));
+ backend.connections.subscribe((c: MockConnection) => c.mockRespond(resp));
- service.getHeroes()
- .do(heroes => {
- fail('should not respond with heroes');
- })
- .catch(err => {
- expect(err).toMatch(/Bad response status/, 'should catch bad response status code');
- return Observable.of(null); // failure is the expected test result
- })
- .toPromise();
- })));
+ service.getHeroes().subscribe(
+ heroes => fail('should not respond with heroes'),
+ err => {
+ expect(err).toMatch(/Bad response status/, 'should catch bad response status code');
+ return of(null); // failure is the expected test result
+ });
+ });
});
});
diff --git a/aio/content/examples/testing/src/app/model/http-hero.service.ts b/aio/content/examples/testing/src/app/model/http-hero.service.ts
index a5fe46b801..11a08f3de3 100644
--- a/aio/content/examples/testing/src/app/model/http-hero.service.ts
+++ b/aio/content/examples/testing/src/app/model/http-hero.service.ts
@@ -1,3 +1,4 @@
+// The OLD Http module. See HeroService for use of the current HttpClient
// #docplaster
// #docregion
import { Injectable } from '@angular/core';
@@ -5,12 +6,9 @@ import { Http, Response } from '@angular/http';
import { Headers, RequestOptions } from '@angular/http';
import { Hero } from './hero';
-import { Observable } from 'rxjs/Observable';
-import 'rxjs/add/observable/throw';
-
-import 'rxjs/add/operator/do';
-import 'rxjs/add/operator/catch';
-import 'rxjs/add/operator/map';
+import { Observable } from 'rxjs/Observable';
+import { ErrorObservable } from 'rxjs/observable/ErrorObservable';
+import { catchError, map, tap } from 'rxjs/operators';
@Injectable()
export class HttpHeroService {
@@ -19,16 +17,17 @@ export class HttpHeroService {
constructor (private http: Http) {}
getHeroes (): Observable {
- return this.http.get(this._heroesUrl)
- .map(this.extractData)
- // .do(data => console.log(data)) // eyeball results in the console
- .catch(this.handleError);
+ return this.http.get(this._heroesUrl).pipe(
+ map(this.extractData),
+ // tap(data => console.log(data)), // eyeball results in the console
+ catchError(this.handleError)
+ );
}
getHero(id: number | string) {
- return this.http
- .get('app/heroes/?id=${id}')
- .map((r: Response) => r.json().data as Hero[]);
+ return this.http.get('app/heroes/?id=${id}').pipe(
+ map((r: Response) => r.json().data as Hero[])
+ );
}
addHero (name: string): Observable {
@@ -36,9 +35,10 @@ export class HttpHeroService {
let headers = new Headers({ 'Content-Type': 'application/json' });
let options = new RequestOptions({ headers: headers });
- return this.http.post(this._heroesUrl, body, options)
- .map(this.extractData)
- .catch(this.handleError);
+ return this.http.post(this._heroesUrl, body, options).pipe(
+ map(this.extractData),
+ catchError(this.handleError)
+ );
}
updateHero (hero: Hero): Observable {
@@ -46,9 +46,10 @@ export class HttpHeroService {
let headers = new Headers({ 'Content-Type': 'application/json' });
let options = new RequestOptions({ headers: headers });
- return this.http.put(this._heroesUrl, body, options)
- .map(this.extractData)
- .catch(this.handleError);
+ return this.http.put(this._heroesUrl, body, options).pipe(
+ map(this.extractData),
+ catchError(this.handleError)
+ );
}
private extractData(res: Response) {
@@ -63,6 +64,6 @@ export class HttpHeroService {
// In a real world app, we might send the error to remote logging infrastructure
let errMsg = error.message || 'Server error';
console.error(errMsg); // log to console instead
- return Observable.throw(errMsg);
+ return new ErrorObservable(errMsg);
}
}
diff --git a/aio/content/examples/testing/src/app/model/index.ts b/aio/content/examples/testing/src/app/model/index.ts
new file mode 100644
index 0000000000..694c333a87
--- /dev/null
+++ b/aio/content/examples/testing/src/app/model/index.ts
@@ -0,0 +1,3 @@
+export * from './hero';
+export * from './hero.service';
+export * from './user.service';
diff --git a/aio/content/examples/testing/src/app/model/test-heroes.ts b/aio/content/examples/testing/src/app/model/test-heroes.ts
deleted file mode 100644
index 2dc0f92502..0000000000
--- a/aio/content/examples/testing/src/app/model/test-heroes.ts
+++ /dev/null
@@ -1,11 +0,0 @@
-// #docregion
-import { Hero } from './hero';
-
-export const HEROES: Hero[] = [
- new Hero(11, 'Mr. Nice'),
- new Hero(12, 'Narco'),
- new Hero(13, 'Bombasto'),
- new Hero(14, 'Celeritas'),
- new Hero(15, 'Magneta'),
- new Hero(16, 'RubberMan')
-];
diff --git a/aio/content/examples/testing/src/app/model/testing/fake-hero.service.ts b/aio/content/examples/testing/src/app/model/testing/fake-hero.service.ts
deleted file mode 100644
index 02e1484df4..0000000000
--- a/aio/content/examples/testing/src/app/model/testing/fake-hero.service.ts
+++ /dev/null
@@ -1,41 +0,0 @@
-// re-export for tester convenience
-export { Hero } from '../hero';
-export { HeroService } from '../hero.service';
-
-import { Hero } from '../hero';
-import { HeroService } from '../hero.service';
-
-export const HEROES: Hero[] = [
- new Hero(41, 'Bob'),
- new Hero(42, 'Carol'),
- new Hero(43, 'Ted'),
- new Hero(44, 'Alice'),
- new Hero(45, 'Speedy'),
- new Hero(46, 'Stealthy')
-];
-
-export class FakeHeroService implements HeroService {
-
- heroes = HEROES.map(h => h.clone());
- lastPromise: Promise; // remember so we can spy on promise calls
-
- getHero(id: number | string) {
- if (typeof id === 'string') {
- id = parseInt(id as string, 10);
- }
- let hero = this.heroes.find(h => h.id === id);
- return this.lastPromise = Promise.resolve(hero);
- }
-
- getHeroes() {
- return this.lastPromise = Promise.resolve(this.heroes);
- }
-
- updateHero(hero: Hero): Promise {
- return this.lastPromise = this.getHero(hero.id).then(h => {
- return h ?
- Object.assign(h, hero) :
- Promise.reject(`Hero ${hero.id} not found`) as any as Promise;
- });
- }
-}
diff --git a/aio/content/examples/testing/src/app/model/testing/http-client.spec.ts b/aio/content/examples/testing/src/app/model/testing/http-client.spec.ts
new file mode 100644
index 0000000000..2c5b5ffd46
--- /dev/null
+++ b/aio/content/examples/testing/src/app/model/testing/http-client.spec.ts
@@ -0,0 +1,192 @@
+// #docplaster
+// #docregion imports
+// Http testing module and mocking controller
+import { HttpClientTestingModule, HttpTestingController } from '@angular/common/http/testing';
+
+// Other imports
+import { TestBed } from '@angular/core/testing';
+import { HttpClient, HttpErrorResponse } from '@angular/common/http';
+
+// #enddocregion imports
+import { HttpHeaders } from '@angular/common/http';
+
+interface Data {
+ name: string;
+}
+
+const testUrl = '/data';
+
+// #docregion setup
+describe('HttpClient testing', () => {
+ let httpClient: HttpClient;
+ let httpTestingController: HttpTestingController;
+
+ beforeEach(() => {
+ TestBed.configureTestingModule({
+ imports: [ HttpClientTestingModule ]
+ });
+
+ // Inject the http service and test controller for each test
+ httpClient = TestBed.get(HttpClient);
+ httpTestingController = TestBed.get(HttpTestingController);
+ });
+ // #enddocregion setup
+ // #docregion afterEach
+ afterEach(() => {
+ // After every test, assert that there are no more pending requests.
+ httpTestingController.verify();
+ });
+ // #enddocregion afterEach
+ // #docregion setup
+ /// Tests begin ///
+ // #enddocregion setup
+ // #docregion get-test
+ it('can test HttpClient.get', () => {
+ const testData: Data = {name: 'Test Data'};
+
+ // Make an HTTP GET request
+ httpClient.get(testUrl)
+ .subscribe(data =>
+ // When observable resolves, result should match test data
+ expect(data).toEqual(testData)
+ );
+
+ // The following `expectOne()` will match the request's URL.
+ // If no requests or multiple requests matched that URL
+ // `expectOne()` would throw.
+ const req = httpTestingController.expectOne('/data');
+
+ // Assert that the request is a GET.
+ expect(req.request.method).toEqual('GET');
+
+ // Respond with mock data, causing Observable to resolve.
+ // Subscribe callback asserts that correct data was returned.
+ req.flush(testData);
+
+ // Finally, assert that there are no outstanding requests.
+ httpTestingController.verify();
+ });
+ // #enddocregion get-test
+ it('can test HttpClient.get with matching header', () => {
+ const testData: Data = {name: 'Test Data'};
+
+ // Make an HTTP GET request with specific header
+ httpClient.get(testUrl, {
+ headers: new HttpHeaders({'Authorization': 'my-auth-token'})
+ })
+ .subscribe(data =>
+ expect(data).toEqual(testData)
+ );
+
+ // Find request with a predicate function.
+ // #docregion predicate
+ // Expect one request with an authorization header
+ const req = httpTestingController.expectOne(
+ req => req.headers.has('Authorization')
+ );
+ // #enddocregion predicate
+ req.flush(testData);
+ });
+
+ it('can test multiple requests', () => {
+ let testData: Data[] = [
+ { name: 'bob' }, { name: 'carol' },
+ { name: 'ted' }, { name: 'alice' }
+ ];
+
+ // Make three requests in a row
+ httpClient.get(testUrl)
+ .subscribe(d => expect(d.length).toEqual(0, 'should have no data'));
+
+ httpClient.get(testUrl)
+ .subscribe(d => expect(d).toEqual([testData[0]], 'should be one element array'));
+
+ httpClient.get(testUrl)
+ .subscribe(d => expect(d).toEqual(testData, 'should be expected data'));
+
+ // #docregion multi-request
+ // get all pending requests that match the given URL
+ const requests = httpTestingController.match(testUrl);
+ expect(requests.length).toEqual(3);
+
+ // Respond to each request with different results
+ requests[0].flush([]);
+ requests[1].flush([testData[0]]);
+ requests[2].flush(testData);
+ // #enddocregion multi-request
+ });
+
+ // #docregion 404
+ it('can test for 404 error', () => {
+ const emsg = 'deliberate 404 error';
+
+ httpClient.get(testUrl).subscribe(
+ data => fail('should have failed with the 404 error'),
+ (error: HttpErrorResponse) => {
+ expect(error.status).toEqual(404, 'status');
+ expect(error.error).toEqual(emsg, 'message');
+ }
+ );
+
+ const req = httpTestingController.expectOne(testUrl);
+
+ // Respond with mock error
+ req.flush(emsg, { status: 404, statusText: 'Not Found' });
+ });
+ // #enddocregion 404
+
+ // #docregion network-error
+ it('can test for network error', () => {
+ const emsg = 'simulated network error';
+
+ httpClient.get(testUrl).subscribe(
+ data => fail('should have failed with the network error'),
+ (error: HttpErrorResponse) => {
+ expect(error.error.message).toEqual(emsg, 'message');
+ }
+ );
+
+ const req = httpTestingController.expectOne(testUrl);
+
+ // Create mock ErrorEvent, raised when something goes wrong at the network level.
+ // Connection timeout, DNS error, offline, etc
+ const errorEvent = new ErrorEvent('so sad', {
+ message: emsg,
+ // #enddocregion network-error
+ // The rest of this is optional and not used.
+ // Just showing that you could provide this too.
+ filename: 'HeroService.ts',
+ lineno: 42,
+ colno: 21
+ // #docregion network-error
+ });
+
+ // Respond with mock error
+ req.error(errorEvent);
+ });
+ // #enddocregion network-error
+
+ it('httpTestingController.verify should fail if HTTP response not simulated', () => {
+ // Sends request
+ httpClient.get('some/api').subscribe();
+
+ // verify() should fail because haven't handled the pending request.
+ expect(() => httpTestingController.verify()).toThrow();
+
+ // Now get and flush the request so that afterEach() doesn't fail
+ const req = httpTestingController.expectOne('some/api');
+ req.flush(null);
+ });
+
+ // Proves that verify in afterEach() really would catch error
+ // if test doesn't simulate the HTTP response.
+ //
+ // Must disable this test because can't catch an error in an afterEach().
+ // Uncomment if you want to confirm that afterEach() does the job.
+ // it('afterEach() should fail when HTTP response not simulated',() => {
+ // // Sends request which is never handled by this test
+ // httpClient.get('some/api').subscribe();
+ // });
+// #docregion setup
+});
+// #enddocregion setup
diff --git a/aio/content/examples/testing/src/app/model/testing/index.ts b/aio/content/examples/testing/src/app/model/testing/index.ts
new file mode 100644
index 0000000000..6da76e67db
--- /dev/null
+++ b/aio/content/examples/testing/src/app/model/testing/index.ts
@@ -0,0 +1 @@
+export * from './fake-hero.service';
diff --git a/aio/content/examples/testing/src/app/model/testing/test-hero.service.ts b/aio/content/examples/testing/src/app/model/testing/test-hero.service.ts
new file mode 100644
index 0000000000..14ad8453d6
--- /dev/null
+++ b/aio/content/examples/testing/src/app/model/testing/test-hero.service.ts
@@ -0,0 +1,61 @@
+import { Injectable } from '@angular/core';
+
+import { Observable } from 'rxjs/Observable';
+import { asyncData } from '../../../testing';
+
+import { map } from 'rxjs/operators';
+
+// re-export for tester convenience
+export { Hero } from '../hero';
+export { HeroService } from '../hero.service';
+export { getTestHeroes } from './test-heroes';
+
+import { Hero } from '../hero';
+import { HeroService } from '../hero.service';
+import { getTestHeroes } from './test-heroes';
+
+@Injectable()
+/**
+ * FakeHeroService pretends to make real http requests.
+ * implements only as much of HeroService as is actually consumed by the app
+*/
+export class TestHeroService extends HeroService {
+
+ constructor() {
+ super(null);
+ }
+
+ heroes = getTestHeroes();
+ lastResult: Observable; // result from last method call
+
+ addHero(hero: Hero): Observable {
+ throw new Error('Method not implemented.');
+ }
+
+ deleteHero(hero: number | Hero): Observable {
+ throw new Error('Method not implemented.');
+ }
+
+ getHeroes(): Observable {
+ return this.lastResult = asyncData(this.heroes);
+ }
+
+ getHero(id: number | string): Observable {
+ if (typeof id === 'string') {
+ id = parseInt(id as string, 10);
+ }
+ let hero = this.heroes.find(h => h.id === id);
+ return this.lastResult = asyncData(hero);
+ }
+
+ updateHero(hero: Hero): Observable {
+ return this.lastResult = this.getHero(hero.id).pipe(
+ map(h => {
+ if (h) {
+ return Object.assign(h, hero);
+ }
+ throw new Error(`Hero ${hero.id} not found`);
+ })
+ );
+ }
+}
diff --git a/aio/content/examples/testing/src/app/model/testing/test-heroes.ts b/aio/content/examples/testing/src/app/model/testing/test-heroes.ts
new file mode 100644
index 0000000000..2af87f0e0d
--- /dev/null
+++ b/aio/content/examples/testing/src/app/model/testing/test-heroes.ts
@@ -0,0 +1,13 @@
+import { Hero } from '../hero';
+
+/** return fresh array of test heroes */
+export function getTestHeroes(): Hero[] {
+ return [
+ {id: 41, name: 'Bob' },
+ {id: 42, name: 'Carol' },
+ {id: 43, name: 'Ted' },
+ {id: 44, name: 'Alice' },
+ {id: 45, name: 'Speedy' },
+ {id: 46, name: 'Stealthy' }
+ ];
+}
diff --git a/aio/content/examples/testing/src/app/shared/shared.module.ts b/aio/content/examples/testing/src/app/shared/shared.module.ts
index 17c41c0410..cb2e6e7f90 100644
--- a/aio/content/examples/testing/src/app/shared/shared.module.ts
+++ b/aio/content/examples/testing/src/app/shared/shared.module.ts
@@ -4,12 +4,16 @@ import { FormsModule } from '@angular/forms';
import { HighlightDirective } from './highlight.directive';
import { TitleCasePipe } from './title-case.pipe';
-import { TwainComponent } from './twain.component';
@NgModule({
- imports: [ CommonModule ],
- exports: [ CommonModule, FormsModule,
- HighlightDirective, TitleCasePipe, TwainComponent ],
- declarations: [ HighlightDirective, TitleCasePipe, TwainComponent ]
+ imports: [ CommonModule ],
+ exports: [
+ CommonModule,
+ // SharedModule importers won't have to import FormsModule too
+ FormsModule,
+ HighlightDirective,
+ TitleCasePipe
+ ],
+ declarations: [ HighlightDirective, TitleCasePipe ]
})
export class SharedModule { }
diff --git a/aio/content/examples/testing/src/app/shared/twain.component.spec.ts b/aio/content/examples/testing/src/app/shared/twain.component.spec.ts
deleted file mode 100644
index b177c0bfc3..0000000000
--- a/aio/content/examples/testing/src/app/shared/twain.component.spec.ts
+++ /dev/null
@@ -1,92 +0,0 @@
-// #docplaster
-import { async, fakeAsync, ComponentFixture, TestBed, tick } from '@angular/core/testing';
-import { By } from '@angular/platform-browser';
-import { DebugElement } from '@angular/core';
-
-import { TwainService } from './twain.service';
-import { TwainComponent } from './twain.component';
-
-describe('TwainComponent', () => {
-
- let comp: TwainComponent;
- let fixture: ComponentFixture;
-
- let spy: jasmine.Spy;
- let de: DebugElement;
- let el: HTMLElement;
- let twainService: TwainService; // the actually injected service
-
- const testQuote = 'Test Quote';
-
- // #docregion setup
- beforeEach(() => {
- TestBed.configureTestingModule({
- declarations: [ TwainComponent ],
- providers: [ TwainService ],
- });
-
- fixture = TestBed.createComponent(TwainComponent);
- comp = fixture.componentInstance;
-
- // TwainService actually injected into the component
- twainService = fixture.debugElement.injector.get(TwainService);
-
- // Setup spy on the `getQuote` method
- // #docregion spy
- spy = spyOn(twainService, 'getQuote')
- .and.returnValue(Promise.resolve(testQuote));
- // #enddocregion spy
-
- // Get the Twain quote element by CSS selector (e.g., by class name)
- de = fixture.debugElement.query(By.css('.twain'));
- el = de.nativeElement;
- });
- // #enddocregion setup
-
- // #docregion tests
- it('should not show quote before OnInit', () => {
- expect(el.textContent).toBe('', 'nothing displayed');
- expect(spy.calls.any()).toBe(false, 'getQuote not yet called');
- });
-
- it('should still not show quote after component initialized', () => {
- fixture.detectChanges();
- // getQuote service is async => still has not returned with quote
- expect(el.textContent).toBe('...', 'no quote yet');
- expect(spy.calls.any()).toBe(true, 'getQuote called');
- });
-
- // #docregion async-test
- it('should show quote after getQuote promise (async)', async(() => {
- fixture.detectChanges();
-
- fixture.whenStable().then(() => { // wait for async getQuote
- fixture.detectChanges(); // update view with quote
- expect(el.textContent).toBe(testQuote);
- });
- }));
- // #enddocregion async-test
-
- // #docregion fake-async-test
- it('should show quote after getQuote promise (fakeAsync)', fakeAsync(() => {
- fixture.detectChanges();
- tick(); // wait for async getQuote
- fixture.detectChanges(); // update view with quote
- expect(el.textContent).toBe(testQuote);
- }));
- // #enddocregion fake-async-test
- // #enddocregion tests
-
- // #docregion done-test
- it('should show quote after getQuote promise (done)', (done: any) => {
- fixture.detectChanges();
-
- // get the spy promise and wait for it to resolve
- spy.calls.mostRecent().returnValue.then(() => {
- fixture.detectChanges(); // update view with quote
- expect(el.textContent).toBe(testQuote);
- done();
- });
- });
- // #enddocregion done-test
-});
diff --git a/aio/content/examples/testing/src/app/shared/twain.component.timer.spec.ts.no-work b/aio/content/examples/testing/src/app/shared/twain.component.timer.spec.ts.no-work
deleted file mode 100644
index 74dec3e766..0000000000
--- a/aio/content/examples/testing/src/app/shared/twain.component.timer.spec.ts.no-work
+++ /dev/null
@@ -1,116 +0,0 @@
-// #docplaster
-// When AppComponent learns to present quote with intervalTimer
-import { async, discardPeriodicTasks, fakeAsync, ComponentFixture, TestBed, tick } from '@angular/core/testing';
-import { By } from '@angular/platform-browser';
-import { DebugElement } from '@angular/core';
-
-import { TwainService } from './model';
-import { TwainComponent } from './twain.component';
-
-xdescribe('TwainComponent', () => {
-
- let comp: TwainComponent;
- let fixture: ComponentFixture;
-
- const quotes = [
- 'Test Quote 1',
- 'Test Quote 2',
- 'Test Quote 3'
- ];
-
- let spy: jasmine.Spy;
- let twainEl: DebugElement; // the element with the Twain quote
- let twainService: TwainService; // the actually injected service
-
- function getQuote() { return twainEl.nativeElement.textContent; }
-
- // #docregion setup
- beforeEach(() => {
- TestBed.configureTestingModule({
- declarations: [ TwainComponent ],
- providers: [ TwainService ],
- });
-
- fixture = TestBed.createComponent(TwainComponent);
- comp = fixture.componentInstance;
-
- // TwainService actually injected into the component
- twainService = fixture.debugElement.injector.get(TwainService);
-
- // Setup spy on the `getQuote` method
- spy = spyOn(twainService, 'getQuote')
- .and.returnValues(...quotes.map(q => Promise.resolve(q)));
-
- // Get the Twain quote element by CSS selector (e.g., by class name)
- twainEl = fixture.debugElement.query(By.css('.twain'));
- });
-
- afterEach(() => {
- // destroy component to stop the component timer
- fixture.destroy();
- });
- // #enddocregion setup
-
- // #docregion tests
- it('should not show quote before OnInit', () => {
- expect(getQuote()).toBe('');
- });
-
- it('should still not show quote after component initialized', () => {
- // because the getQuote service is async
- fixture.detectChanges(); // trigger data binding
- expect(getQuote()).toContain('not initialized');
- });
-
- // WIP
- // If go this way, add jasmine.clock().uninstall(); to afterEach
- // it('should show quote after Angular "settles"', async(() => {
- // //jasmine.clock().install();
- // fixture.detectChanges(); // trigger data binding
- // fixture.whenStable().then(() => {
- // fixture.detectChanges(); // update view with the quote
- // expect(getQuote()).toBe(quotes[0]);
- // });
- // // jasmine.clock().tick(5000);
- // // fixture.whenStable().then(() => {
- // // fixture.detectChanges(); // update view with the quote
- // // expect(getQuote()).toBe(quotes[1]);
- // // });
- // }));
-
- it('should show quote after getQuote promise returns', fakeAsync(() => {
- fixture.detectChanges(); // trigger data binding
- tick(); // wait for first async getQuote to return
- fixture.detectChanges(); // update view with the quote
- expect(getQuote()).toBe(quotes[0]);
-
- // destroy component to stop the component timer before test ends
- // else test errors because still have timer in the queue
- fixture.destroy();
- }));
-
- it('should show 2nd quote after 5 seconds pass', fakeAsync(() => {
- fixture.detectChanges(); // trigger data binding
- tick(5000); // wait for second async getQuote to return
- fixture.detectChanges(); // update view with the quote
- expect(getQuote()).toBe(quotes[1]);
-
- // still have intervalTimer queuing requres
- // discardPeriodicTasks() else test errors
- discardPeriodicTasks();
- }));
-
- fit('should show 3rd quote after 10 seconds pass', fakeAsync(() => {
- fixture.detectChanges(); // trigger data binding
- tick(5000); // wait for second async getQuote to return
- fixture.detectChanges(); // update view with the 2nd quote
- tick(5000); // wait for third async getQuote to return
- fixture.detectChanges(); // update view with the 3rd quote
- expect(getQuote()).toBe(quotes[2]);
-
- // still have intervalTimer queuing requres
- // discardPeriodicTasks() else test errors
- discardPeriodicTasks();
- }));
- // #enddocregion tests
-});
diff --git a/aio/content/examples/testing/src/app/shared/twain.component.timer.ts.no-work b/aio/content/examples/testing/src/app/shared/twain.component.timer.ts.no-work
deleted file mode 100644
index d3dc1f205d..0000000000
--- a/aio/content/examples/testing/src/app/shared/twain.component.timer.ts.no-work
+++ /dev/null
@@ -1,27 +0,0 @@
-// #docregion
-import { Component, OnInit, OnDestroy } from '@angular/core';
-
-import { TwainService } from './twain.service';
-
-@Component({
- selector: 'twain-quote',
- template: '{{quote}}
'
-})
-export class TwainComponent implements OnInit, OnDestroy {
- intervalId: number;
- quote = '-- not initialized yet --';
- constructor(private twainService: TwainService) { }
-
- getQuote() {
- this.twainService.getQuote().then(quote => this.quote = quote);
- }
-
- ngOnInit(): void {
- this.getQuote();
- this.intervalId = window.setInterval(() => this.getQuote(), 5000);
- }
-
- ngOnDestroy(): void {
- clearInterval(this.intervalId);
- }
-}
diff --git a/aio/content/examples/testing/src/app/shared/twain.component.ts b/aio/content/examples/testing/src/app/shared/twain.component.ts
deleted file mode 100644
index 29f24459ab..0000000000
--- a/aio/content/examples/testing/src/app/shared/twain.component.ts
+++ /dev/null
@@ -1,20 +0,0 @@
-// #docregion
-import { Component, OnInit } from '@angular/core';
-
-import { TwainService } from './twain.service';
-
-// #docregion component
-@Component({
- selector: 'twain-quote',
- template: '{{quote}}
'
-})
-export class TwainComponent implements OnInit {
- intervalId: number;
- quote = '...';
- constructor(private twainService: TwainService) { }
-
- ngOnInit(): void {
- this.twainService.getQuote().then(quote => this.quote = quote);
- }
-}
-// #enddocregion component
diff --git a/aio/content/examples/testing/src/app/shared/twain.service.ts b/aio/content/examples/testing/src/app/shared/twain.service.ts
deleted file mode 100644
index 9e394df1ee..0000000000
--- a/aio/content/examples/testing/src/app/shared/twain.service.ts
+++ /dev/null
@@ -1,32 +0,0 @@
-import { Injectable } from '@angular/core';
-
-const quotes = [
-'Always do right. This will gratify some people and astonish the rest.',
-'I have never let my schooling interfere with my education.',
-'Don\'t go around saying the world owes you a living. The world owes you nothing. It was here first.',
-'Whenever you find yourself on the side of the majority, it is time to pause and reflect.',
-'If you tell the truth, you don\'t have to remember anything.',
-'Clothes make the man. Naked people have little or no influence on society.',
-'It\'s not the size of the dog in the fight, it\'s the size of the fight in the dog.',
-'Truth is stranger than fiction, but it is because Fiction is obliged to stick to possibilities; Truth isn\'t.',
-'The man who does not read good books has no advantage over the man who cannot read them.',
-'Get your facts first, and then you can distort them as much as you please.',
-];
-
-@Injectable()
-export class TwainService {
- private next = 0;
-
- // Imaginary todo: get quotes from a remote quote service
- // returns quote after delay simulating server latency
- getQuote(): Promise {
- return new Promise(resolve => {
- setTimeout( () => resolve(this.nextQuote()), 500 );
- });
- }
-
- private nextQuote() {
- if (this.next === quotes.length) { this.next = 0; }
- return quotes[ this.next++ ];
- }
-}
diff --git a/aio/content/examples/testing/src/app/twain/quote.ts b/aio/content/examples/testing/src/app/twain/quote.ts
new file mode 100644
index 0000000000..803cae0f60
--- /dev/null
+++ b/aio/content/examples/testing/src/app/twain/quote.ts
@@ -0,0 +1,4 @@
+export class Quote {
+ id: number;
+ quote: string;
+}
diff --git a/aio/content/examples/testing/src/app/twain/twain.component.marbles.spec.ts b/aio/content/examples/testing/src/app/twain/twain.component.marbles.spec.ts
new file mode 100644
index 0000000000..7e2926001d
--- /dev/null
+++ b/aio/content/examples/testing/src/app/twain/twain.component.marbles.spec.ts
@@ -0,0 +1,93 @@
+// #docplaster
+import { async, fakeAsync, ComponentFixture, TestBed, tick } from '@angular/core/testing';
+
+// #docregion import-marbles
+import { cold, getTestScheduler } from 'jasmine-marbles';
+// #enddocregion import-marbles
+
+import { Observable } from 'rxjs/Observable';
+import { of } from 'rxjs/observable/of';
+
+import { ErrorObservable } from 'rxjs/observable/ErrorObservable';
+import { last } from 'rxjs/operators';
+
+import { TwainService } from './twain.service';
+import { TwainComponent } from './twain.component';
+
+
+describe('TwainComponent (marbles)', () => {
+ let component: TwainComponent;
+ let fixture: ComponentFixture;
+ let getQuoteSpy: jasmine.Spy;
+ let quoteEl: HTMLElement;
+ let testQuote: string;
+
+ // Helper function to get the error message element value
+ // An *ngIf keeps it out of the DOM until there is an error
+ const errorMessage = () => {
+ const el = fixture.nativeElement.querySelector('.error');
+ return el ? el.textContent : null;
+ };
+
+ beforeEach(() => {
+ // Create a fake TwainService object with a `getQuote()` spy
+ const twainService = jasmine.createSpyObj('TwainService', ['getQuote']);
+ getQuoteSpy = twainService.getQuote;
+
+ TestBed.configureTestingModule({
+ declarations: [ TwainComponent ],
+ providers: [
+ { provide: TwainService, useValue: twainService }
+ ]
+ });
+
+ fixture = TestBed.createComponent(TwainComponent);
+ component = fixture.componentInstance;
+ quoteEl = fixture.nativeElement.querySelector('.twain');
+ testQuote = 'Test Quote';
+ });
+
+ // A synchronous test that simulates async behavior
+ // #docregion get-quote-test
+ it('should show quote after getQuote (marbles)', () => {
+ // observable test quote value and complete(), after delay
+ // #docregion test-quote-marbles
+ const q$ = cold('---x|', { x: testQuote });
+ // #enddocregion test-quote-marbles
+ getQuoteSpy.and.returnValue( q$ );
+
+ fixture.detectChanges(); // ngOnInit()
+ expect(quoteEl.textContent).toBe('...', 'should show placeholder');
+
+ // #docregion test-scheduler-flush
+ getTestScheduler().flush(); // flush the observables
+ // #enddocregion test-scheduler-flush
+
+ fixture.detectChanges(); // update view
+
+ expect(quoteEl.textContent).toBe(testQuote, 'should show quote');
+ expect(errorMessage()).toBeNull('should not show error');
+ });
+ // #enddocregion get-quote-test
+
+ // Still need fakeAsync() because of component's setTimeout()
+ // #docregion error-test
+ it('should display error when TwainService fails', fakeAsync(() => {
+ // observable error after delay
+ // #docregion error-marbles
+ const q$ = cold('---#|', null, new Error('TwainService test failure'));
+ // #enddocregion error-marbles
+ getQuoteSpy.and.returnValue( q$ );
+
+ fixture.detectChanges(); // ngOnInit()
+ expect(quoteEl.textContent).toBe('...', 'should show placeholder');
+
+ getTestScheduler().flush(); // flush the observables
+ tick(); // component shows error after a setTimeout()
+ fixture.detectChanges(); // update error message
+
+ expect(errorMessage()).toMatch(/test failure/, 'should display error');
+ expect(quoteEl.textContent).toBe('...', 'should show placeholder');
+ }));
+ // #enddocregion error-test
+});
diff --git a/aio/content/examples/testing/src/app/twain/twain.component.spec.ts b/aio/content/examples/testing/src/app/twain/twain.component.spec.ts
new file mode 100644
index 0000000000..ae71da68f5
--- /dev/null
+++ b/aio/content/examples/testing/src/app/twain/twain.component.spec.ts
@@ -0,0 +1,184 @@
+// #docplaster
+import { async, fakeAsync, ComponentFixture, TestBed, tick } from '@angular/core/testing';
+
+import { asyncData, asyncError } from '../../testing';
+
+import { Observable } from 'rxjs/Observable';
+import { of } from 'rxjs/observable/of';
+
+import { ErrorObservable } from 'rxjs/observable/ErrorObservable';
+import { last } from 'rxjs/operators';
+
+import { TwainService } from './twain.service';
+import { TwainComponent } from './twain.component';
+
+describe('TwainComponent', () => {
+ let component: TwainComponent;
+ let fixture: ComponentFixture;
+ let getQuoteSpy: jasmine.Spy;
+ let quoteEl: HTMLElement;
+ let testQuote: string;
+
+ // Helper function to get the error message element value
+ // An *ngIf keeps it out of the DOM until there is an error
+ const errorMessage = () => {
+ const el = fixture.nativeElement.querySelector('.error');
+ return el ? el.textContent : null;
+ };
+
+ // #docregion setup
+ beforeEach(() => {
+ testQuote = 'Test Quote';
+
+ // #docregion spy
+ // Create a fake TwainService object with a `getQuote()` spy
+ const twainService = jasmine.createSpyObj('TwainService', ['getQuote']);
+ // Make the spy return a synchronous Observable with the test data
+ getQuoteSpy = twainService.getQuote.and.returnValue( of(testQuote) );
+ // #enddocregion spy
+
+ TestBed.configureTestingModule({
+ declarations: [ TwainComponent ],
+ providers: [
+ { provide: TwainService, useValue: twainService }
+ ]
+ });
+
+ fixture = TestBed.createComponent(TwainComponent);
+ component = fixture.componentInstance;
+ quoteEl = fixture.nativeElement.querySelector('.twain');
+ });
+ // #enddocregion setup
+
+ describe('when test with synchronous observable', () => {
+ it('should not show quote before OnInit', () => {
+ expect(quoteEl.textContent).toBe('', 'nothing displayed');
+ expect(errorMessage()).toBeNull('should not show error element');
+ expect(getQuoteSpy.calls.any()).toBe(false, 'getQuote not yet called');
+ });
+
+ // The quote would not be immediately available if the service were truly async.
+ // #docregion sync-test
+ it('should show quote after component initialized', () => {
+ fixture.detectChanges(); // onInit()
+
+ // sync spy result shows testQuote immediately after init
+ expect(quoteEl.textContent).toBe(testQuote);
+ expect(getQuoteSpy.calls.any()).toBe(true, 'getQuote called');
+ });
+ // #enddocregion sync-test
+
+
+ // The error would not be immediately available if the service were truly async.
+ // Use `fakeAsync` because the component error calls `setTimeout`
+ // #docregion error-test
+ it('should display error when TwainService fails', fakeAsync(() => {
+ // tell spy to return an error observable
+ getQuoteSpy.and.returnValue(
+ new ErrorObservable('TwainService test failure'));
+
+ fixture.detectChanges(); // onInit()
+ // sync spy errors immediately after init
+
+ tick(); // flush the component's setTimeout()
+
+ fixture.detectChanges(); // update errorMessage within setTimeout()
+
+ expect(errorMessage()).toMatch(/test failure/, 'should display error');
+ expect(quoteEl.textContent).toBe('...', 'should show placeholder');
+ }));
+ // #enddocregion error-test
+ });
+
+ describe('when test with asynchronous observable', () => {
+ beforeEach(() => {
+ // #docregion async-setup
+ // Simulate delayed observable values with the `asyncData()` helper
+ getQuoteSpy.and.returnValue(asyncData(testQuote));
+ // #enddocregion async-setup
+ });
+
+ it('should not show quote before OnInit', () => {
+ expect(quoteEl.textContent).toBe('', 'nothing displayed');
+ expect(errorMessage()).toBeNull('should not show error element');
+ expect(getQuoteSpy.calls.any()).toBe(false, 'getQuote not yet called');
+ });
+
+ it('should still not show quote after component initialized', () => {
+ fixture.detectChanges();
+ // getQuote service is async => still has not returned with quote
+ // so should show the start value, '...'
+ expect(quoteEl.textContent).toBe('...', 'should show placeholder');
+ expect(errorMessage()).toBeNull('should not show error');
+ expect(getQuoteSpy.calls.any()).toBe(true, 'getQuote called');
+ });
+
+ // #docregion fake-async-test
+ it('should show quote after getQuote (fakeAsync)', fakeAsync(() => {
+ fixture.detectChanges(); // ngOnInit()
+ expect(quoteEl.textContent).toBe('...', 'should show placeholder');
+
+ tick(); // flush the observable to get the quote
+ fixture.detectChanges(); // update view
+
+ expect(quoteEl.textContent).toBe(testQuote, 'should show quote');
+ expect(errorMessage()).toBeNull('should not show error');
+ }));
+ // #enddocregion fake-async-test
+
+ // #docregion async-test
+ it('should show quote after getQuote (async)', async(() => {
+ fixture.detectChanges(); // ngOnInit()
+ expect(quoteEl.textContent).toBe('...', 'should show placeholder');
+
+ fixture.whenStable().then(() => { // wait for async getQuote
+ fixture.detectChanges(); // update view with quote
+ expect(quoteEl.textContent).toBe(testQuote);
+ expect(errorMessage()).toBeNull('should not show error');
+ });
+ }));
+ // #enddocregion async-test
+
+
+ // #docregion quote-done-test
+ it('should show last quote (quote done)', (done: DoneFn) => {
+ fixture.detectChanges();
+
+ component.quote.pipe( last() ).subscribe(() => {
+ fixture.detectChanges(); // update view with quote
+ expect(quoteEl.textContent).toBe(testQuote);
+ expect(errorMessage()).toBeNull('should not show error');
+ done();
+ });
+ });
+ // #enddocregion quote-done-test
+
+ // #docregion spy-done-test
+ it('should show quote after getQuote (spy done)', (done: DoneFn) => {
+ fixture.detectChanges();
+
+ // the spy's most recent call returns the observable with the test quote
+ getQuoteSpy.calls.mostRecent().returnValue.subscribe(() => {
+ fixture.detectChanges(); // update view with quote
+ expect(quoteEl.textContent).toBe(testQuote);
+ expect(errorMessage()).toBeNull('should not show error');
+ done();
+ });
+ });
+ // #enddocregion spy-done-test
+
+ // #docregion async-error-test
+ it('should display error when TwainService fails', fakeAsync(() => {
+ // tell spy to return an async error observable
+ getQuoteSpy.and.returnValue(asyncError('TwainService test failure'));
+
+ fixture.detectChanges();
+ tick(); // component shows error after a setTimeout()
+ fixture.detectChanges(); // update error message
+
+ expect(errorMessage()).toMatch(/test failure/, 'should display error');
+ expect(quoteEl.textContent).toBe('...', 'should show placeholder');
+ }));
+ // #enddocregion async-error-test
+ });
+});
diff --git a/aio/content/examples/testing/src/app/twain/twain.component.ts b/aio/content/examples/testing/src/app/twain/twain.component.ts
new file mode 100644
index 0000000000..6e40b6dd54
--- /dev/null
+++ b/aio/content/examples/testing/src/app/twain/twain.component.ts
@@ -0,0 +1,49 @@
+// #docregion
+import { Component, OnInit } from '@angular/core';
+
+import { Observable } from 'rxjs/Observable';
+import { of } from 'rxjs/observable/of';
+import { catchError, startWith } from 'rxjs/operators';
+
+import { TwainService } from './twain.service';
+
+// #docregion component
+@Component({
+ selector: 'twain-quote',
+ // #docregion template
+ template: `
+ {{quote | async}}
+
+ {{ errorMessage }}
`,
+ // #enddocregion template
+ styles: [
+ `.twain { font-style: italic; } .error { color: red; }`
+ ]
+
+})
+export class TwainComponent implements OnInit {
+ errorMessage: string;
+ quote: Observable;
+
+ constructor(private twainService: TwainService) {}
+
+ ngOnInit(): void {
+ this.getQuote();
+ }
+
+ // #docregion get-quote
+ getQuote() {
+ this.errorMessage = '';
+ this.quote = this.twainService.getQuote().pipe(
+ startWith('...'),
+ catchError( (err: any) => {
+ // Wait a turn because errorMessage already set once this turn
+ setTimeout(() => this.errorMessage = err.message || err.toString());
+ return of('...'); // reset message to placeholder
+ })
+ );
+ // #enddocregion get-quote
+ }
+
+}
+// #enddocregion component
diff --git a/aio/content/examples/testing/src/app/twain/twain.data.ts b/aio/content/examples/testing/src/app/twain/twain.data.ts
new file mode 100644
index 0000000000..a228ef5bbc
--- /dev/null
+++ b/aio/content/examples/testing/src/app/twain/twain.data.ts
@@ -0,0 +1,15 @@
+import { Quote } from './quote';
+
+export const QUOTES: Quote[] = [
+ 'Always do right. This will gratify some people and astonish the rest.',
+ 'I have never let my schooling interfere with my education.',
+ 'Don\'t go around saying the world owes you a living. The world owes you nothing. It was here first.',
+ 'Whenever you find yourself on the side of the majority, it is time to pause and reflect.',
+ 'If you tell the truth, you don\'t have to remember anything.',
+ 'Clothes make the man. Naked people have little or no influence on society.',
+ 'It\'s not the size of the dog in the fight, it\'s the size of the fight in the dog.',
+ 'Truth is stranger than fiction, but it is because Fiction is obliged to stick to possibilities; Truth isn\'t.',
+ 'The man who does not read good books has no advantage over the man who cannot read them.',
+ 'Get your facts first, and then you can distort them as much as you please.',
+]
+.map((q, i) => ({ id: i + 1, quote: q }));
diff --git a/aio/content/examples/testing/src/app/twain/twain.service.ts b/aio/content/examples/testing/src/app/twain/twain.service.ts
new file mode 100644
index 0000000000..da4386f5b1
--- /dev/null
+++ b/aio/content/examples/testing/src/app/twain/twain.service.ts
@@ -0,0 +1,47 @@
+// Mark Twain Quote service gets quotes from server
+import { Injectable } from '@angular/core';
+import { HttpClient, HttpErrorResponse } from '@angular/common/http';
+
+import { Observable } from 'rxjs/Observable';
+import { ErrorObservable } from 'rxjs/observable/ErrorObservable';
+import { of } from 'rxjs/observable/of';
+import { concat, map, retryWhen, switchMap, take, tap } from 'rxjs/operators';
+
+import { Quote } from './quote';
+
+@Injectable()
+export class TwainService {
+ constructor(private http: HttpClient) { }
+
+ private nextId = 1;
+
+ getQuote(): Observable {
+ return Observable.create(observer => observer.next(this.nextId++)).pipe(
+
+ // tap((id: number) => console.log(id)),
+ // tap((id: number) => { throw new Error('Simulated server error'); }),
+
+ switchMap((id: number) => this.http.get(`api/quotes/${id}`)),
+ // tap((q : Quote) => console.log(q)),
+ map((q: Quote) => q.quote),
+
+ // `errors` is observable of http.get errors
+ retryWhen(errors => errors.pipe(
+ switchMap((error: HttpErrorResponse) => {
+ if (error.status === 404) {
+ // Queried for quote that doesn't exist.
+ this.nextId = 1; // retry with quote id:1
+ return of(null); // signal OK to retry
+ }
+ // Some other HTTP error.
+ console.error(error);
+ return new ErrorObservable('Cannot get Twain quotes from the server');
+ }),
+ take(2),
+ // If a second retry value, then didn't find id:1 and triggers the following error
+ concat(new ErrorObservable('There are no Twain quotes')) // didn't find id:1
+ ))
+ );
+ }
+}
+
diff --git a/aio/content/examples/testing/src/app/welcome.component.spec.ts b/aio/content/examples/testing/src/app/welcome/welcome.component.spec.ts
similarity index 67%
rename from aio/content/examples/testing/src/app/welcome.component.spec.ts
rename to aio/content/examples/testing/src/app/welcome/welcome.component.spec.ts
index e506dda396..25f3b28c77 100644
--- a/aio/content/examples/testing/src/app/welcome.component.spec.ts
+++ b/aio/content/examples/testing/src/app/welcome/welcome.component.spec.ts
@@ -1,26 +1,66 @@
// #docplaster
import { ComponentFixture, inject, TestBed } from '@angular/core/testing';
-import { By } from '@angular/platform-browser';
-import { DebugElement } from '@angular/core';
-import { UserService } from './model';
+import { UserService } from '../model/user.service';
import { WelcomeComponent } from './welcome.component';
+// #docregion mock-user-service
+class MockUserService {
+ isLoggedIn = true;
+ user = { name: 'Test User'};
+};
+// #enddocregion mock-user-service
+
+describe('WelcomeComponent (class only)', () => {
+ let comp: WelcomeComponent;
+ let userService: UserService;
+
+ // #docregion class-only-before-each
+ beforeEach(() => {
+ TestBed.configureTestingModule({
+ // provide the component-under-test and dependent service
+ providers: [
+ WelcomeComponent,
+ { provide: UserService, useClass: MockUserService }
+ ]
+ });
+ // inject both the component and the dependent service.
+ comp = TestBed.get(WelcomeComponent);
+ userService = TestBed.get(UserService);
+ });
+ // #enddocregion class-only-before-each
+
+ // #docregion class-only-tests
+ it('should not have welcome message after construction', () => {
+ expect(comp.welcome).toBeUndefined();
+ });
+
+ it('should welcome logged in user after Angular calls ngOnInit', () => {
+ comp.ngOnInit();
+ expect(comp.welcome).toContain(userService.user.name);
+ });
+
+ it('should ask user to log in if not logged in after ngOnInit', () => {
+ userService.isLoggedIn = false;
+ comp.ngOnInit();
+ expect(comp.welcome).not.toContain(userService.user.name);
+ expect(comp.welcome).toContain('log in');
+ });
+ // #enddocregion class-only-tests
+});
+
describe('WelcomeComponent', () => {
let comp: WelcomeComponent;
let fixture: ComponentFixture;
let componentUserService: UserService; // the actually injected service
let userService: UserService; // the TestBed injected service
- let de: DebugElement; // the DebugElement with the welcome message
let el: HTMLElement; // the DOM element with the welcome message
- let userServiceStub: {
- isLoggedIn: boolean;
- user: { name: string}
- };
+ // #docregion setup, user-service-stub
+ let userServiceStub: Partial;
- // #docregion setup
+ // #enddocregion user-service-stub
beforeEach(() => {
// stub UserService for test purposes
// #docregion user-service-stub
@@ -57,8 +97,7 @@ describe('WelcomeComponent', () => {
// #enddocregion inject-from-testbed
// get the "welcome" element by CSS selector (e.g., by class name)
- de = fixture.debugElement.query(By.css('.welcome'));
- el = de.nativeElement;
+ el = fixture.nativeElement.querySelector('.welcome');
});
// #enddocregion setup
@@ -85,12 +124,10 @@ describe('WelcomeComponent', () => {
});
// #enddocregion tests
- // #docregion inject-it
it('should inject the component\'s UserService instance',
inject([UserService], (service: UserService) => {
expect(service).toBe(componentUserService);
}));
- // #enddocregion inject-it
it('TestBed and Component UserService should be the same', () => {
expect(userService === componentUserService).toBe(true);
diff --git a/aio/content/examples/testing/src/app/welcome.component.ts b/aio/content/examples/testing/src/app/welcome/welcome.component.ts
similarity index 50%
rename from aio/content/examples/testing/src/app/welcome.component.ts
rename to aio/content/examples/testing/src/app/welcome/welcome.component.ts
index 9bc5ca33c4..802f30cc4a 100644
--- a/aio/content/examples/testing/src/app/welcome.component.ts
+++ b/aio/content/examples/testing/src/app/welcome/welcome.component.ts
@@ -1,19 +1,20 @@
// #docregion
import { Component, OnInit } from '@angular/core';
+import { UserService } from '../model/user.service';
-import { UserService } from './model/user.service';
-
+// #docregion component
@Component({
selector: 'app-welcome',
- template: '{{welcome}}
'
+ template: '{{welcome}}
'
})
+// #docregion class
export class WelcomeComponent implements OnInit {
- welcome = '-- not initialized yet --';
+ welcome: string;
constructor(private userService: UserService) { }
ngOnInit(): void {
this.welcome = this.userService.isLoggedIn ?
- 'Welcome, ' + this.userService.user.name :
- 'Please log in.';
+ 'Welcome, ' + this.userService.user.name : 'Please log in.';
}
}
+// #enddocregion component, class
diff --git a/aio/content/examples/testing/src/bag-specs.html b/aio/content/examples/testing/src/bag-specs.html
deleted file mode 100644
index 89b46f7056..0000000000
--- a/aio/content/examples/testing/src/bag-specs.html
+++ /dev/null
@@ -1,42 +0,0 @@
-
-
-
-
-
- Specs Bag
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
diff --git a/aio/content/examples/testing/src/bag.html b/aio/content/examples/testing/src/bag.html
deleted file mode 100644
index 3e0fcb9025..0000000000
--- a/aio/content/examples/testing/src/bag.html
+++ /dev/null
@@ -1,26 +0,0 @@
-
-
-
-
- Specs Bag
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- Loading ...
-
-
diff --git a/aio/content/examples/testing/src/banner-inline-specs.html b/aio/content/examples/testing/src/banner-inline-specs.html
deleted file mode 100644
index 2a512a5647..0000000000
--- a/aio/content/examples/testing/src/banner-inline-specs.html
+++ /dev/null
@@ -1,40 +0,0 @@
-
-
-
-
-
- Banner Component (inline template) Specs
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
diff --git a/aio/content/examples/testing/src/banner-specs.html b/aio/content/examples/testing/src/banner-specs.html
deleted file mode 100644
index d16dd977a4..0000000000
--- a/aio/content/examples/testing/src/banner-specs.html
+++ /dev/null
@@ -1,40 +0,0 @@
-
-
-
-
-
- Banner Component Specs
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
diff --git a/aio/content/examples/testing/src/browser-test-shim.js b/aio/content/examples/testing/src/browser-test-shim.js
deleted file mode 100644
index ee21831e22..0000000000
--- a/aio/content/examples/testing/src/browser-test-shim.js
+++ /dev/null
@@ -1,87 +0,0 @@
-// BROWSER TESTING SHIM
-// Keep it in-sync with what karma-test-shim does
-// #docregion
-/*global jasmine, __karma__, window*/
-(function () {
-
-Error.stackTraceLimit = 0; // "No stacktrace"" is usually best for app testing.
-
-// Uncomment to get full stacktrace output. Sometimes helpful, usually not.
-// Error.stackTraceLimit = Infinity; //
-
-jasmine.DEFAULT_TIMEOUT_INTERVAL = 3000;
-
-var baseURL = document.baseURI;
-baseURL = baseURL + baseURL[baseURL.length-1] ? '' : '/';
-
-System.config({
- baseURL: baseURL,
- // Extend usual application package list with test folder
- packages: { 'testing': { main: 'index.js', defaultExtension: 'js' } },
-
- // Assume npm: is set in `paths` in systemjs.config
- // Map the angular testing umd bundles
- map: {
- '@angular/core/testing': 'npm:@angular/core/bundles/core-testing.umd.js',
- '@angular/common/testing': 'npm:@angular/common/bundles/common-testing.umd.js',
- '@angular/compiler/testing': 'npm:@angular/compiler/bundles/compiler-testing.umd.js',
- '@angular/platform-browser/testing': 'npm:@angular/platform-browser/bundles/platform-browser-testing.umd.js',
- '@angular/platform-browser-dynamic/testing': 'npm:@angular/platform-browser-dynamic/bundles/platform-browser-dynamic-testing.umd.js',
- '@angular/http/testing': 'npm:@angular/http/bundles/http-testing.umd.js',
- '@angular/router/testing': 'npm:@angular/router/bundles/router-testing.umd.js',
- '@angular/forms/testing': 'npm:@angular/forms/bundles/forms-testing.umd.js',
- },
-});
-
-System.import('systemjs.config.js')
- .then(importSystemJsExtras)
- .then(initTestBed)
- .then(initTesting);
-
-/** Optional SystemJS configuration extras. Keep going w/o it */
-function importSystemJsExtras(){
- return System.import('systemjs.config.extras.js')
- .catch(function(reason) {
- console.log(
- 'Note: System.import could not load "systemjs.config.extras.js" where you might have added more configuration. It is an optional file so we will continue without it.'
- );
- console.log(reason);
- });
-}
-
-function initTestBed(){
- return Promise.all([
- System.import('@angular/core/testing'),
- System.import('@angular/platform-browser-dynamic/testing')
- ])
-
- .then(function (providers) {
- var coreTesting = providers[0];
- var browserTesting = providers[1];
-
- coreTesting.TestBed.initTestEnvironment(
- browserTesting.BrowserDynamicTestingModule,
- browserTesting.platformBrowserDynamicTesting());
- })
-}
-
-// Import all spec files defined in the html (__spec_files__)
-// and start Jasmine testrunner
-function initTesting () {
- console.log('loading spec files: '+__spec_files__.join(', '));
- return Promise.all(
- __spec_files__.map(function(spec) {
- return System.import(spec);
- })
- )
- // After all imports load, re-execute `window.onload` which
- // triggers the Jasmine test-runner start or explain what went wrong
- .then(success, console.error.bind(console));
-
- function success () {
- console.log('Spec files loaded; starting Jasmine testrunner');
- window.onload();
- }
-}
-
-})();
diff --git a/aio/content/examples/testing/src/expected.ts b/aio/content/examples/testing/src/expected.ts
new file mode 100644
index 0000000000..5339fa9725
--- /dev/null
+++ b/aio/content/examples/testing/src/expected.ts
@@ -0,0 +1 @@
+/* Ignore. Satisfies static analysis of router config in app.component.router.spec.ts */
diff --git a/aio/content/examples/testing/src/index-specs.html b/aio/content/examples/testing/src/index-specs.html
new file mode 100644
index 0000000000..ca132f6cd0
--- /dev/null
+++ b/aio/content/examples/testing/src/index-specs.html
@@ -0,0 +1,4 @@
+
diff --git a/aio/content/examples/testing/src/main-specs.ts b/aio/content/examples/testing/src/main-specs.ts
new file mode 100644
index 0000000000..4bb1949ae9
--- /dev/null
+++ b/aio/content/examples/testing/src/main-specs.ts
@@ -0,0 +1,45 @@
+import './testing/global-jasmine';
+import 'jasmine-core/lib/jasmine-core/jasmine-html.js';
+import 'jasmine-core/lib/jasmine-core/boot.js';
+
+declare var jasmine;
+
+import './polyfills';
+
+import 'zone.js/dist/async-test';
+import 'zone.js/dist/fake-async-test';
+import 'zone.js/dist/long-stack-trace-zone';
+import 'zone.js/dist/proxy.js';
+import 'zone.js/dist/sync-test';
+import 'zone.js/dist/jasmine-patch';
+
+import { getTestBed } from '@angular/core/testing';
+import {
+ BrowserDynamicTestingModule,
+ platformBrowserDynamicTesting
+} from '@angular/platform-browser-dynamic/testing';
+
+// Spec files to include in the Stackblitz tests
+import './tests.sb.ts';
+
+//
+
+bootstrap();
+
+//
+
+function bootstrap () {
+ if (window['jasmineRef']) {
+ location.reload();
+ return;
+ } else {
+ window.onload(undefined);
+ window['jasmineRef'] = jasmine.getEnv();
+ }
+
+ // First, initialize the Angular testing environment.
+ getTestBed().initTestEnvironment(
+ BrowserDynamicTestingModule,
+ platformBrowserDynamicTesting()
+ );
+}
diff --git a/aio/content/examples/testing/src/test.css b/aio/content/examples/testing/src/test.css
new file mode 100644
index 0000000000..6010a5d9ba
--- /dev/null
+++ b/aio/content/examples/testing/src/test.css
@@ -0,0 +1 @@
+@import "~jasmine-core/lib/jasmine-core/jasmine.css"
diff --git a/aio/content/examples/testing/src/testing/activated-route-stub.ts b/aio/content/examples/testing/src/testing/activated-route-stub.ts
new file mode 100644
index 0000000000..04fb7cb92b
--- /dev/null
+++ b/aio/content/examples/testing/src/testing/activated-route-stub.ts
@@ -0,0 +1,29 @@
+// export for convenience.
+export { ActivatedRoute } from '@angular/router';
+
+// #docregion activated-route-stub
+import { ReplaySubject } from 'rxjs/ReplaySubject';
+import { convertToParamMap, ParamMap, Params } from '@angular/router';
+
+/**
+ * An ActivateRoute test double with a `paramMap` observable.
+ * Use the `setParamMap()` method to add the next `paramMap` value.
+ */
+export class ActivatedRouteStub {
+ // Use a ReplaySubject to share previous values with subscribers
+ // and pump new values into the `paramMap` observable
+ private subject = new ReplaySubject();
+
+ constructor(initialParams?: Params) {
+ this.setParamMap(initialParams);
+ }
+
+ /** The mock paramMap observable */
+ readonly paramMap = this.subject.asObservable();
+
+ /** Set the paramMap observables's next value */
+ setParamMap(params?: Params) {
+ this.subject.next(convertToParamMap(params));
+ };
+}
+// #enddocregion activated-route-stub
diff --git a/aio/content/examples/testing/src/testing/async-observable-helpers.ts b/aio/content/examples/testing/src/testing/async-observable-helpers.ts
new file mode 100644
index 0000000000..3282bcbe37
--- /dev/null
+++ b/aio/content/examples/testing/src/testing/async-observable-helpers.ts
@@ -0,0 +1,30 @@
+/*
+* Mock async observables that return asynchronously.
+* The observable either emits once and completes or errors.
+*
+* Must call `tick()` when test with `fakeAsync()`.
+*
+* THE FOLLOWING DON'T WORK
+* Using `of().delay()` triggers TestBed errors;
+* see https://github.com/angular/angular/issues/10127 .
+*
+* Using `asap` scheduler - as in `of(value, asap)` - doesn't work either.
+*/
+import { Observable } from 'rxjs/Observable';
+import { defer } from 'rxjs/observable/defer';
+
+// #docregion async-data
+/** Create async observable that emits-once and completes
+ * after a JS engine turn */
+export function asyncData(data: T) {
+ return defer(() => Promise.resolve(data));
+}
+// #enddocregion async-data
+
+// #docregion async-error
+/** Create async observable error that errors
+ * after a JS engine turn */
+export function asyncError(errorObject: any) {
+ return defer(() => Promise.reject(errorObject));
+}
+// #enddocregion async-error
diff --git a/aio/content/examples/testing/src/testing/global-jasmine.ts b/aio/content/examples/testing/src/testing/global-jasmine.ts
new file mode 100644
index 0000000000..560ff97d66
--- /dev/null
+++ b/aio/content/examples/testing/src/testing/global-jasmine.ts
@@ -0,0 +1,3 @@
+import jasmineRequire from 'jasmine-core/lib/jasmine-core/jasmine.js';
+
+window['jasmineRequire'] = jasmineRequire;
diff --git a/aio/content/examples/testing/src/testing/index.ts b/aio/content/examples/testing/src/testing/index.ts
index e3de5164ca..1fddaf8c4d 100644
--- a/aio/content/examples/testing/src/testing/index.ts
+++ b/aio/content/examples/testing/src/testing/index.ts
@@ -1,8 +1,10 @@
import { DebugElement } from '@angular/core';
import { tick, ComponentFixture } from '@angular/core/testing';
+export * from './async-observable-helpers';
+export * from './activated-route-stub';
export * from './jasmine-matchers';
-export * from './router-stubs';
+export * from './router-link-directive-stub';
///// Short utilities /////
diff --git a/aio/content/examples/testing/src/testing/router-link-directive-stub.ts b/aio/content/examples/testing/src/testing/router-link-directive-stub.ts
new file mode 100644
index 0000000000..761529d726
--- /dev/null
+++ b/aio/content/examples/testing/src/testing/router-link-directive-stub.ts
@@ -0,0 +1,30 @@
+import { Directive, Input } from '@angular/core';
+
+// export for convenience.
+export { RouterLink} from '@angular/router';
+
+/* tslint:disable:directive-class-suffix */
+// #docregion router-link
+@Directive({
+ selector: '[routerLink]',
+ host: { '(click)': 'onClick()' }
+})
+export class RouterLinkDirectiveStub {
+ @Input('routerLink') linkParams: any;
+ navigatedTo: any = null;
+
+ onClick() {
+ this.navigatedTo = this.linkParams;
+ }
+}
+// #enddocregion router-link
+
+/// Dummy module to satisfy Angular Language service. Never used.
+import { NgModule } from '@angular/core';
+
+@NgModule({
+ declarations: [
+ RouterLinkDirectiveStub
+ ]
+})
+export class RouterStubsModule {}
diff --git a/aio/content/examples/testing/src/testing/router-stubs.ts b/aio/content/examples/testing/src/testing/router-stubs.ts
deleted file mode 100644
index 880302c7be..0000000000
--- a/aio/content/examples/testing/src/testing/router-stubs.ts
+++ /dev/null
@@ -1,58 +0,0 @@
- // export for convenience.
-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()'
- }
-})
-export class RouterLinkStubDirective {
- @Input('routerLink') linkParams: any;
- navigatedTo: any = null;
-
- onClick() {
- this.navigatedTo = this.linkParams;
- }
-}
-// #enddocregion router-link
-
-@Component({selector: 'router-outlet', template: ''})
-export class RouterOutletStubComponent { }
-
-@Injectable()
-export class RouterStub {
- navigate(commands: any[], extras?: NavigationExtras) { }
-}
-
-
-// Only implements params and part of snapshot.paramMap
-// #docregion activated-route-stub
-import { BehaviorSubject } from 'rxjs/BehaviorSubject';
-import { convertToParamMap, ParamMap } from '@angular/router';
-
-@Injectable()
-export class ActivatedRouteStub {
-
- // ActivatedRoute.paramMap is Observable
- private subject = new BehaviorSubject(convertToParamMap(this.testParamMap));
- paramMap = this.subject.asObservable();
-
- // Test parameters
- private _testParamMap: ParamMap;
- get testParamMap() { return this._testParamMap; }
- set testParamMap(params: {}) {
- this._testParamMap = convertToParamMap(params);
- this.subject.next(this._testParamMap);
- }
-
- // ActivatedRoute.snapshot.paramMap
- get snapshot() {
- return { paramMap: this.testParamMap };
- }
-}
-// #enddocregion activated-route-stub
diff --git a/aio/content/examples/testing/src/app-specs.html b/aio/content/examples/testing/src/tests.html
similarity index 75%
rename from aio/content/examples/testing/src/app-specs.html
rename to aio/content/examples/testing/src/tests.html
index 7b7292ed7c..c988c457cb 100644
--- a/aio/content/examples/testing/src/app-specs.html
+++ b/aio/content/examples/testing/src/tests.html
@@ -31,23 +31,31 @@
diff --git a/aio/content/examples/testing/src/tests.sb.ts b/aio/content/examples/testing/src/tests.sb.ts
new file mode 100644
index 0000000000..3f1c8fe61a
--- /dev/null
+++ b/aio/content/examples/testing/src/tests.sb.ts
@@ -0,0 +1,26 @@
+// Import spec files individually for Stackblitz
+import 'app/about/about.component.spec.ts';
+import 'app/app-initial.component.spec.ts';
+import 'app/app.component.router.spec.ts';
+import 'app/app.component.spec.ts';
+import 'app/banner/banner-initial.component.spec.ts';
+import 'app/banner/banner.component.spec.ts';
+import 'app/banner/banner.component.detect-changes.spec.ts';
+import 'app/banner/banner-external.component.spec.ts';
+import 'app/dashboard/dashboard-hero.component.spec.ts';
+import 'app/dashboard/dashboard.component.no-testbed.spec.ts';
+import 'app/dashboard/dashboard.component.spec.ts';
+import 'app/demo/async-helper.spec.ts';
+import 'app/demo/demo.spec.ts';
+import 'app/demo/demo.testbed.spec.ts';
+import 'app/hero/hero-detail.component.no-testbed.spec.ts';
+import 'app/hero/hero-detail.component.spec.ts';
+import 'app/hero/hero-list.component.spec.ts';
+import 'app/model/hero.service.spec.ts';
+import 'app/model/http-hero.service.spec.ts';
+import 'app/model/testing/http-client.spec.ts';
+import 'app/shared/highlight.directive.spec.ts';
+import 'app/shared/title-case.pipe.spec.ts';
+import 'app/twain/twain.component.spec.ts';
+import 'app/twain/twain.component.marbles.spec.ts';
+import 'app/welcome/welcome.component.spec.ts';
diff --git a/aio/content/examples/testing/stackblitz.json b/aio/content/examples/testing/stackblitz.json
new file mode 100644
index 0000000000..d05e3dbb1a
--- /dev/null
+++ b/aio/content/examples/testing/stackblitz.json
@@ -0,0 +1,19 @@
+{
+ "description": "Heroes Test App",
+ "files":[
+ "src/styles.css",
+
+ "src/app/**/*.css",
+ "src/app/**/*.html",
+ "src/app/**/*.ts",
+
+ "!src/app/bag/*.*",
+
+ "!src/test.ts",
+
+ "src/test.css",
+ "src/main.ts",
+ "src/index.html"
+ ],
+ "tags": ["testing"]
+}
diff --git a/aio/content/examples/toh-pt0/plnkr.json b/aio/content/examples/toh-pt0/stackblitz.json
similarity index 87%
rename from aio/content/examples/toh-pt0/plnkr.json
rename to aio/content/examples/toh-pt0/stackblitz.json
index 3caa575acd..c2cf48171f 100644
--- a/aio/content/examples/toh-pt0/plnkr.json
+++ b/aio/content/examples/toh-pt0/stackblitz.json
@@ -1,6 +1,5 @@
{
"description": "Tour of Heroes: Part 0",
- "basePath": "src/",
"files":[
"!**/*.d.ts",
"!**/*.js",
diff --git a/aio/content/examples/toh-pt1/plnkr.json b/aio/content/examples/toh-pt1/stackblitz.json
similarity index 89%
rename from aio/content/examples/toh-pt1/plnkr.json
rename to aio/content/examples/toh-pt1/stackblitz.json
index 5ac3b2d3ce..880b28fae6 100644
--- a/aio/content/examples/toh-pt1/plnkr.json
+++ b/aio/content/examples/toh-pt1/stackblitz.json
@@ -1,6 +1,5 @@
{
"description": "Tour of Heroes: Part 1",
- "basePath": "src/",
"files":[
"!**/*.d.ts",
"!**/*.js",
diff --git a/aio/content/examples/toh-pt2/plnkr.json b/aio/content/examples/toh-pt2/stackblitz.json
similarity index 87%
rename from aio/content/examples/toh-pt2/plnkr.json
rename to aio/content/examples/toh-pt2/stackblitz.json
index 08c7b9581a..8f3cefdaeb 100644
--- a/aio/content/examples/toh-pt2/plnkr.json
+++ b/aio/content/examples/toh-pt2/stackblitz.json
@@ -1,6 +1,5 @@
{
"description": "Tour of Heroes: Part 2",
- "basePath": "src/",
"files":[
"!**/*.d.ts",
"!**/*.js",
diff --git a/aio/content/examples/toh-pt3/plnkr.json b/aio/content/examples/toh-pt3/stackblitz.json
similarity index 87%
rename from aio/content/examples/toh-pt3/plnkr.json
rename to aio/content/examples/toh-pt3/stackblitz.json
index 829715877e..c4ef78dc9f 100644
--- a/aio/content/examples/toh-pt3/plnkr.json
+++ b/aio/content/examples/toh-pt3/stackblitz.json
@@ -1,6 +1,5 @@
{
"description": "Tour of Heroes: Part 3",
- "basePath": "src/",
"files":[
"!**/*.d.ts",
"!**/*.js",
diff --git a/aio/content/examples/toh-pt4/src/app/app.module.ts b/aio/content/examples/toh-pt4/src/app/app.module.ts
index 70b26976da..f3cc34faff 100644
--- a/aio/content/examples/toh-pt4/src/app/app.module.ts
+++ b/aio/content/examples/toh-pt4/src/app/app.module.ts
@@ -21,7 +21,14 @@ import { MessagesComponent } from './messages/messages.component';
FormsModule
],
// #docregion providers
- providers: [ HeroService, MessageService ],
+ // #docregion providers-heroservice
+ providers: [
+ HeroService,
+ // #enddocregion providers-heroservice
+ MessageService
+ // #docregion providers-heroservice
+ ],
+ // #enddocregion providers-heroservice
// #enddocregion providers
bootstrap: [ AppComponent ]
})
diff --git a/aio/content/examples/toh-pt4/plnkr.json b/aio/content/examples/toh-pt4/stackblitz.json
similarity index 87%
rename from aio/content/examples/toh-pt4/plnkr.json
rename to aio/content/examples/toh-pt4/stackblitz.json
index 95987d95ce..1b3e442ac0 100644
--- a/aio/content/examples/toh-pt4/plnkr.json
+++ b/aio/content/examples/toh-pt4/stackblitz.json
@@ -1,6 +1,5 @@
{
"description": "Tour of Heroes: Part 4",
- "basePath": "src/",
"files":[
"!**/*.d.ts",
"!**/*.js",
diff --git a/aio/content/examples/toh-pt5/src/app/messages/messages.component.html b/aio/content/examples/toh-pt5/src/app/messages/messages.component.html
index 1df7dfd989..8e86f5247d 100644
--- a/aio/content/examples/toh-pt5/src/app/messages/messages.component.html
+++ b/aio/content/examples/toh-pt5/src/app/messages/messages.component.html
@@ -3,6 +3,6 @@
Messages
- {{message}}
+ {{message}}
diff --git a/aio/content/examples/toh-pt5/plnkr.json b/aio/content/examples/toh-pt5/stackblitz.json
similarity index 88%
rename from aio/content/examples/toh-pt5/plnkr.json
rename to aio/content/examples/toh-pt5/stackblitz.json
index df6999a611..17390ecfc6 100644
--- a/aio/content/examples/toh-pt5/plnkr.json
+++ b/aio/content/examples/toh-pt5/stackblitz.json
@@ -1,6 +1,5 @@
{
"description": "Tour of Heroes: Part 5",
- "basePath": "src/",
"files":[
"!**/*.d.ts",
"!**/*.js",
diff --git a/aio/content/examples/toh-pt6/e2e/app.e2e-spec.ts b/aio/content/examples/toh-pt6/e2e/app.e2e-spec.ts
index b51be25f84..cbd0df76d4 100644
--- a/aio/content/examples/toh-pt6/e2e/app.e2e-spec.ts
+++ b/aio/content/examples/toh-pt6/e2e/app.e2e-spec.ts
@@ -190,6 +190,29 @@ describe('Tutorial part 6', () => {
const maxId = heroesBefore[heroesBefore.length - 1].id;
expect(heroesAfter[numHeroes]).toEqual({id: maxId + 1, name: newHeroName});
});
+
+ it('displays correctly styled buttons', async () => {
+ element.all(by.buttonText('x')).then(buttons => {
+ for (const button of buttons) {
+ // Inherited styles from styles.css
+ expect(button.getCssValue('font-family')).toBe('Arial');
+ expect(button.getCssValue('border')).toContain('none');
+ expect(button.getCssValue('padding')).toBe('5px 10px');
+ expect(button.getCssValue('border-radius')).toBe('4px');
+ // Styles defined in heroes.component.css
+ expect(button.getCssValue('left')).toBe('194px');
+ expect(button.getCssValue('top')).toBe('-32px');
+ }
+ });
+
+ const addButton = element(by.buttonText('add'));
+ // Inherited styles from styles.css
+ expect(addButton.getCssValue('font-family')).toBe('Arial');
+ expect(addButton.getCssValue('border')).toContain('none');
+ expect(addButton.getCssValue('padding')).toBe('5px 10px');
+ expect(addButton.getCssValue('border-radius')).toBe('4px');
+ });
+
});
describe('Progressive hero search', () => {
diff --git a/aio/content/examples/toh-pt6/src/app/heroes/heroes.component.css b/aio/content/examples/toh-pt6/src/app/heroes/heroes.component.css
index 62634648ad..c345d1d970 100644
--- a/aio/content/examples/toh-pt6/src/app/heroes/heroes.component.css
+++ b/aio/content/examples/toh-pt6/src/app/heroes/heroes.component.css
@@ -51,7 +51,7 @@
}
/* #docregion additions */
-.button {
+button {
background-color: #eee;
border: none;
padding: 5px 10px;
diff --git a/aio/content/examples/toh-pt6/plnkr.json b/aio/content/examples/toh-pt6/stackblitz.json
similarity index 88%
rename from aio/content/examples/toh-pt6/plnkr.json
rename to aio/content/examples/toh-pt6/stackblitz.json
index d355bc9ff2..777d9ad1f1 100644
--- a/aio/content/examples/toh-pt6/plnkr.json
+++ b/aio/content/examples/toh-pt6/stackblitz.json
@@ -1,6 +1,5 @@
{
"description": "Tour of Heroes: Part 6",
- "basePath": "src/",
"files":[
"!**/*.d.ts",
"!**/*.js",
diff --git a/aio/content/examples/universal/src/app/app.module.ts b/aio/content/examples/universal/src/app/app.module.ts
index 6d07040733..1dab81e17b 100644
--- a/aio/content/examples/universal/src/app/app.module.ts
+++ b/aio/content/examples/universal/src/app/app.module.ts
@@ -53,7 +53,7 @@ export class AppModule {
@Inject(PLATFORM_ID) private platformId: Object,
@Inject(APP_ID) private appId: string) {
const platform = isPlatformBrowser(platformId) ?
- 'on the server' : 'in the browser';
+ 'in the browser' : 'on the server';
console.log(`Running ${platform} with appId=${appId}`);
}
// #enddocregion platform-detection
diff --git a/aio/content/examples/upgrade-phonecat-2-hybrid/karma-test-shim.1.js b/aio/content/examples/upgrade-phonecat-2-hybrid/karma-test-shim.1.js
index 19fcc89fe9..b92085c014 100644
--- a/aio/content/examples/upgrade-phonecat-2-hybrid/karma-test-shim.1.js
+++ b/aio/content/examples/upgrade-phonecat-2-hybrid/karma-test-shim.1.js
@@ -37,6 +37,7 @@ System.config({
map: {
'@angular/core/testing': 'npm:@angular/core/bundles/core-testing.umd.js',
'@angular/common/testing': 'npm:@angular/common/bundles/common-testing.umd.js',
+ '@angular/common/http/testing': 'npm:@angular/common/bundles/common-http-testing.umd.js',
'@angular/compiler/testing': 'npm:@angular/compiler/bundles/compiler-testing.umd.js',
'@angular/platform-browser/testing': 'npm:@angular/platform-browser/bundles/platform-browser-testing.umd.js',
'@angular/platform-browser-dynamic/testing': 'npm:@angular/platform-browser-dynamic/bundles/platform-browser-dynamic-testing.umd.js',
diff --git a/aio/content/examples/user-input/plnkr.json b/aio/content/examples/user-input/stackblitz.json
similarity index 82%
rename from aio/content/examples/user-input/plnkr.json
rename to aio/content/examples/user-input/stackblitz.json
index dd8f063d37..d60beb9e7e 100644
--- a/aio/content/examples/user-input/plnkr.json
+++ b/aio/content/examples/user-input/stackblitz.json
@@ -1,6 +1,5 @@
{
"description": "User Input",
- "basePath": "src/",
"files": [
"!**/*.d.ts",
"!**/*.js"
diff --git a/aio/content/guide/ajs-quick-reference.md b/aio/content/guide/ajs-quick-reference.md
index 987ca23405..6a3018367f 100644
--- a/aio/content/guide/ajs-quick-reference.md
+++ b/aio/content/guide/ajs-quick-reference.md
@@ -1423,10 +1423,9 @@ The Angular code is shown using TypeScript.
`declaration`: 用于记录组件、管道和指令。
- For more information on modules, see [NgModules](guide/ngmodule).
+ For more information on modules, see [NgModules](guide/ngmodules).
要了解关于模块的更多知识，参见[NgModules](guide/ngmodule)。
-
@@ -1660,7 +1659,7 @@ also encapsulate a style sheet within a specific component.
### 样式配置
-
+
diff --git a/aio/content/guide/aot-compiler.md b/aio/content/guide/aot-compiler.md
index 05ed37395e..1ca15ebf88 100644
--- a/aio/content/guide/aot-compiler.md
+++ b/aio/content/guide/aot-compiler.md
@@ -4,7 +4,7 @@ The Angular Ahead-of-Time (AOT) compiler converts your Angular HTML and TypeScri
Angular 的“预先（AOT）编译器”会在构建期间把 Angular 应用的 HTML 和 TypeScript 代码编译成高效的 JavaScript 代码，之后浏览器就可以下载并快速运行这些代码。
-This guide explains how to build with the AOT compiler and how to write Angular metadata that AOT can compile.
+This guide explains how to build with the AOT compiler using different compiler options and how to write Angular metadata that AOT can compile.
本章描述了如何使用 AOT 编译器，以及如何书写能被 AOT 编译的 Angular 元数据。
@@ -116,6 +116,182 @@ there are fewer opportunities for injection attacks.
AOT编译远在HTML模版和组件被服务到客户端之前，将它们编译到JavaScript文件。
没有模版可以阅读，没有高风险客户端HTML或JavaScript可利用，所以注入攻击的机会较少。
+{@a compiler-options}
+
+## Angular Compiler Options
+
+You can control your app compilation by providing template compiler options in the `tsconfig.json` file along with the options supplied to the TypeScript compiler. The template compiler options are specified as members of
+`"angularCompilerOptions"` object as shown below:
+
+```json
+{
+ "compilerOptions": {
+ "experimentalDecorators": true,
+ ...
+ },
+ "angularCompilerOptions": {
+ "fullTemplateTypeCheck": true,
+ "preserveWhitespaces": true,
+ ...
+ }
+}
+```
+
+### *skipMetadataEmit*
+
+This option tells the compiler not to produce `.metadata.json` files.
+The option is `false` by default.
+
+`.metadata.json` files contain infomration needed by the template compiler from a `.ts`
+file that is not included in the `.d.ts` file produced by the TypeScript compiler. This information contains,
+for example, the content of annotations (such as a component's template) which TypeScript
+emits to the `.js` file but not to the `.d.ts` file.
+
+This option should be set to `true` if using TypeScript's `--outFile` option, as the metadata files
+are not valid for this style of TypeScript output. It is not recommeded to use `--outFile` with
+Angular. Use a bundler, such as [webpack](https://webpack.js.org/), instead.
+
+This option can also be set to `true` when using factory summaries as the factory summaries
+include a copy of the information that is in the `.metadata.json` file.
+
+### *strictMetadataEmit*
+
+This option tells the template compiler to report an error to the `.metadata.json`
+file if `"skipMetadataEmit"` is `false` . This option is `false` by default. This should only be used when `"skipMetadataEmit"` is `false` and `"skipTemplateCodeGen"` is `true`.
+
+It is intended to validate the `.metadata.json` files emitted for bundling with an `npm` package. The validation is overly strict and can emit errors for metadata that would never produce an error when used by the template compiler. You can choose to suppress the error emitted by this option for an exported symbol by including `@dynamic` in the comment documenting the symbol.
+
+It is valid for `.metadata.json` files to contain errors. The template compiler reports these errors
+if the metadata is used to determine the contents of an annotation. The metadata
+collector cannot predict the symbols that are designed to use in an annotation, so it will preemptively
+include error nodes in the metadata for the exported symbols. The template compiler can then use the error
+nodes to report an error if these symbols are used. If the client of a library intends to use a symbol in an annotation, the template compiler will not normally report
+this until the client uses the symbol. This option allows detecting these errors during the build phase of
+the library and is used, for example, in producing Angular libraries themselves.
+
+### *skipTemplateCodegen*
+
+This option tells the compiler to suppress emitting `.ngfactory.js` and `.ngstyle.js` files. When set,
+this turns off most of the template compiler and disables reporting template diagnostics.
+This option can be used to instruct the
+template compiler to produce `.metadata.json` files for distribution with an `npm` package while
+avoiding the production of `.ngfactory.js` and `.ngstyle.js` files that cannot be distributed to
+`npm`.
+
+### *strictInjectionParameters*
+
+When set to `true`, this options tells the compiler to report an error for a parameter supplied
+whose injection type cannot be determined. When this value option is not provided or is `false`, constructor parameters of classes marked with `@Injectable` whose type cannot be resolved will
+produce a warning.
+
+*Note*: It is recommended to change this option explicitly to `true` as this option will default to `true` in the future.
+
+### *flatModuleOutFile*
+
+When set to `true`, this option tells the template compiler to generate a flat module
+index of the given file name and the corresponding flat module metadata. Use this option when creating
+flat modules that are packaged similarly to `@angular/core` and `@angular/common`. When this option
+is used, the `package.json` for the library should refer
+to the generated flat module index instead of the library index file. With this
+option only one `.metadata.json` file is produced that contains all the metadata necessary
+for symbols exported from the library index. In the generated `.ngfactory.js` files, the flat
+module index is used to import symbols that includes both the public API from the library index
+as well as shrowded internal symbols.
+
+By default the `.ts` file supplied in the `files` field is assumed to be library index.
+If more than one `.ts` file is specified, `libraryIndex` is used to select the file to use.
+If more than one `.ts` file is supplied without a `libraryIndex`, an error is produced. A flat module
+index `.d.ts` and `.js` will be created with the given `flatModuleOutFile` name in the same
+location as the library index `.d.ts` file. For example, if a library uses
+`public_api.ts` file as the library index of the module, the `tsconfig.json` `files` field
+would be `["public_api.ts"]`. The `flatModuleOutFile` options could then be set to, for
+example `"index.js"`, which produces `index.d.ts` and `index.metadata.json` files. The
+library's `package.json`'s `module` field would be `"index.js"` and the `typings` field
+would be `"index.d.ts"`.
+
+### *flatModuleId*
+
+This option specifies the preferred module id to use for importing a flat module.
+References generated by the template compiler will use this module name when importing symbols
+from the flat module.
+This is only meaningful when `flatModuleOutFile` is also supplied. Otherwise the compiler ignores
+this option.
+
+### *generateCodeForLibraries*
+
+This option tells the template compiler to generate factory files (`.ngfactory.js` and `.ngstyle.js`)
+for `.d.ts` files with a corresponding `.metadata.json` file. This option defaults to
+`true`. When this option is `false`, factory files are generated only for `.ts` files.
+
+This option should be set to `false` when using factory summaries.
+
+### *fullTemplateTypeCheck*
+
+This option tells the compiler to enable the [binding expression validation](#binding-expresion-validation)
+phase of the template compiler which uses TypeScript to validate binding expressions.
+
+This option is `false` by default.
+
+*Note*: It is recommended to set this to `true` as this option will default to `true` in the future.
+
+### *annotateForClosureCompiler*
+
+This option tells the compiler to use [Tsickle](https://github.com/angular/tsickle) to annotate the emitted
+JavaScript with [JsDoc](http://usejsdoc.org/) comments needed by the
+[Closure Compiler](https://github.com/google/closure-compiler). This option defaults to `false`.
+
+### *annotationsAs*
+
+Use this option to modify how the Angular specific annotations are emitted to improve tree-shaking. Non-Angular
+annotations and decorators are unnaffected. Default is `static fields`.
+
+value | description
+----------------|-------------------------------------------------------------
+`decorators` | Leave the Decorators in-place. This makes compilation faster. TypeScript will emit calls to the __decorate helper. Use `--emitDecoratorMetadata` for runtime reflection. However, the resulting code will not properly tree-shake.
+`static fields` | Replace decorators with a static field in the class. Allows advanced tree-shakers like [Closure Compiler](https://github.com/google/closure-compiler) to remove unused classes.
+
+### *trace*
+
+This tells the compiler to print extra information while compiling templates.
+
+### *enableLegacyTemplate*
+
+The use of `` element was deprecated starting in Angular 4.0 in favor of using
+`` to avoid colliding with the DOM's element of the same name. Setting this option to
+`true` enables the use of the deprecated `` element . This option
+is `false` by default. This option might be required by some third-party Angular libraries.
+
+### *disableExpressionLowering*
+
+The Angular template compiler transforms code that is used, or could be used, in an annotation
+to allow it to be imported from template factory modules. See
+[metadata rewriting](#metadata-rewriting) for more information.
+
+Setting this option to `false` disables this rewriting, requiring the rewriting to be
+done manually.
+
+### *preserveWhitespaces*
+
+This option tells the compiler whether to remove blank text nodes from compiled templates.
+As of v6, this option is `false` by default, which results in smaller emitted template factory modules.
+
+### *allowEmptyCodegenFiles*
+
+Tells the compiler to generate all the possible generated files even if they are empty. This option is
+`false` by default. This is an option used by `bazel` build rules and is needed to simplify
+how `bazel` rules track file dependencies. It is not recommended to use this option outside of the `bazel`
+rules.
+
+ ### *enableIvy*
+
+ Tells the compiler to generate definitions using the Render3 style code generation. This option defaults to `false`.
+
+ Not all features are supported with this option enabled. It is only supported
+ for experimentation and testing of Render3 style code generation.
+
+ *Note*: Is it not recommended to use this option as it is not yet feature complete with the Render2 code generation.
+
+
## Angular Metadata and AOT
## Angular 元数据与 AOT
@@ -278,7 +454,7 @@ and [arrow functions](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Re
Consider the following component decorator:
-```ts
+```typescript
@Component({
...
providers: [{provide: server, useFactory: () => new Server()}]
@@ -292,7 +468,7 @@ When the compiler later interprets this node, it reports an error that invites y
You can fix the error by converting to this:
-```ts
+```typescript
export function serverFactory() {
return new Server();
}
@@ -305,6 +481,7 @@ export function serverFactory() {
Beginning in version 5, the compiler automatically performs this rewritting while emitting the `.js` file.
+{@a function-calls}
### Limited function calls
The _collector_ can represent a function call or object creation with `new` as long as the syntax is valid. The _collector_ only cares about proper syntax.
@@ -330,7 +507,7 @@ module-local `const` declarations and initialized `var` and `let` declarations,
Consider the following component definition:
-```ts
+```typescript
const template = '{{hero.name}}';
@Component({
@@ -347,7 +524,7 @@ The compiler could not refer to the `template` constant because it isn't exporte
But the _collector_ can _fold_ the `template` constant into the metadata definition by inlining its contents.
The effect is the same as if you had written:
-```TypeScript
+```typescript
@Component({
selector: 'app-hero',
template: '{{hero.name}}'
@@ -361,7 +538,7 @@ There is no longer a reference to `template` and, therefore, nothing to trouble
You can take this example a step further by including the `template` constant in another expression:
-```TypeScript
+```typescript
const template = '{{hero.name}}';
@Component({
@@ -419,7 +596,7 @@ Decorated component class members must be public. You cannot make an `@Input()`
Data bound properties must also be public.
-```TypeScript
+```typescript
// BAD CODE - title is private
@Component({
selector: 'app-root',
@@ -471,7 +648,7 @@ methods that return an expression.
For example, consider the following function:
-```TypeScript
+```typescript
export function wrapInArray(value: T): T[] {
return [value];
}
@@ -481,7 +658,7 @@ You can call the `wrapInArray` in a metadata definition because it returns the v
You might use `wrapInArray()` like this:
-```TypeScript
+```typescript
@NgModule({
declarations: wrapInArray(TypicalComponent)
})
@@ -490,7 +667,7 @@ export class TypicalModule {}
The compiler treats this usage as if you had written:
-```TypeScript
+```typescript
@NgModule({
declarations: [TypicalComponent]
})
@@ -502,7 +679,9 @@ function; it can only contain a single `return` statement.
The Angular [`RouterModule`](api/router/RouterModule) exports two macro static methods, `forRoot` and `forChild`, to help declare root and child routes.
Review the [source code](https://github.com/angular/angular/blob/master/packages/router/src/router_module.ts#L139 "RouterModule.forRoot source code")
-for these methods to see how macros can simplify configuration of complex [NgModules](guide/ngmodule).
+for these methods to see how macros can simplify configuration of complex [NgModules](guide/ngmodules).
+
+{@a metadata-rewriting}
### Metadata rewriting
@@ -513,7 +692,7 @@ the compiler doesn't need to know the expression's value—it just needs to
You might write something like:
-```ts
+```typescript
class TypicalServer {
}
@@ -528,7 +707,7 @@ Without rewriting, this would be invalid because lambdas are not supported and `
To allow this, the compiler automatically rewrites this to something like:
-```ts
+```typescript
class TypicalServer {
}
@@ -1053,7 +1232,155 @@ This error can occur if you use an expression in the `extends` clause of a class
Chuck: After reviewing your PR comment I'm still at a loss. See [comment there](https://github.com/angular/angular/pull/17712#discussion_r132025495).
-->
+{@a binding-expresion-validation}
+ ## Phase 3: binding expression validation
+
+ In the validation phase, the Angular template compiler uses the TypeScript compiler to validate the
+ binding expressions in templates. Enable this phase explicity by adding the compiler
+ option `"fullTemplateTypeCheck"` in the `"angularCompilerOptions"` of the project's `tsconfig.json` (see
+ [Angular Compiler Options](#compiler-options)).
+
+ Template validation produces error messages when a type error is detected in a template binding
+ expression, similar to how type errors are reported by the TypeScript compiler against code in a `.ts`
+ file.
+
+ For example, consider the following component:
+
+ ```typescript
+ @Component({
+ selector: 'my-component',
+ template: '{{person.addresss.street}}'
+ })
+ class MyComponent {
+ person?: Person;
+ }
+ ```
+
+ This will produce the following error:
+
+ ```
+ my.component.ts.MyComponent.html(1,1): : Property 'addresss' does not exist on type 'Person'. Did you mean 'address'?
+ ```
+
+ The file name reported in the error message, `my.component.ts.MyComponent.html`, is a synthetic file
+ generated by the template compiler that holds contents of the `MyComponent` class template.
+ Compiler never writes this file to disk. The line and column numbers are relative to the template string
+ in the `@Component` annotation of the class, `MyComponent` in this case. If a component uses
+ `templateUrl` instead of `template`, the errors are reported in the HTML file refereneced by the
+ `templateUrl` instead of a synthetic file.
+
+ The error location is the beginning of the text node that contains the interpolation expression with
+ the error. If the error is in an attribute binding such as `[value]="person.address.street"`, the error
+ location is the location of the attribute that contains the error.
+
+ The validation uses the TypeScript type checker and the options supplied to the TypeScript compiler to control
+ how detailed the type validation is. For example, if the `strictTypeChecks` is specified, the error ```my.component.ts.MyComponent.html(1,1): : Object is possibly 'undefined'``` is reported as well as the above error message.
+
+ ### Type narrowing
+
+ The expression used in an `ngIf` directive is used to narrow type unions in the Angular
+ template compiler, the same way the `if` expression does in TypeScript. For example, to avoid
+ `Object is possibly 'undefined'` error in the template above, modify it to only emit the
+ interpolation if the value of `person` is initialized as shown below:
+
+ ```typescript
+ @Component({
+ selector: 'my-component',
+ template: ' {{person.addresss.street}} '
+ })
+ class MyComponent {
+ person?: Person;
+ }
+ ```
+
+ Using `*ngIf` allows the TypeScript compiler to infer that the `person` used in the
+ binding expression will never be `undefined`.
+
+ #### Custom `ngIf` like directives
+
+ Directives that behave like `*ngIf` can declare that they want the same treatment by including
+ a static member marker that is a signal to the template compiler to treat them
+ like `*ngIf`. This static member for `*ngIf` is:
+
+ ```typescript
+ public static ngIfUseIfTypeGuard: void;
+ ```
+
+ This declares that the input property `ngIf` of the `NgIf` directive should be treated as a
+ guard to the use of its template, implying that the template will only be instantiated if
+ the `ngIf` input property is true.
+
+
+ ### Non-null type assertion operator
+
+ Use the [non-null type assertion operator](guide/template-syntax#non-null-assertion-operator)
+ to suppress the `Object is possibly 'undefined'` error when it is incovienent to use
+ `*ngIf` or when some constraint in the component ensures that the expression is always
+ non-null when the binding expression is interpolated.
+
+ In the following example, the `person` and `address` properties are always set together,
+ implying that `address` is always non-null if `person` is non-null. There is no convenient
+ way to describe this constraint to TypeScript and the template compiler, but the error
+ is suppressed in the example by using `address!.street`.
+
+ ```typescript
+ @Component({
+ selector: 'my-component',
+ template: ' {{person.name}} lives on {{address!.street}} '
+ })
+ class MyComponent {
+ person?: Person;
+ address?: Address;
+
+ setData(person: Person, address: Address) {
+ this.person = person;
+ this.address = address;
+ }
+ }
+ ```
+
+ The non-null assertion operator should be used sparingly as refactoring of the component
+ might break this constraint.
+
+ In this example it is recommended to include the checking of `address`
+ in the `*ngIf`as shown below:
+
+ ```typescript
+ @Component({
+ selector: 'my-component',
+ template: ' {{person.name}} lives on {{address.street}} '
+ })
+ class MyComponent {
+ person?: Person;
+ address?: Address;
+
+ setData(person: Person, address: Address) {
+ this.person = person;
+ this.address = address;
+ }
+ }
+ ```
+
+ ### Disabling type checking using `$any()`
+
+ Disable checking of a binding expression by surrounding the expression
+ in a call to the [`$any()` cast pseudo-function](guide/template-syntax).
+ The compiler treats it as a cast to the `any` type just like in TypeScript when a ``
+ or `as any` cast is used.
+
+ In the following example, the error `Property addresss does not exist` is suppressed
+ by casting `person` to the `any` type.
+
+ ```typescript
+ @Component({
+ selector: 'my-component',
+ template: '{{$any(person).addresss.street}}'
+ })
+ class MyComponent {
+ person?: Person;
+ }
+ ```
## Summary
* What the AOT compiler does and why it is important.
@@ -1062,3 +1389,4 @@ Chuck: After reviewing your PR comment I'm still at a loss. See [comment there](
* Other restrictions on metadata definition.
* Macro-functions and macro-static methods.
* Compiler errors related to metadata.
+* Validation of binding expressions
diff --git a/aio/content/guide/api-page-class.md b/aio/content/guide/api-page-class.md
new file mode 100644
index 0000000000..989bd0f327
--- /dev/null
+++ b/aio/content/guide/api-page-class.md
@@ -0,0 +1,175 @@
+
+
+ Class Name
+
+
+Class description goes here. This is a short and to the point one or two sentence description that easily introduces the reader to the class.
+
+
+ Overview
+
+ class Compiler {
+ compileModuleSync<T>(moduleType: Type<T>): NgModuleFactory<T>
+ compileModuleAsync<T>(moduleType: Type<T>): Promise<NgModuleFactory<T>>
+ compileModuleAndAllComponentsSync<T>(moduleType: Type<T>): ModuleWithComponentFactories<T>
+ compileModuleAndAllComponentsAsync<T>(moduleType: Type<T>): Promise<ModuleWithComponentFactories<T>>
+ clearCache(): void
+ clearCacheFor(type: Type<any>)
+ }
+
+
+ Description
+ The longer class description goes here which can include multiple paragraphs.
+ Bacon ipsum dolor amet pork belly capicola sirloin venison alcatra ground round ham hock jowl turkey picanha bresaola pancetta brisket chicken fatback. Burgdoggen kevin salami jowl shoulder jerky leberkas meatball. Ham hock picanha burgdoggen pork belly rump bacon cupim. Bacon kielbasa sirloin shank strip steak ground round. Bresaola cow salami meatloaf pork chop leberkas flank turducken biltong meatball chuck pork tri-tip chicken. Ribeye corned beef shoulder, meatloaf strip steak jerky porchetta capicola alcatra ham.
+ Subclasses
+
+ See Also
+
+
+
+ Constructor
+
+
+ constructor(element: any, keyframes: {
+ [key: string]: string | number;
+ }[], duration: number, delay: number, easing: string, previousPlayers: any[])
+
+
+
+ Properties
+
+
+
+ Property
+ Type
+ Description
+
+
+
+
+
+ Property1
+
+ Description goes here
+
+
+
+ Property2
+
+ Type
+ Description goes here
+
+
+
+ Property3
+
+ Type
+ Description goes here
+
+
+
+
+
+ Methods
+
+
+
+ Method1Name( )
+
+
+
+
+
+ Description goes here
+
+ Bacon ipsum dolor amet pork belly capicola sirloin venison alcatra ground round ham hock jowl turkey picanha bresaola pancetta brisket chicken fatback. Burgdoggen kevin salami jowl shoulder jerky leberkas meatball. Ham hock picanha burgdoggen pork belly rump bacon cupim. Bacon kielbasa sirloin shank strip steak ground round. Bresaola cow salami meatloaf pork chop leberkas flank turducken biltong meatball chuck pork tri-tip chicken. Ribeye corned beef shoulder, meatloaf strip steak jerky porchetta capicola alcatra ham.
+
+
+
+
+
+
+
+ Method2Name( )
+
+
+
+
+
+ Description goes here
+
+ Declaration
+
+
+ class AnimationBuilder {build(animation: AnimationMetadata | AnimationMetadata[]): AnimationFactory}
+
+ Parameters
+ Returns
+ Returns information and results goes here.
+ Errors
+ Error information goes here
+
+ Further details provided as needed. Bacon ipsum dolor amet pork belly capicola sirloin venison alcatra ground round ham hock jowl turkey picanha bresaola pancetta brisket chicken fatback. Burgdoggen kevin salami jowl shoulder jerky leberkas meatball.
+ Overloads
+
+
+
+
+
+
+ constructor(element: any, keyframes: {
+ [key: string]: string | number;
+ }[], duration: number, delay: number, easing: string, previousPlayers: any[])
+
+
+ Description goes here
+
+
+
+
+
+ constructor(element: any, keyframes: {
+ [key: string]: string | number;
+ }[], duration: number, delay: number, easing: string, previousPlayers: any[])
+
+
+ Description goes here
+
+
+
+
+ Example: Descriptive Title of Method Example
+ Bacon ipsum dolor amet pork belly capicola sirloin venison alcatra ground round ham hock jowl turkey picanha bresaola pancetta brisket chicken fatback. Burgdoggen kevin salami jowl shoulder jerky leberkas meatball. Ham hock picanha burgdoggen pork belly rump bacon cupim. Bacon kielbasa sirloin shank strip steak ground round. Bresaola cow salami meatloaf pork chop leberkas flank turducken biltong meatball chuck pork tri-tip chicken. Ribeye corned beef shoulder, meatloaf strip steak jerky porchetta capicola alcatra ham.
+
+
+
+
+
+
+ Example: Descriptive Title of Combined Example Goes Here
+ Intro description text about what the example is and how it can be used.
+
+
+ constructor(element: any, keyframes: {
+ [key: string]: string | number;
+ }[], duration: number, delay: number, easing: string, previousPlayers: any[])
+
+ Further explanation provided as needed. Bacon ipsum dolor amet pork belly capicola sirloin venison alcatra ground round ham hock jowl turkey picanha bresaola pancetta brisket chicken fatback. Burgdoggen kevin salami jowl shoulder jerky leberkas meatball.
+
+
\ No newline at end of file
diff --git a/aio/content/guide/architecture.md b/aio/content/guide/architecture.md
index 95f0b1e257..fc60aa9b19 100644
--- a/aio/content/guide/architecture.md
+++ b/aio/content/guide/architecture.md
@@ -62,7 +62,8 @@ Angular apps are modular and Angular has its own modularity system called _NgMod
Angular 应用是模块化的，并且 Angular 有自己的模块系统，它被称为 _Angular 模块_或 _NgModules_。
NgModules are a big deal.
-This page introduces modules; the [NgModules](guide/ngmodule) page covers them in depth.
+This page introduces modules; the [NgModules](guide/ngmodules) pages
+relating to NgModules covers them in detail.
_Angular 模块_很重要。这里只是简单介绍，在 [Angular 模块](guide/ngmodule)中会做深入讲解。
@@ -242,7 +243,7 @@ Hang in there. The confusion yields to clarity with time and experience.
-Learn more from the [NgModules](guide/ngmodule) page.
+Learn more from the [NgModules](guide/ngmodules) page.
更多信息，见 [Angular 模块](guide/ngmodule)。
@@ -327,12 +328,12 @@ template for our `HeroListComponent`:
-Although this template uses typical HTML elements like `` and `
`, it also has some differences. Code like `*ngFor`, `{{hero.name}}`, `(click)`, `[hero]`, and `` uses Angular's [template syntax](guide/template-syntax).
+Although this template uses typical HTML elements like `` and `
`, it also has some differences. Code like `*ngFor`, `{{hero.name}}`, `(click)`, `[hero]`, and `` uses Angular's [template syntax](guide/template-syntax).
模板除了可以使用像``和`
`这样的典型的 HTML 元素，还能使用其它元素。
例如，像`*ngFor`、`{{hero.name}}`、`(click)`、`[hero]`和``这样的代码使用了 Angular 的[模板语法](guide/template-syntax)。
-In the last line of the template, the `` tag is a custom element that represents a new component, `HeroDetailComponent`.
+In the last line of the template, the `` tag is a custom element that represents a new component, `HeroDetailComponent`.
在模板的最后一行，``标签就是一个用来表示新组件`HeroDetailComponent`的自定义元素。
@@ -347,7 +348,7 @@ The `HeroDetailComponent` is a **child** of the `HeroListComponent`.
-Notice how `` rests comfortably among native HTML elements. Custom components mix seamlessly with native HTML in the same layouts.
+Notice how `` rests comfortably among native HTML elements. Custom components mix seamlessly with native HTML in the same layouts.
注意到了吗？``舒适地躺在原生 HTML 元素之间。
自定义组件和原生 HTML 在同一布局中融合得天衣无缝。
@@ -409,8 +410,8 @@ Here are a few of the most useful `@Component` configuration options:
* `selector`: CSS selector that tells Angular to create and insert an instance of this component
-where it finds a `` tag in *parent* HTML.
-For example, if an app's HTML contains `` tag in *parent* HTML.
+For example, if an app's HTML contains ``标签，创建并插入该组件。
diff --git a/aio/content/guide/attribute-directives.md b/aio/content/guide/attribute-directives.md
index ec0d81a8b3..54f1a78d69 100644
--- a/aio/content/guide/attribute-directives.md
+++ b/aio/content/guide/attribute-directives.md
@@ -94,7 +94,7 @@ CLI 会创建`src/app/highlight.directive.ts`及相应的测试文件（`.../spe
-_Directives_ must be declared in [Angular Modules](guide/ngmodule) in the same manner as _components_.
+_Directives_ must be declared in [Angular Modules](guide/ngmodules) in the same manner as _components_.
和**组件**一样，这些**指令**也必须在[Angular模块](guide/ngmodule)中进行声明。
diff --git a/aio/content/guide/bootstrapping.md b/aio/content/guide/bootstrapping.md
index e05317bda6..046555b18d 100644
--- a/aio/content/guide/bootstrapping.md
+++ b/aio/content/guide/bootstrapping.md
@@ -1,280 +1,180 @@
# Bootstrapping
-# 启动过程
+#### Prerequisites
-An Angular Module (NgModule) class describes how the application parts fit together.
-Every application has at least one Angular Module, the _root_ module
-that you [bootstrap](#main) to launch the application.
-You can call the class anything you want. The conventional name is `AppModule`.
+A basic understanding of the following:
+* [JavaScript Modules vs. NgModules](guide/ngmodule-vs-jsmodule).
-Angular 模块类描述应用的部件是如何组合在一起的。
-每个应用都至少有一个 Angular 模块，也就是*根*模块，用来[引导](#main)并运行应用。
-你可以为它取任何名字。常规名字是`AppModule`。
+
-The [**Angular CLI**](https://cli.angular.io/) produces a new project with the following minimal `AppModule`.
-You evolve this module as your application grows.
+An NgModule describes how the application parts fit together.
+Every application has at least one Angular module, the _root_ module
+that you bootstrap to launch the application.
+By convention, it is usually called `AppModule`.
+If you use the CLI to generate an app, the default `AppModule` is as follows:
-[开发环境](guide/setup)讲解了如何使用下面这个最小的`AppModule`来创建一个新项目。
-这个模块随着应用的成长而演变。
-
+```typescript
+/* JavaScript imports */
+import { BrowserModule } from '@angular/platform-browser';
+import { NgModule } from '@angular/core';
+import { FormsModule } from '@angular/forms';
+import { HttpModule } from '@angular/http';
+import { AppComponent } from './app.component';
-After the `import` statements, you come to a class adorned with the
-**`@NgModule`** [_decorator_](guide/glossary#decorator '"Decorator" explained').
+/* the AppModule class with the @NgModule decorator */
+@NgModule({
+ declarations: [
+ AppComponent
+ ],
+ imports: [
+ BrowserModule,
+ FormsModule,
+ HttpModule
+ ],
+ providers: [],
+ bootstrap: [AppComponent]
+})
+export class AppModule { }
-`import`语句之后，可以看到一个**`@NgModule`**[装饰器](guide/glossary#decorator '"Decorator" explained')修饰的类。
+```
+
+After the import statements is a class with the
+**`@NgModule`** [decorator](guide/glossary#decorator '"Decorator" explained').
The `@NgModule` decorator identifies `AppModule` as an `NgModule` class.
-`@NgModule` takes a _metadata_ object that tells Angular how to compile and launch the application.
+`@NgModule` takes a metadata object that tells Angular how to compile and launch the application.
-`@NgModule`装饰器将`AppModule`标记为 Angular 模块类（也叫`NgModule`类）。
-`@NgModule`接受一个_元数据_对象，告诉 Angular 如何编译和启动应用。
+* **_declarations_**—this application's lone component.
+* **_imports_**—import `BrowserModule` to have browser specific services such as DOM rendering, sanitization, and location.
+* **_providers_**—the service providers.
+* **_bootstrap_**—the _root_ component that Angular creates and inserts
+into the `index.html` host web page.
-The `@NgModule` properties for the minimal `AppModule` generated by the CLI are as follows:
-
-在 CLI 生成的初始 `AppModule`中，`@NgModule` 包括下列属性：
-
-* **[_declarations_](#declarations)** — declares the application components. At the moment, there is only the `AppComponent`.
-
- **[_declarations_](#declarations)** —— 声明该应用的组件，刚创建时只有一个`AppComponent`。
-
-* **[_imports_](#imports)** — the `BrowserModule`, which this and every application must import in order to run the app in a browser.
-
- **[_imports_](#imports)** —— `BrowserModule`，每个应用都必须引入它，以便在浏览器中运行该应用。
-
-* **[_providers_](#providers)** — there are none to start but you are likely to add some soon.
-
- **[_providers_](#providers)** —— 开始时它是空的，不过你可能很快就会添加一个了。
-
-* **[_bootstrap_](#bootstrap-array)** — the _root_ `AppComponent` that Angular creates and inserts into the `index.html` host web page.
-
- **_bootstrap_** — _根_组件 `AppComponent`，Angular 创建它并把它插入到`index.html`宿主页面。
-
-The [Angular Modules (NgModules)](guide/ngmodule) guide dives deeply into the details of `@NgModule`.
-All you need to know at the moment is a few basics about these four properties.
-
-[Angular 模块 (NgModules)](guide/ngmodule) 指南深入讲解了 Angular 模块。
-现在先初步了解这三个属性。
+The default CLI application only has one component, `AppComponent`, so it
+is in both the `declarations` and the `bootstrap` arrays.
{@a declarations}
+## The `declarations` array
-### The _declarations_ array
+The module's `declarations` array tells Angular which components belong to that module.
+As you create more components, add them to `declarations`.
-### _declarations_ 数组
+You must declare every component in exactly one `NgModule` class.
+If you use a component without declaring it, Angular returns an
+error message.
-You tell Angular which components belong to the `AppModule` by listing it in the module's `declarations` array.
-As you create more components, you'll add them to `declarations`.
+The `declarations` array only takes declarables. Declarables
+are components, [directives](guide/attribute-directives) and [pipes](guide/pipes).
+All of a module's declarables must be in the `declarations` array.
+Declarables must belong to exactly one module. The compiler emits
+an error if you try to declare the same class in more than one module.
-通过把组件添加到模块的 `declarations` 数组中，我们会告诉 Angular 哪些组件属于这个 `AppModule`。创建更多组件时，我们也要把它们添加到 `declarations` 中。
+These declared classes are visible within the module but invisible
+to components in a different module unless they are exported from
+this module and the other module imports this one.
-You must declare _every_ component in an Angular Module class.
-If you use a component without declaring it, you'll see a clear error message in the browser console.
+An example of what goes into a declarations array follows:
-我们必须把 **每个** 组件都声明到某个 Angular 的模块类中，否则就会在浏览器的控制台中看到一个明确的错误信息。
+```typescript
+ declarations: [
+ YourComponent,
+ YourPipe,
+ YourDirective
+ ],
+```
-You'll learn to create two other kinds of classes —
-[directives](guide/attribute-directives) and [pipes](guide/pipes) —
-that you must also add to the `declarations` array.
+A declarable can only belong to one module, so only declare it in
+one `@NgModule`. When you need it elsewhere,
+import the module that has the declarable you need in it.
-我们后面要学的另外两种类（[指令](guide/attribute-directives)和[管道](guide/pipes)）也同样必须添加到`declarations`数组中。
+**Only `@NgModule` references** go in the `imports` array.
-
-**Only _declarables_** — _components_, _directives_ and _pipes_ — belong in the `declarations` array.
-Do not put any other kind of class in `declarations`. Do _not_ declare `NgModule` classes. Do _not_ declare service classes. Do _not_ declare model classes.
+### Using directives with `@NgModule`
+
+Use the `declarations` array for directives.
+To use a directive, component, or pipe in a module, you must do a few things:
+
+1. Export it from the file where you wrote it.
+2. Import it into the appropriate module.
+3. Declare it in the `@NgModule` `declarations` array.
+
+
+Those three steps look like the following. In the file where you create your directive, export it.
+The following example, named `ItemDirective` is the default directive structure that the CLI generates in its own file, `item.directive.ts`:
+
+
+
+
+The key point here is that you have to export it so you can import it elsewhere. Next, import it
+into the NgModule, in this example `app.module.ts`, with a JavaScript import statement:
+
+
+
+
+And in the same file, add it to the `@NgModule` `declarations` array:
+
+
+
+
+
+Now you could use your `ItemDirective` in a component. This example uses `AppModule`, but you'd do it the same way for a feature module. For more about directives, see [Attribute Directives](guide/attribute-directives) and [Structural Directives](guide/structural-directives). You'd also use the same technique for [pipes](guide/pipes) and components.
+
+Remember, components, directives, and pipes belong to one module only. You only need to declare them once in your app because you share them by importing the necessary modules. This saves you time and helps keep your app lean.
+
-**只有“可声明的类”（组件、指令和管道）能添加到`declarations`数组中。
-其它类型的类都不要往里放。**不要**添加`NgModule`。不要添加服务类。不要添加模型类。
-
{@a imports}
-### The _imports_ array
+## The `imports` array
-### _imports_ 数组
+The module's `imports` array appears exclusively in the `@NgModule` metadata object.
+It tells Angular about other NgModules that this particular module needs to function properly.
-Angular Modules are a way to consolidate features that belong together into discrete units.
-Many features of Angular itself are organized as Angular Modules.
-HTTP services are in the `HttpClientModule`. The router is in the `RouterModule`.
-Eventually you may create your own modules.
-
-Angular 模块把特性合并成离散单元的一种方式。
-Angular 自身的许多特性也是通过 Angular 模块组织的。
-HTTP 服务在`HttpClientModule`里。路由器在`RouterModule`中。
-最终，我们还可能创建自己的模块。
-
-Add a module to the `imports` array when the application requires its features.
-
-当应用需要模块的特性时，将其添加到`imports`数组中。
-
-_This_ application, like most applications, executes in a browser.
-Every application that executes in a browser needs the `BrowserModule` from `@angular/platform-browser`.
-So every such application includes the `BrowserModule` in its _root_ `AppModule`'s `imports` array.
-Other guide pages will tell you when you need to add additional modules to this array.
-
-_这个_应用和大多数其他应用一样，在浏览器中运行。
-每个浏览器中运行的应用都需要`@angular/platform-browser`里的`BrowserModule`。
-所以每个这样的应用都在其_根_`AppModule`的`imports`数组中包含`BrowserModule`。
-在需要添加额外模块到此数组时，其他指南和烹饪宝典页面会告诉你。
-
-
-
-
-
-**Only `@NgModule` classes** go in the `imports` array. Do not put any other kind of class in `imports`.
-
-`imports`数组中应该**只有`NgModule`类**。不要放置其它类型的类。
-
-
-
-
-The `import` statements at the top of the file and the NgModule's `imports` array
-are unrelated and have completely different jobs.
-
-不要将 Angular 模块的`imports`数组与文件顶部的`import`语句弄混淆了。它们的功能不同。
-
-The _JavaScript_ `import` statements give you access to symbols _exported_ by other files
-so you can reference them within _this_ file.
-You add `import` statements to almost every application file.
-They have nothing to do with Angular and Angular knows nothing about them.
-
-_JavaScript_ 的`import`声明允许你访问在其他文件中_导出_的符号，这样你可以在_当前_文件引用它们。
-我们会往几乎所有类型的应用中加入`import`语句。
-它们与 Angular 毫无关系，Angular 对它们也一无所知。
-
-The _module's_ `imports` array appears _exclusively_ in the `@NgModule` metadata object.
-It tells Angular about specific _other_ Angular Modules—all of them classes decorated
-with `@NgModule`—that the application needs to function properly.
-
-_模块_的`imports`数组是`@NgModule`元数据中*独有的*。它告诉 Angular 特定 Angular 模块的信息 — 用`@NgModule`装饰的类 — 应用需要它们来正常工作。
-
-
-
-{@a providers}
-
-### The _providers_ array
-
-### _providers_ 数组
-
-Angular apps rely on [_dependency injection (DI)_](guide/dependency-injection)
-to deliver services to various parts of the application.
-
-Angular 应用靠 [_依赖注入（DI）_](guide/dependency-injection) 机制为应用中的各个部件提供服务。
-
-Before DI can inject a service, it must create that service with the help of a _provider_.
-You can tell DI about a service's _provider_ in a number of ways.
-Among the most popular ways is to register the service in the root `ngModule.providers` array, which will make that service available _everywhere_.
-
-要想注入一个服务，就要先在**服务提供商（provider）**的帮助下创建这个服务。
-我们可以用多种方式告诉 DI 某个服务的提供商是谁。
-最常见的方式是在根模块的`ngModule.providers`数组中注册这个服务。这样一来，这个服务就**在哪里**都可以用了。
-
-For example, a data service provided in the `AppModule`s _providers_ can be injected into any
-component anywhere in the application.
-
-比如，在根模块 `AppModule` 的 _providers_ 数组中提供的数据服务可以被注入到该应用中任意地方的任意组件中。
+This list of modules are those that export components, directives, or pipes
+that the component templates in this module reference. In this case, the component is
+`AppComponent`, which references components, directives, or pipes in `BrowserModule`,
+`FormsModule`, or `HttpModule`.
+A component template can reference another component, directive,
+or pipe when the referenced class is declared in this module or
+the class was imported from another module.
You don't have any services to provide yet.
But you will create some before long and you may chose to provide many of them here.
-我们还没有提供任何服务，但是很快就会创建一些，而且可能也会选择在这里提供它们。
-
{@a bootstrap-array}
-### The _bootstrap_ array
+## The `providers` array
-### _bootstrap_ 数组
+The providers array is where you list the services the app needs. When
+you list services here, they are available app-wide. You can scope
+them when using feature modules and lazy loading. For more information, see
+[Providers](guide/providers).
-You launch the application by [_bootstrapping_](#main) the root `AppModule`.
-Among other things, the _bootstrapping_ process creates the component(s) listed in the `bootstrap` array
+## The `bootstrap` array
+
+The application launches by bootstrapping the root `AppModule`, which is
+also referred to as an `entryComponent`.
+Among other things, the bootstrapping process creates the component(s) listed in the `bootstrap` array
and inserts each one into the browser DOM.
-通过[_引导_](#main)根`AppModule`来启动应用。
-在启动过程中，其中一步是创建列在`bootstrap`数组的组件，
-并将它们每一个都插入到浏览器的DOM中。
-
Each bootstrapped component is the base of its own tree of components.
-Inserting a bootstrapped component usually triggers a cascade of component creations that fill out that tree.
+Inserting a bootstrapped component usually triggers a cascade of
+component creations that fill out that tree.
-每个被引导的组件都是它自己的组件树的根。
-插入一个被引导的组件通常触发一系列组件的创建并形成组件树。
+While you can put more than one component tree on a host web page,
+most applications have only one component tree and bootstrap a single root component.
-While you can put more than one component tree on a host web page, that's not typical.
-Most applications have only one component tree and they bootstrap a single _root_ component.
+This one root component is usually called `AppComponent` and is in the
+root module's `bootstrap` array.
-虽然你可以将多个组件树插入到宿主页面，但并不普遍。
-大多数应用只有一个组件树，它们引导单一_根_组件。
-You can call the one _root_ component anything you want but most developers call it `AppComponent`.
-
-你可以为这个_根_组件取任何名字，但是大多数程序员将其取名为`AppComponent`。
-
-Which brings us to the _bootstrapping_ process itself.
-
-下面让我们来看看*引导*过程本身。
-
-{@a main}
-
-## Bootstrap in _main.ts_
-
-## 在 _main.ts_ 中引导
-
-While there are many ways to bootstrap an application, most applications do so in the `src/main.ts` that is generated by the Angular CLI.
-
-虽然有很多方式来引导应用，不过大多数应用还是选择在 Angular CLI 生成的 `src/main.ts` 中进行引导。
-
-
-
-
-This code creates a browser platform for dynamic compilation and
-bootstraps the `AppModule` described above.
-
-上面的代码为动态 (JiT) 编译创建浏览器平台，并引导上面提到的`AppModule`。
-
-The _bootstrapping_ process sets up the execution environment,
-digs the _root_ `AppComponent` out of the module's `bootstrap` array,
-creates an instance of the component and inserts it within the element tag identified by the component's `selector`.
-
-引导过程搭建运行环境，从模块的`bootstrap`数组中提出_根_`AppComponent`， 创建该组件的实例，并将其插入到组件`selector`标识的元素标签中。
-
-The `AppComponent` selector — here and in most documentation samples — is `app-root`
-so Angular looks for a `` tag in the `index.html` like this one ...
-
-`AppComponent`选择器 — 在这里以及文档大部分例子中 — 是`my-app`，
-所以 Angular 在`index.html`中查找像这样的``标签...
-
-
-
- <body>
- <app-root></app-root>
- </body>
-
-
-
-... and displays the `AppComponent` there.
-
-...然后在那儿显示`AppComponent`。
-
-The `main.ts` file is very stable. Once you've set it up, you may never change it again.
-
-The `main.ts` 文件非常稳定，一旦配置好，可能永远都不会再修改它。
## More about Angular Modules
-## 关于Angular模块的更多知识
-
-Your initial app has only a single module, the _root_ module.
-As your app grows, you'll consider subdividing it into multiple "feature" modules,
-some of which can be loaded later ("lazy loaded") if and when the user chooses
-to visit those features.
-
-你最初的应用只有一个单一的模块 —— *根*模块。
-当这个应用不断成长时，你就要考虑把它们拆分到多个 "特性" 模块中了。
-这些特性模块中的一部分可以稍后加载（即惰性加载），它们只会在用户访问到这些特性时才会加载。
-
-When you're ready to explore these possibilities, visit the [Angular Modules](guide/ngmodule) guide.
-
-如果你要了解这些知识，请访问[Angular 模块 (NgModule)](guide/ngmodule)页
\ No newline at end of file
+For more on NgModules you're likely to see frequently in apps,
+see [Frequently Used Modules](#).
diff --git a/aio/content/guide/browser-support.md b/aio/content/guide/browser-support.md
index df1cd8dc83..c2cea558c2 100644
--- a/aio/content/guide/browser-support.md
+++ b/aio/content/guide/browser-support.md
@@ -11,199 +11,100 @@ Angular 支持大多数常用浏览器，包括下列版本：
-
+
+ Browser
+
+
+
+ Supported versions
+
+
+
+
+
+
+
Chrome
-
+
-
+
+
+
+ latest
+
+
+
+ 最新版
+
+
+
+
+
+
+
+
Firefox
-
+
-
+
+ latest
+
+
+
+
+
+
Edge
-
+
-
+
+ 2 most recent major versions
+
+
+
+
IE
-
-
-
- Safari
-
-
-
- iOS
-
-
-
- Android
-
-
-
+
+
+ 11
10
9
+
+
+
+
+
IE Mobile
-
-
-
-
-
-
-
-
-
- latest
-
-
-
- 最新版
-
-
-
-
-
-
- latest
-
-
-
- 最新版
-
-
-
-
-
- 14
-
-
11
-
-
- 10
-
-
-
- 10
-
-
-
- Nougat (7.0)
Marshmallow (6.0)
-
-
-
- 11
-
-
+
+
+ Safari
+
+
+ 2 most recent major versions
+
+
-
-
+ iOS
-
+ 2 most recent major versions
-
-
- 13
-
-
-
- 10
-
-
-
- 9
-
-
-
- 9
-
-
-
- Lollipop
(5.0, 5.1)
-
-
-
-
-
-
-
-
+
-
-
+ Android
-
+ Nougat (7.0)
Marshmallow (6.0)
Lollipop (5.0, 5.1)
KitKat (4.4)
-
-
-
-
-
-
- 9
-
-
-
- 8
-
-
-
- 8
-
-
-
- KitKat
(4.4)
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- 7
-
-
-
- 7
-
-
-
- Jelly Bean
(4.1, 4.2, 4.3)
-
-
-
-
-
-
-
+
@@ -261,26 +162,23 @@ This file incorporates the mandatory and many of the optional polyfills as JavaS
这个文件把强制的和很多可选的填充脚本组织成 JavaScript 的 `import` 语句。
-The npm packages for the _mandatory_ polyfills (such as `zone.js`) were installed automatically for you when you created your project and
-their corresponding `import` statements are ready to go.
-You probably won't touch these.
+The npm packages for the _mandatory_ polyfills (such as `zone.js`) were installed automatically for you when you created your project and their corresponding `import` statements are ready to go. You probably won't touch these.
**强制性** 填充脚本（如`zone.js`）的npm 包在创建工程时就已经自动安装了，相应的 `import` 语句也都加好了。我们一般不用动它们。
-But if you need an optional polyfill, you'll have to install its npm package with `npm` or `yarn`.
-For example, [if you need the web animations polyfill](http://caniuse.com/#feat=web-animation),
-you could install it with either of the following commands:
+But if you need an optional polyfill, you'll have to install its npm package.
+For example, [if you need the web animations polyfill](http://caniuse.com/#feat=web-animation), you could install it with `npm`, using the following command (or the `yarn` equivalent):
但是如果要用一个可选的填充库，就要通过 `npm` 或 `yarn` 来安装它们的 npm 包了。
比如，[如果你需要 web 动画的填充脚本](http://caniuse.com/#feat=web-animation)，就要通过下列命令之一来安装它：
+ # note that the web-animations-js polyfill is only here as an example
+ # it isn't a strict requirement of Angular anymore (more below)
npm install --save web-animations-js
- yarn add web-animations-js
-Then open the `polyfills.ts` file and un-comment the corresponding `import` statement
-as in the following example:
+Then open the `polyfills.ts` file and un-comment the corresponding `import` statement as in the following example:
然后打开 `polyfills.ts` 文件，并反注释对应的 `import` 语句，就像这样：
@@ -292,7 +190,7 @@ as in the following example:
import 'web-animations-js'; // Run `npm install --save web-animations-js`.
-If you can't find the polyfill you want in `polyfills.ts`,
+If you can't find the polyfill you want in `polyfills.ts`,
add it yourself, following the same pattern:
如果在 `polyfills.ts` 中找不到要使用的填充脚本，就可以仿照下列模式自行添加它：
@@ -363,6 +261,7 @@ These are the polyfills required to run an Angular application on each supported
[ES7/reflect](guide/browser-support#core-es7-reflect) (JIT only)
+
@@ -375,8 +274,8 @@ These are the polyfills required to run an Angular application on each supported
-
[ES6](guide/browser-support#core-es6)
+
@@ -389,7 +288,6 @@ These are the polyfills required to run an Angular application on each supported
-
[ES6
classList](guide/browser-support#classlist)
@@ -408,7 +306,7 @@ Some features of Angular may require additional polyfills.
有些 Angular 特性可能需要额外的填充库。
For example, the animations library relies on the standard web animation API, which is only available in Chrome and Firefox today.
-You'll need a polyfill to use animations in other browsers.
+(note that the dependency of web-animations-js in Angular is only necessary if `AnimationBuilder` is used.)
例如，动画库依赖于标准的 web 动画 API，目前它只在 Chrome 和 Firefox 上可用。你可能需要一个填充库来在其它浏览器上使用动画功能。
@@ -448,7 +346,8 @@ Here are the features which may require additional polyfills:
- [JIT compilation](guide/aot-compiler).
+ [JIT compilation](guide/aot-compiler).
+
Required to reflect for metadata.
[JIT 编译](guide/aot-compiler) 需要 reflect 来提供元数据。
@@ -458,13 +357,11 @@ Here are the features which may require additional polyfills:
[ES7/reflect](guide/browser-support#core-es7-reflect)
-
- All current browsers.
- Enabled by default.
- Can remove If you always use AOT and only use Angular decorators.
+ All current browsers. Enabled by default.
+ Can remove if you always use AOT and only use Angular decorators.
默认对目前的所有浏览器都启用了。如果总是使用 AOT 模式，并且只使用 Angular 自带的装饰器，那么可以移除它。
@@ -480,22 +377,25 @@ Here are the features which may require additional polyfills:
[动画](guide/animations)
+
Only if `Animation Builder` is used within the application--standard
+ animation support in Angular doesn't require any polyfills (as of NG6).
+
+
只有在应用中用到了 `Animation Builder` 时才需要；Angular 标准的动画支持是不需要任何填充库的（截至 NG6）。
+
-
[Web Animations](guide/browser-support#web-animations)
[Web 动画](guide/browser-support#web-animations)
-
- All but Chrome and Firefox
Not supported in IE9
+ If AnimationBuilder is used then the polyfill will enable scrubbing
+ support for IE/Edge and Safari (Chrome and Firefox support this natively).
- 除 Chrome 和 Firefox 外的所有，但不支持 IE9
-
+ 如果使用了AnimationBuilder，那么填充库将为 IE/Edge 和 Safari 启用擦除（scrubbing）支持（Chrome 和 Firefox 原生支持此特性）
@@ -504,17 +404,24 @@ Here are the features which may require additional polyfills:
- If you use the following deprecated i18n pipes: [date](api/common/DeprecatedDatePipe), [currency](api/common/DeprecatedCurrencyPipe), [decimal](api/common/DeprecatedDecimalPipe) and [percent](api/common/DeprecatedPercentPipe)
-
+ If you use the following deprecated i18n pipes:
+
如果你使用下列已废弃的i18n管道：
- [date](api/common/DeprecatedDatePipe)、[currency](api/common/DeprecatedCurrencyPipe)、[decimal](api/common/DeprecatedDecimalPipe) 和 [percent](api/common/DeprecatedPercentPipe)
+
+ [date](api/common/DeprecatedDatePipe),
+
+ [currency](api/common/DeprecatedCurrencyPipe),
+
+ [decimal](api/common/DeprecatedDecimalPipe),
+
+ [percent](api/common/DeprecatedPercentPipe)
-
[Intl API](guide/browser-support#intl)
+
@@ -530,15 +437,17 @@ Here are the features which may require additional polyfills:
- [NgClass](api/common/NgClass) on SVG elements
+ [NgClass](api/common/NgClass)
+
+ on SVG elements
在 SVG 元素上应用 [NgClass](api/common/NgClass)
-
[classList](guide/browser-support#classlist)
+
@@ -551,7 +460,9 @@ Here are the features which may require additional polyfills:
- [Http](guide/http) when sending and receiving binary data
+ [Http](guide/http)
+
+ when sending and receiving binary data
用 [Http](guide/http) 发送和接收二进制数据
@@ -560,8 +471,11 @@ Here are the features which may require additional polyfills:
[Typed Array](guide/browser-support#typedarray)
+
[Blob](guide/browser-support#blob)
+
[FormData](guide/browser-support#formdata)
+
@@ -575,7 +489,9 @@ Here are the features which may require additional polyfills:
### Suggested polyfills ##
+
### 建议的填充库 ##
+
Below are the polyfills which are used to test the framework itself. They are a good starting point for an application.
下表中是用来测试框架本身的填充库，它们是应用程序的优质起点。
@@ -628,6 +544,7 @@ Below are the polyfills which are used to test the framework itself. They are a
ES7/reflect
+
@@ -643,7 +560,9 @@ Below are the polyfills which are used to test the framework itself. They are a
+
ES6
+
@@ -659,7 +578,9 @@ Below are the polyfills which are used to test the framework itself. They are a
+
classList
+
@@ -683,7 +604,9 @@ Below are the polyfills which are used to test the framework itself. They are a
+
Intl
+
@@ -699,7 +622,7 @@ Below are the polyfills which are used to test the framework itself. They are a
- Web Animations
+ Web Animations
@@ -715,7 +638,9 @@ Below are the polyfills which are used to test the framework itself. They are a
+
Typed Array
+
@@ -731,7 +656,9 @@ Below are the polyfills which are used to test the framework itself. They are a
+
Blob
+
@@ -747,7 +674,9 @@ Below are the polyfills which are used to test the framework itself. They are a
+
FormData
+
@@ -763,7 +692,6 @@ Below are the polyfills which are used to test the framework itself. They are a
-
\* Figures are for minified and gzipped code,
computed with the closure compiler.
@@ -772,7 +700,7 @@ computed with the closure co
## 不使用 CLI 的用户的填充库
-If you aren't using the CLI, you should add your polyfill scripts directly to the host web page (`index.html`), perhaps like this.
+If you are not using the CLI, you should add your polyfill scripts directly to the host web page (`index.html`), perhaps like this.
如果你不使用 CLI，就要直接把填充库添加到宿主页（`index.html`）中，就像这样：
@@ -780,10 +708,24 @@ If you aren't using the CLI, you should add your polyfill scripts directly to th
<!-- pre-zone polyfills -->
<script src="node_modules/core-js/client/shim.min.js"></script>
<script src="node_modules/web-animations-js/web-animations.min.js"></script>
+ <script>
+ /**
+ * you can configure some zone flags which can disable zone interception for some
+ * asynchronous activities to improve startup performance - use these options only
+ * if you know what you are doing as it could result in hard to trace down bugs..
+ */
+ // __Zone_disable_requestAnimationFrame = true; // disable patch requestAnimationFrame
+ // __Zone_disable_on_property = true; // disable patch onProperty such as onclick
+ // __zone_symbol__BLACK_LISTED_EVENTS = ['scroll', 'mousemove']; // disable patch specified eventNames
+ /*
+ * in IE/Edge developer tools, the addEventListener will also be wrapped by zone.js
+ * with the following flag, it will bypass `zone.js` patch for IE/Edge
+ */
+ // __Zone_enable_cross_context_check = true;
+ </script>
<!-- zone.js required by Angular -->
<script src="node_modules/zone.js/dist/zone.js"></script>
<!-- application polyfills -->
-
diff --git a/aio/content/guide/change-log.md b/aio/content/guide/change-log.md
index 2f7425e5d8..fa1497c134 100644
--- a/aio/content/guide/change-log.md
+++ b/aio/content/guide/change-log.md
@@ -174,7 +174,7 @@ HTTP guide.
## 测试：添加了组件测试的plunker范例 (2016-12-02)
Added two plunkers that each test _one simple component_ so you can write a component test plunker of your own: one for the QuickStart seed's `AppComponent` and another for the Testing guide's `BannerComponent`.
-Linked to these plunkers in [Testing](guide/testing#live-examples) and [Setup anatomy](guide/setup-systemjs-anatomy) guides.
+Linked to these plunkers in "Testing" and "Setup anatomy" guides.
添加了两个plunker例子，每个都测试一个简单的组件，以便你可以自己在plunker中写组件测试：一个 用于测试快速起步中的`AppComponent`，另一个 用于测试“测试”章节的`BannerComponent`。
并在[测试](guide/testing#live-examples)和[环境设置剖析](guide/setup-systemjs-anatomy)中链接到它们。
@@ -244,16 +244,17 @@ The documentation for the version prior to v.2.2.0 has been removed.
## 在“从TypeScript到JavaScript”增加ES6的描述 (2016-11-14)
-The updated TypeScript to JavaScript guide (removed August 2017, PR #18694)
-explains how to write apps in ES6/7
+The updated TypeScript to JavaScript guide explains how to write apps in ES6/7
更新了“[从TypeScript到JavaScript](guide/ts-to-js)”烹饪宝典，解释如何使用ES6/7编写应用
-
by translating the common idioms in the TypeScript documentation examples
(and elsewhere on the web) to ES6/7 and ES5.
将TypeScript文档示例中（以及网站其它地方）的习惯用法翻译成ES6/7和ES5。
+This was [removed in August 2017](https://github.com/angular/angular/pull/18694) but can still be
+viewed in the [v2 documentation](https://v2.angular.io/docs/ts/latest/cookbook/ts-to-js.html).
+
## Sync with Angular v.2.1.1 (2016-10-21)
## 与Angular v.2.1.1 同步(2016-10-21)
@@ -360,7 +361,7 @@ The _Routing Module_ replaces the previous _routing object_ involving the `Modul
All guided samples with routing use the _Routing Module_ and prose content has been updated,
most conspicuously in the
-[NgModule](guide/ngmodule) guide and [NgModule FAQ](guide/ngmodule-faq) guide.
+[NgModule](guide/ngmodules) guide and [NgModule FAQ](guide/ngmodule-faq) guide.
所有使用路由的例子都使用**路由模块**，相关内容也被更新。更新最多的是[Angular模块（NgModule）](guide/ngmodule)章和[Angular模块常见问题](guide/ngmodule-faq)烹饪书。
diff --git a/aio/content/guide/cheatsheet.md b/aio/content/guide/cheatsheet.md
index 570eaae499..3c43d6e33b 100644
--- a/aio/content/guide/cheatsheet.md
+++ b/aio/content/guide/cheatsheet.md
@@ -178,6 +178,11 @@ is available to declarations of this module.
根据 map 中的 value 是否为真，来决定该元素上是否出现与 name 对应的 CSS 类。右侧的表达式应该返回一个形如 {class-name: true/false} 的 map。
+
+<div [ngStyle]="{'property': 'value'}">
<div [ngStyle]="dynamicStyles()">Allows you to assign styles to an HTML element using CSS. You can use CSS directly, as in the first example, or you can call a method from the component.
+
diff --git a/aio/content/guide/comparing-observables.md b/aio/content/guide/comparing-observables.md
new file mode 100644
index 0000000000..9cb663cd56
--- /dev/null
+++ b/aio/content/guide/comparing-observables.md
@@ -0,0 +1,313 @@
+# Observables compared to other techniques
+
+You can often use observables instead of promises to deliver values asynchronously. Similarly, observables can take the place of event handlers. Finally, because observables deliver multiple values, you can use them where you might otherwise build and operate on arrays.
+
+Observables behave somewhat differently from the alternative techniques in each of these situations, but offer some significant advantages. Here are detailed comparisons of the differences.
+
+## Observables compared to promises
+
+Observables are often compared to promises. Here are some key differences:
+
+* Observables are declarative; computation does not start until subscription. Promises execute immediately on creation. This makes observables useful for defining recipes that can be run whenever you need the result.
+
+* Observables provide many values. Promises provide one. This makes observables useful for getting multiple values over time.
+
+* Observables differentiate between chaining and subscription. Promises only have `.then()` clauses. This makes observables useful for creating complex transformation recipes to be used by other part of the system, without causing the work to be executed.
+
+* Observables `subscribe()` is responsible for handling errors. Promises push errors to the child promises. This makes observables useful for centralized and predictable error handling.
+
+
+### Creation and subscription
+
+* Observables are not executed until a consumer subcribes. The `subscribe()` executes the defined behavior once, and it can be called again. Each subscription has its own computation. Resubscription causes recomputation of values.
+
+
+// declare a publishing operation
+new Observable((observer) => { subscriber_fn });
+// initiate execution
+observable.subscribe(() => {
+ // observer handles notifications
+ });
+
+
+* Promises execute immediately, and just once. The computation of the result is initiated when the promise is created. There is no way to restart work. All `then` clauses (subscriptions) share the same computation.
+
+
+// initiate execution
+new Promise((resolve, reject) => { executer_fn });
+// handle return value
+promise.then((value) => {
+ // handle result here
+ });
+
+
+### Chaining
+
+* Observables differentiate between transformation function such as a map and subscription. Only subscription activates the subscriber function to start computing the values.
+
+
+observable.map((v) => 2*v);
+
+
+* Promises do not differentiate between the last `.then` clauses (equivalent to subscription) and intermediate `.then` clauses (equivalent to map).
+
+
+promise.then((v) => 2*v);
+
+
+### Cancellation
+
+* Observable subscriptions are cancellable. Unsubscribing removes the listener from receiving further values, and notifies the subscriber function to cancel work.
+
+
+const sub = obs.subscribe(...);
+sub.unsubscribe();
+
+
+* Promises are not cancellable.
+
+### Error handling
+
+* Observable execution errors are delivered to the subscriber's error handler, and the subscriber automatically unsubscribes from the observable.
+
+
+obs.subscribe(() => {
+ throw Error('my error');
+});
+
+
+* Promises push errors to the child promises.
+
+
+promise.then(() => {
+ throw Error('my error');
+});
+
+
+### Cheat sheet
+
+The following code snippets illustrate how the same kind of operation is defined using observables and promises.
+
+
+
+ Operation
+ Observable
+ Promise
+
+
+ Creation
+
+ new Observable((observer) => {
+ observer.next(123);
+});
+
+
+ new Promise((resolve, reject) => {
+ resolve(123);
+});
+
+
+
+ Transform
+ obs.map((value) => value * 2 );
promise.then((value) => value * 2);
+
+ Subscribe
+
+ sub = obs.subscribe((value) => {
+ console.log(value)
+});
+
+
+ promise.then((value) => {
+ console.log(value);
+});
+
+
+
+ Unsubscribe
+ sub.unsubscribe();
Implied by promise resolution.
+
+
+
+## Observables compared to events API
+
+Observables are very similar to event handlers that use the events API. Both techniques define notification handlers, and use them to process multiple values delivered over time. Subscribing to an observable is equivalent to adding an event listener. One significant difference is that you can configure an observable to transform an event before passing the event to the handler.
+
+Using observables to handle events and asynchronous operations can have the advantage of greater consistency in contexts such as HTTP requests.
+
+Here are some code samples that illustrate how the same kind of operation is defined using observables and the events API.
+
+
+
+ Observable
+ Events API
+
+
+ Creation & cancellation
+
+// Setup
+let clicks$ = fromEvent(buttonEl, ‘click’);
+// Begin listening
+let subscription = clicks$
+ .subscribe(e => console.log(‘Clicked’, e))
+// Stop listening
+subscription.unsubscribe();
+
+
+function handler(e) {
+ console.log(‘Clicked’, e);
+}
+
+// Setup & begin listening
+button.addEventListener(‘click’, handler);
+// Stop listening
+button.removeEventListener(‘click’, handler);
+
+
+
+
+ Subscription
+
+observable.subscribe(() => {
+ // notification handlers here
+});
+
+
+element.addEventListener(eventName, (event) => {
+ // notification handler here
+});
+
+
+
+ Configuration
+ Listen for keystrokes, but provide a stream representing the value in the input.
+fromEvent(inputEl, 'keydown').pipe(
+ map(e => e.target.value)
+);
+
+ Does not support configuration.
+element.addEventListener(eventName, (event) => {
+ // Cannot change the passed Event into another
+ // value before it gets to the handler
+});
+
+
+
+
+
+## Observables compared to arrays
+
+An observable produces values over time. An array is created as a static set of values. In a sense, observables are asynchronous where arrays are synchronous. In the following examples, ➞ implies asynchronous value delivery.
+
+
+
+ Observable
+ Array
+
+
+ Given
+
+ obs: ➞1➞2➞3➞5➞7
+ obsB: ➞'a'➞'b'➞'c'
+
+
+ arr: [1, 2, 3, 5, 7]
+ arrB: ['a', 'b', 'c']
+
+
+
+ concat()
+ obs.concat(obsB)
+ ➞1➞2➞3➞5➞7➞'a'➞'b'➞'c'
+
+
+ arr.concat(arrB)
+ [1,2,3,5,7,'a','b','c']
+
+
+
+ filter()
+ obs.filter((v) => v>3)
+ ➞5➞7
+
+
+ arr.filter((v) => v>3)
+ [5, 7]
+
+
+
+ find()
+ obs.find((v) => v>3)
+ ➞5
+
+
+ arr.find((v) => v>10)
+ 5
+
+
+
+ findIndex()
+ obs.findIndex((v) => v>3)
+ ➞3
+
+
+ arr.findIndex((v) => v>3)
+ 3
+
+
+
+ forEach()
+ obs.forEach((v) => {
+ console.log(v);
+})
+1
+2
+3
+4
+5
+
+
+ arr.forEach((v) => {
+ console.log(v);
+})
+1
+2
+3
+4
+5
+
+
+
+ map()
+ obs.map((v) => -v)
+ ➞-1➞-2➞-3➞-5➞-7
+
+
+ arr.map((v) => -v)
+ [-1, -2, -3, -5, -7]
+
+
+
+ reduce()
+ obs.scan((s,v)=> s+v, 0)
+ ➞1➞3➞6➞11➞18
+
+
+ arr.reduce((s,v) => s+v, 0)
+ 18
+
+
+
+
+
+
diff --git a/aio/content/guide/component-styles.md b/aio/content/guide/component-styles.md
index e39b4d5707..ad421a15a6 100644
--- a/aio/content/guide/component-styles.md
+++ b/aio/content/guide/component-styles.md
@@ -16,19 +16,15 @@ with components, enabling a more modular design than regular stylesheets.
This page describes how to load and apply these component styles.
-在本章中，我们将学到如何加载和使用这些*组件样式*。
-
-You can run the ` elements, from the host element down
-through this component to all of its child elements in the DOM.
+The following example targets all `` elements, from the host element down
+through this component to all of its child elements in the DOM.
在这个例子中，我们以所有的``元素为目标，从宿主元素到当前元素再到 DOM 中的所有子元素：
@@ -226,7 +220,7 @@ CSS标准中用于 "刺穿Shadow DOM" 的组合器已经被废弃，并将[这
## 把样式加载进组件中
-There are several ways to add styles to a component:
+There are several ways to add styles to a component:
有几种方式把样式加入组件：
@@ -290,8 +284,8 @@ to a component's `@Component` decorator:
+
{{title}}
' + templateUrl: './banner-external.component.html', + styleUrls: ['./banner-external.component.css'] }) +// #enddocregion metadata export class BannerComponent { title = 'Test Tour of Heroes'; } - diff --git a/aio/content/examples/testing/src/app/banner/banner-initial.component.spec.ts b/aio/content/examples/testing/src/app/banner/banner-initial.component.spec.ts new file mode 100644 index 0000000000..8a45df5023 --- /dev/null +++ b/aio/content/examples/testing/src/app/banner/banner-initial.component.spec.ts @@ -0,0 +1,119 @@ +// #docplaster +// #docregion import-by +import { By } from '@angular/platform-browser'; +// #enddocregion import-by +// #docregion import-debug-element +import { DebugElement } from '@angular/core'; +// #enddocregion import-debug-element +// #docregion v1 +import { async, ComponentFixture, TestBed } from '@angular/core/testing'; +// #enddocregion v1 +import { BannerComponent } from './banner-initial.component'; +/* +// #docregion v1 +import { BannerComponent } from './banner.component'; + +describe('BannerComponent', () => { +// #enddocregion v1 +*/ +describe('BannerComponent (initial CLI generated)', () => { +// #docregion v1 + let component: BannerComponent; + let fixture: ComponentFixturewith "banner works!"', () => { + // #docregion nativeElement + const bannerElement: HTMLElement = fixture.nativeElement; + // #enddocregion nativeElement + const p = bannerElement.querySelector('p'); + expect(p.textContent).toEqual('banner works!'); + }); +// #enddocregion v4-test-3 + + +// #docregion v4-test-4 +it('should find the
with fixture.debugElement.nativeElement)', () => { + // #docregion debugElement-nativeElement + const bannerDe: DebugElement = fixture.debugElement; + const bannerEl: HTMLElement = bannerDe.nativeElement; + // #enddocregion debugElement-nativeElement + const p = bannerEl.querySelector('p'); + expect(p.textContent).toEqual('banner works!'); +}); +// #enddocregion v4-test-4 + +// #docregion v4-test-5 +it('should find the
with fixture.debugElement.query(By.css)', () => { + const bannerDe: DebugElement = fixture.debugElement; + const paragraphDe = bannerDe.query(By.css('p')); + const p: HTMLElement = paragraphDe.nativeElement; + expect(p.textContent).toEqual('banner works!'); +}); +// #enddocregion v4-test-5 +// #docregion v3 +}); +// #enddocregion v3, v4 diff --git a/aio/content/examples/testing/src/app/banner/banner-initial.component.ts b/aio/content/examples/testing/src/app/banner/banner-initial.component.ts new file mode 100644 index 0000000000..a7959e5573 --- /dev/null +++ b/aio/content/examples/testing/src/app/banner/banner-initial.component.ts @@ -0,0 +1,10 @@ +// BannerComponent as initially generated by the CLI +// #docregion +import { Component } from '@angular/core'; + +@Component({ + selector: 'app-banner', + template: `
banner works!
`, + styles: [] +}) +export class BannerComponent { } diff --git a/aio/content/examples/testing/src/app/banner.component.detect-changes.spec.ts b/aio/content/examples/testing/src/app/banner/banner.component.detect-changes.spec.ts similarity index 76% rename from aio/content/examples/testing/src/app/banner.component.detect-changes.spec.ts rename to aio/content/examples/testing/src/app/banner/banner.component.detect-changes.spec.ts index 412f5be586..3310fbdad0 100644 --- a/aio/content/examples/testing/src/app/banner.component.detect-changes.spec.ts +++ b/aio/content/examples/testing/src/app/banner/banner.component.detect-changes.spec.ts @@ -7,53 +7,45 @@ import { async } from '@angular/core/testing'; 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{{title}}
', + styles: ['h1 { color: green; font-size: 350%}'] }) export class BannerComponent { title = 'Test Tour of Heroes'; } - +// #enddocregion component diff --git a/aio/content/examples/testing/src/app/dashboard/dashboard-hero.component.html b/aio/content/examples/testing/src/app/dashboard/dashboard-hero.component.html deleted file mode 100644 index ff49bd17a5..0000000000 --- a/aio/content/examples/testing/src/app/dashboard/dashboard-hero.component.html +++ /dev/null @@ -1,4 +0,0 @@ - -
- {{hero.name | uppercase}}
-
diff --git a/aio/content/examples/testing/src/app/dashboard/dashboard-hero.component.spec.ts b/aio/content/examples/testing/src/app/dashboard/dashboard-hero.component.spec.ts
index 40c01571e6..84d73e45f4 100644
--- a/aio/content/examples/testing/src/app/dashboard/dashboard-hero.component.spec.ts
+++ b/aio/content/examples/testing/src/app/dashboard/dashboard-hero.component.spec.ts
@@ -1,7 +1,9 @@
+
+// #docplaster
import { async, ComponentFixture, TestBed
} from '@angular/core/testing';
-import { By } from '@angular/platform-browser';
+import { By } from '@angular/platform-browser';
import { DebugElement } from '@angular/core';
import { addMatchers, click } from '../../testing';
@@ -11,64 +13,96 @@ import { DashboardHeroComponent } from './dashboard-hero.component';
beforeEach( addMatchers );
+describe('DashboardHeroComponent class only', () => {
+ // #docregion class-only
+ it('raises the selected event when clicked', () => {
+ const comp = new DashboardHeroComponent();
+ const hero: Hero = { id: 42, name: 'Test' };
+ comp.hero = hero;
+
+ comp.selected.subscribe(selectedHero => expect(selectedHero).toBe(hero));
+ comp.click();
+ });
+ // #enddocregion class-only
+});
+
describe('DashboardHeroComponent when tested directly', () => {
let comp: DashboardHeroComponent;
let expectedHero: Hero;
let fixture: ComponentFixture
+ {{hero.name | uppercase}}
+
`,
styleUrls: [ './dashboard-hero.component.css' ]
})
+// #docregion class
export class DashboardHeroComponent {
@Input() hero: Hero;
@Output() selected = new EventEmitter DebugElement
- const heroEl = fixture.debugElement.query(By.css('.hero'));
+ // get first
+ const heroEl: HTMLElement = fixture.nativeElement.querySelector('.hero');
click(heroEl);
}
});
@@ -61,24 +55,32 @@ describe('DashboardComponent (shallow)', () => {
function clickForShallow() {
// get first DebugElement
- const heroEl = fixture.debugElement.query(By.css('dashboard-hero'));
- heroEl.triggerEventHandler('selected', comp.heroes[0]);
+ const heroDe = fixture.debugElement.query(By.css('dashboard-hero'));
+ heroDe.triggerEventHandler('selected', comp.heroes[0]);
}
});
/** Add TestBed providers, compile, and create DashboardComponent */
function compileAndCreate() {
// #docregion compile-and-create-body
- beforeEach( async(() => {
+ beforeEach(async(() => {
+ // #docregion router-spy
+ const routerSpy = jasmine.createSpyObj('Router', ['navigateByUrl']);
+ const heroServiceSpy = jasmine.createSpyObj('HeroService', ['getHeroes']);
+
TestBed.configureTestingModule({
providers: [
- { provide: HeroService, useClass: FakeHeroService },
- { provide: Router, useClass: RouterStub }
+ { provide: HeroService, useValue: heroServiceSpy },
+ { provide: Router, useValue: routerSpy }
]
})
+ // #enddocregion router-spy
.compileComponents().then(() => {
fixture = TestBed.createComponent(DashboardComponent);
comp = fixture.componentInstance;
+
+ // getHeroes spy returns observable of test heroes
+ heroServiceSpy.getHeroes.and.returnValue(asyncData(getTestHeroes()));
});
// #enddocregion compile-and-create-body
}));
@@ -104,8 +106,11 @@ function tests(heroClick: Function) {
describe('after get dashboard heroes', () => {
+ let router: Router;
+
// Trigger component so it gets heroes and binds to them
- beforeEach( async(() => {
+ beforeEach(async(() => {
+ router = fixture.debugElement.injector.get(Router);
fixture.detectChanges(); // runs ngOnInit -> getHeroes
fixture.whenStable() // No need for the `lastPromise` hack!
.then(() => fixture.detectChanges()); // bind to heroes
@@ -119,29 +124,25 @@ function tests(heroClick: Function) {
it('should DISPLAY heroes', () => {
// Find and examine the displayed heroes
// Look for them in the DOM by css class
- const heroes = fixture.debugElement.queryAll(By.css('dashboard-hero'));
+ const heroes = fixture.nativeElement.querySelectorAll('dashboard-hero');
expect(heroes.length).toBe(4, 'should display 4 heroes');
});
- // #docregion navigate-test, inject
- it('should tell ROUTER to navigate when hero clicked',
- inject([Router], (router: Router) => { // ...
- // #enddocregion inject
-
- const spy = spyOn(router, 'navigateByUrl');
+ // #docregion navigate-test
+ it('should tell ROUTER to navigate when hero clicked', () => {
heroClick(); // trigger click on first inner
+
- // args passed to router.navigateByUrl()
+ // args passed to router.navigateByUrl() spy
+ const spy = router.navigateByUrl as jasmine.Spy;
const navArgs = spy.calls.first().args[0];
// expecting to navigate to id of the component's first hero
const id = comp.heroes[0].id;
expect(navArgs).toBe('/heroes/' + id,
'should nav to HeroDetail for first hero');
- // #docregion inject
- }));
- // #enddocregion navigate-test, inject
+ });
+ // #enddocregion navigate-test
});
}
diff --git a/aio/content/examples/testing/src/app/dashboard/dashboard.component.ts b/aio/content/examples/testing/src/app/dashboard/dashboard.component.ts
index 6521f4b52e..6ab4e6f324 100644
--- a/aio/content/examples/testing/src/app/dashboard/dashboard.component.ts
+++ b/aio/content/examples/testing/src/app/dashboard/dashboard.component.ts
@@ -2,7 +2,7 @@
import { Component, OnInit } from '@angular/core';
import { Router } from '@angular/router';
-import { Hero } from '../model/hero';
+import { Hero } from '../model/hero';
import { HeroService } from '../model/hero.service';
@Component({
@@ -23,7 +23,7 @@ export class DashboardComponent implements OnInit {
ngOnInit() {
this.heroService.getHeroes()
- .then(heroes => this.heroes = heroes.slice(1, 5));
+ .subscribe(heroes => this.heroes = heroes.slice(1, 5));
}
// #docregion goto-detail
diff --git a/aio/content/examples/testing/src/app/bag/async-helper.spec.ts b/aio/content/examples/testing/src/app/demo/async-helper.spec.ts
similarity index 89%
rename from aio/content/examples/testing/src/app/bag/async-helper.spec.ts
rename to aio/content/examples/testing/src/app/demo/async-helper.spec.ts
index 12c8a4fbbd..4ca986badb 100644
--- a/aio/content/examples/testing/src/app/bag/async-helper.spec.ts
+++ b/aio/content/examples/testing/src/app/demo/async-helper.spec.ts
@@ -1,7 +1,8 @@
// tslint:disable-next-line:no-unused-variable
import { async, fakeAsync, tick } from '@angular/core/testing';
-import { Observable } from 'rxjs/Observable';
+import { of } from 'rxjs/observable/of';
+import { delay } from 'rxjs/operators';
describe('Angular async helper', () => {
let actuallyDone = false;
@@ -34,8 +35,8 @@ describe('Angular async helper', () => {
// Use done. Cannot use setInterval with async or fakeAsync
// See https://github.com/angular/angular/issues/10127
- it('should run async test with successful delayed Observable', (done: any) => {
- const source = Observable.of(true).delay(10);
+ it('should run async test with successful delayed Observable', (done: DoneFn) => {
+ const source = of(true).pipe(delay(10));
source.subscribe(
val => actuallyDone = true,
err => fail(err),
@@ -46,7 +47,7 @@ describe('Angular async helper', () => {
// 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', async(() => {
- // const source = Observable.of(true).delay(10);
+ // const source = of(true).pipe(delay(10));
// source.subscribe(
// val => actuallyDone = true,
// err => fail(err)
@@ -56,7 +57,7 @@ describe('Angular async helper', () => {
// // 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);
+ // const source = of(true).pipe(delay(10));
// source.subscribe(
// val => actuallyDone = true,
// err => fail(err)
diff --git a/aio/content/examples/testing/src/app/bag/bag-external-template.html b/aio/content/examples/testing/src/app/demo/demo-external-template.html
similarity index 100%
rename from aio/content/examples/testing/src/app/bag/bag-external-template.html
rename to aio/content/examples/testing/src/app/demo/demo-external-template.html
diff --git a/aio/content/examples/testing/src/app/bag/bag-main.ts b/aio/content/examples/testing/src/app/demo/demo-main.ts
similarity index 52%
rename from aio/content/examples/testing/src/app/bag/bag-main.ts
rename to aio/content/examples/testing/src/app/demo/demo-main.ts
index 27b78200ae..9243428b7a 100644
--- a/aio/content/examples/testing/src/app/bag/bag-main.ts
+++ b/aio/content/examples/testing/src/app/demo/demo-main.ts
@@ -1,5 +1,5 @@
// main app entry point
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
-import { BagModule } from './bag';
+import { DemoModule } from './demo';
-platformBrowserDynamic().bootstrapModule(BagModule);
+platformBrowserDynamic().bootstrapModule(DemoModule);
diff --git a/aio/content/examples/testing/src/app/demo/demo.spec.ts b/aio/content/examples/testing/src/app/demo/demo.spec.ts
new file mode 100644
index 0000000000..d65b9acfb8
--- /dev/null
+++ b/aio/content/examples/testing/src/app/demo/demo.spec.ts
@@ -0,0 +1,153 @@
+// #docplaster
+import {
+ LightswitchComponent,
+ MasterService,
+ ValueService,
+ ReversePipe
+} from './demo';
+
+///////// Fakes /////////
+export class FakeValueService extends ValueService {
+ value = 'faked service value';
+}
+////////////////////////
+describe('demo (no TestBed):', () => {
+
+ // #docregion ValueService
+ // Straight Jasmine testing without Angular's testing support
+ describe('ValueService', () => {
+ let service: ValueService;
+ beforeEach(() => { service = new ValueService(); });
+
+ it('#getValue should return real value', () => {
+ expect(service.getValue()).toBe('real value');
+ });
+
+ it('#getObservableValue should return value from observable',
+ (done: DoneFn) => {
+ service.getObservableValue().subscribe(value => {
+ expect(value).toBe('observable value');
+ done();
+ });
+ });
+
+ it('#getPromiseValue should return value from a promise',
+ (done: DoneFn) => {
+ service.getPromiseValue().then(value => {
+ expect(value).toBe('promise value');
+ done();
+ });
+ });
+ });
+ // #enddocregion ValueService
+
+ // MasterService requires injection of a ValueService
+ // #docregion MasterService
+ describe('MasterService without Angular testing support', () => {
+ let masterService: MasterService;
+
+ it('#getValue should return real value from the real service', () => {
+ masterService = new MasterService(new ValueService());
+ expect(masterService.getValue()).toBe('real value');
+ });
+
+ it('#getValue should return faked value from a fakeService', () => {
+ masterService = new MasterService(new FakeValueService());
+ expect(masterService.getValue()).toBe('faked service value');
+ });
+
+ it('#getValue should return faked value from a fake object', () => {
+ const fake = { getValue: () => 'fake value' };
+ masterService = new MasterService(fake as ValueService);
+ expect(masterService.getValue()).toBe('fake value');
+ });
+
+ it('#getValue should return stubbed value from a spy', () => {
+ // create `getValue` spy on an object representing the ValueService
+ const valueServiceSpy =
+ jasmine.createSpyObj('ValueService', ['getValue']);
+
+ // set the value to return when the `getValue` spy is called.
+ const stubValue = 'stub value';
+ valueServiceSpy.getValue.and.returnValue(stubValue);
+
+ masterService = new MasterService(valueServiceSpy);
+
+ expect(masterService.getValue())
+ .toBe(stubValue, 'service returned stub value');
+ expect(valueServiceSpy.getValue.calls.count())
+ .toBe(1, 'spy method was called once');
+ expect(valueServiceSpy.getValue.calls.mostRecent().returnValue)
+ .toBe(stubValue);
+ });
+ });
+ // #enddocregion MasterService
+
+ describe('MasterService (no beforeEach)', () => {
+ // #docregion no-before-each-test
+ it('#getValue should return stubbed value from a spy', () => {
+ // #docregion no-before-each-setup-call
+ const { masterService, stubValue, valueServiceSpy } = setup();
+ // #enddocregion no-before-each-setup-call
+ expect(masterService.getValue())
+ .toBe(stubValue, 'service returned stub value');
+ expect(valueServiceSpy.getValue.calls.count())
+ .toBe(1, 'spy method was called once');
+ expect(valueServiceSpy.getValue.calls.mostRecent().returnValue)
+ .toBe(stubValue);
+ });
+ // #enddocregion no-before-each-test
+
+ // #docregion no-before-each-setup
+ function setup() {
+ const valueServiceSpy =
+ jasmine.createSpyObj('ValueService', ['getValue']);
+ const stubValue = 'stub value';
+ const masterService = new MasterService(valueServiceSpy);
+
+ valueServiceSpy.getValue.and.returnValue(stubValue);
+ return { masterService, stubValue, valueServiceSpy };
+ }
+ // #enddocregion no-before-each-setup
+ });
+
+ // #docregion ReversePipe
+
+ describe('ReversePipe', () => {
+ let pipe: ReversePipe;
+
+ beforeEach(() => { pipe = new ReversePipe(); });
+
+ it('transforms "abc" to "cba"', () => {
+ expect(pipe.transform('abc')).toBe('cba');
+ });
+
+ it('no change to palindrome: "able was I ere I saw elba"', () => {
+ const palindrome = 'able was I ere I saw elba';
+ expect(pipe.transform(palindrome)).toBe(palindrome);
+ });
+
+ });
+ // #enddocregion ReversePipe
+
+ // #docregion Lightswitch
+ describe('LightswitchComp', () => {
+ it('#clicked() should toggle #isOn', () => {
+ const comp = new LightswitchComponent();
+ expect(comp.isOn).toBe(false, 'off at first');
+ comp.clicked();
+ expect(comp.isOn).toBe(true, 'on after click');
+ comp.clicked();
+ expect(comp.isOn).toBe(false, 'off after second click');
+ });
+
+ it('#clicked() should set #message to "is on"', () => {
+ const comp = new LightswitchComponent();
+ expect(comp.message).toMatch(/is off/i, 'off at first');
+ comp.clicked();
+ expect(comp.message).toMatch(/is on/i, 'on after clicked');
+ });
+ });
+ // #enddocregion Lightswitch
+
+});
diff --git a/aio/content/examples/testing/src/app/demo/demo.testbed.spec.ts b/aio/content/examples/testing/src/app/demo/demo.testbed.spec.ts
new file mode 100644
index 0000000000..2c0ba58e99
--- /dev/null
+++ b/aio/content/examples/testing/src/app/demo/demo.testbed.spec.ts
@@ -0,0 +1,706 @@
+// #docplaster
+import {
+ DemoModule,
+ BankAccountComponent, BankAccountParentComponent,
+ LightswitchComponent,
+ Child1Component, Child2Component, Child3Component,
+ MasterService,
+ ValueService,
+ ExternalTemplateComponent,
+ InputComponent,
+ IoComponent, IoParentComponent,
+ MyIfComponent, MyIfChildComponent, MyIfParentComponent,
+ NeedsContentComponent, ParentComponent,
+ TestProvidersComponent, TestViewProvidersComponent,
+ ReversePipeComponent, ShellComponent
+} from './demo';
+
+import { By } from '@angular/platform-browser';
+import { Component,
+ DebugElement,
+ Injectable } from '@angular/core';
+import { FormsModule } from '@angular/forms';
+
+// Forms symbols imported only for a specific test below
+import { NgModel, NgControl } from '@angular/forms';
+
+import { async, ComponentFixture, fakeAsync, inject, TestBed, tick
+} from '@angular/core/testing';
+
+import { addMatchers, newEvent, click } from '../../testing';
+
+export class NotProvided extends ValueService { /* example below */}
+beforeEach( addMatchers );
+
+describe('demo (with TestBed):', () => {
+
+//////// Service Tests /////////////
+
+ // #docregion ValueService
+ describe('ValueService', () => {
+
+ // #docregion value-service-before-each
+ let service: ValueService;
+
+ // #docregion value-service-inject-before-each
+ beforeEach(() => {
+ TestBed.configureTestingModule({ providers: [ValueService] });
+ // #enddocregion value-service-before-each
+ service = TestBed.get(ValueService);
+ // #docregion value-service-before-each
+ });
+ // #enddocregion value-service-before-each, value-service-inject-before-each
+
+ // #docregion value-service-inject-it
+ it('should use ValueService', () => {
+ service = TestBed.get(ValueService);
+ expect(service.getValue()).toBe('real value');
+ });
+ // #enddocregion value-service-inject-it
+
+ it('can inject a default value when service is not provided', () => {
+ // #docregion testbed-get-w-null
+ service = TestBed.get(NotProvided, null); // service is null
+ // #enddocregion testbed-get-w-null
+ });
+
+ it('test should wait for ValueService.getPromiseValue', async(() => {
+ service.getPromiseValue().then(
+ value => expect(value).toBe('promise value')
+ );
+ }));
+
+ it('test should wait for ValueService.getObservableValue', async(() => {
+ service.getObservableValue().subscribe(
+ value => expect(value).toBe('observable value')
+ );
+ }));
+
+ // Must use done. See https://github.com/angular/angular/issues/10127
+ it('test should wait for ValueService.getObservableDelayValue', (done: DoneFn) => {
+ service.getObservableDelayValue().subscribe(value => {
+ expect(value).toBe('observable delay value');
+ done();
+ });
+ });
+
+ it('should allow the use of fakeAsync', fakeAsync(() => {
+ let value: any;
+ service.getPromiseValue().then((val: any) => value = val);
+ tick(); // Trigger JS engine cycle until all promises resolve.
+ expect(value).toBe('promise value');
+ }));
+ });
+ // #enddocregion ValueService
+
+ describe('MasterService', () => {
+ // #docregion master-service-before-each
+ let masterService: MasterService;
+ let valueServiceSpy: jasmine.SpyObj;
+
+ beforeEach(() => {
+ const spy = jasmine.createSpyObj('ValueService', ['getValue']);
+
+ TestBed.configureTestingModule({
+ // Provide both the service-to-test and its (spy) dependency
+ providers: [
+ MasterService,
+ { provide: ValueService, useValue: spy }
+ ]
+ });
+ // Inject both the service-to-test and its (spy) dependency
+ masterService = TestBed.get(MasterService);
+ valueServiceSpy = TestBed.get(ValueService);
+ });
+ // #enddocregion master-service-before-each
+
+ // #docregion master-service-it
+ it('#getValue should return stubbed value from a spy', () => {
+ const stubValue = 'stub value';
+ valueServiceSpy.getValue.and.returnValue(stubValue);
+
+ expect(masterService.getValue())
+ .toBe(stubValue, 'service returned stub value');
+ expect(valueServiceSpy.getValue.calls.count())
+ .toBe(1, 'spy method was called once');
+ expect(valueServiceSpy.getValue.calls.mostRecent().returnValue)
+ .toBe(stubValue);
+ });
+ // #enddocregion master-service-it
+ });
+
+ describe('use inject within `it`', () => {
+ beforeEach(() => {
+ TestBed.configureTestingModule({ providers: [ValueService] });
+ });
+
+ it('should use modified providers',
+ inject([ValueService], (service: ValueService) => {
+ service.setValue('value modified in beforeEach');
+ expect(service.getValue())
+ .toBe('value modified in beforeEach');
+ })
+ );
+ });
+
+ describe('using async(inject) within beforeEach', () => {
+ let serviceValue: string;
+
+ beforeEach(() => {
+ TestBed.configureTestingModule({ providers: [ValueService] });
+ });
+
+ beforeEach(async(inject([ValueService], (service: ValueService) => {
+ service.getPromiseValue().then(value => serviceValue = value);
+ })));
+
+ it('should use asynchronously modified value ... in synchronous test', () => {
+ expect(serviceValue).toBe('promise value');
+ });
+ });
+
+/////////// Component Tests //////////////////
+
+ describe('TestBed component tests', () => {
+
+ beforeEach(async(() => {
+ TestBed
+ .configureTestingModule({
+ imports: [DemoModule],
+ })
+ // Compile everything in DemoModule
+ .compileComponents();
+ }));
+
+ it('should create a component with inline template', () => {
+ const fixture = TestBed.createComponent(Child1Component);
+ fixture.detectChanges();
+
+ expect(fixture).toHaveText('Child');
+ });
+
+ it('should create a component with external template', () => {
+ const fixture = TestBed.createComponent(ExternalTemplateComponent);
+ fixture.detectChanges();
+
+ expect(fixture).toHaveText('from external template');
+ });
+
+ it('should allow changing members of the component', () => {
+ const fixture = TestBed.createComponent(MyIfComponent);
+
+ fixture.detectChanges();
+ expect(fixture).toHaveText('MyIf()');
+
+ fixture.componentInstance.showMore = true;
+ fixture.detectChanges();
+ expect(fixture).toHaveText('MyIf(More)');
+ });
+
+ it('should create a nested component bound to inputs/outputs', () => {
+ const fixture = TestBed.createComponent(IoParentComponent);
+
+ fixture.detectChanges();
+ const heroes = fixture.debugElement.queryAll(By.css('.hero'));
+ expect(heroes.length).toBeGreaterThan(0, 'has heroes');
+
+ const comp = fixture.componentInstance;
+ const hero = comp.heroes[0];
+
+ click(heroes[0]);
+ fixture.detectChanges();
+
+ const selected = fixture.debugElement.query(By.css('p'));
+ expect(selected).toHaveText(hero.name);
+ });
+
+ it('can access the instance variable of an `*ngFor` row component', () => {
+ const fixture = TestBed.createComponent(IoParentComponent);
+ const comp = fixture.componentInstance;
+ const heroName = comp.heroes[0].name; // first hero's name
+
+ fixture.detectChanges();
+ const ngForRow = fixture.debugElement.query(By.directive(IoComponent)); // first hero ngForRow
+
+ const hero = ngForRow.context['hero']; // the hero object passed into the row
+ expect(hero.name).toBe(heroName, 'ngRow.context.hero');
+
+ const rowComp = ngForRow.componentInstance;
+ // jasmine.any is an "instance-of-type" test.
+ expect(rowComp).toEqual(jasmine.any(IoComponent), 'component is IoComp');
+ expect(rowComp.hero.name).toBe(heroName, 'component.hero');
+ });
+
+
+ // #docregion ButtonComp
+ it('should support clicking a button', () => {
+ const fixture = TestBed.createComponent(LightswitchComponent);
+ const btn = fixture.debugElement.query(By.css('button'));
+ const span = fixture.debugElement.query(By.css('span')).nativeElement;
+
+ fixture.detectChanges();
+ expect(span.textContent).toMatch(/is off/i, 'before click');
+
+ click(btn);
+ fixture.detectChanges();
+ expect(span.textContent).toMatch(/is on/i, 'after click');
+ });
+ // #enddocregion ButtonComp
+
+ // ngModel is async so we must wait for it with promise-based `whenStable`
+ it('should support entering text in input box (ngModel)', async(() => {
+ const expectedOrigName = 'John';
+ const expectedNewName = 'Sally';
+
+ const fixture = TestBed.createComponent(InputComponent);
+ fixture.detectChanges();
+
+ const comp = fixture.componentInstance;
+ const input = fixture.debugElement.query(By.css('input')).nativeElement;
+
+ expect(comp.name).toBe(expectedOrigName,
+ `At start name should be ${expectedOrigName} `);
+
+ // wait until ngModel binds comp.name to input box
+ fixture.whenStable().then(() => {
+ expect(input.value).toBe(expectedOrigName,
+ `After ngModel updates input box, input.value should be ${expectedOrigName} `);
+
+ // simulate user entering new name in input
+ input.value = expectedNewName;
+
+ // that change doesn't flow to the component immediately
+ expect(comp.name).toBe(expectedOrigName,
+ `comp.name should still be ${expectedOrigName} after value change, before binding happens`);
+
+ // dispatch a DOM event so that Angular learns of input value change.
+ // then wait while ngModel pushes input.box value to comp.name
+ input.dispatchEvent(newEvent('input'));
+ return fixture.whenStable();
+ })
+ .then(() => {
+ expect(comp.name).toBe(expectedNewName,
+ `After ngModel updates the model, comp.name should be ${expectedNewName} `);
+ });
+ }));
+
+ // fakeAsync version of ngModel input test enables sync test style
+ // synchronous `tick` replaces asynchronous promise-base `whenStable`
+ it('should support entering text in input box (ngModel) - fakeAsync', fakeAsync(() => {
+ const expectedOrigName = 'John';
+ const expectedNewName = 'Sally';
+
+ const fixture = TestBed.createComponent(InputComponent);
+ fixture.detectChanges();
+
+ const comp = fixture.componentInstance;
+ const input = fixture.debugElement.query(By.css('input')).nativeElement;
+
+ expect(comp.name).toBe(expectedOrigName,
+ `At start name should be ${expectedOrigName} `);
+
+ // wait until ngModel binds comp.name to input box
+ tick();
+ expect(input.value).toBe(expectedOrigName,
+ `After ngModel updates input box, input.value should be ${expectedOrigName} `);
+
+ // simulate user entering new name in input
+ input.value = expectedNewName;
+
+ // that change doesn't flow to the component immediately
+ expect(comp.name).toBe(expectedOrigName,
+ `comp.name should still be ${expectedOrigName} after value change, before binding happens`);
+
+ // dispatch a DOM event so that Angular learns of input value change.
+ // then wait a tick while ngModel pushes input.box value to comp.name
+ input.dispatchEvent(newEvent('input'));
+ tick();
+ expect(comp.name).toBe(expectedNewName,
+ `After ngModel updates the model, comp.name should be ${expectedNewName} `);
+ }));
+
+ // #docregion ReversePipeComp
+ it('ReversePipeComp should reverse the input text', fakeAsync(() => {
+ const inputText = 'the quick brown fox.';
+ const expectedText = '.xof nworb kciuq eht';
+
+ const fixture = TestBed.createComponent(ReversePipeComponent);
+ fixture.detectChanges();
+
+ const comp = fixture.componentInstance;
+ const input = fixture.debugElement.query(By.css('input')).nativeElement as HTMLInputElement;
+ const span = fixture.debugElement.query(By.css('span')).nativeElement as HTMLElement;
+
+ // simulate user entering new name in input
+ input.value = inputText;
+
+ // dispatch a DOM event so that Angular learns of input value change.
+ // then wait a tick while ngModel pushes input.box value to comp.text
+ // and Angular updates the output span
+ input.dispatchEvent(newEvent('input'));
+ tick();
+ fixture.detectChanges();
+ expect(span.textContent).toBe(expectedText, 'output span');
+ expect(comp.text).toBe(inputText, 'component.text');
+ }));
+ // #enddocregion ReversePipeComp
+
+ // Use this technique to find attached directives of any kind
+ it('can examine attached directives and listeners', () => {
+ const fixture = TestBed.createComponent(InputComponent);
+ fixture.detectChanges();
+
+ const inputEl = fixture.debugElement.query(By.css('input'));
+
+ expect(inputEl.providerTokens).toContain(NgModel, 'NgModel directive');
+
+ const ngControl = inputEl.injector.get(NgControl);
+ expect(ngControl).toEqual(jasmine.any(NgControl), 'NgControl directive');
+
+ expect(inputEl.listeners.length).toBeGreaterThan(2, 'several listeners attached');
+ });
+
+ // #docregion dom-attributes
+ it('BankAccountComponent should set attributes, styles, classes, and properties', () => {
+ const fixture = TestBed.createComponent(BankAccountParentComponent);
+ fixture.detectChanges();
+ const comp = fixture.componentInstance;
+
+ // the only child is debugElement of the BankAccount component
+ const el = fixture.debugElement.children[0];
+ const childComp = el.componentInstance as BankAccountComponent;
+ expect(childComp).toEqual(jasmine.any(BankAccountComponent));
+
+ expect(el.context).toBe(childComp, 'context is the child component');
+
+ expect(el.attributes['account']).toBe(childComp.id, 'account attribute');
+ expect(el.attributes['bank']).toBe(childComp.bank, 'bank attribute');
+
+ expect(el.classes['closed']).toBe(true, 'closed class');
+ expect(el.classes['open']).toBe(false, 'open class');
+
+ expect(el.styles['color']).toBe(comp.color, 'color style');
+ expect(el.styles['width']).toBe(comp.width + 'px', 'width style');
+ // #enddocregion dom-attributes
+
+ // Removed on 12/02/2016 when ceased public discussion of the `Renderer`. Revive in future?
+ // expect(el.properties['customProperty']).toBe(true, 'customProperty');
+
+ // #docregion dom-attributes
+ });
+ // #enddocregion dom-attributes
+
+
+ });
+
+ describe('TestBed component overrides:', () => {
+
+ it('should override ChildComp\'s template', () => {
+
+ const fixture = TestBed.configureTestingModule({
+ declarations: [Child1Component],
+ })
+ .overrideComponent(Child1Component, {
+ set: { template: 'Fake' }
+ })
+ .createComponent(Child1Component);
+
+ fixture.detectChanges();
+ expect(fixture).toHaveText('Fake');
+ });
+
+ it('should override TestProvidersComp\'s ValueService provider', () => {
+ const fixture = TestBed.configureTestingModule({
+ declarations: [TestProvidersComponent],
+ })
+ .overrideComponent(TestProvidersComponent, {
+ remove: { providers: [ValueService]},
+ add: { providers: [{ provide: ValueService, useClass: FakeValueService }] },
+
+ // Or replace them all (this component has only one provider)
+ // set: { providers: [{ provide: ValueService, useClass: FakeValueService }] },
+ })
+ .createComponent(TestProvidersComponent);
+
+ fixture.detectChanges();
+ expect(fixture).toHaveText('injected value: faked value', 'text');
+
+ // Explore the providerTokens
+ const tokens = fixture.debugElement.providerTokens;
+ expect(tokens).toContain(fixture.componentInstance.constructor, 'component ctor');
+ expect(tokens).toContain(TestProvidersComponent, 'TestProvidersComp');
+ expect(tokens).toContain(ValueService, 'ValueService');
+ });
+
+ it('should override TestViewProvidersComp\'s ValueService viewProvider', () => {
+ const fixture = TestBed.configureTestingModule({
+ declarations: [TestViewProvidersComponent],
+ })
+ .overrideComponent(TestViewProvidersComponent, {
+ // remove: { viewProviders: [ValueService]},
+ // add: { viewProviders: [{ provide: ValueService, useClass: FakeValueService }] },
+
+ // Or replace them all (this component has only one viewProvider)
+ set: { viewProviders: [{ provide: ValueService, useClass: FakeValueService }] },
+ })
+ .createComponent(TestViewProvidersComponent);
+
+ fixture.detectChanges();
+ expect(fixture).toHaveText('injected value: faked value');
+ });
+
+ it('injected provider should not be same as component\'s provider', () => {
+
+ // TestComponent is parent of TestProvidersComponent
+ @Component({ template: '
+
+ `
+ }
+ })
+ .createComponent(ShellComponent);
+
+ fixture.detectChanges();
+
+ // NeedsContentComp is the child of ShellComp
+ const el = fixture.debugElement.children[0];
+ const comp = el.componentInstance;
+
+ expect(comp.children.toArray().length).toBe(4,
+ 'three different child components and an ElementRef with #content');
+
+ expect(el.references['nc']).toBe(comp, '#nc reference to component');
+
+ // #docregion custom-predicate
+ // Filter for DebugElements with a #content reference
+ const contentRefs = el.queryAll( de => de.references['content']);
+ // #enddocregion custom-predicate
+ expect(contentRefs.length).toBe(4, 'elements w/ a #content reference');
+ });
+
+ });
+
+ describe('nested (one-deep) component override', () => {
+
+ beforeEach(() => {
+ TestBed.configureTestingModule({
+ declarations: [ParentComponent, FakeChildComponent]
+ });
+ });
+
+ it('ParentComp should use Fake Child component', () => {
+ const fixture = TestBed.createComponent(ParentComponent);
+ fixture.detectChanges();
+ expect(fixture).toHaveText('Parent(Fake Child)');
+ });
+ });
+
+ describe('nested (two-deep) component override', () => {
+
+ beforeEach(() => {
+ TestBed.configureTestingModule({
+ declarations: [ParentComponent, FakeChildWithGrandchildComponent, FakeGrandchildComponent]
+ });
+ });
+
+ it('should use Fake Grandchild component', () => {
+ const fixture = TestBed.createComponent(ParentComponent);
+ fixture.detectChanges();
+ expect(fixture).toHaveText('Parent(Fake Child(Fake Grandchild))');
+ });
+ });
+
+ describe('lifecycle hooks w/ MyIfParentComp', () => {
+ let fixture: ComponentFixture;
+ let parent: MyIfParentComponent;
+ let child: MyIfChildComponent;
+
+ beforeEach(() => {
+ TestBed.configureTestingModule({
+ imports: [FormsModule],
+ declarations: [MyIfChildComponent, MyIfParentComponent]
+ });
+
+ fixture = TestBed.createComponent(MyIfParentComponent);
+ parent = fixture.componentInstance;
+ });
+
+ it('should instantiate parent component', () => {
+ expect(parent).not.toBeNull('parent component should exist');
+ });
+
+ it('parent component OnInit should NOT be called before first detectChanges()', () => {
+ expect(parent.ngOnInitCalled).toBe(false);
+ });
+
+ it('parent component OnInit should be called after first detectChanges()', () => {
+ fixture.detectChanges();
+ expect(parent.ngOnInitCalled).toBe(true);
+ });
+
+ it('child component should exist after OnInit', () => {
+ fixture.detectChanges();
+ getChild();
+ expect(child instanceof MyIfChildComponent).toBe(true, 'should create child');
+ });
+
+ it('should have called child component\'s OnInit ', () => {
+ fixture.detectChanges();
+ getChild();
+ expect(child.ngOnInitCalled).toBe(true);
+ });
+
+ it('child component called OnChanges once', () => {
+ fixture.detectChanges();
+ getChild();
+ expect(child.ngOnChangesCounter).toBe(1);
+ });
+
+ it('changed parent value flows to child', () => {
+ fixture.detectChanges();
+ getChild();
+
+ parent.parentValue = 'foo';
+ fixture.detectChanges();
+
+ expect(child.ngOnChangesCounter).toBe(2,
+ 'expected 2 changes: initial value and changed value');
+ expect(child.childValue).toBe('foo',
+ 'childValue should eq changed parent value');
+ });
+
+ // must be async test to see child flow to parent
+ it('changed child value flows to parent', async(() => {
+ fixture.detectChanges();
+ getChild();
+
+ child.childValue = 'bar';
+
+ return new Promise(resolve => {
+ // Wait one JS engine turn!
+ setTimeout(() => resolve(), 0);
+ })
+ .then(() => {
+ fixture.detectChanges();
+
+ expect(child.ngOnChangesCounter).toBe(2,
+ 'expected 2 changes: initial value and changed value');
+ expect(parent.parentValue).toBe('bar',
+ 'parentValue should eq changed parent value');
+ });
+
+ }));
+
+ it('clicking "Close Child" triggers child OnDestroy', () => {
+ fixture.detectChanges();
+ getChild();
+
+ const btn = fixture.debugElement.query(By.css('button'));
+ click(btn);
+
+ fixture.detectChanges();
+ expect(child.ngOnDestroyCalled).toBe(true);
+ });
+
+ ////// helpers ///
+ /**
+ * Get the MyIfChildComp from parent; fail w/ good message if cannot.
+ */
+ function getChild() {
+
+ let childDe: DebugElement; // DebugElement that should hold the MyIfChildComp
+
+ // The Hard Way: requires detailed knowledge of the parent template
+ try {
+ childDe = fixture.debugElement.children[4].children[0];
+ } catch (err) { /* we'll report the error */ }
+
+ // DebugElement.queryAll: if we wanted all of many instances:
+ childDe = fixture.debugElement
+ .queryAll(function (de) { return de.componentInstance instanceof MyIfChildComponent; })[0];
+
+ // WE'LL USE THIS APPROACH !
+ // DebugElement.query: find first instance (if any)
+ childDe = fixture.debugElement
+ .query(function (de) { return de.componentInstance instanceof MyIfChildComponent; });
+
+ if (childDe && childDe.componentInstance) {
+ child = childDe.componentInstance;
+ } else {
+ fail('Unable to find MyIfChildComp within MyIfParentComp');
+ }
+
+ return child;
+ }
+ });
+
+});
+////////// Fakes ///////////
+
+@Component({
+ selector: 'child-1',
+ template: `Fake Child`
+})
+class FakeChildComponent { }
+
+@Component({
+ selector: 'child-1',
+ template: `Fake Child(
@@ -417,13 +402,13 @@ export class ShellComponent { }
`
})
-export class BagComponent { }
+export class DemoComponent { }
//////// Aggregations ////////////
-export const bagDeclarations = [
- BagComponent,
+export const demoDeclarations = [
+ DemoComponent,
BankAccountComponent, BankAccountParentComponent,
- ButtonComponent,
+ LightswitchComponent,
Child1Component, Child2Component, Child3Component,
ExternalTemplateComponent, InnerCompWithExternalTemplateComponent,
InputComponent,
@@ -435,7 +420,7 @@ export const bagDeclarations = [
ReversePipe, ReversePipeComponent, ShellComponent
];
-export const bagProviders = [DependentService, FancyService];
+export const demoProviders = [MasterService, ValueService];
////////////////////
////////////
@@ -445,10 +430,10 @@ import { FormsModule } from '@angular/forms';
@NgModule({
imports: [BrowserModule, FormsModule],
- declarations: bagDeclarations,
- providers: bagProviders,
- entryComponents: [BagComponent],
- bootstrap: [BagComponent]
+ declarations: demoDeclarations,
+ providers: demoProviders,
+ entryComponents: [DemoComponent],
+ bootstrap: [DemoComponent]
})
-export class BagModule { }
+export class DemoModule { }
diff --git a/aio/content/examples/testing/src/app/dummy.module.ts b/aio/content/examples/testing/src/app/dummy.module.ts
new file mode 100644
index 0000000000..7ca52420d2
--- /dev/null
+++ b/aio/content/examples/testing/src/app/dummy.module.ts
@@ -0,0 +1,15 @@
+// These unused NgModules keep the Angular Language Service happy.
+// The AppModule registers the final versions of these components
+import { NgModule } from '@angular/core';
+
+import { AppComponent as app_initial } from './app-initial.component';
+@NgModule({ declarations: [ app_initial ] })
+export class AppModuleInitial {}
+
+import { BannerComponent as bc_initial } from './banner/banner-initial.component';
+@NgModule({ declarations: [ bc_initial ] })
+export class BannerModuleInitial {}
+
+import { BannerComponent as bc_external } from './banner/banner-external.component';
+@NgModule({ declarations: [ bc_external ] })
+export class BannerModuleExternal {}
diff --git a/aio/content/examples/testing/src/app/hero/hero-detail.component.no-testbed.spec.ts b/aio/content/examples/testing/src/app/hero/hero-detail.component.no-testbed.spec.ts
index 9dffe6f9de..4e806da3f9 100644
--- a/aio/content/examples/testing/src/app/hero/hero-detail.component.no-testbed.spec.ts
+++ b/aio/content/examples/testing/src/app/hero/hero-detail.component.no-testbed.spec.ts
@@ -1,7 +1,7 @@
-import { HeroDetailComponent } from './hero-detail.component';
-import { Hero } from '../model';
+import { asyncData, ActivatedRouteStub } from '../../testing';
-import { ActivatedRouteStub } from '../../testing';
+import { HeroDetailComponent } from './hero-detail.component';
+import { Hero } from '../model/hero';
////////// Tests ////////////////////
@@ -12,22 +12,21 @@ describe('HeroDetailComponent - no TestBed', () => {
let hds: any;
let router: any;
- beforeEach((done: any) => {
- expectedHero = new Hero(42, 'Bubba');
- activatedRoute = new ActivatedRouteStub();
- activatedRoute.testParamMap = { id: expectedHero.id };
-
+ beforeEach((done: DoneFn) => {
+ expectedHero = {id: 42, name: 'Bubba' };
+ const activatedRoute = new ActivatedRouteStub({ id: expectedHero.id });
router = jasmine.createSpyObj('router', ['navigate']);
hds = jasmine.createSpyObj('HeroDetailService', ['getHero', 'saveHero']);
- hds.getHero.and.returnValue(Promise.resolve(expectedHero));
- hds.saveHero.and.returnValue(Promise.resolve(expectedHero));
+ hds.getHero.and.returnValue(asyncData(expectedHero));
+ hds.saveHero.and.returnValue(asyncData(expectedHero));
comp = new HeroDetailComponent(hds, activatedRoute, router);
comp.ngOnInit();
// OnInit calls HDS.getHero; wait for it to get the fake hero
- hds.getHero.calls.first().returnValue.then(done);
+ hds.getHero.calls.first().returnValue.subscribe(done);
+
});
it('should expose the hero retrieved from the service', () => {
@@ -45,11 +44,11 @@ describe('HeroDetailComponent - no TestBed', () => {
expect(router.navigate.calls.any()).toBe(false, 'router.navigate not called yet');
});
- it('should navigate when click save resolves', (done: any) => {
+ it('should navigate when click save resolves', (done: DoneFn) => {
comp.save();
// waits for async save to complete before navigating
hds.saveHero.calls.first().returnValue
- .then(() => {
+ .subscribe(() => {
expect(router.navigate.calls.any()).toBe(true, 'router.navigate called');
done();
});
diff --git a/aio/content/examples/testing/src/app/hero/hero-detail.component.spec.ts b/aio/content/examples/testing/src/app/hero/hero-detail.component.spec.ts
index 050fe46eec..2326e3dded 100644
--- a/aio/content/examples/testing/src/app/hero/hero-detail.component.spec.ts
+++ b/aio/content/examples/testing/src/app/hero/hero-detail.component.spec.ts
@@ -3,21 +3,20 @@ import {
async, ComponentFixture, fakeAsync, inject, TestBed, tick
} from '@angular/core/testing';
-import { By } from '@angular/platform-browser';
-import { DebugElement } from '@angular/core';
+import { Router } from '@angular/router';
import {
- ActivatedRoute, ActivatedRouteStub, click, newEvent, Router, RouterStub
+ ActivatedRoute, ActivatedRouteStub, asyncData, click, newEvent
} from '../../testing';
-import { Hero } from '../model';
+import { Hero } from '../model/hero';
import { HeroDetailComponent } from './hero-detail.component';
import { HeroDetailService } from './hero-detail.service';
import { HeroModule } from './hero.module';
////// Testing Vars //////
let activatedRoute: ActivatedRouteStub;
-let comp: HeroDetailComponent;
+let component: HeroDetailComponent;
let fixture: ComponentFixture;
let page: Page;
@@ -32,36 +31,38 @@ describe('HeroDetailComponent', () => {
describe('with SharedModule setup', sharedModuleSetup);
});
-////////////////////
+///////////////////
+
function overrideSetup() {
// #docregion hds-spy
class HeroDetailServiceSpy {
- testHero = new Hero(42, 'Test Hero');
+ testHero: Hero = {id: 42, name: 'Test Hero' };
+ /* emit cloned test hero */
getHero = jasmine.createSpy('getHero').and.callFake(
- () => Promise
- .resolve(true)
- .then(() => Object.assign({}, this.testHero))
+ () => asyncData(Object.assign({}, this.testHero))
);
+ /* emit clone of test hero, with changes merged in */
saveHero = jasmine.createSpy('saveHero').and.callFake(
- (hero: Hero) => Promise
- .resolve(true)
- .then(() => Object.assign(this.testHero, hero))
+ (hero: Hero) => asyncData(Object.assign(this.testHero, hero))
);
}
+
// #enddocregion hds-spy
// the `id` value is irrelevant because ignored by service stub
- beforeEach(() => activatedRoute.testParamMap = { id: 99999 } );
+ beforeEach(() => activatedRoute.setParamMap({ id: 99999 }));
// #docregion setup-override
- beforeEach( async(() => {
+ beforeEach(async(() => {
+ const routerSpy = createRouterSpy();
+
TestBed.configureTestingModule({
imports: [ HeroModule ],
providers: [
{ provide: ActivatedRoute, useValue: activatedRoute },
- { provide: Router, useClass: RouterStub},
+ { provide: Router, useValue: routerSpy},
// #enddocregion setup-override
// HeroDetailService at this level is IRRELEVANT!
{ provide: HeroDetailService, useValue: {} }
@@ -87,7 +88,7 @@ function overrideSetup() {
// #docregion override-tests
let hdsSpy: HeroDetailServiceSpy;
- beforeEach( async(() => {
+ beforeEach(async(() => {
createComponent();
// get the component's injected HeroDetailServiceSpy
hdsSpy = fixture.debugElement.injector.get(HeroDetailService) as any;
@@ -108,7 +109,7 @@ function overrideSetup() {
page.nameInput.value = newName;
page.nameInput.dispatchEvent(newEvent('input')); // tell Angular
- expect(comp.hero.name).toBe(newName, 'component hero has new name');
+ expect(component.hero.name).toBe(newName, 'component hero has new name');
expect(hdsSpy.testHero.name).toBe(origName, 'service hero unchanged before save');
click(page.saveBtn);
@@ -116,36 +117,40 @@ function overrideSetup() {
tick(); // wait for async save to complete
expect(hdsSpy.testHero.name).toBe(newName, 'service hero has new name after save');
- expect(page.navSpy.calls.any()).toBe(true, 'router.navigate called');
+ expect(page.navigateSpy.calls.any()).toBe(true, 'router.navigate called');
}));
// #enddocregion override-tests
it('fixture injected service is not the component injected service',
- inject([HeroDetailService], (service: HeroDetailService) => {
+ // inject gets the service from the fixture
+ inject([HeroDetailService], (fixtureService: HeroDetailService) => {
- expect(service).toEqual({}, 'service injected from fixture');
- expect(hdsSpy).toBeTruthy('service injected into component');
+ // use `fixture.debugElement.injector` to get service from component
+ const componentService = fixture.debugElement.injector.get(HeroDetailService);
+
+ expect(fixtureService).not.toBe(componentService, 'service injected from fixture');
}));
}
////////////////////
-import { HEROES, FakeHeroService } from '../model/testing';
-import { HeroService } from '../model';
+import { getTestHeroes, TestHeroService, HeroService } from '../model/testing/test-hero.service';
-const firstHero = HEROES[0];
+const firstHero = getTestHeroes()[0];
function heroModuleSetup() {
// #docregion setup-hero-module
- beforeEach( async(() => {
- TestBed.configureTestingModule({
+ beforeEach(async(() => {
+ const routerSpy = createRouterSpy();
+
+ TestBed.configureTestingModule({
imports: [ HeroModule ],
// #enddocregion setup-hero-module
// declarations: [ HeroDetailComponent ], // NO! DOUBLE DECLARATION
// #docregion setup-hero-module
providers: [
{ provide: ActivatedRoute, useValue: activatedRoute },
- { provide: HeroService, useClass: FakeHeroService },
- { provide: Router, useClass: RouterStub},
+ { provide: HeroService, useClass: TestHeroService },
+ { provide: Router, useValue: routerSpy},
]
})
.compileComponents();
@@ -156,9 +161,9 @@ function heroModuleSetup() {
describe('when navigate to existing hero', () => {
let expectedHero: Hero;
- beforeEach( async(() => {
+ beforeEach(async(() => {
expectedHero = firstHero;
- activatedRoute.testParamMap = { id: expectedHero.id };
+ activatedRoute.setParamMap({ id: expectedHero.id });
createComponent();
}));
@@ -170,7 +175,7 @@ function heroModuleSetup() {
it('should navigate when click cancel', () => {
click(page.cancelBtn);
- expect(page.navSpy.calls.any()).toBe(true, 'router.navigate called');
+ expect(page.navigateSpy.calls.any()).toBe(true, 'router.navigate called');
});
it('should save when click save but not navigate immediately', () => {
@@ -181,30 +186,31 @@ function heroModuleSetup() {
click(page.saveBtn);
expect(saveSpy.calls.any()).toBe(true, 'HeroDetailService.save called');
- expect(page.navSpy.calls.any()).toBe(false, 'router.navigate not called');
+ expect(page.navigateSpy.calls.any()).toBe(false, 'router.navigate not called');
});
it('should navigate when click save and save resolves', fakeAsync(() => {
click(page.saveBtn);
tick(); // wait for async save to complete
- expect(page.navSpy.calls.any()).toBe(true, 'router.navigate called');
+ expect(page.navigateSpy.calls.any()).toBe(true, 'router.navigate called');
}));
// #docregion title-case-pipe
it('should convert hero name to Title Case', () => {
const inputName = 'quick BROWN fox';
const titleCaseName = 'Quick Brown Fox';
+ const { nameInput, nameDisplay } = page;
// simulate user entering new name into the input box
- page.nameInput.value = inputName;
+ nameInput.value = inputName;
// dispatch a DOM event so that Angular learns of input value change.
- page.nameInput.dispatchEvent(newEvent('input'));
+ nameInput.dispatchEvent(newEvent('input'));
// Tell Angular to update the output span through the title pipe
fixture.detectChanges();
- expect(page.nameDisplay.textContent).toBe(titleCaseName);
+ expect(nameDisplay.textContent).toBe(titleCaseName);
});
// #enddocregion title-case-pipe
// #enddocregion selected-tests
@@ -214,10 +220,10 @@ function heroModuleSetup() {
// #docregion route-no-id
describe('when navigate with no hero id', () => {
- beforeEach( async( createComponent ));
+ beforeEach(async( createComponent ));
it('should have hero.id === 0', () => {
- expect(comp.hero.id).toBe(0);
+ expect(component.hero.id).toBe(0);
});
it('should display empty hero name', () => {
@@ -228,14 +234,14 @@ function heroModuleSetup() {
// #docregion route-bad-id
describe('when navigate to non-existent hero id', () => {
- beforeEach( async(() => {
- activatedRoute.testParamMap = { id: 99999 };
+ beforeEach(async(() => {
+ activatedRoute.setParamMap({ id: 99999 });
createComponent();
}));
it('should try to navigate back to hero list', () => {
- expect(page.gotoSpy.calls.any()).toBe(true, 'comp.gotoList called');
- expect(page.navSpy.calls.any()).toBe(true, 'router.navigate called');
+ expect(page.gotoListSpy.calls.any()).toBe(true, 'comp.gotoList called');
+ expect(page.navigateSpy.calls.any()).toBe(true, 'router.navigate called');
});
});
// #enddocregion route-bad-id
@@ -263,23 +269,25 @@ import { TitleCasePipe } from '../shared/title-case.pipe';
function formsModuleSetup() {
// #docregion setup-forms-module
- beforeEach( async(() => {
- TestBed.configureTestingModule({
+ beforeEach(async(() => {
+ const routerSpy = createRouterSpy();
+
+ TestBed.configureTestingModule({
imports: [ FormsModule ],
declarations: [ HeroDetailComponent, TitleCasePipe ],
providers: [
{ provide: ActivatedRoute, useValue: activatedRoute },
- { provide: HeroService, useClass: FakeHeroService },
- { provide: Router, useClass: RouterStub},
+ { provide: HeroService, useClass: TestHeroService },
+ { provide: Router, useValue: routerSpy},
]
})
.compileComponents();
}));
// #enddocregion setup-forms-module
- it('should display 1st hero\'s name', fakeAsync(() => {
+ it('should display 1st hero\'s name', async(() => {
const expectedHero = firstHero;
- activatedRoute.testParamMap = { id: expectedHero.id };
+ activatedRoute.setParamMap({ id: expectedHero.id });
createComponent().then(() => {
expect(page.nameDisplay.textContent).toBe(expectedHero.name);
});
@@ -291,23 +299,25 @@ import { SharedModule } from '../shared/shared.module';
function sharedModuleSetup() {
// #docregion setup-shared-module
- beforeEach( async(() => {
+ beforeEach(async(() => {
+ const routerSpy = createRouterSpy();
+
TestBed.configureTestingModule({
imports: [ SharedModule ],
declarations: [ HeroDetailComponent ],
providers: [
{ provide: ActivatedRoute, useValue: activatedRoute },
- { provide: HeroService, useClass: FakeHeroService },
- { provide: Router, useClass: RouterStub},
+ { provide: HeroService, useClass: TestHeroService },
+ { provide: Router, useValue: routerSpy},
]
})
.compileComponents();
}));
// #enddocregion setup-shared-module
- it('should display 1st hero\'s name', fakeAsync(() => {
+ it('should display 1st hero\'s name', async(() => {
const expectedHero = firstHero;
- activatedRoute.testParamMap = { id: expectedHero.id };
+ activatedRoute.setParamMap({ id: expectedHero.id });
createComponent().then(() => {
expect(page.nameDisplay.textContent).toBe(expectedHero.name);
});
@@ -320,45 +330,51 @@ function sharedModuleSetup() {
/** Create the HeroDetailComponent, initialize it, set test variables */
function createComponent() {
fixture = TestBed.createComponent(HeroDetailComponent);
- comp = fixture.componentInstance;
- page = new Page();
+ component = fixture.componentInstance;
+ page = new Page(fixture);
// 1st change detection triggers ngOnInit which gets a hero
fixture.detectChanges();
return fixture.whenStable().then(() => {
// 2nd change detection displays the async-fetched hero
fixture.detectChanges();
- page.addPageElements();
});
}
// #enddocregion create-component
// #docregion page
class Page {
- gotoSpy: jasmine.Spy;
- navSpy: jasmine.Spy;
+ // getter properties wait to query the DOM until called.
+ get buttons() { return this.queryAll('button'); }
+ get saveBtn() { return this.buttons[0]; }
+ get cancelBtn() { return this.buttons[1]; }
+ get nameDisplay() { return this.query('span'); }
+ get nameInput() { return this.query('input'); }
- saveBtn: DebugElement;
- cancelBtn: DebugElement;
- nameDisplay: HTMLElement;
- nameInput: HTMLInputElement;
+ gotoListSpy: jasmine.Spy;
+ navigateSpy: jasmine.Spy;
- constructor() {
- const router = TestBed.get(Router); // get router from root injector
- this.gotoSpy = spyOn(comp, 'gotoList').and.callThrough();
- this.navSpy = spyOn(router, 'navigate');
+ constructor(fixture: ComponentFixture) {
+ // get the navigate spy from the injected router spy object
+ const routerSpy = fixture.debugElement.injector.get(Router);
+ this.navigateSpy = routerSpy.navigate;
+
+ // spy on component's `gotoList()` method
+ const component = fixture.componentInstance;
+ this.gotoListSpy = spyOn(component, 'gotoList').and.callThrough();
}
- /** Add page elements after hero arrives */
- addPageElements() {
- if (comp.hero) {
- // have a hero so these elements are now in the DOM
- const buttons = fixture.debugElement.queryAll(By.css('button'));
- this.saveBtn = buttons[0];
- this.cancelBtn = buttons[1];
- this.nameDisplay = fixture.debugElement.query(By.css('span')).nativeElement;
- this.nameInput = fixture.debugElement.query(By.css('input')).nativeElement;
- }
+ //// query helpers ////
+ private query(selector: string): T {
+ return fixture.nativeElement.querySelector(selector);
+ }
+
+ private queryAll(selector: string): T[] {
+ return fixture.nativeElement.querySelectorAll(selector);
}
}
// #enddocregion page
+
+function createRouterSpy() {
+ return jasmine.createSpyObj('Router', ['navigate']);
+}
diff --git a/aio/content/examples/testing/src/app/hero/hero-detail.component.ts b/aio/content/examples/testing/src/app/hero/hero-detail.component.ts
index b595a51371..fdfea6c4fa 100644
--- a/aio/content/examples/testing/src/app/hero/hero-detail.component.ts
+++ b/aio/content/examples/testing/src/app/hero/hero-detail.component.ts
@@ -2,7 +2,6 @@
// #docplaster
import { Component, Input, OnInit } from '@angular/core';
import { ActivatedRoute, Router } from '@angular/router';
-import 'rxjs/add/operator/map';
import { Hero } from '../model/hero';
import { HeroDetailService } from './hero-detail.service';
@@ -29,18 +28,18 @@ export class HeroDetailComponent implements OnInit {
// #docregion ng-on-init
ngOnInit(): void {
// get hero when `id` param changes
- this.route.paramMap.subscribe(p => this.getHero(p.has('id') && p.get('id')));
+ this.route.paramMap.subscribe(pmap => this.getHero(pmap.get('id')));
}
// #enddocregion ng-on-init
private getHero(id: string): void {
- // when no id or id===0, create new hero
+ // when no id or id===0, create new blank hero
if (!id) {
- this.hero = new Hero();
+ this.hero = { id: 0, name: '' } as Hero;
return;
}
- this.heroDetailService.getHero(id).then(hero => {
+ this.heroDetailService.getHero(id).subscribe(hero => {
if (hero) {
this.hero = hero;
} else {
@@ -50,7 +49,7 @@ export class HeroDetailComponent implements OnInit {
}
save(): void {
- this.heroDetailService.saveHero(this.hero).then(() => this.gotoList());
+ this.heroDetailService.saveHero(this.hero).subscribe(() => this.gotoList());
}
cancel() { this.gotoList(); }
diff --git a/aio/content/examples/testing/src/app/hero/hero-detail.service.ts b/aio/content/examples/testing/src/app/hero/hero-detail.service.ts
index f7dc887827..fc875f2df7 100644
--- a/aio/content/examples/testing/src/app/hero/hero-detail.service.ts
+++ b/aio/content/examples/testing/src/app/hero/hero-detail.service.ts
@@ -1,5 +1,8 @@
import { Injectable } from '@angular/core';
+import { Observable } from 'rxjs/Observable';
+import { map } from 'rxjs/operators';
+
import { Hero } from '../model/hero';
import { HeroService } from '../model/hero.service';
@@ -10,13 +13,15 @@ export class HeroDetailService {
// #enddocregion prototype
// Returns a clone which caller may modify safely
- getHero(id: number | string): Promise {
+ getHero(id: number | string): Observable {
if (typeof id === 'string') {
id = parseInt(id as string, 10);
}
- return this.heroService.getHero(id).then(hero => {
- return hero ? Object.assign({}, hero) : null; // clone or null
- });
+ return this.heroService.getHero(id).pipe(
+ map(hero => {
+ return hero ? Object.assign({}, hero) : null; // clone or null
+ })
+ );
}
saveHero(hero: Hero) {
diff --git a/aio/content/examples/testing/src/app/hero/hero-list.component.css b/aio/content/examples/testing/src/app/hero/hero-list.component.css
index d939ab565d..35e45af98d 100644
--- a/aio/content/examples/testing/src/app/hero/hero-list.component.css
+++ b/aio/content/examples/testing/src/app/hero/hero-list.component.css
@@ -6,7 +6,7 @@
margin: 0 0 2em 0;
list-style-type: none;
padding: 0;
- width: 10em;
+ width: 15em;
}
.heroes li {
cursor: pointer;
diff --git a/aio/content/examples/testing/src/app/hero/hero-list.component.spec.ts b/aio/content/examples/testing/src/app/hero/hero-list.component.spec.ts
index dbf9d37d71..d178fa6098 100644
--- a/aio/content/examples/testing/src/app/hero/hero-list.component.spec.ts
+++ b/aio/content/examples/testing/src/app/hero/hero-list.component.spec.ts
@@ -4,15 +4,18 @@ import { async, ComponentFixture, fakeAsync, TestBed, tick
import { By } from '@angular/platform-browser';
import { DebugElement } from '@angular/core';
-import { addMatchers, newEvent, Router, RouterStub
-} from '../../testing';
+import { Router } from '@angular/router';
-import { HEROES, FakeHeroService } from '../model/testing';
+import { addMatchers, newEvent } from '../../testing';
+
+import { getTestHeroes, TestHeroService } from '../model/testing/test-hero.service';
import { HeroModule } from './hero.module';
import { HeroListComponent } from './hero-list.component';
import { HighlightDirective } from '../shared/highlight.directive';
-import { HeroService } from '../model';
+import { HeroService } from '../model/hero.service';
+
+const HEROES = getTestHeroes();
let comp: HeroListComponent;
let fixture: ComponentFixture;
@@ -22,13 +25,15 @@ let page: Page;
describe('HeroListComponent', () => {
- beforeEach( async(() => {
+ beforeEach(async(() => {
addMatchers();
+ const routerSpy = jasmine.createSpyObj('Router', ['navigate']);
+
TestBed.configureTestingModule({
imports: [HeroModule],
providers: [
- { provide: HeroService, useClass: FakeHeroService },
- { provide: Router, useClass: RouterStub}
+ { provide: HeroService, useClass: TestHeroService },
+ { provide: Router, useValue: routerSpy}
]
})
.compileComponents()
@@ -42,7 +47,7 @@ describe('HeroListComponent', () => {
it('1st hero should match 1st test hero', () => {
const expectedHero = HEROES[0];
const actualHero = page.heroRows[0].textContent;
- expect(actualHero).toContain(expectedHero.id, 'hero.id');
+ expect(actualHero).toContain(expectedHero.id.toString(), 'hero.id');
expect(actualHero).toContain(expectedHero.name, 'hero.name');
});
@@ -118,22 +123,21 @@ class Page {
/** Hero line elements */
heroRows: HTMLLIElement[];
- /** Highlighted element */
+ /** Highlighted DebugElement */
highlightDe: DebugElement;
/** Spy on router navigate method */
navSpy: jasmine.Spy;
constructor() {
- this.heroRows = fixture.debugElement.queryAll(By.css('li')).map(de => de.nativeElement);
+ const heroRowNodes = fixture.nativeElement.querySelectorAll('li');
+ this.heroRows = Array.from(heroRowNodes);
// Find the first element with an attached HighlightDirective
this.highlightDe = fixture.debugElement.query(By.directive(HighlightDirective));
- // Get the component's injected router and spy on it
- const router = fixture.debugElement.injector.get(Router);
- this.navSpy = spyOn(router, 'navigate');
+ // Get the component's injected router navigation spy
+ const routerSpy = fixture.debugElement.injector.get(Router);
+ this.navSpy = routerSpy.navigate as jasmine.Spy;
};
}
-
-
diff --git a/aio/content/examples/testing/src/app/hero/hero-list.component.ts b/aio/content/examples/testing/src/app/hero/hero-list.component.ts
index 614976319b..e28d4b5c48 100644
--- a/aio/content/examples/testing/src/app/hero/hero-list.component.ts
+++ b/aio/content/examples/testing/src/app/hero/hero-list.component.ts
@@ -1,6 +1,8 @@
import { Component, OnInit } from '@angular/core';
import { Router } from '@angular/router';
+import { Observable } from 'rxjs/Observable';
+
import { Hero } from '../model/hero';
import { HeroService } from '../model/hero.service';
@@ -10,7 +12,7 @@ import { HeroService } from '../model/hero.service';
styleUrls: [ './hero-list.component.css' ]
})
export class HeroListComponent implements OnInit {
- heroes: Promise;
+ heroes: Observable;
selectedHero: Hero;
constructor(
diff --git a/aio/content/examples/testing/src/app/in-memory-data.service.ts b/aio/content/examples/testing/src/app/in-memory-data.service.ts
new file mode 100644
index 0000000000..81f26b674a
--- /dev/null
+++ b/aio/content/examples/testing/src/app/in-memory-data.service.ts
@@ -0,0 +1,26 @@
+// #docregion , init
+import { InMemoryDbService } from 'angular-in-memory-web-api';
+import { QUOTES } from './twain/twain.data';
+
+// Adjust to reduce number of quotes
+const maxQuotes = Infinity; // 0;
+
+/** Create in-memory database of heroes and quotes */
+export class InMemoryDataService implements InMemoryDbService {
+ createDb() {
+ const heroes = [
+ { id: 11, name: 'Mr. Nice' },
+ { id: 12, name: 'Narco' },
+ { id: 13, name: 'Bombasto' },
+ { id: 14, name: 'Celeritas' },
+ { id: 15, name: 'Magneta' },
+ { id: 16, name: 'RubberMan' },
+ { id: 17, name: 'Dynama' },
+ { id: 18, name: 'Dr IQ' },
+ { id: 19, name: 'Magma' },
+ { id: 20, name: 'Tornado' }
+ ];
+
+ return { heroes, quotes: QUOTES.slice(0, maxQuotes) };
+ }
+}
diff --git a/aio/content/examples/testing/src/app/model/hero.service.spec.ts b/aio/content/examples/testing/src/app/model/hero.service.spec.ts
new file mode 100644
index 0000000000..b228692154
--- /dev/null
+++ b/aio/content/examples/testing/src/app/model/hero.service.spec.ts
@@ -0,0 +1,215 @@
+import { HttpClientTestingModule, HttpTestingController } from '@angular/common/http/testing';
+
+// Other imports
+import { TestBed } from '@angular/core/testing';
+import { HttpClient, HttpResponse, HttpErrorResponse } from '@angular/common/http';
+
+import { asyncData, asyncError } from '../../testing/async-observable-helpers';
+
+import { Hero } from './hero';
+import { HeroService } from './hero.service';
+
+describe ('HeroesService (with spies)', () => {
+ // #docregion test-with-spies
+ let httpClientSpy: { get: jasmine.Spy };
+ let heroService: HeroService;
+
+ beforeEach(() => {
+ // Todo: spy on other methods too
+ httpClientSpy = jasmine.createSpyObj('HttpClient', ['get']);
+ heroService = new HeroService( httpClientSpy);
+ });
+
+ it('should return expected heroes (HttpClient called once)', () => {
+ const expectedHeroes: Hero[] =
+ [{ id: 1, name: 'A' }, { id: 2, name: 'B' }];
+
+ httpClientSpy.get.and.returnValue(asyncData(expectedHeroes));
+
+ heroService.getHeroes().subscribe(
+ heroes => expect(heroes).toEqual(expectedHeroes, 'expected heroes'),
+ fail
+ );
+ expect(httpClientSpy.get.calls.count()).toBe(1, 'one call');
+ });
+
+ it('should return an error when the server returns a 404', () => {
+ const errorResponse = new HttpErrorResponse({
+ error: 'test 404 error',
+ status: 404, statusText: 'Not Found'
+ });
+
+ httpClientSpy.get.and.returnValue(asyncError(errorResponse));
+
+ heroService.getHeroes().subscribe(
+ heroes => fail('expected an error, not heroes'),
+ error => expect(error.message).toContain('test 404 error')
+ );
+ });
+ // #enddocregion test-with-spies
+
+});
+
+describe('HeroesService (with mocks)', () => {
+ let httpClient: HttpClient;
+ let httpTestingController: HttpTestingController;
+ let heroService: HeroService;
+
+ beforeEach(() => {
+ TestBed.configureTestingModule({
+ // Import the HttpClient mocking services
+ imports: [ HttpClientTestingModule ],
+ // Provide the service-under-test
+ providers: [ HeroService ]
+ });
+
+ // Inject the http, test controller, and service-under-test
+ // as they will be referenced by each test.
+ httpClient = TestBed.get(HttpClient);
+ httpTestingController = TestBed.get(HttpTestingController);
+ heroService = TestBed.get(HeroService);
+ });
+
+ afterEach(() => {
+ // After every test, assert that there are no more pending requests.
+ httpTestingController.verify();
+ });
+
+ /// HeroService method tests begin ///
+ describe('#getHeroes', () => {
+ let expectedHeroes: Hero[];
+
+ beforeEach(() => {
+ heroService = TestBed.get(HeroService);
+ expectedHeroes = [
+ { id: 1, name: 'A' },
+ { id: 2, name: 'B' },
+ ] as Hero[];
+ });
+
+ it('should return expected heroes (called once)', () => {
+ heroService.getHeroes().subscribe(
+ heroes => expect(heroes).toEqual(expectedHeroes, 'should return expected heroes'),
+ fail
+ );
+
+ // HeroService should have made one request to GET heroes from expected URL
+ const req = httpTestingController.expectOne(heroService.heroesUrl);
+ expect(req.request.method).toEqual('GET');
+
+ // Respond with the mock heroes
+ req.flush(expectedHeroes);
+ });
+
+ it('should be OK returning no heroes', () => {
+ heroService.getHeroes().subscribe(
+ heroes => expect(heroes.length).toEqual(0, 'should have empty heroes array'),
+ fail
+ );
+
+ const req = httpTestingController.expectOne(heroService.heroesUrl);
+ req.flush([]); // Respond with no heroes
+ });
+
+ it('should turn 404 into a user-friendly error', () => {
+ const msg = 'Deliberate 404';
+ heroService.getHeroes().subscribe(
+ heroes => fail('expected to fail'),
+ error => expect(error.message).toContain(msg)
+ );
+
+ const req = httpTestingController.expectOne(heroService.heroesUrl);
+
+ // respond with a 404 and the error message in the body
+ req.flush(msg, {status: 404, statusText: 'Not Found'});
+ });
+
+ it('should return expected heroes (called multiple times)', () => {
+ heroService.getHeroes().subscribe();
+ heroService.getHeroes().subscribe();
+ heroService.getHeroes().subscribe(
+ heroes => expect(heroes).toEqual(expectedHeroes, 'should return expected heroes'),
+ fail
+ );
+
+ const requests = httpTestingController.match(heroService.heroesUrl);
+ expect(requests.length).toEqual(3, 'calls to getHeroes()');
+
+ // Respond to each request with different mock hero results
+ requests[0].flush([]);
+ requests[1].flush([{id: 1, name: 'bob'}]);
+ requests[2].flush(expectedHeroes);
+ });
+ });
+
+ describe('#updateHero', () => {
+ // Expecting the query form of URL so should not 404 when id not found
+ const makeUrl = (id: number) => `${heroService.heroesUrl}/?id=${id}`;
+
+ it('should update a hero and return it', () => {
+
+ const updateHero: Hero = { id: 1, name: 'A' };
+
+ heroService.updateHero(updateHero).subscribe(
+ data => expect(data).toEqual(updateHero, 'should return the hero'),
+ fail
+ );
+
+ // HeroService should have made one request to PUT hero
+ const req = httpTestingController.expectOne(heroService.heroesUrl);
+ expect(req.request.method).toEqual('PUT');
+ expect(req.request.body).toEqual(updateHero);
+
+ // Expect server to return the hero after PUT
+ const expectedResponse = new HttpResponse(
+ { status: 200, statusText: 'OK', body: updateHero });
+ req.event(expectedResponse);
+ });
+
+ it('should turn 404 error into user-facing error', () => {
+ const msg = 'Deliberate 404';
+ const updateHero: Hero = { id: 1, name: 'A' };
+ heroService.updateHero(updateHero).subscribe(
+ heroes => fail('expected to fail'),
+ error => expect(error.message).toContain(msg)
+ );
+
+ const req = httpTestingController.expectOne(heroService.heroesUrl);
+
+ // respond with a 404 and the error message in the body
+ req.flush(msg, {status: 404, statusText: 'Not Found'});
+ });
+
+ // #docregion network-error
+ it('should turn network error into user-facing error', () => {
+ const emsg = 'simulated network error';
+
+ const updateHero: Hero = { id: 1, name: 'A' };
+ heroService.updateHero(updateHero).subscribe(
+ heroes => fail('expected to fail'),
+ error => expect(error.message).toContain(emsg)
+ );
+
+ const req = httpTestingController.expectOne(heroService.heroesUrl);
+
+ // Create mock ErrorEvent, raised when something goes wrong at the network level.
+ // Connection timeout, DNS error, offline, etc
+ const errorEvent = new ErrorEvent('so sad', {
+ message: emsg,
+ // #enddocregion network-error
+ // The rest of this is optional and not used.
+ // Just showing that you could provide this too.
+ filename: 'HeroService.ts',
+ lineno: 42,
+ colno: 21
+ // #docregion network-error
+ });
+
+ // Respond with mock error
+ req.error(errorEvent);
+ });
+ // #enddocregion network-error
+ });
+
+ // TODO: test other HeroService methods
+});
diff --git a/aio/content/examples/testing/src/app/model/hero.service.ts b/aio/content/examples/testing/src/app/model/hero.service.ts
index 667d47312b..ac55cde5fc 100644
--- a/aio/content/examples/testing/src/app/model/hero.service.ts
+++ b/aio/content/examples/testing/src/app/model/hero.service.ts
@@ -1,30 +1,98 @@
import { Injectable } from '@angular/core';
+import { HttpClient, HttpHeaders, HttpErrorResponse } from '@angular/common/http';
-import { Hero } from './hero';
-import { HEROES } from './test-heroes';
+import { Observable } from 'rxjs/Observable';
+import { of } from 'rxjs/observable/of';
+import { catchError, map, tap } from 'rxjs/operators';
+
+import { Hero } from './hero';
+
+const httpOptions = {
+ headers: new HttpHeaders({ 'Content-Type': 'application/json' })
+};
@Injectable()
-/** Dummy HeroService. Pretend it makes real http requests */
export class HeroService {
- getHeroes() {
- return Promise.resolve(HEROES);
+
+ readonly heroesUrl = 'api/heroes'; // URL to web api
+
+ constructor(private http: HttpClient) { }
+
+ /** GET heroes from the server */
+ getHeroes (): Observable {
+ return this.http.get(this.heroesUrl)
+ .pipe(
+ tap(heroes => this.log(`fetched heroes`)),
+ catchError(this.handleError('getHeroes'))
+ ) as Observable;
}
- getHero(id: number | string): Promise {
+ /** GET hero by id. Return `undefined` when id not found */
+ getHero(id: number | string): Observable {
if (typeof id === 'string') {
id = parseInt(id as string, 10);
}
- return this.getHeroes().then(
- heroes => heroes.find(hero => hero.id === id)
+ const url = `${this.heroesUrl}/?id=${id}`;
+ return this.http.get(url)
+ .pipe(
+ map(heroes => heroes[0]), // returns a {0|1} element array
+ tap(h => {
+ const outcome = h ? `fetched` : `did not find`;
+ this.log(`${outcome} hero id=${id}`);
+ }),
+ catchError(this.handleError(`getHero id=${id}`))
+ );
+ }
+
+ //////// Save methods //////////
+
+ /** POST: add a new hero to the server */
+ addHero (hero: Hero): Observable {
+ return this.http.post(this.heroesUrl, hero, httpOptions).pipe(
+ tap((hero: Hero) => this.log(`added hero w/ id=${hero.id}`)),
+ catchError(this.handleError('addHero'))
+ );
+ }
+ /** DELETE: delete the hero from the server */
+ deleteHero (hero: Hero | number): Observable {
+ const id = typeof hero === 'number' ? hero : hero.id;
+ const url = `${this.heroesUrl}/${id}`;
+
+ return this.http.delete(url, httpOptions).pipe(
+ tap(_ => this.log(`deleted hero id=${id}`)),
+ catchError(this.handleError('deleteHero'))
);
}
- updateHero(hero: Hero): Promise {
- return this.getHero(hero.id).then(h => {
- if (!h) {
- throw new Error(`Hero ${hero.id} not found`);
- }
- return Object.assign(h, hero);
- });
+ /** PUT: update the hero on the server */
+ updateHero (hero: Hero): Observable {
+ return this.http.put(this.heroesUrl, hero, httpOptions).pipe(
+ tap(_ => this.log(`updated hero id=${hero.id}`)),
+ catchError(this.handleError('updateHero'))
+ );
+ }
+ /**
+ * Returns a function that handles Http operation failures.
+ * This error handler lets the app continue to run as if no error occurred.
+ * @param operation - name of the operation that failed
+ */
+ private handleError (operation = 'operation') {
+ return (error: HttpErrorResponse): Observable => {
+
+ // TODO: send the error to remote logging infrastructure
+ console.error(error); // log to console instead
+
+ const message = (error.error instanceof ErrorEvent) ?
+ error.error.message :
+ `server returned code ${error.status} with body "${error.error}"`;
+
+ // TODO: better job of transforming error for user consumption
+ throw new Error(`${operation} failed: ${message}`);
+ };
+
+ }
+
+ private log(message: string) {
+ console.log('HeroService: ' + message);
}
}
diff --git a/aio/content/examples/testing/src/app/model/hero.spec.ts b/aio/content/examples/testing/src/app/model/hero.spec.ts
deleted file mode 100644
index e8acf913f2..0000000000
--- a/aio/content/examples/testing/src/app/model/hero.spec.ts
+++ /dev/null
@@ -1,20 +0,0 @@
-// #docregion
-import { Hero } from './hero';
-
-describe('Hero', () => {
- it('has name', () => {
- const hero = new Hero(1, 'Super Cat');
- expect(hero.name).toBe('Super Cat');
- });
-
- it('has id', () => {
- const hero = new Hero(1, 'Super Cat');
- expect(hero.id).toBe(1);
- });
-
- it('can clone itself', () => {
- const hero = new Hero(1, 'Super Cat');
- const clone = hero.clone();
- expect(hero).toEqual(clone);
- });
-});
diff --git a/aio/content/examples/testing/src/app/model/hero.ts b/aio/content/examples/testing/src/app/model/hero.ts
index 6a98f0dfdc..93e87f4770 100644
--- a/aio/content/examples/testing/src/app/model/hero.ts
+++ b/aio/content/examples/testing/src/app/model/hero.ts
@@ -1,4 +1,8 @@
-export class Hero {
- constructor(public id = 0, public name = '') { }
- clone() { return new Hero(this.id, this.name); }
+export interface Hero {
+ id: number;
+ name: string;
}
+
+// SystemJS bug:
+// TS file must export something real in JS, not just interfaces
+export const _dummy = undefined;
diff --git a/aio/content/examples/testing/src/app/model/http-hero.service.spec.ts b/aio/content/examples/testing/src/app/model/http-hero.service.spec.ts
index c16b421274..6973d01c15 100644
--- a/aio/content/examples/testing/src/app/model/http-hero.service.spec.ts
+++ b/aio/content/examples/testing/src/app/model/http-hero.service.spec.ts
@@ -1,3 +1,6 @@
+/**
+ * Test the HeroService when implemented with the OLD HttpModule
+ */
import {
async, inject, TestBed
} from '@angular/core/testing';
@@ -12,14 +15,11 @@ import {
} from '@angular/http';
import { Observable } from 'rxjs/Observable';
-import 'rxjs/add/observable/of';
-
-import 'rxjs/add/operator/catch';
-import 'rxjs/add/operator/do';
-import 'rxjs/add/operator/toPromise';
+import { of } from 'rxjs/observable/of';
+import { catchError, tap } from 'rxjs/operators';
import { Hero } from './hero';
-import { HttpHeroService as HeroService } from './http-hero.service';
+import { HttpHeroService } from './http-hero.service';
const makeHeroData = () => [
{ id: 1, name: 'Windstorm' },
@@ -29,99 +29,100 @@ const makeHeroData = () => [
] as Hero[];
//////// Tests /////////////
-describe('Http-HeroService (mockBackend)', () => {
+describe('HttpHeroService (using old HttpModule)', () => {
+ let backend: MockBackend;
+ let service: HttpHeroService;
- beforeEach( async(() => {
+ beforeEach( () => {
TestBed.configureTestingModule({
imports: [ HttpModule ],
providers: [
- HeroService,
+ HttpHeroService,
{ provide: XHRBackend, useClass: MockBackend }
]
- })
- .compileComponents();
- }));
+ });
+ });
- it('can instantiate service when inject service',
- inject([HeroService], (service: HeroService) => {
- expect(service instanceof HeroService).toBe(true);
- }));
+ it('can instantiate service via DI', () => {
+ service = TestBed.get(HttpHeroService);
+ expect(service instanceof HttpHeroService).toBe(true);
+ });
-
-
- it('can instantiate service with "new"', inject([Http], (http: Http) => {
+ it('can instantiate service with "new"', () => {
+ const http = TestBed.get(Http);
expect(http).not.toBeNull('http should be provided');
- let service = new HeroService(http);
- expect(service instanceof HeroService).toBe(true, 'new service should be ok');
- }));
+ let service = new HttpHeroService(http);
+ expect(service instanceof HttpHeroService).toBe(true, 'new service should be ok');
+ });
-
- it('can provide the mockBackend as XHRBackend',
- inject([XHRBackend], (backend: MockBackend) => {
- expect(backend).not.toBeNull('backend should be provided');
- }));
+ it('can provide the mockBackend as XHRBackend', () => {
+ const backend = TestBed.get(XHRBackend);
+ expect(backend).not.toBeNull('backend should be provided');
+ });
describe('when getHeroes', () => {
- let backend: MockBackend;
- let service: HeroService;
- let fakeHeroes: Hero[];
- let response: Response;
+ let fakeHeroes: Hero[];
+ let http: Http;
+ let response: Response;
- beforeEach(inject([Http, XHRBackend], (http: Http, be: MockBackend) => {
- backend = be;
- service = new HeroService(http);
- fakeHeroes = makeHeroData();
- let options = new ResponseOptions({status: 200, body: {data: fakeHeroes}});
- response = new Response(options);
- }));
+ beforeEach(() => {
- it('should have expected fake heroes (then)', async(inject([], () => {
- backend.connections.subscribe((c: MockConnection) => c.mockRespond(response));
+ backend = TestBed.get(XHRBackend);
+ http = TestBed.get(Http);
- service.getHeroes().toPromise()
- // .then(() => Promise.reject('deliberate'))
- .then(heroes => {
- expect(heroes.length).toBe(fakeHeroes.length,
- 'should have expected no. of heroes');
- });
- })));
+ service = new HttpHeroService(http);
+ fakeHeroes = makeHeroData();
+ let options = new ResponseOptions({status: 200, body: {data: fakeHeroes}});
+ response = new Response(options);
+ });
- it('should have expected fake heroes (Observable.do)', async(inject([], () => {
- backend.connections.subscribe((c: MockConnection) => c.mockRespond(response));
+ it('should have expected fake heroes (then)', () => {
+ backend.connections.subscribe((c: MockConnection) => c.mockRespond(response));
- service.getHeroes()
- .do(heroes => {
- expect(heroes.length).toBe(fakeHeroes.length,
- 'should have expected no. of heroes');
- })
- .toPromise();
- })));
+ service.getHeroes().toPromise()
+ // .then(() => Promise.reject('deliberate'))
+ .then(heroes => {
+ expect(heroes.length).toBe(fakeHeroes.length,
+ 'should have expected no. of heroes');
+ })
+ .catch(fail);
+ });
+
+ it('should have expected fake heroes (Observable tap)', () => {
+ backend.connections.subscribe((c: MockConnection) => c.mockRespond(response));
+
+ service.getHeroes().subscribe(
+ heroes => {
+ expect(heroes.length).toBe(fakeHeroes.length,
+ 'should have expected no. of heroes');
+ },
+ fail
+ );
+ });
- it('should be OK returning no heroes', async(inject([], () => {
- let resp = new Response(new ResponseOptions({status: 200, body: {data: []}}));
- backend.connections.subscribe((c: MockConnection) => c.mockRespond(resp));
+ it('should be OK returning no heroes', () => {
+ let resp = new Response(new ResponseOptions({status: 200, body: {data: []}}));
+ backend.connections.subscribe((c: MockConnection) => c.mockRespond(resp));
- service.getHeroes()
- .do(heroes => {
- expect(heroes.length).toBe(0, 'should have no heroes');
- })
- .toPromise();
- })));
+ service.getHeroes().subscribe(
+ heroes => {
+ expect(heroes.length).toBe(0, 'should have no heroes');
+ },
+ fail
+ );
+ });
- it('should treat 404 as an Observable error', async(inject([], () => {
- let resp = new Response(new ResponseOptions({status: 404}));
- backend.connections.subscribe((c: MockConnection) => c.mockRespond(resp));
+ it('should treat 404 as an Observable error', () => {
+ let resp = new Response(new ResponseOptions({status: 404}));
+ backend.connections.subscribe((c: MockConnection) => c.mockRespond(resp));
- service.getHeroes()
- .do(heroes => {
- fail('should not respond with heroes');
- })
- .catch(err => {
- expect(err).toMatch(/Bad response status/, 'should catch bad response status code');
- return Observable.of(null); // failure is the expected test result
- })
- .toPromise();
- })));
+ service.getHeroes().subscribe(
+ heroes => fail('should not respond with heroes'),
+ err => {
+ expect(err).toMatch(/Bad response status/, 'should catch bad response status code');
+ return of(null); // failure is the expected test result
+ });
+ });
});
});
diff --git a/aio/content/examples/testing/src/app/model/http-hero.service.ts b/aio/content/examples/testing/src/app/model/http-hero.service.ts
index a5fe46b801..11a08f3de3 100644
--- a/aio/content/examples/testing/src/app/model/http-hero.service.ts
+++ b/aio/content/examples/testing/src/app/model/http-hero.service.ts
@@ -1,3 +1,4 @@
+// The OLD Http module. See HeroService for use of the current HttpClient
// #docplaster
// #docregion
import { Injectable } from '@angular/core';
@@ -5,12 +6,9 @@ import { Http, Response } from '@angular/http';
import { Headers, RequestOptions } from '@angular/http';
import { Hero } from './hero';
-import { Observable } from 'rxjs/Observable';
-import 'rxjs/add/observable/throw';
-
-import 'rxjs/add/operator/do';
-import 'rxjs/add/operator/catch';
-import 'rxjs/add/operator/map';
+import { Observable } from 'rxjs/Observable';
+import { ErrorObservable } from 'rxjs/observable/ErrorObservable';
+import { catchError, map, tap } from 'rxjs/operators';
@Injectable()
export class HttpHeroService {
@@ -19,16 +17,17 @@ export class HttpHeroService {
constructor (private http: Http) {}
getHeroes (): Observable {
- return this.http.get(this._heroesUrl)
- .map(this.extractData)
- // .do(data => console.log(data)) // eyeball results in the console
- .catch(this.handleError);
+ return this.http.get(this._heroesUrl).pipe(
+ map(this.extractData),
+ // tap(data => console.log(data)), // eyeball results in the console
+ catchError(this.handleError)
+ );
}
getHero(id: number | string) {
- return this.http
- .get('app/heroes/?id=${id}')
- .map((r: Response) => r.json().data as Hero[]);
+ return this.http.get('app/heroes/?id=${id}').pipe(
+ map((r: Response) => r.json().data as Hero[])
+ );
}
addHero (name: string): Observable {
@@ -36,9 +35,10 @@ export class HttpHeroService {
let headers = new Headers({ 'Content-Type': 'application/json' });
let options = new RequestOptions({ headers: headers });
- return this.http.post(this._heroesUrl, body, options)
- .map(this.extractData)
- .catch(this.handleError);
+ return this.http.post(this._heroesUrl, body, options).pipe(
+ map(this.extractData),
+ catchError(this.handleError)
+ );
}
updateHero (hero: Hero): Observable {
@@ -46,9 +46,10 @@ export class HttpHeroService {
let headers = new Headers({ 'Content-Type': 'application/json' });
let options = new RequestOptions({ headers: headers });
- return this.http.put(this._heroesUrl, body, options)
- .map(this.extractData)
- .catch(this.handleError);
+ return this.http.put(this._heroesUrl, body, options).pipe(
+ map(this.extractData),
+ catchError(this.handleError)
+ );
}
private extractData(res: Response) {
@@ -63,6 +64,6 @@ export class HttpHeroService {
// In a real world app, we might send the error to remote logging infrastructure
let errMsg = error.message || 'Server error';
console.error(errMsg); // log to console instead
- return Observable.throw(errMsg);
+ return new ErrorObservable(errMsg);
}
}
diff --git a/aio/content/examples/testing/src/app/model/index.ts b/aio/content/examples/testing/src/app/model/index.ts
new file mode 100644
index 0000000000..694c333a87
--- /dev/null
+++ b/aio/content/examples/testing/src/app/model/index.ts
@@ -0,0 +1,3 @@
+export * from './hero';
+export * from './hero.service';
+export * from './user.service';
diff --git a/aio/content/examples/testing/src/app/model/test-heroes.ts b/aio/content/examples/testing/src/app/model/test-heroes.ts
deleted file mode 100644
index 2dc0f92502..0000000000
--- a/aio/content/examples/testing/src/app/model/test-heroes.ts
+++ /dev/null
@@ -1,11 +0,0 @@
-// #docregion
-import { Hero } from './hero';
-
-export const HEROES: Hero[] = [
- new Hero(11, 'Mr. Nice'),
- new Hero(12, 'Narco'),
- new Hero(13, 'Bombasto'),
- new Hero(14, 'Celeritas'),
- new Hero(15, 'Magneta'),
- new Hero(16, 'RubberMan')
-];
diff --git a/aio/content/examples/testing/src/app/model/testing/fake-hero.service.ts b/aio/content/examples/testing/src/app/model/testing/fake-hero.service.ts
deleted file mode 100644
index 02e1484df4..0000000000
--- a/aio/content/examples/testing/src/app/model/testing/fake-hero.service.ts
+++ /dev/null
@@ -1,41 +0,0 @@
-// re-export for tester convenience
-export { Hero } from '../hero';
-export { HeroService } from '../hero.service';
-
-import { Hero } from '../hero';
-import { HeroService } from '../hero.service';
-
-export const HEROES: Hero[] = [
- new Hero(41, 'Bob'),
- new Hero(42, 'Carol'),
- new Hero(43, 'Ted'),
- new Hero(44, 'Alice'),
- new Hero(45, 'Speedy'),
- new Hero(46, 'Stealthy')
-];
-
-export class FakeHeroService implements HeroService {
-
- heroes = HEROES.map(h => h.clone());
- lastPromise: Promise; // remember so we can spy on promise calls
-
- getHero(id: number | string) {
- if (typeof id === 'string') {
- id = parseInt(id as string, 10);
- }
- let hero = this.heroes.find(h => h.id === id);
- return this.lastPromise = Promise.resolve(hero);
- }
-
- getHeroes() {
- return this.lastPromise = Promise.resolve(this.heroes);
- }
-
- updateHero(hero: Hero): Promise {
- return this.lastPromise = this.getHero(hero.id).then(h => {
- return h ?
- Object.assign(h, hero) :
- Promise.reject(`Hero ${hero.id} not found`) as any as Promise;
- });
- }
-}
diff --git a/aio/content/examples/testing/src/app/model/testing/http-client.spec.ts b/aio/content/examples/testing/src/app/model/testing/http-client.spec.ts
new file mode 100644
index 0000000000..2c5b5ffd46
--- /dev/null
+++ b/aio/content/examples/testing/src/app/model/testing/http-client.spec.ts
@@ -0,0 +1,192 @@
+// #docplaster
+// #docregion imports
+// Http testing module and mocking controller
+import { HttpClientTestingModule, HttpTestingController } from '@angular/common/http/testing';
+
+// Other imports
+import { TestBed } from '@angular/core/testing';
+import { HttpClient, HttpErrorResponse } from '@angular/common/http';
+
+// #enddocregion imports
+import { HttpHeaders } from '@angular/common/http';
+
+interface Data {
+ name: string;
+}
+
+const testUrl = '/data';
+
+// #docregion setup
+describe('HttpClient testing', () => {
+ let httpClient: HttpClient;
+ let httpTestingController: HttpTestingController;
+
+ beforeEach(() => {
+ TestBed.configureTestingModule({
+ imports: [ HttpClientTestingModule ]
+ });
+
+ // Inject the http service and test controller for each test
+ httpClient = TestBed.get(HttpClient);
+ httpTestingController = TestBed.get(HttpTestingController);
+ });
+ // #enddocregion setup
+ // #docregion afterEach
+ afterEach(() => {
+ // After every test, assert that there are no more pending requests.
+ httpTestingController.verify();
+ });
+ // #enddocregion afterEach
+ // #docregion setup
+ /// Tests begin ///
+ // #enddocregion setup
+ // #docregion get-test
+ it('can test HttpClient.get', () => {
+ const testData: Data = {name: 'Test Data'};
+
+ // Make an HTTP GET request
+ httpClient.get(testUrl)
+ .subscribe(data =>
+ // When observable resolves, result should match test data
+ expect(data).toEqual(testData)
+ );
+
+ // The following `expectOne()` will match the request's URL.
+ // If no requests or multiple requests matched that URL
+ // `expectOne()` would throw.
+ const req = httpTestingController.expectOne('/data');
+
+ // Assert that the request is a GET.
+ expect(req.request.method).toEqual('GET');
+
+ // Respond with mock data, causing Observable to resolve.
+ // Subscribe callback asserts that correct data was returned.
+ req.flush(testData);
+
+ // Finally, assert that there are no outstanding requests.
+ httpTestingController.verify();
+ });
+ // #enddocregion get-test
+ it('can test HttpClient.get with matching header', () => {
+ const testData: Data = {name: 'Test Data'};
+
+ // Make an HTTP GET request with specific header
+ httpClient.get(testUrl, {
+ headers: new HttpHeaders({'Authorization': 'my-auth-token'})
+ })
+ .subscribe(data =>
+ expect(data).toEqual(testData)
+ );
+
+ // Find request with a predicate function.
+ // #docregion predicate
+ // Expect one request with an authorization header
+ const req = httpTestingController.expectOne(
+ req => req.headers.has('Authorization')
+ );
+ // #enddocregion predicate
+ req.flush(testData);
+ });
+
+ it('can test multiple requests', () => {
+ let testData: Data[] = [
+ { name: 'bob' }, { name: 'carol' },
+ { name: 'ted' }, { name: 'alice' }
+ ];
+
+ // Make three requests in a row
+ httpClient.get(testUrl)
+ .subscribe(d => expect(d.length).toEqual(0, 'should have no data'));
+
+ httpClient.get(testUrl)
+ .subscribe(d => expect(d).toEqual([testData[0]], 'should be one element array'));
+
+ httpClient.get(testUrl)
+ .subscribe(d => expect(d).toEqual(testData, 'should be expected data'));
+
+ // #docregion multi-request
+ // get all pending requests that match the given URL
+ const requests = httpTestingController.match(testUrl);
+ expect(requests.length).toEqual(3);
+
+ // Respond to each request with different results
+ requests[0].flush([]);
+ requests[1].flush([testData[0]]);
+ requests[2].flush(testData);
+ // #enddocregion multi-request
+ });
+
+ // #docregion 404
+ it('can test for 404 error', () => {
+ const emsg = 'deliberate 404 error';
+
+ httpClient.get(testUrl).subscribe(
+ data => fail('should have failed with the 404 error'),
+ (error: HttpErrorResponse) => {
+ expect(error.status).toEqual(404, 'status');
+ expect(error.error).toEqual(emsg, 'message');
+ }
+ );
+
+ const req = httpTestingController.expectOne(testUrl);
+
+ // Respond with mock error
+ req.flush(emsg, { status: 404, statusText: 'Not Found' });
+ });
+ // #enddocregion 404
+
+ // #docregion network-error
+ it('can test for network error', () => {
+ const emsg = 'simulated network error';
+
+ httpClient.get(testUrl).subscribe(
+ data => fail('should have failed with the network error'),
+ (error: HttpErrorResponse) => {
+ expect(error.error.message).toEqual(emsg, 'message');
+ }
+ );
+
+ const req = httpTestingController.expectOne(testUrl);
+
+ // Create mock ErrorEvent, raised when something goes wrong at the network level.
+ // Connection timeout, DNS error, offline, etc
+ const errorEvent = new ErrorEvent('so sad', {
+ message: emsg,
+ // #enddocregion network-error
+ // The rest of this is optional and not used.
+ // Just showing that you could provide this too.
+ filename: 'HeroService.ts',
+ lineno: 42,
+ colno: 21
+ // #docregion network-error
+ });
+
+ // Respond with mock error
+ req.error(errorEvent);
+ });
+ // #enddocregion network-error
+
+ it('httpTestingController.verify should fail if HTTP response not simulated', () => {
+ // Sends request
+ httpClient.get('some/api').subscribe();
+
+ // verify() should fail because haven't handled the pending request.
+ expect(() => httpTestingController.verify()).toThrow();
+
+ // Now get and flush the request so that afterEach() doesn't fail
+ const req = httpTestingController.expectOne('some/api');
+ req.flush(null);
+ });
+
+ // Proves that verify in afterEach() really would catch error
+ // if test doesn't simulate the HTTP response.
+ //
+ // Must disable this test because can't catch an error in an afterEach().
+ // Uncomment if you want to confirm that afterEach() does the job.
+ // it('afterEach() should fail when HTTP response not simulated',() => {
+ // // Sends request which is never handled by this test
+ // httpClient.get('some/api').subscribe();
+ // });
+// #docregion setup
+});
+// #enddocregion setup
diff --git a/aio/content/examples/testing/src/app/model/testing/index.ts b/aio/content/examples/testing/src/app/model/testing/index.ts
new file mode 100644
index 0000000000..6da76e67db
--- /dev/null
+++ b/aio/content/examples/testing/src/app/model/testing/index.ts
@@ -0,0 +1 @@
+export * from './fake-hero.service';
diff --git a/aio/content/examples/testing/src/app/model/testing/test-hero.service.ts b/aio/content/examples/testing/src/app/model/testing/test-hero.service.ts
new file mode 100644
index 0000000000..14ad8453d6
--- /dev/null
+++ b/aio/content/examples/testing/src/app/model/testing/test-hero.service.ts
@@ -0,0 +1,61 @@
+import { Injectable } from '@angular/core';
+
+import { Observable } from 'rxjs/Observable';
+import { asyncData } from '../../../testing';
+
+import { map } from 'rxjs/operators';
+
+// re-export for tester convenience
+export { Hero } from '../hero';
+export { HeroService } from '../hero.service';
+export { getTestHeroes } from './test-heroes';
+
+import { Hero } from '../hero';
+import { HeroService } from '../hero.service';
+import { getTestHeroes } from './test-heroes';
+
+@Injectable()
+/**
+ * FakeHeroService pretends to make real http requests.
+ * implements only as much of HeroService as is actually consumed by the app
+*/
+export class TestHeroService extends HeroService {
+
+ constructor() {
+ super(null);
+ }
+
+ heroes = getTestHeroes();
+ lastResult: Observable; // result from last method call
+
+ addHero(hero: Hero): Observable {
+ throw new Error('Method not implemented.');
+ }
+
+ deleteHero(hero: number | Hero): Observable {
+ throw new Error('Method not implemented.');
+ }
+
+ getHeroes(): Observable {
+ return this.lastResult = asyncData(this.heroes);
+ }
+
+ getHero(id: number | string): Observable {
+ if (typeof id === 'string') {
+ id = parseInt(id as string, 10);
+ }
+ let hero = this.heroes.find(h => h.id === id);
+ return this.lastResult = asyncData(hero);
+ }
+
+ updateHero(hero: Hero): Observable {
+ return this.lastResult = this.getHero(hero.id).pipe(
+ map(h => {
+ if (h) {
+ return Object.assign(h, hero);
+ }
+ throw new Error(`Hero ${hero.id} not found`);
+ })
+ );
+ }
+}
diff --git a/aio/content/examples/testing/src/app/model/testing/test-heroes.ts b/aio/content/examples/testing/src/app/model/testing/test-heroes.ts
new file mode 100644
index 0000000000..2af87f0e0d
--- /dev/null
+++ b/aio/content/examples/testing/src/app/model/testing/test-heroes.ts
@@ -0,0 +1,13 @@
+import { Hero } from '../hero';
+
+/** return fresh array of test heroes */
+export function getTestHeroes(): Hero[] {
+ return [
+ {id: 41, name: 'Bob' },
+ {id: 42, name: 'Carol' },
+ {id: 43, name: 'Ted' },
+ {id: 44, name: 'Alice' },
+ {id: 45, name: 'Speedy' },
+ {id: 46, name: 'Stealthy' }
+ ];
+}
diff --git a/aio/content/examples/testing/src/app/shared/shared.module.ts b/aio/content/examples/testing/src/app/shared/shared.module.ts
index 17c41c0410..cb2e6e7f90 100644
--- a/aio/content/examples/testing/src/app/shared/shared.module.ts
+++ b/aio/content/examples/testing/src/app/shared/shared.module.ts
@@ -4,12 +4,16 @@ import { FormsModule } from '@angular/forms';
import { HighlightDirective } from './highlight.directive';
import { TitleCasePipe } from './title-case.pipe';
-import { TwainComponent } from './twain.component';
@NgModule({
- imports: [ CommonModule ],
- exports: [ CommonModule, FormsModule,
- HighlightDirective, TitleCasePipe, TwainComponent ],
- declarations: [ HighlightDirective, TitleCasePipe, TwainComponent ]
+ imports: [ CommonModule ],
+ exports: [
+ CommonModule,
+ // SharedModule importers won't have to import FormsModule too
+ FormsModule,
+ HighlightDirective,
+ TitleCasePipe
+ ],
+ declarations: [ HighlightDirective, TitleCasePipe ]
})
export class SharedModule { }
diff --git a/aio/content/examples/testing/src/app/shared/twain.component.spec.ts b/aio/content/examples/testing/src/app/shared/twain.component.spec.ts
deleted file mode 100644
index b177c0bfc3..0000000000
--- a/aio/content/examples/testing/src/app/shared/twain.component.spec.ts
+++ /dev/null
@@ -1,92 +0,0 @@
-// #docplaster
-import { async, fakeAsync, ComponentFixture, TestBed, tick } from '@angular/core/testing';
-import { By } from '@angular/platform-browser';
-import { DebugElement } from '@angular/core';
-
-import { TwainService } from './twain.service';
-import { TwainComponent } from './twain.component';
-
-describe('TwainComponent', () => {
-
- let comp: TwainComponent;
- let fixture: ComponentFixture;
-
- let spy: jasmine.Spy;
- let de: DebugElement;
- let el: HTMLElement;
- let twainService: TwainService; // the actually injected service
-
- const testQuote = 'Test Quote';
-
- // #docregion setup
- beforeEach(() => {
- TestBed.configureTestingModule({
- declarations: [ TwainComponent ],
- providers: [ TwainService ],
- });
-
- fixture = TestBed.createComponent(TwainComponent);
- comp = fixture.componentInstance;
-
- // TwainService actually injected into the component
- twainService = fixture.debugElement.injector.get(TwainService);
-
- // Setup spy on the `getQuote` method
- // #docregion spy
- spy = spyOn(twainService, 'getQuote')
- .and.returnValue(Promise.resolve(testQuote));
- // #enddocregion spy
-
- // Get the Twain quote element by CSS selector (e.g., by class name)
- de = fixture.debugElement.query(By.css('.twain'));
- el = de.nativeElement;
- });
- // #enddocregion setup
-
- // #docregion tests
- it('should not show quote before OnInit', () => {
- expect(el.textContent).toBe('', 'nothing displayed');
- expect(spy.calls.any()).toBe(false, 'getQuote not yet called');
- });
-
- it('should still not show quote after component initialized', () => {
- fixture.detectChanges();
- // getQuote service is async => still has not returned with quote
- expect(el.textContent).toBe('...', 'no quote yet');
- expect(spy.calls.any()).toBe(true, 'getQuote called');
- });
-
- // #docregion async-test
- it('should show quote after getQuote promise (async)', async(() => {
- fixture.detectChanges();
-
- fixture.whenStable().then(() => { // wait for async getQuote
- fixture.detectChanges(); // update view with quote
- expect(el.textContent).toBe(testQuote);
- });
- }));
- // #enddocregion async-test
-
- // #docregion fake-async-test
- it('should show quote after getQuote promise (fakeAsync)', fakeAsync(() => {
- fixture.detectChanges();
- tick(); // wait for async getQuote
- fixture.detectChanges(); // update view with quote
- expect(el.textContent).toBe(testQuote);
- }));
- // #enddocregion fake-async-test
- // #enddocregion tests
-
- // #docregion done-test
- it('should show quote after getQuote promise (done)', (done: any) => {
- fixture.detectChanges();
-
- // get the spy promise and wait for it to resolve
- spy.calls.mostRecent().returnValue.then(() => {
- fixture.detectChanges(); // update view with quote
- expect(el.textContent).toBe(testQuote);
- done();
- });
- });
- // #enddocregion done-test
-});
diff --git a/aio/content/examples/testing/src/app/shared/twain.component.timer.spec.ts.no-work b/aio/content/examples/testing/src/app/shared/twain.component.timer.spec.ts.no-work
deleted file mode 100644
index 74dec3e766..0000000000
--- a/aio/content/examples/testing/src/app/shared/twain.component.timer.spec.ts.no-work
+++ /dev/null
@@ -1,116 +0,0 @@
-// #docplaster
-// When AppComponent learns to present quote with intervalTimer
-import { async, discardPeriodicTasks, fakeAsync, ComponentFixture, TestBed, tick } from '@angular/core/testing';
-import { By } from '@angular/platform-browser';
-import { DebugElement } from '@angular/core';
-
-import { TwainService } from './model';
-import { TwainComponent } from './twain.component';
-
-xdescribe('TwainComponent', () => {
-
- let comp: TwainComponent;
- let fixture: ComponentFixture;
-
- const quotes = [
- 'Test Quote 1',
- 'Test Quote 2',
- 'Test Quote 3'
- ];
-
- let spy: jasmine.Spy;
- let twainEl: DebugElement; // the element with the Twain quote
- let twainService: TwainService; // the actually injected service
-
- function getQuote() { return twainEl.nativeElement.textContent; }
-
- // #docregion setup
- beforeEach(() => {
- TestBed.configureTestingModule({
- declarations: [ TwainComponent ],
- providers: [ TwainService ],
- });
-
- fixture = TestBed.createComponent(TwainComponent);
- comp = fixture.componentInstance;
-
- // TwainService actually injected into the component
- twainService = fixture.debugElement.injector.get(TwainService);
-
- // Setup spy on the `getQuote` method
- spy = spyOn(twainService, 'getQuote')
- .and.returnValues(...quotes.map(q => Promise.resolve(q)));
-
- // Get the Twain quote element by CSS selector (e.g., by class name)
- twainEl = fixture.debugElement.query(By.css('.twain'));
- });
-
- afterEach(() => {
- // destroy component to stop the component timer
- fixture.destroy();
- });
- // #enddocregion setup
-
- // #docregion tests
- it('should not show quote before OnInit', () => {
- expect(getQuote()).toBe('');
- });
-
- it('should still not show quote after component initialized', () => {
- // because the getQuote service is async
- fixture.detectChanges(); // trigger data binding
- expect(getQuote()).toContain('not initialized');
- });
-
- // WIP
- // If go this way, add jasmine.clock().uninstall(); to afterEach
- // it('should show quote after Angular "settles"', async(() => {
- // //jasmine.clock().install();
- // fixture.detectChanges(); // trigger data binding
- // fixture.whenStable().then(() => {
- // fixture.detectChanges(); // update view with the quote
- // expect(getQuote()).toBe(quotes[0]);
- // });
- // // jasmine.clock().tick(5000);
- // // fixture.whenStable().then(() => {
- // // fixture.detectChanges(); // update view with the quote
- // // expect(getQuote()).toBe(quotes[1]);
- // // });
- // }));
-
- it('should show quote after getQuote promise returns', fakeAsync(() => {
- fixture.detectChanges(); // trigger data binding
- tick(); // wait for first async getQuote to return
- fixture.detectChanges(); // update view with the quote
- expect(getQuote()).toBe(quotes[0]);
-
- // destroy component to stop the component timer before test ends
- // else test errors because still have timer in the queue
- fixture.destroy();
- }));
-
- it('should show 2nd quote after 5 seconds pass', fakeAsync(() => {
- fixture.detectChanges(); // trigger data binding
- tick(5000); // wait for second async getQuote to return
- fixture.detectChanges(); // update view with the quote
- expect(getQuote()).toBe(quotes[1]);
-
- // still have intervalTimer queuing requres
- // discardPeriodicTasks() else test errors
- discardPeriodicTasks();
- }));
-
- fit('should show 3rd quote after 10 seconds pass', fakeAsync(() => {
- fixture.detectChanges(); // trigger data binding
- tick(5000); // wait for second async getQuote to return
- fixture.detectChanges(); // update view with the 2nd quote
- tick(5000); // wait for third async getQuote to return
- fixture.detectChanges(); // update view with the 3rd quote
- expect(getQuote()).toBe(quotes[2]);
-
- // still have intervalTimer queuing requres
- // discardPeriodicTasks() else test errors
- discardPeriodicTasks();
- }));
- // #enddocregion tests
-});
diff --git a/aio/content/examples/testing/src/app/shared/twain.component.timer.ts.no-work b/aio/content/examples/testing/src/app/shared/twain.component.timer.ts.no-work
deleted file mode 100644
index d3dc1f205d..0000000000
--- a/aio/content/examples/testing/src/app/shared/twain.component.timer.ts.no-work
+++ /dev/null
@@ -1,27 +0,0 @@
-// #docregion
-import { Component, OnInit, OnDestroy } from '@angular/core';
-
-import { TwainService } from './twain.service';
-
-@Component({
- selector: 'twain-quote',
- template: ' {
- return new Promise(resolve => {
- setTimeout( () => resolve(this.nextQuote()), 500 );
- });
- }
-
- private nextQuote() {
- if (this.next === quotes.length) { this.next = 0; }
- return quotes[ this.next++ ];
- }
-}
diff --git a/aio/content/examples/testing/src/app/twain/quote.ts b/aio/content/examples/testing/src/app/twain/quote.ts
new file mode 100644
index 0000000000..803cae0f60
--- /dev/null
+++ b/aio/content/examples/testing/src/app/twain/quote.ts
@@ -0,0 +1,4 @@
+export class Quote {
+ id: number;
+ quote: string;
+}
diff --git a/aio/content/examples/testing/src/app/twain/twain.component.marbles.spec.ts b/aio/content/examples/testing/src/app/twain/twain.component.marbles.spec.ts
new file mode 100644
index 0000000000..7e2926001d
--- /dev/null
+++ b/aio/content/examples/testing/src/app/twain/twain.component.marbles.spec.ts
@@ -0,0 +1,93 @@
+// #docplaster
+import { async, fakeAsync, ComponentFixture, TestBed, tick } from '@angular/core/testing';
+
+// #docregion import-marbles
+import { cold, getTestScheduler } from 'jasmine-marbles';
+// #enddocregion import-marbles
+
+import { Observable } from 'rxjs/Observable';
+import { of } from 'rxjs/observable/of';
+
+import { ErrorObservable } from 'rxjs/observable/ErrorObservable';
+import { last } from 'rxjs/operators';
+
+import { TwainService } from './twain.service';
+import { TwainComponent } from './twain.component';
+
+
+describe('TwainComponent (marbles)', () => {
+ let component: TwainComponent;
+ let fixture: ComponentFixture;
+ let getQuoteSpy: jasmine.Spy;
+ let quoteEl: HTMLElement;
+ let testQuote: string;
+
+ // Helper function to get the error message element value
+ // An *ngIf keeps it out of the DOM until there is an error
+ const errorMessage = () => {
+ const el = fixture.nativeElement.querySelector('.error');
+ return el ? el.textContent : null;
+ };
+
+ beforeEach(() => {
+ // Create a fake TwainService object with a `getQuote()` spy
+ const twainService = jasmine.createSpyObj('TwainService', ['getQuote']);
+ getQuoteSpy = twainService.getQuote;
+
+ TestBed.configureTestingModule({
+ declarations: [ TwainComponent ],
+ providers: [
+ { provide: TwainService, useValue: twainService }
+ ]
+ });
+
+ fixture = TestBed.createComponent(TwainComponent);
+ component = fixture.componentInstance;
+ quoteEl = fixture.nativeElement.querySelector('.twain');
+ testQuote = 'Test Quote';
+ });
+
+ // A synchronous test that simulates async behavior
+ // #docregion get-quote-test
+ it('should show quote after getQuote (marbles)', () => {
+ // observable test quote value and complete(), after delay
+ // #docregion test-quote-marbles
+ const q$ = cold('---x|', { x: testQuote });
+ // #enddocregion test-quote-marbles
+ getQuoteSpy.and.returnValue( q$ );
+
+ fixture.detectChanges(); // ngOnInit()
+ expect(quoteEl.textContent).toBe('...', 'should show placeholder');
+
+ // #docregion test-scheduler-flush
+ getTestScheduler().flush(); // flush the observables
+ // #enddocregion test-scheduler-flush
+
+ fixture.detectChanges(); // update view
+
+ expect(quoteEl.textContent).toBe(testQuote, 'should show quote');
+ expect(errorMessage()).toBeNull('should not show error');
+ });
+ // #enddocregion get-quote-test
+
+ // Still need fakeAsync() because of component's setTimeout()
+ // #docregion error-test
+ it('should display error when TwainService fails', fakeAsync(() => {
+ // observable error after delay
+ // #docregion error-marbles
+ const q$ = cold('---#|', null, new Error('TwainService test failure'));
+ // #enddocregion error-marbles
+ getQuoteSpy.and.returnValue( q$ );
+
+ fixture.detectChanges(); // ngOnInit()
+ expect(quoteEl.textContent).toBe('...', 'should show placeholder');
+
+ getTestScheduler().flush(); // flush the observables
+ tick(); // component shows error after a setTimeout()
+ fixture.detectChanges(); // update error message
+
+ expect(errorMessage()).toMatch(/test failure/, 'should display error');
+ expect(quoteEl.textContent).toBe('...', 'should show placeholder');
+ }));
+ // #enddocregion error-test
+});
diff --git a/aio/content/examples/testing/src/app/twain/twain.component.spec.ts b/aio/content/examples/testing/src/app/twain/twain.component.spec.ts
new file mode 100644
index 0000000000..ae71da68f5
--- /dev/null
+++ b/aio/content/examples/testing/src/app/twain/twain.component.spec.ts
@@ -0,0 +1,184 @@
+// #docplaster
+import { async, fakeAsync, ComponentFixture, TestBed, tick } from '@angular/core/testing';
+
+import { asyncData, asyncError } from '../../testing';
+
+import { Observable } from 'rxjs/Observable';
+import { of } from 'rxjs/observable/of';
+
+import { ErrorObservable } from 'rxjs/observable/ErrorObservable';
+import { last } from 'rxjs/operators';
+
+import { TwainService } from './twain.service';
+import { TwainComponent } from './twain.component';
+
+describe('TwainComponent', () => {
+ let component: TwainComponent;
+ let fixture: ComponentFixture;
+ let getQuoteSpy: jasmine.Spy;
+ let quoteEl: HTMLElement;
+ let testQuote: string;
+
+ // Helper function to get the error message element value
+ // An *ngIf keeps it out of the DOM until there is an error
+ const errorMessage = () => {
+ const el = fixture.nativeElement.querySelector('.error');
+ return el ? el.textContent : null;
+ };
+
+ // #docregion setup
+ beforeEach(() => {
+ testQuote = 'Test Quote';
+
+ // #docregion spy
+ // Create a fake TwainService object with a `getQuote()` spy
+ const twainService = jasmine.createSpyObj('TwainService', ['getQuote']);
+ // Make the spy return a synchronous Observable with the test data
+ getQuoteSpy = twainService.getQuote.and.returnValue( of(testQuote) );
+ // #enddocregion spy
+
+ TestBed.configureTestingModule({
+ declarations: [ TwainComponent ],
+ providers: [
+ { provide: TwainService, useValue: twainService }
+ ]
+ });
+
+ fixture = TestBed.createComponent(TwainComponent);
+ component = fixture.componentInstance;
+ quoteEl = fixture.nativeElement.querySelector('.twain');
+ });
+ // #enddocregion setup
+
+ describe('when test with synchronous observable', () => {
+ it('should not show quote before OnInit', () => {
+ expect(quoteEl.textContent).toBe('', 'nothing displayed');
+ expect(errorMessage()).toBeNull('should not show error element');
+ expect(getQuoteSpy.calls.any()).toBe(false, 'getQuote not yet called');
+ });
+
+ // The quote would not be immediately available if the service were truly async.
+ // #docregion sync-test
+ it('should show quote after component initialized', () => {
+ fixture.detectChanges(); // onInit()
+
+ // sync spy result shows testQuote immediately after init
+ expect(quoteEl.textContent).toBe(testQuote);
+ expect(getQuoteSpy.calls.any()).toBe(true, 'getQuote called');
+ });
+ // #enddocregion sync-test
+
+
+ // The error would not be immediately available if the service were truly async.
+ // Use `fakeAsync` because the component error calls `setTimeout`
+ // #docregion error-test
+ it('should display error when TwainService fails', fakeAsync(() => {
+ // tell spy to return an error observable
+ getQuoteSpy.and.returnValue(
+ new ErrorObservable('TwainService test failure'));
+
+ fixture.detectChanges(); // onInit()
+ // sync spy errors immediately after init
+
+ tick(); // flush the component's setTimeout()
+
+ fixture.detectChanges(); // update errorMessage within setTimeout()
+
+ expect(errorMessage()).toMatch(/test failure/, 'should display error');
+ expect(quoteEl.textContent).toBe('...', 'should show placeholder');
+ }));
+ // #enddocregion error-test
+ });
+
+ describe('when test with asynchronous observable', () => {
+ beforeEach(() => {
+ // #docregion async-setup
+ // Simulate delayed observable values with the `asyncData()` helper
+ getQuoteSpy.and.returnValue(asyncData(testQuote));
+ // #enddocregion async-setup
+ });
+
+ it('should not show quote before OnInit', () => {
+ expect(quoteEl.textContent).toBe('', 'nothing displayed');
+ expect(errorMessage()).toBeNull('should not show error element');
+ expect(getQuoteSpy.calls.any()).toBe(false, 'getQuote not yet called');
+ });
+
+ it('should still not show quote after component initialized', () => {
+ fixture.detectChanges();
+ // getQuote service is async => still has not returned with quote
+ // so should show the start value, '...'
+ expect(quoteEl.textContent).toBe('...', 'should show placeholder');
+ expect(errorMessage()).toBeNull('should not show error');
+ expect(getQuoteSpy.calls.any()).toBe(true, 'getQuote called');
+ });
+
+ // #docregion fake-async-test
+ it('should show quote after getQuote (fakeAsync)', fakeAsync(() => {
+ fixture.detectChanges(); // ngOnInit()
+ expect(quoteEl.textContent).toBe('...', 'should show placeholder');
+
+ tick(); // flush the observable to get the quote
+ fixture.detectChanges(); // update view
+
+ expect(quoteEl.textContent).toBe(testQuote, 'should show quote');
+ expect(errorMessage()).toBeNull('should not show error');
+ }));
+ // #enddocregion fake-async-test
+
+ // #docregion async-test
+ it('should show quote after getQuote (async)', async(() => {
+ fixture.detectChanges(); // ngOnInit()
+ expect(quoteEl.textContent).toBe('...', 'should show placeholder');
+
+ fixture.whenStable().then(() => { // wait for async getQuote
+ fixture.detectChanges(); // update view with quote
+ expect(quoteEl.textContent).toBe(testQuote);
+ expect(errorMessage()).toBeNull('should not show error');
+ });
+ }));
+ // #enddocregion async-test
+
+
+ // #docregion quote-done-test
+ it('should show last quote (quote done)', (done: DoneFn) => {
+ fixture.detectChanges();
+
+ component.quote.pipe( last() ).subscribe(() => {
+ fixture.detectChanges(); // update view with quote
+ expect(quoteEl.textContent).toBe(testQuote);
+ expect(errorMessage()).toBeNull('should not show error');
+ done();
+ });
+ });
+ // #enddocregion quote-done-test
+
+ // #docregion spy-done-test
+ it('should show quote after getQuote (spy done)', (done: DoneFn) => {
+ fixture.detectChanges();
+
+ // the spy's most recent call returns the observable with the test quote
+ getQuoteSpy.calls.mostRecent().returnValue.subscribe(() => {
+ fixture.detectChanges(); // update view with quote
+ expect(quoteEl.textContent).toBe(testQuote);
+ expect(errorMessage()).toBeNull('should not show error');
+ done();
+ });
+ });
+ // #enddocregion spy-done-test
+
+ // #docregion async-error-test
+ it('should display error when TwainService fails', fakeAsync(() => {
+ // tell spy to return an async error observable
+ getQuoteSpy.and.returnValue(asyncError('TwainService test failure'));
+
+ fixture.detectChanges();
+ tick(); // component shows error after a setTimeout()
+ fixture.detectChanges(); // update error message
+
+ expect(errorMessage()).toMatch(/test failure/, 'should display error');
+ expect(quoteEl.textContent).toBe('...', 'should show placeholder');
+ }));
+ // #enddocregion async-error-test
+ });
+});
diff --git a/aio/content/examples/testing/src/app/twain/twain.component.ts b/aio/content/examples/testing/src/app/twain/twain.component.ts
new file mode 100644
index 0000000000..6e40b6dd54
--- /dev/null
+++ b/aio/content/examples/testing/src/app/twain/twain.component.ts
@@ -0,0 +1,49 @@
+// #docregion
+import { Component, OnInit } from '@angular/core';
+
+import { Observable } from 'rxjs/Observable';
+import { of } from 'rxjs/observable/of';
+import { catchError, startWith } from 'rxjs/operators';
+
+import { TwainService } from './twain.service';
+
+// #docregion component
+@Component({
+ selector: 'twain-quote',
+ // #docregion template
+ template: `
+ ;
+
+ constructor(private twainService: TwainService) {}
+
+ ngOnInit(): void {
+ this.getQuote();
+ }
+
+ // #docregion get-quote
+ getQuote() {
+ this.errorMessage = '';
+ this.quote = this.twainService.getQuote().pipe(
+ startWith('...'),
+ catchError( (err: any) => {
+ // Wait a turn because errorMessage already set once this turn
+ setTimeout(() => this.errorMessage = err.message || err.toString());
+ return of('...'); // reset message to placeholder
+ })
+ );
+ // #enddocregion get-quote
+ }
+
+}
+// #enddocregion component
diff --git a/aio/content/examples/testing/src/app/twain/twain.data.ts b/aio/content/examples/testing/src/app/twain/twain.data.ts
new file mode 100644
index 0000000000..a228ef5bbc
--- /dev/null
+++ b/aio/content/examples/testing/src/app/twain/twain.data.ts
@@ -0,0 +1,15 @@
+import { Quote } from './quote';
+
+export const QUOTES: Quote[] = [
+ 'Always do right. This will gratify some people and astonish the rest.',
+ 'I have never let my schooling interfere with my education.',
+ 'Don\'t go around saying the world owes you a living. The world owes you nothing. It was here first.',
+ 'Whenever you find yourself on the side of the majority, it is time to pause and reflect.',
+ 'If you tell the truth, you don\'t have to remember anything.',
+ 'Clothes make the man. Naked people have little or no influence on society.',
+ 'It\'s not the size of the dog in the fight, it\'s the size of the fight in the dog.',
+ 'Truth is stranger than fiction, but it is because Fiction is obliged to stick to possibilities; Truth isn\'t.',
+ 'The man who does not read good books has no advantage over the man who cannot read them.',
+ 'Get your facts first, and then you can distort them as much as you please.',
+]
+.map((q, i) => ({ id: i + 1, quote: q }));
diff --git a/aio/content/examples/testing/src/app/twain/twain.service.ts b/aio/content/examples/testing/src/app/twain/twain.service.ts
new file mode 100644
index 0000000000..da4386f5b1
--- /dev/null
+++ b/aio/content/examples/testing/src/app/twain/twain.service.ts
@@ -0,0 +1,47 @@
+// Mark Twain Quote service gets quotes from server
+import { Injectable } from '@angular/core';
+import { HttpClient, HttpErrorResponse } from '@angular/common/http';
+
+import { Observable } from 'rxjs/Observable';
+import { ErrorObservable } from 'rxjs/observable/ErrorObservable';
+import { of } from 'rxjs/observable/of';
+import { concat, map, retryWhen, switchMap, take, tap } from 'rxjs/operators';
+
+import { Quote } from './quote';
+
+@Injectable()
+export class TwainService {
+ constructor(private http: HttpClient) { }
+
+ private nextId = 1;
+
+ getQuote(): Observable {
+ return Observable.create(observer => observer.next(this.nextId++)).pipe(
+
+ // tap((id: number) => console.log(id)),
+ // tap((id: number) => { throw new Error('Simulated server error'); }),
+
+ switchMap((id: number) => this.http.get
diff --git a/aio/content/examples/toh-pt5/plnkr.json b/aio/content/examples/toh-pt5/stackblitz.json
similarity index 88%
rename from aio/content/examples/toh-pt5/plnkr.json
rename to aio/content/examples/toh-pt5/stackblitz.json
index df6999a611..17390ecfc6 100644
--- a/aio/content/examples/toh-pt5/plnkr.json
+++ b/aio/content/examples/toh-pt5/stackblitz.json
@@ -1,6 +1,5 @@
{
"description": "Tour of Heroes: Part 5",
- "basePath": "src/",
"files":[
"!**/*.d.ts",
"!**/*.js",
diff --git a/aio/content/examples/toh-pt6/e2e/app.e2e-spec.ts b/aio/content/examples/toh-pt6/e2e/app.e2e-spec.ts
index b51be25f84..cbd0df76d4 100644
--- a/aio/content/examples/toh-pt6/e2e/app.e2e-spec.ts
+++ b/aio/content/examples/toh-pt6/e2e/app.e2e-spec.ts
@@ -190,6 +190,29 @@ describe('Tutorial part 6', () => {
const maxId = heroesBefore[heroesBefore.length - 1].id;
expect(heroesAfter[numHeroes]).toEqual({id: maxId + 1, name: newHeroName});
});
+
+ it('displays correctly styled buttons', async () => {
+ element.all(by.buttonText('x')).then(buttons => {
+ for (const button of buttons) {
+ // Inherited styles from styles.css
+ expect(button.getCssValue('font-family')).toBe('Arial');
+ expect(button.getCssValue('border')).toContain('none');
+ expect(button.getCssValue('padding')).toBe('5px 10px');
+ expect(button.getCssValue('border-radius')).toBe('4px');
+ // Styles defined in heroes.component.css
+ expect(button.getCssValue('left')).toBe('194px');
+ expect(button.getCssValue('top')).toBe('-32px');
+ }
+ });
+
+ const addButton = element(by.buttonText('add'));
+ // Inherited styles from styles.css
+ expect(addButton.getCssValue('font-family')).toBe('Arial');
+ expect(addButton.getCssValue('border')).toContain('none');
+ expect(addButton.getCssValue('padding')).toBe('5px 10px');
+ expect(addButton.getCssValue('border-radius')).toBe('4px');
+ });
+
});
describe('Progressive hero search', () => {
diff --git a/aio/content/examples/toh-pt6/src/app/heroes/heroes.component.css b/aio/content/examples/toh-pt6/src/app/heroes/heroes.component.css
index 62634648ad..c345d1d970 100644
--- a/aio/content/examples/toh-pt6/src/app/heroes/heroes.component.css
+++ b/aio/content/examples/toh-pt6/src/app/heroes/heroes.component.css
@@ -51,7 +51,7 @@
}
/* #docregion additions */
-.button {
+button {
background-color: #eee;
border: none;
padding: 5px 10px;
diff --git a/aio/content/examples/toh-pt6/plnkr.json b/aio/content/examples/toh-pt6/stackblitz.json
similarity index 88%
rename from aio/content/examples/toh-pt6/plnkr.json
rename to aio/content/examples/toh-pt6/stackblitz.json
index d355bc9ff2..777d9ad1f1 100644
--- a/aio/content/examples/toh-pt6/plnkr.json
+++ b/aio/content/examples/toh-pt6/stackblitz.json
@@ -1,6 +1,5 @@
{
"description": "Tour of Heroes: Part 6",
- "basePath": "src/",
"files":[
"!**/*.d.ts",
"!**/*.js",
diff --git a/aio/content/examples/universal/src/app/app.module.ts b/aio/content/examples/universal/src/app/app.module.ts
index 6d07040733..1dab81e17b 100644
--- a/aio/content/examples/universal/src/app/app.module.ts
+++ b/aio/content/examples/universal/src/app/app.module.ts
@@ -53,7 +53,7 @@ export class AppModule {
@Inject(PLATFORM_ID) private platformId: Object,
@Inject(APP_ID) private appId: string) {
const platform = isPlatformBrowser(platformId) ?
- 'on the server' : 'in the browser';
+ 'in the browser' : 'on the server';
console.log(`Running ${platform} with appId=${appId}`);
}
// #enddocregion platform-detection
diff --git a/aio/content/examples/upgrade-phonecat-2-hybrid/karma-test-shim.1.js b/aio/content/examples/upgrade-phonecat-2-hybrid/karma-test-shim.1.js
index 19fcc89fe9..b92085c014 100644
--- a/aio/content/examples/upgrade-phonecat-2-hybrid/karma-test-shim.1.js
+++ b/aio/content/examples/upgrade-phonecat-2-hybrid/karma-test-shim.1.js
@@ -37,6 +37,7 @@ System.config({
map: {
'@angular/core/testing': 'npm:@angular/core/bundles/core-testing.umd.js',
'@angular/common/testing': 'npm:@angular/common/bundles/common-testing.umd.js',
+ '@angular/common/http/testing': 'npm:@angular/common/bundles/common-http-testing.umd.js',
'@angular/compiler/testing': 'npm:@angular/compiler/bundles/compiler-testing.umd.js',
'@angular/platform-browser/testing': 'npm:@angular/platform-browser/bundles/platform-browser-testing.umd.js',
'@angular/platform-browser-dynamic/testing': 'npm:@angular/platform-browser-dynamic/bundles/platform-browser-dynamic-testing.umd.js',
diff --git a/aio/content/examples/user-input/plnkr.json b/aio/content/examples/user-input/stackblitz.json
similarity index 82%
rename from aio/content/examples/user-input/plnkr.json
rename to aio/content/examples/user-input/stackblitz.json
index dd8f063d37..d60beb9e7e 100644
--- a/aio/content/examples/user-input/plnkr.json
+++ b/aio/content/examples/user-input/stackblitz.json
@@ -1,6 +1,5 @@
{
"description": "User Input",
- "basePath": "src/",
"files": [
"!**/*.d.ts",
"!**/*.js"
diff --git a/aio/content/guide/ajs-quick-reference.md b/aio/content/guide/ajs-quick-reference.md
index 987ca23405..6a3018367f 100644
--- a/aio/content/guide/ajs-quick-reference.md
+++ b/aio/content/guide/ajs-quick-reference.md
@@ -1423,10 +1423,9 @@ The Angular code is shown using TypeScript.
`declaration`: 用于记录组件、管道和指令。
- For more information on modules, see [NgModules](guide/ngmodule).
+ For more information on modules, see [NgModules](guide/ngmodules).
要了解关于模块的更多知识，参见[NgModules](guide/ngmodule)。
-
@@ -1660,7 +1659,7 @@ also encapsulate a style sheet within a specific component.
### 样式配置
- !
+ Specs Bag
+Specs Demo
Input/Output Component
@@ -405,7 +390,7 @@ export class ShellComponent { }Button Component
-Needs Content
{{quote}}
' -}) -export class TwainComponent implements OnInit, OnDestroy { - intervalId: number; - quote = '-- not initialized yet --'; - constructor(private twainService: TwainService) { } - - getQuote() { - this.twainService.getQuote().then(quote => this.quote = quote); - } - - ngOnInit(): void { - this.getQuote(); - this.intervalId = window.setInterval(() => this.getQuote(), 5000); - } - - ngOnDestroy(): void { - clearInterval(this.intervalId); - } -} diff --git a/aio/content/examples/testing/src/app/shared/twain.component.ts b/aio/content/examples/testing/src/app/shared/twain.component.ts deleted file mode 100644 index 29f24459ab..0000000000 --- a/aio/content/examples/testing/src/app/shared/twain.component.ts +++ /dev/null @@ -1,20 +0,0 @@ -// #docregion -import { Component, OnInit } from '@angular/core'; - -import { TwainService } from './twain.service'; - -// #docregion component -@Component({ - selector: 'twain-quote', - template: '{{quote}}
' -}) -export class TwainComponent implements OnInit { - intervalId: number; - quote = '...'; - constructor(private twainService: TwainService) { } - - ngOnInit(): void { - this.twainService.getQuote().then(quote => this.quote = quote); - } -} -// #enddocregion component diff --git a/aio/content/examples/testing/src/app/shared/twain.service.ts b/aio/content/examples/testing/src/app/shared/twain.service.ts deleted file mode 100644 index 9e394df1ee..0000000000 --- a/aio/content/examples/testing/src/app/shared/twain.service.ts +++ /dev/null @@ -1,32 +0,0 @@ -import { Injectable } from '@angular/core'; - -const quotes = [ -'Always do right. This will gratify some people and astonish the rest.', -'I have never let my schooling interfere with my education.', -'Don\'t go around saying the world owes you a living. The world owes you nothing. It was here first.', -'Whenever you find yourself on the side of the majority, it is time to pause and reflect.', -'If you tell the truth, you don\'t have to remember anything.', -'Clothes make the man. Naked people have little or no influence on society.', -'It\'s not the size of the dog in the fight, it\'s the size of the fight in the dog.', -'Truth is stranger than fiction, but it is because Fiction is obliged to stick to possibilities; Truth isn\'t.', -'The man who does not read good books has no advantage over the man who cannot read them.', -'Get your facts first, and then you can distort them as much as you please.', -]; - -@Injectable() -export class TwainService { - private next = 0; - - // Imaginary todo: get quotes from a remote quote service - // returns quote after delay simulating server latency - getQuote(): Promise{{quote | async}}
+ +{{ errorMessage }}
`, + // #enddocregion template + styles: [ + `.twain { font-style: italic; } .error { color: red; }` + ] + +}) +export class TwainComponent implements OnInit { + errorMessage: string; + quote: Observable(`api/quotes/${id}`)), + // tap((q : Quote) => console.log(q)), + map((q: Quote) => q.quote), + + // `errors` is observable of http.get errors + retryWhen(errors => errors.pipe( + switchMap((error: HttpErrorResponse) => { + if (error.status === 404) { + // Queried for quote that doesn't exist. + this.nextId = 1; // retry with quote id:1 + return of(null); // signal OK to retry + } + // Some other HTTP error. + console.error(error); + return new ErrorObservable('Cannot get Twain quotes from the server'); + }), + take(2), + // If a second retry value, then didn't find id:1 and triggers the following error + concat(new ErrorObservable('There are no Twain quotes')) // didn't find id:1 + )) + ); + } +} + diff --git a/aio/content/examples/testing/src/app/welcome.component.spec.ts b/aio/content/examples/testing/src/app/welcome/welcome.component.spec.ts similarity index 67% rename from aio/content/examples/testing/src/app/welcome.component.spec.ts rename to aio/content/examples/testing/src/app/welcome/welcome.component.spec.ts index e506dda396..25f3b28c77 100644 --- a/aio/content/examples/testing/src/app/welcome.component.spec.ts +++ b/aio/content/examples/testing/src/app/welcome/welcome.component.spec.ts @@ -1,26 +1,66 @@ // #docplaster import { ComponentFixture, inject, TestBed } from '@angular/core/testing'; -import { By } from '@angular/platform-browser'; -import { DebugElement } from '@angular/core'; -import { UserService } from './model'; +import { UserService } from '../model/user.service'; import { WelcomeComponent } from './welcome.component'; +// #docregion mock-user-service +class MockUserService { + isLoggedIn = true; + user = { name: 'Test User'}; +}; +// #enddocregion mock-user-service + +describe('WelcomeComponent (class only)', () => { + let comp: WelcomeComponent; + let userService: UserService; + + // #docregion class-only-before-each + beforeEach(() => { + TestBed.configureTestingModule({ + // provide the component-under-test and dependent service + providers: [ + WelcomeComponent, + { provide: UserService, useClass: MockUserService } + ] + }); + // inject both the component and the dependent service. + comp = TestBed.get(WelcomeComponent); + userService = TestBed.get(UserService); + }); + // #enddocregion class-only-before-each + + // #docregion class-only-tests + it('should not have welcome message after construction', () => { + expect(comp.welcome).toBeUndefined(); + }); + + it('should welcome logged in user after Angular calls ngOnInit', () => { + comp.ngOnInit(); + expect(comp.welcome).toContain(userService.user.name); + }); + + it('should ask user to log in if not logged in after ngOnInit', () => { + userService.isLoggedIn = false; + comp.ngOnInit(); + expect(comp.welcome).not.toContain(userService.user.name); + expect(comp.welcome).toContain('log in'); + }); + // #enddocregion class-only-tests +}); + describe('WelcomeComponent', () => { let comp: WelcomeComponent; let fixture: ComponentFixture; let componentUserService: UserService; // the actually injected service let userService: UserService; // the TestBed injected service - let de: DebugElement; // the DebugElement with the welcome message let el: HTMLElement; // the DOM element with the welcome message - let userServiceStub: { - isLoggedIn: boolean; - user: { name: string} - }; + // #docregion setup, user-service-stub + let userServiceStub: Partial ; - // #docregion setup + // #enddocregion user-service-stub beforeEach(() => { // stub UserService for test purposes // #docregion user-service-stub @@ -57,8 +97,7 @@ describe('WelcomeComponent', () => { // #enddocregion inject-from-testbed // get the "welcome" element by CSS selector (e.g., by class name) - de = fixture.debugElement.query(By.css('.welcome')); - el = de.nativeElement; + el = fixture.nativeElement.querySelector('.welcome'); }); // #enddocregion setup @@ -85,12 +124,10 @@ describe('WelcomeComponent', () => { }); // #enddocregion tests - // #docregion inject-it it('should inject the component\'s UserService instance', inject([UserService], (service: UserService) => { expect(service).toBe(componentUserService); })); - // #enddocregion inject-it it('TestBed and Component UserService should be the same', () => { expect(userService === componentUserService).toBe(true); diff --git a/aio/content/examples/testing/src/app/welcome.component.ts b/aio/content/examples/testing/src/app/welcome/welcome.component.ts similarity index 50% rename from aio/content/examples/testing/src/app/welcome.component.ts rename to aio/content/examples/testing/src/app/welcome/welcome.component.ts index 9bc5ca33c4..802f30cc4a 100644 --- a/aio/content/examples/testing/src/app/welcome.component.ts +++ b/aio/content/examples/testing/src/app/welcome/welcome.component.ts @@ -1,19 +1,20 @@ // #docregion import { Component, OnInit } from '@angular/core'; +import { UserService } from '../model/user.service'; -import { UserService } from './model/user.service'; - +// #docregion component @Component({ selector: 'app-welcome', - template: ' {{welcome}}
' + template: '{{welcome}}
' }) +// #docregion class export class WelcomeComponent implements OnInit { - welcome = '-- not initialized yet --'; + welcome: string; constructor(private userService: UserService) { } ngOnInit(): void { this.welcome = this.userService.isLoggedIn ? - 'Welcome, ' + this.userService.user.name : - 'Please log in.'; + 'Welcome, ' + this.userService.user.name : 'Please log in.'; } } +// #enddocregion component, class diff --git a/aio/content/examples/testing/src/bag-specs.html b/aio/content/examples/testing/src/bag-specs.html deleted file mode 100644 index 89b46f7056..0000000000 --- a/aio/content/examples/testing/src/bag-specs.html +++ /dev/null @@ -1,42 +0,0 @@ - - - - - -- Specs Bag - - - - - - - - - - - - - - - - - - - - - - - - - - - - - diff --git a/aio/content/examples/testing/src/bag.html b/aio/content/examples/testing/src/bag.html deleted file mode 100644 index 3e0fcb9025..0000000000 --- a/aio/content/examples/testing/src/bag.html +++ /dev/null @@ -1,26 +0,0 @@ - - - - -- Specs Bag - - - - - - - - - - - - - - - -Loading ... - - diff --git a/aio/content/examples/testing/src/banner-inline-specs.html b/aio/content/examples/testing/src/banner-inline-specs.html deleted file mode 100644 index 2a512a5647..0000000000 --- a/aio/content/examples/testing/src/banner-inline-specs.html +++ /dev/null @@ -1,40 +0,0 @@ - - - - - -- Banner Component (inline template) Specs - - - - - - - - - - - - - - - - - - - - - - - - - - - - - diff --git a/aio/content/examples/testing/src/banner-specs.html b/aio/content/examples/testing/src/banner-specs.html deleted file mode 100644 index d16dd977a4..0000000000 --- a/aio/content/examples/testing/src/banner-specs.html +++ /dev/null @@ -1,40 +0,0 @@ - - - - - -- Banner Component Specs - - - - - - - - - - - - - - - - - - - - - - - - - - - - - diff --git a/aio/content/examples/testing/src/browser-test-shim.js b/aio/content/examples/testing/src/browser-test-shim.js deleted file mode 100644 index ee21831e22..0000000000 --- a/aio/content/examples/testing/src/browser-test-shim.js +++ /dev/null @@ -1,87 +0,0 @@ -// BROWSER TESTING SHIM -// Keep it in-sync with what karma-test-shim does -// #docregion -/*global jasmine, __karma__, window*/ -(function () { - -Error.stackTraceLimit = 0; // "No stacktrace"" is usually best for app testing. - -// Uncomment to get full stacktrace output. Sometimes helpful, usually not. -// Error.stackTraceLimit = Infinity; // - -jasmine.DEFAULT_TIMEOUT_INTERVAL = 3000; - -var baseURL = document.baseURI; -baseURL = baseURL + baseURL[baseURL.length-1] ? '' : '/'; - -System.config({ - baseURL: baseURL, - // Extend usual application package list with test folder - packages: { 'testing': { main: 'index.js', defaultExtension: 'js' } }, - - // Assume npm: is set in `paths` in systemjs.config - // Map the angular testing umd bundles - map: { - '@angular/core/testing': 'npm:@angular/core/bundles/core-testing.umd.js', - '@angular/common/testing': 'npm:@angular/common/bundles/common-testing.umd.js', - '@angular/compiler/testing': 'npm:@angular/compiler/bundles/compiler-testing.umd.js', - '@angular/platform-browser/testing': 'npm:@angular/platform-browser/bundles/platform-browser-testing.umd.js', - '@angular/platform-browser-dynamic/testing': 'npm:@angular/platform-browser-dynamic/bundles/platform-browser-dynamic-testing.umd.js', - '@angular/http/testing': 'npm:@angular/http/bundles/http-testing.umd.js', - '@angular/router/testing': 'npm:@angular/router/bundles/router-testing.umd.js', - '@angular/forms/testing': 'npm:@angular/forms/bundles/forms-testing.umd.js', - }, -}); - -System.import('systemjs.config.js') - .then(importSystemJsExtras) - .then(initTestBed) - .then(initTesting); - -/** Optional SystemJS configuration extras. Keep going w/o it */ -function importSystemJsExtras(){ - return System.import('systemjs.config.extras.js') - .catch(function(reason) { - console.log( - 'Note: System.import could not load "systemjs.config.extras.js" where you might have added more configuration. It is an optional file so we will continue without it.' - ); - console.log(reason); - }); -} - -function initTestBed(){ - return Promise.all([ - System.import('@angular/core/testing'), - System.import('@angular/platform-browser-dynamic/testing') - ]) - - .then(function (providers) { - var coreTesting = providers[0]; - var browserTesting = providers[1]; - - coreTesting.TestBed.initTestEnvironment( - browserTesting.BrowserDynamicTestingModule, - browserTesting.platformBrowserDynamicTesting()); - }) -} - -// Import all spec files defined in the html (__spec_files__) -// and start Jasmine testrunner -function initTesting () { - console.log('loading spec files: '+__spec_files__.join(', ')); - return Promise.all( - __spec_files__.map(function(spec) { - return System.import(spec); - }) - ) - // After all imports load, re-execute `window.onload` which - // triggers the Jasmine test-runner start or explain what went wrong - .then(success, console.error.bind(console)); - - function success () { - console.log('Spec files loaded; starting Jasmine testrunner'); - window.onload(); - } -} - -})(); diff --git a/aio/content/examples/testing/src/expected.ts b/aio/content/examples/testing/src/expected.ts new file mode 100644 index 0000000000..5339fa9725 --- /dev/null +++ b/aio/content/examples/testing/src/expected.ts @@ -0,0 +1 @@ +/* Ignore. Satisfies static analysis of router config in app.component.router.spec.ts */ diff --git a/aio/content/examples/testing/src/index-specs.html b/aio/content/examples/testing/src/index-specs.html new file mode 100644 index 0000000000..ca132f6cd0 --- /dev/null +++ b/aio/content/examples/testing/src/index-specs.html @@ -0,0 +1,4 @@ + diff --git a/aio/content/examples/testing/src/main-specs.ts b/aio/content/examples/testing/src/main-specs.ts new file mode 100644 index 0000000000..4bb1949ae9 --- /dev/null +++ b/aio/content/examples/testing/src/main-specs.ts @@ -0,0 +1,45 @@ +import './testing/global-jasmine'; +import 'jasmine-core/lib/jasmine-core/jasmine-html.js'; +import 'jasmine-core/lib/jasmine-core/boot.js'; + +declare var jasmine; + +import './polyfills'; + +import 'zone.js/dist/async-test'; +import 'zone.js/dist/fake-async-test'; +import 'zone.js/dist/long-stack-trace-zone'; +import 'zone.js/dist/proxy.js'; +import 'zone.js/dist/sync-test'; +import 'zone.js/dist/jasmine-patch'; + +import { getTestBed } from '@angular/core/testing'; +import { + BrowserDynamicTestingModule, + platformBrowserDynamicTesting +} from '@angular/platform-browser-dynamic/testing'; + +// Spec files to include in the Stackblitz tests +import './tests.sb.ts'; + +// + +bootstrap(); + +// + +function bootstrap () { + if (window['jasmineRef']) { + location.reload(); + return; + } else { + window.onload(undefined); + window['jasmineRef'] = jasmine.getEnv(); + } + + // First, initialize the Angular testing environment. + getTestBed().initTestEnvironment( + BrowserDynamicTestingModule, + platformBrowserDynamicTesting() + ); +} diff --git a/aio/content/examples/testing/src/test.css b/aio/content/examples/testing/src/test.css new file mode 100644 index 0000000000..6010a5d9ba --- /dev/null +++ b/aio/content/examples/testing/src/test.css @@ -0,0 +1 @@ +@import "~jasmine-core/lib/jasmine-core/jasmine.css" diff --git a/aio/content/examples/testing/src/testing/activated-route-stub.ts b/aio/content/examples/testing/src/testing/activated-route-stub.ts new file mode 100644 index 0000000000..04fb7cb92b --- /dev/null +++ b/aio/content/examples/testing/src/testing/activated-route-stub.ts @@ -0,0 +1,29 @@ +// export for convenience. +export { ActivatedRoute } from '@angular/router'; + +// #docregion activated-route-stub +import { ReplaySubject } from 'rxjs/ReplaySubject'; +import { convertToParamMap, ParamMap, Params } from '@angular/router'; + +/** + * An ActivateRoute test double with a `paramMap` observable. + * Use the `setParamMap()` method to add the next `paramMap` value. + */ +export class ActivatedRouteStub { + // Use a ReplaySubject to share previous values with subscribers + // and pump new values into the `paramMap` observable + private subject = new ReplaySubject(); + + constructor(initialParams?: Params) { + this.setParamMap(initialParams); + } + + /** The mock paramMap observable */ + readonly paramMap = this.subject.asObservable(); + + /** Set the paramMap observables's next value */ + setParamMap(params?: Params) { + this.subject.next(convertToParamMap(params)); + }; +} +// #enddocregion activated-route-stub diff --git a/aio/content/examples/testing/src/testing/async-observable-helpers.ts b/aio/content/examples/testing/src/testing/async-observable-helpers.ts new file mode 100644 index 0000000000..3282bcbe37 --- /dev/null +++ b/aio/content/examples/testing/src/testing/async-observable-helpers.ts @@ -0,0 +1,30 @@ +/* +* Mock async observables that return asynchronously. +* The observable either emits once and completes or errors. +* +* Must call `tick()` when test with `fakeAsync()`. +* +* THE FOLLOWING DON'T WORK +* Using `of().delay()` triggers TestBed errors; +* see https://github.com/angular/angular/issues/10127 . +* +* Using `asap` scheduler - as in `of(value, asap)` - doesn't work either. +*/ +import { Observable } from 'rxjs/Observable'; +import { defer } from 'rxjs/observable/defer'; + +// #docregion async-data +/** Create async observable that emits-once and completes + * after a JS engine turn */ +export function asyncData (data: T) { + return defer(() => Promise.resolve(data)); +} +// #enddocregion async-data + +// #docregion async-error +/** Create async observable error that errors + * after a JS engine turn */ +export function asyncError (errorObject: any) { + return defer(() => Promise.reject(errorObject)); +} +// #enddocregion async-error diff --git a/aio/content/examples/testing/src/testing/global-jasmine.ts b/aio/content/examples/testing/src/testing/global-jasmine.ts new file mode 100644 index 0000000000..560ff97d66 --- /dev/null +++ b/aio/content/examples/testing/src/testing/global-jasmine.ts @@ -0,0 +1,3 @@ +import jasmineRequire from 'jasmine-core/lib/jasmine-core/jasmine.js'; + +window['jasmineRequire'] = jasmineRequire; diff --git a/aio/content/examples/testing/src/testing/index.ts b/aio/content/examples/testing/src/testing/index.ts index e3de5164ca..1fddaf8c4d 100644 --- a/aio/content/examples/testing/src/testing/index.ts +++ b/aio/content/examples/testing/src/testing/index.ts @@ -1,8 +1,10 @@ import { DebugElement } from '@angular/core'; import { tick, ComponentFixture } from '@angular/core/testing'; +export * from './async-observable-helpers'; +export * from './activated-route-stub'; export * from './jasmine-matchers'; -export * from './router-stubs'; +export * from './router-link-directive-stub'; ///// Short utilities ///// diff --git a/aio/content/examples/testing/src/testing/router-link-directive-stub.ts b/aio/content/examples/testing/src/testing/router-link-directive-stub.ts new file mode 100644 index 0000000000..761529d726 --- /dev/null +++ b/aio/content/examples/testing/src/testing/router-link-directive-stub.ts @@ -0,0 +1,30 @@ +import { Directive, Input } from '@angular/core'; + +// export for convenience. +export { RouterLink} from '@angular/router'; + +/* tslint:disable:directive-class-suffix */ +// #docregion router-link +@Directive({ + selector: '[routerLink]', + host: { '(click)': 'onClick()' } +}) +export class RouterLinkDirectiveStub { + @Input('routerLink') linkParams: any; + navigatedTo: any = null; + + onClick() { + this.navigatedTo = this.linkParams; + } +} +// #enddocregion router-link + +/// Dummy module to satisfy Angular Language service. Never used. +import { NgModule } from '@angular/core'; + +@NgModule({ + declarations: [ + RouterLinkDirectiveStub + ] +}) +export class RouterStubsModule {} diff --git a/aio/content/examples/testing/src/testing/router-stubs.ts b/aio/content/examples/testing/src/testing/router-stubs.ts deleted file mode 100644 index 880302c7be..0000000000 --- a/aio/content/examples/testing/src/testing/router-stubs.ts +++ /dev/null @@ -1,58 +0,0 @@ - // export for convenience. -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()' - } -}) -export class RouterLinkStubDirective { - @Input('routerLink') linkParams: any; - navigatedTo: any = null; - - onClick() { - this.navigatedTo = this.linkParams; - } -} -// #enddocregion router-link - -@Component({selector: 'router-outlet', template: ''}) -export class RouterOutletStubComponent { } - -@Injectable() -export class RouterStub { - navigate(commands: any[], extras?: NavigationExtras) { } -} - - -// Only implements params and part of snapshot.paramMap -// #docregion activated-route-stub -import { BehaviorSubject } from 'rxjs/BehaviorSubject'; -import { convertToParamMap, ParamMap } from '@angular/router'; - -@Injectable() -export class ActivatedRouteStub { - - // ActivatedRoute.paramMap is Observable - private subject = new BehaviorSubject(convertToParamMap(this.testParamMap)); - paramMap = this.subject.asObservable(); - - // Test parameters - private _testParamMap: ParamMap; - get testParamMap() { return this._testParamMap; } - set testParamMap(params: {}) { - this._testParamMap = convertToParamMap(params); - this.subject.next(this._testParamMap); - } - - // ActivatedRoute.snapshot.paramMap - get snapshot() { - return { paramMap: this.testParamMap }; - } -} -// #enddocregion activated-route-stub diff --git a/aio/content/examples/testing/src/app-specs.html b/aio/content/examples/testing/src/tests.html similarity index 75% rename from aio/content/examples/testing/src/app-specs.html rename to aio/content/examples/testing/src/tests.html index 7b7292ed7c..c988c457cb 100644 --- a/aio/content/examples/testing/src/app-specs.html +++ b/aio/content/examples/testing/src/tests.html @@ -31,23 +31,31 @@ diff --git a/aio/content/examples/testing/src/tests.sb.ts b/aio/content/examples/testing/src/tests.sb.ts new file mode 100644 index 0000000000..3f1c8fe61a --- /dev/null +++ b/aio/content/examples/testing/src/tests.sb.ts @@ -0,0 +1,26 @@ +// Import spec files individually for Stackblitz +import 'app/about/about.component.spec.ts'; +import 'app/app-initial.component.spec.ts'; +import 'app/app.component.router.spec.ts'; +import 'app/app.component.spec.ts'; +import 'app/banner/banner-initial.component.spec.ts'; +import 'app/banner/banner.component.spec.ts'; +import 'app/banner/banner.component.detect-changes.spec.ts'; +import 'app/banner/banner-external.component.spec.ts'; +import 'app/dashboard/dashboard-hero.component.spec.ts'; +import 'app/dashboard/dashboard.component.no-testbed.spec.ts'; +import 'app/dashboard/dashboard.component.spec.ts'; +import 'app/demo/async-helper.spec.ts'; +import 'app/demo/demo.spec.ts'; +import 'app/demo/demo.testbed.spec.ts'; +import 'app/hero/hero-detail.component.no-testbed.spec.ts'; +import 'app/hero/hero-detail.component.spec.ts'; +import 'app/hero/hero-list.component.spec.ts'; +import 'app/model/hero.service.spec.ts'; +import 'app/model/http-hero.service.spec.ts'; +import 'app/model/testing/http-client.spec.ts'; +import 'app/shared/highlight.directive.spec.ts'; +import 'app/shared/title-case.pipe.spec.ts'; +import 'app/twain/twain.component.spec.ts'; +import 'app/twain/twain.component.marbles.spec.ts'; +import 'app/welcome/welcome.component.spec.ts'; diff --git a/aio/content/examples/testing/stackblitz.json b/aio/content/examples/testing/stackblitz.json new file mode 100644 index 0000000000..d05e3dbb1a --- /dev/null +++ b/aio/content/examples/testing/stackblitz.json @@ -0,0 +1,19 @@ +{ + "description": "Heroes Test App", + "files":[ + "src/styles.css", + + "src/app/**/*.css", + "src/app/**/*.html", + "src/app/**/*.ts", + + "!src/app/bag/*.*", + + "!src/test.ts", + + "src/test.css", + "src/main.ts", + "src/index.html" + ], + "tags": ["testing"] +} diff --git a/aio/content/examples/toh-pt0/plnkr.json b/aio/content/examples/toh-pt0/stackblitz.json similarity index 87% rename from aio/content/examples/toh-pt0/plnkr.json rename to aio/content/examples/toh-pt0/stackblitz.json index 3caa575acd..c2cf48171f 100644 --- a/aio/content/examples/toh-pt0/plnkr.json +++ b/aio/content/examples/toh-pt0/stackblitz.json @@ -1,6 +1,5 @@ { "description": "Tour of Heroes: Part 0", - "basePath": "src/", "files":[ "!**/*.d.ts", "!**/*.js", diff --git a/aio/content/examples/toh-pt1/plnkr.json b/aio/content/examples/toh-pt1/stackblitz.json similarity index 89% rename from aio/content/examples/toh-pt1/plnkr.json rename to aio/content/examples/toh-pt1/stackblitz.json index 5ac3b2d3ce..880b28fae6 100644 --- a/aio/content/examples/toh-pt1/plnkr.json +++ b/aio/content/examples/toh-pt1/stackblitz.json @@ -1,6 +1,5 @@ { "description": "Tour of Heroes: Part 1", - "basePath": "src/", "files":[ "!**/*.d.ts", "!**/*.js", diff --git a/aio/content/examples/toh-pt2/plnkr.json b/aio/content/examples/toh-pt2/stackblitz.json similarity index 87% rename from aio/content/examples/toh-pt2/plnkr.json rename to aio/content/examples/toh-pt2/stackblitz.json index 08c7b9581a..8f3cefdaeb 100644 --- a/aio/content/examples/toh-pt2/plnkr.json +++ b/aio/content/examples/toh-pt2/stackblitz.json @@ -1,6 +1,5 @@ { "description": "Tour of Heroes: Part 2", - "basePath": "src/", "files":[ "!**/*.d.ts", "!**/*.js", diff --git a/aio/content/examples/toh-pt3/plnkr.json b/aio/content/examples/toh-pt3/stackblitz.json similarity index 87% rename from aio/content/examples/toh-pt3/plnkr.json rename to aio/content/examples/toh-pt3/stackblitz.json index 829715877e..c4ef78dc9f 100644 --- a/aio/content/examples/toh-pt3/plnkr.json +++ b/aio/content/examples/toh-pt3/stackblitz.json @@ -1,6 +1,5 @@ { "description": "Tour of Heroes: Part 3", - "basePath": "src/", "files":[ "!**/*.d.ts", "!**/*.js", diff --git a/aio/content/examples/toh-pt4/src/app/app.module.ts b/aio/content/examples/toh-pt4/src/app/app.module.ts index 70b26976da..f3cc34faff 100644 --- a/aio/content/examples/toh-pt4/src/app/app.module.ts +++ b/aio/content/examples/toh-pt4/src/app/app.module.ts @@ -21,7 +21,14 @@ import { MessagesComponent } from './messages/messages.component'; FormsModule ], // #docregion providers - providers: [ HeroService, MessageService ], + // #docregion providers-heroservice + providers: [ + HeroService, + // #enddocregion providers-heroservice + MessageService + // #docregion providers-heroservice + ], + // #enddocregion providers-heroservice // #enddocregion providers bootstrap: [ AppComponent ] }) diff --git a/aio/content/examples/toh-pt4/plnkr.json b/aio/content/examples/toh-pt4/stackblitz.json similarity index 87% rename from aio/content/examples/toh-pt4/plnkr.json rename to aio/content/examples/toh-pt4/stackblitz.json index 95987d95ce..1b3e442ac0 100644 --- a/aio/content/examples/toh-pt4/plnkr.json +++ b/aio/content/examples/toh-pt4/stackblitz.json @@ -1,6 +1,5 @@ { "description": "Tour of Heroes: Part 4", - "basePath": "src/", "files":[ "!**/*.d.ts", "!**/*.js", diff --git a/aio/content/examples/toh-pt5/src/app/messages/messages.component.html b/aio/content/examples/toh-pt5/src/app/messages/messages.component.html index 1df7dfd989..8e86f5247d 100644 --- a/aio/content/examples/toh-pt5/src/app/messages/messages.component.html +++ b/aio/content/examples/toh-pt5/src/app/messages/messages.component.html @@ -3,6 +3,6 @@ Messages
-{{message}}+{{message}}
diff --git a/aio/content/guide/aot-compiler.md b/aio/content/guide/aot-compiler.md
index 05ed37395e..1ca15ebf88 100644
--- a/aio/content/guide/aot-compiler.md
+++ b/aio/content/guide/aot-compiler.md
@@ -4,7 +4,7 @@ The Angular Ahead-of-Time (AOT) compiler converts your Angular HTML and TypeScri
Angular 的“预先（AOT）编译器”会在构建期间把 Angular 应用的 HTML 和 TypeScript 代码编译成高效的 JavaScript 代码，之后浏览器就可以下载并快速运行这些代码。
-This guide explains how to build with the AOT compiler and how to write Angular metadata that AOT can compile.
+This guide explains how to build with the AOT compiler using different compiler options and how to write Angular metadata that AOT can compile.
本章描述了如何使用 AOT 编译器，以及如何书写能被 AOT 编译的 Angular 元数据。
@@ -116,6 +116,182 @@ there are fewer opportunities for injection attacks.
AOT编译远在HTML模版和组件被服务到客户端之前，将它们编译到JavaScript文件。
没有模版可以阅读，没有高风险客户端HTML或JavaScript可利用，所以注入攻击的机会较少。
+{@a compiler-options}
+
+## Angular Compiler Options
+
+You can control your app compilation by providing template compiler options in the `tsconfig.json` file along with the options supplied to the TypeScript compiler. The template compiler options are specified as members of
+`"angularCompilerOptions"` object as shown below:
+
+```json
+{
+ "compilerOptions": {
+ "experimentalDecorators": true,
+ ...
+ },
+ "angularCompilerOptions": {
+ "fullTemplateTypeCheck": true,
+ "preserveWhitespaces": true,
+ ...
+ }
+}
+```
+
+### *skipMetadataEmit*
+
+This option tells the compiler not to produce `.metadata.json` files.
+The option is `false` by default.
+
+`.metadata.json` files contain infomration needed by the template compiler from a `.ts`
+file that is not included in the `.d.ts` file produced by the TypeScript compiler. This information contains,
+for example, the content of annotations (such as a component's template) which TypeScript
+emits to the `.js` file but not to the `.d.ts` file.
+
+This option should be set to `true` if using TypeScript's `--outFile` option, as the metadata files
+are not valid for this style of TypeScript output. It is not recommeded to use `--outFile` with
+Angular. Use a bundler, such as [webpack](https://webpack.js.org/), instead.
+
+This option can also be set to `true` when using factory summaries as the factory summaries
+include a copy of the information that is in the `.metadata.json` file.
+
+### *strictMetadataEmit*
+
+This option tells the template compiler to report an error to the `.metadata.json`
+file if `"skipMetadataEmit"` is `false` . This option is `false` by default. This should only be used when `"skipMetadataEmit"` is `false` and `"skipTemplateCodeGen"` is `true`.
+
+It is intended to validate the `.metadata.json` files emitted for bundling with an `npm` package. The validation is overly strict and can emit errors for metadata that would never produce an error when used by the template compiler. You can choose to suppress the error emitted by this option for an exported symbol by including `@dynamic` in the comment documenting the symbol.
+
+It is valid for `.metadata.json` files to contain errors. The template compiler reports these errors
+if the metadata is used to determine the contents of an annotation. The metadata
+collector cannot predict the symbols that are designed to use in an annotation, so it will preemptively
+include error nodes in the metadata for the exported symbols. The template compiler can then use the error
+nodes to report an error if these symbols are used. If the client of a library intends to use a symbol in an annotation, the template compiler will not normally report
+this until the client uses the symbol. This option allows detecting these errors during the build phase of
+the library and is used, for example, in producing Angular libraries themselves.
+
+### *skipTemplateCodegen*
+
+This option tells the compiler to suppress emitting `.ngfactory.js` and `.ngstyle.js` files. When set,
+this turns off most of the template compiler and disables reporting template diagnostics.
+This option can be used to instruct the
+template compiler to produce `.metadata.json` files for distribution with an `npm` package while
+avoiding the production of `.ngfactory.js` and `.ngstyle.js` files that cannot be distributed to
+`npm`.
+
+### *strictInjectionParameters*
+
+When set to `true`, this options tells the compiler to report an error for a parameter supplied
+whose injection type cannot be determined. When this value option is not provided or is `false`, constructor parameters of classes marked with `@Injectable` whose type cannot be resolved will
+produce a warning.
+
+*Note*: It is recommended to change this option explicitly to `true` as this option will default to `true` in the future.
+
+### *flatModuleOutFile*
+
+When set to `true`, this option tells the template compiler to generate a flat module
+index of the given file name and the corresponding flat module metadata. Use this option when creating
+flat modules that are packaged similarly to `@angular/core` and `@angular/common`. When this option
+is used, the `package.json` for the library should refer
+to the generated flat module index instead of the library index file. With this
+option only one `.metadata.json` file is produced that contains all the metadata necessary
+for symbols exported from the library index. In the generated `.ngfactory.js` files, the flat
+module index is used to import symbols that includes both the public API from the library index
+as well as shrowded internal symbols.
+
+By default the `.ts` file supplied in the `files` field is assumed to be library index.
+If more than one `.ts` file is specified, `libraryIndex` is used to select the file to use.
+If more than one `.ts` file is supplied without a `libraryIndex`, an error is produced. A flat module
+index `.d.ts` and `.js` will be created with the given `flatModuleOutFile` name in the same
+location as the library index `.d.ts` file. For example, if a library uses
+`public_api.ts` file as the library index of the module, the `tsconfig.json` `files` field
+would be `["public_api.ts"]`. The `flatModuleOutFile` options could then be set to, for
+example `"index.js"`, which produces `index.d.ts` and `index.metadata.json` files. The
+library's `package.json`'s `module` field would be `"index.js"` and the `typings` field
+would be `"index.d.ts"`.
+
+### *flatModuleId*
+
+This option specifies the preferred module id to use for importing a flat module.
+References generated by the template compiler will use this module name when importing symbols
+from the flat module.
+This is only meaningful when `flatModuleOutFile` is also supplied. Otherwise the compiler ignores
+this option.
+
+### *generateCodeForLibraries*
+
+This option tells the template compiler to generate factory files (`.ngfactory.js` and `.ngstyle.js`)
+for `.d.ts` files with a corresponding `.metadata.json` file. This option defaults to
+`true`. When this option is `false`, factory files are generated only for `.ts` files.
+
+This option should be set to `false` when using factory summaries.
+
+### *fullTemplateTypeCheck*
+
+This option tells the compiler to enable the [binding expression validation](#binding-expresion-validation)
+phase of the template compiler which uses TypeScript to validate binding expressions.
+
+This option is `false` by default.
+
+*Note*: It is recommended to set this to `true` as this option will default to `true` in the future.
+
+### *annotateForClosureCompiler*
+
+This option tells the compiler to use [Tsickle](https://github.com/angular/tsickle) to annotate the emitted
+JavaScript with [JsDoc](http://usejsdoc.org/) comments needed by the
+[Closure Compiler](https://github.com/google/closure-compiler). This option defaults to `false`.
+
+### *annotationsAs*
+
+Use this option to modify how the Angular specific annotations are emitted to improve tree-shaking. Non-Angular
+annotations and decorators are unnaffected. Default is `static fields`.
+
+value | description
+----------------|-------------------------------------------------------------
+`decorators` | Leave the Decorators in-place. This makes compilation faster. TypeScript will emit calls to the __decorate helper. Use `--emitDecoratorMetadata` for runtime reflection. However, the resulting code will not properly tree-shake.
+`static fields` | Replace decorators with a static field in the class. Allows advanced tree-shakers like [Closure Compiler](https://github.com/google/closure-compiler) to remove unused classes.
+
+### *trace*
+
+This tells the compiler to print extra information while compiling templates.
+
+### *enableLegacyTemplate*
+
+The use of `` element was deprecated starting in Angular 4.0 in favor of using
+`` to avoid colliding with the DOM's element of the same name. Setting this option to
+`true` enables the use of the deprecated `` element . This option
+is `false` by default. This option might be required by some third-party Angular libraries.
+
+### *disableExpressionLowering*
+
+The Angular template compiler transforms code that is used, or could be used, in an annotation
+to allow it to be imported from template factory modules. See
+[metadata rewriting](#metadata-rewriting) for more information.
+
+Setting this option to `false` disables this rewriting, requiring the rewriting to be
+done manually.
+
+### *preserveWhitespaces*
+
+This option tells the compiler whether to remove blank text nodes from compiled templates.
+As of v6, this option is `false` by default, which results in smaller emitted template factory modules.
+
+### *allowEmptyCodegenFiles*
+
+Tells the compiler to generate all the possible generated files even if they are empty. This option is
+`false` by default. This is an option used by `bazel` build rules and is needed to simplify
+how `bazel` rules track file dependencies. It is not recommended to use this option outside of the `bazel`
+rules.
+
+ ### *enableIvy*
+
+ Tells the compiler to generate definitions using the Render3 style code generation. This option defaults to `false`.
+
+ Not all features are supported with this option enabled. It is only supported
+ for experimentation and testing of Render3 style code generation.
+
+ *Note*: Is it not recommended to use this option as it is not yet feature complete with the Render2 code generation.
+
+
## Angular Metadata and AOT
## Angular 元数据与 AOT
@@ -278,7 +454,7 @@ and [arrow functions](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Re
Consider the following component decorator:
-```ts
+```typescript
@Component({
...
providers: [{provide: server, useFactory: () => new Server()}]
@@ -292,7 +468,7 @@ When the compiler later interprets this node, it reports an error that invites y
You can fix the error by converting to this:
-```ts
+```typescript
export function serverFactory() {
return new Server();
}
@@ -305,6 +481,7 @@ export function serverFactory() {
Beginning in version 5, the compiler automatically performs this rewritting while emitting the `.js` file.
+{@a function-calls}
### Limited function calls
The _collector_ can represent a function call or object creation with `new` as long as the syntax is valid. The _collector_ only cares about proper syntax.
@@ -330,7 +507,7 @@ module-local `const` declarations and initialized `var` and `let` declarations,
Consider the following component definition:
-```ts
+```typescript
const template = '(value: T): T[] {
return [value];
}
@@ -481,7 +658,7 @@ You can call the `wrapInArray` in a metadata definition because it returns the v
You might use `wrapInArray()` like this:
-```TypeScript
+```typescript
@NgModule({
declarations: wrapInArray(TypicalComponent)
})
@@ -490,7 +667,7 @@ export class TypicalModule {}
The compiler treats this usage as if you had written:
-```TypeScript
+```typescript
@NgModule({
declarations: [TypicalComponent]
})
@@ -502,7 +679,9 @@ function; it can only contain a single `return` statement.
The Angular [`RouterModule`](api/router/RouterModule) exports two macro static methods, `forRoot` and `forChild`, to help declare root and child routes.
Review the [source code](https://github.com/angular/angular/blob/master/packages/router/src/router_module.ts#L139 "RouterModule.forRoot source code")
-for these methods to see how macros can simplify configuration of complex [NgModules](guide/ngmodule).
+for these methods to see how macros can simplify configuration of complex [NgModules](guide/ngmodules).
+
+{@a metadata-rewriting}
### Metadata rewriting
@@ -513,7 +692,7 @@ the compiler doesn't need to know the expression's value—it just needs to
You might write something like:
-```ts
+```typescript
class TypicalServer {
}
@@ -528,7 +707,7 @@ Without rewriting, this would be invalid because lambdas are not supported and `
To allow this, the compiler automatically rewrites this to something like:
-```ts
+```typescript
class TypicalServer {
}
@@ -1053,7 +1232,155 @@ This error can occur if you use an expression in the `extends` clause of a class
Chuck: After reviewing your PR comment I'm still at a loss. See [comment there](https://github.com/angular/angular/pull/17712#discussion_r132025495).
-->
+{@a binding-expresion-validation}
+ ## Phase 3: binding expression validation
+
+ In the validation phase, the Angular template compiler uses the TypeScript compiler to validate the
+ binding expressions in templates. Enable this phase explicity by adding the compiler
+ option `"fullTemplateTypeCheck"` in the `"angularCompilerOptions"` of the project's `tsconfig.json` (see
+ [Angular Compiler Options](#compiler-options)).
+
+ Template validation produces error messages when a type error is detected in a template binding
+ expression, similar to how type errors are reported by the TypeScript compiler against code in a `.ts`
+ file.
+
+ For example, consider the following component:
+
+ ```typescript
+ @Component({
+ selector: 'my-component',
+ template: '{{person.addresss.street}}'
+ })
+ class MyComponent {
+ person?: Person;
+ }
+ ```
+
+ This will produce the following error:
+
+ ```
+ my.component.ts.MyComponent.html(1,1): : Property 'addresss' does not exist on type 'Person'. Did you mean 'address'?
+ ```
+
+ The file name reported in the error message, `my.component.ts.MyComponent.html`, is a synthetic file
+ generated by the template compiler that holds contents of the `MyComponent` class template.
+ Compiler never writes this file to disk. The line and column numbers are relative to the template string
+ in the `@Component` annotation of the class, `MyComponent` in this case. If a component uses
+ `templateUrl` instead of `template`, the errors are reported in the HTML file refereneced by the
+ `templateUrl` instead of a synthetic file.
+
+ The error location is the beginning of the text node that contains the interpolation expression with
+ the error. If the error is in an attribute binding such as `[value]="person.address.street"`, the error
+ location is the location of the attribute that contains the error.
+
+ The validation uses the TypeScript type checker and the options supplied to the TypeScript compiler to control
+ how detailed the type validation is. For example, if the `strictTypeChecks` is specified, the error ```my.component.ts.MyComponent.html(1,1): : Object is possibly 'undefined'``` is reported as well as the above error message.
+
+ ### Type narrowing
+
+ The expression used in an `ngIf` directive is used to narrow type unions in the Angular
+ template compiler, the same way the `if` expression does in TypeScript. For example, to avoid
+ `Object is possibly 'undefined'` error in the template above, modify it to only emit the
+ interpolation if the value of `person` is initialized as shown below:
+
+ ```typescript
+ @Component({
+ selector: 'my-component',
+ template: ' {{person.addresss.street}} '
+ })
+ class MyComponent {
+ person?: Person;
+ }
+ ```
+
+ Using `*ngIf` allows the TypeScript compiler to infer that the `person` used in the
+ binding expression will never be `undefined`.
+
+ #### Custom `ngIf` like directives
+
+ Directives that behave like `*ngIf` can declare that they want the same treatment by including
+ a static member marker that is a signal to the template compiler to treat them
+ like `*ngIf`. This static member for `*ngIf` is:
+
+ ```typescript
+ public static ngIfUseIfTypeGuard: void;
+ ```
+
+ This declares that the input property `ngIf` of the `NgIf` directive should be treated as a
+ guard to the use of its template, implying that the template will only be instantiated if
+ the `ngIf` input property is true.
+
+
+ ### Non-null type assertion operator
+
+ Use the [non-null type assertion operator](guide/template-syntax#non-null-assertion-operator)
+ to suppress the `Object is possibly 'undefined'` error when it is incovienent to use
+ `*ngIf` or when some constraint in the component ensures that the expression is always
+ non-null when the binding expression is interpolated.
+
+ In the following example, the `person` and `address` properties are always set together,
+ implying that `address` is always non-null if `person` is non-null. There is no convenient
+ way to describe this constraint to TypeScript and the template compiler, but the error
+ is suppressed in the example by using `address!.street`.
+
+ ```typescript
+ @Component({
+ selector: 'my-component',
+ template: ' {{person.name}} lives on {{address!.street}} '
+ })
+ class MyComponent {
+ person?: Person;
+ address?: Address;
+
+ setData(person: Person, address: Address) {
+ this.person = person;
+ this.address = address;
+ }
+ }
+ ```
+
+ The non-null assertion operator should be used sparingly as refactoring of the component
+ might break this constraint.
+
+ In this example it is recommended to include the checking of `address`
+ in the `*ngIf`as shown below:
+
+ ```typescript
+ @Component({
+ selector: 'my-component',
+ template: ' {{person.name}} lives on {{address.street}} '
+ })
+ class MyComponent {
+ person?: Person;
+ address?: Address;
+
+ setData(person: Person, address: Address) {
+ this.person = person;
+ this.address = address;
+ }
+ }
+ ```
+
+ ### Disabling type checking using `$any()`
+
+ Disable checking of a binding expression by surrounding the expression
+ in a call to the [`$any()` cast pseudo-function](guide/template-syntax).
+ The compiler treats it as a cast to the `any` type just like in TypeScript when a ``
+ or `as any` cast is used.
+
+ In the following example, the error `Property addresss does not exist` is suppressed
+ by casting `person` to the `any` type.
+
+ ```typescript
+ @Component({
+ selector: 'my-component',
+ template: '{{$any(person).addresss.street}}'
+ })
+ class MyComponent {
+ person?: Person;
+ }
+ ```
## Summary
* What the AOT compiler does and why it is important.
@@ -1062,3 +1389,4 @@ Chuck: After reviewing your PR comment I'm still at a loss. See [comment there](
* Other restrictions on metadata definition.
* Macro-functions and macro-static methods.
* Compiler errors related to metadata.
+* Validation of binding expressions
diff --git a/aio/content/guide/api-page-class.md b/aio/content/guide/api-page-class.md
new file mode 100644
index 0000000000..989bd0f327
--- /dev/null
+++ b/aio/content/guide/api-page-class.md
@@ -0,0 +1,175 @@
+
+
+
+
+
@@ -327,12 +328,12 @@ template for our `HeroListComponent`:
-Although this template uses typical HTML elements like `{{hero.name}}
';
@Component({
@@ -347,7 +524,7 @@ The compiler could not refer to the `template` constant because it isn't exporte
But the _collector_ can _fold_ the `template` constant into the metadata definition by inlining its contents.
The effect is the same as if you had written:
-```TypeScript
+```typescript
@Component({
selector: 'app-hero',
template: '{{hero.name}}
'
@@ -361,7 +538,7 @@ There is no longer a reference to `template` and, therefore, nothing to trouble
You can take this example a step further by including the `template` constant in another expression:
-```TypeScript
+```typescript
const template = '{{hero.name}}
';
@Component({
@@ -419,7 +596,7 @@ Decorated component class members must be public. You cannot make an `@Input()`
Data bound properties must also be public.
-```TypeScript
+```typescript
// BAD CODE - title is private
@Component({
selector: 'app-root',
@@ -471,7 +648,7 @@ methods that return an expression.
For example, consider the following function:
-```TypeScript
+```typescript
export function wrapInArrayClass Name
+Class description goes here. This is a short and to the point one or two sentence description that easily introduces the reader to the class.
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/aio/content/guide/architecture.md b/aio/content/guide/architecture.md
index 95f0b1e257..fc60aa9b19 100644
--- a/aio/content/guide/architecture.md
+++ b/aio/content/guide/architecture.md
@@ -62,7 +62,8 @@ Angular apps are modular and Angular has its own modularity system called _NgMod
Angular 应用是模块化的，并且 Angular 有自己的模块系统，它被称为 _Angular 模块_或 _NgModules_。
NgModules are a big deal.
-This page introduces modules; the [NgModules](guide/ngmodule) page covers them in depth.
+This page introduces modules; the [NgModules](guide/ngmodules) pages
+relating to NgModules covers them in detail.
_Angular 模块_很重要。这里只是简单介绍，在 [Angular 模块](guide/ngmodule)中会做深入讲解。
@@ -242,7 +243,7 @@ Hang in there. The confusion yields to clarity with time and experience.
-Learn more from the [NgModules](guide/ngmodule) page.
+Learn more from the [NgModules](guide/ngmodules) page.
更多信息，见 [Angular 模块](guide/ngmodule)。
Overview
+
+ class Compiler {
+ compileModuleSync<T>(moduleType: Type<T>): NgModuleFactory<T>
+ compileModuleAsync<T>(moduleType: Type<T>): Promise<NgModuleFactory<T>>
+ compileModuleAndAllComponentsSync<T>(moduleType: Type<T>): ModuleWithComponentFactories<T>
+ compileModuleAndAllComponentsAsync<T>(moduleType: Type<T>): Promise<ModuleWithComponentFactories<T>>
+ clearCache(): void
+ clearCacheFor(type: Type<any>)
+ }
+ Description
+The longer class description goes here which can include multiple paragraphs.
+ Bacon ipsum dolor amet pork belly capicola sirloin venison alcatra ground round ham hock jowl turkey picanha bresaola pancetta brisket chicken fatback. Burgdoggen kevin salami jowl shoulder jerky leberkas meatball. Ham hock picanha burgdoggen pork belly rump bacon cupim. Bacon kielbasa sirloin shank strip steak ground round. Bresaola cow salami meatloaf pork chop leberkas flank turducken biltong meatball chuck pork tri-tip chicken. Ribeye corned beef shoulder, meatloaf strip steak jerky porchetta capicola alcatra ham. +Subclasses
+ +See Also
+ +Constructor
+
+ constructor(element: any, keyframes: {
+ [key: string]: string | number;
+ }[], duration: number, delay: number, easing: string, previousPlayers: any[])
+ Properties
+| Property | +Type | +Description | +
|---|---|---|
+ Property1
+ |
+ + | Description goes here | +
+ Property2
+ |
+ Type | +Description goes here | +
+ Property3
+ |
+ Type | +Description goes here | +
Methods
+| Method1Name( ) | +
|---|
|
+ Description goes here ++ Bacon ipsum dolor amet pork belly capicola sirloin venison alcatra ground round ham hock jowl turkey picanha bresaola pancetta brisket chicken fatback. Burgdoggen kevin salami jowl shoulder jerky leberkas meatball. Ham hock picanha burgdoggen pork belly rump bacon cupim. Bacon kielbasa sirloin shank strip steak ground round. Bresaola cow salami meatloaf pork chop leberkas flank turducken biltong meatball chuck pork tri-tip chicken. Ribeye corned beef shoulder, meatloaf strip steak jerky porchetta capicola alcatra ham. + |
+
| Method2Name( ) | +||||
|---|---|---|---|---|
|
+ Description goes here ++ Declaration+
+
+ Parameters+Returns+Returns information and results goes here. +Errors+Error information goes here ++ Further details provided as needed. Bacon ipsum dolor amet pork belly capicola sirloin venison alcatra ground round ham hock jowl turkey picanha bresaola pancetta brisket chicken fatback. Burgdoggen kevin salami jowl shoulder jerky leberkas meatball. + Overloads+
+ Example: Descriptive Title of Method Example+Bacon ipsum dolor amet pork belly capicola sirloin venison alcatra ground round ham hock jowl turkey picanha bresaola pancetta brisket chicken fatback. Burgdoggen kevin salami jowl shoulder jerky leberkas meatball. Ham hock picanha burgdoggen pork belly rump bacon cupim. Bacon kielbasa sirloin shank strip steak ground round. Bresaola cow salami meatloaf pork chop leberkas flank turducken biltong meatball chuck pork tri-tip chicken. Ribeye corned beef shoulder, meatloaf strip steak jerky porchetta capicola alcatra ham. + |
+
Example: Descriptive Title of Combined Example Goes Here
+Intro description text about what the example is and how it can be used.
+
+ constructor(element: any, keyframes: {
+ [key: string]: string | number;
+ }[], duration: number, delay: number, easing: string, previousPlayers: any[])
+ Further explanation provided as needed. Bacon ipsum dolor amet pork belly capicola sirloin venison alcatra ground round ham hock jowl turkey picanha bresaola pancetta brisket chicken fatback. Burgdoggen kevin salami jowl shoulder jerky leberkas meatball.
+` and `
`, it also has some differences. Code like `*ngFor`, `{{hero.name}}`, `(click)`, `[hero]`, and ` `, it also has some differences. Code like `*ngFor`, `{{hero.name}}`, `(click)`, `[hero]`, and ` `这样的典型的 HTML 元素，还能使用其它元素。
例如，像`*ngFor`、`{{hero.name}}`、`(click)`、`[hero]`和`
+ latest
+
+ 最新版
+
- latest
-
- 最新版
-
- latest
-
- 最新版
- If AnimationBuilder is used then the polyfill will enable scrubbing
+ support for IE/Edge and Safari (Chrome and Firefox support this natively). 如果使用了AnimationBuilder，那么填充库将为 IE/Edge 和 Safari 启用擦除（scrubbing）支持（Chrome 和 Firefox 原生支持此特性） [NgClass](api/common/NgClass) on SVG elements [NgClass](api/common/NgClass)
+
+ on SVG elements 在 SVG 元素上应用 [NgClass](api/common/NgClass) [Http](guide/http) when sending and receiving binary data [Http](guide/http)
+
+ when sending and receiving binary data 用 [Http](guide/http) 发送和接收二进制数据 根据 map 中的 value 是否为真，来决定该元素上是否出现与 name 对应的 CSS 类。右侧的表达式应该返回一个形如 Allows you to assign styles to an HTML element using CSS. You can use CSS directly, as in the first example, or you can call a method from the component.` and `
`和`
-Notice how `
-_Directives_ must be declared in [Angular Modules](guide/ngmodule) in the same manner as _components_.
+_Directives_ must be declared in [Angular Modules](guide/ngmodules) in the same manner as _components_.
和**组件**一样，这些**指令**也必须在[Angular模块](guide/ngmodule)中进行声明。
diff --git a/aio/content/guide/bootstrapping.md b/aio/content/guide/bootstrapping.md
index e05317bda6..046555b18d 100644
--- a/aio/content/guide/bootstrapping.md
+++ b/aio/content/guide/bootstrapping.md
@@ -1,280 +1,180 @@
# Bootstrapping
-# 启动过程
+#### Prerequisites
-An Angular Module (NgModule) class describes how the application parts fit together.
-Every application has at least one Angular Module, the _root_ module
-that you [bootstrap](#main) to launch the application.
-You can call the class anything you want. The conventional name is `AppModule`.
+A basic understanding of the following:
+* [JavaScript Modules vs. NgModules](guide/ngmodule-vs-jsmodule).
-Angular 模块类描述应用的部件是如何组合在一起的。
-每个应用都至少有一个 Angular 模块，也就是*根*模块，用来[引导](#main)并运行应用。
-你可以为它取任何名字。常规名字是`AppModule`。
+
-The [**Angular CLI**](https://cli.angular.io/) produces a new project with the following minimal `AppModule`.
-You evolve this module as your application grows.
+An NgModule describes how the application parts fit together.
+Every application has at least one Angular module, the _root_ module
+that you bootstrap to launch the application.
+By convention, it is usually called `AppModule`.
+If you use the CLI to generate an app, the default `AppModule` is as follows:
-[开发环境](guide/setup)讲解了如何使用下面这个最小的`AppModule`来创建一个新项目。
-这个模块随着应用的成长而演变。
-**Only _declarables_** — _components_, _directives_ and _pipes_ — belong in the `declarations` array.
-Do not put any other kind of class in `declarations`. Do _not_ declare `NgModule` classes. Do _not_ declare service classes. Do _not_ declare model classes.
+### Using directives with `@NgModule`
+
+Use the `declarations` array for directives.
+To use a directive, component, or pipe in a module, you must do a few things:
+
+1. Export it from the file where you wrote it.
+2. Import it into the appropriate module.
+3. Declare it in the `@NgModule` `declarations` array.
+
+
+Those three steps look like the following. In the file where you create your directive, export it.
+The following example, named `ItemDirective` is the default directive structure that the CLI generates in its own file, `item.directive.ts`:
+
+
{@a imports}
-### The _imports_ array
+## The `imports` array
-### _imports_ 数组
+The module's `imports` array appears exclusively in the `@NgModule` metadata object.
+It tells Angular about other NgModules that this particular module needs to function properly.
-Angular Modules are a way to consolidate features that belong together into discrete units.
-Many features of Angular itself are organized as Angular Modules.
-HTTP services are in the `HttpClientModule`. The router is in the `RouterModule`.
-Eventually you may create your own modules.
-
-Angular 模块把特性合并成离散单元的一种方式。
-Angular 自身的许多特性也是通过 Angular 模块组织的。
-HTTP 服务在`HttpClientModule`里。路由器在`RouterModule`中。
-最终，我们还可能创建自己的模块。
-
-Add a module to the `imports` array when the application requires its features.
-
-当应用需要模块的特性时，将其添加到`imports`数组中。
-
-_This_ application, like most applications, executes in a browser.
-Every application that executes in a browser needs the `BrowserModule` from `@angular/platform-browser`.
-So every such application includes the `BrowserModule` in its _root_ `AppModule`'s `imports` array.
-Other guide pages will tell you when you need to add additional modules to this array.
-
-_这个_应用和大多数其他应用一样，在浏览器中运行。
-每个浏览器中运行的应用都需要`@angular/platform-browser`里的`BrowserModule`。
-所以每个这样的应用都在其_根_`AppModule`的`imports`数组中包含`BrowserModule`。
-在需要添加额外模块到此数组时，其他指南和烹饪宝典页面会告诉你。
-
-
-
-
-
-**Only `@NgModule` classes** go in the `imports` array. Do not put any other kind of class in `imports`.
-
-`imports`数组中应该**只有`NgModule`类**。不要放置其它类型的类。
-
-
-
-
-The `import` statements at the top of the file and the NgModule's `imports` array
-are unrelated and have completely different jobs.
-
-不要将 Angular 模块的`imports`数组与文件顶部的`import`语句弄混淆了。它们的功能不同。
-
-The _JavaScript_ `import` statements give you access to symbols _exported_ by other files
-so you can reference them within _this_ file.
-You add `import` statements to almost every application file.
-They have nothing to do with Angular and Angular knows nothing about them.
-
-_JavaScript_ 的`import`声明允许你访问在其他文件中_导出_的符号，这样你可以在_当前_文件引用它们。
-我们会往几乎所有类型的应用中加入`import`语句。
-它们与 Angular 毫无关系，Angular 对它们也一无所知。
-
-The _module's_ `imports` array appears _exclusively_ in the `@NgModule` metadata object.
-It tells Angular about specific _other_ Angular Modules—all of them classes decorated
-with `@NgModule`—that the application needs to function properly.
-
-_模块_的`imports`数组是`@NgModule`元数据中*独有的*。它告诉 Angular 特定 Angular 模块的信息 — 用`@NgModule`装饰的类 — 应用需要它们来正常工作。
-
-
-
-{@a providers}
-
-### The _providers_ array
-
-### _providers_ 数组
-
-Angular apps rely on [_dependency injection (DI)_](guide/dependency-injection)
-to deliver services to various parts of the application.
-
-Angular 应用靠 [_依赖注入（DI）_](guide/dependency-injection) 机制为应用中的各个部件提供服务。
-
-Before DI can inject a service, it must create that service with the help of a _provider_.
-You can tell DI about a service's _provider_ in a number of ways.
-Among the most popular ways is to register the service in the root `ngModule.providers` array, which will make that service available _everywhere_.
-
-要想注入一个服务，就要先在**服务提供商（provider）**的帮助下创建这个服务。
-我们可以用多种方式告诉 DI 某个服务的提供商是谁。
-最常见的方式是在根模块的`ngModule.providers`数组中注册这个服务。这样一来，这个服务就**在哪里**都可以用了。
-
-For example, a data service provided in the `AppModule`s _providers_ can be injected into any
-component anywhere in the application.
-
-比如，在根模块 `AppModule` 的 _providers_ 数组中提供的数据服务可以被注入到该应用中任意地方的任意组件中。
+This list of modules are those that export components, directives, or pipes
+that the component templates in this module reference. In this case, the component is
+`AppComponent`, which references components, directives, or pipes in `BrowserModule`,
+`FormsModule`, or `HttpModule`.
+A component template can reference another component, directive,
+or pipe when the referenced class is declared in this module or
+the class was imported from another module.
You don't have any services to provide yet.
But you will create some before long and you may chose to provide many of them here.
-我们还没有提供任何服务，但是很快就会创建一些，而且可能也会选择在这里提供它们。
-
{@a bootstrap-array}
-### The _bootstrap_ array
+## The `providers` array
-### _bootstrap_ 数组
+The providers array is where you list the services the app needs. When
+you list services here, they are available app-wide. You can scope
+them when using feature modules and lazy loading. For more information, see
+[Providers](guide/providers).
-You launch the application by [_bootstrapping_](#main) the root `AppModule`.
-Among other things, the _bootstrapping_ process creates the component(s) listed in the `bootstrap` array
+## The `bootstrap` array
+
+The application launches by bootstrapping the root `AppModule`, which is
+also referred to as an `entryComponent`.
+Among other things, the bootstrapping process creates the component(s) listed in the `bootstrap` array
and inserts each one into the browser DOM.
-通过[_引导_](#main)根`AppModule`来启动应用。
-在启动过程中，其中一步是创建列在`bootstrap`数组的组件，
-并将它们每一个都插入到浏览器的DOM中。
-
Each bootstrapped component is the base of its own tree of components.
-Inserting a bootstrapped component usually triggers a cascade of component creations that fill out that tree.
+Inserting a bootstrapped component usually triggers a cascade of
+component creations that fill out that tree.
-每个被引导的组件都是它自己的组件树的根。
-插入一个被引导的组件通常触发一系列组件的创建并形成组件树。
+While you can put more than one component tree on a host web page,
+most applications have only one component tree and bootstrap a single root component.
-While you can put more than one component tree on a host web page, that's not typical.
-Most applications have only one component tree and they bootstrap a single _root_ component.
+This one root component is usually called `AppComponent` and is in the
+root module's `bootstrap` array.
-虽然你可以将多个组件树插入到宿主页面，但并不普遍。
-大多数应用只有一个组件树，它们引导单一_根_组件。
-You can call the one _root_ component anything you want but most developers call it `AppComponent`.
-
-你可以为这个_根_组件取任何名字，但是大多数程序员将其取名为`AppComponent`。
-
-Which brings us to the _bootstrapping_ process itself.
-
-下面让我们来看看*引导*过程本身。
-
-{@a main}
-
-## Bootstrap in _main.ts_
-
-## 在 _main.ts_ 中引导
-
-While there are many ways to bootstrap an application, most applications do so in the `src/main.ts` that is generated by the Angular CLI.
-
-虽然有很多方式来引导应用，不过大多数应用还是选择在 Angular CLI 生成的 `src/main.ts` 中进行引导。
-
-
-
+
+
+
+ Browser
+
+
+
+ Supported versions
+
+
+
+
+
+
+
Chrome
-
+
-
+
+
+
+
+
+
+
+
Firefox
-
+
-
+
+ latest
+
+
+
+
+
Edge
-
+
-
+
+ 2 most recent major versions
+
+
+
+
IE
-
-
-
- Safari
-
-
-
- iOS
-
-
-
- Android
-
-
-
+
+
+ 11
+
10
9
+
+
+
-
-
IE Mobile
-
-
-
-
-
+
-
-
-
-
-
-
-
-
- 14
-
-
11
-
-
- 10
-
-
-
- 10
-
-
-
- Nougat (7.0)
-
-
Marshmallow (6.0)
-
- 11
-
-
+
+ Safari
+
+
+ 2 most recent major versions
+
+
-
-
+
-
+ iOS
-
+ 2 most recent major versions
-
-
- 13
-
-
-
- 10
-
-
-
- 9
-
-
-
- 9
-
-
-
- Lollipop
-
-
(5.0, 5.1)
-
-
-
-
-
-
-
-
-
+ Android
-
+ Nougat (7.0)
-
-
Marshmallow (6.0)
Lollipop (5.0, 5.1)
KitKat (4.4)
-
-
-
-
- 9
-
-
-
- 8
-
-
-
- 8
-
-
-
- KitKat
-
-
(4.4)
-
-
-
-
-
-
-
+
@@ -261,26 +162,23 @@ This file incorporates the mandatory and many of the optional polyfills as JavaS
这个文件把强制的和很多可选的填充脚本组织成 JavaScript 的 `import` 语句。
-The npm packages for the _mandatory_ polyfills (such as `zone.js`) were installed automatically for you when you created your project and
-their corresponding `import` statements are ready to go.
-You probably won't touch these.
+The npm packages for the _mandatory_ polyfills (such as `zone.js`) were installed automatically for you when you created your project and their corresponding `import` statements are ready to go. You probably won't touch these.
**强制性** 填充脚本（如`zone.js`）的npm 包在创建工程时就已经自动安装了，相应的 `import` 语句也都加好了。我们一般不用动它们。
-But if you need an optional polyfill, you'll have to install its npm package with `npm` or `yarn`.
-For example, [if you need the web animations polyfill](http://caniuse.com/#feat=web-animation),
-you could install it with either of the following commands:
+But if you need an optional polyfill, you'll have to install its npm package.
+For example, [if you need the web animations polyfill](http://caniuse.com/#feat=web-animation), you could install it with `npm`, using the following command (or the `yarn` equivalent):
但是如果要用一个可选的填充库，就要通过 `npm` 或 `yarn` 来安装它们的 npm 包了。
比如，[如果你需要 web 动画的填充脚本](http://caniuse.com/#feat=web-animation)，就要通过下列命令之一来安装它：
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- 7
-
-
-
- 7
-
-
-
- Jelly Bean
-
-
(4.1, 4.2, 4.3)
-
-
-
-
-
[ES7/reflect](guide/browser-support#core-es7-reflect) (JIT only)
+
@@ -375,8 +274,8 @@ These are the polyfills required to run an Angular application on each supported
-
[ES6](guide/browser-support#core-es6)
+
@@ -389,7 +288,6 @@ These are the polyfills required to run an Angular application on each supported
-
[ES6
@@ -408,7 +306,7 @@ Some features of Angular may require additional polyfills.
有些 Angular 特性可能需要额外的填充库。
For example, the animations library relies on the standard web animation API, which is only available in Chrome and Firefox today.
-You'll need a polyfill to use animations in other browsers.
+(note that the dependency of web-animations-js in Angular is only necessary if `AnimationBuilder` is used.)
例如，动画库依赖于标准的 web 动画 API，目前它只在 Chrome 和 Firefox 上可用。你可能需要一个填充库来在其它浏览器上使用动画功能。
@@ -448,7 +346,8 @@ Here are the features which may require additional polyfills:
classList](guide/browser-support#classlist)
- [JIT compilation](guide/aot-compiler).
+ [JIT compilation](guide/aot-compiler).
+
Required to reflect for metadata.
[JIT 编译](guide/aot-compiler) 需要 reflect 来提供元数据。
@@ -458,13 +357,11 @@ Here are the features which may require additional polyfills:
[ES7/reflect](guide/browser-support#core-es7-reflect)
-
- All current browsers.
- Enabled by default.
- Can remove If you always use AOT and only use Angular decorators.
+ All current browsers. Enabled by default.
+ Can remove if you always use AOT and only use Angular decorators.
默认对目前的所有浏览器都启用了。如果总是使用 AOT 模式，并且只使用 Angular 自带的装饰器，那么可以移除它。
@@ -480,22 +377,25 @@ Here are the features which may require additional polyfills:
[动画](guide/animations)
+
Only if `Animation Builder` is used within the application--standard
+ animation support in Angular doesn't require any polyfills (as of NG6).
+
+
只有在应用中用到了 `Animation Builder` 时才需要；Angular 标准的动画支持是不需要任何填充库的（截至 NG6）。
+
-
[Web Animations](guide/browser-support#web-animations)
[Web 动画](guide/browser-support#web-animations)
-
- All but Chrome and Firefox
@@ -504,17 +404,24 @@ Here are the features which may require additional polyfills:
Not supported in IE9
+
- If you use the following deprecated i18n pipes: [date](api/common/DeprecatedDatePipe), [currency](api/common/DeprecatedCurrencyPipe), [decimal](api/common/DeprecatedDecimalPipe) and [percent](api/common/DeprecatedPercentPipe)
-
+ If you use the following deprecated i18n pipes:
+
如果你使用下列已废弃的i18n管道：
- [date](api/common/DeprecatedDatePipe)、[currency](api/common/DeprecatedCurrencyPipe)、[decimal](api/common/DeprecatedDecimalPipe) 和 [percent](api/common/DeprecatedPercentPipe)
+
+ [date](api/common/DeprecatedDatePipe),
+
+ [currency](api/common/DeprecatedCurrencyPipe),
+
+ [decimal](api/common/DeprecatedDecimalPipe),
+
+ [percent](api/common/DeprecatedPercentPipe)
-
[Intl API](guide/browser-support#intl)
+
@@ -530,15 +437,17 @@ Here are the features which may require additional polyfills:
-
-
[classList](guide/browser-support#classlist)
+
@@ -551,7 +460,9 @@ Here are the features which may require additional polyfills:
-
[Typed Array](guide/browser-support#typedarray)
+
[Blob](guide/browser-support#blob)
+
[FormData](guide/browser-support#formdata)
+
@@ -575,7 +489,9 @@ Here are the features which may require additional polyfills:
### Suggested polyfills ##
+
### 建议的填充库 ##
+
Below are the polyfills which are used to test the framework itself. They are a good starting point for an application.
下表中是用来测试框架本身的填充库，它们是应用程序的优质起点。
@@ -628,6 +544,7 @@ Below are the polyfills which are used to test the framework itself. They are a
ES7/reflect
+
@@ -643,7 +560,9 @@ Below are the polyfills which are used to test the framework itself. They are a
+
ES6
+
@@ -659,7 +578,9 @@ Below are the polyfills which are used to test the framework itself. They are a
+
classList
+
@@ -683,7 +604,9 @@ Below are the polyfills which are used to test the framework itself. They are a
+
Intl
+
@@ -699,7 +622,7 @@ Below are the polyfills which are used to test the framework itself. They are a
- Web Animations
+ Web Animations
@@ -715,7 +638,9 @@ Below are the polyfills which are used to test the framework itself. They are a
+
Typed Array
+
@@ -731,7 +656,9 @@ Below are the polyfills which are used to test the framework itself. They are a
+
Blob
+
@@ -747,7 +674,9 @@ Below are the polyfills which are used to test the framework itself. They are a
+
+
FormData
+
@@ -763,7 +692,6 @@ Below are the polyfills which are used to test the framework itself. They are a
-
\* Figures are for minified and gzipped code,
computed with the closure compiler.
@@ -772,7 +700,7 @@ computed with the closure co
## 不使用 CLI 的用户的填充库
-If you aren't using the CLI, you should add your polyfill scripts directly to the host web page (`index.html`), perhaps like this.
+If you are not using the CLI, you should add your polyfill scripts directly to the host web page (`index.html`), perhaps like this.
如果你不使用 CLI，就要直接把填充库添加到宿主页（`index.html`）中，就像这样：
@@ -780,10 +708,24 @@ If you aren't using the CLI, you should add your polyfill scripts directly to th
<!-- pre-zone polyfills -->
<script src="node_modules/core-js/client/shim.min.js"></script>
<script src="node_modules/web-animations-js/web-animations.min.js"></script>
+ <script>
+ /**
+ * you can configure some zone flags which can disable zone interception for some
+ * asynchronous activities to improve startup performance - use these options only
+ * if you know what you are doing as it could result in hard to trace down bugs..
+ */
+ // __Zone_disable_requestAnimationFrame = true; // disable patch requestAnimationFrame
+ // __Zone_disable_on_property = true; // disable patch onProperty such as onclick
+ // __zone_symbol__BLACK_LISTED_EVENTS = ['scroll', 'mousemove']; // disable patch specified eventNames
+ /*
+ * in IE/Edge developer tools, the addEventListener will also be wrapped by zone.js
+ * with the following flag, it will bypass `zone.js` patch for IE/Edge
+ */
+ // __Zone_enable_cross_context_check = true;
+ </script>
<!-- zone.js required by Angular -->
<script src="node_modules/zone.js/dist/zone.js"></script>
<!-- application polyfills -->
-
diff --git a/aio/content/guide/change-log.md b/aio/content/guide/change-log.md
index 2f7425e5d8..fa1497c134 100644
--- a/aio/content/guide/change-log.md
+++ b/aio/content/guide/change-log.md
@@ -174,7 +174,7 @@ HTTP guide.
## 测试：添加了组件测试的plunker范例 (2016-12-02)
Added two plunkers that each test _one simple component_ so you can write a component test plunker of your own:
declarations of this module.
{class-name: true/false} 的 map。
+
<div [ngStyle]="{'property': 'value'}"><div [ngStyle]="dynamicStyles()">
diff --git a/aio/content/guide/comparing-observables.md b/aio/content/guide/comparing-observables.md
new file mode 100644
index 0000000000..9cb663cd56
--- /dev/null
+++ b/aio/content/guide/comparing-observables.md
@@ -0,0 +1,313 @@
+# Observables compared to other techniques
+
+You can often use observables instead of promises to deliver values asynchronously. Similarly, observables can take the place of event handlers. Finally, because observables deliver multiple values, you can use them where you might otherwise build and operate on arrays.
+
+Observables behave somewhat differently from the alternative techniques in each of these situations, but offer some significant advantages. Here are detailed comparisons of the differences.
+
+## Observables compared to promises
+
+Observables are often compared to promises. Here are some key differences:
+
+* Observables are declarative; computation does not start until subscription. Promises execute immediately on creation. This makes observables useful for defining recipes that can be run whenever you need the result.
+
+* Observables provide many values. Promises provide one. This makes observables useful for getting multiple values over time.
+
+* Observables differentiate between chaining and subscription. Promises only have `.then()` clauses. This makes observables useful for creating complex transformation recipes to be used by other part of the system, without causing the work to be executed.
+
+* Observables `subscribe()` is responsible for handling errors. Promises push errors to the child promises. This makes observables useful for centralized and predictable error handling.
+
+
+### Creation and subscription
+
+* Observables are not executed until a consumer subcribes. The `subscribe()` executes the defined behavior once, and it can be called again. Each subscription has its own computation. Resubscription causes recomputation of values.
+
+
+
+
+## Observables compared to events API
+
+Observables are very similar to event handlers that use the events API. Both techniques define notification handlers, and use them to process multiple values delivered over time. Subscribing to an observable is equivalent to adding an event listener. One significant difference is that you can configure an observable to transform an event before passing the event to the handler.
+
+Using observables to handle events and asynchronous operations can have the advantage of greater consistency in contexts such as HTTP requests.
+
+Here are some code samples that illustrate how the same kind of operation is defined using observables and the events API.
+
+
+ Operation
+ Observable
+ Promise
+
+
+
+ Creation
+
+
+ new Observable((observer) => {
+ observer.next(123);
+});
+
+
+ new Promise((resolve, reject) => {
+ resolve(123);
+});
+
+
+ Transform
+ obs.map((value) => value * 2 );
promise.then((value) => value * 2);
+
+ Subscribe
+
+
+ sub = obs.subscribe((value) => {
+ console.log(value)
+});
+
+
+ promise.then((value) => {
+ console.log(value);
+});
+
+
+Unsubscribe
+ sub.unsubscribe();
Implied by promise resolution.
+
+
+
+
+## Observables compared to arrays
+
+An observable produces values over time. An array is created as a static set of values. In a sense, observables are asynchronous where arrays are synchronous. In the following examples, ➞ implies asynchronous value delivery.
+
+
+ Observable
+ Events API
+
+
+
+ Creation & cancellation
+
+
+ // Setup
+let clicks$ = fromEvent(buttonEl, ‘click’);
+// Begin listening
+let subscription = clicks$
+ .subscribe(e => console.log(‘Clicked’, e))
+// Stop listening
+subscription.unsubscribe();
+
+
+ function handler(e) {
+ console.log(‘Clicked’, e);
+}
+
+// Setup & begin listening
+button.addEventListener(‘click’, handler);
+// Stop listening
+button.removeEventListener(‘click’, handler);
+
+
+
+ Subscription
+
+
+ observable.subscribe(() => {
+ // notification handlers here
+});
+
+
+ element.addEventListener(eventName, (event) => {
+ // notification handler here
+});
+
+
+Configuration
+ Listen for keystrokes, but provide a stream representing the value in the input.
+
+ fromEvent(inputEl, 'keydown').pipe(
+ map(e => e.target.value)
+);
+ Does not support configuration.
+
+ element.addEventListener(eventName, (event) => {
+ // Cannot change the passed Event into another
+ // value before it gets to the handler
+});
+
+
+
+
+
diff --git a/aio/content/guide/component-styles.md b/aio/content/guide/component-styles.md
index e39b4d5707..ad421a15a6 100644
--- a/aio/content/guide/component-styles.md
+++ b/aio/content/guide/component-styles.md
@@ -16,19 +16,15 @@ with components, enabling a more modular design than regular stylesheets.
This page describes how to load and apply these component styles.
-在本章中，我们将学到如何加载和使用这些*组件样式*。
-
-You can run the
+ Observable
+ Array
+
+
+
+ Given
+
+
+ obs: ➞1➞2➞3➞5➞7
+ obsB: ➞'a'➞'b'➞'c'
+
+
+ arr: [1, 2, 3, 5, 7]
+ arrB: ['a', 'b', 'c']
+
+
+ concat()
+
+ obs.concat(obsB)
+ ➞1➞2➞3➞5➞7➞'a'➞'b'➞'c'
+
+
+ arr.concat(arrB)
+ [1,2,3,5,7,'a','b','c']
+
+
+ filter()
+
+ obs.filter((v) => v>3)
+ ➞5➞7
+
+
+ arr.filter((v) => v>3)
+ [5, 7]
+
+
+ find()
+
+ obs.find((v) => v>3)
+ ➞5
+
+
+ arr.find((v) => v>10)
+ 5
+
+
+ findIndex()
+
+ obs.findIndex((v) => v>3)
+ ➞3
+
+
+ arr.findIndex((v) => v>3)
+ 3
+
+
+ forEach()
+
+ obs.forEach((v) => {
+ console.log(v);
+})
+1
+2
+3
+4
+5
+
+
+ arr.forEach((v) => {
+ console.log(v);
+})
+1
+2
+3
+4
+5
+
+
+ map()
+
+ obs.map((v) => -v)
+ ➞-1➞-2➞-3➞-5➞-7
+
+
+ arr.map((v) => -v)
+ [-1, -2, -3, -5, -7]
+
+
+reduce()
+
+ obs.scan((s,v)=> s+v, 0)
+ ➞1➞3➞6➞11➞18
+
+
+ arr.reduce((s,v) => s+v, 0)
+ 18
+ ` elements, from the host element down
-through this component to all of its child elements in the DOM.
+The following example targets all `
` elements, from the host element down
+through this component to all of its child elements in the DOM.
在这个例子中，我们以所有的`
`元素为目标，从宿主元素到当前元素再到 DOM 中的所有子元素：
@@ -226,7 +220,7 @@ CSS标准中用于 "刺穿Shadow DOM" 的组合器已经被废弃，并将[这
## 把样式加载进组件中
-There are several ways to add styles to a component:
+There are several ways to add styles to a component:
有几种方式把样式加入组件：
@@ -290,8 +284,8 @@ to a component's `@Component` decorator:
@@ -332,7 +326,7 @@ inside `');
+ if (this.inertBodyElement.querySelector && this.inertBodyElement.querySelector('svg img')) {
+ // We just hit the Firefox bug - which prevents the inner img JS from being sanitized
+ // so use the DOMParser strategy, if it is available.
+ // If the DOMParser is not available then we are not in Firefox (Server/WebWorker?) so we
+ // fall through to the default strategy below.
+ if (isDOMParserAvailable()) {
+ this.getInertBodyElement = this.getInertBodyElement_DOMParser;
+ return;
+ }
+ }
+
+ // None of the bugs were hit so it is safe for us to use the default InertDocument strategy
+ this.getInertBodyElement = this.getInertBodyElement_InertDocument;
+ }
+
+ /**
+ * Get an inert DOM element containing DOM created from the dirty HTML string provided.
+ * The implementation of this is determined in the constructor, when the class is instantiated.
+ */
+ getInertBodyElement: (html: string) => HTMLElement | null;
+
+ /**
+ * Use XHR to create and fill an inert body element (on Safari 10.1)
+ * See
+ * https://github.com/cure53/DOMPurify/blob/a992d3a75031cb8bb032e5ea8399ba972bdf9a65/src/purify.js#L439-L449
+ */
+ private getInertBodyElement_XHR(html: string) {
+ // We add these extra elements to ensure that the rest of the content is parsed as expected
+ // e.g. leading whitespace is maintained and tags like `` do not get hoisted to the
+ // `` tag.
+ html = '