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

Commit 7cc61cc

Browse files
thelgevoldwardbell
thelgevold
authored and
wardbell
committed
docs:(TOH chapter on Http) New Tour of Hero Chapter on Http
1 parent 31fe01e commit 7cc61cc

25 files changed

+1086
-0
lines changed

‎public/docs/_examples/toh-6/e2e-spec.js

+133
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,133 @@
1+
describe('TOH Http Chapter', function () {
2+
3+
beforeEach(function () {
4+
browser.get('');
5+
});
6+
7+
function getPageStruct() {
8+
hrefEles = element.all(by.css('my-app a'));
9+
10+
return {
11+
hrefs: hrefEles,
12+
myDashboardHref: hrefEles.get(0),
13+
myDashboardParent: element(by.css('my-app my-dashboard')),
14+
topHeroes: element.all(by.css('my-app my-dashboard .module.hero')),
15+
16+
myHeroesHref: hrefEles.get(1),
17+
myHeroesParent: element(by.css('my-app my-heroes')),
18+
allHeroes: element.all(by.css('my-app my-heroes li .hero-element')),
19+
20+
firstDeleteButton: element.all(by.buttonText('Delete')).get(0),
21+
22+
addButton: element.all(by.buttonText('Add New Hero')).get(0),
23+
24+
heroDetail: element(by.css('my-app my-hero-detail'))
25+
}
26+
}
27+
28+
it('should be able to add a hero from the "Heroes" view', function(){
29+
var page = getPageStruct();
30+
var heroCount;
31+
32+
page.myHeroesHref.click().then(function() {
33+
browser.waitForAngular();
34+
heroCount = page.allHeroes.count();
35+
expect(heroCount).toBe(4, 'should show 4');
36+
}).then(function() {
37+
return page.addButton.click();
38+
}).then(function(){
39+
return save(page,'','The New Hero');
40+
}).then(function(){
41+
browser.waitForAngular();
42+
43+
heroCount = page.allHeroes.count();
44+
expect(heroCount).toBe(5, 'should show 5');
45+
46+
var newHero = element(by.xpath('//span[@class="hero-element" and contains(text(),"The New Hero")]'));
47+
expect(newHero).toBeDefined();
48+
});
49+
});
50+
51+
it('should be able to delete hero from "Heroes" view', function(){
52+
var page = getPageStruct();
53+
var heroCount;
54+
55+
page.myHeroesHref.click().then(function() {
56+
browser.waitForAngular();
57+
heroCount = page.allHeroes.count();
58+
expect(heroCount).toBe(4, 'should show 4');
59+
}).then(function() {
60+
return page.firstDeleteButton.click();
61+
}).then(function(){
62+
browser.waitForAngular();
63+
heroCount = page.allHeroes.count();
64+
expect(heroCount).toBe(3, 'should show 3');
65+
});
66+
});
67+
68+
it('should be able to save details from "Dashboard" view', function () {
69+
var page = getPageStruct();
70+
expect(page.myDashboardParent.isPresent()).toBe(true, 'dashboard element should be available');
71+
var heroEle = page.topHeroes.get(2);
72+
var heroDescrEle = heroEle.element(by.css('h4'));
73+
var heroDescr;
74+
75+
return heroDescrEle.getText().then(function(text) {
76+
heroDescr = text;
77+
return heroEle.click();
78+
}).then(function() {
79+
return save(page, heroDescr, '-foo');
80+
})
81+
.then(function(){
82+
return page.myDashboardHref.click();
83+
})
84+
.then(function() {
85+
expect(page.myDashboardParent.isPresent()).toBe(true, 'dashboard element should be back');
86+
expect(heroDescrEle.getText()).toEqual(heroDescr + '-foo');
87+
});
88+
});
89+
90+
it('should be able to save details from "Heroes" view', function () {
91+
var page = getPageStruct();
92+
93+
var viewDetailsButtonEle = page.myHeroesParent.element(by.cssContainingText('button', 'View Details'));
94+
var heroEle, heroDescr;
95+
96+
page.myHeroesHref.click().then(function() {
97+
expect(page.myDashboardParent.isPresent()).toBe(false, 'dashboard element should NOT be present');
98+
expect(page.myHeroesParent.isPresent()).toBe(true, 'myHeroes element should be present');
99+
expect(viewDetailsButtonEle.isPresent()).toBe(false, 'viewDetails button should not yet be present');
100+
heroEle = page.allHeroes.get(0);
101+
return heroEle.getText();
102+
}).then(function(text) {
103+
// remove leading 'id' from the element
104+
heroDescr = text.substr(text.indexOf(' ')+1);
105+
return heroEle.click();
106+
}).then(function() {
107+
expect(viewDetailsButtonEle.isDisplayed()).toBe(true, 'viewDetails button should now be visible');
108+
return viewDetailsButtonEle.click();
109+
}).then(function() {
110+
return save(page, heroDescr, '-bar');
111+
})
112+
.then(function(){
113+
return page.myHeroesHref.click();
114+
})
115+
.then(function() {
116+
expect(heroEle.getText()).toContain(heroDescr + '-bar');
117+
});
118+
});
119+
120+
function save(page, origValue, textToAdd) {
121+
var inputEle = page.heroDetail.element(by.css('input'));
122+
expect(inputEle.isDisplayed()).toBe(true, 'should be able to see the input box');
123+
var saveButtonEle = page.heroDetail.element(by.buttonText('Save'));
124+
var backButtonEle = page.heroDetail.element(by.buttonText('Back'));
125+
expect(backButtonEle.isDisplayed()).toBe(true, 'should be able to see the back button');
126+
var detailTextEle = page.heroDetail.element(by.css('div h2'));
127+
expect(detailTextEle.getText()).toContain(origValue);
128+
return sendKeys(inputEle, textToAdd).then(function () {
129+
expect(detailTextEle.getText()).toContain(origValue + textToAdd);
130+
return saveButtonEle.click();
131+
});
132+
}
133+
});

