docs(style-guide): add testing harness

Author: Foxandxss

public/docs/_examples/style-guide/ts/.gitignore

@@ -1 +1,2 @@
 *.js
+!systemjs.custom.js

public/docs/_examples/style-guide/ts/01-01/app/app.component.css

@@ -7,11 +7,12 @@ import { HeroesComponent } from './heroes/heroes.component';
 import { HeroService } from './heroes/shared/hero.service';
 
 @Component({
+  moduleId: module.id,
   selector: 'toh-app',
   template: `
       <toh-heroes></toh-heroes>
     `,
-  styleUrls: ['app/app.component.css'],
+  styleUrls: ['app.component.css'],
   directives: [HeroesComponent],
   providers: [HeroService]
 })

public/docs/_examples/style-guide/ts/01-01/app/app.component.ts

@@ -0,0 +1,14 @@
+import { Component } from '@angular/core';
+
+import { HeroComponent } from './heroes/hero.component';
+import { UsersComponent } from './users/users.component';
+
+@Component({
+  selector: 'sg-app',
+  template: `
+    <toh-hero></toh-hero>
+    <admin-users></admin-users>
+  `,
+  directives: [HeroComponent, UsersComponent]
+})
+export class AppComponent { }

public/docs/_examples/style-guide/ts/02-07/app/app.component.ts

@@ -1,8 +1,12 @@
+// #docplaster
 // #docregion
 import { Component } from '@angular/core';
 
 // #docregion example
 @Component({
+  // #enddocregion example
+  template: '<div>hero component</div>',
+  // #docregion example
   selector: 'toh-hero'
 })
 export class HeroComponent {}

public/docs/_examples/style-guide/ts/02-07/app/heroes/hero.component.ts

@@ -1,8 +1,12 @@
+// #docplaster
 // #docregion
 import { Component } from '@angular/core';
 
 // #docregion example
 @Component({
+  // #enddocregion example
+  template: '<div>users component</div>',
+  // #docregion example
   selector: 'admin-users'
 })
 export class UsersComponent {}

public/docs/_examples/style-guide/ts/02-07/app/users/users.component.ts

@@ -0,0 +1,10 @@
+import { Component } from '@angular/core';
+
+import { ValidateDirective } from './shared/validate.directive';
+
+@Component({
+  selector: 'sg-app',
+  template: '<input type="text" tohValidate>',
+  directives: [ValidateDirective]
+})
+export class AppComponent { }

public/docs/_examples/style-guide/ts/02-08/app/app.component.ts

@@ -0,0 +1,18 @@
+import { Component, OnInit } from '@angular/core';
+
+import { ExceptionService } from './shared/exception.service';
+
+@Component({
+  selector: 'sg-app',
+  template: '<div>The expected error is {{errorCode}}</div>',
+  providers: [ExceptionService]
+})
+export class AppComponent implements OnInit {
+  errorCode: number;
+
+  constructor(private exceptionService: ExceptionService) { }
+
+  ngOnInit() {
+    this.errorCode = this.exceptionService.getException();
+  }
+}

public/docs/_examples/style-guide/ts/03-01/app/app.component.ts

@@ -1,9 +1,14 @@
+// #docplaster
 // #docregion
 import { Injectable } from '@angular/core';
 
 @Injectable()
 // #docregion example
 export class ExceptionService {
   constructor() { }
+  // #enddocregion example
+  // testing harness
+  getException() { return 42; }
+  // #docregion example
 }
 // #enddocregion example

public/docs/_examples/style-guide/ts/03-01/app/shared/exception.service.ts

@@ -0,0 +1,15 @@
+import { Component } from '@angular/core';
+
+import { HEROES_URL, VILLAIN_URL } from './shared/data.service';
+
+@Component({
+  selector: 'sg-app',
+  template: `
+    <div>Heroes url: {{heroesUrl}}</div>
+    <div>Villains url: {{villainsUrl}}</div>
+  `,
+})
+export class AppComponent {
+  heroesUrl = HEROES_URL;
+  villainsUrl = VILLAIN_URL;
+}

public/docs/_examples/style-guide/ts/03-02/app/app.component.ts

@@ -0,0 +1,19 @@
+import { Component, OnInit } from '@angular/core';
+
+import { HeroCollectorService } from './shared/hero-collector.service';
+import { Hero } from './shared/hero.model';
+
+@Component({
+  selector: 'sg-app',
+  template: '<div>Our hero is {{hero.name}} and {{hero.power}}</div>',
+  providers: [HeroCollectorService]
+})
+export class AppComponent implements OnInit {
+  hero: Hero;
+
+  constructor(private heroCollectorService: HeroCollectorService) { }
+
+  ngOnInit() {
+    this.hero = this.heroCollectorService.getHero();
+  }
+}

