fix not overlay mode problems and improve test

ng2-components/ng2-alfresco-viewer/src/componets/imgViewer.component.html

@@ -1,7 +1,7 @@
 <div class="viewer-image-content">
     <div class="viewer-image-row">
         <div class="viewer-image-cell">
-            <img src="{{urlFile}}"  alt="{{displayName}}" id="viewer-image" class="center-element viewer-image"/>
+            <img id="viewer-image" src="{{urlFile}}"  alt="{{nameFile}}" class="center-element viewer-image"/>
         </div>
     </div>
 </div>

ng2-components/ng2-alfresco-viewer/src/componets/imgViewer.component.spec.ts

@@ -0,0 +1,55 @@
+/*!
+ * @license
+ * Copyright 2016 Alfresco Software, Ltd.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { describe, expect, it, inject, beforeEach } from '@angular/core/testing';
+import { TestComponentBuilder } from '@angular/compiler/testing';
+import { ImgViewerComponent } from './imgViewer.component';
+
+describe('Img viewer component ', () => {
+
+    let imgViewerComponentFixture, element, component;
+
+    beforeEach(inject([TestComponentBuilder], (tcb: TestComponentBuilder) => {
+        return tcb
+            .createAsync(ImgViewerComponent)
+            .then(fixture => {
+                imgViewerComponentFixture = fixture;
+                element = fixture.nativeElement;
+                component = fixture.componentInstance;
+            });
+    }));
+
+    it('If no url is passed should thrown an error', () => {
+        expect(() => {
+            component.ngOnChanges();
+        }).toThrow(new Error('Attribute urlFile is required'));
+    });
+
+    it('If  url is passed should not thrown an error', () => {
+        component.urlFile = 'fake-url';
+        expect(() => {
+            component.ngOnChanges();
+        }).not.toThrow(new Error('Attribute urlFile is required'));
+    });
+
+    it('The file Name should be present in the alt attribute', () => {
+        component.nameFile = 'fake-name';
+        imgViewerComponentFixture.detectChanges();
+        expect(element.querySelector('#viewer-image').getAttribute('alt')).toEqual('fake-name');
+    });
+});
+

ng2-components/ng2-alfresco-viewer/src/componets/mediaPlayer.component.spec.ts

@@ -0,0 +1,56 @@
+/*!
+ * @license
+ * Copyright 2016 Alfresco Software, Ltd.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { describe, expect, it, inject, beforeEach } from '@angular/core/testing';
+import { TestComponentBuilder } from '@angular/compiler/testing';
+import { MediaPlayerComponent } from './mediaPlayer.component';
+
+describe('Media player component ', () => {
+
+    let mediaPlayerComponentFixture, element, component;
+
+    beforeEach(inject([TestComponentBuilder], (tcb: TestComponentBuilder) => {
+        return tcb
+            .createAsync(MediaPlayerComponent)
+            .then(fixture => {
+                mediaPlayerComponentFixture = fixture;
+                element = fixture.nativeElement;
+                component = fixture.componentInstance;
+            });
+    }));
+
+    it('If no url is passed should thrown an error', () => {
+        expect(() => {
+            component.ngOnChanges();
+        }).toThrow(new Error('Attribute urlFile is required'));
+    });
+
+    it('If  url is passed should not thrown an error', () => {
+        component.urlFile = 'fake-url';
+        expect(() => {
+            component.ngOnChanges();
+        }).not.toThrow(new Error('Attribute urlFile is required'));
+    });
+
+    it('If  url is passed should not thrown an error', () => {
+        component.urlFile = 'fake-url';
+        expect(() => {
+            component.ngOnChanges();
+        }).not.toThrow(new Error('Attribute urlFile is required'));
+    });
+});
+

ng2-components/ng2-alfresco-viewer/src/componets/mediaPlayer.component.ts

@@ -15,21 +15,17 @@
  * limitations under the License.
  */
 
