feat(screenshot): Add screenshot function to e2e test (button and checkbox) (#2532)

* Add screenshot function to e2e test (button and checkbox)

* Add reporter for jasmine

* Change directory to constant, and use variable to store name

Author: tinayuangao

e2e/components/button/button.e2e.ts

@@ -1,17 +1,22 @@
 import {browser, by, element} from 'protractor';
+import {screenshot} from '../../screenshot';
+
 
 describe('button', function () {
   describe('disabling behavior', function () {
     beforeEach(function() {
       browser.get('/button');
     });
+
     it('should prevent click handlers from executing when disabled', function () {
       element(by.id('test-button')).click();
       expect(element(by.id('click-counter')).getText()).toEqual('1');
+      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');
     });
   });
 });

e2e/components/checkbox/checkbox.e2e.ts

@@ -1,4 +1,5 @@
 import {browser, by, element, Key} from 'protractor';
+import {screenshot} from '../../screenshot';
 
 describe('checkbox', function () {
 
@@ -12,28 +13,33 @@ describe('checkbox', function () {
       let checkboxEl = element(by.id('test-checkbox'));
       let inputEl = element(by.css('input[id=input-test-checkbox]'));
 
+      screenshot('start');
       checkboxEl.click();
       inputEl.getAttribute('checked').then((value: string) => {
         expect(value).toBeTruthy('Expect checkbox "checked" property to be true');
       });
+      screenshot('checked');
 
       checkboxEl.click();
       inputEl.getAttribute('checked').then((value: string) => {
         expect(value).toBeFalsy('Expect checkbox "checked" property to be false');
       });
+      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');
+        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/screenshot.ts

@@ -0,0 +1,57 @@
+import * as fs from 'fs';
+import * as gulp from 'gulp';
+import * as path from 'path';
+import {browser} from 'protractor';
+
+const OUTPUT_DIR = '/tmp/angular-material2-build/screenshots/';
+
+let currentJasmineSpecName = '';
+
+/**  Adds a custom jasmine reporter that simply keeps track of the current test name. */
+function initializeEnvironment(jasmine: any) {
+  let reporter = new jasmine.JsApiReporter({});
+  reporter.specStarted = function(result: any) {
+    currentJasmineSpecName = result.fullName;
+  };
+  jasmine.getEnv().addReporter(reporter);
+}
+
+initializeEnvironment(jasmine);
+
+export class Screenshot {
+  id: string;
+
+  /** The filename used to store the screenshot. */
+  get filename(): string {
+    return this.id
+        .toLowerCase()
+        .replace(/\s/g, '_')
+        .replace(/[^/a-z0-9_]+/g, '')
+      + '.screenshot.png';
+  }
+
+  /** The full path to the screenshot */
+  get fullPath(): string {
+    return path.resolve(OUTPUT_DIR, this.filename);
+  }
+
+  constructor(id: string) {
+    this.id = `${currentJasmineSpecName} ${id}`;
+    browser.takeScreenshot().then(png => this.storeScreenshot(png));
+  }
+
+  /** Replaces the existing screenshot with the newly generated one. */
+  storeScreenshot(png: any) {
+    if (!fs.existsSync(OUTPUT_DIR)) {
+      fs.mkdirSync(OUTPUT_DIR, '744');
+    }
+
+    if (fs.existsSync(OUTPUT_DIR)) {
+      fs.writeFileSync(this.fullPath, png, {encoding: 'base64' });
+    }
+  }
+}
+
+export function screenshot(id: string) {
+  return new Screenshot(id);
+}