public/docs/_examples/style-guide/ts/03-03/app/app.component.ts

@@ -1,3 +1,4 @@
+// #docplaster
 // #docregion
 // #docregion example
 import { Injectable } from '@angular/core';
@@ -9,5 +10,16 @@ export class HeroCollectorService {
   hero: Hero;
 
   constructor() { }
+  // #enddocregion example
+  // testing harness
+  getHero() {
+    this.hero = {
+      name: 'RubberMan',
+      power: 'He is so elastic'
+    };
+
+    return this.hero;
+  }
+  // #docregion example
 }
 // #enddocregion example

public/docs/_examples/style-guide/ts/03-03/app/shared/hero-collector.service.ts

@@ -0,0 +1,27 @@
+import { Component, OnInit } from '@angular/core';
+
+import { ToastService } from './shared/toast/toast.service';
+
+@Component({
+  selector: 'sg-app',
+  template: `
+    <button (click)="show()">Show toast</button>
+    <button (click)="hide()">Hide toast</button>
+  `,
+  providers: [ToastService]
+})
+export class AppComponent implements OnInit {
+  constructor(private toastService: ToastService) { }
+
+  hide() {
+    this.toastService.hide();
+  }
+
+  show() {
+    this.toastService.show();
+  }
+
+  ngOnInit() {
+    this.toastService.activate('Hello style-guide!');
+  }
+}

public/docs/_examples/style-guide/ts/03-04/app/app.component.ts

@@ -1,3 +1,4 @@
+// #docplaster
 // #docregion
 // #docregion example
 import { Injectable } from '@angular/core';
@@ -21,5 +22,11 @@ export class ToastService {
   private log() {
     console.log(this.message);
   }
+  // #enddocregion example
+  // testing harness
+  activate(message: string) {
+    this.message = message;
+  }
+  // #docregion example
 }
 // #enddocregion example

public/docs/_examples/style-guide/ts/03-04/app/shared/toast/toast.service.ts

@@ -19,7 +19,7 @@ export class HeroService {
   ) { }
 
   getHero(id: number) {
-    return this.http.get(`api/heroes/${id}`)
+    return this.http.get(`app/heroes/${id}`)
       .map((res: Response) => res.json().data);
   }
 

public/docs/_examples/style-guide/ts/03-05/app/+heroes/shared/hero.service.ts

@@ -0,0 +1,5 @@
+<ul>
+  <li *ngFor="let hero of heroes">
+    {{hero.name}}
+  </li>
+</ul>

public/docs/_examples/style-guide/ts/03-05/app/app.component.html

@@ -0,0 +1,21 @@
+import { Component, OnInit } from '@angular/core';
+
+import { HeroService } from './+heroes/shared/hero.service';
+import { ExceptionService, SpinnerService, ToastService } from './shared';
+import { Hero } from './+heroes/shared/hero.model';
+
+@Component({
+  moduleId: module.id,
+  selector: 'sg-app',
+  templateUrl: 'app.component.html',
+  providers: [HeroService, ExceptionService, SpinnerService, ToastService]
+})
+export class AppComponent implements OnInit {
+  heroes: Hero[];
+
+  constructor(private heroService: HeroService) { }
+
+  ngOnInit() {
+    this.heroService.getHeroes().subscribe(heroes => this.heroes = heroes);
+  }
+}

public/docs/_examples/style-guide/ts/03-05/app/app.component.ts

@@ -0,0 +1,5 @@
+<ul>
+  <li *ngFor="let hero of heroes">
+    {{hero.name}}
+  </li>
+</ul>

public/docs/_examples/style-guide/ts/03-06/app/app.component.html

@@ -0,0 +1,21 @@
+import { Component, OnInit } from '@angular/core';
+
+import { HeroService } from './+heroes/shared/hero.service';
+import { ExceptionService, SpinnerService, ToastService } from './shared';
+import { Hero } from './+heroes/shared/hero.model';
+
+@Component({
+  moduleId: module.id,
+  selector: 'sg-app',
+  templateUrl: 'app.component.html',
+  providers: [HeroService, ExceptionService, SpinnerService, ToastService]
+})
+export class AppComponent implements OnInit {
+  heroes: Hero[];
+
+  constructor(private heroService: HeroService) { }
+
+  ngOnInit() {
+    this.heroService.getHeroes().subscribe(heroes => this.heroes = heroes);
+  }
+}

