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..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} 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(); }); }); diff --git a/e2e/components/button/button.e2e.ts b/e2e/components/button/button.e2e.ts index 91719f606425..dc8f76e212ee 100644 --- a/e2e/components/button/button.e2e.ts +++ b/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'); }); }); }); diff --git a/e2e/components/checkbox/checkbox.e2e.ts b/e2e/components/checkbox/checkbox.e2e.ts index 8c81f63100b0..0238dd2c1b59 100644 --- a/e2e/components/checkbox/checkbox.e2e.ts +++ b/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'); }); }); }); diff --git a/e2e/components/dialog/dialog.e2e.ts b/e2e/components/dialog/dialog.e2e.ts index 7a9d862384c0..908c2e5ec36a 100644 --- a/e2e/components/dialog/dialog.e2e.ts +++ b/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() { 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..917b5cd9e13e 100644 --- a/e2e/components/icon/icon.e2e.ts +++ b/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'); }); }); }); diff --git a/e2e/components/input/input.e2e.ts b/e2e/components/input/input.e2e.ts index 0bf532985683..cd3b05425f76 100644 --- a/e2e/components/input/input.e2e.ts +++ b/e2e/components/input/input.e2e.ts @@ -21,24 +21,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', 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: 5}) + .click() + .perform(); + + expect(input.getAttribute('value')).toBe('1'); - browser.actions() - .mouseMove(input, {x: size.width - 5, y: size.height - 5}) - .click() - .perform(); + browser.actions() + .mouseMove(input, {x: size.width - 5, y: size.height - 5}) + .click() + .perform(); - expect(input.getAttribute('value')).toBe('0'); - }); + 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..8fd3ac0f4033 100644 --- a/e2e/components/menu/menu.e2e.ts +++ b/e2e/components/menu/menu.e2e.ts @@ -1,8 +1,14 @@ 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, +} from '../../util/index'; + describe('menu', () => { const menuSelector = '.mat-menu-panel'; @@ -65,9 +71,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,45 +149,45 @@ 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', 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"', 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}); - }); + + 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"', () => { + it('should align overlay bottom to origin bottom when y-position is "above"', async () => { page.aboveTrigger().click(); - page.aboveTrigger().getLocation().then(trigger => { - - // 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}); - }); + + 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"', 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..445d6bcaefd7 100644 --- a/e2e/components/radio/radio.e2e.ts +++ b/e2e/components/radio/radio.e2e.ts @@ -1,62 +1,54 @@ import {browser, by, element, ExpectedConditions} from 'protractor'; import {screenshot} from '../../screenshot'; + describe('radio', () => { describe('disabling behavior', () => { beforeEach(() => browser.get('/radio')); - it('should be checked when clicked', () => { + it('should be checked when clicked', 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(); - }); + 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', () => { + it('should be disabled when disable the radio group', 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..943db53912d2 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} 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', 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()); + + await browser.wait(ExpectedConditions.not( + ExpectedConditions.presenceOf(element(by.css('div.mat-ripple-element'))))); + screenshot(); }); - it('should change the checked state on click', () => { + it('should change the checked state on click', 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', async () => { let inputEl = getInput(); expect(inputEl.getAttribute('checked')).toBeFalsy('Expect slide-toggle to be unchecked'); @@ -47,25 +49,25 @@ 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', 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', () => { diff --git a/e2e/components/tabs/tabs.e2e.ts b/e2e/components/tabs/tabs.e2e.ts index 4092aa2b5c4f..2e4dddc68ad8 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} from '../../util/index'; import {screenshot} from '../../screenshot'; + describe('tabs', () => { describe('basic behavior', () => { let tabGroup: ElementFinder; @@ -23,20 +24,22 @@ 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', 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', () => { @@ -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/index.ts b/e2e/util/index.ts new file mode 100644 index 000000000000..2b076fee83a9 --- /dev/null +++ b/e2e/util/index.ts @@ -0,0 +1,3 @@ +export * from './actions'; +export * from './asserts'; +export * from './query';