Skip to content

refactor: switch e2e tests to async/await #4705

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 2 commits into from
Jun 1, 2017
Merged
Show file tree
Hide file tree
Changes from 1 commit
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
32 changes: 13 additions & 19 deletions e2e/components/block-scroll-strategy/block-scroll-strategy.e2e.ts
Original file line number Diff line number Diff line change
@@ -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 () => {
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

According to @vikerman this asyncSpec wrapper should be unnecessary w/ jasminewd2

Copy link
Member Author

@crisbeto crisbeto May 23, 2017

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Hmm looks like it. Initially, I was playing around with passing in the done function and calling it at the end, which ended up timing out for failures, because I wasn't wrapping it in a try/catch and calling done.fail. I guess that was overriding the custom handling from jasminewd. I've removed the asyncSpec now and it behaves as expected.

scrollPage(0, 100);
expect((await getScrollPosition()).y).toBe(100, 'Expected the page to be scrollable.');

Expand All @@ -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.');

Expand All @@ -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);
Expand All @@ -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);
Expand All @@ -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;`);
Expand All @@ -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;`);
Expand All @@ -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
Expand Down
19 changes: 11 additions & 8 deletions e2e/components/button/button.e2e.ts
Original file line number Diff line number Diff line change
@@ -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');
}));
});
});
51 changes: 25 additions & 26 deletions e2e/components/checkbox/checkbox.e2e.ts
Original file line number Diff line number Diff line change
@@ -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');
});
});
});
110 changes: 53 additions & 57 deletions e2e/components/dialog/dialog.e2e.ts
Original file line number Diff line number Diff line change
@@ -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'));
Expand All @@ -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');
Expand Down
2 changes: 1 addition & 1 deletion e2e/components/grid-list/grid-list.e2e.ts
Original file line number Diff line number Diff line change
@@ -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', () => {
Expand Down
Loading