public/docs/_examples/style-guide/ts/03-06/app/app.component.ts

@@ -0,0 +1 @@
+<div>This is heroes component</div>

public/docs/_examples/style-guide/ts/04-10/app/+heroes/heroes.component.html

@@ -15,12 +15,13 @@ import {
 
 @Component({
   // #enddocregion example
+  moduleId: module.id,
   providers: [EntityService, ExceptionService, SpinnerService, ToastService],
   directives: [FilterTextComponent],
   pipes: [InitCapsPipe],
   // #docregion example
   selector: 'toh-heroes',
-  templateUrl: 'app/+heroes/heroes.component.html'
+  templateUrl: 'heroes.component.html'
 })
 export class HeroesComponent implements OnInit {
   // #enddocregion example

public/docs/_examples/style-guide/ts/04-10/app/+heroes/heroes.component.ts

@@ -6,8 +6,8 @@ import { HeroesComponent } from './+heroes/index';
 // #enddocregion example
 
 @Component({
-  selector: 'toh-app',
-  template: '<div>app</div>',
+  selector: 'sg-app',
+  template: '<toh-heroes></toh-heroes>',
   directives: [HeroesComponent]
 })
 export class AppComponent { }

public/docs/_examples/style-guide/ts/04-10/app/app.component.ts

@@ -0,0 +1,10 @@
+import { Component } from '@angular/core';
+
+import { HeroesComponent } from './heroes/heroes.component';
+
+@Component({
+  selector: 'sg-app',
+  template: '<toh-heroes></toh-heroes>',
+  directives: [HeroesComponent]
+})
+export class AppComponent { }

public/docs/_examples/style-guide/ts/04-14/app/app.component.ts

@@ -2,7 +2,7 @@
 <div>
   <h2>My Heroes</h2>
   <ul class="heroes">
-    <li *ngFor="#hero of heroes">
+    <li *ngFor="let hero of heroes">
       <span class="badge">{{hero.id}}</span> {{hero.name}}
     </li>
   </ul>

public/docs/_examples/style-guide/ts/04-14/app/heroes/heroes.component.html

@@ -7,6 +7,7 @@ import { Logger } from '../shared/logger.service';
 // #enddocregion example
 
 @Component({
+  moduleId: module.id,
   selector: 'toh-heroes',
   templateUrl: 'heroes.component.html',
   styleUrls:  ['heroes.component.css'],

public/docs/_examples/style-guide/ts/04-14/app/heroes/heroes.component.ts

@@ -0,0 +1,11 @@
+import { Component } from '@angular/core';
+
+import { HeroButtonComponent } from './heroes/shared/hero-button/hero-button.component';
+
+@Component({
+  moduleId: module.id,
+  selector: 'sg-app',
+  templateUrl: 'app.component.html',
+  directives: [HeroButtonComponent]
+})
+export class AppComponent { }

public/docs/_examples/style-guide/ts/05-02/app/app.component.ts

@@ -1,10 +1,15 @@
+// #docplaster
 // #docregion
 import { Component } from '@angular/core';
 // #docregion example
 /* avoid */
 
 @Component({
-  selector: 'tohHeroButton'
+  // #enddocregion example
+  moduleId: module.id,
+  // #docregion example
+  selector: 'tohHeroButton',
+  templateUrl: 'hero-button.component.html'
 })
 export class HeroButtonComponent {}
 // #enddocregion example

public/docs/_examples/style-guide/ts/05-02/app/heroes/shared/hero-button/hero-button.component.avoid.ts

@@ -0,0 +1 @@
+<button class="hero-button">Hero button</button>

public/docs/_examples/style-guide/ts/05-02/app/heroes/shared/hero-button/hero-button.component.html

@@ -1,9 +1,14 @@
+// #docplaster
 // #docregion
 import { Component } from '@angular/core';
 
 // #docregion example
 @Component({
-  selector: 'toh-hero-button'
+  // #enddocregion example
+  moduleId: module.id,
+  // #docregion example
+  selector: 'toh-hero-button',
+  templateUrl: 'hero-button.component.html'
 })
 export class HeroButtonComponent {}
 // #enddocregion example

public/docs/_examples/style-guide/ts/05-02/app/heroes/shared/hero-button/hero-button.component.ts

@@ -0,0 +1,11 @@
+import { Component } from '@angular/core';
+
+import { HeroButtonComponent } from './heroes/shared/hero-button/hero-button.component';
+
+@Component({
+  moduleId: module.id,
+  selector: 'sg-app',
+  templateUrl: 'app.component.html',
+  directives: [HeroButtonComponent]
+})
+export class AppComponent { }