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

Commit ef6d464

Browse files
FoxandxssFoxandxss
committed
docs(cb-select-box-component): cookbook about creating a select box
1 parent 5fd6ae3 commit ef6d464

24 files changed

+720
-0
lines changed

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

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

‎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: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
// #docregion
2+
import { Component } from '@angular/core';
3+
4+
@Component({
5+
selector: 'my-app',
6+
template: `
7+
<h1>Favorite Hero</h1>
8+
<my-select-verbose></my-select-verbose>
9+
`
10+
})
11+
export class AppComponent {}
12+
// #enddocregion

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

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
// #docregion
2+
import { Component } from '@angular/core';
3+
4+
@Component({
5+
selector: 'my-app',
6+
template: `
7+
<h1>Favorite Hero</h1>
8+
<my-select-verbose></my-select-verbose>
9+
<hr>
10+
<my-selector-host></my-selector-host>
11+
`
12+
})
13+
export class AppComponent {}
14+
// #enddocregion

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

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
import { NgModule } from '@angular/core';
2+
import { BrowserModule } from '@angular/platform-browser';
3+
4+
import { AppComponent } from './app.component';
5+
import { SelectVerboseComponent } from './select-verbose.component';
6+
import { SelectorHostComponent } from './selector-host.component';
7+
import { SelectorComponent } from './selector.component';
8+
import { HeroStoreService } from './hero-store.service';
9+
10+
@NgModule({
11+
imports: [ BrowserModule ],
12+
declarations: [
13+
AppComponent,
14+
SelectVerboseComponent,
15+
SelectorHostComponent,
16+
SelectorComponent
17+
],
18+
providers: [ HeroStoreService ],
19+
bootstrap: [ AppComponent ]
20+
})
21+
export class AppModule {}

‎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 '@angular/core';
3+
4+
export interface Hero {
5+
id: number;
6+
name: string;
7+
}
8+
9+
@Injectable()
10+
export class HeroStoreService {
11+
get heroes(): Hero[] { 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 { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
2+
3+
import { AppModule } from './app.module';
4+
5+
platformBrowserDynamic().bootstrapModule(AppModule);

‎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="let 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 '@angular/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(): void {
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="let hero of heroes, let 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 -->

0 commit comments

Comments
 (0)