chore(testing): add testing files to examples

Author: filipesilva

public/docs/_examples/structural-directives/ts/index.html

@@ -17,7 +17,7 @@
     <script src="node_modules/angular2/bundles/angular2.dev.js"></script>
     <script>
       System.config({
-        packages: {        
+        packages: {
           app: {
             format: 'register',
             defaultExtension: 'js'

public/docs/_examples/testing/ts/.gitignore

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

public/docs/_examples/testing/ts/1st.spec.ts

@@ -0,0 +1,20 @@
+// #docplaster
+// #docregion it
+ it('true is true', () => expect(true).toEqual(true));
+ // #enddocregion it
+
+// #docregion describe
+ describe('1st tests', () => {
+
+  it('true is true', () => expect(true).toEqual(true));
+
+  // #enddocregion describe
+  // #docregion another-test
+  it('null is not the same thing as undefined',
+    () => expect(null).not.toEqual(undefined)
+  );
+  // #enddocregion another-test
+
+  // #docregion describe
+});
+// #enddocregion describe

public/docs/_examples/testing/ts/app/backend.service.ts

@@ -0,0 +1,14 @@
+import {Hero} from './hero';
+import {HEROES} from './mock-heroes';
+
+let delay = 1000; // ms delay in return of data
+
+export class BackendService {
+
+	fetchAllHeroesAsync(): Promise<Hero[]> {
+		return new Promise((resolve, reject) => {
+			// simulate latency by resolving promise after a delay
+			setTimeout(() => resolve(HEROES.map(h => h.clone())), delay)
+		})
+	}
+}

public/docs/_examples/testing/ts/app/bootstrap.ts

@@ -0,0 +1,11 @@
+import {bootstrap} from 'angular2/platform/browser';
+
+// Application root component
+import {HeroesComponent} from './heroes.component';
+
+// Application-wide "injectables""
+import {BackendService} from './backend.service';
+import {HeroService} from './hero.service';
+import {User} from './user';
+
+bootstrap(HeroesComponent, [BackendService, HeroService, User]);

public/docs/_examples/testing/ts/app/decorators.ts

@@ -0,0 +1,16 @@
+// @Injectable is a placeholder decorator
+// whose sole purpose is to trigger the TS compiler to
+// generate the metadata that Angular DI needs for injection.
+//
+// Metadata generation happens IFF the class has a decorator ... any decorator
+// See the `"emitDecoratorMetadata": true` flag in tsconfig.json
+//
+// For Angular-agnostic classes we can avoid importing from Angular
+// and get the metadata generation side-effect
+// by creating our own @Injectable decorator
+
+// for the hip Functional Programmer:
+export const Injectable = () => (cls:any) => cls;
+
+// for everyone else, this is the same thing
+//export function Injectable() { return (cls:any) => cls; }

public/docs/_examples/testing/ts/app/hero-detail.component.css

@@ -0,0 +1,3 @@
+.hero-detail div {padding:0.2em;}
+.hero-detail div input {position: absolute; left:9em; }
+.hero-id {position: absolute; left:7.5em; }

public/docs/_examples/testing/ts/app/hero-detail.component.html

@@ -0,0 +1,24 @@
+<!-- #docregion -->
+<div class="hero-detail">
+	<!-- #docregion pipe-usage -->
+	<h2>{{hero.name  | initCaps}} is {{userName}}'s current super hero!</h2>
+	<!-- #enddocregion pipe-usage -->
+	<div>
+		<button (click)="onDelete()" [disabled]="!hero">Delete</button>
+		<button (click)="onUpdate()" [disabled]="!hero">Update</button>
+	</div>
+	<div>
+		<label>Id: </label><span class="hero-id">{{hero.id}}</span></div>
+	<div>
+		<label>Name: </label>
+		<input [(ngModel)]="hero.name" placeholder="name">
+	</div>
+		<div>
+		<label>Power: </label>
+		<input [(ngModel)]="hero.power" placeholder="super power">
+	</div>
+		<div>
+		<label>Alter Ego: </label>
+		<input [(ngModel)]="hero.alterEgo" placeholder="alter ego">
+	</div>
+</div>

public/docs/_examples/testing/ts/app/hero-detail.component.spec.ts.not-yet

@@ -0,0 +1,218 @@
+///// Boiler Plate ////
+import {bind, By, Component, Directive, EventEmitter, FORM_DIRECTIVES} from 'angular2/angular2';
+
+// Angular 2 Test Bed
+import {
+beforeEachProviders, inject, injectAsync, RootTestComponent as RTC,
+beforeEach, ddescribe, xdescribe, describe, expect, iit, it, xit // Jasmine wrappers
+} from 'angular2/testing';
+
+import {dispatchEvent, DoneFn, injectTcb, tick} from '../test-helpers/test-helpers';
+
+///// Testing this component ////
+import {HeroDetailComponent} from './hero-detail.component';
+import {Hero} from './hero';
+
+describe('HeroDetailComponent', () => {
+
+  /////////// Component Tests without DOM interaction /////////////
+  describe('(No DOM)', () => {
+    it('can be created', () => {
+      let hdc = new HeroDetailComponent();
+      expect(hdc instanceof HeroDetailComponent).toEqual(true); // proof of life
+    });
+
+    it('onDelete method should raise delete event', (done: DoneFn) => {
+      let hdc = new HeroDetailComponent();
+
+      // Listen for the HeroComponent.delete EventEmitter's event
+      hdc.delete.toRx().subscribe(() => {
+        console.log('HeroComponent.delete event raised');
+        done();  // it must have worked
+      }, (error: any) => { fail(error); done() });
+
+      hdc.onDelete();
+    });
+
+    // Disable until toPromise() works again
+    xit('onDelete method should raise delete event (w/ promise)', (done: DoneFn) => {
+
+      let hdc = new HeroDetailComponent();
+
+      // Listen for the HeroComponent.delete EventEmitter's event
+      let p = hdc.delete.toRx()
+        .toPromise()
+        .then(() => {
+          console.log('HeroComponent.delete event raised in promise');
+        })
+        .then(done, done.fail);
+
+      hdc.delete.toRx()
+        .subscribe(() => {
+          console.log('HeroComponent.delete event raised in subscription')
+        });
+
+      hdc.onDelete();
+
+      // toPromise() does not fulfill until emitter is completed by `return()`
+      hdc.delete.return();
+    });
+
+    it('onUpdate method should modify hero', () => {
+      let hdc = new HeroDetailComponent();
+      hdc.hero = new Hero(42, 'Cat Woman');
+      let origNameLength = hdc.hero.name.length;
+
+      hdc.onUpdate();
+      expect(hdc.hero.name.length).toBeGreaterThan(origNameLength);
+    });
+  });
+
+
+  /////////// Component tests that check the DOM /////////////
+  describe('(DOM)', () => {
+    // Disable until toPromise() works again
+    xit('Delete button should raise delete event', injectTcb(tcb => {
+
+      // We only care about the button
+      let template = '<button (click)="onDelete()">Delete</button>';
+
+      return tcb
+        .overrideTemplate(HeroDetailComponent, template)
+        .createAsync(HeroDetailComponent)
+        .then((rootTC: RTC) => {
+          let hdc: HeroDetailComponent = rootTC.debugElement.componentInstance;
+
+          // // USE PROMISE WRAPPING AN OBSERVABLE UNTIL can get `toPromise` working again
+          // let p = new Promise<Hero>((resolve) => {
+          //   // Listen for the HeroComponent.delete EventEmitter's event with observable
+          //   hdc.delete.toRx().subscribe((hero: Hero) => {
+          //     console.log('Observable heard HeroComponent.delete event raised');
+          //     resolve(hero);
+          //   });
+          // })
+
+          //Listen for the HeroComponent.delete EventEmitter's event with promise
+          let p = <Promise<Hero>> hdc.delete.toRx().toPromise()
+          .then((hero:Hero) => {
+            console.log('Promise heard HeroComponent.delete event raised');
+          });
+
+          // trigger the 'click' event on the HeroDetailComponent delete button
+          let el = rootTC.debugElement.query(By.css('button'));
+          el.triggerEventHandler('click', null);
+
+          // toPromise() does not fulfill until emitter is completed by `return()`
+          hdc.delete.return();
+
+          return p;
+        });
+
+    }));
+
+    it('Update button should modify hero', injectTcb(tcb => {
+
+      let template =
+        `<div>
+          <button id="update" (click)="onUpdate()" [disabled]="!hero">Update</button>
+          <input [(ngModel)]="hero.name"/>
+        </div>`
+
+      return tcb
+        .overrideTemplate(HeroDetailComponent, template)
+        .createAsync(HeroDetailComponent)
+        .then((rootTC: RTC) => {
+
+          let hdc: HeroDetailComponent = rootTC.debugElement.componentInstance;
+          hdc.hero = new Hero(42, 'Cat Woman');
+          let origNameLength = hdc.hero.name.length;
+
+          // trigger the 'click' event on the HeroDetailComponent update button
+          rootTC.debugElement.query(By.css('#update'))
+            .triggerEventHandler('click', null);
+
+          expect(hdc.hero.name.length).toBeGreaterThan(origNameLength);
+        });
+    }));
+
+    it('Entering hero name in textbox changes hero', injectTcb(tcb => {
+
+      let hdc: HeroDetailComponent
+      let template = `<input [(ngModel)]="hero.name"/>`
+
+      return tcb
+        .overrideTemplate(HeroDetailComponent, template)
+        .createAsync(HeroDetailComponent)
+        .then((rootTC: RTC) => {
+
+          hdc = rootTC.debugElement.componentInstance;
+
+          hdc.hero = new Hero(42, 'Cat Woman');
+          rootTC.detectChanges();
+
+          // get the HTML element and change its value in the DOM
+          var input = rootTC.debugElement.query(By.css('input')).nativeElement;
+          input.value = "Dog Man"
+          dispatchEvent(input, 'change'); // event triggers Ng to update model
+
+          rootTC.detectChanges();
+          // model update hasn't happened yet, despite `detectChanges`
+          expect(hdc.hero.name).toEqual('Cat Woman');
+
+        })
+        .then(tick) // must wait a tick for the model update
+        .then(() => {
+          expect(hdc.hero.name).toEqual('Dog Man');
+        });
+    }));
+
+    // Simulates ...
+    // 1. change a hero
+    // 2. select a different hero
+    // 3  re-select the first hero
+    // 4. confirm that the change is preserved in HTML
+    // Reveals 2-way binding bug in alpha-36, fixed in pull #3715 for alpha-37
+
+    it('toggling heroes after modifying name preserves the change on screen', injectTcb(tcb => {
+
+      let hdc: HeroDetailComponent;
+      let hero1 = new Hero(1, 'Cat Woman');
+      let hero2 = new Hero(2, 'Goat Boy');
+      let input: HTMLInputElement;
+      let rootTC: RTC;
+      let template = `{{hero.id}} - <input [(ngModel)]="hero.name"/>`
+
+      return tcb
+        .overrideTemplate(HeroDetailComponent, template)
+        .createAsync(HeroDetailComponent)
+        .then((rtc: RTC) => {
+          rootTC = rtc;
+          hdc = rootTC.debugElement.componentInstance;
+
+          hdc.hero = hero1; // start with hero1
+          rootTC.detectChanges();
+
+          // get the HTML element and change its value in the DOM
+          input = rootTC.debugElement.query(By.css('input')).nativeElement;
+          input.value = "Dog Man"
+          dispatchEvent(input, 'change'); // event triggers Ng to update model
+        })
+        .then(tick) // must wait a tick for the model update
+        .then(() => {
+          expect(hdc.hero.name).toEqual('Dog Man');
+
+          hdc.hero = hero2 // switch to hero2
+          rootTC.detectChanges();
+
+          hdc.hero = hero1  // switch back to hero1
+          rootTC.detectChanges();
+
+          // model value will be the same changed value (of course)
+          expect(hdc.hero.name).toEqual('Dog Man');
+
+          // the view should reflect the same changed value
+          expect(input.value).toEqual('Dog Man');
+        });
+    }));
+  });
+});

public/docs/_examples/testing/ts/app/hero-detail.component.ts

@@ -0,0 +1,35 @@
+import {Component, Directive, EventEmitter , ElementRef} from 'angular2/core';
+
+import {Hero} from './hero';
+import {InitCapsPipe} from './init-caps-pipe';
+
+@Directive({selector: 'button'})
+class DecoratorDirective {
+  constructor(el: ElementRef){
+    console.log(el)
+  }
+}
+@Component({
+  selector: 'my-hero-detail',
+  templateUrl: 'app/hero-detail.component.html',
+  inputs: ['hero', 'userName'], // inputs
+  outputs: ['delete'], // outputs
+  directives: [DecoratorDirective],
+  styleUrls: ['app/hero-detail.component.css'],
+  pipes: [InitCapsPipe]
+})
+export class HeroDetailComponent {
+
+  hero: Hero;
+
+  delete = new EventEmitter();
+
+  onDelete() { this.delete.next(this.hero) }
+
+  onUpdate() {
+    if (this.hero) {
+      this.hero.name += 'x';
+    }
+  }
+  userName: string;
+}