#68 PDFJS Mock and test

demo-shell-ng2/app/components/viewer/viewer.component.html

@@ -1,3 +1,3 @@
-<alfresco-viewer [urlFile]="'http://192.168.99.100:8080/share/proxy/alfresco/slingshot/node/content/workspace/SpacesStore/f7d0ef02-24ca-46e5-a05a-37d7d878142a/Energy_Bill_20May16.pdf'">
+<alfresco-viewer [urlFile]="(hrefFile)">
     <div class="mdl-spinner mdl-js-spinner is-active"></div>
 </alfresco-viewer>

demo-shell-ng2/app/components/viewer/viewer.component.ts

@@ -27,7 +27,22 @@ declare let __moduleName: string;
     directives: [VIEWERCOMPONENT]
 })
 export class ViewerFileComponent {
+
+    hrefFile: string;
+
     constructor() {
         console.log('constructor');
+        let host = 'http://192.168.99.100:8080/';
+        let nameFile = 'Energy_Bill_20May16.pdf';
+        let workSpace = 'workspace/SpacesStore/01f144c6-bd6f-43ed-8b92-e417ad629467/';
+        this.hrefFile = host + 'alfresco/s/slingshot/node/content/' + workSpace + nameFile + '?alf_ticket=' + this.getAlfrescoTicket();
+    }
+
+    /**
+     * Get the token from the local storage
+     * @returns {any}
+     */
+    private getAlfrescoTicket(): string {
+        return localStorage.getItem('token');
     }
 }

ng2-components/ng2-alfresco-viewer/src/assets/PDFJS.mock.ts

@@ -0,0 +1,34 @@
+/*!
+ * @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.
+ */
+
+
+export class PDFJSmock {
+
+    getFilenameFromUrl(url: string) {
+        return 'fake-name';
+    }
+
+    getDocument(url: string) {
+        return new Promise((resolve) => {
+            resolve({numPages: '10'});
+        });
+    }
+
+    getPage(numberPage: number) {
+        console.log('getPage ${numberPage}');
+    }
+}

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

@@ -29,3 +29,10 @@
 #viewer-pagenumber-input {
     width: 30px;
 }
+
+.viewer-name-file {
+    width: 20%;
+    height: 18px;
+    overflow: hidden !important;
+    text-overflow: ellipsis;
+}

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

@@ -6,7 +6,7 @@
             <div class="mdl-layout__header-row">
 
                 <!-- File Title -->
-                <span class="mdl-layout-title">{{urlFile}}</span>
+                <span  id="viewer-name-file" class="mdl-layout-title viewer-name-file">{{nameFile}}</span>
 
                 <!-- pagination toolbar start -->
                 <div id="viewer-toolbar-pagination">

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

@@ -15,14 +15,16 @@
  * limitations under the License.
  */
 
-import {describe, expect, it, injectAsync, TestComponentBuilder, setBaseTestProviders} from 'angular2/testing';
+import { describe, expect, it, injectAsync, TestComponentBuilder, setBaseTestProviders, beforeEach } from 'angular2/testing';
-import {TEST_BROWSER_PLATFORM_PROVIDERS, TEST_BROWSER_APPLICATION_PROVIDERS} from 'angular2/platform/testing/browser';
+import { TEST_BROWSER_PLATFORM_PROVIDERS, TEST_BROWSER_APPLICATION_PROVIDERS } from 'angular2/platform/testing/browser';
-import {ViewerComponent} from './viewer.component';
+import { ViewerComponent } from './viewer.component';
+import { PDFJSmock } from './assets/PDFJS.mock';
 
 describe('Ng2-alfresco-viewer', () => {
     setBaseTestProviders(TEST_BROWSER_PLATFORM_PROVIDERS, TEST_BROWSER_APPLICATION_PROVIDERS);
 
     describe('View', () => {
+
         it('Next an Previous Buttons have to be present', injectAsync([TestComponentBuilder], (tcb: TestComponentBuilder) => {
             return tcb
                 .createAsync(ViewerComponent)
@@ -52,8 +54,27 @@ describe('Ng2-alfresco-viewer', () => {
                 .then((fixture) => {
                     let element = fixture.nativeElement;
                     let component = fixture.componentInstance;
-                    component.totalPages = 10;
+                    spyOn(component, 'getPDFJS').and.returnValue(new PDFJSmock());
-                    expect(element.querySelector('#viewer-total-pages').innerHTML()).toEqual('10');
+
+                    component.ngOnInit().then((resolve) => {
+                        fixture.detectChanges();
+                        expect(element.querySelector('#viewer-total-pages').innerHTML).toEqual('/10');
+
+                        resolve();
+                    });
+                });
+        }));
+
+        it('Name File should be showed', injectAsync([TestComponentBuilder], (tcb: TestComponentBuilder) => {
+            return tcb
+                .createAsync(ViewerComponent)
+                .then((fixture) => {
+                    let element = fixture.nativeElement;
+                    let component = fixture.componentInstance;
+                    spyOn(component, 'getPDFJS').and.returnValue(new PDFJSmock());
+
+                    fixture.detectChanges();
+                    expect(element.querySelector('#viewer-name-file').innerHTML).toEqual('fake-name');
                 });
         }));
     });

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

@@ -41,9 +41,9 @@ export class ViewerComponent {
     ngOnInit() {
         console.log('urlFile ' + this.urlFile);
 
-        this.nameFile = PDFJS.getFilenameFromUrl(this.urlFile);
+        this.nameFile = this.getPDFJS().getFilenameFromUrl(this.urlFile);
 
-        PDFJS.getDocument(this.urlFile).then((pdf) => {
+        return this.getPDFJS().getDocument(this.urlFile).then((pdf) => {
             this.currentPdf = pdf;
             this.totalPages = pdf.numPages;
             this.currentPage = 1;
@@ -52,6 +52,10 @@ export class ViewerComponent {
         });
     }
 
+    getPDFJS() {
+        return PDFJS;
+    }
+
     loadPage(pdf: any, numberPage: number) {
         pdf.getPage(numberPage).then((page) => {
 
@@ -59,7 +63,6 @@ export class ViewerComponent {
 
             let scale = 1.5;
             let viewport = page.getViewport(scale);
-
             let canvas: any = document.getElementById('viewer-the-canvas');
 
             if (canvas) {