refactor: switch e2e tests to async/await

Switches to using async/await in the e2e tests. This should make it a bit easier to deal with Protractor's async APIs.

Author: crisbeto

e2e/components/block-scroll-strategy/block-scroll-strategy.e2e.ts

@@ -1,13 +1,13 @@
 import {browser, Key, element, by} from 'protractor';
 import {screenshot} from '../../screenshot';
-import {getScrollPosition} from '../../util/query';
+import {getScrollPosition, asyncSpec} from '../../util/index';
 
 
 describe('scroll blocking', () => {
   beforeEach(() => browser.get('/block-scroll-strategy'));
   afterEach(() => clickOn('disable'));
 
-  it('should not be able to scroll programmatically along the x axis', async (done) => {
+  it('should not be able to scroll programmatically along the x axis', asyncSpec(async () => {
     scrollPage(0, 100);
     expect((await getScrollPosition()).y).toBe(100, 'Expected the page to be scrollable.');
 
@@ -20,10 +20,9 @@ describe('scroll blocking', () => {
     expect((await getScrollPosition()).y).toBe(300, 'Exected page to be scrollable again.');
 
     screenshot();
-    done();
-  });
+  }));
 
-  it('should not be able to scroll programmatically along the y axis', async (done) => {
+  it('should not be able to scroll programmatically along the y axis', asyncSpec(async () => {
     scrollPage(100, 0);
     expect((await getScrollPosition()).x).toBe(100, 'Expected the page to be scrollable.');
 
@@ -36,10 +35,9 @@ describe('scroll blocking', () => {
     expect((await getScrollPosition()).x).toBe(300, 'Exected page to be scrollable again.');
 
     screenshot();
-    done();
-  });
+  }));
 
-  it('should not be able to scroll via the keyboard along the y axis', async (done) => {
+  it('should not be able to scroll via the keyboard along the y axis', asyncSpec(async () => {
     const body = element(by.tagName('body'));
 
     scrollPage(0, 100);
@@ -59,10 +57,9 @@ describe('scroll blocking', () => {
         .toBeGreaterThan(100, 'Expected the page to be scrollable again.');
 
     screenshot();
-    done();
-  });
+  }));
 
-  it('should not be able to scroll via the keyboard along the x axis', async (done) => {
+  it('should not be able to scroll via the keyboard along the x axis', asyncSpec(async () => {
     const body = element(by.tagName('body'));
 
     scrollPage(100, 0);
@@ -82,11 +79,10 @@ describe('scroll blocking', () => {
         .toBeGreaterThan(100, 'Expected the page to be scrollable again.');
 
     screenshot();
-    done();
-  });
+  }));
 
   it('should not be able to scroll the page after reaching the end of an element along the y axis',
-    async (done) => {
+    asyncSpec(async () => {
       const scroller = element(by.id('scroller'));
 
       browser.executeScript(`document.getElementById('scroller').scrollTop = 200;`);
@@ -100,11 +96,10 @@ describe('scroll blocking', () => {
       expect((await getScrollPosition()).y).toBe(100, 'Expected the page not to have scrolled.');
 
       screenshot();
-      done();
-    });
+    }));
 
   it('should not be able to scroll the page after reaching the end of an element along the x axis',
-    async (done) => {
+    asyncSpec(async () => {
       const scroller = element(by.id('scroller'));
 
       browser.executeScript(`document.getElementById('scroller').scrollLeft = 200;`);
@@ -118,8 +113,7 @@ describe('scroll blocking', () => {
       expect((await getScrollPosition()).x).toBe(100, 'Expected the page not to have scrolled.');
 
       screenshot();
-      done();
-    });
+    }));
 });
 
 // Clicks on a button programmatically. Note that we can't use Protractor's `.click`, because

e2e/components/button/button.e2e.ts

@@ -1,24 +1,27 @@
 import {browser, by, element, ExpectedConditions} from 'protractor';
 import {screenshot} from '../../screenshot';
+import {asyncSpec} from '../../util/index';
 
 
 describe('button', () => {
   describe('disabling behavior', () => {
     beforeEach(() => browser.get('/button'));
 
-    it('should prevent click handlers from executing when disabled', () => {
+    it('should prevent click handlers from executing when disabled', asyncSpec(async () => {
       element(by.id('test-button')).click();
       expect(element(by.id('click-counter')).getText()).toEqual('1');
-      browser.wait(ExpectedConditions.not(
-        ExpectedConditions.presenceOf(element(by.css('div.mat-ripple-element')))))
-        .then(() => screenshot('clicked once'));
+
+      await browser.wait(ExpectedConditions.not(
+        ExpectedConditions.presenceOf(element(by.css('div.mat-ripple-element')))));
+      screenshot('clicked once');
 
       element(by.id('disable-toggle')).click();
       element(by.id('test-button')).click();
       expect(element(by.id('click-counter')).getText()).toEqual('1');
-      browser.wait(ExpectedConditions.not(
-        ExpectedConditions.presenceOf(element(by.css('div.mat-ripple-element')))))
-        .then(() => screenshot('click disabled'));
-    });
+
+      await browser.wait(ExpectedConditions.not(
+        ExpectedConditions.presenceOf(element(by.css('div.mat-ripple-element')))));
+      screenshot('click disabled');
+    }));
   });
 });

e2e/components/checkbox/checkbox.e2e.ts

@@ -1,48 +1,47 @@
 import {browser, by, element, Key, ExpectedConditions} from 'protractor';
 import {screenshot} from '../../screenshot';
+import {asyncSpec} from '../../util/index';
 
-describe('checkbox', function () {
 
-  describe('check behavior', function () {
+describe('checkbox', () => {
 
-    beforeEach(function() {
-      browser.get('/checkbox');
-    });
+  describe('check behavior', () => {
+    beforeEach(() => browser.get('/checkbox'));
 
-    it('should be checked when clicked, and be unchecked when clicked again', () => {
+    it('should be checked when clicked, and unchecked when clicked again', asyncSpec(async () => {
       let checkboxEl = element(by.id('test-checkbox'));
       let inputEl = element(by.css('input[id=input-test-checkbox]'));
+      let checked: string;
 
       screenshot('start');
       checkboxEl.click();
-      inputEl.getAttribute('checked').then((value: string) => {
-        expect(value).toBeTruthy('Expect checkbox "checked" property to be true');
-        browser.wait(ExpectedConditions.not(
-          ExpectedConditions.presenceOf(element(by.css('div.mat-ripple-element')))))
-          .then(() => screenshot('checked'));
-      });
+
+      expect(inputEl.getAttribute('checked'))
+          .toBeTruthy('Expect checkbox "checked" property to be true');
+
+      await browser.wait(ExpectedConditions.not(
+        ExpectedConditions.presenceOf(element(by.css('div.mat-ripple-element')))));
+      screenshot('checked');
 
       checkboxEl.click();
-      inputEl.getAttribute('checked').then((value: string) => {
-        expect(value).toBeFalsy('Expect checkbox "checked" property to be false');
-        browser.wait(ExpectedConditions.not(
-          ExpectedConditions.presenceOf(element(by.css('div.mat-ripple-element')))))
-          .then(() => screenshot('unchecked'));
-      });
-    });
+
+      expect(inputEl.getAttribute('checked'))
+          .toBeFalsy('Expect checkbox "checked" property to be false');
+
+      await browser.wait(ExpectedConditions.not(
+        ExpectedConditions.presenceOf(element(by.css('div.mat-ripple-element')))));
+      screenshot('unchecked');
+    }));
 
     it('should toggle the checkbox when pressing space', () => {
       let inputEl = element(by.css('input[id=input-test-checkbox]'));
 
-      inputEl.getAttribute('checked').then((value: string) => {
-        expect(value).toBeFalsy('Expect checkbox "checked" property to be false');
-      });
-
+      expect(inputEl.getAttribute('checked'))
+          .toBeFalsy('Expect checkbox "checked" property to be false');
       inputEl.sendKeys(Key.SPACE);
 
-      inputEl.getAttribute('checked').then((value: string) => {
-        expect(value).toBeTruthy('Expect checkbox "checked" property to be true');
-      });
+      expect(inputEl.getAttribute('checked'))
+          .toBeTruthy('Expect checkbox "checked" property to be true');
     });
   });
 });

e2e/components/dialog/dialog.e2e.ts

@@ -1,7 +1,13 @@
 import {browser, by, element, Key} from 'protractor';
-import {expectToExist, expectFocusOn} from '../../util/asserts';
-import {pressKeys, clickElementAtPoint} from '../../util/actions';
-import {waitForElement} from '../../util/query';
+import {
+  expectToExist,
+  expectFocusOn,
+  pressKeys,
+  clickElementAtPoint,
+  waitForElement,
+  asyncSpec,
+} from '../../util/index';
+
 
 describe('dialog', () => {
   beforeEach(() => browser.get('/dialog'));
@@ -17,90 +23,80 @@ describe('dialog', () => {
     expectToExist('.my-template-dialog');
   });
 
-  it('should close by clicking on the backdrop', () => {
+  it('should close by clicking on the backdrop', asyncSpec(async() => {
     element(by.id('default')).click();
 
-    waitForDialog().then(() => {
-      clickOnBackrop();
-      expectToExist('md-dialog-container', false);
-    });
-  });
+    await waitForDialog();
+    clickOnBackrop();
+    expectToExist('md-dialog-container', false);
+  }));
 
-  it('should close by pressing escape', () => {
+  it('should close by pressing escape', asyncSpec(async () => {
     element(by.id('default')).click();
 
-    waitForDialog().then(() => {
-      pressKeys(Key.ESCAPE);
-      expectToExist('md-dialog-container', false);
-    });
-  });
+    await waitForDialog();
+    pressKeys(Key.ESCAPE);
+    expectToExist('md-dialog-container', false);
+  }));
 
-  it('should close by pressing escape when the first tabbable element has lost focus', () => {
-    element(by.id('default')).click();
+  it('should close by pressing escape when the first tabbable element has lost focus',
+    asyncSpec(async () => {
+      element(by.id('default')).click();
 
-    waitForDialog().then(() => {
+      await waitForDialog();
       clickElementAtPoint('md-dialog-container', { x: 0, y: 0 });
       pressKeys(Key.ESCAPE);
       expectToExist('md-dialog-container', false);
-    });
-  });
+    }));
 
-  it('should close by clicking on the "close" button', () => {
+  it('should close by clicking on the "close" button', asyncSpec(async () => {
     element(by.id('default')).click();
 
-    waitForDialog().then(() => {
-      element(by.id('close')).click();
-      expectToExist('md-dialog-container', false);
-    });
-  });
+    await waitForDialog();
+    element(by.id('close')).click();
+    expectToExist('md-dialog-container', false);
+  }));
 
-  it('should focus the first focusable element', () => {
+  it('should focus the first focusable element', asyncSpec(async () => {
     element(by.id('default')).click();
 
-    waitForDialog().then(() => {
-      expectFocusOn('md-dialog-container input');
-    });
-  });
+    await waitForDialog();
+    expectFocusOn('md-dialog-container input');
+  }));
 
-  it('should restore focus to the element that opened the dialog', () => {
+  it('should restore focus to the element that opened the dialog', asyncSpec(async () => {
     let openButton = element(by.id('default'));
 
     openButton.click();
 
-    waitForDialog().then(() => {
-      clickOnBackrop();
-      expectFocusOn(openButton);
-    });
-  });
+    await waitForDialog();
+    clickOnBackrop();
+    expectFocusOn(openButton);
+  }));
 
-  it('should prevent tabbing out of the dialog', () => {
+  it('should prevent tabbing out of the dialog', asyncSpec(async () => {
     element(by.id('default')).click();
 
-    waitForDialog().then(() => {
-      let tab = Key.TAB;
+    await waitForDialog();
+    pressKeys(Key.TAB, Key.TAB, Key.TAB);
+    expectFocusOn('#close');
+  }));
 
-      pressKeys(tab, tab, tab);
-      expectFocusOn('#close');
-    });
-  });
-
-  it('should be able to prevent closing by clicking on the backdrop', () => {
+  it('should be able to prevent closing by clicking on the backdrop', asyncSpec(async () => {
     element(by.id('disabled')).click();
 
-    waitForDialog().then(() => {
-      clickOnBackrop();
-      expectToExist('md-dialog-container');
-    });
-  });
+    await waitForDialog();
+    clickOnBackrop();
+    expectToExist('md-dialog-container');
+  }));
 
-  it('should be able to prevent closing by pressing escape', () => {
+  it('should be able to prevent closing by pressing escape', asyncSpec(async () => {
     element(by.id('disabled')).click();
 
-    waitForDialog().then(() => {
-      pressKeys(Key.ESCAPE);
-      expectToExist('md-dialog-container');
-    });
-  });
+    await waitForDialog();
+    pressKeys(Key.ESCAPE);
+    expectToExist('md-dialog-container');
+  }));
 
   function waitForDialog() {
     return waitForElement('md-dialog-container');

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

@@ -1,5 +1,5 @@
 import {browser} from 'protractor';
-import {expectToExist} from '../../util/asserts';
+import {expectToExist} from '../../util/index';
 import {screenshot} from '../../screenshot';
 
 describe('grid-list', () => {