Merge pull request #848 from Alfresco/dev-eromano-viewerTestFiV

fix test angular2 Final release viewer component #749

ng2-components/ng2-alfresco-tag/src/components/tag-list.component.spec.ts

@@ -29,7 +29,7 @@ import { TagService } from '../services/tag.service';
 
 declare let jasmine: any;
 
-describe('Test ng2-alfresco-tag  Tag list All ECM', () => {
+describe('Test ng2-alfresco-tag Tag list All ECM', () => {
 
     let dataTag = {
         'list': {

ng2-components/ng2-alfresco-tag/src/components/tag-node-list.component.spec.ts

@@ -28,7 +28,7 @@ import { TagService } from '../services/tag.service';
 
 declare let jasmine: any;
 
-describe('Tag relative node list', () => {
+describe('Test ng2-alfresco-tag Tag relative node list', () => {
 
 
     let dataTag = {

ng2-components/ng2-alfresco-viewer/karma-test-shim.js

@@ -54,18 +54,8 @@ var map = {
     'ng2-translate': 'npm:ng2-translate',
 
     'alfresco-js-api': 'npm:alfresco-js-api/dist',
-    'ng2-activiti-form': 'npm:ng2-activiti-form/dist',
-    'ng2-activiti-processlist': 'npm:ng2-activiti-processlist/dist',
-    'ng2-activiti-tasklist': 'npm:ng2-activiti-tasklist/dist',
     'ng2-alfresco-core': 'npm:ng2-alfresco-core/dist',
-    'ng2-alfresco-datatable': 'npm:ng2-alfresco-datatable/dist',
-    'ng2-alfresco-documentlist': 'npm:ng2-alfresco-documentlist/dist',
-    'ng2-alfresco-login': 'npm:ng2-alfresco-login/dist',
-    'ng2-alfresco-search': 'npm:ng2-alfresco-search/dist',
-    'ng2-alfresco-tag': 'npm:ng2-alfresco-tag/dist',
-    'ng2-alfresco-upload': 'npm:ng2-alfresco-upload/dist',
     'ng2-alfresco-viewer': 'npm:ng2-alfresco-viewer/dist',
-    'ng2-alfresco-webscript': 'npm:ng2-alfresco-webscript/dist'
 };
 
 var packages = {
@@ -74,18 +64,8 @@ var packages = {
     'ng2-translate': { defaultExtension: 'js' },
 
     'alfresco-js-api': { main: './alfresco-js-api.js', defaultExtension: 'js'},
-    'ng2-activiti-form': { main: './index.js', defaultExtension: 'js'},
-    'ng2-activiti-processlist': { main: './index.js', defaultExtension: 'js'},
-    'ng2-activiti-tasklist': { main: './index.js', defaultExtension: 'js'},
     'ng2-alfresco-core': { main: './index.js', defaultExtension: 'js'},
-    'ng2-alfresco-datatable': { main: './index.js', defaultExtension: 'js'},
+    'ng2-alfresco-viewer': { main: './index.js', defaultExtension: 'js'}
-    'ng2-alfresco-documentlist': { main: './index.js', defaultExtension: 'js'},
-    'ng2-alfresco-login': { main: './index.js', defaultExtension: 'js'},
-    'ng2-alfresco-search': { main: './index.js', defaultExtension: 'js'},
-    'ng2-alfresco-tag': { main: './index.js', defaultExtension: 'js'},
-    'ng2-alfresco-upload': { main: './index.js', defaultExtension: 'js'},
-    'ng2-alfresco-viewer': { main: './index.js', defaultExtension: 'js'},
-    'ng2-alfresco-webscript': { main: './index.js', defaultExtension: 'js'}
 };
 
 var config = {

ng2-components/ng2-alfresco-viewer/karma.conf.js

@@ -44,18 +44,14 @@ module.exports = function (config) {
       {pattern: 'dist/**/*.css', included: true, served: true, watched: true},
 
       // ng2-components
-      { pattern: 'node_modules/ng2-activiti-form/dist/**/*.js', included: false, served: true, watched: false },
-      { pattern: 'node_modules/ng2-activiti-processlist/dist/**/*.js', included: false, served: true, watched: false },
-      { pattern: 'node_modules/ng2-activiti-tasklist/dist/**/*.js', included: false, served: true, watched: false },
       { pattern: 'node_modules/ng2-alfresco-core/dist/**/*.js', included: false, served: true, watched: false },
-      { pattern: 'node_modules/ng2-alfresco-datatable/dist/**/*.js', included: false, served: true, watched: false },
-      { pattern: 'node_modules/ng2-alfresco-documentlist/dist/**/*.js', included: false, served: true, watched: false },
-      { pattern: 'node_modules/ng2-alfresco-login/dist/**/*.js', included: false, served: true, watched: false },
-      { pattern: 'node_modules/ng2-alfresco-search/dist/**/*.js', included: false, served: true, watched: false },
-      { pattern: 'node_modules/ng2-alfresco-tag/dist/**/*.js', included: false, served: true, watched: false },
-      { pattern: 'node_modules/ng2-alfresco-upload/dist/**/*.js', included: false, served: true, watched: false },
       { pattern: 'node_modules/ng2-alfresco-viewer/dist/**/*.js', included: false, served: true, watched: false },
-      { pattern: 'node_modules/ng2-alfresco-webscript/dist/**/*.js', included: false, served: true, watched: false },
+
+      // pdf-js
+      { pattern: 'node_modules/pdfjs-dist/build/pdf.js', included: true, watched: false },
+      { pattern: 'node_modules/pdfjs-dist/build/pdf.worker.js', included: true, watched: false },
+      { pattern: 'node_modules/pdfjs-dist/web/pdf_viewer.js', included: true, watched: false },
+      { pattern: 'src/assets/fake-test-file.pdf', included: false, watched: true, served: true },
 
       // paths to support debugging with source maps in dev tools
       {pattern: 'src/**/*.ts', included: false, watched: false},

ng2-components/ng2-alfresco-viewer/package.json

@@ -55,12 +55,12 @@
     "@angular/platform-browser-dynamic": "2.0.0",
     "@angular/router": "3.0.0",
     "@angular/upgrade": "2.0.0",
+    "@types/node": "^6.0.42",
     "core-js": "^2.4.1",
     "reflect-metadata": "^0.1.3",
     "rxjs": "5.0.0-beta.12",
     "systemjs": "0.19.27",
     "zone.js": "^0.6.23",
-
     "ng2-translate": "2.5.0",
     "alfresco-js-api": "^0.3.0",
     "ng2-alfresco-core": "0.3.2",

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

@@ -15,24 +15,46 @@
  * limitations under the License.
  */
 
-/*
+import { ComponentFixture, TestBed, async } from '@angular/core/testing';
-import { TestComponentBuilder } from '@angular/compiler/testing';
 import { ImgViewerComponent } from './imgViewer.component';
+import { DebugElement }    from '@angular/core';
+import {
+    AlfrescoAuthenticationService,
+    AlfrescoSettingsService,
+    AlfrescoApiService,
+    CoreModule
+} from 'ng2-alfresco-core';
 
-describe('Img viewer component ', () => {
+describe('Test ng2-alfresco-viewer Img viewer component ', () => {
 
-    let imgViewerComponentFixture, element, component;
+    let component: any;
+    let fixture: ComponentFixture<ImgViewerComponent>;
+    let debug: DebugElement;
+    let element: HTMLElement;
 
-    beforeEach(inject([TestComponentBuilder], (tcb: TestComponentBuilder) => {
+    beforeEach(async(() => {
-        return tcb
+        TestBed.configureTestingModule({
-            .createAsync(ImgViewerComponent)
+            imports: [
-            .then(fixture => {
+                CoreModule
-                imgViewerComponentFixture = fixture;
+            ],
-                element = fixture.nativeElement;
+            declarations: [ImgViewerComponent],
-                component = fixture.componentInstance;
+            providers: [
-            });
+                AlfrescoSettingsService,
+                AlfrescoAuthenticationService,
+                AlfrescoApiService
+            ]
+        }).compileComponents();
     }));
 
+    beforeEach(() => {
+        fixture = TestBed.createComponent(ImgViewerComponent);
+
+        debug = fixture.debugElement;
+        element = fixture.nativeElement;
+        component = fixture.componentInstance;
+        fixture.detectChanges();
+    });
+
     it('If no url is passed should thrown an error', () => {
         expect(() => {
             component.ngOnChanges();
@@ -48,8 +70,8 @@ describe('Img viewer component ', () => {
 
     it('The file Name should be present in the alt attribute', () => {
         component.nameFile = 'fake-name';
-        imgViewerComponentFixture.detectChanges();
+        fixture.detectChanges();
         expect(element.querySelector('#viewer-image').getAttribute('alt')).toEqual('fake-name');
     });
 });
-*/
+

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

@@ -17,10 +17,8 @@
 
 import { Component, Input } from '@angular/core';
 
-declare let __moduleName: string;
-
 @Component({
-    moduleId: __moduleName,
+    moduleId: module.id,
     selector: 'img-viewer',
     templateUrl: './imgViewer.component.html',
     styleUrls: ['./imgViewer.component.css']

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

@@ -15,24 +15,46 @@
  * limitations under the License.
  */
 
-/*
+import { ComponentFixture, TestBed, async } from '@angular/core/testing';
-import { TestComponentBuilder } from '@angular/compiler/testing';
 import { MediaPlayerComponent } from './mediaPlayer.component';
+import { DebugElement }    from '@angular/core';
+import {
+    AlfrescoAuthenticationService,
+    AlfrescoSettingsService,
+    AlfrescoApiService,
+    CoreModule
+} from 'ng2-alfresco-core';
 
-describe('Media player component ', () => {
+describe('Test ng2-alfresco-viewer Media player component ', () => {
 
-    let mediaPlayerComponentFixture, element, component;
+    let component: any;
+    let fixture: ComponentFixture<MediaPlayerComponent>;
+    let debug: DebugElement;
+    let element: HTMLElement;
 
-    beforeEach(inject([TestComponentBuilder], (tcb: TestComponentBuilder) => {
+    beforeEach(async(() => {
-        return tcb
+        TestBed.configureTestingModule({
-            .createAsync(MediaPlayerComponent)
+            imports: [
-            .then(fixture => {
+                CoreModule
-                mediaPlayerComponentFixture = fixture;
+            ],
-                element = fixture.nativeElement;
+            declarations: [MediaPlayerComponent],
-                component = fixture.componentInstance;
+            providers: [
-            });
+                AlfrescoSettingsService,
+                AlfrescoAuthenticationService,
+                AlfrescoApiService
+            ]
+        }).compileComponents();
     }));
 
+    beforeEach(() => {
+        fixture = TestBed.createComponent(MediaPlayerComponent);
+
+        debug = fixture.debugElement;
+        element = fixture.nativeElement;
+        component = fixture.componentInstance;
+        fixture.detectChanges();
+    });
+
     it('If no url is passed should thrown an error', () => {
         expect(() => {
             component.ngOnChanges();
@@ -53,4 +75,3 @@ describe('Media player component ', () => {
         }).not.toThrow(new Error('Attribute urlFile is required'));
     });
 });
-*/

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

@@ -16,10 +16,9 @@
  */
 
 import { Component, Input } from '@angular/core';
-declare let __moduleName: string;
 
 @Component({
-    moduleId: __moduleName,
+    moduleId: module.id,
     selector: 'media-player',
     templateUrl: './mediaPlayer.component.html',
     styleUrls: ['./mediaPlayer.component.css']

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

@@ -15,25 +15,46 @@
  * limitations under the License.
  */
 
-/*
+import { ComponentFixture, TestBed, async } from '@angular/core/testing';
-import { TestComponentBuilder } from '@angular/compiler/testing';
 import { NotSupportedFormat } from './notSupportedFormat.component';
+import { DebugElement }    from '@angular/core';
+import {
+    AlfrescoAuthenticationService,
+    AlfrescoSettingsService,
+    AlfrescoApiService,
+    CoreModule
+} from 'ng2-alfresco-core';
 
-describe('Not Supported Format View', () => {
+describe('Test ng2-alfresco-viewer Not Supported Format View component', () => {
 
-    let notSupportedFixture, element, component;
+    let component: any;
+    let fixture: ComponentFixture<NotSupportedFormat>;
+    let debug: DebugElement;
+    let element: HTMLElement;
 
-    beforeEach(inject([TestComponentBuilder], (tcb: TestComponentBuilder) => {
+    beforeEach(async(() => {
-        return tcb
+        TestBed.configureTestingModule({
-            .createAsync(NotSupportedFormat)
+            imports: [
-            .then(fixture => {
+                CoreModule
-                notSupportedFixture = fixture;
+            ],
-                element = fixture.nativeElement;
+            declarations: [NotSupportedFormat],
-                component = fixture.componentInstance;
+            providers: [
-                fixture.detectChanges();
+                AlfrescoSettingsService,
-            });
+                AlfrescoAuthenticationService,
+                AlfrescoApiService
+            ]
+        }).compileComponents();
     }));
 
+    beforeEach(() => {
+        fixture = TestBed.createComponent(NotSupportedFormat);
+
+        debug = fixture.debugElement;
+        element = fixture.nativeElement;
+        component = fixture.componentInstance;
+        fixture.detectChanges();
+    });
+
     describe('View', () => {
 
         it('Download button should be present', () => {
@@ -42,7 +63,7 @@ describe('Not Supported Format View', () => {
 
         it('should display the name of the file', () => {
             component.nameFile = 'Example Content.xls';
-            notSupportedFixture.detectChanges();
+            fixture.detectChanges();
             expect(element.querySelector('h4 span').innerHTML).toEqual('Example Content.xls');
         });
     });
@@ -51,11 +72,10 @@ describe('Not Supported Format View', () => {
         it('Click on Download button should call download method', () => {
             spyOn(window, 'open');
 
-            let downloadButton = element.querySelector('#viewer-download-button');
+            let downloadButton: any = element.querySelector('#viewer-download-button');
             downloadButton.click();
 
             expect(window.open).toHaveBeenCalled();
         });
     });
 });
-*/

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

@@ -17,10 +17,8 @@
 
 import { Component, Input } from '@angular/core';
 
-declare let __moduleName: string;
-
 @Component({
-    moduleId: __moduleName,
+    moduleId: module.id,
     selector: 'not-supported-format',
     templateUrl: './notSupportedFormat.component.html',
     styleUrls: ['./notSupportedFormat.component.css']

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

@@ -15,42 +15,55 @@
  * limitations under the License.
  */
 
-/*
-import { beforeEachProviders } from '@angular/core/testing';
-import { TestComponentBuilder } from '@angular/compiler/testing';
-import { RenderingQueueServices } from '../services/rendering-queue.services';
 
+import { ComponentFixture, TestBed, async } from '@angular/core/testing';
+import { RenderingQueueServices } from '../services/rendering-queue.services';
 import { PdfViewerComponent } from './pdfViewer.component';
 import { EventMock } from '../assets/event.mock';
+import { DebugElement }    from '@angular/core';
+import {
+    AlfrescoAuthenticationService,
+    AlfrescoSettingsService,
+    AlfrescoApiService,
+    CoreModule
+} from 'ng2-alfresco-core';
 
-import { AlfrescoAuthenticationService, AlfrescoSettingsService } from 'ng2-alfresco-core';
+describe('Test ng2-alfresco-viewer PdfViewer component', () => {
 
-describe('PdfViewer', () => {
+    let component: any;
+    let fixture: ComponentFixture<PdfViewerComponent>;
+    let debug: DebugElement;
+    let element: HTMLElement;
 
-    let pdfComponentFixture, element, component;
+    beforeEach(async(() => {
-
+        TestBed.configureTestingModule({
-    beforeEachProviders(() => {
+            imports: [
-        return [
+                CoreModule
-            AlfrescoSettingsService,
+            ],
-            AlfrescoAuthenticationService,
+            declarations: [PdfViewerComponent],
-            RenderingQueueServices
+            providers: [
-        ];
+                AlfrescoSettingsService,
-    });
+                AlfrescoAuthenticationService,
-
+                AlfrescoApiService,
-    beforeEach(inject([TestComponentBuilder], (tcb: TestComponentBuilder) => {
+                RenderingQueueServices
-        return tcb
+            ]
-            .createAsync(PdfViewerComponent)
+        }).compileComponents();
-            .then(fixture => {
-                pdfComponentFixture = fixture;
-                element = fixture.nativeElement;
-                component = fixture.componentInstance;
-
-                component.showToolbar = true;
-                component.urlFile = 'base/src/assets/fake-test-file.pdf';
-                pdfComponentFixture.detectChanges();
-            });
     }));
 
+    beforeEach(() => {
+        fixture = TestBed.createComponent(PdfViewerComponent);
+
+        debug = fixture.debugElement;
+        element = fixture.nativeElement;
+        component = fixture.componentInstance;
+
+        component.showToolbar = true;
+        component.urlFile = 'base/src/assets/fake-test-file.pdf';
+        fixture.detectChanges();
+
+        fixture.detectChanges();
+    });
+
     describe('View', () => {
         it('Canvas should be present', () => {
             expect(element.querySelector('#viewer-viewerPdf')).not.toBeNull();
@@ -58,20 +71,20 @@ describe('PdfViewer', () => {
         });
 
         it('Loader should be present', () => {
-            pdfComponentFixture.detectChanges();
+            fixture.detectChanges();
 
             expect(element.querySelector('#loader-container')).not.toBeNull();
         });
 
         it('Next an Previous Buttons should be present', () => {
-            pdfComponentFixture.detectChanges();
+            fixture.detectChanges();
 
             expect(element.querySelector('#viewer-previous-page-button')).not.toBeNull();
             expect(element.querySelector('#viewer-next-page-button')).not.toBeNull();
         });
 
         it('Input Page elements should be present', () => {
-            pdfComponentFixture.detectChanges();
+            fixture.detectChanges();
 
             expect(element.querySelector('#viewer-pagenumber-input')).toBeDefined();
             expect(element.querySelector('#viewer-total-pages')).toBeDefined();
@@ -83,7 +96,7 @@ describe('PdfViewer', () => {
         it('Toolbar should be hide if showToolbar is false', () => {
             component.showToolbar = false;
 
-            pdfComponentFixture.detectChanges();
+            fixture.detectChanges();
 
             expect(element.querySelector('#viewer-toolbar-command')).toBeNull();
             expect(element.querySelector('#viewer-toolbar-pagination')).toBeNull();
@@ -98,7 +111,7 @@ describe('PdfViewer', () => {
 
         xit('Total number of pages should be loaded', (done) => {
             component.ngOnChanges().then(() => {
-                pdfComponentFixture.detectChanges();
+                fixture.detectChanges();
                 expect(component.totalPages).toEqual(4);
                 done();
             });
@@ -106,23 +119,23 @@ describe('PdfViewer', () => {
 
         it('right arrow should move to the next page', (done) => {
             component.ngOnChanges().then(() => {
-                pdfComponentFixture.detectChanges();
+                fixture.detectChanges();
                 expect(component.displayPage).toBe(1);
                 EventMock.keyDown(39);
-                pdfComponentFixture.detectChanges();
+                fixture.detectChanges();
                 expect(component.displayPage).toBe(2);
                 done();
             });
         }, 5000);
 
         it('nextPage should move to the next page', (done) => {
-            let nextPageButton = element.querySelector('#viewer-next-page-button');
+            let nextPageButton: any = element.querySelector('#viewer-next-page-button');
 
             component.ngOnChanges().then(() => {
-                pdfComponentFixture.detectChanges();
+                fixture.detectChanges();
                 expect(component.displayPage).toBe(1);
                 nextPageButton.click();
-                pdfComponentFixture.detectChanges();
+                fixture.detectChanges();
                 expect(component.displayPage).toBe(2);
                 done();
             });
@@ -130,28 +143,28 @@ describe('PdfViewer', () => {
 
         it('left arrow should move to the previous page', (done) => {
             component.ngOnChanges().then(() => {
-                pdfComponentFixture.detectChanges();
+                fixture.detectChanges();
                 expect(component.displayPage).toBe(1);
                 EventMock.keyDown(39);
                 EventMock.keyDown(39);
                 EventMock.keyDown(37);
-                pdfComponentFixture.detectChanges();
+                fixture.detectChanges();
                 expect(component.displayPage).toBe(2);
                 done();
             });
         });
 
         it('previous page should move to the previous page', (done) => {
-            let previousPageButton = element.querySelector('#viewer-previous-page-button');
+            let previousPageButton: any = element.querySelector('#viewer-previous-page-button');
-            let nextPageButton = element.querySelector('#viewer-next-page-button');
+            let nextPageButton: any = element.querySelector('#viewer-next-page-button');
 
             component.ngOnChanges().then(() => {
-                pdfComponentFixture.detectChanges();
+                fixture.detectChanges();
                 expect(component.displayPage).toBe(1);
                 nextPageButton.click();
                 nextPageButton.click();
                 previousPageButton.click();
-                pdfComponentFixture.detectChanges();
+                fixture.detectChanges();
                 expect(component.displayPage).toBe(2);
                 done();
             });
@@ -159,10 +172,10 @@ describe('PdfViewer', () => {
 
         it('previous page should not move to the previous page if is page 1', (done) => {
             component.ngOnChanges().then(() => {
-                pdfComponentFixture.detectChanges();
+                fixture.detectChanges();
                 expect(component.displayPage).toBe(1);
                 component.previousPage();
-                pdfComponentFixture.detectChanges();
+                fixture.detectChanges();
                 expect(component.displayPage).toBe(1);
                 done();
             });
@@ -170,10 +183,10 @@ describe('PdfViewer', () => {
 
         it('Input page should move to the inserted page', (done) => {
             component.ngOnChanges().then(() => {
-                pdfComponentFixture.detectChanges();
+                fixture.detectChanges();
                 expect(component.displayPage).toBe(1);
                 component.inputPage('2');
-                pdfComponentFixture.detectChanges();
+                fixture.detectChanges();
                 expect(component.displayPage).toBe(2);
                 done();
             });
@@ -183,22 +196,24 @@ describe('PdfViewer', () => {
 
             beforeEach(() => {
                 component.currentScale = 1;
-                pdfComponentFixture.detectChanges();
+                fixture.detectChanges();
             });
 
             it('In should increment the scale value', (done) => {
-                let zoomInButton = element.querySelector('#viewer-zoom-in-button');
+                let zoomInButton: any = element.querySelector('#viewer-zoom-in-button');
 
                 component.ngOnChanges().then(() => {
+                    let zoomBefore = component.currentScale;
                     zoomInButton.click();
                     expect(component.currentScaleMode).toBe('auto');
-                    expect(component.currentScale).toBe(0.9);
+                    let currentZoom = component.currentScale;
+                    expect(zoomBefore < currentZoom).toBe(true);
                     done();
                 });
             });
 
             it('Out should decrement the scale value', (done) => {
-                let zoomOutButton = element.querySelector('#viewer-zoom-out-button');
+                let zoomOutButton: any = element.querySelector('#viewer-zoom-out-button');
 
                 component.ngOnChanges().then(() => {
                     let zoomBefore = component.currentScale;
@@ -211,7 +226,7 @@ describe('PdfViewer', () => {
             });
 
             it('fit-in button should toggle page-fit and auto scale mode', (done) => {
-                let fitPage = element.querySelector('#viewer-scale-page-button');
+                let fitPage: any = element.querySelector('#viewer-scale-page-button');
 
                 component.ngOnChanges().then(() => {
                     expect(component.currentScaleMode).toBe('auto');
@@ -228,7 +243,7 @@ describe('PdfViewer', () => {
     describe('Resize interaction', () => {
         xit('resize event should trigger setScaleUpdatePages', (done) => {
             component.ngOnChanges().then(() => {
-                pdfComponentFixture.detectChanges();
+                fixture.detectChanges();
                 spyOn(component, 'onResize');
                 component.documentContainer = element.querySelector('#viewer-pdf-container');
                 EventMock.resizeMobileView();
@@ -241,19 +256,19 @@ describe('PdfViewer', () => {
     describe('scroll interaction', () => {
         xit('scroll page should return the current page', (done) => {
             component.ngOnChanges().then(() => {
-                pdfComponentFixture.detectChanges();
+                fixture.detectChanges();
                 expect(component.displayPage).toBe(1);
                 component.inputPage('2');
-                pdfComponentFixture.detectChanges();
+                fixture.detectChanges();
                 expect(component.displayPage).toBe(2);
                 let documentContainer = element.querySelector('#viewer-pdf-container');
                 documentContainer.scrollTop = 100000;
                 component.watchScroll(documentContainer);
-                pdfComponentFixture.detectChanges();
+                fixture.detectChanges();
                 expect(component.displayPage).toBe(4);
                 done();
             });
         });
     });
 });
-*/
+

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

@@ -19,10 +19,9 @@ import { Component, Input, HostListener } from '@angular/core';
 import { RenderingQueueServices } from '../services/rendering-queue.services';
 
 declare let PDFJS: any;
-declare let __moduleName: string;
 
 @Component({
-    moduleId: __moduleName,
+    moduleId: module.id,
     selector: 'pdf-viewer',
     templateUrl: './pdfViewer.component.html',
     styleUrls: ['./pdfViewer.component.css', './pdfViewerHost.component.css'],

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

@@ -6,8 +6,7 @@
     <div id="viewer-main-container" class="all-space" [ngClass]="{'viewer-overlay-view': overlayMode }">
 
         <!-- Start Layout -->
-        <div mdl
+        <div [ngClass]="{'mdl-layout mdl-js-layout mdl-layout--fixed-header': overlayMode, 'all-space': !overlayMode}">
-             [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">

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

@@ -15,56 +15,68 @@
  * limitations under the License.
  */
 
-describe('ViewerComponent', () => {
+import { ComponentFixture, TestBed, async } from '@angular/core/testing';
-    it('should be upgraded', () => {
+import { PdfViewerComponent } from './pdfViewer.component';
-        expect(true).toBe(true);
+import { NotSupportedFormat } from './notSupportedFormat.component';
-    });
+import { MediaPlayerComponent } from './mediaPlayer.component';
-});
+import { ImgViewerComponent } from './imgViewer.component';
-
+import { RenderingQueueServices } from '../services/rendering-queue.services';
-/*
-import { beforeEachProviders } from '@angular/core/testing';
-import { TestComponentBuilder } from '@angular/compiler/testing';
 import { ViewerComponent } from './viewer.component';
 import { EventMock } from '../assets/event.mock';
-import { AlfrescoAuthenticationService, AlfrescoSettingsService, AlfrescoApiService } from 'ng2-alfresco-core';
+import { DebugElement }    from '@angular/core';
-import { RenderingQueueServices } from '../services/rendering-queue.services';
+import {
+    AlfrescoAuthenticationService,
+    AlfrescoSettingsService,
+    AlfrescoApiService,
+    CoreModule
+} from 'ng2-alfresco-core';
 
-declare let AlfrescoApi: any;
+declare let jasmine: any;
 
-describe('ViewerComponent', () => {
+describe('Test ng2-alfresco-viewer ViewerComponent', () => {
 
-    let viewerComponentFixture, element, component;
+    let component: any;
-    let apiService: AlfrescoApiService;
+    let fixture: ComponentFixture<ViewerComponent>;
+    let debug: DebugElement;
+    let element: HTMLElement;
 
-    beforeEachProviders(() => {
+    beforeEach(async(() => {
-        return [
+        TestBed.configureTestingModule({
-            AlfrescoApiService,
+            imports: [
-            AlfrescoSettingsService,
+                CoreModule
-            AlfrescoAuthenticationService,
+            ],
-            RenderingQueueServices
+            declarations: [
-        ];
+                ViewerComponent,
-    });
+                PdfViewerComponent,
-
+                NotSupportedFormat,
-    beforeEach(inject([TestComponentBuilder, AlfrescoApiService], (tcb: TestComponentBuilder, api: AlfrescoApiService) => {
+                MediaPlayerComponent,
-        apiService = api;
+                ImgViewerComponent
-        apiService.setInstance(new AlfrescoApi({}));
+            ],
-
+            providers: [
-        return tcb
+                AlfrescoSettingsService,
-            .createAsync(ViewerComponent)
+                AlfrescoAuthenticationService,
-            .then(fixture => {
+                AlfrescoApiService,
-                viewerComponentFixture = fixture;
+                RenderingQueueServices
-                element = viewerComponentFixture.nativeElement;
+            ]
-                component = viewerComponentFixture.componentInstance;
+        }).compileComponents();
-
-                jasmine.Ajax.install();
-
-                component.urlFile = 'base/src/assets/fake-test-file.pdf';
-                component.overlayMode = true;
-
-                viewerComponentFixture.detectChanges();
-            });
     }));
 
+    beforeEach(() => {
+        fixture = TestBed.createComponent(ViewerComponent);
+
+        debug = fixture.debugElement;
+        element = fixture.nativeElement;
+        component = fixture.componentInstance;
+
+        jasmine.Ajax.install();
+
+        component.showToolbar = true;
+        component.urlFile = 'base/src/assets/fake-test-file.pdf';
+        fixture.detectChanges();
+
+        fixture.detectChanges();
+    });
+
     afterEach(() => {
         jasmine.Ajax.uninstall();
     });
@@ -75,7 +87,7 @@ describe('ViewerComponent', () => {
 
             beforeEach(() => {
                 component.overlayMode = true;
-                viewerComponentFixture.detectChanges();
+                fixture.detectChanges();
             });
 
             it('shadow overlay should be present if is overlay mode', () => {
@@ -88,7 +100,7 @@ describe('ViewerComponent', () => {
 
             it('Name File should be present if is overlay mode ', () => {
                 component.ngOnChanges().then(() => {
-                    viewerComponentFixture.detectChanges();
+                    fixture.detectChanges();
                     expect(element.querySelector('#viewer-name-file').innerHTML).toEqual('fake-test-file.pdf');
                 });
             });
@@ -98,19 +110,20 @@ describe('ViewerComponent', () => {
             });
 
             it('Click on close button should hide the viewer', () => {
-                element.querySelector('#viewer-close-button').click();
+                let closebutton: any = element.querySelector('#viewer-close-button');
-                viewerComponentFixture.detectChanges();
+                closebutton.click();
+                fixture.detectChanges();
                 expect(element.querySelector('#viewer-main-container')).toBeNull();
             });
 
             it('Esc button should hide the viewer', () => {
                 EventMock.keyDown(27);
-                viewerComponentFixture.detectChanges();
+                fixture.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();
+                expect(element.querySelector('#viewer').getAttribute('class')).toEqual('');
             });
         });
 
@@ -118,7 +131,7 @@ describe('ViewerComponent', () => {
 
             beforeEach(() => {
                 component.overlayMode = false;
-                viewerComponentFixture.detectChanges();
+                fixture.detectChanges();
             });
 
             it('header should be NOT be present if is not overlay mode', () => {
@@ -131,7 +144,7 @@ describe('ViewerComponent', () => {
 
             it('Esc button should not  hide the viewer if is not overlay mode', () => {
                 EventMock.keyDown(27);
-                viewerComponentFixture.detectChanges();
+                fixture.detectChanges();
                 expect(element.querySelector('#viewer-main-container')).not.toBeNull();
             });
 
@@ -171,18 +184,6 @@ describe('ViewerComponent', () => {
             }).not.toThrow();
         });
 
-        it('If FileNodeId is present the node api should be called', () => {
-            component.showViewer = true;
-            component.fileNodeId = 'file-node-id';
-            component.urlFile = undefined;
-
-            let alfrescoApi = apiService.getInstance();
-            spyOn(alfrescoApi.nodes, 'getNodeInfo').and.stub();
-
-            component.ngOnChanges();
-            expect(alfrescoApi.nodes.getNodeInfo).toHaveBeenCalledWith(component.fileNodeId);
-        });
-
         it('showViewer default value should be true', () => {
             expect(component.showViewer).toBe(true);
         });
@@ -190,7 +191,7 @@ describe('ViewerComponent', () => {
         it('if showViewer value is false the viewer should be hide', () => {
             component.showViewer = false;
 
-            viewerComponentFixture.detectChanges();
+            fixture.detectChanges();
             expect(element.querySelector('#viewer-main-container')).toBeNull();
         });
     });
@@ -200,7 +201,7 @@ describe('ViewerComponent', () => {
             component.urlFile = 'base/src/assets/fake-test-file.pdf';
 
             component.ngOnChanges().then(() => {
-                viewerComponentFixture.detectChanges();
+                fixture.detectChanges();
                 expect(element.querySelector('pdf-viewer')).not.toBeNull();
                 done();
             });
@@ -210,7 +211,7 @@ describe('ViewerComponent', () => {
             component.urlFile = 'fake-url-file.png';
 
             component.ngOnChanges().then(() => {
-                viewerComponentFixture.detectChanges();
+                fixture.detectChanges();
                 expect(element.querySelector('#viewer-image')).not.toBeNull();
                 done();
             });
@@ -220,7 +221,7 @@ describe('ViewerComponent', () => {
             component.urlFile = 'fake-url-file.mp4';
 
             component.ngOnChanges().then(() => {
-                viewerComponentFixture.detectChanges();
+                fixture.detectChanges();
                 expect(element.querySelector('media-player')).not.toBeNull();
                 done();
             });
@@ -230,7 +231,7 @@ describe('ViewerComponent', () => {
             component.urlFile = 'fake-url-file.unsupported';
 
             component.ngOnChanges().then(() => {
-                viewerComponentFixture.detectChanges();
+                fixture.detectChanges();
                 expect(element.querySelector('not-supported-format')).not.toBeNull();
                 done();
             });
@@ -243,7 +244,7 @@ describe('ViewerComponent', () => {
             component.mimeType = 'application/pdf';
 
             component.ngOnChanges().then(() => {
-                viewerComponentFixture.detectChanges();
+                fixture.detectChanges();
                 expect(element.querySelector('pdf-viewer')).not.toBeNull();
                 done();
             });
@@ -255,7 +256,7 @@ describe('ViewerComponent', () => {
             component.mimeType = 'application/pdf';
 
             component.ngOnChanges().then(() => {
-                viewerComponentFixture.detectChanges();
+                fixture.detectChanges();
                 expect(element.querySelector('pdf-viewer')).not.toBeNull();
                 done();
             });
@@ -266,7 +267,7 @@ describe('ViewerComponent', () => {
             component.mimeType = 'image/png';
 
             component.ngOnChanges().then(() => {
-                viewerComponentFixture.detectChanges();
+                fixture.detectChanges();
                 expect(element.querySelector('#viewer-image')).not.toBeNull();
                 done();
             });
@@ -277,7 +278,7 @@ describe('ViewerComponent', () => {
             component.mimeType = 'image/png';
 
             component.ngOnChanges().then(() => {
-                viewerComponentFixture.detectChanges();
+                fixture.detectChanges();
                 expect(element.querySelector('#viewer-image')).not.toBeNull();
                 done();
             });
@@ -288,8 +289,7 @@ describe('ViewerComponent', () => {
             component.mimeType = 'video/mp4';
 
             component.ngOnChanges().then(() => {
-                viewerComponentFixture.detectChanges();
+                fixture.detectChanges();
-                console.log(element.querySelector('media-player'));
                 expect(element.querySelector('media-player')).not.toBeNull();
                 done();
             });
@@ -300,7 +300,7 @@ describe('ViewerComponent', () => {
             component.mimeType = 'video/mp4';
 
             component.ngOnChanges().then(() => {
-                viewerComponentFixture.detectChanges();
+                fixture.detectChanges();
                 expect(element.querySelector('media-player')).not.toBeNull();
                 done();
             });
@@ -311,11 +311,10 @@ describe('ViewerComponent', () => {
             component.mimeType = 'video/avi';
 
             component.ngOnChanges().then(() => {
-                viewerComponentFixture.detectChanges();
+                fixture.detectChanges();
                 expect(element.querySelector('media-player')).toBeNull();
                 done();
             });
         });
     });
 });
-*/

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

@@ -20,10 +20,8 @@ import { DOCUMENT } from '@angular/platform-browser';
 import { MinimalNodeEntryEntity } from 'alfresco-js-api';
 import { AlfrescoApiService } from 'ng2-alfresco-core';
 
-declare let __moduleName: string;
-
 @Component({
-    moduleId: __moduleName,
+    moduleId: module.id,
     selector: 'alfresco-viewer',
     templateUrl: './viewer.component.html',
     styleUrls: ['./viewer.component.css']

ng2-components/ng2-alfresco-viewer/src/services/rendering-queue.services.spec.ts

@@ -15,27 +15,27 @@
  * limitations under the License.
  */
 
-/*
+import { ReflectiveInjector } from '@angular/core';
-import { it, describe, inject, beforeEach, beforeEachProviders, expect } from '@angular/core/testing';
 import { RenderingQueueServices } from './rendering-queue.services';
 
+declare let jasmine: any;
 
 describe('RenderingQueueServices', () => {
 
-    let service;
+    let service, injector;
 
-    beforeEachProviders(() => {
+    beforeEach(() => {
-        return [
+        injector = ReflectiveInjector.resolveAndCreate([
             RenderingQueueServices
-        ];
+        ]);
     });
 
-    beforeEach(inject([RenderingQueueServices], (renderingQueueServices: RenderingQueueServices) => {
+    beforeEach(() => {
-        service = renderingQueueServices;
+        service = injector.get(RenderingQueueServices);
-    }));
+    });
 
     it('Simple import example', () => {
         expect(service.CLEANUP_TIMEOUT).toEqual(30000);
     });
 });
-*/
+

ng2-components/ng2-alfresco-viewer/tsconfig.json

@@ -1,7 +1,7 @@
 {
     "compilerOptions": {
         "target": "es5",
-        "module": "system",
+        "module": "commonjs",
         "moduleResolution": "node",
         "emitDecoratorMetadata": true,
         "experimentalDecorators": true,
@@ -16,7 +16,7 @@
         "noImplicitUseStrict": false,
         "noFallthroughCasesInSwitch": true,
         "outDir": "dist",
-        "types": ["core-js", "jasmine"]
+        "types": ["core-js", "jasmine", "node"]
     },
     "exclude": [
         "demo",