docs(cb-select-box-component): cookbook about creating a select box

Author: Foxandxss

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

@@ -0,0 +1,164 @@
+/// <reference path='../_protractor/e2e.d.ts' />
+'use strict';
+
+const heroes = [
+  {'id': 11, 'name': 'Mr. Nice'},
+  {'id': 12, 'name': 'Narco'},
+  {'id': 13, 'name': 'Bombasto'},
+  {'id': 14, 'name': 'Celeritas'},
+  {'id': 15, 'name': 'Magneta'},
+  {'id': 16, 'name': 'RubberMan'},
+  {'id': 17, 'name': 'Dynama'},
+  {'id': 18, 'name': 'Dr IQ'},
+  {'id': 19, 'name': 'Magma'},
+  {'id': 20, 'name': 'Tornado'}
+];
+
+describe('Select box component', function () {
+
+  beforeAll(function () {
+    browser.get('');
+  });
+
+  describe('Verbose select', function () {
+    let verboseComponent: protractor.ElementFinder;
+    let firstSelect: protractor.ElementFinder;
+
+    beforeEach(function () {
+      verboseComponent = element.all(by.tagName('my-select-verbose')).get(0);
+      firstSelect = verboseComponent.all(by.tagName('select')).get(0);
+    });
+
+    it('should show a selected hero both in the select and outside it', function () {
+      firstSelect.getAttribute('value').then(function (hero: any) {
+        expect(heroes[hero].name).toEqual('Narco');
+      });
+
+      const heroOnPTag = verboseComponent.all(by.tagName('p')).last().getText();
+      expect(heroOnPTag).toContain('Narco');
+    });
+
+    it('should change the selected hero on option change', function () {
+      firstSelect.all(by.cssContainingText('option', 'Bombasto')).first().click();
+
+      firstSelect.getAttribute('value').then(function (hero: any) {
+        expect(heroes[hero].name).toEqual('Bombasto');
+      });
+
+      const heroOnPTag = verboseComponent.all(by.tagName('p')).last().getText();
+      expect(heroOnPTag).toContain('Bombasto');
+    });
+
+    it('should change select collection on button clicks', function () {
+      const reloadButton = verboseComponent.all(by.buttonText('Reload'));
+      const clearButton = verboseComponent.all(by.buttonText('Clear'));
+      const removeButton = verboseComponent.all(by.buttonText('Remove'));
+
+      let options = firstSelect.all(by.tagName('option'));
+      expect(options.count()).toBe(10);
+
+      removeButton.click().then(function () {
+        options = firstSelect.all(by.tagName('option'));
+        expect(options.count()).toBe(9);
+
+        clearButton.click().then(function () {
+          options = firstSelect.all(by.tagName('option'));
+          expect(options.count()).toBe(0);
+
+          reloadButton.click().then(function () {
+            options = firstSelect.all(by.tagName('option'));
+          expect(options.count()).toBe(10);
+          });
+        });
+      });
+    });
+  });
+
+  describe('First selector', function () {
+    let selectorComponent: protractor.ElementFinder;
+    let firstSelector: protractor.ElementFinder;
+
+    beforeEach(function () {
+      selectorComponent = element.all(by.tagName('my-selector-host')).get(0);
+      firstSelector = selectorComponent.all(by.tagName('select')).get(0);
+    });
+
+    it('should show a selected hero both in the select and outside it', function () {
+      firstSelector.getAttribute('value').then(function (hero: any) {
+        expect(heroes[hero].name).toEqual('Mr. Nice');
+      });
+
+      const firstSelectorOutput = selectorComponent.all(by.tagName('div')).get(0);
+      const heroOnPTag = firstSelectorOutput.all(by.tagName('p')).last().getText();
+      expect(heroOnPTag).toContain('Mr. Nice');
+    });
+
+    it('should change the selected hero on option change', function () {
+      firstSelector.all(by.cssContainingText('option', 'Bombasto')).first().click();
+
+      firstSelector.getAttribute('value').then(function (hero: any) {
+        expect(heroes[hero].name).toEqual('Bombasto');
+      });
+
+      const firstSelectorOutput = selectorComponent.all(by.tagName('div')).get(0);
+      const heroOnPTag = firstSelectorOutput.all(by.tagName('p')).last().getText();
+      expect(heroOnPTag).toContain('Bombasto');
+    });
+
+    it('should change select collection on button clicks', function () {
+      const reloadButton = selectorComponent.all(by.buttonText('Reload'));
+      const clearButton = selectorComponent.all(by.buttonText('Clear'));
+      const removeButton = selectorComponent.all(by.buttonText('Remove'));
+
+      let options = firstSelector.all(by.tagName('option'));
+      expect(options.count()).toBe(10);
+
+      removeButton.click().then(function () {
+        options = firstSelector.all(by.tagName('option'));
+        expect(options.count()).toBe(9);
+
+        clearButton.click().then(function () {
+          options = firstSelector.all(by.tagName('option'));
+          expect(options.count()).toBe(0);
+
+          reloadButton.click().then(function () {
+            options = firstSelector.all(by.tagName('option'));
+          expect(options.count()).toBe(10);
+          });
+        });
+      });
+    });
+  });
+
+  describe('Second selector', function () {
+    let selectorComponent: protractor.ElementFinder;
+    let secondSelector: protractor.ElementFinder;
+
+    beforeEach(function () {
+      selectorComponent = element.all(by.tagName('my-selector-host')).get(0);
+      secondSelector = selectorComponent.all(by.tagName('select')).get(1);
+    });
+
+    it('should show a selected hero both in the select and outside it', function () {
+      secondSelector.getAttribute('value').then(function (hero: any) {
+        expect(heroes[hero].name).toEqual('Narco');
+      });
+
+      const secondSelectorOutput = selectorComponent.all(by.tagName('div')).get(1);
+      const heroOnPTag = secondSelectorOutput.all(by.tagName('p')).last().getText();
+      expect(heroOnPTag).toContain('Narco');
+    });
+
+    it('should change the selected hero on option change', function () {
+      secondSelector.all(by.cssContainingText('option', 'Bombasto')).first().click();
+
+      secondSelector.getAttribute('value').then(function (hero: any) {
+        expect(heroes[hero].name).toEqual('Bombasto');
+      });
+
+      const secondSelectorOutput = selectorComponent.all(by.tagName('div')).get(1);
+      const heroOnPTag = secondSelectorOutput.all(by.tagName('p')).last().getText();
+      expect(heroOnPTag).toContain('Bombasto');
+    });
+  });
+});

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

