test: add class with e2e test utilities (#2070)

* test: add class with e2e test utilities

* Adds a class that simplifies some common and hard to remember Protractor expressions.
* Refactors the existing tests to use the new utilities.

Fixes #2025.

* Add types to the e2e utils and fix the selector on the dialog tests.

* Remove unnecessary rounding.

* Remove `any` cast.

* Simplify the slide toggle tests.

* Split the E2E utils class into smaller files.

* Fix a leftover.

Author: crisbeto

e2e/components/button/button.e2e.ts

@@ -2,13 +2,11 @@ import {browser, by, element} from 'protractor';
 import {screenshot} from '../../screenshot';
 
 
-describe('button', function () {
-  describe('disabling behavior', function () {
-    beforeEach(function() {
-      browser.get('/button');
-    });
+describe('button', () => {
+  describe('disabling behavior', () => {
+    beforeEach(() => browser.get('/button'));
 
-    it('should prevent click handlers from executing when disabled', function () {
+    it('should prevent click handlers from executing when disabled', () => {
       element(by.id('test-button')).click();
       expect(element(by.id('click-counter')).getText()).toEqual('1');
       screenshot('clicked once');

e2e/components/dialog/dialog.e2e.ts

@@ -1,28 +1,31 @@
-import {browser, by, element, Key, ProtractorBy} from 'protractor';
+import {browser, by, element, Key} from 'protractor';
+import {expectToExist, expectFocusOn} from '../../util/asserts';
+import {pressKeys, clickElementAtPoint} from '../../util/actions';
+import {waitForElement} from '../../util/query';
 
 describe('dialog', () => {
   beforeEach(() => browser.get('/dialog'));
 
   it('should open a dialog', () => {
     element(by.id('default')).click();
-    waitForDialog().then((isPresent: boolean) => expect(isPresent).toBe(true));
+    expectToExist('md-dialog-container');
   });
 
   it('should close by clicking on the backdrop', () => {
     element(by.id('default')).click();
 
     waitForDialog().then(() => {
       clickOnBackrop();
-      waitForDialog().then((isPresent: boolean) => expect(isPresent).toBe(false));
+      expectToExist('md-dialog-container', false);
     });
   });
 
   it('should close by pressing escape', () => {
     element(by.id('default')).click();
 
     waitForDialog().then(() => {
-      pressEscape();
-      waitForDialog().then((isPresent: boolean) => expect(isPresent).toBe(false));
+      pressKeys(Key.ESCAPE);
+      expectToExist('md-dialog-container', false);
     });
   });
 
@@ -31,15 +34,15 @@ describe('dialog', () => {
 
     waitForDialog().then(() => {
       element(by.id('close')).click();
-      waitForDialog().then((isPresent: boolean) => expect(isPresent).toBe(false));
+      expectToExist('md-dialog-container', false);
     });
   });
 
   it('should focus the first focusable element', () => {
     element(by.id('default')).click();
 
     waitForDialog().then(() => {
-      expectFocusOn(element(by.css('md-dialog-container input')));
+      expectFocusOn('md-dialog-container input');
     });
   });
 
@@ -60,8 +63,8 @@ describe('dialog', () => {
     waitForDialog().then(() => {
       let tab = Key.TAB;
 
-      browser.actions().sendKeys(tab, tab, tab).perform();
-      expectFocusOn(element(by.id('close')));
+      pressKeys(tab, tab, tab);
+      expectFocusOn('#close');
     });
   });
 
@@ -70,38 +73,24 @@ describe('dialog', () => {
 
     waitForDialog().then(() => {
       clickOnBackrop();
-      waitForDialog().then((isPresent: boolean) => expect(isPresent).toBe(true));
+      expectToExist('md-dialog-container');
     });
   });
 
   it('should be able to prevent closing by pressing escape', () => {
     element(by.id('disabled')).click();
 
     waitForDialog().then(() => {
-      pressEscape();
-      waitForDialog().then((isPresent: boolean) => expect(isPresent).toBe(true));
+      pressKeys(Key.ESCAPE);
+      expectToExist('md-dialog-container');
     });
   });
 
   function waitForDialog() {
-    return browser.isElementPresent(by.css('md-dialog-container') as ProtractorBy);
+    return waitForElement('md-dialog-container');
   }
 
   function clickOnBackrop() {
-    browser.actions()
-      // We need to move the cursor to the top left so
-      // the dialog doesn't receive the click accidentally.
-      .mouseMove(element(by.css('.cdk-overlay-backdrop')).getWebElement(), { x: 0, y: 0 })
-      .click()
-      .perform();
-  }
-
-  function pressEscape() {
-    browser.actions().sendKeys(Key.ESCAPE).perform();
-  }
-
-  // TODO(crisbeto): should be moved to a common util. copied from the menu e2e setup.
-  function expectFocusOn(el: any): void {
-    expect(browser.driver.switchTo().activeElement().getId()).toBe(el.getId());
+    clickElementAtPoint('.cdk-overlay-backdrop', { x: 0, y: 0 });
   }
 });

e2e/components/grid-list/grid-list.e2e.ts

@@ -1,14 +1,14 @@
-import {browser, by, element} from 'protractor';
+import {browser} from 'protractor';
+import {expectToExist} from '../../util/asserts';
 
 describe('grid-list', () => {
   beforeEach(() => browser.get('/grid-list'));
 
   it('should render a grid list container', () => {
-    expect(element(by.css('md-grid-list')).isPresent()).toBe(true);
+    expectToExist('md-grid-list');
   });
 
   it('should render list items inside the grid list container', () => {
-    let container = element(by.css('md-grid-list'));
-    expect(container.isElementPresent(by.css('md-grid-tile'))).toBe(true);
+    expectToExist('md-grid-list md-grid-tile');
   });
 });

e2e/components/list/list.e2e.ts

@@ -1,14 +1,14 @@
-import {browser, by, element} from 'protractor';
+import {browser} from 'protractor';
+import {expectToExist} from '../../util/asserts';
 
 describe('list', () => {
   beforeEach(() => browser.get('/list'));
 
   it('should render a list container', () => {
-    expect(element(by.css('md-list')).isPresent()).toBe(true);
+    expectToExist('md-list');
   });
 
   it('should render list items inside the list container', () => {
-    let container = element(by.css('md-list'));
-    expect(container.isElementPresent(by.css('md-list-item'))).toBe(true);
+    expectToExist('md-list md-list-item');
   });
 });

e2e/components/menu/menu-page.ts

@@ -1,68 +1,33 @@
-import {browser, by, element, ElementFinder, ProtractorBy} from 'protractor';
+import {browser, by, element, ElementFinder} from 'protractor';
 
 export class MenuPage {
+  constructor() { browser.get('/menu'); }
 
-  constructor() {
-    browser.get('/menu');
-  }
+  menu(): ElementFinder { return element(by.css('.md-menu-panel')); }
 
-  menu() { return element(by.css('.md-menu-panel')); }
+  start(): ElementFinder { return element(by.id('start')); }
 
-  start() { return element(by.id('start')); }
+  trigger(): ElementFinder { return element(by.id('trigger')); }
 
-  trigger() { return element(by.id('trigger')); }
+  triggerTwo(): ElementFinder { return element(by.id('trigger-two')); }
 
-  triggerTwo() { return element(by.id('trigger-two')); }
+  backdrop(): ElementFinder { return element(by.css('.cdk-overlay-backdrop')); }
 
-  backdrop() { return element(by.css('.cdk-overlay-backdrop')); }
+  items(index: number): ElementFinder { return element.all(by.css('[md-menu-item]')).get(index); }
 
-  items(index: number) { return element.all(by.css('[md-menu-item]')).get(index); }
+  textArea(): ElementFinder { return element(by.id('text')); }
 
-  textArea() { return element(by.id('text')); }
+  beforeTrigger(): ElementFinder { return element(by.id('before-t')); }
 
-  beforeTrigger() { return element(by.id('before-t')); }
+  aboveTrigger(): ElementFinder { return element(by.id('above-t')); }
 
-  aboveTrigger() { return element(by.id('above-t')); }
+  combinedTrigger(): ElementFinder { return element(by.id('combined-t')); }
 
-  combinedTrigger() { return element(by.id('combined-t')); }
+  beforeMenu(): ElementFinder { return element(by.css('.md-menu-panel.before')); }
 
-  beforeMenu() { return element(by.css('.md-menu-panel.before')); }
+  aboveMenu(): ElementFinder { return element(by.css('.md-menu-panel.above')); }
 
-  aboveMenu() { return element(by.css('.md-menu-panel.above')); }
+  combinedMenu(): ElementFinder { return element(by.css('.md-menu-panel.combined')); }
 
-  combinedMenu() { return element(by.css('.md-menu-panel.combined')); }
-
-  // TODO(kara): move to common testing utility
-  pressKey(key: string): void {
-    browser.actions().sendKeys(key).perform();
-  }
-
-  // TODO(kara): move to common testing utility
-  expectFocusOn(el: any): void {
-    expect(browser.driver.switchTo().activeElement().getId()).toBe(el.getId());
-  }
-
-  expectMenuPresent(expected: boolean) {
-    return browser.isElementPresent(by.css('.md-menu-panel') as ProtractorBy)
-        .then((isPresent: boolean) => {
-          expect(isPresent).toBe(expected);
-        });
-  }
-
-  expectMenuLocation(el: ElementFinder, {x, y}: {x: number, y: number}) {
-    el.getLocation().then(loc => {
-      expect(loc.x).toEqual(x, 'Expect the x-position to be equal');
-      expect(loc.y).toEqual(y, 'Expect the y-position to be equal');
-    });
-  }
-
-  expectMenuAlignedWith(el: ElementFinder, id: string) {
-    element(by.id(id)).getLocation().then(loc => {
-      this.expectMenuLocation(el, {x: loc.x, y: loc.y});
-    });
-  }
-
-  getResultText() {
-    return this.textArea().getText();
-  }
+  getResultText() { return this.textArea().getText(); }
 }