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

Commit

Permalink
docs(cb-barrels): add barrels cookbook
Browse files Browse the repository at this point in the history
  • Loading branch information
jmcooper authored and wardbell committed May 21, 2016
1 parent 33b5829 commit 9f83cf5
Show file tree
Hide file tree
Showing 28 changed files with 659 additions and 0 deletions.
110 changes: 110 additions & 0 deletions public/docs/_examples/cb-barrels/e2e-spec.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,110 @@
describe('Tutorial', function () {

beforeAll(function () {
browser.get('');
});

function getPageStruct() {
hrefEles = element.all(by.css('my-app a'));

return {
hrefs: hrefEles,
myDashboardHref: hrefEles.get(0),
myDashboardParent: element(by.css('my-app my-dashboard')),
topHeroes: element.all(by.css('my-app my-dashboard .module.hero')),

myHeroesHref: hrefEles.get(1),
myHeroesParent: element(by.css('my-app my-heroes')),
allHeroes: element.all(by.css('my-app my-heroes li')),

heroDetail: element(by.css('my-app my-hero-detail'))
}
}

it('should be able to see the start screen', function () {
var page = getPageStruct();
expect(page.hrefs.count()).toEqual(2, 'should be two dashboard choices');
expect(page.myDashboardHref.getText()).toEqual("Dashboard");
expect(page.myHeroesHref.getText()).toEqual("Heroes");
});

it('should be able to see dashboard choices', function () {
var page = getPageStruct();
expect(page.topHeroes.count()).toBe(4, "should be 4 dashboard hero choices");
});

it('should be able to toggle the views', function () {
var page = getPageStruct();

expect(page.myDashboardParent.element(by.css('h3')).getText()).toEqual('Top Heroes');
page.myHeroesHref.click().then(function() {
expect(page.myDashboardParent.isPresent()).toBe(false, 'should no longer see dashboard element');
expect(page.allHeroes.count()).toBeGreaterThan(4, "should be more than 4 heroes shown");
return page.myDashboardHref.click();
}).then(function() {
expect(page.myDashboardParent.isPresent()).toBe(true, 'should once again see the dashboard element');
});

});

it('should be able to edit details from "Dashboard" view', function () {
var page = getPageStruct();
expect(page.myDashboardParent.isPresent()).toBe(true, 'dashboard element should be available');
var heroEle = page.topHeroes.get(3);
var heroDescrEle = heroEle.element(by.css('h4'));
var heroDescr;
return heroDescrEle.getText().then(function(text) {
heroDescr = text;
return heroEle.click();
}).then(function() {
return editDetails(page, heroDescr, '-foo');
}).then(function() {
expect(page.myDashboardParent.isPresent()).toBe(true, 'dashboard element should be back');
expect(heroDescrEle.getText()).toEqual(heroDescr + '-foo');
});
});

it('should be able to edit details from "Heroes" view', function () {
var page = getPageStruct();
expect(page.myDashboardParent.isPresent()).toBe(true, 'dashboard element should be present');
var viewDetailsButtonEle = page.myHeroesParent.element(by.cssContainingText('button', 'View Details'));
var heroEle, heroDescr;
page.myHeroesHref.click().then(function() {
expect(page.myDashboardParent.isPresent()).toBe(false, 'dashboard element should NOT be present');
expect(page.myHeroesParent.isPresent()).toBe(true, 'myHeroes element should be present');
expect(viewDetailsButtonEle.isPresent()).toBe(false, 'viewDetails button should not yet be present');
heroEle = page.allHeroes.get(2);
return heroEle.getText();
}).then(function(text) {
// remove leading 'id' from the element
heroDescr = text.substr(text.indexOf(' ')+1);
return heroEle.click();
}).then(function() {
expect(viewDetailsButtonEle.isDisplayed()).toBe(true, 'viewDetails button should now be visible');
return viewDetailsButtonEle.click();
}).then(function() {
return editDetails(page, heroDescr, '-bar');
}).then(function() {
expect(page.myHeroesParent.isPresent()).toBe(true, 'myHeroes element should be back');
expect(heroEle.getText()).toContain(heroDescr + '-bar');
expect(viewDetailsButtonEle.isPresent()).toBe(false, 'viewDetails button should again NOT be present');
});
});

function editDetails(page, origValue, textToAdd) {
expect(page.myDashboardParent.isPresent()).toBe(false, 'dashboard element should NOT be present');
expect(page.myHeroesParent.isPresent()).toBe(false, 'myHeroes element should NOT be present');
expect(page.heroDetail.isDisplayed()).toBe(true, 'should be able to see hero-details');
var inputEle = page.heroDetail.element(by.css('input'));
expect(inputEle.isDisplayed()).toBe(true, 'should be able to see the input box');
var backButtonEle = page.heroDetail.element(by.css('button'));
expect(backButtonEle.isDisplayed()).toBe(true, 'should be able to see the back button');
var detailTextEle = page.heroDetail.element(by.css('div h2'));
expect(detailTextEle.getText()).toContain(origValue);
return sendKeys(inputEle, textToAdd).then(function () {
expect(detailTextEle.getText()).toContain(origValue + textToAdd);
return backButtonEle.click();
});
}

});
28 changes: 28 additions & 0 deletions public/docs/_examples/cb-barrels/ts/app/app.component.css
Original file line number Diff line number Diff line change
@@ -0,0 +1,28 @@
nav a {
padding: 5px 10px;
text-decoration: none;
margin-top: 10px;
display: inline-block;
background-color: #eee;
border-radius: 4px;
}
nav a:visited, a:link {
color: #607D8B;
}
nav a:hover {
color: #039be5;
background-color: #CFD8DC;
}
nav a.router-link-active {
color: #039be5;
}
h1 {
font-size: 1.2em;
color: #999;
margin-bottom: 0;
}
h2 {
font-size: 2em;
margin-top: 0;
padding-top: 0;
}
30 changes: 30 additions & 0 deletions public/docs/_examples/cb-barrels/ts/app/app.component.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,30 @@
// #docregion imports
import { Component } from '@angular/core';
import { RouteConfig, ROUTER_DIRECTIVES } from '@angular/router-deprecated';
import { HeroesComponent, HeroDetailComponent, HeroService } from './heroes';
import { DashboardComponent } from './dashboard.component';

