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

Commit af0a569

Browse files
jmcooperwardbell
jmcooper
authored and
wardbell
committed
docs(cb-barrels): add barrels cookbook
1 parent 33b5829 commit af0a569

24 files changed

+646
-0
lines changed

‎public/docs/_examples/cb-barrels/e2e-spec.js

+110
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,110 @@
1+
describe('Tutorial', function () {
2+
3+
beforeAll(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')),
19+
20+
heroDetail: element(by.css('my-app my-hero-detail'))
21+
}
22+
}
23+
24+
it('should be able to see the start screen', function () {
25+
var page = getPageStruct();
26+
expect(page.hrefs.count()).toEqual(2, 'should be two dashboard choices');
27+
expect(page.myDashboardHref.getText()).toEqual("Dashboard");
28+
expect(page.myHeroesHref.getText()).toEqual("Heroes");
29+
});
30+
31+
it('should be able to see dashboard choices', function () {
32+
var page = getPageStruct();
33+
expect(page.topHeroes.count()).toBe(4, "should be 4 dashboard hero choices");
34+
});
35+
36+
it('should be able to toggle the views', function () {
37+
var page = getPageStruct();
38+
39+
expect(page.myDashboardParent.element(by.css('h3')).getText()).toEqual('Top Heroes');
40+
page.myHeroesHref.click().then(function() {
41+
expect(page.myDashboardParent.isPresent()).toBe(false, 'should no longer see dashboard element');
42+
expect(page.allHeroes.count()).toBeGreaterThan(4, "should be more than 4 heroes shown");
43+
return page.myDashboardHref.click();
44+
}).then(function() {
45+
expect(page.myDashboardParent.isPresent()).toBe(true, 'should once again see the dashboard element');
46+
});
47+
48+
});
49+
50+
it('should be able to edit details from "Dashboard" view', function () {
51+
var page = getPageStruct();
52+
expect(page.myDashboardParent.isPresent()).toBe(true, 'dashboard element should be available');
53+
var heroEle = page.topHeroes.get(3);
54+
var heroDescrEle = heroEle.element(by.css('h4'));
55+
var heroDescr;
56+
return heroDescrEle.getText().then(function(text) {
57+
heroDescr = text;
58+
return heroEle.click();
59+
}).then(function() {
60+
return editDetails(page, heroDescr, '-foo');
61+
}).then(function() {
62+
expect(page.myDashboardParent.isPresent()).toBe(true, 'dashboard element should be back');
63+
expect(heroDescrEle.getText()).toEqual(heroDescr + '-foo');
64+
});
65+
});
66+
67+
it('should be able to edit details from "Heroes" view', function () {
68+
var page = getPageStruct();
69+
expect(page.myDashboardParent.isPresent()).toBe(true, 'dashboard element should be present');
70+
var viewDetailsButtonEle = page.myHeroesParent.element(by.cssContainingText('button', 'View Details'));
71+
var heroEle, heroDescr;
72+
page.myHeroesHref.click().then(function() {
73+
expect(page.myDashboardParent.isPresent()).toBe(false, 'dashboard element should NOT be present');
74+
expect(page.myHeroesParent.isPresent()).toBe(true, 'myHeroes element should be present');
75+
expect(viewDetailsButtonEle.isPresent()).toBe(false, 'viewDetails button should not yet be present');
76+
heroEle = page.allHeroes.get(2);
77+
return heroEle.getText();
78+
}).then(function(text) {
79+
// remove leading 'id' from the element
80+
heroDescr = text.substr(text.indexOf(' ')+1);
81+
return heroEle.click();
82+
}).then(function() {
83+
expect(viewDetailsButtonEle.isDisplayed()).toBe(true, 'viewDetails button should now be visible');
84+
return viewDetailsButtonEle.click();
85+
}).then(function() {
86+
return editDetails(page, heroDescr, '-bar');
87+
}).then(function() {
88+
expect(page.myHeroesParent.isPresent()).toBe(true, 'myHeroes element should be back');
89+
expect(heroEle.getText()).toContain(heroDescr + '-bar');
90+
expect(viewDetailsButtonEle.isPresent()).toBe(false, 'viewDetails button should again NOT be present');
91+
});
92+
});
93+
94+
function editDetails(page, origValue, textToAdd) {
95+
expect(page.myDashboardParent.isPresent()).toBe(false, 'dashboard element should NOT be present');
96+
expect(page.myHeroesParent.isPresent()).toBe(false, 'myHeroes element should NOT be present');
97+
expect(page.heroDetail.isDisplayed()).toBe(true, 'should be able to see hero-details');
98+
var inputEle = page.heroDetail.element(by.css('input'));
99+
expect(inputEle.isDisplayed()).toBe(true, 'should be able to see the input box');
100+
var backButtonEle = page.heroDetail.element(by.css('button'));
101+
expect(backButtonEle.isDisplayed()).toBe(true, 'should be able to see the back button');
102+
var detailTextEle = page.heroDetail.element(by.css('div h2'));
103+
expect(detailTextEle.getText()).toContain(origValue);
104+
return sendKeys(inputEle, textToAdd).then(function () {
105+
expect(detailTextEle.getText()).toContain(origValue + textToAdd);
106+
return backButtonEle.click();
107+
});
108+
}
109+
110+
});

‎public/docs/_examples/cb-barrels/ts/app/app.component.css

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