-import { Component, Input, ViewEncapsulation } from '@angular/core';
+import { Component, Input } from '@angular/core';
 declare let __moduleName: string;
 
 @Component({
     moduleId: __moduleName,
     selector: 'media-player',
     templateUrl: './mediaPlayer.component.html',
-    styleUrls: ['./mediaPlayer.component.css'],
+    styleUrls: ['./mediaPlayer.component.css']
-    encapsulation: ViewEncapsulation.None
 })
 export class MediaPlayerComponent {
 
-    @Input()
-    nameFile: string;
-
     @Input()
     urlFile: string;
 

ng2-components/ng2-alfresco-viewer/src/componets/notSupportedFormat.component.spec.ts

@@ -15,57 +15,47 @@
  * limitations under the License.
  */
 
-import { describe, expect, it, inject } from '@angular/core/testing';
+import { describe, expect, it, inject, beforeEach } from '@angular/core/testing';
 import { TestComponentBuilder } from '@angular/compiler/testing';
 import { NotSupportedFormat } from './notSupportedFormat.component';
 
 describe('Not Supported Format View', () => {
 
+    let notSupportedFixture, element, component;
+
+    beforeEach(inject([TestComponentBuilder], (tcb: TestComponentBuilder) => {
+        return tcb
+            .createAsync(NotSupportedFormat)
+            .then(fixture => {
+                notSupportedFixture = fixture;
+                element = fixture.nativeElement;
+                component = fixture.componentInstance;
+                fixture.detectChanges();
+            });
+    }));
+
     describe('View', () => {
-        it('Download button should be present', inject([TestComponentBuilder], (tcb: TestComponentBuilder) => {
-            return tcb
-                .createAsync(NotSupportedFormat)
-                .then((fixture) => {
-                    let element = fixture.nativeElement;
 
-                    fixture.detectChanges();
+        it('Download button should be present', () => {
+            expect(element.querySelector('#viewer-download-button')).not.toBeNull();
+        });
 
-                    expect(element.querySelector('#viewer-download-button')).not.toBeNull();
+        it('should display the name of the file', () => {
-                });
+            component.nameFile = 'Example Content.xls';
-        }));
+            notSupportedFixture.detectChanges();
-        it('should display the name of the file', inject([TestComponentBuilder], (tcb: TestComponentBuilder) => {
+            expect(element.querySelector('h4 span').innerHTML).toEqual('Example Content.xls');
-            return tcb
+        });
-                .createAsync(NotSupportedFormat)
-                .then((fixture) => {
-                    let element = fixture.nativeElement;
-                    let component = fixture.componentInstance;
-                    component.nameFile = 'Example Content.xls';
-
-                    fixture.detectChanges();
-
-                    expect(element.querySelector('h4 span').innerHTML).toEqual('Example Content.xls');
-                });
-        }));
     });
 
     describe('User Interaction', () => {
-        it('Click on Download button should call download method', inject([TestComponentBuilder], (tcb: TestComponentBuilder) => {
+        it('Click on Download button should call download method', () => {
-            return tcb
+            spyOn(window, 'open');
-                .createAsync(NotSupportedFormat)
-                .then((fixture) => {
-                    let element = fixture.nativeElement;
-                    let component = fixture.componentInstance;
 
-                    fixture.detectChanges();
+            let downloadButton = element.querySelector('#viewer-download-button');
+            downloadButton.click();
 
-                    spyOn(component, 'download');
+            expect(window.open).toHaveBeenCalled();
-
+        });
-                    let downloadButton = element.querySelector('#viewer-download-button');
-                    downloadButton.click();
-
-                    expect(component.download).toHaveBeenCalled();
-                });
-        }));
     });
 });
 

ng2-components/ng2-alfresco-viewer/src/componets/pdfViewer.component.css

@@ -32,7 +32,7 @@
     top: 80px;
     right:35px;
     width:auto;
-    position:fixed;
+    position:absolute;
     border-radius: 10px;
     background: #3E3E3E;
     color: white;
@@ -44,7 +44,7 @@
     top: 80px;
     left:35px;
     width:auto;
-    position:fixed;
+    position:absolute;
     border-radius: 10px;
     background: #3E3E3E;
     color: white;
@@ -93,5 +93,4 @@
     cursor: pointer;
     background: grey;
     border-radius: 24px;
-
 }

