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.

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,11 +1,14 @@
-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', () => {
@@ -13,7 +16,7 @@ describe('dialog', () => {
 
     waitForDialog().then(() => {
       clickOnBackrop();
-      waitForDialog().then((isPresent: boolean) => expect(isPresent).toBe(false));
+      expectToExist('md-dialog-container', false);
     });
   });
 
@@ -21,8 +24,8 @@ describe('dialog', () => {
     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,7 +34,7 @@ describe('dialog', () => {
 
     waitForDialog().then(() => {
       element(by.id('close')).click();
-      waitForDialog().then((isPresent: boolean) => expect(isPresent).toBe(false));
+      expectToExist('md-dialog-container', false);
     });
   });
 
@@ -39,7 +42,7 @@ describe('dialog', () => {
     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,7 +73,7 @@ describe('dialog', () => {
 
     waitForDialog().then(() => {
       clickOnBackrop();
-      waitForDialog().then((isPresent: boolean) => expect(isPresent).toBe(true));
+      expectToExist('md-dialog-container');
     });
   });
 
@@ -78,30 +81,16 @@ describe('dialog', () => {
     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(); }
 }

e2e/components/menu/menu.e2e.ts

@@ -1,25 +1,26 @@
 import {browser, Key, protractor} from 'protractor';
 import {MenuPage} from './menu-page';
+import {expectToExist, expectAlignedWith, expectFocusOn, expectLocation} from '../../util/asserts';
+import {pressKeys} from '../../util/actions';
 
 describe('menu', () => {
+  const menuSelector = '.md-menu-panel';
   let page: MenuPage;
 
-  beforeEach(function() {
-    page = new MenuPage();
-  });
+  beforeEach(() => page = new MenuPage());
 
   it('should open menu when the trigger is clicked', () => {
-    page.expectMenuPresent(false);
+    expectToExist(menuSelector, false);
     page.trigger().click();
 
-    page.expectMenuPresent(true);
+    expectToExist(menuSelector);
     expect(page.menu().getText()).toEqual('One\nTwo\nThree\nFour');
   });
 
   it('should close menu when menu item is clicked', () => {
     page.trigger().click();
     page.items(0).click();
-    page.expectMenuPresent(false);
+    expectToExist(menuSelector, false);
   });
 
   it('should run click handlers on regular menu items', () => {
@@ -40,18 +41,20 @@ describe('menu', () => {
 
   it('should support multiple triggers opening the same menu', () => {
     page.triggerTwo().click();
+
     expect(page.menu().getText()).toEqual('One\nTwo\nThree\nFour');
-    page.expectMenuAlignedWith(page.menu(), 'trigger-two');
+    expectAlignedWith(page.menu(), '#trigger-two');
 
     page.backdrop().click();
-    page.expectMenuPresent(false);
+    expectToExist(menuSelector, false);
 
     page.trigger().click();
+
     expect(page.menu().getText()).toEqual('One\nTwo\nThree\nFour');
-    page.expectMenuAlignedWith(page.menu(), 'trigger');
+    expectAlignedWith(page.menu(), '#trigger');
 
     page.backdrop().click();
-    page.expectMenuPresent(false);
+    expectToExist(menuSelector, false);
   });
 
   it('should mirror classes on host to menu template in overlay', () => {
@@ -65,82 +68,71 @@ describe('menu', () => {
     beforeEach(() => {
       // click start button to avoid tabbing past navigation
       page.start().click();
-      page.pressKey(Key.TAB);
+      pressKeys(Key.TAB);
     });
 
     it('should auto-focus the first item when opened with ENTER', () => {
-      page.pressKey(Key.ENTER);
-      page.expectFocusOn(page.items(0));
+      pressKeys(Key.ENTER);
+      expectFocusOn(page.items(0));
     });
 
     it('should auto-focus the first item when opened with SPACE', () => {
-      page.pressKey(Key.SPACE);
-      page.expectFocusOn(page.items(0));
+      pressKeys(Key.SPACE);
+      expectFocusOn(page.items(0));
     });
 
     it('should not focus the first item when opened with mouse', () => {
       page.trigger().click();
-      page.expectFocusOn(page.trigger());
+      expectFocusOn(page.trigger());
     });
 
     it('should focus subsequent items when down arrow is pressed', () => {
-      page.pressKey(Key.ENTER);
-      page.pressKey(Key.DOWN);
-      page.expectFocusOn(page.items(1));
+      pressKeys(Key.ENTER, Key.DOWN);
+      expectFocusOn(page.items(1));
     });
 
     it('should focus previous items when up arrow is pressed', () => {
-      page.pressKey(Key.ENTER);
-      page.pressKey(Key.DOWN);
-      page.pressKey(Key.UP);
-      page.expectFocusOn(page.items(0));
+      pressKeys(Key.ENTER, Key.DOWN, Key.UP);
+      expectFocusOn(page.items(0));
     });
 
     it('should skip disabled items using arrow keys', () => {
-      page.pressKey(Key.ENTER);
-      page.pressKey(Key.DOWN);
-      page.pressKey(Key.DOWN);
-      page.expectFocusOn(page.items(3));
+      pressKeys(Key.ENTER, Key.DOWN, Key.DOWN);
+      expectFocusOn(page.items(3));
 
-      page.pressKey(Key.UP);
-      page.expectFocusOn(page.items(1));
+      pressKeys(Key.UP);
+      expectFocusOn(page.items(1));
     });
 
     it('should close the menu when tabbing past items', () => {
-      page.pressKey(Key.ENTER);
-      page.pressKey(Key.TAB);
-      page.expectMenuPresent(false);
+      pressKeys(Key.ENTER, Key.TAB);
+      expectToExist(menuSelector, false);
 
-      page.pressKey(Key.TAB);
-      page.pressKey(Key.ENTER);
-      page.expectMenuPresent(true);
+      pressKeys(Key.TAB, Key.ENTER);
+      expectToExist(menuSelector);
 
-      page.pressKey(protractor.Key.chord(Key.SHIFT, Key.TAB));
-      page.expectMenuPresent(false);
+      pressKeys(protractor.Key.chord(Key.SHIFT, Key.TAB));
+      expectToExist(menuSelector, false);
     });
 
     it('should wrap back to menu when arrow keying past items', () => {
-      page.pressKey(Key.ENTER);
-      page.pressKey(Key.DOWN);
-      page.pressKey(Key.DOWN);
-      page.pressKey(Key.DOWN);
-      page.expectFocusOn(page.items(0));
+      let down = Key.DOWN;
+      pressKeys(Key.ENTER, down, down, down);
+      expectFocusOn(page.items(0));
 
-      page.pressKey(Key.UP);
-      page.expectFocusOn(page.items(3));
+      pressKeys(Key.UP);
+      expectFocusOn(page.items(3));
     });
 
     it('should focus before and after trigger when tabbing past items', () => {
-      page.pressKey(Key.ENTER);
-      page.pressKey(Key.TAB);
-      page.expectFocusOn(page.triggerTwo());
+      let shiftTab = protractor.Key.chord(Key.SHIFT, Key.TAB);
+
+      pressKeys(Key.ENTER, Key.TAB);
+      expectFocusOn(page.triggerTwo());
 
       // navigate back to trigger
-      page.pressKey(protractor.Key.chord(protractor.Key.SHIFT, protractor.Key.TAB));
-      page.pressKey(Key.ENTER);
-
-      page.pressKey(protractor.Key.chord(protractor.Key.SHIFT, protractor.Key.TAB));
-      page.expectFocusOn(page.start());
+      pressKeys(shiftTab, Key.ENTER, shiftTab);
+      expectFocusOn(page.start());
     });
 
   });
@@ -151,7 +143,7 @@ describe('menu', () => {
       page.trigger().click();
 
       // menu.x should equal trigger.x, menu.y should equal trigger.y
-      page.expectMenuAlignedWith(page.menu(), 'trigger');
+      expectAlignedWith(page.menu(), '#trigger');
     });
 
     it('should align overlay end to origin end when x-position is "before"', () => {
@@ -162,7 +154,7 @@ describe('menu', () => {
         // menu = 112px wide. trigger = 60px wide.  112 - 60 =  52px of menu to the left of trigger.
         // trigger.x (left corner) - 52px (menu left of trigger) = expected menu.x (left corner)
         // menu.y should equal trigger.y because only x position has changed.
-        page.expectMenuLocation(page.beforeMenu(), {x: trigger.x - 52, y: trigger.y});
+        expectLocation(page.beforeMenu(), {x: trigger.x - 52, y: trigger.y});
       });
     });
 
@@ -174,7 +166,7 @@ describe('menu', () => {
         // menu.x should equal trigger.x because only y position has changed.
         // menu = 64px high. trigger = 20px high. 64 - 20 = 44px of menu extending up past trigger.
         // trigger.y (top corner) - 44px (menu above trigger) = expected menu.y (top corner)
-        page.expectMenuLocation(page.aboveMenu(), {x: trigger.x, y: trigger.y - 44});
+        expectLocation(page.aboveMenu(), {x: trigger.x, y: trigger.y - 44});
       });
     });
 
@@ -184,7 +176,7 @@ describe('menu', () => {
 
         // trigger.x (left corner) - 52px (menu left of trigger) = expected menu.x
         // trigger.y (top corner) - 44px (menu above trigger) = expected menu.y
-        page.expectMenuLocation(page.combinedMenu(), {x: trigger.x - 52, y: trigger.y - 44});
+        expectLocation(page.combinedMenu(), {x: trigger.x - 52, y: trigger.y - 44});
       });
     });
 

e2e/components/progress-bar/progress-bar.e2e.ts

@@ -1,25 +1,22 @@
-import {browser, by, element} from 'protractor';
+import {browser} from 'protractor';
+import {expectToExist} from '../../util/asserts';
 
 describe('progress-bar', () => {
   beforeEach(() => browser.get('/progress-bar'));
 
   it('should render a determinate progress bar', () => {
-    shouldExist('md-progress-bar[mode="determinate"]');
+    expectToExist('md-progress-bar[mode="determinate"]');
   });
 
   it('should render a buffer progress bar', () => {
-    shouldExist('md-progress-bar[mode="buffer"]');
+    expectToExist('md-progress-bar[mode="buffer"]');
   });
 
   it('should render a query progress bar', () => {
-    shouldExist('md-progress-bar[mode="query"]');
+    expectToExist('md-progress-bar[mode="query"]');
   });
 
   it('should render a indeterminate progress bar', () => {
-    shouldExist('md-progress-bar[mode="indeterminate"]');
+    expectToExist('md-progress-bar[mode="indeterminate"]');
   });
-
-  function shouldExist(selector: string): void {
-    expect(element(by.css(selector)).isPresent()).toBe(true);
-  }
 });

e2e/components/radio/radio.e2e.ts

@@ -1,13 +1,10 @@
 import {browser, by, element} from 'protractor';
 
-describe('radio', function () {
+describe('radio', () => {
+  describe('disabling behavior', () => {
+    beforeEach(() => browser.get('/radio'));
 
-  describe('disabling behavior', function () {
-    beforeEach(function() {
-      browser.get('/radio');
-    });
-
-    it('should be checked when clicked', function () {
+    it('should be checked when clicked', () => {
       element(by.id('water')).click();
       element(by.id('water')).getAttribute('class').then((value: string) => {
         expect(value).toContain('md-radio-checked');
@@ -31,7 +28,7 @@ describe('radio', function () {
       });
     });
 
-    it('should be disabled when disable the radio group', function () {
+    it('should be disabled when disable the radio group', () => {
       element(by.id('toggle-disable')).click();
       element(by.id('water')).click();
       element(by.id('water')).getAttribute('class').then((value: string) => {

e2e/components/slide-toggle/slide-toggle.e2e.ts

@@ -1,48 +1,48 @@
-import {browser, element, by, protractor} from 'protractor';
+import {browser, element, by, Key} from 'protractor';
+import {expectToExist} from '../../util/asserts';
 
 describe('slide-toggle', () => {
+  const getInput = () => element(by.css('#normal-slide-toggle input'));
+  const getNormalToggle = () => element(by.css('#normal-slide-toggle'));
 
   beforeEach(() => browser.get('slide-toggle'));
 
   it('should render a slide-toggle', () => {
-    expect(element(by.css('md-slide-toggle')).isPresent()).toBe(true);
+    expectToExist('md-slide-toggle');
   });
 
   it('should change the checked state on click', () => {
-    let slideToggleEl = element(by.css('#normal-slide-toggle'));
-    let inputEl = element(by.css('#normal-slide-toggle input'));
+    let inputEl = getInput();
 
     expect(inputEl.getAttribute('checked')).toBeFalsy('Expect slide-toggle to be unchecked');
 
-    slideToggleEl.click();
+    getNormalToggle().click();
 
     expect(inputEl.getAttribute('checked')).toBeTruthy('Expect slide-toggle to be checked');
   });
 
   it('should change the checked state on click', () => {
-    let slideToggleEl = element(by.css('#normal-slide-toggle'));
-    let inputEl = element(by.css('#normal-slide-toggle input'));
+    let inputEl = getInput();
 
     expect(inputEl.getAttribute('checked')).toBeFalsy('Expect slide-toggle to be unchecked');
 
-    slideToggleEl.click();
+    getNormalToggle().click();
 
     expect(inputEl.getAttribute('checked')).toBeTruthy('Expect slide-toggle to be checked');
   });
 
   it('should not change the checked state on click when disabled', () => {
-    let slideToggleEl = element(by.css('#disabled-slide-toggle'));
-    let inputEl = element(by.css('#disabled-slide-toggle input'));
+    let inputEl = getInput();
 
     expect(inputEl.getAttribute('checked')).toBeFalsy('Expect slide-toggle to be unchecked');
 
-    slideToggleEl.click();
+    element(by.css('#disabled-slide-toggle')).click();
 
     expect(inputEl.getAttribute('checked')).toBeFalsy('Expect slide-toggle to be unchecked');
   });
 
   it('should move the thumb on state change', () => {
-    let slideToggleEl = element(by.css('#normal-slide-toggle'));
+    let slideToggleEl = getNormalToggle();
     let thumbEl = element(by.css('#normal-slide-toggle .md-slide-toggle-thumb-container'));
 
     let previousX = thumbEl.getLocation().then(pos => pos.x);
@@ -55,11 +55,11 @@ describe('slide-toggle', () => {
   });
 
   it('should toggle the slide-toggle on space key', () => {
-    let inputEl = element(by.css('#normal-slide-toggle input'));
+    let inputEl = getInput();
 
     expect(inputEl.getAttribute('checked')).toBeFalsy('Expect slide-toggle to be unchecked');
 
-    inputEl.sendKeys(protractor.Key.SPACE);
+    inputEl.sendKeys(Key.SPACE);
 
     expect(inputEl.getAttribute('checked')).toBeTruthy('Expect slide-toggle to be checked');
   });

e2e/components/tabs/tabs.e2e.ts

@@ -1,4 +1,5 @@
 import {browser, by, element, ElementArrayFinder, ElementFinder, Key} from 'protractor';
+import {pressKeys} from '../../util/actions';
 
 describe('tabs', () => {
   describe('basic behavior', () => {
@@ -24,35 +25,33 @@ describe('tabs', () => {
     });
 
     it('should change focus with keyboard interaction', () => {
+      let right = Key.RIGHT;
+      let left = Key.LEFT;
+
       tabLabels.get(0).click();
       expect(getFocusStates(tabLabels)).toEqual([true, false, false]);
 
-      pressKey(Key.RIGHT);
+      pressKeys(right);
       expect(getFocusStates(tabLabels)).toEqual([false, true, false]);
 
-      pressKey(Key.RIGHT);
+      pressKeys(right);
       expect(getFocusStates(tabLabels)).toEqual([false, false, true]);
 
-      pressKey(Key.RIGHT);
+      pressKeys(right);
       expect(getFocusStates(tabLabels)).toEqual([false, false, true]);
 
-      pressKey(Key.LEFT);
+      pressKeys(left);
       expect(getFocusStates(tabLabels)).toEqual([false, true, false]);
 
-      pressKey(Key.LEFT);
+      pressKeys(left);
       expect(getFocusStates(tabLabels)).toEqual([true, false, false]);
 
-      pressKey(Key.LEFT);
+      pressKeys(left);
       expect(getFocusStates(tabLabels)).toEqual([true, false, false]);
     });
   });
 });
 
-/** A helper function to perform the sendKey action. */
-function pressKey(key: string) {
-  browser.actions().sendKeys(key).perform();
-}
-
 /**
  * Returns an array of true/false that represents the focus states of the provided elements.
  */

e2e/util/actions.ts

@@ -0,0 +1,21 @@
+import {browser} from 'protractor';
+import {getElement, FinderResult} from './query';
+
+/**
+ * Presses a single key or a sequence of keys.
+ */
+export function pressKeys(...keys: string[]): void {
+  let actions = browser.actions();
+  actions.sendKeys.call(actions, keys).perform();
+}
+
+/**
+ * Clicks an element at a specific point. Useful if there's another element
+ * that covers part of the target and can catch the click.
+ */
+export function clickElementAtPoint(element: FinderResult, coords: Point): void {
+  let webElement = getElement(element).getWebElement();
+  browser.actions().mouseMove(webElement, coords).click().perform();
+}
+
+export interface Point { x: number; y: number; }

e2e/util/asserts.ts

@@ -0,0 +1,39 @@
+import {browser} from 'protractor';
+import {getElement, FinderResult, waitForElement} from './query';
+import {Point} from './actions';
+
+/**
+ * Asserts that an element exists.
+ */
+export function expectToExist(selector: string, expected = true) {
+  return waitForElement(selector).then((isPresent: boolean) => {
+    expect(isPresent).toBe(expected, `Expected "${selector}"${expected ? '' : ' not'} to exist`);
+  });
+}
+
+/**
+ * Asserts that an element is focused.
+ */
+export function expectFocusOn(element: FinderResult, expected = true): void {
+  expect(browser.driver.switchTo().activeElement().getId()).toBe(
+    getElement(element).getId(), `Expected element${expected ? '' : ' not'} to be focused.`);
+}
+
+/**
+ * Asserts that an element has a certan location.
+ */
+export function expectLocation(element: FinderResult, {x, y}: Point): void {
+  getElement(element).getLocation().then((location: Point) => {
+    expect(location.x).toEqual(x);
+    expect(location.y).toEqual(y);
+  });
+}
+
+/**
+ * Asserts that one element is aligned with another.
+ */
+export function expectAlignedWith(element: FinderResult, otherElement: FinderResult): void {
+  getElement(otherElement).getLocation().then((location: Point) => {
+    this.expectLocation(getElement(element), location);
+  });
+}

e2e/util/query.ts

@@ -0,0 +1,18 @@
+import {ElementFinder, by, element, ProtractorBy, browser} from 'protractor';
+
+/**
+ * Normalizes either turning a selector into an
+ * ElementFinder or returning the finder itself.
+ */
+export function getElement(el: FinderResult): ElementFinder {
+  return typeof el === 'string' ? element(by.css(el)) : el;
+}
+
+/**
+ * Waits for an element to be rendered.
+ */
+export function waitForElement(selector: string) {
+  return browser.isElementPresent(by.css(selector) as ProtractorBy);
+}
+
+export type FinderResult = ElementFinder | string;