diff --git a/e2e/components/button/button.e2e.ts b/e2e/components/button/button.e2e.ts index 4771fdf2dfc4..dd183358e118 100644 --- a/e2e/components/button/button.e2e.ts +++ b/e2e/components/button/button.e2e.ts @@ -2,13 +2,11 @@ import {browser, by, element} from 'protractor'; import {screenshot} from '../../screenshot'; -describe('button', function () { - describe('disabling behavior', function () { - beforeEach(function() { - browser.get('/button'); - }); +describe('button', () => { + describe('disabling behavior', () => { + beforeEach(() => browser.get('/button')); - it('should prevent click handlers from executing when disabled', function () { + it('should prevent click handlers from executing when disabled', () => { element(by.id('test-button')).click(); expect(element(by.id('click-counter')).getText()).toEqual('1'); screenshot('clicked once'); diff --git a/e2e/components/dialog/dialog.e2e.ts b/e2e/components/dialog/dialog.e2e.ts index b70f8c8c0786..907713ceeaae 100644 --- a/e2e/components/dialog/dialog.e2e.ts +++ b/e2e/components/dialog/dialog.e2e.ts @@ -1,11 +1,14 @@ -import {browser, by, element, Key, ProtractorBy} from 'protractor'; +import {browser, by, element, Key} from 'protractor'; +import {expectToExist, expectFocusOn} from '../../util/asserts'; +import {pressKeys, clickElementAtPoint} from '../../util/actions'; +import {waitForElement} from '../../util/query'; describe('dialog', () => { beforeEach(() => browser.get('/dialog')); it('should open a dialog', () => { element(by.id('default')).click(); - waitForDialog().then((isPresent: boolean) => expect(isPresent).toBe(true)); + expectToExist('md-dialog-container'); }); it('should close by clicking on the backdrop', () => { @@ -13,7 +16,7 @@ describe('dialog', () => { waitForDialog().then(() => { clickOnBackrop(); - waitForDialog().then((isPresent: boolean) => expect(isPresent).toBe(false)); + expectToExist('md-dialog-container', false); }); }); @@ -21,8 +24,8 @@ describe('dialog', () => { element(by.id('default')).click(); waitForDialog().then(() => { - pressEscape(); - waitForDialog().then((isPresent: boolean) => expect(isPresent).toBe(false)); + pressKeys(Key.ESCAPE); + expectToExist('md-dialog-container', false); }); }); @@ -31,7 +34,7 @@ describe('dialog', () => { waitForDialog().then(() => { element(by.id('close')).click(); - waitForDialog().then((isPresent: boolean) => expect(isPresent).toBe(false)); + expectToExist('md-dialog-container', false); }); }); @@ -39,7 +42,7 @@ describe('dialog', () => { element(by.id('default')).click(); waitForDialog().then(() => { - expectFocusOn(element(by.css('md-dialog-container input'))); + expectFocusOn('md-dialog-container input'); }); }); @@ -60,8 +63,8 @@ describe('dialog', () => { waitForDialog().then(() => { let tab = Key.TAB; - browser.actions().sendKeys(tab, tab, tab).perform(); - expectFocusOn(element(by.id('close'))); + pressKeys(tab, tab, tab); + expectFocusOn('#close'); }); }); @@ -70,7 +73,7 @@ describe('dialog', () => { waitForDialog().then(() => { clickOnBackrop(); - waitForDialog().then((isPresent: boolean) => expect(isPresent).toBe(true)); + expectToExist('md-dialog-container'); }); }); @@ -78,30 +81,16 @@ describe('dialog', () => { element(by.id('disabled')).click(); waitForDialog().then(() => { - pressEscape(); - waitForDialog().then((isPresent: boolean) => expect(isPresent).toBe(true)); + pressKeys(Key.ESCAPE); + expectToExist('md-dialog-container'); }); }); function waitForDialog() { - return browser.isElementPresent(by.css('md-dialog-container') as ProtractorBy); + return waitForElement('md-dialog-container'); } function clickOnBackrop() { - browser.actions() - // We need to move the cursor to the top left so - // the dialog doesn't receive the click accidentally. - .mouseMove(element(by.css('.cdk-overlay-backdrop')).getWebElement(), { x: 0, y: 0 }) - .click() - .perform(); - } - - function pressEscape() { - browser.actions().sendKeys(Key.ESCAPE).perform(); - } - - // TODO(crisbeto): should be moved to a common util. copied from the menu e2e setup. - function expectFocusOn(el: any): void { - expect(browser.driver.switchTo().activeElement().getId()).toBe(el.getId()); + clickElementAtPoint('.cdk-overlay-backdrop', { x: 0, y: 0 }); } }); diff --git a/e2e/components/grid-list/grid-list.e2e.ts b/e2e/components/grid-list/grid-list.e2e.ts index 64c4647fde5a..814e0bbbc697 100644 --- a/e2e/components/grid-list/grid-list.e2e.ts +++ b/e2e/components/grid-list/grid-list.e2e.ts @@ -1,14 +1,14 @@ -import {browser, by, element} from 'protractor'; +import {browser} from 'protractor'; +import {expectToExist} from '../../util/asserts'; describe('grid-list', () => { beforeEach(() => browser.get('/grid-list')); it('should render a grid list container', () => { - expect(element(by.css('md-grid-list')).isPresent()).toBe(true); + expectToExist('md-grid-list'); }); it('should render list items inside the grid list container', () => { - let container = element(by.css('md-grid-list')); - expect(container.isElementPresent(by.css('md-grid-tile'))).toBe(true); + expectToExist('md-grid-list md-grid-tile'); }); }); diff --git a/e2e/components/list/list.e2e.ts b/e2e/components/list/list.e2e.ts index 329f8a8dd19c..e616f1ffcde5 100644 --- a/e2e/components/list/list.e2e.ts +++ b/e2e/components/list/list.e2e.ts @@ -1,14 +1,14 @@ -import {browser, by, element} from 'protractor'; +import {browser} from 'protractor'; +import {expectToExist} from '../../util/asserts'; describe('list', () => { beforeEach(() => browser.get('/list')); it('should render a list container', () => { - expect(element(by.css('md-list')).isPresent()).toBe(true); + expectToExist('md-list'); }); it('should render list items inside the list container', () => { - let container = element(by.css('md-list')); - expect(container.isElementPresent(by.css('md-list-item'))).toBe(true); + expectToExist('md-list md-list-item'); }); }); diff --git a/e2e/components/menu/menu-page.ts b/e2e/components/menu/menu-page.ts index 4120ab90c49d..ffda502eba4f 100644 --- a/e2e/components/menu/menu-page.ts +++ b/e2e/components/menu/menu-page.ts @@ -1,68 +1,33 @@ -import {browser, by, element, ElementFinder, ProtractorBy} from 'protractor'; +import {browser, by, element, ElementFinder} from 'protractor'; export class MenuPage { + constructor() { browser.get('/menu'); } - constructor() { - browser.get('/menu'); - } + menu(): ElementFinder { return element(by.css('.md-menu-panel')); } - menu() { return element(by.css('.md-menu-panel')); } + start(): ElementFinder { return element(by.id('start')); } - start() { return element(by.id('start')); } + trigger(): ElementFinder { return element(by.id('trigger')); } - trigger() { return element(by.id('trigger')); } + triggerTwo(): ElementFinder { return element(by.id('trigger-two')); } - triggerTwo() { return element(by.id('trigger-two')); } + backdrop(): ElementFinder { return element(by.css('.cdk-overlay-backdrop')); } - backdrop() { return element(by.css('.cdk-overlay-backdrop')); } + items(index: number): ElementFinder { return element.all(by.css('[md-menu-item]')).get(index); } - items(index: number) { return element.all(by.css('[md-menu-item]')).get(index); } + textArea(): ElementFinder { return element(by.id('text')); } - textArea() { return element(by.id('text')); } + beforeTrigger(): ElementFinder { return element(by.id('before-t')); } - beforeTrigger() { return element(by.id('before-t')); } + aboveTrigger(): ElementFinder { return element(by.id('above-t')); } - aboveTrigger() { return element(by.id('above-t')); } + combinedTrigger(): ElementFinder { return element(by.id('combined-t')); } - combinedTrigger() { return element(by.id('combined-t')); } + beforeMenu(): ElementFinder { return element(by.css('.md-menu-panel.before')); } - beforeMenu() { return element(by.css('.md-menu-panel.before')); } + aboveMenu(): ElementFinder { return element(by.css('.md-menu-panel.above')); } - aboveMenu() { return element(by.css('.md-menu-panel.above')); } + combinedMenu(): ElementFinder { return element(by.css('.md-menu-panel.combined')); } - combinedMenu() { return element(by.css('.md-menu-panel.combined')); } - - // TODO(kara): move to common testing utility - pressKey(key: string): void { - browser.actions().sendKeys(key).perform(); - } - - // TODO(kara): move to common testing utility - expectFocusOn(el: any): void { - expect(browser.driver.switchTo().activeElement().getId()).toBe(el.getId()); - } - - expectMenuPresent(expected: boolean) { - return browser.isElementPresent(by.css('.md-menu-panel') as ProtractorBy) - .then((isPresent: boolean) => { - expect(isPresent).toBe(expected); - }); - } - - expectMenuLocation(el: ElementFinder, {x, y}: {x: number, y: number}) { - el.getLocation().then(loc => { - expect(loc.x).toEqual(x, 'Expect the x-position to be equal'); - expect(loc.y).toEqual(y, 'Expect the y-position to be equal'); - }); - } - - expectMenuAlignedWith(el: ElementFinder, id: string) { - element(by.id(id)).getLocation().then(loc => { - this.expectMenuLocation(el, {x: loc.x, y: loc.y}); - }); - } - - getResultText() { - return this.textArea().getText(); - } + getResultText() { return this.textArea().getText(); } } diff --git a/e2e/components/menu/menu.e2e.ts b/e2e/components/menu/menu.e2e.ts index 61e8e7fafb7f..36e330fbf60d 100644 --- a/e2e/components/menu/menu.e2e.ts +++ b/e2e/components/menu/menu.e2e.ts @@ -1,25 +1,26 @@ import {browser, Key, protractor} from 'protractor'; import {MenuPage} from './menu-page'; +import {expectToExist, expectAlignedWith, expectFocusOn, expectLocation} from '../../util/asserts'; +import {pressKeys} from '../../util/actions'; describe('menu', () => { + const menuSelector = '.md-menu-panel'; let page: MenuPage; - beforeEach(function() { - page = new MenuPage(); - }); + beforeEach(() => page = new MenuPage()); it('should open menu when the trigger is clicked', () => { - page.expectMenuPresent(false); + expectToExist(menuSelector, false); page.trigger().click(); - page.expectMenuPresent(true); + expectToExist(menuSelector); expect(page.menu().getText()).toEqual('One\nTwo\nThree\nFour'); }); it('should close menu when menu item is clicked', () => { page.trigger().click(); page.items(0).click(); - page.expectMenuPresent(false); + expectToExist(menuSelector, false); }); it('should run click handlers on regular menu items', () => { @@ -40,18 +41,20 @@ describe('menu', () => { it('should support multiple triggers opening the same menu', () => { page.triggerTwo().click(); + expect(page.menu().getText()).toEqual('One\nTwo\nThree\nFour'); - page.expectMenuAlignedWith(page.menu(), 'trigger-two'); + expectAlignedWith(page.menu(), '#trigger-two'); page.backdrop().click(); - page.expectMenuPresent(false); + expectToExist(menuSelector, false); page.trigger().click(); + expect(page.menu().getText()).toEqual('One\nTwo\nThree\nFour'); - page.expectMenuAlignedWith(page.menu(), 'trigger'); + expectAlignedWith(page.menu(), '#trigger'); page.backdrop().click(); - page.expectMenuPresent(false); + expectToExist(menuSelector, false); }); it('should mirror classes on host to menu template in overlay', () => { @@ -65,82 +68,71 @@ describe('menu', () => { beforeEach(() => { // click start button to avoid tabbing past navigation page.start().click(); - page.pressKey(Key.TAB); + pressKeys(Key.TAB); }); it('should auto-focus the first item when opened with ENTER', () => { - page.pressKey(Key.ENTER); - page.expectFocusOn(page.items(0)); + pressKeys(Key.ENTER); + expectFocusOn(page.items(0)); }); it('should auto-focus the first item when opened with SPACE', () => { - page.pressKey(Key.SPACE); - page.expectFocusOn(page.items(0)); + pressKeys(Key.SPACE); + expectFocusOn(page.items(0)); }); it('should not focus the first item when opened with mouse', () => { page.trigger().click(); - page.expectFocusOn(page.trigger()); + expectFocusOn(page.trigger()); }); it('should focus subsequent items when down arrow is pressed', () => { - page.pressKey(Key.ENTER); - page.pressKey(Key.DOWN); - page.expectFocusOn(page.items(1)); + pressKeys(Key.ENTER, Key.DOWN); + expectFocusOn(page.items(1)); }); it('should focus previous items when up arrow is pressed', () => { - page.pressKey(Key.ENTER); - page.pressKey(Key.DOWN); - page.pressKey(Key.UP); - page.expectFocusOn(page.items(0)); + pressKeys(Key.ENTER, Key.DOWN, Key.UP); + expectFocusOn(page.items(0)); }); it('should skip disabled items using arrow keys', () => { - page.pressKey(Key.ENTER); - page.pressKey(Key.DOWN); - page.pressKey(Key.DOWN); - page.expectFocusOn(page.items(3)); + pressKeys(Key.ENTER, Key.DOWN, Key.DOWN); + expectFocusOn(page.items(3)); - page.pressKey(Key.UP); - page.expectFocusOn(page.items(1)); + pressKeys(Key.UP); + expectFocusOn(page.items(1)); }); it('should close the menu when tabbing past items', () => { - page.pressKey(Key.ENTER); - page.pressKey(Key.TAB); - page.expectMenuPresent(false); + pressKeys(Key.ENTER, Key.TAB); + expectToExist(menuSelector, false); - page.pressKey(Key.TAB); - page.pressKey(Key.ENTER); - page.expectMenuPresent(true); + pressKeys(Key.TAB, Key.ENTER); + expectToExist(menuSelector); - page.pressKey(protractor.Key.chord(Key.SHIFT, Key.TAB)); - page.expectMenuPresent(false); + pressKeys(protractor.Key.chord(Key.SHIFT, Key.TAB)); + expectToExist(menuSelector, false); }); it('should wrap back to menu when arrow keying past items', () => { - page.pressKey(Key.ENTER); - page.pressKey(Key.DOWN); - page.pressKey(Key.DOWN); - page.pressKey(Key.DOWN); - page.expectFocusOn(page.items(0)); - - page.pressKey(Key.UP); - page.expectFocusOn(page.items(3)); + let down = Key.DOWN; + pressKeys(Key.ENTER, down, down, down); + expectFocusOn(page.items(0)); + + pressKeys(Key.UP); + expectFocusOn(page.items(3)); }); it('should focus before and after trigger when tabbing past items', () => { - page.pressKey(Key.ENTER); - page.pressKey(Key.TAB); - page.expectFocusOn(page.triggerTwo()); + let shiftTab = protractor.Key.chord(Key.SHIFT, Key.TAB); - // navigate back to trigger - page.pressKey(protractor.Key.chord(protractor.Key.SHIFT, protractor.Key.TAB)); - page.pressKey(Key.ENTER); + pressKeys(Key.ENTER, Key.TAB); + expectFocusOn(page.triggerTwo()); - page.pressKey(protractor.Key.chord(protractor.Key.SHIFT, protractor.Key.TAB)); - page.expectFocusOn(page.start()); + // navigate back to trigger + pressKeys(shiftTab, Key.ENTER, shiftTab); + expectFocusOn(page.start()); }); }); @@ -151,7 +143,7 @@ describe('menu', () => { page.trigger().click(); // menu.x should equal trigger.x, menu.y should equal trigger.y - page.expectMenuAlignedWith(page.menu(), 'trigger'); + expectAlignedWith(page.menu(), '#trigger'); }); it('should align overlay end to origin end when x-position is "before"', () => { @@ -162,7 +154,7 @@ describe('menu', () => { // menu = 112px wide. trigger = 60px wide. 112 - 60 = 52px of menu to the left of trigger. // trigger.x (left corner) - 52px (menu left of trigger) = expected menu.x (left corner) // menu.y should equal trigger.y because only x position has changed. - page.expectMenuLocation(page.beforeMenu(), {x: trigger.x - 52, y: trigger.y}); + expectLocation(page.beforeMenu(), {x: trigger.x - 52, y: trigger.y}); }); }); @@ -174,7 +166,7 @@ describe('menu', () => { // menu.x should equal trigger.x because only y position has changed. // menu = 64px high. trigger = 20px high. 64 - 20 = 44px of menu extending up past trigger. // trigger.y (top corner) - 44px (menu above trigger) = expected menu.y (top corner) - page.expectMenuLocation(page.aboveMenu(), {x: trigger.x, y: trigger.y - 44}); + expectLocation(page.aboveMenu(), {x: trigger.x, y: trigger.y - 44}); }); }); @@ -184,7 +176,7 @@ describe('menu', () => { // trigger.x (left corner) - 52px (menu left of trigger) = expected menu.x // trigger.y (top corner) - 44px (menu above trigger) = expected menu.y - page.expectMenuLocation(page.combinedMenu(), {x: trigger.x - 52, y: trigger.y - 44}); + expectLocation(page.combinedMenu(), {x: trigger.x - 52, y: trigger.y - 44}); }); }); diff --git a/e2e/components/progress-bar/progress-bar.e2e.ts b/e2e/components/progress-bar/progress-bar.e2e.ts index 33c5898400b8..7bc4eec54c3e 100644 --- a/e2e/components/progress-bar/progress-bar.e2e.ts +++ b/e2e/components/progress-bar/progress-bar.e2e.ts @@ -1,25 +1,22 @@ -import {browser, by, element} from 'protractor'; +import {browser} from 'protractor'; +import {expectToExist} from '../../util/asserts'; describe('progress-bar', () => { beforeEach(() => browser.get('/progress-bar')); it('should render a determinate progress bar', () => { - shouldExist('md-progress-bar[mode="determinate"]'); + expectToExist('md-progress-bar[mode="determinate"]'); }); it('should render a buffer progress bar', () => { - shouldExist('md-progress-bar[mode="buffer"]'); + expectToExist('md-progress-bar[mode="buffer"]'); }); it('should render a query progress bar', () => { - shouldExist('md-progress-bar[mode="query"]'); + expectToExist('md-progress-bar[mode="query"]'); }); it('should render a indeterminate progress bar', () => { - shouldExist('md-progress-bar[mode="indeterminate"]'); + expectToExist('md-progress-bar[mode="indeterminate"]'); }); - - function shouldExist(selector: string): void { - expect(element(by.css(selector)).isPresent()).toBe(true); - } }); diff --git a/e2e/components/radio/radio.e2e.ts b/e2e/components/radio/radio.e2e.ts index 37c81509dc08..09781fbedb92 100644 --- a/e2e/components/radio/radio.e2e.ts +++ b/e2e/components/radio/radio.e2e.ts @@ -1,13 +1,10 @@ import {browser, by, element} from 'protractor'; -describe('radio', function () { +describe('radio', () => { + describe('disabling behavior', () => { + beforeEach(() => browser.get('/radio')); - describe('disabling behavior', function () { - beforeEach(function() { - browser.get('/radio'); - }); - - it('should be checked when clicked', function () { + it('should be checked when clicked', () => { element(by.id('water')).click(); element(by.id('water')).getAttribute('class').then((value: string) => { expect(value).toContain('md-radio-checked'); @@ -31,7 +28,7 @@ describe('radio', function () { }); }); - it('should be disabled when disable the radio group', function () { + it('should be disabled when disable the radio group', () => { element(by.id('toggle-disable')).click(); element(by.id('water')).click(); element(by.id('water')).getAttribute('class').then((value: string) => { diff --git a/e2e/components/slide-toggle/slide-toggle.e2e.ts b/e2e/components/slide-toggle/slide-toggle.e2e.ts index c68610615a6a..96f839e6e3ef 100644 --- a/e2e/components/slide-toggle/slide-toggle.e2e.ts +++ b/e2e/components/slide-toggle/slide-toggle.e2e.ts @@ -1,48 +1,48 @@ -import {browser, element, by, protractor} from 'protractor'; +import {browser, element, by, Key} from 'protractor'; +import {expectToExist} from '../../util/asserts'; describe('slide-toggle', () => { + const getInput = () => element(by.css('#normal-slide-toggle input')); + const getNormalToggle = () => element(by.css('#normal-slide-toggle')); beforeEach(() => browser.get('slide-toggle')); it('should render a slide-toggle', () => { - expect(element(by.css('md-slide-toggle')).isPresent()).toBe(true); + expectToExist('md-slide-toggle'); }); it('should change the checked state on click', () => { - let slideToggleEl = element(by.css('#normal-slide-toggle')); - let inputEl = element(by.css('#normal-slide-toggle input')); + let inputEl = getInput(); expect(inputEl.getAttribute('checked')).toBeFalsy('Expect slide-toggle to be unchecked'); - slideToggleEl.click(); + getNormalToggle().click(); expect(inputEl.getAttribute('checked')).toBeTruthy('Expect slide-toggle to be checked'); }); it('should change the checked state on click', () => { - let slideToggleEl = element(by.css('#normal-slide-toggle')); - let inputEl = element(by.css('#normal-slide-toggle input')); + let inputEl = getInput(); expect(inputEl.getAttribute('checked')).toBeFalsy('Expect slide-toggle to be unchecked'); - slideToggleEl.click(); + getNormalToggle().click(); expect(inputEl.getAttribute('checked')).toBeTruthy('Expect slide-toggle to be checked'); }); it('should not change the checked state on click when disabled', () => { - let slideToggleEl = element(by.css('#disabled-slide-toggle')); - let inputEl = element(by.css('#disabled-slide-toggle input')); + let inputEl = getInput(); expect(inputEl.getAttribute('checked')).toBeFalsy('Expect slide-toggle to be unchecked'); - slideToggleEl.click(); + element(by.css('#disabled-slide-toggle')).click(); expect(inputEl.getAttribute('checked')).toBeFalsy('Expect slide-toggle to be unchecked'); }); it('should move the thumb on state change', () => { - let slideToggleEl = element(by.css('#normal-slide-toggle')); + let slideToggleEl = getNormalToggle(); let thumbEl = element(by.css('#normal-slide-toggle .md-slide-toggle-thumb-container')); let previousX = thumbEl.getLocation().then(pos => pos.x); @@ -55,11 +55,11 @@ describe('slide-toggle', () => { }); it('should toggle the slide-toggle on space key', () => { - let inputEl = element(by.css('#normal-slide-toggle input')); + let inputEl = getInput(); expect(inputEl.getAttribute('checked')).toBeFalsy('Expect slide-toggle to be unchecked'); - inputEl.sendKeys(protractor.Key.SPACE); + inputEl.sendKeys(Key.SPACE); expect(inputEl.getAttribute('checked')).toBeTruthy('Expect slide-toggle to be checked'); }); diff --git a/e2e/components/tabs/tabs.e2e.ts b/e2e/components/tabs/tabs.e2e.ts index 9a9fd53a3032..a8c7c5f72f57 100644 --- a/e2e/components/tabs/tabs.e2e.ts +++ b/e2e/components/tabs/tabs.e2e.ts @@ -1,4 +1,5 @@ import {browser, by, element, ElementArrayFinder, ElementFinder, Key} from 'protractor'; +import {pressKeys} from '../../util/actions'; describe('tabs', () => { describe('basic behavior', () => { @@ -24,35 +25,33 @@ describe('tabs', () => { }); it('should change focus with keyboard interaction', () => { + let right = Key.RIGHT; + let left = Key.LEFT; + tabLabels.get(0).click(); expect(getFocusStates(tabLabels)).toEqual([true, false, false]); - pressKey(Key.RIGHT); + pressKeys(right); expect(getFocusStates(tabLabels)).toEqual([false, true, false]); - pressKey(Key.RIGHT); + pressKeys(right); expect(getFocusStates(tabLabels)).toEqual([false, false, true]); - pressKey(Key.RIGHT); + pressKeys(right); expect(getFocusStates(tabLabels)).toEqual([false, false, true]); - pressKey(Key.LEFT); + pressKeys(left); expect(getFocusStates(tabLabels)).toEqual([false, true, false]); - pressKey(Key.LEFT); + pressKeys(left); expect(getFocusStates(tabLabels)).toEqual([true, false, false]); - pressKey(Key.LEFT); + pressKeys(left); expect(getFocusStates(tabLabels)).toEqual([true, false, false]); }); }); }); -/** A helper function to perform the sendKey action. */ -function pressKey(key: string) { - browser.actions().sendKeys(key).perform(); -} - /** * Returns an array of true/false that represents the focus states of the provided elements. */ diff --git a/e2e/util/actions.ts b/e2e/util/actions.ts new file mode 100644 index 000000000000..8199481a8951 --- /dev/null +++ b/e2e/util/actions.ts @@ -0,0 +1,21 @@ +import {browser} from 'protractor'; +import {getElement, FinderResult} from './query'; + +/** + * Presses a single key or a sequence of keys. + */ +export function pressKeys(...keys: string[]): void { + let actions = browser.actions(); + actions.sendKeys.call(actions, keys).perform(); +} + +/** + * Clicks an element at a specific point. Useful if there's another element + * that covers part of the target and can catch the click. + */ +export function clickElementAtPoint(element: FinderResult, coords: Point): void { + let webElement = getElement(element).getWebElement(); + browser.actions().mouseMove(webElement, coords).click().perform(); +} + +export interface Point { x: number; y: number; } diff --git a/e2e/util/asserts.ts b/e2e/util/asserts.ts new file mode 100644 index 000000000000..dc624c00d579 --- /dev/null +++ b/e2e/util/asserts.ts @@ -0,0 +1,39 @@ +import {browser} from 'protractor'; +import {getElement, FinderResult, waitForElement} from './query'; +import {Point} from './actions'; + +/** + * Asserts that an element exists. + */ +export function expectToExist(selector: string, expected = true) { + return waitForElement(selector).then((isPresent: boolean) => { + expect(isPresent).toBe(expected, `Expected "${selector}"${expected ? '' : ' not'} to exist`); + }); +} + +/** + * Asserts that an element is focused. + */ +export function expectFocusOn(element: FinderResult, expected = true): void { + expect(browser.driver.switchTo().activeElement().getId()).toBe( + getElement(element).getId(), `Expected element${expected ? '' : ' not'} to be focused.`); +} + +/** + * Asserts that an element has a certan location. + */ +export function expectLocation(element: FinderResult, {x, y}: Point): void { + getElement(element).getLocation().then((location: Point) => { + expect(location.x).toEqual(x); + expect(location.y).toEqual(y); + }); +} + +/** + * Asserts that one element is aligned with another. + */ +export function expectAlignedWith(element: FinderResult, otherElement: FinderResult): void { + getElement(otherElement).getLocation().then((location: Point) => { + this.expectLocation(getElement(element), location); + }); +} diff --git a/e2e/util/query.ts b/e2e/util/query.ts new file mode 100644 index 000000000000..03f6b061920b --- /dev/null +++ b/e2e/util/query.ts @@ -0,0 +1,18 @@ +import {ElementFinder, by, element, ProtractorBy, browser} from 'protractor'; + +/** + * Normalizes either turning a selector into an + * ElementFinder or returning the finder itself. + */ +export function getElement(el: FinderResult): ElementFinder { + return typeof el === 'string' ? element(by.css(el)) : el; +} + +/** + * Waits for an element to be rendered. + */ +export function waitForElement(selector: string) { + return browser.isElementPresent(by.css(selector) as ProtractorBy); +} + +export type FinderResult = ElementFinder | string;