docs(testing): more testing samples and infrastructure setup

added wallaby config; revised karma-test-shim

Author: wardbell

gulpfile.js

@@ -76,7 +76,8 @@ var _exampleBoilerplateFiles = [
   'styles.css',
   'tsconfig.json',
   'tslint.json',
-  'typings.json'
+  'typings.json',
+  'wallaby.js'
  ];
 
 var _exampleDartWebBoilerPlateFiles = ['styles.css'];

public/docs/_examples/.gitignore

@@ -1,13 +1,21 @@
 .editorconfig
+.idea
+.vscode
 styles.css
 typings
 typings.json
+node_modules
+jspm_packages
 *.js.map
 package.json
 karma.conf.js
 karma-test-shim.js
 tsconfig.json
 tslint.json
+wallaby.js
 npm-debug*.
-**/protractor.config.js
+protractor.config.js
 _test-output
+_temp
+
+!**/*e2e-spec.js

public/docs/_examples/displaying-data/e2e-spec.js

@@ -1,5 +1,4 @@
 describe('Displaying Data Tests', function () {
-
   var _title = "Tour of Heroes";
   var _defaultHero = 'Windstorm'
 
@@ -15,7 +14,12 @@ describe('Displaying Data Tests', function () {
     expect(element(by.css('h2')).getText()).toContain(_defaultHero);
   });
 
-  it('should have many heroes', function () {
+ it('should have heroes', function () {
+    var heroEls = element.all(by.css('li'));
+    expect(heroEls.count()).not.toBe(0, 'should have heroes');
+  });
+
+  it('should display "there are many heroes!"', function () {
     expect(element(by.css('ul ~ p')).getText()).toContain('There are many heroes!');
   });
 });

public/docs/_examples/displaying-data/ts/app/app.component.ts

@@ -3,7 +3,7 @@
 // #docregion imports
 import {Component} from 'angular2/core';
 // #enddocregion imports
-import {Hero} from './hero'
+import {Hero} from './hero';
 
 @Component({
   selector: 'my-app',

public/docs/_examples/karma-test-shim.js

@@ -41,30 +41,29 @@ System.config({ packages: packages });
 
 // Configure Angular for the browser and
 // with test versions of the platform providers
-System.import('angular2/testing')
-  .then(function (testing) {
-    return System.import('angular2/platform/testing/browser')
-      .then(function (providers) {
-        testing.setBaseTestProviders(
-          providers.TEST_BROWSER_PLATFORM_PROVIDERS,
-          providers.TEST_BROWSER_APPLICATION_PROVIDERS
-        );
-      });
+  Promise.all([
+    System.import('angular2/testing'),
+    System.import('angular2/platform/testing/browser')
+  ])
+  .then(function (results) {
+    var testing = results[0];
+    var browser = results[1];
+    testing.setBaseTestProviders(
+      browser.TEST_BROWSER_PLATFORM_PROVIDERS,
+      browser.TEST_BROWSER_APPLICATION_PROVIDERS);
+
+    // Load all spec files
+    // (e.g. 'base/app/hero.service.spec.js')
+    return Promise.all(
+      Object.keys(window.__karma__.files)
+        .filter(onlySpecFiles)
+        .map(function (moduleName) {
+          moduleNames.push(moduleName);
+          return System.import(moduleName);
+        }));
   })
 
-// Load all spec files
-// (e.g. 'base/app/hero.service.spec.js')
-.then(function () {
-  return Promise.all(
-    Object.keys(window.__karma__.files)
-      .filter(onlySpecFiles)
-      .map(function (moduleName) {
-        moduleNames.push(moduleName);
-        return System.import(moduleName);
-      }));
-})
-
-.then(success, fail);
+  .then(success, fail);
 
 ////// Helpers //////
 

public/docs/_examples/karma.conf.js

@@ -1,7 +1,7 @@
 module.exports = function(config) {
 
-  var appBase   = 'app/';     // transpiled app JS files
-  var appAssets ='base/app/'; // component assets fetched by Angular's compiler
+  var appBase   = 'app/';      // transpiled app JS files
+  var appAssets ='/base/app/'; // component assets fetched by Angular's compiler
 
   config.set({
     basePath: '',

public/docs/_examples/lifecycle-hooks/ts/app/on-changes.component.ts

@@ -1,3 +1,4 @@
+/* tslint:disable:forin */
 // #docregion
 import {
   Component, Input, ViewChild,
@@ -6,7 +7,7 @@ import {
 
 
 class Hero {
-  constructor(public name:string){}
+  constructor(public name: string) {}
 }
 
 @Component({
@@ -30,13 +31,13 @@ export class OnChangesComponent implements OnChanges {
   @Input() power: string;
 // #enddocregion inputs
 
-  changeLog:string[] = [];
+  changeLog: string[] = [];
 
   // #docregion ng-on-changes
   ngOnChanges(changes: {[propertyName: string]: SimpleChange}) {
     for (let propName in changes) {
       let prop = changes[propName];
-      let cur  = JSON.stringify(prop.currentValue)
+      let cur  = JSON.stringify(prop.currentValue);
       let prev = JSON.stringify(prop.previousValue);
       this.changeLog.push(`${propName}: currentValue = ${cur}, previousValue = ${prev}`);
     }
@@ -50,13 +51,13 @@ export class OnChangesComponent implements OnChanges {
 
 @Component({
   selector: 'on-changes-parent',
-  templateUrl:'app/on-changes-parent.component.html',
+  templateUrl: 'app/on-changes-parent.component.html',
   styles: ['.parent {background: Lavender;}'],
   directives: [OnChangesComponent]
 })
 export class OnChangesParentComponent {
-  hero:Hero;
-  power:string;
+  hero: Hero;
+  power: string;
   title = 'OnChanges';
   @ViewChild(OnChangesComponent) childView:OnChangesComponent;
 
@@ -69,6 +70,6 @@ export class OnChangesParentComponent {
     this.hero = new Hero('Windstorm');
     // setting power only triggers onChanges if this value is different
     this.power = 'sing';
-    this.childView && this.childView.reset();
+    if (this.childView) { this.childView.reset(); }
   }
 }

public/docs/_examples/package.json

@@ -2,19 +2,18 @@
   "name": "angular2-examples-master",
   "version": "1.0.0",
   "description": "Master package.json, the superset of all dependencies for all of the _example package.json files.",
-  "main": "index.js",
   "scripts": {
     "start": "tsc && concurrently \"tsc -w\" \"lite-server\" ",
-    "tsc": "tsc",
-    "tsc:w": "tsc -w",
-    "lite": "lite-server",
-    "live": "live-server",
-    "test": "tsc && concurrently \"tsc -w\" \"karma start karma.conf.js\"",
-    "build-and-test": "npm run tsc && npm run test",
+    "e2e": "tsc && concurrently \"http-server\" \"protractor protractor.config.js\"",
     "http-server": "tsc && http-server",
     "http-server:e2e": "http-server",
+    "lite": "lite-server",
+    "postinstall": "typings install",
+    "test": "tsc && concurrently \"tsc -w\" \"karma start karma.conf.js\"",
+    "tsc": "tsc",
+    "tsc:w": "tsc -w",
     "typings": "typings",
-    "postinstall": "typings install"
+    "webdriver:update": "webdriver-manager update"
   },
   "keywords": [],
   "author": "",
@@ -37,14 +36,14 @@
     "typescript": "^1.8.10",
     "typings":"^0.7.12",
 
+    "canonical-path": "0.0.2",
     "http-server": "^0.9.0",
     "jasmine-core": "~2.4.1",
     "karma": "^0.13.22",
     "karma-chrome-launcher": "^0.2.3",
     "karma-cli": "^0.1.2",
     "karma-htmlfile-reporter": "^0.2.2",
     "karma-jasmine": "^0.3.8",
-    "live-server": "^0.9.2",
     "protractor": "^3.2.2",
     "rimraf": "^2.5.2"
   },

public/docs/_examples/protractor.config.js

@@ -1,9 +1,14 @@
-// TO RUN THE TESTS
-//
-// The first time, run:
+// FIRST TIME ONLY- run:
 //   ./node_modules/.bin/webdriver-manager update
-// Make sure the test server is running. Then do.
-//   ./node_modules/.bin/protractor protractor.config.js
+//
+//   Try: `npm run webdriver:update`
+//
+// AND THEN EVERYTIME ...
+//   1. Compile with `tsc`
+//   2. Make sure the test server (e.g., http-server: localhost:8080) is running.
+//   3. ./node_modules/.bin/protractor protractor.config.js
+//
+//   To do all steps, try:  `npm run e2e`
 
 var fs = require('fs');
 var path = require('canonical-path');
@@ -93,17 +98,13 @@ function itIf(cond, name, func) {
   }
 }
 
-// Hack - because of bug with send keys
+// Hack - because of bug with protractor send keys
 function sendKeys(element, str) {
   return str.split('').reduce(function (promise, char) {
-    return promise.then(function () {
-      return element.sendKeys(char);
-    });
+    return promise.resolve(element.sendKeys(char));
   }, element.getAttribute('value'));
-  // better to create a resolved promise here but ... don't know how with protractor;
 }
 
-
 function Reporter(options) {
   var _defaultOutputFile = path.resolve(process.cwd(), "../../", 'protractor-results.txt');
   options.outputFile = options.outputFile || _defaultOutputFile;

public/docs/_examples/quickstart/ts/package.1.json

@@ -3,11 +3,11 @@
   "version": "1.0.0",
   "scripts": {
     "start": "tsc && concurrently \"npm run tsc:w\" \"npm run lite\" ",
+    "lite": "lite-server",
+    "postinstall": "typings install",
     "tsc": "tsc",
     "tsc:w": "tsc -w",
-    "lite": "lite-server",
-    "typings": "typings",
-    "postinstall": "typings install"
+    "typings": "typings"
   },
   "license": "ISC",
   "dependencies": {

public/docs/_examples/testing/ts/app/app.component.spec.ts

@@ -0,0 +1,84 @@
+/* tslint:disable:no-unused-variable */
+import { AppComponent } from './app.component';
+
+import { By }       from 'angular2/platform/browser';
+import { provide  } from 'angular2/core';
+
+import {
+  beforeEach, beforeEachProviders,
+  describe, ddescribe, xdescribe,
+  expect, it, iit, xit,
+  inject, injectAsync,
+  ComponentFixture, TestComponentBuilder
+} from 'angular2/testing';
+
+import { Hero, HeroService, MockHeroService } from './mock-hero.service';
+
+import { Router,       MockRouter,
+         RouterLink,   MockRouterLink,
+         RouterOutlet, MockRouterOutlet} from './mock-router';
+
+describe('AppComponent', () => {
+  let fixture: ComponentFixture;
+  let comp:    AppComponent;
+
+  beforeEach(injectAsync([TestComponentBuilder], (tcb: TestComponentBuilder) => {
+    return tcb
+      .overrideDirective(AppComponent, RouterLink,   MockRouterLink)
+      .overrideDirective(AppComponent, RouterOutlet, MockRouterOutlet)
+      .overrideProviders(AppComponent, [
+        provide(HeroService, {useClass: MockHeroService}),
+        provide(Router,      {useClass: MockRouter}),
+      ])
+      .createAsync(AppComponent)
+      .then(fix => {
+        fixture = fix;
+        comp = fixture.debugElement.componentInstance;
+      });
+  }));
+
+  it('can instantiate it', () => {
+    expect(comp).not.toBeNull();
+  });
+
+  it('can get title from template', () => {
+    fixture.detectChanges();
+    let titleEl = fixture.debugElement.query(By.css('h1')).nativeElement;
+    expect(titleEl).toHaveText(comp.title);
+  });
+
+  it('can get RouterLinks from template', () => {
+    fixture.detectChanges();
+
+    let links = fixture.debugElement
+      .queryAll(function (de) { return de.componentInstance instanceof MockRouterLink; })
+      .map(de => <MockRouterLink> de.componentInstance);
+
+    expect(links.length).toEqual(2, 'should have 2 links');
+    expect(links[0].routeParams[0]).toEqual('Dashboard', '1st link should go to Dashboard');
+    expect(links[1].routeParams[0]).toEqual('Heroes', '1st link should go to Heroes');
+
+    let result = links[1].onClick();
+    expect(result).toEqual(false, 'click should prevent default browser behavior');
+  });
+
+  it('can click Heroes link in template', () => {
+    fixture.detectChanges();
+
+    // Heroes RouterLink DebugElement
+    let heroesDe = fixture.debugElement
+      .queryAll(function (de) { return de.componentInstance instanceof MockRouterLink; })[1];
+
+    expect(heroesDe).not.toBeNull('should 2nd link');
+
+    let link = <MockRouterLink> heroesDe.componentInstance;
+    expect(link.navigatedTo).toBeNull('link should not have navigate yet');
+
+    heroesDe.triggerEventHandler('click', null);
+
+    fixture.detectChanges();
+    expect(link.navigatedTo[0]).toEqual('Heroes');
+
+  });
+});
+