@@ -0,0 +1 @@
+**/*.js

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

@@ -0,0 +1,12 @@
+// #docregion
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'my-app',
+  template: `
+    <h1>Favorite Hero</h1>
+    <my-select-verbose></my-select-verbose>
+  `
+})
+export class AppComponent {}
+// #enddocregion

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

@@ -0,0 +1,14 @@
+// #docregion
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'my-app',
+  template: `
+    <h1>Favorite Hero</h1>
+    <my-select-verbose></my-select-verbose>
+    <hr>
+    <my-selector-host></my-selector-host>
+  `
+})
+export class AppComponent {}
+// #enddocregion

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

@@ -0,0 +1,21 @@
+import { NgModule } from '@angular/core';
+import { BrowserModule } from '@angular/platform-browser';
+
+import { AppComponent } from './app.component';
+import { SelectVerboseComponent } from './select-verbose.component';
+import { SelectorHostComponent } from './selector-host.component';
+import { SelectorComponent } from './selector.component';
+import { HeroStoreService } from './hero-store.service';
+
+@NgModule({
+  imports: [ BrowserModule ],
+  declarations: [
+    AppComponent,
+    SelectVerboseComponent,
+    SelectorHostComponent,
+    SelectorComponent
+  ],
+  providers: [ HeroStoreService ],
+  bootstrap: [ AppComponent ]
+})
+export class AppModule {}

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

@@ -0,0 +1,26 @@
+// #docregion
+import { Injectable } from '@angular/core';
+
+export interface Hero {
+  id: number;
+  name: string;
+}
+
+@Injectable()
+export class HeroStoreService {
+  get heroes(): Hero[] { return HeroStoreService.heroCache; }
+
+  static heroCache: Hero[] = [
+    {'id': 11, 'name': 'Mr. Nice'},
+    {'id': 12, 'name': 'Narco'},
+    {'id': 13, 'name': 'Bombasto'},
+    {'id': 14, 'name': 'Celeritas'},
+    {'id': 15, 'name': 'Magneta'},
+    {'id': 16, 'name': 'RubberMan'},
+    {'id': 17, 'name': 'Dynama'},
+    {'id': 18, 'name': 'Dr IQ'},
+    {'id': 19, 'name': 'Magma'},
+    {'id': 20, 'name': 'Tornado'}
+  ];
+}
+// #enddocregion

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

@@ -0,0 +1,5 @@
+import { platformBrowserDynamic }    from '@angular/platform-browser-dynamic';
+
+import { AppModule } from './app.module';
+
+platformBrowserDynamic().bootstrapModule(AppModule);

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

@@ -0,0 +1,14 @@
+<!-- #docregion -->
+<div>
+  <h3>Select verbose: List of heroes</h3>
+</div>
+<div>
+  <select>
+    <option *ngFor="let hero of heroes">{{hero.name}}</option>
+  </select>
+
+  <p>Selected Hero</p>
+  <pre>{{selectedHero | json }}</pre>
+  <p>Selected hero name = {{selectedHero?.name}}</p>
+</div>
+<!-- #enddocregion -->

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

@@ -0,0 +1,21 @@
+// #docregion
+import { Component, OnInit } from '@angular/core';
+
+import { Hero, HeroStoreService } from './hero-store.service';
+
+@Component({
+  selector: 'my-select-verbose',
+  templateUrl: 'app/select-verbose.component.html'
+})
+export class SelectVerboseComponent implements OnInit {
+  heroes: Hero[] = [];
+  selectedHero: Hero;
+
+  constructor(private store: HeroStoreService) { }
+
+  ngOnInit(): void {
+    this.heroes = this.store.heroes.slice();
+    this.selectedHero = this.heroes[1];
+  }
+}
+// #enddocregion

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

@@ -0,0 +1,22 @@
+<!-- #docregion -->
+<!-- #docregion main-content -->
+<div>
+  <h3>Select verbose: List of heroes</h3>
+</div>
+<div>
+  <select (change)="onChange($event.target.value)">
+    <option *ngFor="let hero of heroes, let i=index"
+      [value]="i"
+      [selected]="isSelected(hero)"
+    >{{hero.name}}</option>
+  </select>
+
+  <p>Selected Hero</p>
+  <pre>{{selectedHero | json }}</pre>
+  <p>Selected hero name = {{selectedHero?.name}}</p>
+</div>
+<!-- #enddocregion main-content -->
+<button (click)="reload()">Reload</button>
+<button (click)="clear()">Clear</button>
+<button (click)="removeSelected()">Remove</button>
+<!-- #enddocregion -->

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

@@ -0,0 +1,52 @@
+// #docplaster
+// #docregion
+import { Component, OnInit } from '@angular/core';
+
+import { Hero, HeroStoreService } from './hero-store.service';
+
+@Component({
+  selector: 'my-select-verbose',
+  templateUrl: 'app/select-verbose.component.html'
+})
+export class SelectVerboseComponent implements OnInit {
+  heroes: Hero[];
+  selectedHero: Hero;
+
+  constructor(private store: HeroStoreService) { }
+  // #docregion buttons-methods
+  clear(): void {
+    this.heroes = undefined;
+    this.selectedHero = undefined;
+  }
+  // #enddocregion buttons-methods
+  // #docregion select-methods
+  isSelected(hero: Hero): boolean {
+    return this.selectedHero && hero.id === this.selectedHero.id;
+  }
+  // #enddocregion select-methods
+  // #docregion buttons-methods
+  ngOnInit(): void {
+    this.reload();
+    this.selectedHero = this.heroes[1];
+  }
+  // #enddocregion buttons-methods
+  // #docregion select-methods
+  onChange(index: string): void {
+    this.selectedHero = this.heroes[+index];
+  }
+  // #enddocregion select-methods
+  // #docregion buttons-methods
+  reload(): void {
+    this.heroes = this.store.heroes.slice();
+    this.selectedHero = this.heroes[0];
+  }
+  removeSelected(): void {
+    if (this.heroes && this.selectedHero) {
+      const index = this.heroes.indexOf(this.selectedHero);
+      this.heroes.splice(index, 1);
+      this.selectedHero = this.heroes[1];
+    }
+  }
+  // #enddocregion buttons-methods
+}
+// #enddocregion