From 25a168dc821f3478e4bb49cccaa7bcd4f4a32c51 Mon Sep 17 00:00:00 2001 From: Yuan Gao Date: Tue, 14 Feb 2017 16:08:50 -0800 Subject: [PATCH 1/5] Update e2e tests, take screenshots when screen become stable --- e2e/components/button/button.e2e.ts | 10 +++++++--- e2e/components/checkbox/checkbox.e2e.ts | 19 +++++++++++++------ e2e/components/grid-list/grid-list.e2e.ts | 2 ++ e2e/components/icon/icon.e2e.ts | 2 ++ e2e/components/list/list.e2e.ts | 2 ++ e2e/components/menu/menu.e2e.ts | 6 ++++++ e2e/components/radio/radio.e2e.ts | 17 +++++++++++++++-- .../slide-toggle/slide-toggle.e2e.ts | 6 ++++++ e2e/components/tabs/tabs.e2e.ts | 9 ++++++++- 9 files changed, 61 insertions(+), 12 deletions(-) diff --git a/e2e/components/button/button.e2e.ts b/e2e/components/button/button.e2e.ts index dd183358e118..91719f606425 100644 --- a/e2e/components/button/button.e2e.ts +++ b/e2e/components/button/button.e2e.ts @@ -1,4 +1,4 @@ -import {browser, by, element} from 'protractor'; +import {browser, by, element, ExpectedConditions} from 'protractor'; import {screenshot} from '../../screenshot'; @@ -9,12 +9,16 @@ describe('button', () => { 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'); + browser.wait(ExpectedConditions.not( + ExpectedConditions.presenceOf(element(by.css('div.mat-ripple-element'))))) + .then(() => screenshot('clicked once')); element(by.id('disable-toggle')).click(); element(by.id('test-button')).click(); expect(element(by.id('click-counter')).getText()).toEqual('1'); - screenshot('click disabled'); + browser.wait(ExpectedConditions.not( + ExpectedConditions.presenceOf(element(by.css('div.mat-ripple-element'))))) + .then(() => screenshot('click disabled')); }); }); }); diff --git a/e2e/components/checkbox/checkbox.e2e.ts b/e2e/components/checkbox/checkbox.e2e.ts index b6b1a255b4a1..eb9012bf61fe 100644 --- a/e2e/components/checkbox/checkbox.e2e.ts +++ b/e2e/components/checkbox/checkbox.e2e.ts @@ -1,4 +1,4 @@ -import {browser, by, element, Key} from 'protractor'; +import {browser, by, element, Key, ExpectedConditions} from 'protractor'; import {screenshot} from '../../screenshot'; describe('checkbox', function () { @@ -17,14 +17,18 @@ describe('checkbox', function () { 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')); }); - 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')); }); - screenshot('unchecked'); }); it('should toggle the checkbox when pressing space', () => { @@ -32,16 +36,19 @@ describe('checkbox', function () { inputEl.getAttribute('checked').then((value: string) => { expect(value).toBeFalsy('Expect checkbox "checked" property to be false'); - screenshot('start'); + browser.wait(ExpectedConditions.not( + ExpectedConditions.presenceOf(element(by.css('div.mat-ripple-element'))))) + .then(() => screenshot('start')); }); inputEl.sendKeys(Key.SPACE); inputEl.getAttribute('checked').then((value: string) => { expect(value).toBeTruthy('Expect checkbox "checked" property to be true'); - screenshot('pressed space'); + browser.wait(ExpectedConditions.not( + ExpectedConditions.presenceOf(element(by.css('div.mat-ripple-element'))))) + .then(() => screenshot('pressed space')); }); }); - }); }); diff --git a/e2e/components/grid-list/grid-list.e2e.ts b/e2e/components/grid-list/grid-list.e2e.ts index 814e0bbbc697..e537dd20074d 100644 --- a/e2e/components/grid-list/grid-list.e2e.ts +++ b/e2e/components/grid-list/grid-list.e2e.ts @@ -1,11 +1,13 @@ import {browser} from 'protractor'; import {expectToExist} from '../../util/asserts'; +import {screenshot} from '../../screenshot'; describe('grid-list', () => { beforeEach(() => browser.get('/grid-list')); it('should render a grid list container', () => { expectToExist('md-grid-list'); + screenshot(''); }); it('should render list items inside the grid list container', () => { diff --git a/e2e/components/icon/icon.e2e.ts b/e2e/components/icon/icon.e2e.ts index e0cb1caa6910..dcad7db1b9b2 100644 --- a/e2e/components/icon/icon.e2e.ts +++ b/e2e/components/icon/icon.e2e.ts @@ -1,4 +1,5 @@ import {browser, by, element} from 'protractor'; +import {screenshot} from '../../screenshot'; describe('icon', () => { describe('font icons by ligature', () => { @@ -13,6 +14,7 @@ describe('icon', () => { testIcon.getAttribute('aria-label').then((attr: string) => { expect(attr).toEqual('favorite'); }); + screenshot(''); }); it('should have the correct class when used', () => { diff --git a/e2e/components/list/list.e2e.ts b/e2e/components/list/list.e2e.ts index e616f1ffcde5..c87874e47dba 100644 --- a/e2e/components/list/list.e2e.ts +++ b/e2e/components/list/list.e2e.ts @@ -1,11 +1,13 @@ import {browser} from 'protractor'; import {expectToExist} from '../../util/asserts'; +import {screenshot} from '../../screenshot'; describe('list', () => { beforeEach(() => browser.get('/list')); it('should render a list container', () => { expectToExist('md-list'); + screenshot(''); }); it('should render list items inside the list container', () => { diff --git a/e2e/components/menu/menu.e2e.ts b/e2e/components/menu/menu.e2e.ts index 10e25ef085d2..ecbdb778790e 100644 --- a/e2e/components/menu/menu.e2e.ts +++ b/e2e/components/menu/menu.e2e.ts @@ -2,6 +2,7 @@ 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'; describe('menu', () => { const menuSelector = '.mat-menu-panel'; @@ -15,28 +16,33 @@ describe('menu', () => { expectToExist(menuSelector); expect(page.menu().getText()).toEqual('One\nTwo\nThree\nFour'); + screenshot(''); }); it('should close menu when menu item is clicked', () => { page.trigger().click(); page.items(0).click(); expectToExist(menuSelector, false); + screenshot(''); }); it('should run click handlers on regular menu items', () => { page.trigger().click(); page.items(0).click(); expect(page.getResultText()).toEqual('one'); + screenshot('one'); page.trigger().click(); page.items(1).click(); expect(page.getResultText()).toEqual('two'); + screenshot('two'); }); it('should run not run click handlers on disabled menu items', () => { page.trigger().click(); page.items(2).click(); expect(page.getResultText()).toEqual(''); + screenshot(''); }); it('should support multiple triggers opening the same menu', () => { diff --git a/e2e/components/radio/radio.e2e.ts b/e2e/components/radio/radio.e2e.ts index 177423346195..a706939fc1cb 100644 --- a/e2e/components/radio/radio.e2e.ts +++ b/e2e/components/radio/radio.e2e.ts @@ -1,4 +1,5 @@ -import {browser, by, element} from 'protractor'; +import {browser, by, element, ExpectedConditions} from 'protractor'; +import {screenshot} from '../../screenshot'; describe('radio', () => { describe('disabling behavior', () => { @@ -8,6 +9,9 @@ describe('radio', () => { 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(); @@ -19,6 +23,9 @@ describe('radio', () => { 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(); @@ -33,14 +40,20 @@ describe('radio', () => { element(by.id('water')).click(); element(by.id('water')).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('water')); }); - element(by.css('input[id=water-input]')).getAttribute('disabled').then((value: string) => { + element(by.css('input[id=water-input]')).getAttribute('disabled').then((value: string) => { expect(value).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(); diff --git a/e2e/components/slide-toggle/slide-toggle.e2e.ts b/e2e/components/slide-toggle/slide-toggle.e2e.ts index cd3e168aee5c..c636bf5ebbb7 100644 --- a/e2e/components/slide-toggle/slide-toggle.e2e.ts +++ b/e2e/components/slide-toggle/slide-toggle.e2e.ts @@ -1,5 +1,6 @@ import {browser, element, by, Key} from 'protractor'; import {expectToExist} from '../../util/asserts'; +import {screenshot} from '../../screenshot'; describe('slide-toggle', () => { const getInput = () => element(by.css('#normal-slide-toggle input')); @@ -9,6 +10,7 @@ describe('slide-toggle', () => { it('should render a slide-toggle', () => { expectToExist('md-slide-toggle'); + screenshot(''); }); it('should change the checked state on click', () => { @@ -19,6 +21,7 @@ describe('slide-toggle', () => { getNormalToggle().click(); expect(inputEl.getAttribute('checked')).toBeTruthy('Expect slide-toggle to be checked'); + screenshot(''); }); it('should change the checked state on click', () => { @@ -29,6 +32,7 @@ describe('slide-toggle', () => { getNormalToggle().click(); expect(inputEl.getAttribute('checked')).toBeTruthy('Expect slide-toggle to be checked'); + screenshot(''); }); it('should not change the checked state on click when disabled', () => { @@ -39,6 +43,7 @@ describe('slide-toggle', () => { element(by.css('#disabled-slide-toggle')).click(); expect(inputEl.getAttribute('checked')).toBeFalsy('Expect slide-toggle to be unchecked'); + screenshot(''); }); it('should move the thumb on state change', () => { @@ -52,6 +57,7 @@ describe('slide-toggle', () => { let newX = thumbEl.getLocation().then(pos => pos.x); expect(previousX).not.toBe(newX); + 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 2218b6ad2132..c695329bbb49 100644 --- a/e2e/components/tabs/tabs.e2e.ts +++ b/e2e/components/tabs/tabs.e2e.ts @@ -1,5 +1,6 @@ -import {browser, by, element, ElementArrayFinder, ElementFinder, Key} from 'protractor'; +import {browser, by, element, ElementArrayFinder, ElementFinder, Key, ExpectedConditions} from 'protractor'; import {pressKeys} from '../../util/actions'; +import {screenshot} from '../../screenshot'; describe('tabs', () => { describe('basic behavior', () => { @@ -18,10 +19,16 @@ describe('tabs', () => { 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')); 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')); }); it('should change focus with keyboard interaction', () => { From 9feb518dbe6395557790d1734b66cd37f1c53dad Mon Sep 17 00:00:00 2001 From: Yuan Gao Date: Wed, 15 Feb 2017 10:40:00 -0800 Subject: [PATCH 2/5] fix lint --- e2e/components/tabs/tabs.e2e.ts | 10 +++++++++- 1 file changed, 9 insertions(+), 1 deletion(-) diff --git a/e2e/components/tabs/tabs.e2e.ts b/e2e/components/tabs/tabs.e2e.ts index c695329bbb49..4092aa2b5c4f 100644 --- a/e2e/components/tabs/tabs.e2e.ts +++ b/e2e/components/tabs/tabs.e2e.ts @@ -1,4 +1,12 @@ -import {browser, by, element, ElementArrayFinder, ElementFinder, Key, ExpectedConditions} from 'protractor'; +import { + browser, + by, + element, + ElementArrayFinder, + ElementFinder, + Key, + ExpectedConditions +} from 'protractor'; import {pressKeys} from '../../util/actions'; import {screenshot} from '../../screenshot'; From 48ffa1db59739ed1819bac810b591ca496722d3c Mon Sep 17 00:00:00 2001 From: Yuan Gao Date: Wed, 15 Feb 2017 10:53:59 -0800 Subject: [PATCH 3/5] Make id optional --- e2e/components/grid-list/grid-list.e2e.ts | 2 +- e2e/components/icon/icon.e2e.ts | 2 +- e2e/components/list/list.e2e.ts | 2 +- e2e/components/menu/menu.e2e.ts | 6 +++--- e2e/components/slide-toggle/slide-toggle.e2e.ts | 10 +++++----- e2e/screenshot.ts | 6 +++--- 6 files changed, 14 insertions(+), 14 deletions(-) diff --git a/e2e/components/grid-list/grid-list.e2e.ts b/e2e/components/grid-list/grid-list.e2e.ts index e537dd20074d..848f2b04a3cb 100644 --- a/e2e/components/grid-list/grid-list.e2e.ts +++ b/e2e/components/grid-list/grid-list.e2e.ts @@ -7,7 +7,7 @@ describe('grid-list', () => { it('should render a grid list container', () => { expectToExist('md-grid-list'); - screenshot(''); + screenshot(); }); it('should render list items inside the grid list container', () => { diff --git a/e2e/components/icon/icon.e2e.ts b/e2e/components/icon/icon.e2e.ts index dcad7db1b9b2..1407f517d1ef 100644 --- a/e2e/components/icon/icon.e2e.ts +++ b/e2e/components/icon/icon.e2e.ts @@ -14,7 +14,7 @@ describe('icon', () => { testIcon.getAttribute('aria-label').then((attr: string) => { expect(attr).toEqual('favorite'); }); - screenshot(''); + screenshot(); }); it('should have the correct class when used', () => { diff --git a/e2e/components/list/list.e2e.ts b/e2e/components/list/list.e2e.ts index c87874e47dba..86da9dba1246 100644 --- a/e2e/components/list/list.e2e.ts +++ b/e2e/components/list/list.e2e.ts @@ -7,7 +7,7 @@ describe('list', () => { it('should render a list container', () => { expectToExist('md-list'); - screenshot(''); + screenshot(); }); it('should render list items inside the list container', () => { diff --git a/e2e/components/menu/menu.e2e.ts b/e2e/components/menu/menu.e2e.ts index ecbdb778790e..26b3e4dbb431 100644 --- a/e2e/components/menu/menu.e2e.ts +++ b/e2e/components/menu/menu.e2e.ts @@ -16,14 +16,14 @@ describe('menu', () => { expectToExist(menuSelector); expect(page.menu().getText()).toEqual('One\nTwo\nThree\nFour'); - screenshot(''); + screenshot(); }); it('should close menu when menu item is clicked', () => { page.trigger().click(); page.items(0).click(); expectToExist(menuSelector, false); - screenshot(''); + screenshot(); }); it('should run click handlers on regular menu items', () => { @@ -42,7 +42,7 @@ describe('menu', () => { page.trigger().click(); page.items(2).click(); expect(page.getResultText()).toEqual(''); - screenshot(''); + screenshot(); }); it('should support multiple triggers opening the same menu', () => { diff --git a/e2e/components/slide-toggle/slide-toggle.e2e.ts b/e2e/components/slide-toggle/slide-toggle.e2e.ts index c636bf5ebbb7..c681c093942f 100644 --- a/e2e/components/slide-toggle/slide-toggle.e2e.ts +++ b/e2e/components/slide-toggle/slide-toggle.e2e.ts @@ -10,7 +10,7 @@ describe('slide-toggle', () => { it('should render a slide-toggle', () => { expectToExist('md-slide-toggle'); - screenshot(''); + screenshot(); }); it('should change the checked state on click', () => { @@ -21,7 +21,7 @@ describe('slide-toggle', () => { getNormalToggle().click(); expect(inputEl.getAttribute('checked')).toBeTruthy('Expect slide-toggle to be checked'); - screenshot(''); + screenshot(); }); it('should change the checked state on click', () => { @@ -32,7 +32,7 @@ describe('slide-toggle', () => { getNormalToggle().click(); expect(inputEl.getAttribute('checked')).toBeTruthy('Expect slide-toggle to be checked'); - screenshot(''); + screenshot(); }); it('should not change the checked state on click when disabled', () => { @@ -43,7 +43,7 @@ describe('slide-toggle', () => { element(by.css('#disabled-slide-toggle')).click(); expect(inputEl.getAttribute('checked')).toBeFalsy('Expect slide-toggle to be unchecked'); - screenshot(''); + screenshot(); }); it('should move the thumb on state change', () => { @@ -57,7 +57,7 @@ describe('slide-toggle', () => { let newX = thumbEl.getLocation().then(pos => pos.x); expect(previousX).not.toBe(newX); - screenshot(''); + screenshot(); }); it('should toggle the slide-toggle on space key', () => { diff --git a/e2e/screenshot.ts b/e2e/screenshot.ts index d985cb82242f..e5df95c695d0 100644 --- a/e2e/screenshot.ts +++ b/e2e/screenshot.ts @@ -34,8 +34,8 @@ export class Screenshot { return path.resolve(OUTPUT_DIR, this.filename); } - constructor(id: string) { - this.id = `${currentJasmineSpecName} ${id}`; + constructor(id?: string) { + this.id = id ? `${currentJasmineSpecName} ${id}` : currentJasmineSpecName; browser.takeScreenshot().then(png => this.storeScreenshot(png)); } @@ -51,7 +51,7 @@ export class Screenshot { } } -export function screenshot(id: string) { +export function screenshot(id?: string) { if (process.env['TRAVIS']) { return new Screenshot(id); } From c203709c3ad7ff2ba482d6dcc813d30e45dfb151 Mon Sep 17 00:00:00 2001 From: Yuan Gao Date: Wed, 15 Feb 2017 13:17:35 -0800 Subject: [PATCH 4/5] Remove screenshot for checkbox with keyboard event --- e2e/components/checkbox/checkbox.e2e.ts | 6 ------ 1 file changed, 6 deletions(-) diff --git a/e2e/components/checkbox/checkbox.e2e.ts b/e2e/components/checkbox/checkbox.e2e.ts index eb9012bf61fe..8c81f63100b0 100644 --- a/e2e/components/checkbox/checkbox.e2e.ts +++ b/e2e/components/checkbox/checkbox.e2e.ts @@ -36,18 +36,12 @@ describe('checkbox', function () { 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('start')); }); inputEl.sendKeys(Key.SPACE); 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('pressed space')); }); }); }); From c43807e16ccd4a1a2f5399e5b7362159973fb2cf Mon Sep 17 00:00:00 2001 From: Yuan Gao Date: Wed, 15 Feb 2017 13:33:43 -0800 Subject: [PATCH 5/5] Fix radio test --- e2e/components/radio/radio.e2e.ts | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/e2e/components/radio/radio.e2e.ts b/e2e/components/radio/radio.e2e.ts index a706939fc1cb..a2a5188838d2 100644 --- a/e2e/components/radio/radio.e2e.ts +++ b/e2e/components/radio/radio.e2e.ts @@ -40,8 +40,7 @@ describe('radio', () => { element(by.id('water')).click(); element(by.id('water')).getAttribute('class').then((value: string) => { expect(value).toContain('mat-radio-disabled'); - browser.wait(ExpectedConditions.not( - ExpectedConditions.presenceOf(element(by.css('div.mat-ripple-element'))))) + 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) => {