feat(e2e): Take screenshots for grid-list, list, icon, menu, radio, tabs, slide-toggle (#3098)

* Update e2e tests, take screenshots when screen become stable

* fix lint

* Make id optional

* Remove screenshot for checkbox with keyboard event

* Fix radio test

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'));
     });
   });
 });

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,13 @@ describe('checkbox', function () {
 
       inputEl.getAttribute('checked').then((value: string) => {
         expect(value).toBeFalsy('Expect checkbox "checked" property to be false');
-        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');
       });
     });
-
   });
 });

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', () => {

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', () => {

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', () => {

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', () => {

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,19 @@ 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.presenceOf(element(by.css('.mat-radio-disabled'))))
+          .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();

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', () => {

e2e/components/tabs/tabs.e2e.ts

@@ -1,5 +1,14 @@
-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 +27,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', () => {

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);
   }