‎public/docs/_examples/toh-6/ts/.gitignore

+1
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
**/*.js

‎public/docs/_examples/toh-6/ts/app/app.component.css

+31
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,31 @@
1+
/* #docplaster */
2+
/* #docregion css */
3+
h1 {
4+
font-size: 1.2em;
5+
color: #999;
6+
margin-bottom: 0;
7+
}
8+
h2 {
9+
font-size: 2em;
10+
margin-top: 0;
11+
padding-top: 0;
12+
}
13+
nav a {
14+
padding: 5px 10px;
15+
text-decoration: none;
16+
margin-top: 10px;
17+
display: inline-block;
18+
background-color: #eee;
19+
border-radius: 4px;
20+
}
21+
nav a:visited, a:link {
22+
color: #607D8B;
23+
}
24+
nav a:hover {
25+
color: #039be5;
26+
background-color: #CFD8DC;
27+
}
28+
nav a.router-link-active {
29+
color: #039be5;
30+
}
31+
/* #enddocregion css */

‎public/docs/_examples/toh-6/ts/app/app.component.ts

+80
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,80 @@
1+
// #docplaster
2+
// #docregion
3+
import { Component } from '@angular/core';
4+
import { RouteConfig, ROUTER_DIRECTIVES, ROUTER_PROVIDERS } from '@angular/router-deprecated';
5+
6+
import { DashboardComponent } from './dashboard.component';
7+
import { HeroesComponent } from './heroes.component';
8+
import { HeroDetailComponent } from './hero-detail.component';
9+
import { HeroService } from './hero.service';
10+
11+
import { provide } from '@angular/core';
12+
13+
// #docregion http
14+
import { HTTP_PROVIDERS } from '@angular/http';
15+
// #enddocregion http
16+
17+
// #docregion web-api
18+
// These imports are only required for the in-memory web api
19+
import { InMemoryBackendService, SEED_DATA } from 'angular2-in-memory-web-api/core';
20+
import { XHRBackend } from '@angular/http';
21+
import { InMemoryDataService } from './in-memory-data.service';
22+
// #docregion http
23+
24+
@Component({
25+
// ...
26+
// #enddocregion http
27+
// #enddocregion web-api
28+
selector: 'my-app',
29+
30+
template: `
31+
<h1>{{title}}</h1>
32+
<nav>
33+
<a [routerLink]="['Dashboard']">Dashboard</a>
34+
<a [routerLink]="['Heroes']">Heroes</a>
35+
</nav>
36+
<router-outlet></router-outlet>
37+
`,
38+
styleUrls: ['app/app.component.css'],
39+
directives: [ROUTER_DIRECTIVES],
40+
// #docregion http, web-api
41+
providers: [
42+
// ...
43+
// #enddocregion http, web-api
44+
ROUTER_PROVIDERS,
45+
HeroService,
46+
47+
// #docregion http
48+
HTTP_PROVIDERS, // Required registration of HTTP_PROVIDERS
49+
// #enddocregion http
50+
51+
// #docregion web-api
52+
// Only required for the in-memory web api
53+
provide(XHRBackend, { useClass: InMemoryBackendService }), // in-mem server
54+
provide(SEED_DATA, { useClass: InMemoryDataService }) // in-mem server data
55+
// #enddocregion web-api
56+
// #docregion http, web-api
57+
]
58+
})
59+
// #enddocregion http, web-api
60+
@RouteConfig([
61+
{
62+
path: '/dashboard',
63+
name: 'Dashboard',
64+
component: DashboardComponent,
65+
useAsDefault: true
66+
},
67+
{
68+
path: '/detail/:id',
69+
name: 'HeroDetail',
70+
component: HeroDetailComponent
71+
},
72+
{
73+
path: '/heroes',
74+
name: 'Heroes',
75+
component: HeroesComponent
76+
}
77+
])
78+
export class AppComponent {
79+
title = 'Tour of Heroes';
80+
}

