diff --git a/e2e/components/button/button.e2e.ts b/e2e/components/button/button.e2e.ts index 8bbab6c135b9..4771fdf2dfc4 100644 --- a/e2e/components/button/button.e2e.ts +++ b/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'); }); }); }); diff --git a/e2e/components/checkbox/checkbox.e2e.ts b/e2e/components/checkbox/checkbox.e2e.ts index 9e941f6efcb3..b6b1a255b4a1 100644 --- a/e2e/components/checkbox/checkbox.e2e.ts +++ b/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,15 +13,18 @@ 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', () => { @@ -28,12 +32,14 @@ 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'); }); }); diff --git a/e2e/screenshot.ts b/e2e/screenshot.ts new file mode 100644 index 000000000000..46990e695ddf --- /dev/null +++ b/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); +}