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

Commit 17ca2f8

Browse files
FoxandxssFoxandxss
committed
docs(cb-select-box-component): cookbook about creating a select box
1 parent 3b768a3 commit 17ca2f8

23 files changed

+719
-0
lines changed

‎public/docs/_examples/cb-select-box-component/e2e-spec.js

Lines changed: 158 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,158 @@
1+
var heroes = [
2+
{"id": 11, "name": "Mr. Nice"},
3+
{"id": 12, "name": "Narco"},
4+
{"id": 13, "name": "Bombasto"},
5+
{"id": 14, "name": "Celeritas"},
6+
{"id": 15, "name": "Magneta"},
7+
{"id": 16, "name": "RubberMan"},
8+
{"id": 17, "name": "Dynama"},
9+
{"id": 18, "name": "Dr IQ"},
10+
{"id": 19, "name": "Magma"},
11+
{"id": 20, "name": "Tornado"}
12+
];
13+
14+
describe('Select box component', function () {
15+
16+
beforeAll(function () {
17+
browser.get('');
18+
});
19+
20+
describe('Verbose select', function () {
21+
var verboseComponent, firstSelect;
22+
23+
beforeEach(function () {
24+
verboseComponent = element.all(by.tagName('my-select-verbose')).get(0);
25+
firstSelect = verboseComponent.all(by.tagName('select')).get(0);
26+
});
27+
28+
it('should show a selected hero both in the select and outside it', function () {
29+
firstSelect.getAttribute('value').then(function (hero) {
30+
expect(heroes[hero].name).toEqual('Narco');
31+
});
32+
33+
var heroOnPTag = verboseComponent.all(by.tagName('p')).last().getText();
34+
expect(heroOnPTag).toContain('Narco');
35+
});
36+
37+
it('should change the selected hero on option change', function () {
38+
firstSelect.all(by.cssContainingText('option', 'Bombasto')).first().click();
39+
40+
firstSelect.getAttribute('value').then(function (hero) {
41+
expect(heroes[hero].name).toEqual('Bombasto');
42+
});
43+
44+
var heroOnPTag = verboseComponent.all(by.tagName('p')).last().getText();
45+
expect(heroOnPTag).toContain('Bombasto');
46+
});
47+
48+
it('should change select collection on button clicks', function () {
49+
var reloadButton = verboseComponent.all(by.buttonText('Reload'));
50+
var clearButton = verboseComponent.all(by.buttonText('Clear'));
51+
var removeButton = verboseComponent.all(by.buttonText('Remove'));
52+
53+
var options = firstSelect.all(by.tagName('option'));
54+
expect(options.count()).toBe(10);
55+
56+
removeButton.click().then(function () {
57+
options = firstSelect.all(by.tagName('option'));
58+
expect(options.count()).toBe(9);
59+
60+
clearButton.click().then(function () {
61+
options = firstSelect.all(by.tagName('option'));
62+
expect(options.count()).toBe(0);
63+
64+
reloadButton.click().then(function () {
65+
options = firstSelect.all(by.tagName('option'));
66+
expect(options.count()).toBe(10);
67+
});
68+
});
69+
});
70+
});
71+
});
72+
73+
describe('First selector', function () {
74+
var selectorComponent, firstSelector;
75+
76+
beforeEach(function () {
77+
selectorComponent = element.all(by.tagName('my-selector-host')).get(0);
78+
firstSelector = selectorComponent.all(by.tagName('select')).get(0);
79+
});
80+
81+
it('should show a selected hero both in the select and outside it', function () {
82+
firstSelector.getAttribute('value').then(function (hero) {
83+
expect(heroes[hero].name).toEqual('Mr. Nice');
84+
});
85+
86+
var firstSelectorOutput = selectorComponent.all(by.tagName('div')).get(0);
87+
var heroOnPTag = firstSelectorOutput.all(by.tagName('p')).last().getText();
88+
expect(heroOnPTag).toContain('Mr. Nice');
89+
});
90+
91+
it('should change the selected hero on option change', function () {
92+
firstSelector.all(by.cssContainingText('option', 'Bombasto')).first().click();
93+
94+
firstSelector.getAttribute('value').then(function (hero) {
95+
expect(heroes[hero].name).toEqual('Bombasto');
96+
});
97+
98+
var firstSelectorOutput = selectorComponent.all(by.tagName('div')).get(0);
99+
var heroOnPTag = firstSelectorOutput.all(by.tagName('p')).last().getText();
100+
expect(heroOnPTag).toContain('Bombasto');
101+
});
102+
103+
it('should change select collection on button clicks', function () {
104+
var reloadButton = selectorComponent.all(by.buttonText('Reload'));
105+
var clearButton = selectorComponent.all(by.buttonText('Clear'));
106+
var removeButton = selectorComponent.all(by.buttonText('Remove'));
107+
108+
var options = firstSelector.all(by.tagName('option'));
109+
expect(options.count()).toBe(10);
110+
111+
removeButton.click().then(function () {
112+
options = firstSelector.all(by.tagName('option'));
113+
expect(options.count()).toBe(9);
114+
115+
clearButton.click().then(function () {
116+
options = firstSelector.all(by.tagName('option'));
117+
expect(options.count()).toBe(0);
118+
119+
reloadButton.click().then(function () {
120+
options = firstSelector.all(by.tagName('option'));
121+
expect(options.count()).toBe(10);
122+
});
123+
});
124+
});
125+
});
126+
});
127+
128+
describe('Second selector', function () {
129+
var selectorComponent, secondSelector;
130+
131+
beforeEach(function () {
132+
selectorComponent = element.all(by.tagName('my-selector-host')).get(0);
133+
secondSelector = selectorComponent.all(by.tagName('select')).get(1);
134+
});
135+
136+
it('should show a selected hero both in the select and outside it', function () {
137+
secondSelector.getAttribute('value').then(function (hero) {
138+
expect(heroes[hero].name).toEqual('Narco');
139+
});
140+
141+
var secondSelectorOutput = selectorComponent.all(by.tagName('div')).get(1);
142+
var heroOnPTag = secondSelectorOutput.all(by.tagName('p')).last().getText();
143+
expect(heroOnPTag).toContain('Narco');
144+
});
145+
146+
it('should change the selected hero on option change', function () {
147+
secondSelector.all(by.cssContainingText('option', 'Bombasto')).first().click();
148+
149+
secondSelector.getAttribute('value').then(function (hero) {
150+
expect(heroes[hero].name).toEqual('Bombasto');
151+
});
152+
153+
var secondSelectorOutput = selectorComponent.all(by.tagName('div')).get(1);
154+
var heroOnPTag = secondSelectorOutput.all(by.tagName('p')).last().getText();
155+
expect(heroOnPTag).toContain('Bombasto');
156+
});
157+
});
158+
});