ng2-components/ng2-alfresco-viewer/src/componets/viewer.component.css

@@ -38,8 +38,6 @@
 
 .viewer-overlay-view {
     position: fixed;
-    width: 100%;
-    height: 100%;
     top: 0px;
     left: 0px;
     z-index: 1000;
@@ -55,3 +53,8 @@ img-viewer {
     justify-content: center;
 }
 
+.all-space{
+    width: 100%;
+    height: 100%;
+    background-color: #515151;
+}

ng2-components/ng2-alfresco-viewer/src/componets/viewer.component.html

@@ -1,17 +1,19 @@
-<div *ngIf="showViewer">
+<div id="viewer" *ngIf="showViewer" [ngClass]="{'all-space': !overlayMode }">
     <div *ngIf="overlayMode">
         <div id="viewer-shadow-transparent" class="viewer-shadow-transparent"></div>
     </div>
 
-    <div id="viewer-main-container" class="viewer-main-container" [ngClass]="{'viewer-overlay-view': overlayMode }" >
+    <div id="viewer-main-container" class="all-space" [ngClass]="{'viewer-overlay-view': overlayMode }">
 
         <!-- Start Layout -->
-        <div  mdl [ngClass]="{'mdl-layout mdl-js-layout mdl-layout--fixed-header': overlayMode }" >
+        <div mdl
-            <header  *ngIf="overlayMode" class="mdl-layout__header">
+             [ngClass]="{'mdl-layout mdl-js-layout mdl-layout--fixed-header': overlayMode, 'all-space': !overlayMode}">
+
+            <header *ngIf="overlayMode" class="mdl-layout__header">
                 <div class="mdl-layout__header-row">
 
                     <!-- File Title -->
-                    <span  id="viewer-name-file" class="mdl-layout-title viewer-name-file">{{displayName}}</span>
+                    <span id="viewer-name-file" class="mdl-layout-title viewer-name-file">{{displayName}}</span>
 
                     <span class="vertical-divider"></span>
 
@@ -21,7 +23,8 @@
                     <nav class="mdl-navigation">
                         <div id="viewer-toolbar-view-options">
                             <button *ngIf="overlayMode"
-                                class="mdl-color--black mdl-button mdl-js-button mdl-button--fab mdl-button--mini-fab mdl-button--colored" (click)="close()">
+                                    class="mdl-color--black mdl-button mdl-js-button mdl-button--fab mdl-button--mini-fab mdl-button--colored"
+                                    (click)="close()">
                                 <i id="viewer-close-button" class="icon material-icons">close</i>
                             </button>
                         </div>
@@ -30,44 +33,48 @@
                 </div>
             </header>
             <!--<div class="mdl-layout__drawer">-->
-                <!--<span class="mdl-layout-title">Thumbnail</span>-->
+            <!--<span class="mdl-layout-title">Thumbnail</span>-->
             <!--</div>-->
-            <main id="page-content" class="mdl-layout__content">
+            <main id="page-content" class="mdl-layout__content" [ngClass]="{'all-space': !overlayMode }">
 
                 <div class="mdl-grid">
                     <!--<div id="viewer-previous-file-button" class="center-element mdl-cell mdl-cell&#45;&#45;2-col mdl-cell&#45;&#45;hide-tablet mdl-cell&#45;&#45;hide-phone">-->
-                        <!--<button  *ngIf="false"-->
+                    <!--<button  *ngIf="false"-->
-                            <!--class="center-element mdl-color&#45;&#45;black mdl-button mdl-js-button mdl-button&#45;&#45;fab mdl-button&#45;&#45;mini-fab mdl-button&#45;&#45;colored"-->
+                    <!--class="center-element mdl-color&#45;&#45;black mdl-button mdl-js-button mdl-button&#45;&#45;fab mdl-button&#45;&#45;mini-fab mdl-button&#45;&#45;colored"-->
-                            <!--(click)="previousFile()">-->
+                    <!--(click)="previousFile()">-->
-                            <!--<i class="icon material-icons ">keyboard_arrow_left</i>-->
+                    <!--<i class="icon material-icons ">keyboard_arrow_left</i>-->
-                        <!--</button>-->
+                    <!--</button>-->
                     <!--</div>-->
 
-                    <div  id="viewer-content-container" *ngIf="isLoaded()" class="center-element mdl-cell mdl-cell--12-col" >
+                    <div id="viewer-content-container" *ngIf="isLoaded()"
+                         class="center-element mdl-cell mdl-cell--12-col">
 
                         <!-- Start View Switch-->
-                            <div *ngIf="isPdf()">
+                        <div *ngIf="isPdf()">
-                                <pdf-viewer [showToolbar]="showToolbar" [urlFile]="urlFileContent" [nameFile]="displayName" ></pdf-viewer>
+                            <pdf-viewer [showToolbar]="showToolbar" [urlFile]="urlFileContent"
-                            </div>
+                                        [nameFile]="displayName"></pdf-viewer>
-                            <div class="center-element" *ngIf="isImage()" >
+                        </div>
-                                <img-viewer [urlFile]="urlFileContent" [nameFile]="displayName"></img-viewer>
+                        <div class="center-element" *ngIf="isImage()">
-                            </div>
+                            <img-viewer [urlFile]="urlFileContent" [nameFile]="displayName"></img-viewer>
-                            <div class="center-element" *ngIf="isMedia()" >
+                        </div>
-                                <media-player [urlFile]="urlFileContent" [mimeType]="mimeType" [nameFile]="displayName"></media-player>
+                        <div class="center-element" *ngIf="isMedia()">
-                            </div>
+                            <media-player [urlFile]="urlFileContent" [mimeType]="mimeType"
-                            <div *ngIf="!supportedExtension()">
+                                          [nameFile]="displayName"></media-player>
-                                <not-supported-format [urlFile]="urlFileContent" [nameFile]="displayName" ></not-supported-format>
+                        </div>
-                            </div>
+                        <div *ngIf="!supportedExtension()">
+                            <not-supported-format [urlFile]="urlFileContent"
+                                                  [nameFile]="displayName"></not-supported-format>
+                        </div>
                         <!-- End View Switch -->
 
                     </div>
 
                     <!--<div id="viewer-next-file-button" class="center-element mdl-cell mdl-cell&#45;&#45;2-col mdl-cell&#45;&#45;hide-tablet mdl-cell&#45;&#45;hide-phone">-->
-                        <!--<button *ngIf="false"-->
+                    <!--<button *ngIf="false"-->
-                            <!--class="center-element mdl-color&#45;&#45;black mdl-button mdl-js-button mdl-button&#45;&#45;fab mdl-button&#45;&#45;mini-fab mdl-button&#45;&#45;colored"-->
+                    <!--class="center-element mdl-color&#45;&#45;black mdl-button mdl-js-button mdl-button&#45;&#45;fab mdl-button&#45;&#45;mini-fab mdl-button&#45;&#45;colored"-->
-                            <!--(click)="nextFile()">-->
+                    <!--(click)="nextFile()">-->
-                            <!--<i class="icon material-icons">keyboard_arrow_right</i>-->
+                    <!--<i class="icon material-icons">keyboard_arrow_right</i>-->
-                        <!--</button>-->
+                    <!--</button>-->
                     <!--</div>-->
 
                 </div>

ng2-components/ng2-alfresco-viewer/src/componets/viewer.component.spec.ts

@@ -59,75 +59,75 @@ describe('ViewerComponent', () => {
     });
 
     describe('View', () => {
-        it('shadow overlay should be present if is overlay mode', () => {
-            expect(element.querySelector('#viewer-shadow-transparent')).not.toBeNull();
-        });
 
-        it('header should be present if is overlay mode', () => {
+        describe('Overlay mode true', () => {
-            expect(element.querySelector('header')).not.toBeNull();
-        });
 
-        it('header should be NOT be present if is not overlay mode', () => {
+            beforeEach(() => {
-            component.overlayMode = false;
+                component.overlayMode = true;
-
-            viewerComponentFixture.detectChanges();
-
-            expect(element.querySelector('header')).toBeNull();
-        });
-
-        it('Name File should be present if is overlay mode ', () => {
-            component.overlayMode = true;
-
-            component.ngOnChanges().then(() => {
                 viewerComponentFixture.detectChanges();
-                expect(element.querySelector('#viewer-name-file').innerHTML).toEqual('fake-test-file.pdf');
+            });
+
+            it('shadow overlay should be present if is overlay mode', () => {
+                expect(element.querySelector('#viewer-shadow-transparent')).not.toBeNull();
+            });
+
+            it('header should be present if is overlay mode', () => {
+                expect(element.querySelector('header')).not.toBeNull();
+            });
+
+            it('Name File should be present if is overlay mode ', () => {
+                component.ngOnChanges().then(() => {
+                    viewerComponentFixture.detectChanges();
+                    expect(element.querySelector('#viewer-name-file').innerHTML).toEqual('fake-test-file.pdf');
+                });
+            });
+
+            it('Close button should be present if overlay mode', () => {
+                expect(element.querySelector('#viewer-close-button')).not.toBeNull();
+            });
+
+            it('Click on close button should hide the viewer', () => {
+                element.querySelector('#viewer-close-button').click();
+                viewerComponentFixture.detectChanges();
+                expect(element.querySelector('#viewer-main-container')).toBeNull();
+            });
+
+            it('Esc button should hide the viewer', () => {
+                EventMock.keyDown(27);
+                viewerComponentFixture.detectChanges();
+                expect(element.querySelector('#viewer-main-container')).toBeNull();
+            });
+
+            it('all-space class should not be present if is in overlay mode', () => {
+                expect(element.querySelector('#viewer').getAttribute('class')).toBeNull();
             });
         });
 
-        it('Close button should be present if overlay mode', () => {
+        describe('Overlay mode false', () => {
-            component.overlayMode = true;
 
-            viewerComponentFixture.detectChanges();
+            beforeEach(() => {
+                component.overlayMode = false;
+                viewerComponentFixture.detectChanges();
+            });
 
-            expect(element.querySelector('#viewer-close-button')).not.toBeNull();
+            it('header should be NOT be present if is not overlay mode', () => {
+                expect(element.querySelector('header')).toBeNull();
+            });
+
+            it('Close button should be not present if is not overlay mode', () => {
+                expect(element.querySelector('#viewer-close-button')).toBeNull();
+            });
+
+            it('Esc button should not  hide the viewerls if is not overlay mode', () => {
+                EventMock.keyDown(27);
+                viewerComponentFixture.detectChanges();
+                expect(element.querySelector('#viewer-main-container')).not.toBeNull();
+            });
+
+            it('all-space class should be present if is not overlay mode', () => {
+                expect(element.querySelector('#viewer').getAttribute('class')).toEqual('all-space');
+            });
         });
-
-        it('Close button should be not present if is not overlay mode', () => {
-            component.overlayMode = false;
-
-            viewerComponentFixture.detectChanges();
-
-            expect(element.querySelector('#viewer-close-button')).toBeNull();
-        });
-
-        it('Click on close button should hide the viewer', () => {
-            component.overlayMode = true;
-
-            viewerComponentFixture.detectChanges();
-            element.querySelector('#viewer-close-button').click();
-            viewerComponentFixture.detectChanges();
-            expect(element.querySelector('#viewer-main-container')).toBeNull();
-
-        });
-
-        it('Esc button should not  hide the viewerls if is not overlay mode', () => {
-            component.overlayMode = false;
-
-            viewerComponentFixture.detectChanges();
-            EventMock.keyDown(27);
-            viewerComponentFixture.detectChanges();
-            expect(element.querySelector('#viewer-main-container')).not.toBeNull();
-        });
-
-        it('Esc button should hide the viewer', () => {
-            component.overlayMode = true;
-
-            viewerComponentFixture.detectChanges();
-            EventMock.keyDown(27);
-            viewerComponentFixture.detectChanges();
-            expect(element.querySelector('#viewer-main-container')).toBeNull();
-        });
-
     });
 
     describe('Attribute', () => {