e2e(router): fix test for canceling of crisis detail change (#3379)

- Await for alert dialog and use it in test for canceling crisis detail change.
- Tests now use async/await. It makes them easier to read.
- Remove "money patch" alerter comment.

public/docs/_examples/router/e2e-spec.ts

@@ -1,30 +1,34 @@
 'use strict'; // necessary for es6 output in node
 
-import { browser, element, by, ElementFinder } from 'protractor';
+import { browser, element, by, ExpectedConditions } from 'protractor';
 
-describe('Router', function () {
+const numDashboardTabs = 5;
+const numCrises = 4;
+const numHeroes = 6;
+const EC = ExpectedConditions;
 
-  beforeAll(function () {
+describe('Router', () => {
-    browser.get('');
+
-  });
+  beforeAll(() => browser.get(''));
 
   function getPageStruct() {
-    let hrefEles = element.all(by.css('my-app a'));
+    const hrefEles = element.all(by.css('my-app a'));
+    const crisisDetail = element.all(by.css('my-app > ng-component > ng-component > ng-component > div')).first();
+    const heroDetail = element(by.css('my-app > ng-component > div'));
 
     return {
       hrefs: hrefEles,
-      routerParent: element(by.css('my-app > ng-component')),
+      activeHref: element(by.css('my-app a.active')),
-      routerTitle: element(by.css('my-app > ng-component > h2')),
 
       crisisHref: hrefEles.get(0),
       crisisList: element.all(by.css('my-app > ng-component > ng-component li')),
-      crisisDetail: element(by.css('my-app > ng-component > ng-component > ng-component > div')),
+      crisisDetail: crisisDetail,
-      crisisDetailTitle: element(by.css('my-app > ng-component > ng-component > ng-component > div > h3')),
+      crisisDetailTitle: crisisDetail.element(by.xpath('*[1]')),
 
       heroesHref: hrefEles.get(1),
       heroesList: element.all(by.css('my-app > ng-component li')),
-      heroDetail: element(by.css('my-app > ng-component > div')),
+      heroDetail: heroDetail,
-      heroDetailTitle: element(by.css('my-app > ng-component > div > h3')),
+      heroDetailTitle: heroDetail.element(by.xpath('*[1]')),
 
       adminHref: hrefEles.get(2),
       adminPreloadList: element.all(by.css('my-app > ng-component > ng-component > ul > li')),
@@ -39,9 +43,9 @@ describe('Router', function () {
     };
   }
 
-  it('should be able to see the start screen', function () {
+  it('has expected dashboard tabs', () => {
-    let page = getPageStruct();
+    const page = getPageStruct();
-    expect(page.hrefs.count()).toEqual(5, 'should be 5 dashboard choices');
+    expect(page.hrefs.count()).toEqual(numDashboardTabs, 'dashboard tab count');
     expect(page.crisisHref.getText()).toEqual('Crisis Center');
     expect(page.heroesHref.getText()).toEqual('Heroes');
     expect(page.adminHref.getText()).toEqual('Admin');
@@ -49,118 +53,110 @@ describe('Router', function () {
     expect(page.contactHref.getText()).toEqual('Contact');
   });
 
-  it('should be able to see crises center items', function () {
+  it('has heroes selected as opening tab', () => {
-    let page = getPageStruct();
+    const page = getPageStruct();
-    page.crisisHref.click().then(function() {
+    expect(page.activeHref.getText()).toEqual('Heroes');
-      expect(page.crisisList.count()).toBe(4, 'should be 4 crisis center entries at start');
-    });
   });
 
-  it('should be able to see hero items', function () {
+  it('has crises center items', async () => {
-    let page = getPageStruct();
+    const page = getPageStruct();
-    page.heroesHref.click().then(function() {
+    await page.crisisHref.click();
-      expect(page.routerTitle.getText()).toContain('HEROES');
+    expect(page.activeHref.getText()).toEqual('Crisis Center');
-      expect(page.heroesList.count()).toBe(6, 'should be 6 heroes');
+    expect(page.crisisList.count()).toBe(numCrises, 'crisis list count');
-    });
   });
 
-  it('should be able to toggle the views', function () {
+  it('has hero items', async () => {
-    let page = getPageStruct();
+    const page = getPageStruct();
-    page.crisisHref.click().then(function() {
+    await page.heroesHref.click();
-      expect(page.crisisList.count()).toBe(4, 'should be 4 crisis center entries');
+    expect(page.activeHref.getText()).toEqual('Heroes');
-      return page.heroesHref.click();
+    expect(page.heroesList.count()).toBe(numHeroes, 'hero list count');
-    }).then(function() {
-      expect(page.heroesList.count()).toBe(6, 'should be 6 heroes');
-    });
   });
 
-  it('should be able to edit and save details from the crisis center view', function () {
+  it('toggles views', async () => {
-    let page = getPageStruct();
+    const page = getPageStruct();
-    page.crisisHref.click().then(function() {
+    await page.crisisHref.click();
-      crisisCenterEdit(2, true);
+    expect(page.activeHref.getText()).toEqual('Crisis Center');
-    });
+    expect(page.crisisList.count()).toBe(numCrises, 'crisis list count');
+    await page.heroesHref.click();
+    expect(page.activeHref.getText()).toEqual('Heroes');
+    expect(page.heroesList.count()).toBe(numHeroes, 'hero list count');
   });
 
-  xit('should be able to edit and cancel details from the crisis center view', function () {
+  it('saves changed crisis details', async () => {
-    let page = getPageStruct();
+    const page = getPageStruct();
-    page.crisisHref.click().then(function() {
+    await page.crisisHref.click();
-      crisisCenterEdit(3, false);
+    await crisisCenterEdit(2, true);
-    });
   });
 
-  it('should be able to edit and save details from the heroes view', function () {
+  it('can cancel changed crisis details', async () => {
-    let page = getPageStruct();
+    const page = getPageStruct();
-    let heroEle: ElementFinder;
+    await page.crisisHref.click();
-    let heroText: string;
+    await crisisCenterEdit(3, false);
-    page.heroesHref.click().then(function() {
+  });
-      heroEle = page.heroesList.get(4);
+
-      return heroEle.getText();
+  it('saves changed hero details', async () => {
-    }).then(function(text: string) {
+    const page = getPageStruct();
-      expect(text.length).toBeGreaterThan(0, 'should have some text');
+    await page.heroesHref.click();
+    const heroEle = page.heroesList.get(4);
+    let text = await heroEle.getText();
+    expect(text.length).toBeGreaterThan(0, 'hero item text length');
     // remove leading id from text
-      heroText = text.substr(text.indexOf(' ')).trim();
+    const heroText = text.substr(text.indexOf(' ')).trim();
-      return heroEle.click();
+
-    }).then(function() {
+    await heroEle.click();
-      expect(page.heroesList.count()).toBe(0, 'should no longer see crisis center entries');
+    expect(page.heroesList.count()).toBe(0, 'hero list count');
-      expect(page.heroDetail.isPresent()).toBe(true, 'should be able to see crisis detail');
+    expect(page.heroDetail.isPresent()).toBe(true, 'hero detail');
     expect(page.heroDetailTitle.getText()).toContain(heroText);
     let inputEle = page.heroDetail.element(by.css('input'));
-      inputEle.sendKeys('-foo');
+    await inputEle.sendKeys('-foo');
     expect(page.heroDetailTitle.getText()).toContain(heroText + '-foo');
+
     let buttonEle = page.heroDetail.element(by.css('button'));
-      return buttonEle.click();
+    await buttonEle.click();
-    }).then(function() {
     expect(heroEle.getText()).toContain(heroText + '-foo');
   });
+
+  it('sees preloaded modules', async () => {
+    const page = getPageStruct();
+    await page.loginHref.click();
+    await page.loginButton.click();
+    const list = page.adminPreloadList;
+    expect(list.count()).toBe(1, 'preloaded module');
+    expect(await list.first().getText()).toBe('crisis-center', 'first preloaded module');
   });
 
-  it('should be able to see the preloaded modules', function () {
+  it('sees the secondary route', async () => {
-    let page = getPageStruct();
+    const page = getPageStruct();
-    page.loginHref.click().then(function() {
+    await page.heroesHref.click();
-      return page.loginButton.click();
+    await page.contactHref.click();
-    }).then(function() {
+    expect(page.outletComponents.count()).toBe(2, 'route count');
-      expect(page.adminPreloadList.count()).toBe(1, 'should be 1 preloaded module');
-      expect(page.adminPreloadList.first().getText()).toBe('crisis-center', 'first preload should be crisis center');
-    });
   });
 
-  it('should be able to see the secondary route', function () {
+  async function crisisCenterEdit(index: number, save: boolean) {
-    let page = getPageStruct();
+    const page = getPageStruct();
-    page.heroesHref.click().then(function() {
+    await page.crisisHref.click();
-      return page.contactHref.click();
+    let crisisEle = page.crisisList.get(index);
-    }).then(function() {
+    let text = await crisisEle.getText();
-      expect(page.outletComponents.count()).toBe(2, 'should be 2 displayed routes');
+    expect(text.length).toBeGreaterThan(0, 'crisis item text length');
-    });
-  });
-
-  function crisisCenterEdit(index: number, shouldSave: boolean) {
-    let page = getPageStruct();
-    let crisisEle: ElementFinder;
-    let crisisText: string;
-    page.crisisHref.click()
-    .then(function () {
-      crisisEle = page.crisisList.get(index);
-      return crisisEle.getText();
-    }).then(function(text: string) {
-      expect(text.length).toBeGreaterThan(0, 'should have some text');
     // remove leading id from text
-      crisisText = text.substr(text.indexOf(' ')).trim();
+    const crisisText = text.substr(text.indexOf(' ')).trim();
-      return crisisEle.click();
+
-    }).then(function () {
+    await crisisEle.click();
-      expect(page.crisisDetail.isPresent()).toBe(true, 'should be able to see crisis detail');
+    expect(page.crisisDetail.isPresent()).toBe(true, 'crisis detail present');
     expect(page.crisisDetailTitle.getText()).toContain(crisisText);
     let inputEle = page.crisisDetail.element(by.css('input'));
-      inputEle.sendKeys('-foo');
+    await inputEle.sendKeys('-foo');
-      expect(page.crisisDetailTitle.getText()).toContain(crisisText + '-foo');
+
-      let buttonEle = page.crisisDetail.element(by.cssContainingText('button', shouldSave ? 'Save' : 'Cancel'));
+    let buttonEle = page.crisisDetail.element(by.buttonText(save ? 'Save' : 'Cancel'));
-      return buttonEle.click();
+    await buttonEle.click();
-    }).then(function () {
+    crisisEle = page.crisisList.get(index);
-      if (shouldSave) {
+    if (save) {
-        expect(crisisEle.getText()).toContain(crisisText + '-foo');
+      expect(crisisEle.getText()).toEqual(crisisText + '-foo');
     } else {
-        expect(crisisEle.getText()).not.toContain(crisisText + '-foo');
+      await browser.wait(EC.alertIsPresent(), 4000);
+      await browser.switchTo().alert().accept();
+      expect(crisisEle.getText()).toEqual(crisisText);
     }
-    });
   }
 
 });

public/docs/_examples/template-syntax/ts/src/app/app.component.ts

@@ -5,11 +5,6 @@ import { AfterViewInit, Component, ElementRef, OnInit, QueryList, ViewChildren }
 
 import { Hero } from './hero';
 
-// Alerter fn: monkey patch during test
-export function alerter(msg?: string) {
-  window.alert(msg);
-}
-
 export enum Color {Red, Green, Blue};
 
 /**
@@ -38,13 +33,13 @@ export class AppComponent implements AfterViewInit, OnInit {
   @ViewChildren('withTrackBy') heroesWithTrackBy: QueryList<ElementRef>;
 
   actionName = 'Go for it';
-  alert = alerter;
   badCurly = 'bad curly';
   classes = 'special';
   help = '';
 
-  callFax(value: string)   {this.alert(`Faxing ${value} ...`); }
+  alert(msg?: string)      { window.alert(msg); }
-  callPhone(value: string) {this.alert(`Calling ${value} ...`); }
+  callFax(value: string)   { this.alert(`Faxing ${value} ...`); }
+  callPhone(value: string) { this.alert(`Calling ${value} ...`); }
   canSave =  true;
 
   changeIds() {