‎public/docs/_examples/cb-select-box-component/ts/.gitignore

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

‎public/docs/_examples/cb-select-box-component/ts/app/app.component.1.ts

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
// #docregion
2+
import {Component} from 'angular2/core';
3+
4+
import {HeroStoreService} from './hero-store.service';
5+
import {SelectVerboseComponent} from './select-verbose.component';
6+
7+
@Component({
8+
selector: 'my-app',
9+
template: `
10+
<h1>Favorite Hero</h1>
11+
<my-select-verbose></my-select-verbose>
12+
`,
13+
directives: [SelectVerboseComponent],
14+
providers: [HeroStoreService]
15+
})
16+
export class AppComponent {}
17+
// #enddocregion

‎public/docs/_examples/cb-select-box-component/ts/app/app.component.ts

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
// #docregion
2+
import {Component} from 'angular2/core';
3+
4+
import {HeroStoreService} from './hero-store.service';
5+
import {SelectVerboseComponent} from './select-verbose.component';
6+
import {SelectorHostComponent} from './selector-host.component';
7+
8+
@Component({
9+
selector: 'my-app',
10+
template: `
11+
<h1>Favorite Hero</h1>
12+
<my-select-verbose></my-select-verbose>
13+
<hr>
14+
<my-selector-host></my-selector-host>
15+
`,
16+
directives: [SelectVerboseComponent, SelectorHostComponent],
17+
providers: [HeroStoreService]
18+
})
19+
export class AppComponent {}
20+
// #enddocregion

