Skip to content
This repository was archived by the owner on Dec 4, 2017. It is now read-only.

Commit d399d02

Browse files
wardbellwardbell
committed
docs(server-communication): heavily refactored
1 parent 91bb9d8 commit d399d02

15 files changed

+264
-217
lines changed

‎public/docs/_examples/server-communication/e2e-spec.js

+40-47
Original file line numberDiff line numberDiff line change
@@ -4,69 +4,62 @@ describe('Server Communication', function () {
44
browser.get('');
55
});
66

7-
describe('Tour of Heroes e2e tests', function () {
8-
9-
var _initialHeroCount = 4;
10-
var _newHeroName = 'Mr. IQ';
11-
var _heroCountAfterAdd = 5;
12-
13-
it('should display ' + _initialHeroCount + ' heroes after init', function () {
14-
var myTohComp = element(by.tagName('my-toh'));
15-
expect(myTohComp).toBeDefined('<my-toh> must exist');
16-
var heroListComp = myTohComp.element(by.tagName('hero-list'));
7+
describe('Tour of Heroes (Observable)', function () {
8+
9+
var initialHeroCount = 4;
10+
var newHeroName = 'Mr. IQ';
11+
var heroCountAfterAdd = 5;
12+
13+
var heroListComp = element(by.tagName('hero-list'));
14+
var addButton = heroListComp.element(by.tagName('button'));
15+
var heroTags = heroListComp.all(by.tagName('li'));
16+
var heroNameInput = heroListComp.element(by.tagName('input'));
17+
18+
it('should exist', function() {
1719
expect(heroListComp).toBeDefined('<hero-list> must exist');
18-
var heroTags = heroListComp.all(by.tagName('li'));
19-
expect(heroTags.count()).toBe(_initialHeroCount);
2020
});
21-
21+
22+
it('should display ' + initialHeroCount + ' heroes after init', function () {
23+
expect(heroTags.count()).toBe(initialHeroCount);
24+
});
25+
2226
it('should not add hero with empty name', function () {
23-
var myTohComp = element(by.tagName('my-toh'));
24-
expect(myTohComp).toBeDefined('<my-toh> must exist');
25-
var addButton = myTohComp.element(by.tagName('button'));
2627
expect(addButton).toBeDefined('"Add Hero" button must be defined');
2728
addButton.click().then(function() {
28-
var heroListComp = myTohComp.element(by.tagName('hero-list'));
29-
var heroTags = heroListComp.all(by.tagName('li'));
30-
expect(heroTags.count()).toBe(_initialHeroCount, 'No new hero should be added');
29+
expect(heroTags.count()).toBe(initialHeroCount, 'No new hero should be added');
3130
});
3231
})
3332

3433
it('should add a new hero to the list', function () {
35-
var myTohComp = element(by.tagName('my-toh'));
36-
expect(myTohComp).toBeDefined('<my-toh> must exist');
37-
var heroNameInput = myTohComp.element(by.tagName('input'));
3834
expect(heroNameInput).toBeDefined('<input> for hero name must exist');
39-
var addButton = myTohComp.element(by.tagName('button'));
4035
expect(addButton).toBeDefined('"Add Hero" button must be defined');
41-
sendKeys(heroNameInput, _newHeroName);
36+
sendKeys(heroNameInput, newHeroName);
4237
addButton.click().then(function() {
43-
var heroListComp = myTohComp.element(by.tagName('hero-list'));
44-
var heroTags = heroListComp.all(by.tagName('li'));
45-
expect(heroTags.count()).toBe(_heroCountAfterAdd, 'A new hero should be added');
46-
var newHeroInList = heroTags.get(_heroCountAfterAdd - 1).getText();
47-
expect(newHeroInList).toBe(_newHeroName, 'The hero should be added to the end of the list');
38+
expect(heroTags.count()).toBe(heroCountAfterAdd, 'A new hero should be added');
39+
var newHeroInList = heroTags.get(heroCountAfterAdd - 1).getText();
40+
expect(newHeroInList).toBe(newHeroName, 'The hero should be added to the end of the list');
4841
});
4942
})
5043
});
51-
52-
describe('Wikipedia Demo e2e tests', function () {
53-
44+
45+
describe('Wikipedia Demo', function () {
46+
5447
it('should initialize the demo with empty result list', function () {
5548
var myWikiComp = element(by.tagName('my-wiki'));
5649
expect(myWikiComp).toBeDefined('<my-wiki> must exist');
5750
var resultList = myWikiComp.all(by.tagName('li'));
5851
expect(resultList.count()).toBe(0, 'result list must be empty');
5952
});
60-
53+
6154
describe('Fetches after each keystroke', function () {
6255
it('should fetch results after "B"', function(done) {
6356
testForRefreshedResult('B', done);
6457
});
65-
58+
6659
it('should fetch results after "Ba"', function(done) {
6760
testForRefreshedResult('a', done);
6861
});
69-
62+
7063
it('should fetch results after "Bas"', function(done) {
7164
testForRefreshedResult('s', done);
7265
});
@@ -75,13 +68,13 @@ describe('Server Communication', function () {
7568
testForRefreshedResult('ic', done);
7669
});
7770
});
78-
71+
7972
function testForRefreshedResult(keyPressed, done) {
8073
testForResult('my-wiki', keyPressed, false, done)
8174
}
8275
});
83-
84-
describe('Smarter Wikipedia Demo e2e tests', function () {
76+
77+
describe('Smarter Wikipedia Demo', function () {
8578

8679
it('should initialize the demo with empty result list', function () {
8780
var myWikiSmartComp = element(by.tagName('my-wiki-smart'));
@@ -93,40 +86,40 @@ describe('Server Communication', function () {
9386
it('should fetch results after "Java"', function(done) {
9487
testForNewResult('Java', done);
9588
});
96-
89+
9790
it('should fetch results after "JavaS"', function(done) {
9891
testForStaleResult('S', done);
9992
});
100-
93+
10194
it('should fetch results after "JavaSc"', function(done) {
10295
testForStaleResult('c', done);
10396
});
104-
97+
10598
it('should fetch results after "JavaScript"', function(done) {
10699
testForStaleResult('ript', done);
107100
});
108101

109-
102+
110103
function testForNewResult(keyPressed, done) {
111104
testForResult('my-wiki-smart', keyPressed, false, done)
112105
}
113106

114107
function testForStaleResult(keyPressed, done) {
115-
testForResult('my-wiki-smart', keyPressed, true, done)
108+
testForResult('my-wiki-smart', keyPressed, true, done)
116109
}
117110

118111
});
119-
112+
120113
function testForResult(componentTagName, keyPressed, hasListBeforeSearch, done) {
121114
var searchWait = 1000; // Wait for wikipedia but not so long that tests timeout
122115
var wikiComponent = element(by.tagName(componentTagName));
123116
expect(wikiComponent).toBeDefined('<' + componentTagName + '> must exist');
124117
var searchBox = wikiComponent.element(by.tagName('input'));
125118
expect(searchBox).toBeDefined('<input> for search must exist');
126-
119+
127120
searchBox.sendKeys(keyPressed).then(function () {
128121
var resultList = wikiComponent.all(by.tagName('li'));
129-
122+
130123
if (hasListBeforeSearch) {
131124
expect(resultList.count()).toBeGreaterThan(0, 'result list should not be empty before search');
132125
}
@@ -137,5 +130,5 @@ describe('Server Communication', function () {
137130
}, searchWait);
138131
});
139132
}
140-
133+
141134
});

‎public/docs/_examples/server-communication/ts/app/add-rxjs-operators.ts

-9
This file was deleted.

‎public/docs/_examples/server-communication/ts/app/app.component.ts

+37
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,37 @@
1+
// #docplaster
2+
// #docregion
3+
import { Component } from '@angular/core';
4+
5+
// #docregion import-rxjs
6+
// Add the RxJS Observable operators we need in this app.
7+
import './rxjs-operators';
8+
// #enddocregion import-rxjs
9+
10+
import { HeroListComponent } from './toh/hero-list.component';
11+
import { HeroListPromiseComponent } from './toh/hero-list.component.promise';
12+
13+
import { WikiComponent } from './wiki/wiki.component';
14+
import { WikiSmartComponent } from './wiki/wiki-smart.component';
15+
16+
@Component({
17+
selector: 'my-app',
18+
template: `
19+
<hero-list></hero-list>
20+
<hero-list-promise></hero-list-promise>
21+
<my-wiki></my-wiki>
22+
<my-wiki-smart></my-wiki-smart>
23+
`,
24+
// #enddocregion
25+
/*
26+
// #docregion http-providers
27+
providers: [ HTTP_PROVIDERS ]
28+
// #enddocregion http-providers
29+
*/
30+
// #docregion
31+
directives: [
32+
HeroListComponent, HeroListPromiseComponent,
33+
WikiComponent, WikiSmartComponent
34+
]
35+
})
36+
export class AppComponent { }
37+
// #enddocregion

‎public/docs/_examples/server-communication/ts/app/main.ts

+30-15
Original file line numberDiff line numberDiff line change
@@ -1,21 +1,36 @@
11
// #docplaster
2-
// #docregion
3-
import { bootstrap } from '@angular/platform-browser-dynamic';
2+
// #docregion v1, final
3+
import { bootstrap } from '@angular/platform-browser-dynamic';
44
// #docregion http-providers
5-
import { HTTP_PROVIDERS } from '@angular/http';
5+
import { HTTP_PROVIDERS } from '@angular/http';
66
// #enddocregion http-providers
77

8-
// #docregion import-rxjs
9-
// Add the RxJS Observable operators we need in this app.
10-
import './add-rxjs-operators';
11-
// #enddocregion import-rxjs
8+
import { AppComponent } from './app.component';
129

13-
import { TohComponent } from './toh/toh.component';
14-
import { WikiComponent } from './wiki/wiki.component';
15-
import { WikiSmartComponent } from './wiki/wiki-smart.component';
10+
// #enddocregion v1, final
11+
/*
12+
// #docregion v1
13+
bootstrap(AppComponent, [ HTTP_PROVIDERS ]);
14+
// #enddocregion v1
15+
*/
1616

17-
// #docregion http-providers
18-
bootstrap(TohComponent, [HTTP_PROVIDERS]);
19-
// #enddocregion http-providers
20-
bootstrap(WikiComponent);
21-
bootstrap(WikiSmartComponent);
17+
// #docregion final
18+
// #docregion in-mem-web-api-imports
19+
// in-memory web api imports
20+
import { InMemoryBackendService,
21+
SEED_DATA } from 'angular2-in-memory-web-api/core';
22+
import { HeroData } from './hero-data';
23+
24+
import { provide } from '@angular/core';
25+
import { XHRBackend } from '@angular/http';
26+
27+
// #enddocregion in-mem-web-api-imports
28+
// #enddocregion in-mem-web-api-providers
29+
bootstrap(AppComponent, [
30+
// HTTP providers and the in-memory web api provider replacements
31+
HTTP_PROVIDERS,
32+
provide(XHRBackend, { useClass: InMemoryBackendService }), // in-mem server
33+
provide(SEED_DATA, { useClass: HeroData }) // in-mem server data
34+
]);
35+
// #enddocregion in-mem-web-api-providers
36+
// #enddocregion final

‎public/docs/_examples/server-communication/ts/app/rxjs-operators.ts

+16
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
// #docregion
2+
// import 'rxjs/Rx'; // adds ALL RxJS statics & operators to Observable
3+
4+
// See node_module/rxjs/Rxjs.js
5+
// Import just the rxjs statics and operators we need for THIS app.
6+
7+
// Statics
8+
import 'rxjs/add/observable/throw';
9+
10+
// Operators
11+
import 'rxjs/add/operator/catch';
12+
import 'rxjs/add/operator/debounceTime';
13+
import 'rxjs/add/operator/distinctUntilChanged';
14+
import 'rxjs/add/operator/map';
15+
import 'rxjs/add/operator/switchMap';
16+
import 'rxjs/add/operator/toPromise';

‎public/docs/_examples/server-communication/ts/app/toh/hero-list.component.html

+1
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
11
<!-- #docregion -->
2+
<h1>Tour of Heroes ({{mode}})</h1>
23
<h3>Heroes:</h3>
34
<ul>
45
<li *ngFor="let hero of heroes">

‎public/docs/_examples/server-communication/ts/app/toh/hero-list.component.1.ts renamed to ‎public/docs/_examples/server-communication/ts/app/toh/hero-list.component.promise.ts

+6-5
Original file line numberDiff line numberDiff line change
@@ -1,21 +1,22 @@
1-
// ToH Promise Version
21
// #docregion
2+
// Promise Version
33
import { Component, OnInit } from '@angular/core';
44
import { Hero } from './hero';
5-
import { HeroService } from './hero.service.1';
5+
import { HeroService } from './hero.service.promise';
66

77
@Component({
8-
selector: 'hero-list',
8+
selector: 'hero-list-promise',
99
templateUrl: 'app/toh/hero-list.component.html',
10-
styles: ['.error {color:red;}']
10+
providers: [ HeroService ]
1111
})
1212
// #docregion component
13-
export class HeroListComponent implements OnInit {
13+
export class HeroListPromiseComponent implements OnInit {
1414

1515
constructor (private heroService: HeroService) {}
1616

1717
errorMessage: string;
1818
heroes: Hero[];
19+
mode = 'Promise';
1920

2021
ngOnInit() { this.getHeroes(); }
2122

‎public/docs/_examples/server-communication/ts/app/toh/hero-list.component.ts

+4-3
Original file line numberDiff line numberDiff line change
@@ -1,21 +1,22 @@
11
// #docregion
2+
// Observable Version
23
import { Component, OnInit } from '@angular/core';
3-
44
import { Hero } from './hero';
55
import { HeroService } from './hero.service';
66

77
@Component({
88
selector: 'hero-list',
99
templateUrl: 'app/toh/hero-list.component.html',
10-
styles: ['.error {color:red;}']
10+
providers: [ HeroService ]
1111
})
1212
// #docregion component
1313
export class HeroListComponent implements OnInit {
1414

1515
constructor (private heroService: HeroService) {}
1616

1717
errorMessage: string;
18-
heroes:Hero[];
18+
heroes: Hero[];
19+
mode = 'Observable';
1920

2021
ngOnInit() { this.getHeroes(); }
2122

‎public/docs/_examples/server-communication/ts/app/toh/hero.service.1.ts renamed to ‎public/docs/_examples/server-communication/ts/app/toh/hero.service.promise.ts

+4-4
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,6 @@
1-
// ToH Promise Version
21
// #docplaster
3-
42
// #docregion
3+
// Promise Version
54
import { Injectable } from '@angular/core';
65
import { Http, Response } from '@angular/http';
76
import { Headers, RequestOptions } from '@angular/http';
@@ -41,9 +40,10 @@ export class HeroService {
4140
private handleError (error: any) {
4241
// In a real world app, we might use a remote logging infrastructure
4342
// We'd also dig deeper into the error to get a better message
44-
let errMsg = error.message || error.statusText || 'Server error';
43+
let errMsg = (error.message) ? error.message :
44+
error.status ? `${error.status} - ${error.statusText}` : 'Server error';
4545
console.error(errMsg); // log to console instead
46-
return Promise.reject(errMsg);
46+
return Observable.throw(errMsg);
4747
}
4848

4949
// #enddocregion methods

‎public/docs/_examples/server-communication/ts/app/toh/hero.service.ts

+3-1
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
// #docplaster
22
// #docregion
3+
// Observable Version
34
// #docregion v1
45
import { Injectable } from '@angular/core';
56
import { Http, Response } from '@angular/http';
@@ -52,7 +53,8 @@ export class HeroService {
5253
private handleError (error: any) {
5354
// In a real world app, we might use a remote logging infrastructure
5455
// We'd also dig deeper into the error to get a better message
55-
let errMsg = error.message || error.statusText || 'Server error';
56+
let errMsg = (error.message) ? error.message :
57+
error.status ? `${error.status} - ${error.statusText}` : 'Server error';
5658
console.error(errMsg); // log to console instead
5759
return Observable.throw(errMsg);
5860
}

‎public/docs/_examples/server-communication/ts/app/toh/hero.ts

+2-2
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
// #docregion
22
export class Hero {
33
constructor(
4-
public id:number,
5-
public name:string) { }
4+
public id: number,
5+
public name: string) { }
66
}

0 commit comments

Comments
 (0)