add e2e tests

Author: quanterion

e2e/components/fullscreen/fullscreen.e2e.ts

@@ -0,0 +1,36 @@
+describe('fullscreen', () => {
+  beforeEach(() => browser.get('/fullscreen'));
+
+  let overlayInBody = () => 
+    browser.isElementPresent(by.css('body > .md-overlay-container'));
+  let overlayInFullscreen = () => 
+    browser.isElementPresent(by.css('#fullscreenpane > .md-overlay-container'));
+
+  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();
+
+    overlayInFullscreen.then(isPresent => {
+        expect(isPresent).toBe(true);
+        element(by.id('exitfullscreenindialog')).click();
+        overlayInBody.then(isPresent => {
+            expect(isPresent).toBe(true);
+        });
+    });
+  });
+
+  it('should open a dialog inside the document body and move it to a fullscreen element', () => {
+    element(by.id('dialog')).click();
+    overlayInBody.then(isPresent => {
+        expect(isPresent).toBe(true);
+        element(by.id('fullscreenindialog')).click();
+        overlayInFullscreen.then(isPresent => {
+            expect(isPresent).toBe(true);
+            element(by.id('exitfullscreenindialog')).click();
+            browser.isElementPresent(by.css('body > .md-overlay-container')).then(isPresent => {
+                expect(isPresent).toBe(true);
+            });
+        });
+    });
+  });
+});

src/e2e-app/e2e-app-module.ts

@@ -11,7 +11,8 @@ import {BasicTabs} from './tabs/tabs-e2e';
 import {DialogE2E, TestDialog} from './dialog/dialog-e2e';
 import {GridListE2E} from './grid-list/grid-list-e2e';
 import {ListE2E} from './list/list-e2e';
-import {MaterialModule} from '@angular/material';
+import {FullscreenE2E, TestDialog as TestDialogFullScreen} from './fullscreen/fullscreen-e2e';
+import {MaterialModule, OverlayContainer, FullscreenOverlayContainer} from '@angular/material';
 import {E2E_APP_ROUTES} from './e2e-app/routes';
 
 
@@ -34,11 +35,14 @@ import {E2E_APP_ROUTES} from './e2e-app/routes';
     TestDialog,
     GridListE2E,
     ListE2E,
+    FullscreenE2E,
+    TestDialogFullScreen,
   ],
   bootstrap: [E2EApp],
   providers: [
-    {provide: AnimationDriver, useValue: AnimationDriver.NOOP}
+    {provide: AnimationDriver, useValue: AnimationDriver.NOOP},
+    {provide: OverlayContainer, useClass: FullscreenOverlayContainer}
   ],
-  entryComponents: [TestDialog]
+  entryComponents: [TestDialog, TestDialogFullScreen]
 })
 export class E2eAppModule { }

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

@@ -7,5 +7,6 @@
 <a md-list-item [routerLink]="['menu']">Menu</a>
 <a md-list-item [routerLink]="['radio']">Radios</a>
 <a md-list-item [routerLink]="['tabs']">Tabs</a>
+<a md-list-item [routerLink]="['fullscreen']">Fullscreen</a>
 
 <router-outlet></router-outlet>

src/e2e-app/e2e-app/routes.ts

@@ -9,6 +9,7 @@ import {SimpleCheckboxes} from '../checkbox/checkbox-e2e';
 import {DialogE2E} from '../dialog/dialog-e2e';
 import {GridListE2E} from '../grid-list/grid-list-e2e';
 import {ListE2E} from '../list/list-e2e';
+import {FullscreenE2E} from '../fullscreen/fullscreen-e2e';
 
 export const E2E_APP_ROUTES: Routes = [
   {path: '', component: Home},
@@ -21,4 +22,5 @@ export const E2E_APP_ROUTES: Routes = [
   {path: 'dialog', component: DialogE2E},
   {path: 'grid-list', component: GridListE2E},
   {path: 'list', component: ListE2E},
+  {path: 'fullscreen', component: FullscreenE2E},
 ];

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

@@ -0,0 +1,5 @@
+<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>

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

@@ -0,0 +1,55 @@
+import {Component, ElementRef, Output, EventEmitter} from '@angular/core';
+import {MdDialog, MdDialogRef, OverlayContainer,
+    FullscreenOverlayContainer} from '@angular/material';
+
+@Component({
+  selector: 'fullscreen-e2e',
+  moduleId: module.id,
+  templateUrl: 'fullscreen-e2e.html'
+})
+export class FullscreenE2E {
+  dialogRef: MdDialogRef<TestDialog>;
+
+  constructor (private _element: ElementRef, private _dialog: MdDialog,
+    private _overlayContainer: OverlayContainer) { }
+
+  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;
+    });
+  }
+
+  toggleFullScreen() {
+      let elem = this._element.nativeElement.querySelector('#fullscreenpane');
+      (this._overlayContainer as FullscreenOverlayContainer).toggleFullscreen(elem);
+  }
+
+  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();
+      }
+  }
+}
+
+@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>`
+})
+export class TestDialog {
+  constructor(public dialogRef: MdDialogRef<TestDialog>) { }
+  @Output() fullscreen = new EventEmitter<void>();
+  @Output() exitfullscreen = new EventEmitter<void>();
+}

src/lib/core/overlay/fullscreen-overlay-container.ts

@@ -14,15 +14,15 @@ import {OverlayContainer} from './overlay-container';
 export class FullscreenOverlayContainer extends OverlayContainer {
   protected _createContainer(): void {
     super._createContainer();
+    this._adjustParentForFullscreenChange();
     this._addFullscreenChangeListener(() => this._adjustParentForFullscreenChange());
   }
 
   private _adjustParentForFullscreenChange(): void {
     if (!this._containerElement) {
       return;
     }
-
-    let fullscreenElement = this._getFullscreenElement();
+    let fullscreenElement = this.getFullscreenElement();
     let parent = fullscreenElement || document.body;
     parent.appendChild(this._containerElement);
   }
@@ -41,11 +41,28 @@ export class FullscreenOverlayContainer extends OverlayContainer {
 
   // When the page is put into fullscreen mode, a specific element is specified.
   // Only that element and its children are visible when in fullscreen mode.
-  private _getFullscreenElement(): Element {
+  getFullscreenElement(): Element {
     return document.fullscreenElement ||
         document.webkitFullscreenElement ||
         (document as any).mozFullScreenElement ||
         (document as any).msFullscreenElement ||
         null;
   }
+
+  // returns true if it has tried to toggle fullscreen mode
+  // but provides no guarantees whether it really happened
+  toggleFullscreen(element: HTMLElement) {
+    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();
+    } else {
+      return false;
+    }
+    return true;
+  }
 }