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

Commit b676596

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

25 files changed

+1065
-0
lines changed

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

Lines changed: 133 additions & 0 deletions
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

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
**/*.js

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

Lines changed: 31 additions & 0 deletions
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

Lines changed: 36 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,36 @@
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+
@Component({
12+
selector: 'my-app',
13+
14+
template: `
15+
<h1>{{title}}</h1>
16+
<nav>
17+
<a [routerLink]="['Dashboard']">Dashboard</a>
18+
<a [routerLink]="['Heroes']">Heroes</a>
19+
</nav>
20+
<router-outlet></router-outlet>
21+
`,
22+
styleUrls: ['app/app.component.css'],
23+
directives: [ROUTER_DIRECTIVES],
24+
providers: [
25+
ROUTER_PROVIDERS,
26+
HeroService,
27+
]
28+
})
29+
@RouteConfig([
30+
{ path: '/dashboard', name: 'Dashboard', component: DashboardComponent, useAsDefault: true },
31+
{ path: '/detail/:id', name: 'HeroDetail', component: HeroDetailComponent },
32+
{ path: '/heroes', name: 'Heroes', component: HeroesComponent }
33+
])
34+
export class AppComponent {
35+
title = 'Tour of Heroes';
36+
}

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

Lines changed: 63 additions & 0 deletions
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

Lines changed: 11 additions & 0 deletions
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

Lines changed: 32 additions & 0 deletions
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

Lines changed: 30 additions & 0 deletions
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+
}

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

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
<!-- #docplaster -->
2+
<!-- #docregion -->
3+
<div *ngIf="hero">
4+
<h2>{{hero.name}} details!</h2>
5+
<div>
6+
<label>id: </label>{{hero.id}}</div>
7+
<div>
8+
<label>name: </label>
9+
<input [(ngModel)]="hero.name" placeholder="name" />
10+
</div>
11+
<button (click)="goBack()">Back</button>
12+
<button (click)="save()">Save</button>
13+
</div>

0 commit comments

Comments
 (0)