test(): cleanup screenshot files in e2e-app (#3367)

Author: devversion

e2e/components/fullscreen/fullscreen.e2e.ts

@@ -5,34 +5,36 @@ describe('fullscreen', () => {
   beforeEach(() => browser.get('/fullscreen'));
 
   it('should open a dialog inside a fullscreen element and move it to the document body', () => {
-    element(by.id('fullscreen')).click();
-    element(by.id('dialog')).click();
+    element(by.id('fullscreen-open')).click();
+    element(by.id('dialog-open')).click();
 
     expectOverlayInFullscreen();
 
-    element(by.id('exitfullscreenindialog')).click();
+    element(by.id('dialog-fullscreen-exit')).click();
     expectOverlayInBody();
   });
 
   it('should open a dialog inside the document body and move it to a fullscreen element', () => {
-    element(by.id('dialog')).click();
+    element(by.id('dialog-open')).click();
     expectOverlayInBody();
 
-    element(by.id('fullscreenindialog')).click();
+    element(by.id('dialog-fullscreen-open')).click();
     expectOverlayInFullscreen();
 
-    element(by.id('exitfullscreenindialog')).click();
+    element(by.id('dialog-fullscreen-exit')).click();
     expectOverlayInBody();
   });
 
   /** Expects the overlay container to be inside of the body element. */
   function expectOverlayInBody() {
-    expect(browser.isElementPresent(by.css('body > .cdk-overlay-container'))).toBe(true);
+    expect(browser.isElementPresent(by.css('body > .cdk-overlay-container')))
+      .toBe(true, 'Expected the overlay container to be inside of the body.');
   }
 
   /** Expects the overlay container to be in fullscreen mode. */
   function expectOverlayInFullscreen() {
-    expect(browser.isElementPresent(by.css('#fullscreenpane > .cdk-overlay-container'))).toBe(true);
+    expect(browser.isElementPresent(by.css('#fullscreen-pane > .cdk-overlay-container')))
+      .toBe(true, 'Expected the overlay container to be in fullscreen mode.');
   }
 
 });

src/e2e-app/fullscreen/fullscreen-e2e.html

@@ -1,5 +1,6 @@
-<button id="fullscreen" (click)="toggleFullScreen()">FULLSCREEN</button>
-<div id="fullscreenpane" style="width: 100%; height: 100%">
-    <button id="dialog" (click)="openDialog()">DIALOG</button>    
-    <button id="exitfullscreen" (click)="exitFullscreen()">EXIT FULLSCREEN</button>
-</div>
+<button id="fullscreen-open" (click)="openFullscreen()">Open Fullscreen</button>
+
+<div id="fullscreen-pane">
+  <button id="dialog-open" (click)="openDialog()">Open Dialog</button>
+  <button id="fullscreen-exit" (click)="exitFullscreen()">Exit Fullscreen</button>
+</div>

src/e2e-app/fullscreen/fullscreen-e2e.ts

@@ -2,60 +2,61 @@ import {Component, ElementRef, Output, EventEmitter} from '@angular/core';
 import {MdDialog, MdDialogRef} from '@angular/material';
 
 @Component({
-  selector: 'fullscreen-e2e',
   moduleId: module.id,
+  selector: 'fullscreen-e2e',
   templateUrl: 'fullscreen-e2e.html'
 })
 export class FullscreenE2E {
+
   dialogRef: MdDialogRef<TestDialog>;
 
   constructor (private _element: ElementRef, private _dialog: MdDialog) { }
 
   openDialog() {
     this.dialogRef = this._dialog.open(TestDialog);
-    this.dialogRef.componentInstance.fullscreen.subscribe(() => this.toggleFullScreen());
-    this.dialogRef.componentInstance.exitfullscreen.subscribe(() => this.exitFullscreen());
-    this.dialogRef.afterClosed().subscribe(() => {
-      this.dialogRef = null;
-    });
+
+    this.dialogRef.componentInstance.openFullscreen.subscribe(() => this.openFullscreen());
+    this.dialogRef.componentInstance.exitFullscreen.subscribe(() => this.exitFullscreen());
+    this.dialogRef.afterClosed().subscribe(() => this.dialogRef = null);
   }
 
-  toggleFullScreen() {
-      let element = this._element.nativeElement.querySelector('#fullscreenpane');
-      if (element.requestFullscreen) {
-        element.requestFullscreen();
-      } else if (element.webkitRequestFullScreen) {
-        element.webkitRequestFullScreen();
-      } else if ((element as any).mozRequestFullScreen) {
-        (element as any).mozRequestFullScreen();
-      } else if ((element as any).msRequestFullScreen) {
-        (element as any).msRequestFullScreen();
-      }
+  openFullscreen() {
+    let element = this._element.nativeElement.querySelector('#fullscreen-pane');
+
+    if (element.requestFullscreen) {
+      element.requestFullscreen();
+    } else if (element.webkitRequestFullScreen) {
+      element.webkitRequestFullScreen();
+    } else if ((element as any).mozRequestFullScreen) {
+      (element as any).mozRequestFullScreen();
+    } else if ((element as any).msRequestFullScreen) {
+      (element as any).msRequestFullScreen();
+    }
   }
 
   exitFullscreen() {
-      if (document.exitFullscreen) {
-          document.exitFullscreen();
-      } else if (document.webkitExitFullscreen) {
-          document.webkitExitFullscreen();
-      } else if ((document as any).mozExitFullScreen) {
-          (document as any).mozExitFullScreen();
-      } else if ((document as any).msExitFullScreen) {
-          (document as any).msExitFullScreen();
-      }
+    if (document.exitFullscreen) {
+      document.exitFullscreen();
+    } else if (document.webkitExitFullscreen) {
+      document.webkitExitFullscreen();
+    } else if ((document as any).mozExitFullScreen) {
+      (document as any).mozExitFullScreen();
+    } else if ((document as any).msExitFullScreen) {
+      (document as any).msExitFullScreen();
+    }
   }
 }
 
 @Component({
-  selector: 'fullscreen-dialog-e2e-test',
   template: `
-  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
-  <button id="fullscreenindialog" (click)="fullscreen.emit()">FULLSCREEN</button>
-  <button id="exitfullscreenindialog" (click)="exitfullscreen.emit()">EXIT FULLSCREEN</button>
-  <button type="button" (click)="dialogRef.close()" id="close">CLOSE</button>`
+    <button id="dialog-fullscreen-open" (click)="openFullscreen.emit()">Open Fullscreen</button>
+    <button id="dialog-fullscreen-exit" (click)="exitFullscreen.emit()">Exit Fullscreen</button>
+    <button (click)="dialogRef.close()" id="close">Close Dialog</button>
+  `
 })
 export class TestDialog {
-  constructor(public dialogRef: MdDialogRef<TestDialog>) { }
-  @Output() fullscreen = new EventEmitter<void>();
-  @Output() exitfullscreen = new EventEmitter<void>();
+  @Output() openFullscreen = new EventEmitter<void>();
+  @Output() exitFullscreen = new EventEmitter<void>();
+
+  constructor(public dialogRef: MdDialogRef<TestDialog>) {}
 }