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.

Author: crisbeto

e2e/components/button/button.e2e.ts

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

e2e/components/checkbox/checkbox.e2e.ts

@@ -1,18 +1,19 @@
-describe('checkbox', function () {
-  describe('check behavior', function () {
-    beforeEach(function() {
-      browser.get('/checkbox');
-    });
-    it('should be checked when clicked, and be unchecked when clicked again', function () {
+describe('checkbox', () => {
+  describe('check behavior', () => {
+    beforeEach(() => browser.get('/checkbox'));
+
+    it('should be checked when clicked, and be unchecked when clicked again', () => {
       element(by.id('test-checkbox')).click();
-      element(by.css('input[id=input-test-checkbox]')).getAttribute('checked').then((value: string) => {
-        expect(value).toBeTruthy('Expect checkbox "checked" property to be true');
-      });
+      element(by.css('input[id=input-test-checkbox]')).getAttribute('checked')
+        .then((value: string) => {
+          expect(value).toBeTruthy('Expect checkbox "checked" property to be true');
+        });
 
       element(by.id('test-checkbox')).click();
-      element(by.css('input[id=input-test-checkbox]')).getAttribute('checked').then((value: string) => {
-        expect(value).toBeFalsy('Expect checkbox "checked" property to be false');
-      });
+      element(by.css('input[id=input-test-checkbox]')).getAttribute('checked')
+        .then((value: string) => {
+          expect(value).toBeFalsy('Expect checkbox "checked" property to be false');
+        });
     });
   });
 });

e2e/components/dialog/dialog.e2e.ts

@@ -1,26 +1,30 @@
+import {E2EUtils} from '../../utils.e2e';
+
 describe('dialog', () => {
+  const utils = new E2EUtils();
+
   beforeEach(() => browser.get('/dialog'));
 
   it('should open a dialog', () => {
     element(by.id('default')).click();
-    waitForDialog().then(isPresent => expect(isPresent).toBe(true));
+    utils.expectToExist('md-dialog-container');
   });
 
   it('should close by clicking on the backdrop', () => {
     element(by.id('default')).click();
 
     waitForDialog().then(() => {
       clickOnBackrop();
-      waitForDialog().then(isPresent => expect(isPresent).toBe(false));
+      utils.expectToExist('md-dialog-container', false);
     });
   });
 
   it('should close by pressing escape', () => {
     element(by.id('default')).click();
 
     waitForDialog().then(() => {
-      pressEscape();
-      waitForDialog().then(isPresent => expect(isPresent).toBe(false));
+      utils.pressKeys(protractor.Key.ESCAPE);
+      utils.expectToExist('md-dialog-container', false);
     });
   });
 
@@ -29,15 +33,15 @@ describe('dialog', () => {
 
     waitForDialog().then(() => {
       element(by.id('close')).click();
-      waitForDialog().then(isPresent => expect(isPresent).toBe(false));
+      utils.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')));
+      utils.expectFocusOn('md-dialog-container input');
     });
   });
 
@@ -48,7 +52,7 @@ describe('dialog', () => {
 
     waitForDialog().then(() => {
       clickOnBackrop();
-      expectFocusOn(openButton);
+      utils.expectFocusOn(openButton);
     });
   });
 
@@ -58,8 +62,8 @@ describe('dialog', () => {
     waitForDialog().then(() => {
       let tab = protractor.Key.TAB;
 
-      browser.actions().sendKeys(tab, tab, tab).perform();
-      expectFocusOn(element(by.id('close')));
+      utils.pressKeys(tab, tab, tab);
+      utils.expectFocusOn('#close');
     });
   });
 
@@ -68,38 +72,24 @@ describe('dialog', () => {
 
     waitForDialog().then(() => {
       clickOnBackrop();
-      waitForDialog().then(isPresent => expect(isPresent).toBe(true));
+      utils.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 => expect(isPresent).toBe(true));
+      utils.pressKeys(protractor.Key.ESCAPE);
+      utils.expectToExist('md-dialog-container');
     });
   });
 
   function waitForDialog() {
-    return browser.isElementPresent(by.css('md-dialog-container'));
+    return utils.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('.md-overlay-backdrop')).getWebElement(), { x: 0, y: 0 })
-      .click()
-      .perform();
-  }
-
-  function pressEscape() {
-    browser.actions().sendKeys(protractor.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().getInnerHtml()).toBe(el.getInnerHtml());
+    utils.clickElementAtPoint('.md-overlay-backdrop', { x: 0, y: 0 });
   }
 });

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

@@ -1,12 +1,15 @@
+import {E2EUtils} from '../../utils.e2e';
+
 describe('grid-list', () => {
+  const utils = new E2EUtils();
+
   beforeEach(() => browser.get('/grid-list'));
 
   it('should render a grid list container', () => {
-    expect(element(by.css('md-grid-list')).isPresent()).toBe(true);
+    utils.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);
+    utils.expectToExist('md-grid-list md-grid-tile');
   });
 });

e2e/components/list/list.e2e.ts

@@ -1,12 +1,15 @@
+import {E2EUtils} from '../../utils.e2e';
+
 describe('list', () => {
+  const utils = new E2EUtils();
+
   beforeEach(() => browser.get('/list'));
 
   it('should render a list container', () => {
-    expect(element(by.css('md-list')).isPresent()).toBe(true);
+    utils.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);
+    utils.expectToExist('md-list md-list-item');
   });
 });

e2e/components/menu/menu-page.ts

@@ -1,10 +1,5 @@
-import ElementFinder = protractor.ElementFinder;
-
 export class MenuPage {
-
-  constructor() {
-    browser.get('/menu');
-  }
+  constructor() { browser.get('/menu'); }
 
   menu() { return element(by.css('.md-menu-panel')); }
 
@@ -16,9 +11,7 @@ export class MenuPage {
 
   backdrop() { return element(by.css('.md-overlay-backdrop')); }
 
-  items(index: number) {
-    return element.all(by.css('[md-menu-item]')).get(index);
-  }
+  items(index: number) { return element.all(by.css('[md-menu-item]')).get(index); }
 
   textArea() { return element(by.id('text')); }
 
@@ -34,37 +27,5 @@ export class MenuPage {
 
   combinedMenu() { return element(by.css('.md-menu-panel.combined')); }
 
-  // TODO(kara): move to common testing utility
-  pressKey(key: any): void {
-    browser.actions().sendKeys(key).perform();
-  }
-
-  // TODO(kara): move to common testing utility
-  expectFocusOn(el: ElementFinder): void {
-    expect(browser.driver.switchTo().activeElement().getInnerHtml())
-        .toBe(el.getInnerHtml());
-  }
-
-  expectMenuPresent(expected: boolean) {
-    return browser.isElementPresent(by.css('.md-menu-panel')).then(isPresent => {
-      expect(isPresent).toBe(expected);
-    });
-  }
-
-  expectMenuLocation(el: ElementFinder, {x, y}: {x: number, y: number}) {
-    el.getLocation().then(loc => {
-      expect(loc.x).toEqual(x);
-      expect(loc.y).toEqual(y);
-    });
-  }
-
-  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(); }
 }