‎public/docs/_examples/cb-barrels/ts/app/app.component.ts

+30
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,30 @@
1+
// #docregion imports
2+
import { Component } from '@angular/core';
3+
import { RouteConfig, ROUTER_DIRECTIVES } from '@angular/router-deprecated';
4+
import { HeroesComponent, HeroDetailComponent, HeroService } from './heroes';
5+
import { DashboardComponent } from './dashboard.component';
6+
7+
@Component({
8+
// #enddocregion
9+
selector: 'my-app',
10+
template: `
11+
<h1>{{title}}</h1>
12+
<nav>
13+
<a [routerLink]="['Dashboard']">Dashboard</a>
14+
<a [routerLink]="['Heroes']">Heroes</a>
15+
</nav>
16+
<router-outlet></router-outlet>
17+
`,
18+
styleUrls: ['app/app.component.css'],
19+
directives: [ROUTER_DIRECTIVES],
20+
providers: [HeroService]
21+
})
22+
@RouteConfig([
23+
// {path: '/', redirectTo: ['Dashboard'] },
24+
{path: '/dashboard', name: 'Dashboard', component: DashboardComponent, useAsDefault: true},
25+
{path: '/heroes', name: 'Heroes', component: HeroesComponent},
26+
{path: '/detail/:id', name: 'HeroDetail', component: HeroDetailComponent}
27+
])
28+
export class AppComponent {
29+
title = 'Tour of Heroes - Barrels';
30+
}

‎public/docs/_examples/cb-barrels/ts/app/dashboard.component.css

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

‎public/docs/_examples/cb-barrels/ts/app/dashboard.component.html

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

‎public/docs/_examples/cb-barrels/ts/app/dashboard.component.ts

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

‎public/docs/_examples/cb-barrels/ts/app/heroes/hero-detail/hero-detail.component.css

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

‎public/docs/_examples/cb-barrels/ts/app/heroes/hero-detail/hero-detail.component.html

+10
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
<div *ngIf="hero">
2+
<h2>{{hero.name}} details!</h2>
3+
<div>
4+
<label>id: </label>{{hero.id}}</div>
5+
<div>
6+
<label>name: </label>
7+
<input [(ngModel)]="hero.name" placeholder="name"/>
8+
</div>
9+
<button (click)="goBack()">Back</button>
10+
</div>

‎public/docs/_examples/cb-barrels/ts/app/heroes/hero-detail/hero-detail.component.ts

+27
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,27 @@
1+
// #docregion imports
2+
import { Component, OnInit } from '@angular/core';
3+
import { RouteParams } from '@angular/router-deprecated';
4+
import { HeroService, Hero } from '../shared';
5+
6+
@Component({
7+
// #enddocregion
8+
selector: 'my-hero-detail',
9+
templateUrl: 'app/heroes/hero-detail/hero-detail.component.html',
10+
styleUrls: ['app/heroes/hero-detail/hero-detail.component.css']
11+
})
12+
export class HeroDetailComponent implements OnInit {
13+
hero: Hero;
14+
15+
constructor(private heroService: HeroService,
16+
private routeParams: RouteParams) {
17+
}
18+
19+
ngOnInit() {
20+
let id = +this.routeParams.get('id');
21+
this.heroService.getHero(id).then(hero => this.hero = hero);
22+
}
23+
24+
goBack() {
25+
window.history.back();
26+
}
27+
}

‎public/docs/_examples/cb-barrels/ts/app/heroes/hero-detail/index.ts

+2
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,2 @@
1+
// #docregion
2+
export * from './hero-detail.component';

‎public/docs/_examples/cb-barrels/ts/app/heroes/heroes.component.css

+59
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,59 @@
1+
.selected {
2+
background-color: #CFD8DC !important;
3+
color: white;
4+
}
5+
.heroes {
6+
margin: 0 0 2em 0;
7+
list-style-type: none;
8+
padding: 0;
9+
width: 15em;
10+
}
11+
.heroes li {
12+
cursor: pointer;
13+
position: relative;
14+
left: 0;
15+
background-color: #EEE;
16+
margin: .5em;
17+
padding: .3em 0;
18+
height: 1.6em;
19+
border-radius: 4px;
20+
}
21+
.heroes li:hover {
22+
color: #607D8B;
23+
background-color: #DDD;
24+
left: .1em;
25+
}
26+
.heroes li.selected:hover {
27+
background-color: #BBD8DC !important;
28+
color: white;
29+
}
30+
.heroes .text {
31+
position: relative;
32+
top: -3px;
33+
}
34+
.heroes .badge {
35+
display: inline-block;
36+
font-size: small;
37+
color: white;
38+
padding: 0.8em 0.7em 0 0.7em;
39+
background-color: #607D8B;
40+
line-height: 1em;
41+
position: relative;
42+
left: -1px;
43+
top: -4px;
44+
height: 1.8em;
45+
margin-right: .8em;
46+
border-radius: 4px 0 0 4px;
47+
}
48+
button {
49+
font-family: Arial;
50+
background-color: #eee;
51+
border: none;
52+
padding: 5px 10px;
53+
border-radius: 4px;
54+
cursor: pointer;
55+
cursor: hand;
56+
}
57+
button:hover {
58+
background-color: #cfd8dc;
59+
}

0 commit comments

Comments
 (0)