From 2dc6ee87ff529d1f2502da07cb7c52183a9d5cb7 Mon Sep 17 00:00:00 2001 From: crisbeto Date: Sun, 21 May 2017 15:47:18 +0200 Subject: [PATCH 1/2] 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. --- .../block-scroll-strategy.e2e.ts | 32 +++-- e2e/components/button/button.e2e.ts | 19 +-- e2e/components/checkbox/checkbox.e2e.ts | 51 ++++---- e2e/components/dialog/dialog.e2e.ts | 110 +++++++++--------- e2e/components/grid-list/grid-list.e2e.ts | 2 +- e2e/components/icon/icon.e2e.ts | 22 ++-- e2e/components/input/input.e2e.ts | 33 +++--- e2e/components/list/list.e2e.ts | 2 +- e2e/components/menu/menu.e2e.ts | 66 ++++++----- .../progress-bar/progress-bar.e2e.ts | 2 +- e2e/components/radio/radio.e2e.ts | 85 +++++++------- .../slide-toggle/slide-toggle.e2e.ts | 52 +++++---- e2e/components/tabs/tabs.e2e.ts | 43 +++---- e2e/util/async.ts | 14 +++ e2e/util/index.ts | 4 + 15 files changed, 275 insertions(+), 262 deletions(-) create mode 100644 e2e/util/async.ts create mode 100644 e2e/util/index.ts diff --git a/e2e/components/block-scroll-strategy/block-scroll-strategy.e2e.ts b/e2e/components/block-scroll-strategy/block-scroll-strategy.e2e.ts index eaaf2d0359a9..e3e2babe91ab 100644 --- a/e2e/components/block-scroll-strategy/block-scroll-strategy.e2e.ts +++ b/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 diff --git a/e2e/components/button/button.e2e.ts b/e2e/components/button/button.e2e.ts index 91719f606425..9d357e840514 100644 --- a/e2e/components/button/button.e2e.ts +++ b/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'); + })); }); }); diff --git a/e2e/components/checkbox/checkbox.e2e.ts b/e2e/components/checkbox/checkbox.e2e.ts index 8c81f63100b0..1ab263eee0b7 100644 --- a/e2e/components/checkbox/checkbox.e2e.ts +++ b/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'); }); }); }); diff --git a/e2e/components/dialog/dialog.e2e.ts b/e2e/components/dialog/dialog.e2e.ts index 7a9d862384c0..1a5f30edf247 100644 --- a/e2e/components/dialog/dialog.e2e.ts +++ b/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'); diff --git a/e2e/components/grid-list/grid-list.e2e.ts b/e2e/components/grid-list/grid-list.e2e.ts index 848f2b04a3cb..a4937ac7d17b 100644 --- a/e2e/components/grid-list/grid-list.e2e.ts +++ b/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', () => { diff --git a/e2e/components/icon/icon.e2e.ts b/e2e/components/icon/icon.e2e.ts index 1407f517d1ef..57f1f62a4374 100644 --- a/e2e/components/icon/icon.e2e.ts +++ b/e2e/components/icon/icon.e2e.ts @@ -1,5 +1,7 @@ import {browser, by, element} from 'protractor'; import {screenshot} from '../../screenshot'; +import {asyncSpec} from '../../util/index'; + describe('icon', () => { describe('font icons by ligature', () => { @@ -11,23 +13,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', asyncSpec(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'); }); }); }); diff --git a/e2e/components/input/input.e2e.ts b/e2e/components/input/input.e2e.ts index 0bf532985683..8c763968f41b 100644 --- a/e2e/components/input/input.e2e.ts +++ b/e2e/components/input/input.e2e.ts @@ -1,4 +1,5 @@ import {browser, by, element} from 'protractor'; +import {asyncSpec} from '../../util/index'; describe('input', () => { @@ -21,24 +22,26 @@ describe('input', () => { expect(input.getAttribute('value')).toBe('123'); }); - it('should increment when increment button clicked', () => { - let input = element(by.id('number-input')); + it('should increment when increment button clicked', asyncSpec(async () => { + const input = element(by.id('number-input')); + input.click(); - input.getSize().then((size) => { - browser.actions() - .mouseMove(input, {x: size.width - 5, y: 5}) - .click() - .perform(); - expect(input.getAttribute('value')).toBe('1'); + const size = await input.getSize(); - browser.actions() - .mouseMove(input, {x: size.width - 5, y: size.height - 5}) - .click() - .perform(); + browser.actions() + .mouseMove(input, {x: size.width - 5, y: 5}) + .click() + .perform(); - expect(input.getAttribute('value')).toBe('0'); - }); - }); + expect(input.getAttribute('value')).toBe('1'); + + browser.actions() + .mouseMove(input, {x: size.width - 5, y: size.height - 5}) + .click() + .perform(); + + expect(input.getAttribute('value')).toBe('0'); + })); }); }); diff --git a/e2e/components/list/list.e2e.ts b/e2e/components/list/list.e2e.ts index 86da9dba1246..4d3675ee4887 100644 --- a/e2e/components/list/list.e2e.ts +++ b/e2e/components/list/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('list', () => { diff --git a/e2e/components/menu/menu.e2e.ts b/e2e/components/menu/menu.e2e.ts index 26b3e4dbb431..e7bda8734a16 100644 --- a/e2e/components/menu/menu.e2e.ts +++ b/e2e/components/menu/menu.e2e.ts @@ -1,8 +1,15 @@ import {Key, protractor} from 'protractor'; import {MenuPage} from './menu-page'; -import {expectToExist, expectAlignedWith, expectFocusOn, expectLocation} from '../../util/asserts'; -import {pressKeys} from '../../util/actions'; import {screenshot} from '../../screenshot'; +import { + expectToExist, + expectAlignedWith, + expectFocusOn, + expectLocation, + pressKeys, + asyncSpec, +} from '../../util/index'; + describe('menu', () => { const menuSelector = '.mat-menu-panel'; @@ -65,9 +72,7 @@ describe('menu', () => { it('should mirror classes on host to menu template in overlay', () => { page.trigger().click(); - page.menu().getAttribute('class').then((classes: string) => { - expect(classes).toContain('mat-menu-panel custom'); - }); + expect(page.menu().getAttribute('class')).toContain('mat-menu-panel custom'); }); describe('keyboard events', () => { @@ -145,46 +150,47 @@ describe('menu', () => { describe('position - ', () => { - it('should default menu alignment to "after below" when not set', () => { + it('should default menu alignment to "after below" when not set', asyncSpec(async () => { page.trigger().click(); // menu.x should equal trigger.x, menu.y should equal trigger.y - expectAlignedWith(page.menu(), '#trigger'); - }); + await expectAlignedWith(page.menu(), '#trigger'); + })); - it('should align overlay end to origin end when x-position is "before"', () => { + it('should align overlay end to origin end when x-position is "before"', asyncSpec(async() => { page.beforeTrigger().click(); - page.beforeTrigger().getLocation().then(trigger => { - - // the menu's right corner must be attached to the trigger's right corner. - // 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. - expectLocation(page.beforeMenu(), {x: trigger.x - 52, y: trigger.y}); - }); - }); - it('should align overlay bottom to origin bottom when y-position is "above"', () => { - page.aboveTrigger().click(); - page.aboveTrigger().getLocation().then(trigger => { + const trigger = await page.beforeTrigger().getLocation(); + + // the menu's right corner must be attached to the trigger's right corner. + // 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. + expectLocation(page.beforeMenu(), {x: trigger.x - 52, y: trigger.y}); + })); + + it('should align overlay bottom to origin bottom when y-position is "above"', + asyncSpec(async () => { + page.aboveTrigger().click(); + + const trigger = await page.aboveTrigger().getLocation(); // the menu's bottom corner must be attached to the trigger's bottom corner. // 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) expectLocation(page.aboveMenu(), {x: trigger.x, y: trigger.y - 44}); - }); - }); + })); - it('should align menu to top left of trigger when "below" and "above"', () => { + it('should align menu to top left of trigger when "below" and "above"', asyncSpec(async () => { page.combinedTrigger().click(); - page.combinedTrigger().getLocation().then(trigger => { - // trigger.x (left corner) - 52px (menu left of trigger) = expected menu.x - // trigger.y (top corner) - 44px (menu above trigger) = expected menu.y - expectLocation(page.combinedMenu(), {x: trigger.x - 52, y: trigger.y - 44}); - }); - }); + const trigger = await page.combinedTrigger().getLocation(); + + // trigger.x (left corner) - 52px (menu left of trigger) = expected menu.x + // trigger.y (top corner) - 44px (menu above trigger) = expected menu.y + expectLocation(page.combinedMenu(), {x: trigger.x - 52, y: trigger.y - 44}); + })); }); }); diff --git a/e2e/components/progress-bar/progress-bar.e2e.ts b/e2e/components/progress-bar/progress-bar.e2e.ts index 7bc4eec54c3e..3c8b26787a08 100644 --- a/e2e/components/progress-bar/progress-bar.e2e.ts +++ b/e2e/components/progress-bar/progress-bar.e2e.ts @@ -1,5 +1,5 @@ import {browser} from 'protractor'; -import {expectToExist} from '../../util/asserts'; +import {expectToExist} from '../../util/index'; describe('progress-bar', () => { beforeEach(() => browser.get('/progress-bar')); diff --git a/e2e/components/radio/radio.e2e.ts b/e2e/components/radio/radio.e2e.ts index a2a5188838d2..9984f1540dc2 100644 --- a/e2e/components/radio/radio.e2e.ts +++ b/e2e/components/radio/radio.e2e.ts @@ -1,62 +1,55 @@ import {browser, by, element, ExpectedConditions} from 'protractor'; import {screenshot} from '../../screenshot'; +import {asyncSpec} from '../../util/index'; + describe('radio', () => { describe('disabling behavior', () => { beforeEach(() => browser.get('/radio')); - it('should be checked when clicked', () => { + it('should be checked when clicked', asyncSpec(async () => { element(by.id('water')).click(); - element(by.id('water')).getAttribute('class').then((value: string) => { - expect(value).toContain('mat-radio-checked'); - browser.wait(ExpectedConditions.not( - ExpectedConditions.presenceOf(element(by.css('div.mat-ripple-element'))))) - .then(() => screenshot('water')); - }); - element(by.css('input[id=water-input]')).getAttribute('checked').then((value: string) => { - expect(value).toBeTruthy(); - }); - element(by.css('input[id=leaf-input]')).getAttribute('checked').then((value: string) => { - expect(value).toBeFalsy(); - }); + + expect(element(by.id('water')).getAttribute('class')).toContain('mat-radio-checked'); + await browser.wait(ExpectedConditions.not( + ExpectedConditions.presenceOf(element(by.css('div.mat-ripple-element'))))); + screenshot('water'); + + expect(element(by.css('input[id=water-input]')).getAttribute('checked')).toBeTruthy(); + expect(element(by.css('input[id=leaf-input]')).getAttribute('checked')).toBeFalsy(); element(by.id('leaf')).click(); - element(by.id('leaf')).getAttribute('class').then((value: string) => { - expect(value).toContain('mat-radio-checked'); - browser.wait(ExpectedConditions.not( - ExpectedConditions.presenceOf(element(by.css('div.mat-ripple-element'))))) - .then(() => screenshot('leaf')); - }); - element(by.css('input[id=leaf-input]')).getAttribute('checked').then((value: string) => { - expect(value).toBeTruthy(); - }); - element(by.css('input[id=water-input]')).getAttribute('checked').then((value: string) => { - expect(value).toBeFalsy(); - }); - }); - - it('should be disabled when disable the radio group', () => { + expect(element(by.id('leaf')).getAttribute('class')).toContain('mat-radio-checked'); + + await browser.wait(ExpectedConditions.not( + ExpectedConditions.presenceOf(element(by.css('div.mat-ripple-element'))))); + screenshot('leaf'); + + expect(element(by.css('input[id=leaf-input]')).getAttribute('checked')).toBeTruthy(); + expect(element(by.css('input[id=water-input]')).getAttribute('checked')).toBeFalsy(); + })); + + it('should be disabled when disable the radio group', asyncSpec(async () => { element(by.id('toggle-disable')).click(); element(by.id('water')).click(); - element(by.id('water')).getAttribute('class').then((value: string) => { - expect(value).toContain('mat-radio-disabled'); - browser.wait(ExpectedConditions.presenceOf(element(by.css('.mat-radio-disabled')))) - .then(() => screenshot('water')); - }); - element(by.css('input[id=water-input]')).getAttribute('disabled').then((value: string) => { - expect(value).toBeTruthy(); - }); + + expect(element(by.id('water')).getAttribute('class')).toContain('mat-radio-disabled'); + + await browser.wait(ExpectedConditions.presenceOf(element(by.css('.mat-radio-disabled')))); + screenshot('water'); + + expect(element(by.css('input[id=water-input]')).getAttribute('disabled')).toBeTruthy(); element(by.id('leaf')).click(); - element(by.id('leaf')).getAttribute('class').then((value: string) => { - expect(value).toContain('mat-radio-disabled'); - browser.wait(ExpectedConditions.not( - ExpectedConditions.presenceOf(element(by.css('div.mat-ripple-element'))))) - .then(() => screenshot('leaf')); - }); - element(by.css('input[id=leaf-input]')).getAttribute('disabled').then((value: string) => { - expect(value).toBeTruthy(); - }); - }); + expect(element(by.id('leaf')).getAttribute('class')).toContain('mat-radio-disabled'); + + await browser.wait(ExpectedConditions.not( + ExpectedConditions.presenceOf(element(by.css('div.mat-ripple-element'))))); + screenshot('leaf'); + + expect(element(by.css('input[id=leaf-input]')).getAttribute('disabled')).toBeTruthy(); + })); + }); + }); diff --git a/e2e/components/slide-toggle/slide-toggle.e2e.ts b/e2e/components/slide-toggle/slide-toggle.e2e.ts index 38808fed43c4..7d494a2e5924 100644 --- a/e2e/components/slide-toggle/slide-toggle.e2e.ts +++ b/e2e/components/slide-toggle/slide-toggle.e2e.ts @@ -1,7 +1,8 @@ import {browser, element, by, Key, ExpectedConditions} from 'protractor'; -import {expectToExist} from '../../util/asserts'; +import {expectToExist, asyncSpec} from '../../util/index'; import {screenshot} from '../../screenshot'; + describe('slide-toggle', () => { const getInput = () => element(by.css('#normal-slide-toggle input')); const getNormalToggle = () => element(by.css('#normal-slide-toggle')); @@ -13,7 +14,7 @@ describe('slide-toggle', () => { screenshot(); }); - it('should change the checked state on click', () => { + it('should change the checked state on click', asyncSpec(async () => { let inputEl = getInput(); expect(inputEl.getAttribute('checked')).toBeFalsy('Expect slide-toggle to be unchecked'); @@ -21,12 +22,13 @@ describe('slide-toggle', () => { getNormalToggle().click(); expect(inputEl.getAttribute('checked')).toBeTruthy('Expect slide-toggle to be checked'); - browser.wait(ExpectedConditions.not( - ExpectedConditions.presenceOf(element(by.css('div.mat-ripple-element'))))) - .then(() => screenshot()); - }); - it('should change the checked state on click', () => { + await browser.wait(ExpectedConditions.not( + ExpectedConditions.presenceOf(element(by.css('div.mat-ripple-element'))))); + screenshot(); + })); + + it('should change the checked state on click', asyncSpec(async () => { let inputEl = getInput(); expect(inputEl.getAttribute('checked')).toBeFalsy('Expect slide-toggle to be unchecked'); @@ -34,12 +36,12 @@ describe('slide-toggle', () => { getNormalToggle().click(); expect(inputEl.getAttribute('checked')).toBeTruthy('Expect slide-toggle to be checked'); - browser.wait(ExpectedConditions.not( - ExpectedConditions.presenceOf(element(by.css('div.mat-ripple-element'))))) - .then(() => screenshot()); - }); + await browser.wait(ExpectedConditions.not( + ExpectedConditions.presenceOf(element(by.css('div.mat-ripple-element'))))); + screenshot(); + })); - it('should not change the checked state on click when disabled', () => { + it('should not change the checked state on click when disabled', asyncSpec(async () => { let inputEl = getInput(); expect(inputEl.getAttribute('checked')).toBeFalsy('Expect slide-toggle to be unchecked'); @@ -47,26 +49,26 @@ describe('slide-toggle', () => { element(by.css('#disabled-slide-toggle')).click(); expect(inputEl.getAttribute('checked')).toBeFalsy('Expect slide-toggle to be unchecked'); - browser.wait(ExpectedConditions.not( - ExpectedConditions.presenceOf(element(by.css('div.mat-ripple-element'))))) - .then(() => screenshot()); - }); + await browser.wait(ExpectedConditions.not( + ExpectedConditions.presenceOf(element(by.css('div.mat-ripple-element'))))); + screenshot(); + })); - it('should move the thumb on state change', () => { + it('should move the thumb on state change', asyncSpec(async () => { let slideToggleEl = getNormalToggle(); let thumbEl = element(by.css('#normal-slide-toggle .mat-slide-toggle-thumb-container')); - - let previousX = thumbEl.getLocation().then(pos => pos.x); + let previousPosition = await thumbEl.getLocation(); slideToggleEl.click(); - let newX = thumbEl.getLocation().then(pos => pos.x); + let position = await thumbEl.getLocation(); - expect(previousX).not.toBe(newX); - browser.wait(ExpectedConditions.not( - ExpectedConditions.presenceOf(element(by.css('div.mat-ripple-element'))))) - .then(() => screenshot()); - }); + expect(position.x).not.toBe(previousPosition.x); + + await browser.wait(ExpectedConditions.not( + ExpectedConditions.presenceOf(element(by.css('div.mat-ripple-element'))))); + screenshot(); + })); it('should toggle the slide-toggle on space key', () => { let inputEl = getInput(); diff --git a/e2e/components/tabs/tabs.e2e.ts b/e2e/components/tabs/tabs.e2e.ts index 4092aa2b5c4f..0cc387efb08d 100644 --- a/e2e/components/tabs/tabs.e2e.ts +++ b/e2e/components/tabs/tabs.e2e.ts @@ -7,9 +7,10 @@ import { Key, ExpectedConditions } from 'protractor'; -import {pressKeys} from '../../util/actions'; +import {pressKeys, asyncSpec} from '../../util/index'; import {screenshot} from '../../screenshot'; + describe('tabs', () => { describe('basic behavior', () => { let tabGroup: ElementFinder; @@ -23,21 +24,23 @@ describe('tabs', () => { tabBodies = element.all(by.css('md-tab-body')); }); - it('should change tabs when the label is clicked', () => { + it('should change tabs when the label is clicked', asyncSpec(async () => { tabLabels.get(1).click(); expect(getLabelActiveStates(tabLabels)).toEqual([false, true, false]); expect(getBodyActiveStates(tabBodies)).toEqual([false, true, false]); - browser.wait(ExpectedConditions.not( - ExpectedConditions.presenceOf(element(by.css('div.mat-ripple-element'))))) - .then(() => screenshot('click1')); + + await browser.wait(ExpectedConditions.not( + ExpectedConditions.presenceOf(element(by.css('div.mat-ripple-element'))))); + screenshot('click1'); tabLabels.get(0).click(); expect(getLabelActiveStates(tabLabels)).toEqual([true, false, false]); expect(getBodyActiveStates(tabBodies)).toEqual([true, false, false]); - browser.wait(ExpectedConditions.not( - ExpectedConditions.presenceOf(element(by.css('div.mat-ripple-element'))))) - .then(() => screenshot('click0')); - }); + + await browser.wait(ExpectedConditions.not( + ExpectedConditions.presenceOf(element(by.css('div.mat-ripple-element'))))); + screenshot('click0'); + })); it('should change focus with keyboard interaction', () => { let right = Key.RIGHT; @@ -70,13 +73,12 @@ describe('tabs', () => { /** * Returns an array of true/false that represents the focus states of the provided elements. */ -function getFocusStates(elements: ElementArrayFinder) { - return elements.map(element => { - return element.getText().then(elementText => { - return browser.driver.switchTo().activeElement().getText().then(activeText => { - return activeText === elementText; - }); - }); +async function getFocusStates(elements: ElementArrayFinder) { + return elements.map(async (element) => { + let elementText = await element.getText(); + let activeText = await browser.driver.switchTo().activeElement().getText(); + + return activeText === elementText; }); } @@ -94,10 +96,9 @@ function getBodyActiveStates(elements: ElementArrayFinder) { * Returns an array of true/false values that represents whether the provided className is on * each element. */ -function getClassStates(elements: ElementArrayFinder, className: string) { - return elements.map(element => { - return element.getAttribute('class').then(classes => { - return classes.split(/ +/g).indexOf(className) >= 0; - }); +async function getClassStates(elements: ElementArrayFinder, className: string) { + return elements.map(async (element) => { + let classes = await element.getAttribute('class'); + return classes.split(/ +/g).indexOf(className) >= 0; }); } diff --git a/e2e/util/async.ts b/e2e/util/async.ts new file mode 100644 index 000000000000..6f89bba8f43d --- /dev/null +++ b/e2e/util/async.ts @@ -0,0 +1,14 @@ +/** + * Allows using async/await in Jasmine tests. + * @param spec Test to be executed. Needs to be marked as `async`. + */ +export function asyncSpec(spec: () => Promise) { + return async (done: DoneFn) => { + try { + await spec(); + done(); + } catch (error) { + done.fail(error); + } + }; +} diff --git a/e2e/util/index.ts b/e2e/util/index.ts new file mode 100644 index 000000000000..2a72e4ca8dc8 --- /dev/null +++ b/e2e/util/index.ts @@ -0,0 +1,4 @@ +export * from './actions'; +export * from './asserts'; +export * from './async'; +export * from './query'; From 94e05f79b4cfbbc6a64b518f974144cc554ae199 Mon Sep 17 00:00:00 2001 From: crisbeto Date: Tue, 23 May 2017 07:01:51 +0200 Subject: [PATCH 2/2] chore: remove the async wrapper --- .../block-scroll-strategy.e2e.ts | 26 ++++++------- e2e/components/button/button.e2e.ts | 5 +-- e2e/components/checkbox/checkbox.e2e.ts | 5 +-- e2e/components/dialog/dialog.e2e.ts | 37 +++++++++---------- e2e/components/icon/icon.e2e.ts | 5 +-- e2e/components/input/input.e2e.ts | 5 +-- e2e/components/menu/menu.e2e.ts | 32 ++++++++-------- e2e/components/radio/radio.e2e.ts | 9 ++--- .../slide-toggle/slide-toggle.e2e.ts | 18 ++++----- e2e/components/tabs/tabs.e2e.ts | 6 +-- e2e/util/async.ts | 14 ------- e2e/util/index.ts | 1 - 12 files changed, 70 insertions(+), 93 deletions(-) delete mode 100644 e2e/util/async.ts diff --git a/e2e/components/block-scroll-strategy/block-scroll-strategy.e2e.ts b/e2e/components/block-scroll-strategy/block-scroll-strategy.e2e.ts index e3e2babe91ab..75aaa672495f 100644 --- a/e2e/components/block-scroll-strategy/block-scroll-strategy.e2e.ts +++ b/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, asyncSpec} from '../../util/index'; +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', asyncSpec(async () => { + 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,9 +20,9 @@ describe('scroll blocking', () => { expect((await getScrollPosition()).y).toBe(300, 'Exected page to be scrollable again.'); screenshot(); - })); + }); - it('should not be able to scroll programmatically along the y axis', asyncSpec(async () => { + 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.'); @@ -35,9 +35,9 @@ describe('scroll blocking', () => { expect((await getScrollPosition()).x).toBe(300, 'Exected page to be scrollable again.'); screenshot(); - })); + }); - it('should not be able to scroll via the keyboard along the y axis', asyncSpec(async () => { + it('should not be able to scroll via the keyboard along the y axis', async () => { const body = element(by.tagName('body')); scrollPage(0, 100); @@ -57,9 +57,9 @@ describe('scroll blocking', () => { .toBeGreaterThan(100, 'Expected the page to be scrollable again.'); screenshot(); - })); + }); - it('should not be able to scroll via the keyboard along the x axis', asyncSpec(async () => { + it('should not be able to scroll via the keyboard along the x axis', async () => { const body = element(by.tagName('body')); scrollPage(100, 0); @@ -79,10 +79,10 @@ describe('scroll blocking', () => { .toBeGreaterThan(100, 'Expected the page to be scrollable again.'); screenshot(); - })); + }); it('should not be able to scroll the page after reaching the end of an element along the y axis', - asyncSpec(async () => { + async () => { const scroller = element(by.id('scroller')); browser.executeScript(`document.getElementById('scroller').scrollTop = 200;`); @@ -96,10 +96,10 @@ describe('scroll blocking', () => { expect((await getScrollPosition()).y).toBe(100, 'Expected the page not to have scrolled.'); screenshot(); - })); + }); it('should not be able to scroll the page after reaching the end of an element along the x axis', - asyncSpec(async () => { + async () => { const scroller = element(by.id('scroller')); browser.executeScript(`document.getElementById('scroller').scrollLeft = 200;`); @@ -113,7 +113,7 @@ describe('scroll blocking', () => { expect((await getScrollPosition()).x).toBe(100, 'Expected the page not to have scrolled.'); screenshot(); - })); + }); }); // Clicks on a button programmatically. Note that we can't use Protractor's `.click`, because diff --git a/e2e/components/button/button.e2e.ts b/e2e/components/button/button.e2e.ts index 9d357e840514..dc8f76e212ee 100644 --- a/e2e/components/button/button.e2e.ts +++ b/e2e/components/button/button.e2e.ts @@ -1,13 +1,12 @@ 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', asyncSpec(async () => { + 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'); @@ -22,6 +21,6 @@ describe('button', () => { await browser.wait(ExpectedConditions.not( ExpectedConditions.presenceOf(element(by.css('div.mat-ripple-element'))))); screenshot('click disabled'); - })); + }); }); }); diff --git a/e2e/components/checkbox/checkbox.e2e.ts b/e2e/components/checkbox/checkbox.e2e.ts index 1ab263eee0b7..0238dd2c1b59 100644 --- a/e2e/components/checkbox/checkbox.e2e.ts +++ b/e2e/components/checkbox/checkbox.e2e.ts @@ -1,6 +1,5 @@ import {browser, by, element, Key, ExpectedConditions} from 'protractor'; import {screenshot} from '../../screenshot'; -import {asyncSpec} from '../../util/index'; describe('checkbox', () => { @@ -8,7 +7,7 @@ describe('checkbox', () => { describe('check behavior', () => { beforeEach(() => browser.get('/checkbox')); - it('should be checked when clicked, and unchecked when clicked again', asyncSpec(async () => { + 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; @@ -31,7 +30,7 @@ describe('checkbox', () => { 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]')); diff --git a/e2e/components/dialog/dialog.e2e.ts b/e2e/components/dialog/dialog.e2e.ts index 1a5f30edf247..908c2e5ec36a 100644 --- a/e2e/components/dialog/dialog.e2e.ts +++ b/e2e/components/dialog/dialog.e2e.ts @@ -5,7 +5,6 @@ import { pressKeys, clickElementAtPoint, waitForElement, - asyncSpec, } from '../../util/index'; @@ -23,48 +22,48 @@ describe('dialog', () => { expectToExist('.my-template-dialog'); }); - it('should close by clicking on the backdrop', asyncSpec(async() => { + it('should close by clicking on the backdrop', async() => { element(by.id('default')).click(); await waitForDialog(); clickOnBackrop(); expectToExist('md-dialog-container', false); - })); + }); - it('should close by pressing escape', asyncSpec(async () => { + it('should close by pressing escape', async () => { element(by.id('default')).click(); await waitForDialog(); pressKeys(Key.ESCAPE); expectToExist('md-dialog-container', false); - })); + }); it('should close by pressing escape when the first tabbable element has lost focus', - asyncSpec(async () => { + async () => { element(by.id('default')).click(); 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', asyncSpec(async () => { + it('should close by clicking on the "close" button', async () => { element(by.id('default')).click(); await waitForDialog(); element(by.id('close')).click(); expectToExist('md-dialog-container', false); - })); + }); - it('should focus the first focusable element', asyncSpec(async () => { + it('should focus the first focusable element', async () => { element(by.id('default')).click(); await waitForDialog(); expectFocusOn('md-dialog-container input'); - })); + }); - it('should restore focus to the element that opened the dialog', asyncSpec(async () => { + it('should restore focus to the element that opened the dialog', async () => { let openButton = element(by.id('default')); openButton.click(); @@ -72,31 +71,31 @@ describe('dialog', () => { await waitForDialog(); clickOnBackrop(); expectFocusOn(openButton); - })); + }); - it('should prevent tabbing out of the dialog', asyncSpec(async () => { + it('should prevent tabbing out of the dialog', async () => { element(by.id('default')).click(); await waitForDialog(); pressKeys(Key.TAB, Key.TAB, Key.TAB); expectFocusOn('#close'); - })); + }); - it('should be able to prevent closing by clicking on the backdrop', asyncSpec(async () => { + it('should be able to prevent closing by clicking on the backdrop', async () => { element(by.id('disabled')).click(); await waitForDialog(); clickOnBackrop(); expectToExist('md-dialog-container'); - })); + }); - it('should be able to prevent closing by pressing escape', asyncSpec(async () => { + it('should be able to prevent closing by pressing escape', async () => { element(by.id('disabled')).click(); await waitForDialog(); pressKeys(Key.ESCAPE); expectToExist('md-dialog-container'); - })); + }); function waitForDialog() { return waitForElement('md-dialog-container'); diff --git a/e2e/components/icon/icon.e2e.ts b/e2e/components/icon/icon.e2e.ts index 57f1f62a4374..917b5cd9e13e 100644 --- a/e2e/components/icon/icon.e2e.ts +++ b/e2e/components/icon/icon.e2e.ts @@ -1,6 +1,5 @@ import {browser, by, element} from 'protractor'; import {screenshot} from '../../screenshot'; -import {asyncSpec} from '../../util/index'; describe('icon', () => { @@ -17,12 +16,12 @@ describe('icon', () => { screenshot(); }); - it('should have the correct class when used', asyncSpec(async () => { + 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', () => { expect(testIcon.getAttribute('role')).toBe('img'); diff --git a/e2e/components/input/input.e2e.ts b/e2e/components/input/input.e2e.ts index 8c763968f41b..cd3b05425f76 100644 --- a/e2e/components/input/input.e2e.ts +++ b/e2e/components/input/input.e2e.ts @@ -1,5 +1,4 @@ import {browser, by, element} from 'protractor'; -import {asyncSpec} from '../../util/index'; describe('input', () => { @@ -22,7 +21,7 @@ describe('input', () => { expect(input.getAttribute('value')).toBe('123'); }); - it('should increment when increment button clicked', asyncSpec(async () => { + it('should increment when increment button clicked', async () => { const input = element(by.id('number-input')); input.click(); @@ -42,6 +41,6 @@ describe('input', () => { .perform(); expect(input.getAttribute('value')).toBe('0'); - })); + }); }); }); diff --git a/e2e/components/menu/menu.e2e.ts b/e2e/components/menu/menu.e2e.ts index e7bda8734a16..8fd3ac0f4033 100644 --- a/e2e/components/menu/menu.e2e.ts +++ b/e2e/components/menu/menu.e2e.ts @@ -7,7 +7,6 @@ import { expectFocusOn, expectLocation, pressKeys, - asyncSpec, } from '../../util/index'; @@ -150,14 +149,14 @@ describe('menu', () => { describe('position - ', () => { - it('should default menu alignment to "after below" when not set', asyncSpec(async () => { + it('should default menu alignment to "after below" when not set', async () => { page.trigger().click(); // menu.x should equal trigger.x, menu.y should equal trigger.y await expectAlignedWith(page.menu(), '#trigger'); - })); + }); - it('should align overlay end to origin end when x-position is "before"', asyncSpec(async() => { + it('should align overlay end to origin end when x-position is "before"', async() => { page.beforeTrigger().click(); const trigger = await page.beforeTrigger().getLocation(); @@ -167,22 +166,21 @@ describe('menu', () => { // 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. expectLocation(page.beforeMenu(), {x: trigger.x - 52, y: trigger.y}); - })); + }); - it('should align overlay bottom to origin bottom when y-position is "above"', - asyncSpec(async () => { - page.aboveTrigger().click(); + it('should align overlay bottom to origin bottom when y-position is "above"', async () => { + page.aboveTrigger().click(); - const trigger = await page.aboveTrigger().getLocation(); + const trigger = await page.aboveTrigger().getLocation(); - // the menu's bottom corner must be attached to the trigger's bottom corner. - // 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) - expectLocation(page.aboveMenu(), {x: trigger.x, y: trigger.y - 44}); - })); + // the menu's bottom corner must be attached to the trigger's bottom corner. + // 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) + expectLocation(page.aboveMenu(), {x: trigger.x, y: trigger.y - 44}); + }); - it('should align menu to top left of trigger when "below" and "above"', asyncSpec(async () => { + it('should align menu to top left of trigger when "below" and "above"', async () => { page.combinedTrigger().click(); const trigger = await page.combinedTrigger().getLocation(); @@ -190,7 +188,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 expectLocation(page.combinedMenu(), {x: trigger.x - 52, y: trigger.y - 44}); - })); + }); }); }); diff --git a/e2e/components/radio/radio.e2e.ts b/e2e/components/radio/radio.e2e.ts index 9984f1540dc2..445d6bcaefd7 100644 --- a/e2e/components/radio/radio.e2e.ts +++ b/e2e/components/radio/radio.e2e.ts @@ -1,13 +1,12 @@ import {browser, by, element, ExpectedConditions} from 'protractor'; import {screenshot} from '../../screenshot'; -import {asyncSpec} from '../../util/index'; describe('radio', () => { describe('disabling behavior', () => { beforeEach(() => browser.get('/radio')); - it('should be checked when clicked', asyncSpec(async () => { + it('should be checked when clicked', async () => { element(by.id('water')).click(); expect(element(by.id('water')).getAttribute('class')).toContain('mat-radio-checked'); @@ -27,9 +26,9 @@ describe('radio', () => { expect(element(by.css('input[id=leaf-input]')).getAttribute('checked')).toBeTruthy(); expect(element(by.css('input[id=water-input]')).getAttribute('checked')).toBeFalsy(); - })); + }); - it('should be disabled when disable the radio group', asyncSpec(async () => { + it('should be disabled when disable the radio group', async () => { element(by.id('toggle-disable')).click(); element(by.id('water')).click(); @@ -48,7 +47,7 @@ describe('radio', () => { screenshot('leaf'); expect(element(by.css('input[id=leaf-input]')).getAttribute('disabled')).toBeTruthy(); - })); + }); }); diff --git a/e2e/components/slide-toggle/slide-toggle.e2e.ts b/e2e/components/slide-toggle/slide-toggle.e2e.ts index 7d494a2e5924..943db53912d2 100644 --- a/e2e/components/slide-toggle/slide-toggle.e2e.ts +++ b/e2e/components/slide-toggle/slide-toggle.e2e.ts @@ -1,5 +1,5 @@ import {browser, element, by, Key, ExpectedConditions} from 'protractor'; -import {expectToExist, asyncSpec} from '../../util/index'; +import {expectToExist} from '../../util/index'; import {screenshot} from '../../screenshot'; @@ -14,7 +14,7 @@ describe('slide-toggle', () => { screenshot(); }); - it('should change the checked state on click', asyncSpec(async () => { + it('should change the checked state on click', async () => { let inputEl = getInput(); expect(inputEl.getAttribute('checked')).toBeFalsy('Expect slide-toggle to be unchecked'); @@ -26,9 +26,9 @@ describe('slide-toggle', () => { await browser.wait(ExpectedConditions.not( ExpectedConditions.presenceOf(element(by.css('div.mat-ripple-element'))))); screenshot(); - })); + }); - it('should change the checked state on click', asyncSpec(async () => { + it('should change the checked state on click', async () => { let inputEl = getInput(); expect(inputEl.getAttribute('checked')).toBeFalsy('Expect slide-toggle to be unchecked'); @@ -39,9 +39,9 @@ describe('slide-toggle', () => { await browser.wait(ExpectedConditions.not( ExpectedConditions.presenceOf(element(by.css('div.mat-ripple-element'))))); screenshot(); - })); + }); - it('should not change the checked state on click when disabled', asyncSpec(async () => { + it('should not change the checked state on click when disabled', async () => { let inputEl = getInput(); expect(inputEl.getAttribute('checked')).toBeFalsy('Expect slide-toggle to be unchecked'); @@ -52,9 +52,9 @@ describe('slide-toggle', () => { await browser.wait(ExpectedConditions.not( ExpectedConditions.presenceOf(element(by.css('div.mat-ripple-element'))))); screenshot(); - })); + }); - it('should move the thumb on state change', asyncSpec(async () => { + it('should move the thumb on state change', async () => { let slideToggleEl = getNormalToggle(); let thumbEl = element(by.css('#normal-slide-toggle .mat-slide-toggle-thumb-container')); let previousPosition = await thumbEl.getLocation(); @@ -68,7 +68,7 @@ describe('slide-toggle', () => { await browser.wait(ExpectedConditions.not( ExpectedConditions.presenceOf(element(by.css('div.mat-ripple-element'))))); screenshot(); - })); + }); it('should toggle the slide-toggle on space key', () => { let inputEl = getInput(); diff --git a/e2e/components/tabs/tabs.e2e.ts b/e2e/components/tabs/tabs.e2e.ts index 0cc387efb08d..2e4dddc68ad8 100644 --- a/e2e/components/tabs/tabs.e2e.ts +++ b/e2e/components/tabs/tabs.e2e.ts @@ -7,7 +7,7 @@ import { Key, ExpectedConditions } from 'protractor'; -import {pressKeys, asyncSpec} from '../../util/index'; +import {pressKeys} from '../../util/index'; import {screenshot} from '../../screenshot'; @@ -24,7 +24,7 @@ describe('tabs', () => { tabBodies = element.all(by.css('md-tab-body')); }); - it('should change tabs when the label is clicked', asyncSpec(async () => { + it('should change tabs when the label is clicked', async () => { tabLabels.get(1).click(); expect(getLabelActiveStates(tabLabels)).toEqual([false, true, false]); expect(getBodyActiveStates(tabBodies)).toEqual([false, true, false]); @@ -40,7 +40,7 @@ describe('tabs', () => { await browser.wait(ExpectedConditions.not( ExpectedConditions.presenceOf(element(by.css('div.mat-ripple-element'))))); screenshot('click0'); - })); + }); it('should change focus with keyboard interaction', () => { let right = Key.RIGHT; diff --git a/e2e/util/async.ts b/e2e/util/async.ts deleted file mode 100644 index 6f89bba8f43d..000000000000 --- a/e2e/util/async.ts +++ /dev/null @@ -1,14 +0,0 @@ -/** - * Allows using async/await in Jasmine tests. - * @param spec Test to be executed. Needs to be marked as `async`. - */ -export function asyncSpec(spec: () => Promise) { - return async (done: DoneFn) => { - try { - await spec(); - done(); - } catch (error) { - done.fail(error); - } - }; -} diff --git a/e2e/util/index.ts b/e2e/util/index.ts index 2a72e4ca8dc8..2b076fee83a9 100644 --- a/e2e/util/index.ts +++ b/e2e/util/index.ts @@ -1,4 +1,3 @@ export * from './actions'; export * from './asserts'; -export * from './async'; export * from './query';