‎public/docs/_examples/cb-select-box-component/ts/app/hero-store.service.ts

Lines changed: 26 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,26 @@
1+
// #docregion
2+
import {Injectable} from 'angular2/core';
3+
4+
export interface Hero {
5+
id: number,
6+
name: string
7+
}
8+
9+
@Injectable()
10+
export class HeroStoreService {
11+
get heroes() { return HeroStoreService.heroCache; }
12+
13+
static heroCache: Hero[] = [
14+
{"id": 11, "name": "Mr. Nice"},
15+
{"id": 12, "name": "Narco"},
16+
{"id": 13, "name": "Bombasto"},
17+
{"id": 14, "name": "Celeritas"},
18+
{"id": 15, "name": "Magneta"},
19+
{"id": 16, "name": "RubberMan"},
20+
{"id": 17, "name": "Dynama"},
21+
{"id": 18, "name": "Dr IQ"},
22+
{"id": 19, "name": "Magma"},
23+
{"id": 20, "name": "Tornado"}
24+
]
25+
}
26+
// #enddocregion

‎public/docs/_examples/cb-select-box-component/ts/app/main.ts

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
import {bootstrap} from 'angular2/platform/browser';
2+
import {AppComponent} from './app.component';
3+
4+
bootstrap(AppComponent, [])
5+
.catch((err:any) => console.error(err));

‎public/docs/_examples/cb-select-box-component/ts/app/select-verbose.component.1.html

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
<!-- #docregion -->
2+
<div>
3+
<h3>Select verbose: List of heroes</h3>
4+
</div>
5+
<div>
6+
<select>
7+
<option *ngFor="#hero of heroes">{{hero.name}}</option>
8+
</select>
9+
10+
<p>Selected Hero</p>
11+
<pre>{{selectedHero | json }}</pre>
12+
<p>Selected hero name = {{selectedHero?.name}}</p>
13+
</div>
14+
<!-- #enddocregion -->

‎public/docs/_examples/cb-select-box-component/ts/app/select-verbose.component.1.ts

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
// #docregion
2+
import {Component, OnInit} from 'angular2/core';
3+
4+
import {Hero, HeroStoreService} from './hero-store.service';
5+
6+
@Component({
7+
selector: 'my-select-verbose',
8+
templateUrl: 'app/select-verbose.component.html'
9+
})
10+
export class SelectVerboseComponent implements OnInit {
11+
heroes: Hero[] = [];
12+
selectedHero: Hero;
13+
14+
constructor(private _store: HeroStoreService) { }
15+
16+
ngOnInit() {
17+
this.heroes = this._store.heroes.slice();
18+
this.selectedHero = this.heroes[1];
19+
}
20+
}
21+
// #enddocregion

‎public/docs/_examples/cb-select-box-component/ts/app/select-verbose.component.html

Lines changed: 22 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,22 @@
1+
<!-- #docregion -->
2+
<!-- #docregion main-content -->
3+
<div>
4+
<h3>Select verbose: List of heroes</h3>
5+
</div>
6+
<div>
7+
<select (change)="onChange($event.target.value)">
8+
<option *ngFor="#hero of heroes, #i=index"
9+
[value]="i"
10+
[selected]="isSelected(hero)"
11+
>{{hero.name}}</option>
12+
</select>
13+
14+
<p>Selected Hero</p>
15+
<pre>{{selectedHero | json }}</pre>
16+
<p>Selected hero name = {{selectedHero?.name}}</p>
17+
</div>
18+
<!-- #enddocregion main-content -->
19+
<button (click)="reload()">Reload</button>
20+
<button (click)="clear()">Clear</button>
21+
<button (click)="removeSelected()">Remove</button>
22+
<!-- #enddocregion -->

