test(toh-[234]): add e2e for Dart and TS

From the user's perspective toh-2 to -4 all have the same behavior.
This PR introduces e2e tests for all these parts by sharing test suites.

**3 minor bugs** were detected by the tests and are fixed in this PR.

The toh-1 tests introduced in angular#1620 are
- Refactored so as to be easier to reuse for the other parts.
- Rewritten to benefit from the availability of async/await.

Suites passed:
 - public/docs/_examples/toh-1/dart
 - public/docs/_examples/toh-1/ts
 - public/docs/_examples/toh-2/dart
 - public/docs/_examples/toh-2/ts
 - public/docs/_examples/toh-3/dart
 - public/docs/_examples/toh-3/ts
 - public/docs/_examples/toh-4/dart
 - public/docs/_examples/toh-4/ts

Contributes to angular#1619.

Fixes angular#1609.
Now the toh-4 index.html is identical to those of the previous parts.

Author: chalin

public/docs/_examples/toh-1/e2e-spec.ts

@@ -1,27 +1,40 @@
 /// <reference path='../_protractor/e2e.d.ts' />
 'use strict';
+
+import { addToHeroName, Hero, itHasProperTitleAndHeadings, nameSuffix } from './toh-spec-shared';
+
 describe('Tutorial part 1', () => {
 
-  let expectedH1 = 'Tour of Heroes';
-  let expectedTitle = `Angular 2 ${expectedH1}`;
-  let hero = { id: 1, name: 'Windstorm' };
-  let expectedH2 = `${hero.name} details!`;
+  const expectedHero = { id: 1, name: 'Windstorm' };
 
-  beforeEach(() => {
-    return browser.get('');
-  });
+  beforeAll(() => browser.get(''));
 
-  it(`should have title '${expectedTitle}'`, () => {
-    expect(browser.getTitle()).toEqual(expectedTitle);
+  itHasProperTitleAndHeadings();
+
+  it(`shows initial hero details`, async () => {
+    let page = getPageElts();
+    let hero = await Hero.fromDetail(page.heroDetail);
+    expect(hero.id).toEqual(expectedHero.id);
+    expect(hero.name).toEqual(expectedHero.name);
   });
 
-  it(`should have '${expectedH2}'`, () => {
-    let text = element(by.css('h2')).getText();
-    expect(text).toEqual(expectedH2);
+  it(`can update hero name`, () => {
+    addToHeroName(nameSuffix);
+    // Nothing specific to expect other than lack of exceptions.
   });
 
-  it(`should have input name '${hero.name}'`, () => {
-    let name = element(by.css('input')).getAttribute('value');
-    expect(name).toEqual(hero.name);
+  it(`shows updated hero name`, async () => {
+    let page = getPageElts();
+    let hero = await Hero.fromDetail(page.heroDetail);
+    let newName = expectedHero.name + nameSuffix;
+    expect(hero.id).toEqual(expectedHero.id);
+    expect(hero.name).toEqual(newName);
   });
+
 });
+
+function getPageElts() {
+  return {
+    heroDetail: element(by.css('my-app'))
+  };
+}

public/docs/_examples/toh-1/toh-spec-shared.ts

@@ -0,0 +1,56 @@
+/// <reference path="../_protractor/e2e.d.ts" />
+'use strict';
+
+export type WPromise<T> = webdriver.promise.Promise<T>;
+
+const expectedH1 = 'Tour of Heroes';
+const expectedTitle = `Angular 2 ${expectedH1}`;
+
+export class Hero {
+    id: number;
+    name: string;
+
+    // Factory methods
+
+    // Get hero from s formatted as '<id> <name>'.
+    static fromString(s: string): Hero {
+        return {
+            id: +s.substr(0, s.indexOf(' ')),
+            name: s.substr(s.indexOf(' ') + 1),
+        };
+    }
+
+    // Get hero id and name from the given detail element.
+    static async fromDetail(detail: protractor.ElementFinder): Promise<Hero> {
+        // Get hero id from the first <div>
+        let _id = await detail.all(by.css('div')).first().getText();
+        // Get name from the h2
+        let _name = await detail.element(by.css('h2')).getText();
+        return {
+            id: +_id.substr(_id.indexOf(' ') + 1),
+            name: _name.substr(0, _name.indexOf(' '))
+        };
+    }
+}
+
+export function expectHeading(hLevel: number, expectedText: string): void {
+    let hTag = `h${hLevel}`;
+    let hText = element(by.css(hTag)).getText();
+    expect(hText).toEqual(expectedText, hTag);
+};
+
+export const nameSuffix = 'X';
+export function addToHeroName(text: string): WPromise<void> {
+    let input = element(by.css('input'));
+    return sendKeys(input, text);
+}
+
+export function itHasProperTitleAndHeadings() {
+    it(`has title '${expectedTitle}'`, () => {
+        expect(browser.getTitle()).toEqual(expectedTitle);
+    });
+
+    it(`has h1 '${expectedH1}'`, () => {
+        expectHeading(1, expectedH1);
+    });
+}

public/docs/_examples/toh-2/dart/example-config.json

@@ -0,0 +1,9 @@
+/// <reference path='../_protractor/e2e.d.ts' />
+'use strict';
+
+import { initalPageAndUpdateHeroTests } from './toh-spec-shared';
+
+describe('Tutorial part 2', () => {
+  beforeAll(() => browser.get(''));
+  initalPageAndUpdateHeroTests();
+});

public/docs/_examples/toh-2/e2e-spec.ts

@@ -0,0 +1,86 @@
+/// <reference path='../_protractor/e2e.d.ts' />
+'use strict';
+
+import { addToHeroName, expectHeading, Hero, itHasProperTitleAndHeadings, nameSuffix } from '../toh-1/toh-spec-shared';
+
+export function initalPageAndUpdateHeroTests() {
+  describe('Initial page', initialPageTests);
+  describe('Select hero', selectHeroTests);
+  describe('Update hero', updateHeroTests);
+}
+
+function initialPageTests() {
+  itHasProperTitleAndHeadings();
+
+  const expectedH2 = 'My Heroes';
+
+  it(`has h2 '${expectedH2}'`, () => {
+    expectHeading(2, expectedH2);
+  });
+
+  it('has the right number of heroes', () => {
+    let page = getPageElts();
+    expect(page.heroes.count()).toEqual(10);
+  });
+
+  it('has no selected hero and no hero details', function () {
+    let page = getPageElts();
+    expect(page.selected.isPresent()).toBeFalsy('selected hero');
+    expect(page.heroDetail.isPresent()).toBeFalsy('no hero detail');
+  });
+}
+
+const targetHero = { id: 16, name: 'RubberMan' };
+
+function selectHeroTests() {
+  it(`selects ${targetHero.name} from hero list`, function () {
+    let hero = element(by.cssContainingText('li span.badge', targetHero.id.toString()));
+    hero.click();
+    // Nothing specific to expect other than lack of exceptions.
+  });
+
+  it(`has selected ${targetHero.name}`, function () {
+    let page = getPageElts();
+    let expectedText = `${targetHero.id} ${targetHero.name}`;
+    expect(page.selected.getText()).toBe(expectedText);
+  });
+
+  it('shows selected hero details', async () => {
+    let page = getPageElts();
+    let hero = await Hero.fromDetail(page.heroDetail);
+    expect(hero.id).toEqual(targetHero.id);
+    expect(hero.name).toEqual(targetHero.name);
+  });
+}
+
+function updateHeroTests() {
+  it(`can update hero name`, () => {
+    addToHeroName(nameSuffix);
+    // Nothing specific to expect other than lack of exceptions.
+  });
+
+  it(`shows updated hero name in details`, async () => {
+    let page = getPageElts();
+    let hero = await Hero.fromDetail(page.heroDetail);
+    let newName = targetHero.name + nameSuffix;
+    expect(hero.id).toEqual(targetHero.id);
+    expect(hero.name).toEqual(newName);
+  });
+
+  it(`shows updated hero name in list`, async () => {
+    let page = getPageElts();
+    let hero = Hero.fromString(await page.selected.getText());
+    let newName = targetHero.name + nameSuffix;
+    expect(hero.id).toEqual(targetHero.id);
+    expect(hero.name).toEqual(newName);
+  });
+
+}
+
+function getPageElts() {
+  return {
+    heroes: element.all(by.css('my-app li')),
+    selected: element(by.css('my-app li.selected')),
+    heroDetail: element(by.css('my-app > div, my-app > my-hero-detail > div'))
+  };
+}

public/docs/_examples/toh-2/toh-spec-shared.ts

@@ -1,7 +1,7 @@
 <!DOCTYPE html>
 <html>
   <head>
-    <title>Angular 2 Tour of Heros</title>
+    <title>Angular 2 Tour of Heroes</title>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1">
     <link rel="stylesheet" href="styles.css">

public/docs/_examples/toh-2/ts/index.html

@@ -0,0 +1,9 @@
+/// <reference path='../_protractor/e2e.d.ts' />
+'use strict';
+
+import { initalPageAndUpdateHeroTests } from '../toh-2/toh-spec-shared';
+
+describe('Tutorial part 3', () => {
+  beforeAll(() => browser.get(''));
+  initalPageAndUpdateHeroTests();
+});

public/docs/_examples/toh-3/dart/example-config.json

@@ -1,6 +1,10 @@
 <!DOCTYPE html>
 <html>
   <head>
+    <title>Angular 2 Tour of Heroes</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <link rel="stylesheet" href="styles.css">
+
     <script defer src="main.dart" type="application/dart"></script>
     <script defer src="packages/browser/dart.js"></script>
   </head>

public/docs/_examples/toh-3/e2e-spec.ts

@@ -0,0 +1,9 @@
+/// <reference path='../_protractor/e2e.d.ts' />
+'use strict';
+
+import { initalPageAndUpdateHeroTests } from '../toh-2/toh-spec-shared';
+
+describe('Tutorial part 4', () => {
+  beforeAll(() => browser.get(''));
+  initalPageAndUpdateHeroTests();
+});

public/docs/_examples/toh-4/dart/example-config.json

@@ -34,9 +34,11 @@ export class AppComponent implements OnInit {
   // #enddocregion heroes-prop
   selectedHero: Hero;
 
+  /*
   // #docregion new-service
   heroService = new HeroService(); // don't do this
   // #enddocregion new-service
+  */
   // #docregion ctor
   constructor(private heroService: HeroService) { }
   // #enddocregion ctor