tests(toh-1/e2e): cleanup and updates incl. use of async/await

Author: chalin

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

@@ -1,27 +1,70 @@
 /// <reference path='../_protractor/e2e.d.ts' />
 'use strict';
+
+type WPromise<T> = webdriver.promise.Promise<T>;
+
+const expectedH1 = 'Tour of Heroes';
+const expectedTitle = `Angular 2 ${expectedH1}`;
+
+class Hero {
+  id: number;
+  name: string;
+
+  // Factory method
+  // 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(' '))
+    };
+  }
+}
+
+const nameSuffix = 'X';
+function addToHeroName(text: string): WPromise<void> {
+  let input = element(by.css('input'));
+  return sendKeys(input, text);
+}
+
 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}'`, () => {
+  it(`has title '${expectedTitle}'`, () => {
     expect(browser.getTitle()).toEqual(expectedTitle);
   });
 
-  it(`should have '${expectedH2}'`, () => {
-    let text = element(by.css('h2')).getText();
-    expect(text).toEqual(expectedH2);
+  it(`has h1 '${expectedH1}'`, () => {
+    let hText = element(by.css('h1')).getText();
+    expect(hText).toEqual(expectedH1, 'h1');
+  });
+
+  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 input name '${hero.name}'`, () => {
-    let name = element(by.css('input')).getAttribute('value');
-    expect(name).toEqual(hero.name);
+  it(`shows updated hero name`, async () => {
+    addToHeroName(nameSuffix);
+    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'))
+  };
+}