Create Expansion Panel.

Author: josephperrott

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} 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', 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', 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', 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', 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) => {
+    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) => {
+    async () => {
       const scroller = element(by.id('scroller'));
 
       browser.executeScript(`document.getElementById('scroller').scrollLeft = 200;`);
@@ -118,7 +113,6 @@ describe('scroll blocking', () => {
       expect((await getScrollPosition()).x).toBe(100, 'Expected the page not to have scrolled.');
 
       screenshot();
-      done();
     });
 });
 

e2e/components/button/button.e2e.ts

@@ -6,19 +6,21 @@ 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', 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,46 @@
 import {browser, by, element, Key, ExpectedConditions} from 'protractor';
 import {screenshot} from '../../screenshot';
 
-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', 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,12 @@
 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,
+} from '../../util/index';
+
 
 describe('dialog', () => {
   beforeEach(() => browser.get('/dialog'));
@@ -17,89 +22,79 @@ describe('dialog', () => {
     expectToExist('.my-template-dialog');
   });
 
-  it('should close by clicking on the backdrop', () => {
+  it('should close by clicking on the backdrop', 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', 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',
+    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', 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', 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', 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', async () => {
     element(by.id('default')).click();
 
-    waitForDialog().then(() => {
-      let tab = Key.TAB;
-
-      pressKeys(tab, tab, tab);
-      expectFocusOn('#close');
-    });
+    await waitForDialog();
+    pressKeys(Key.TAB, Key.TAB, Key.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', 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', 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() {

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', () => {

e2e/components/icon/icon.e2e.ts

@@ -1,6 +1,7 @@
 import {browser, by, element} from 'protractor';
 import {screenshot} from '../../screenshot';
 
+
 describe('icon', () => {
   describe('font icons by ligature', () => {
     let testIcon: any;
@@ -11,23 +12,19 @@ describe('icon', () => {
     });
 
     it('should have the correct aria-label when used', () => {
-      testIcon.getAttribute('aria-label').then((attr: string) => {
-        expect(attr).toEqual('favorite');
-      });
+      expect(testIcon.getAttribute('aria-label')).toBe('favorite');
       screenshot();
     });
 
-    it('should have the correct class when used', () => {
-      testIcon.getAttribute('class').then((attr: string) => {
-        expect(attr).toContain('md-24');
-        expect(attr).toContain('material-icons');
-      });
+    it('should have the correct class when used', async () => {
+      const attr = await testIcon.getAttribute('class');
+
+      expect(attr).toContain('md-24');
+      expect(attr).toContain('material-icons');
     });
 
     it('should have the correct role when used', () => {
-      testIcon.getAttribute('role').then((attr: string) => {
-        expect(attr).toEqual('img');
-      });
+      expect(testIcon.getAttribute('role')).toBe('img');
     });
   });
 });