@Component({
// #enddocregion
selector: 'my-app',
template: `
<h1>{{title}}</h1>
<nav>
<a [routerLink]="['Dashboard']">Dashboard</a>
<a [routerLink]="['Heroes']">Heroes</a>
</nav>
<router-outlet></router-outlet>
`,
styleUrls: ['app/app.component.css'],
directives: [ROUTER_DIRECTIVES],
providers: [HeroService]
})
@RouteConfig([
// {path: '/', redirectTo: ['Dashboard'] },
{path: '/dashboard', name: 'Dashboard', component: DashboardComponent, useAsDefault: true},
{path: '/heroes', name: 'Heroes', component: HeroesComponent},
{path: '/detail/:id', name: 'HeroDetail', component: HeroDetailComponent}
])
export class AppComponent {
title = 'Tour of Heroes - Barrels';
}
60 changes: 60 additions & 0 deletions public/docs/_examples/cb-barrels/ts/app/dashboard.component.css
Original file line number Diff line number Diff line change
@@ -0,0 +1,60 @@
[class*='col-'] {
float: left;
}
*, *:after, *:before {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
h3 {
text-align: center; margin-bottom: 0;
}
[class*='col-'] {
padding-right: 20px;
padding-bottom: 20px;
}
[class*='col-']:last-of-type {
padding-right: 0;
}
.grid {
margin: 0;
}
.col-1-4 {
width: 25%;
}
.module {
padding: 20px;
text-align: center;
color: #eee;
max-height: 120px;
min-width: 120px;
background-color: #607D8B;
border-radius: 2px;
}
h4 {
position: relative;
}
.module:hover {
background-color: #EEE;
cursor: pointer;
color: #607d8b;
}
.grid-pad {
padding: 10px 0;
}
.grid-pad > [class*='col-']:last-of-type {
padding-right: 20px;
}
@media (max-width: 600px) {
.module {
font-size: 10px;
max-height: 75px; }
}
@media (max-width: 1024px) {
.grid {
margin: 0;
}
.module {
min-width: 60px;
}
}
Original file line number Diff line number Diff line change
@@ -0,0 +1,8 @@
<h3>Top Heroes</h3>
<div class="grid grid-pad">
<div *ngFor="let hero of heroes" class="col-1-4" (click)="gotoDetail(hero)">
<div class="module hero">
<h4>{{hero.name}}</h4>
</div>
</div>
</div>
25 changes: 25 additions & 0 deletions public/docs/_examples/cb-barrels/ts/app/dashboard.component.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,25 @@
// #docregion imports
import { Component, OnInit } from '@angular/core';
import { Router } from '@angular/router-deprecated';
import { Hero, HeroService } from './heroes';

@Component({
// #enddocregion
selector: 'my-dashboard',
templateUrl: 'app/dashboard.component.html',
styleUrls: ['app/dashboard.component.css']
})
export class DashboardComponent implements OnInit {
heroes: Hero[] = [];

constructor(private heroService: HeroService, private _router: Router) { }

ngOnInit() {
this.heroService.getHeroes().then(heroes => this.heroes = heroes.slice(1,5));
}

gotoDetail(hero: Hero) {
let link = ['HeroDetail', { id: hero.id }];
this._router.navigate(link);
}
}
Original file line number Diff line number Diff line change
@@ -0,0 +1,29 @@
label {
display: inline-block;
width: 3em;
margin: .5em 0;
color: #607D8B;
font-weight: bold;
}
input {
height: 2em;
font-size: 1em;
padding-left: .4em;
}
button {
margin-top: 20px;
font-family: Arial;
background-color: #eee;
border: none;
padding: 5px 10px;
border-radius: 4px;
cursor: pointer; cursor: hand;
}
button:hover {
background-color: #cfd8dc;
}
button:disabled {
background-color: #eee;
color: #ccc;
cursor: auto;
}
Original file line number Diff line number Diff line change
@@ -0,0 +1,10 @@
<div *ngIf="hero">
<h2>{{hero.name}} details!</h2>
<div>
<label>id: </label>{{hero.id}}</div>
<div>
<label>name: </label>
<input [(ngModel)]="hero.name" placeholder="name"/>
</div>
<button (click)="goBack()">Back</button>
</div>
Original file line number Diff line number Diff line change
@@ -0,0 +1,27 @@
// #docregion imports
import { Component, OnInit } from '@angular/core';
import { RouteParams } from '@angular/router-deprecated';
import { HeroService, Hero } from '../shared';

@Component({
// #enddocregion
selector: 'my-hero-detail',
templateUrl: 'app/heroes/hero-detail/hero-detail.component.html',
styleUrls: ['app/heroes/hero-detail/hero-detail.component.css']
})
export class HeroDetailComponent implements OnInit {
hero: Hero;

constructor(private heroService: HeroService,
private routeParams: RouteParams) {
}

ngOnInit() {
let id = +this.routeParams.get('id');
this.heroService.getHero(id).then(hero => this.hero = hero);
}

goBack() {
window.history.back();
}
}
Original file line number Diff line number Diff line change
@@ -0,0 +1,2 @@
// #docregion
export * from './hero-detail.component';
Original file line number Diff line number Diff line change
@@ -0,0 +1,59 @@
.selected {
background-color: #CFD8DC !important;
color: white;
}
.heroes {
margin: 0 0 2em 0;
list-style-type: none;
padding: 0;
width: 15em;
}
.heroes li {
cursor: pointer;
position: relative;
left: 0;
background-color: #EEE;
margin: .5em;
padding: .3em 0;
height: 1.6em;
border-radius: 4px;
}
.heroes li:hover {
color: #607D8B;
background-color: #DDD;
left: .1em;
}
.heroes li.selected:hover {
background-color: #BBD8DC !important;
color: white;
}
.heroes .text {
position: relative;
top: -3px;
}
.heroes .badge {
display: inline-block;
font-size: small;
color: white;
padding: 0.8em 0.7em 0 0.7em;
background-color: #607D8B;
line-height: 1em;
position: relative;
left: -1px;
top: -4px;
height: 1.8em;
margin-right: .8em;
border-radius: 4px 0 0 4px;
}
button {
font-family: Arial;
background-color: #eee;
border: none;
padding: 5px 10px;
border-radius: 4px;
cursor: pointer;
cursor: hand;
}
button:hover {
background-color: #cfd8dc;
}
Loading

0 comments on commit 9f83cf5

Please sign in to comment.