‎public/docs/_examples/toh-6/ts/app/dashboard.component.css

+63
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,63 @@
1+
/* #docplaster */
2+
/* #docregion */
3+
[class*='col-'] {
4+
float: left;
5+
}
6+
*, *:after, *:before {
7+
-webkit-box-sizing: border-box;
8+
-moz-box-sizing: border-box;
9+
box-sizing: border-box;
10+
}
11+
h3 {
12+
text-align: center; margin-bottom: 0;
13+
}
14+
[class*='col-'] {
15+
padding-right: 20px;
16+
padding-bottom: 20px;
17+
}
18+
[class*='col-']:last-of-type {
19+
padding-right: 0;
20+
}
21+
.grid {
22+
margin: 0;
23+
}
24+
.col-1-4 {
25+
width: 25%;
26+
}
27+
.module {
28+
padding: 20px;
29+
text-align: center;
30+
color: #eee;
31+
max-height: 120px;
32+
min-width: 120px;
33+
background-color: #607D8B;
34+
border-radius: 2px;
35+
}
36+
h4 {
37+
position: relative;
38+
}
39+
.module:hover {
40+
background-color: #EEE;
41+
cursor: pointer;
42+
color: #607d8b;
43+
}
44+
.grid-pad {
45+
padding: 10px 0;
46+
}
47+
.grid-pad > [class*='col-']:last-of-type {
48+
padding-right: 20px;
49+
}
50+
@media (max-width: 600px) {
51+
.module {
52+
font-size: 10px;
53+
max-height: 75px; }
54+
}
55+
@media (max-width: 1024px) {
56+
.grid {
57+
margin: 0;
58+
}
59+
.module {
60+
min-width: 60px;
61+
}
62+
}
63+
/* #enddocregion */

‎public/docs/_examples/toh-6/ts/app/dashboard.component.html

+11
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
<!-- #docregion -->
2+
<h3>Top Heroes</h3>
3+
<div class="grid grid-pad">
4+
<!-- #docregion click -->
5+
<div *ngFor="let hero of heroes" (click)="gotoDetail(hero)" class="col-1-4">
6+
<!-- #enddocregion click -->
7+
<div class="module hero">
8+
<h4>{{hero.name}}</h4>
9+
</div>
10+
</div>
11+
</div>

‎public/docs/_examples/toh-6/ts/app/dashboard.component.ts

+32
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,32 @@
1+
// #docplaster
2+
// #docregion
3+
import { Component, OnInit } from '@angular/core';
4+
import { Router } from '@angular/router-deprecated';
5+
6+
import { Hero } from './hero';
7+
import { HeroService } from './hero.service';
8+
9+
@Component({
10+
selector: 'my-dashboard',
11+
templateUrl: 'app/dashboard.component.html',
12+
styleUrls: ['app/dashboard.component.css']
13+
})
14+
export class DashboardComponent implements OnInit {
15+
16+
heroes: Hero[] = [];
17+
18+
constructor(
19+
private _router: Router,
20+
private _heroService: HeroService) {
21+
}
22+
23+
ngOnInit() {
24+
this._heroService.getHeroes()
25+
.then(heroes => this.heroes = heroes.slice(1,5));
26+
}
27+
28+
gotoDetail(hero: Hero) {
29+
let link = ['HeroDetail', { id: hero.id }];
30+
this._router.navigate(link);
31+
}
32+
}

‎public/docs/_examples/toh-6/ts/app/hero-detail.component.css

+30
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,30 @@
1+
/* #docregion */
2+
label {
3+
display: inline-block;
4+
width: 3em;
5+
margin: .5em 0;
6+
color: #607D8B;
7+
font-weight: bold;
8+
}
9+
input {
10+
height: 2em;
11+
font-size: 1em;
12+
padding-left: .4em;
13+
}
14+
button {
15+
margin-top: 20px;
16+
font-family: Arial;
17+
background-color: #eee;
18+
border: none;
19+
padding: 5px 10px;
20+
border-radius: 4px;
21+
cursor: pointer; cursor: hand;
22+
}
23+
button:hover {
24+
background-color: #cfd8dc;
25+
}
26+
button:disabled {
27+
background-color: #eee;
28+
color: #ccc;
29+
cursor: auto;
30+
}

0 commit comments

Comments
 (0)