diff --git a/e2e/components/fullscreen/fullscreen.e2e.ts b/e2e/components/fullscreen/fullscreen.e2e.ts index 3851de017cc0..a9f4a8535c65 100644 --- a/e2e/components/fullscreen/fullscreen.e2e.ts +++ b/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.'); } }); diff --git a/src/e2e-app/fullscreen/fullscreen-e2e.html b/src/e2e-app/fullscreen/fullscreen-e2e.html index 2ec7433bf799..834885caefb1 100644 --- a/src/e2e-app/fullscreen/fullscreen-e2e.html +++ b/src/e2e-app/fullscreen/fullscreen-e2e.html @@ -1,5 +1,6 @@ - -
- - -
\ No newline at end of file + + +
+ + +
diff --git a/src/e2e-app/fullscreen/fullscreen-e2e.ts b/src/e2e-app/fullscreen/fullscreen-e2e.ts index f2569eb6139a..f95dc7a46147 100644 --- a/src/e2e-app/fullscreen/fullscreen-e2e.ts +++ b/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; 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: ` -

Lorem ipsum dolor sit amet, consectetur adipisicing elit.

- - - ` + + + + ` }) export class TestDialog { - constructor(public dialogRef: MdDialogRef) { } - @Output() fullscreen = new EventEmitter(); - @Output() exitfullscreen = new EventEmitter(); + @Output() openFullscreen = new EventEmitter(); + @Output() exitFullscreen = new EventEmitter(); + + constructor(public dialogRef: MdDialogRef) {} }