‎public/docs/_examples/cb-select-box-component/ts/app/select-verbose.component.ts

Lines changed: 52 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,52 @@
1+
// #docplaster
2+
// #docregion
3+
import {Component, OnInit} from 'angular2/core';
4+
5+
import {Hero, HeroStoreService} from './hero-store.service';
6+
7+
@Component({
8+
selector: 'my-select-verbose',
9+
templateUrl: 'app/select-verbose.component.html'
10+
})
11+
export class SelectVerboseComponent implements OnInit {
12+
heroes: Hero[];
13+
selectedHero: Hero;
14+
15+
constructor(private _store: HeroStoreService) { }
16+
// #docregion buttons-methods
17+
clear() {
18+
this.heroes = undefined;
19+
this.selectedHero = undefined;
20+
}
21+
// #enddocregion buttons-methods
22+
// #docregion select-methods
23+
isSelected(hero: Hero) {
24+
return this.selectedHero && hero.id === this.selectedHero.id;
25+
}
26+
// #enddocregion select-methods
27+
// #docregion buttons-methods
28+
ngOnInit() {
29+
this.reload();
30+
this.selectedHero = this.heroes[1];
31+
}
32+
// #enddocregion buttons-methods
33+
// #docregion select-methods
34+
onChange(index: string) {
35+
this.selectedHero = this.heroes[+index];
36+
}
37+
// #enddocregion select-methods
38+
// #docregion buttons-methods
39+
reload() {
40+
this.heroes = this._store.heroes.slice();
41+
this.selectedHero = this.heroes[0];
42+
}
43+
removeSelected() {
44+
if (this.heroes && this.selectedHero) {
45+
const index = this.heroes.indexOf(this.selectedHero);
46+
this.heroes.splice(index, 1);
47+
this.selectedHero = this.heroes[1];
48+
}
49+
}
50+
// #enddocregion buttons-methods
51+
}
52+
// #enddocregion

‎public/docs/_examples/cb-select-box-component/ts/app/selector-host.component.html

Lines changed: 39 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,39 @@
1+
<!-- #docregion -->
2+
<!-- #docregion first-selector -->
3+
<h3>SelectedHero Selector - [key] (change)</h3>
4+
<div>
5+
<label for='sh'>Select Hero: </label>
6+
7+
<my-selector id='sh'
8+
[key]="selectedHero?.id"
9+
[options]="heroes"
10+
(change)="selectedHero=$event"></my-selector>
11+
12+
<p>Selected Hero</p>
13+
<pre>{{selectedHero | json}}</pre>
14+
<p>Selected hero name = {{selectedHero?.name}}</p>
15+
</div>
16+
<!-- #enddocregion first-selector -->
17+
18+
<!-- #docregion buttons -->
19+
<button (click)="reload()">Reload</button>
20+
<button (click)="clear()">Clear</button>
21+
<button (click)="removeSelected()">Remove</button>
22+
<!-- #enddocregion buttons -->
23+
24+
<!-- #docregion second-selector -->
25+
<h3>Fan.Hero Selector - [(key)]</h3>
26+
27+
<div>
28+
<label for='hf'>Select Fan's hero: </label>
29+
30+
<my-selector id='hf'
31+
[(key)]="heroFan && heroFan.heroId"
32+
[options]="heroes"></my-selector>
33+
34+
<p>Hero Fan</p>
35+
<pre>{{heroFan | json}}</pre>
36+
<p>Fan's hero name = {{heroFan?.heroName}}</p>
37+
</div>
38+
<!-- #enddocregion second-selector -->
39+
<!-- #enddocregion -->

0 commit comments

Comments
 (0)