test fixed

lib/content-services/src/lib/viewer/components/alfresco-viewer.component.html

@@ -183,7 +183,6 @@
                 [viewerType]="viewerType"
                 [fileName]="fileName"
                 [isLoading]="isLoading"
-                [allowGoBack]="allowGoBack"
                 [urlFile]="urlFileContent"
                 [tracks]="tracks"
                 [readOnly]="readOnly">

lib/content-services/src/lib/viewer/components/alfresco-viewer.component.spec.ts

@@ -0,0 +1,946 @@
+/*!
+ * @license
+ * Copyright 2019 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 { Location } from '@angular/common';
+import { SpyLocation } from '@angular/common/testing';
+import { ComponentFixture, fakeAsync, TestBed, tick } from '@angular/core/testing';
+
+import { TranslateModule } from '@ngx-translate/core';
+import { MatDialog } from '@angular/material/dialog';
+import { NoopAnimationsModule } from '@angular/platform-browser/animations';
+import { AppExtensionService, ViewerExtensionRef } from '@alfresco/adf-extensions';
+import { MatButtonModule } from '@angular/material/button';
+import { MatIconModule } from '@angular/material/icon';
+import { NodeEntry, VersionEntry } from "@alfresco/js-api";
+import { AlfrescoViewerComponent, RenditionViewerService } from "@alfresco/adf-content-services";
+import {
+    AlfrescoApiService,
+    CoreTestingModule,
+    setupTestBed,
+    EventMock,
+    FileModel, UploadService
+} from "@alfresco/adf-core";
+import { throwError } from "rxjs";
+import { Component } from '@angular/core';
+
+@Component({
+    selector: 'adf-viewer-container-toolbar',
+    template: `
+        <adf-alfresco-viewer>
+            <adf-viewer-toolbar>
+                <div class="custom-toolbar-element"></div>
+            </adf-viewer-toolbar>
+        </adf-alfresco-viewer>
+    `
+})
+class ViewerWithCustomToolbarComponent {
+}
+
+@Component({
+    selector: 'adf-viewer-container-toolbar-actions',
+    template: `
+        <adf-alfresco-viewer>
+            <adf-viewer-toolbar-actions>
+                <button mat-icon-button id="custom-button">
+                    <mat-icon>alarm</mat-icon>
+                </button>
+            </adf-viewer-toolbar-actions>
+        </adf-alfresco-viewer>
+    `
+})
+class ViewerWithCustomToolbarActionsComponent {
+}
+
+@Component({
+    selector: 'adf-viewer-container-sidebar',
+    template: `
+        <adf-alfresco-viewer>
+            <adf-viewer-sidebar>
+                <div class="custom-sidebar"></div>
+            </adf-viewer-sidebar>
+        </adf-alfresco-viewer>
+    `
+})
+class ViewerWithCustomSidebarComponent {
+}
+
+@Component({
+    selector: 'adf-dialog-dummy',
+    template: ``
+})
+class DummyDialogComponent {
+}
+
+@Component({
+    selector: 'adf-viewer-container-open-with',
+    template: `
+        <adf-viewer>
+            <adf-viewer-open-with>
+                <button mat-menu-item>
+                    <mat-icon>dialpad</mat-icon>
+                    <span>Option 1</span>
+                </button>
+                <button mat-menu-item disabled>
+                    <mat-icon>voicemail</mat-icon>
+                    <span>Option 2</span>
+                </button>
+                <button mat-menu-item>
+                    <mat-icon>notifications_off</mat-icon>
+                    <span>Option 3</span>
+                </button>
+            </adf-viewer-open-with>
+        </adf-viewer>
+    `
+})
+class ViewerWithCustomOpenWithComponent {
+}
+
+@Component({
+    selector: 'adf-viewer-container-more-actions',
+    template: `
+        <adf-viewer>
+            <adf-viewer-more-actions>
+                <button mat-menu-item>
+                    <mat-icon>dialpad</mat-icon>
+                    <span>Action One</span>
+                </button>
+                <button mat-menu-item disabled>
+                    <mat-icon>voicemail</mat-icon>
+                    <span>Action Two</span>
+                </button>
+                <button mat-menu-item>
+                    <mat-icon>notifications_off</mat-icon>
+                    <span>Action Three</span>
+                </button>
+            </adf-viewer-more-actions>
+        </adf-viewer>
+    `
+})
+class ViewerWithCustomMoreActionsComponent {
+}
+
+
+describe('AlfrescoViewerComponent', () => {
+
+    let component: AlfrescoViewerComponent;
+    let fixture: ComponentFixture<AlfrescoViewerComponent>;
+    let element: HTMLElement;
+
+    let alfrescoApiService: AlfrescoApiService;
+    let dialog: MatDialog;
+    let uploadService: UploadService;
+    let extensionService: AppExtensionService;
+
+    setupTestBed({
+        imports: [
+            NoopAnimationsModule,
+            TranslateModule.forRoot(),
+            CoreTestingModule,
+            MatButtonModule,
+            MatIconModule
+        ],
+        declarations: [
+            ViewerWithCustomToolbarComponent,
+            ViewerWithCustomSidebarComponent,
+            ViewerWithCustomOpenWithComponent,
+            ViewerWithCustomMoreActionsComponent,
+            ViewerWithCustomToolbarActionsComponent
+        ],
+        providers: [
+            {
+                provide: RenditionViewerService, useValue: {
+                    getNodeRendition: () => throwError('thrown')
+                }
+            },
+            {provide: Location, useClass: SpyLocation},
+            MatDialog
+        ]
+    });
+
+    beforeEach(() => {
+        fixture = TestBed.createComponent(AlfrescoViewerComponent);
+        element = fixture.nativeElement;
+        component = fixture.componentInstance;
+
+        console.log(element);
+        console.log(component);
+        uploadService = TestBed.inject(UploadService);
+        alfrescoApiService = TestBed.inject(AlfrescoApiService);
+        dialog = TestBed.inject(MatDialog);
+        extensionService = TestBed.inject(AppExtensionService);
+    });
+
+    afterEach(() => {
+        fixture.destroy();
+    });
+
+
+    describe('Extension Type Test', () => {
+
+
+        it('should use external viewer to display node by id', fakeAsync(() => {
+            const extension: ViewerExtensionRef = {
+                component: 'custom.component',
+                id: 'custom.component.id',
+                fileExtension: '*'
+            };
+            spyOn(extensionService, 'getViewerExtensions').and.returnValue([extension]);
+
+            fixture = TestBed.createComponent(AlfrescoViewerComponent);
+            element = fixture.nativeElement;
+            component = fixture.componentInstance;
+
+            spyOn(component.nodesApi, 'getNode').and.callFake(() => Promise.resolve(new NodeEntry({entry: {}})));
+
+            component.nodeId = '37f7f34d-4e64-4db6-bb3f-5c89f7844251';
+            component.ngOnChanges();
+
+            fixture.detectChanges();
+            tick(100);
+
+            expect(component.nodesApi.getNode).toHaveBeenCalled();
+            expect(component.viewerType).toBe('external');
+            expect(component.isLoading).toBeFalsy();
+            expect(element.querySelector('[data-automation-id="custom.component"]')).not.toBeNull();
+        }));
+
+
+    });
+
+    describe('MimeType handling', () => {
+
+        it('should node without content show unkonwn', (done) => {
+            const displayName = 'the-name';
+            const contentUrl = '/content/url/path';
+
+            component.nodeId = '12';
+            spyOn(component['nodesApi'], 'getNode').and.returnValue(Promise.resolve(new NodeEntry({
+                entry: {content: {name: displayName, id: '12'}}
+            })));
+
+            spyOn(component['contentApi'], 'getContentUrl').and.returnValue(contentUrl);
+
+            component.ngOnChanges();
+            fixture.whenStable().then(() => {
+                fixture.detectChanges();
+                expect(element.querySelector('adf-viewer-unknown-format')).toBeDefined();
+                done();
+            });
+        });
+    });
+
+    it('should change display name every time node changes', fakeAsync(() => {
+        spyOn(component['nodesApi'], 'getNode').and.returnValues(
+            Promise.resolve(new NodeEntry({entry: {name: 'file1', content: {}}})),
+            Promise.resolve(new NodeEntry({entry: {name: 'file2', content: {}}}))
+        );
+
+        component.showViewer = true;
+
+        component.nodeId = 'id1';
+        component.ngOnChanges();
+        tick();
+
+        expect(component.fileName).toBe('file1');
+
+        component.nodeId = 'id2';
+        component.ngOnChanges();
+        tick();
+
+        expect(component.fileName).toBe('file2');
+    }));
+
+    it('should append version of the file to the file content URL', fakeAsync(() => {
+        spyOn(component['nodesApi'], 'getNode').and.returnValue(
+            Promise.resolve(new NodeEntry({
+                entry: {
+                    name: 'file1.pdf',
+                    content: {},
+                    properties: {'cm:versionLabel': '10'}
+                }
+            }))
+        );
+        spyOn(component['versionsApi'], 'getVersion').and.returnValue(Promise.resolve(undefined));
+
+        component.nodeId = 'id1';
+        component.showViewer = true;
+
+        component.versionId = null;
+        component.ngOnChanges();
+        tick();
+
+        expect(component.fileName).toBe('file1.pdf');
+        expect(component.urlFileContent).toContain('/public/alfresco/versions/1/nodes/id1/content?attachment=false&10');
+    }));
+
+    it('should change display name every time node\`s version changes', fakeAsync(() => {
+        spyOn(component['nodesApi'], 'getNode').and.returnValue(
+            Promise.resolve(new NodeEntry({entry: {name: 'node1', content: {}}}))
+        );
+
+        spyOn(component['versionsApi'], 'getVersion').and.returnValues(
+            Promise.resolve(new VersionEntry({entry: {name: 'file1', content: {}}})),
+            Promise.resolve(new VersionEntry({entry: {name: 'file2', content: {}}}))
+        );
+
+        component.nodeId = 'id1';
+        component.showViewer = true;
+
+        component.versionId = '1.0';
+        component.ngOnChanges();
+        tick();
+
+        expect(component.fileName).toBe('file1');
+
+        component.versionId = '1.1';
+        component.ngOnChanges();
+        tick();
+
+        expect(component.fileName).toBe('file2');
+    }));
+
+    it('should update node only if node name changed', fakeAsync(() => {
+        spyOn(component['nodesApi'], 'getNode').and.returnValues(
+            Promise.resolve(new NodeEntry({entry: {name: 'file1', content: {}}}))
+        );
+
+        component.showViewer = true;
+
+        component.nodeId = 'id1';
+        fixture.detectChanges();
+        component.ngOnChanges();
+        tick();
+
+        expect(component.fileName).toBe('file1');
+
+        alfrescoApiService.nodeUpdated.next({id: 'id1', name: 'file2'} as any);
+        fixture.detectChanges();
+        expect(component.fileName).toBe('file2');
+
+        alfrescoApiService.nodeUpdated.next({id: 'id1', name: 'file3'} as any);
+        fixture.detectChanges();
+        expect(component.fileName).toBe('file3');
+
+        alfrescoApiService.nodeUpdated.next({id: 'id2', name: 'file4'} as any);
+        fixture.detectChanges();
+        expect(component.fileName).toBe('file3');
+        expect(component.nodeId).toBe('id1');
+    }));
+
+    describe('Viewer Example Component Rendering', () => {
+
+        it('should use custom toolbar', (done) => {
+            const customFixture = TestBed.createComponent(ViewerWithCustomToolbarComponent);
+            const customElement: HTMLElement = customFixture.nativeElement;
+
+            customFixture.detectChanges();
+            fixture.whenStable().then(() => {
+                expect(customElement.querySelector('.custom-toolbar-element')).toBeDefined();
+                done();
+            });
+        });
+
+        it('should use custom toolbar actions', (done) => {
+            const customFixture = TestBed.createComponent(ViewerWithCustomToolbarActionsComponent);
+            const customElement: HTMLElement = customFixture.nativeElement;
+
+            customFixture.detectChanges();
+            fixture.whenStable().then(() => {
+                expect(customElement.querySelector('#custom-button')).toBeDefined();
+                done();
+            });
+        });
+
+        it('should use custom info drawer', (done) => {
+            const customFixture = TestBed.createComponent(ViewerWithCustomSidebarComponent);
+            const customElement: HTMLElement = customFixture.nativeElement;
+
+            customFixture.detectChanges();
+
+            fixture.whenStable().then(() => {
+                expect(customElement.querySelector('.custom-info-drawer-element')).toBeDefined();
+                done();
+            });
+        });
+
+        it('should use custom open with menu', (done) => {
+            const customFixture = TestBed.createComponent(ViewerWithCustomOpenWithComponent);
+            const customElement: HTMLElement = customFixture.nativeElement;
+
+            customFixture.detectChanges();
+
+            fixture.whenStable().then(() => {
+                expect(customElement.querySelector('.adf-viewer-container-open-with')).toBeDefined();
+                done();
+            });
+        });
+
+        it('should use custom more actions menu', (done) => {
+            const customFixture = TestBed.createComponent(ViewerWithCustomMoreActionsComponent);
+            const customElement: HTMLElement = customFixture.nativeElement;
+
+            customFixture.detectChanges();
+
+            fixture.whenStable().then(() => {
+                expect(customElement.querySelector('.adf-viewer-container-more-actions')).toBeDefined();
+                done();
+            });
+
+        });
+    });
+
+    describe('error handling', () => {
+
+        it('should show unknown view when node file not found', (done) => {
+            spyOn(component['nodesApi'], 'getNode')
+                .and.returnValue(Promise.reject({}));
+
+            component.nodeId = 'the-node-id-of-the-file-to-preview';
+            component.mimeType = null;
+
+            component.ngOnChanges();
+            fixture.whenStable().then(() => {
+                fixture.detectChanges();
+                expect(element.querySelector('adf-viewer-unknown-format')).not.toBeNull();
+                done();
+            });
+        });
+
+        it('should show unknown view when sharedLink file not found', (done) => {
+            spyOn(component['sharedLinksApi'], 'getSharedLink')
+                .and.returnValue(Promise.reject({}));
+
+            component.sharedLinkId = 'the-Shared-Link-id';
+            component.mimeType = null;
+            component.nodeId = null;
+
+            component.ngOnChanges();
+            fixture.whenStable().then(() => {
+                fixture.detectChanges();
+                expect(element.querySelector('adf-viewer-unknown-format')).not.toBeNull();
+                done();
+            });
+
+        });
+
+        it('should raise an event when the shared link is invalid', fakeAsync(() => {
+            spyOn(component['sharedLinksApi'], 'getSharedLink')
+                .and.returnValue(Promise.reject({}));
+
+            component.sharedLinkId = 'the-Shared-Link-id';
+            component.mimeType = null;
+            component.nodeId = null;
+
+            component.invalidSharedLink.subscribe((emittedValue) => {
+                expect(emittedValue).toBeUndefined();
+            });
+
+            component.ngOnChanges();
+        }));
+//
+    });
+
+    describe('Toolbar', () => {
+
+        it('should show only next file button', async () => {
+            component.allowNavigate = true;
+            component.canNavigateBefore = false;
+            component.canNavigateNext = true;
+
+            fixture.detectChanges();
+            await fixture.whenStable();
+
+            const nextButton = element.querySelector<HTMLButtonElement>('[data-automation-id="adf-toolbar-next-file"]');
+            expect(nextButton).not.toBeNull();
+
+            const prevButton = element.querySelector<HTMLButtonElement>('[data-automation-id="adf-toolbar-pref-file"]');
+            expect(prevButton).toBeNull();
+        });
+
+        it('should provide tooltip for next file button', async () => {
+            component.allowNavigate = true;
+            component.canNavigateBefore = false;
+            component.canNavigateNext = true;
+
+            fixture.detectChanges();
+            await fixture.whenStable();
+
+            const nextButton = element.querySelector<HTMLButtonElement>('[data-automation-id="adf-toolbar-next-file"]');
+            expect(nextButton.title).toBe('ADF_VIEWER.ACTIONS.NEXT_FILE');
+        });
+
+        it('should show only previous file button', async () => {
+            component.allowNavigate = true;
+            component.canNavigateBefore = true;
+            component.canNavigateNext = false;
+
+            fixture.detectChanges();
+            await fixture.whenStable();
+
+            const nextButton = element.querySelector<HTMLButtonElement>('[data-automation-id="adf-toolbar-next-file"]');
+            expect(nextButton).toBeNull();
+
+            const prevButton = element.querySelector<HTMLButtonElement>('[data-automation-id="adf-toolbar-pref-file"]');
+            expect(prevButton).not.toBeNull();
+        });
+
+        it('should provide tooltip for the previous file button', async () => {
+            component.allowNavigate = true;
+            component.canNavigateBefore = true;
+            component.canNavigateNext = false;
+
+            fixture.detectChanges();
+            await fixture.whenStable();
+
+            const prevButton = element.querySelector<HTMLButtonElement>('[data-automation-id="adf-toolbar-pref-file"]');
+            expect(prevButton.title).toBe('ADF_VIEWER.ACTIONS.PREV_FILE');
+        });
+
+        it('should show both file navigation buttons', async () => {
+            component.allowNavigate = true;
+            component.canNavigateBefore = true;
+            component.canNavigateNext = true;
+
+            fixture.detectChanges();
+            await fixture.whenStable();
+
+            const nextButton = element.querySelector<HTMLButtonElement>('[data-automation-id="adf-toolbar-next-file"]');
+            expect(nextButton).not.toBeNull();
+
+            const prevButton = element.querySelector<HTMLButtonElement>('[data-automation-id="adf-toolbar-pref-file"]');
+            expect(prevButton).not.toBeNull();
+        });
+
+        it('should not show navigation buttons', async () => {
+            component.allowNavigate = false;
+
+            fixture.detectChanges();
+            await fixture.whenStable();
+
+            const nextButton = element.querySelector<HTMLButtonElement>('[data-automation-id="adf-toolbar-next-file"]');
+            expect(nextButton).toBeNull();
+
+            const prevButton = element.querySelector<HTMLButtonElement>('[data-automation-id="adf-toolbar-pref-file"]');
+            expect(prevButton).toBeNull();
+        });
+
+        it('should now show navigation buttons even if navigation enabled', async () => {
+            component.allowNavigate = true;
+            component.canNavigateBefore = false;
+            component.canNavigateNext = false;
+
+            fixture.detectChanges();
+            await fixture.whenStable();
+
+            const nextButton = element.querySelector<HTMLButtonElement>('[data-automation-id="adf-toolbar-next-file"]');
+            expect(nextButton).toBeNull();
+
+            const prevButton = element.querySelector<HTMLButtonElement>('[data-automation-id="adf-toolbar-pref-file"]');
+            expect(prevButton).toBeNull();
+        });
+
+        it('should render fullscreen button', () => {
+            expect(element.querySelector('[data-automation-id="adf-toolbar-fullscreen"]')).toBeDefined();
+        });
+
+        it('should render default download button', (done) => {
+            component.allowDownload = true;
+
+            fixture.whenStable().then(() => {
+                expect(element.querySelector('[data-automation-id="adf-toolbar-download"]')).toBeDefined();
+                done();
+            });
+        });
+
+        it('should not render default download button', (done) => {
+            component.allowDownload = false;
+            fixture.detectChanges();
+
+            fixture.whenStable().then(() => {
+                expect(element.querySelector('[data-automation-id="adf-toolbar-download"]')).toBeNull();
+                done();
+            });
+        });
+
+        it('should render default print button', (done) => {
+            component.allowPrint = true;
+            fixture.detectChanges();
+
+            fixture.whenStable().then(() => {
+                expect(element.querySelector('[data-automation-id="adf-toolbar-print"]')).toBeDefined();
+                done();
+            });
+        });
+
+        it('should not render default print button', (done) => {
+            component.allowPrint = false;
+            fixture.detectChanges();
+
+            fixture.whenStable().then(() => {
+                expect(element.querySelector('[data-automation-id="adf-toolbar-print"]')).toBeNull();
+                done();
+            });
+        });
+
+        it('should invoke print action with the toolbar button', (done) => {
+            component.allowPrint = true;
+            fixture.detectChanges();
+
+            spyOn(component, 'onPrintContent').and.stub();
+
+            const button: HTMLButtonElement = element.querySelector('[data-automation-id="adf-toolbar-print"]') as HTMLButtonElement;
+            button.click();
+
+            fixture.whenStable().then(() => {
+                expect(component.onPrintContent).toHaveBeenCalled();
+                done();
+            });
+        });
+
+        it('should get and assign node for download', (done) => {
+            component.nodeId = '12';
+            const displayName = 'the-name';
+            const nodeDetails = {
+                entry: {name: displayName, id: '12', content: {mimeType: 'txt'}}
+            };
+
+            const contentUrl = '/content/url/path';
+
+            const node = new NodeEntry(nodeDetails);
+
+            spyOn(component['nodesApi'], 'getNode').and.returnValue(Promise.resolve(node));
+            spyOn(component['contentApi'], 'getContentUrl').and.returnValue(contentUrl);
+
+            component.ngOnChanges();
+            fixture.whenStable().then(() => {
+                fixture.detectChanges();
+                expect(component.nodeEntry).toBe(node);
+                done();
+            });
+        });
+
+        it('should render close viewer button if it is not a shared link', (done) => {
+            fixture.detectChanges();
+            fixture.whenStable().then(() => {
+                fixture.detectChanges();
+                expect(element.querySelector('[data-automation-id="adf-toolbar-back"]')).toBeDefined();
+                expect(element.querySelector('[data-automation-id="adf-toolbar-back"]')).not.toBeNull();
+                done();
+            });
+        });
+
+        it('should not render close viewer button if it is a shared link', (done) => {
+            spyOn(component['sharedLinksApi'], 'getSharedLink')
+                .and.returnValue(Promise.reject({}));
+
+            component.sharedLinkId = 'the-Shared-Link-id';
+            component.mimeType = null;
+
+            component.ngOnChanges();
+            fixture.whenStable().then(() => {
+                fixture.detectChanges();
+                expect(element.querySelector('[data-automation-id="adf-toolbar-back"]')).toBeNull();
+                done();
+            });
+        });
+
+    });
+
+    describe('Base component', () => {
+
+        beforeEach(() => {
+            component.mimeType = 'application/pdf';
+            component.nodeId = 'id1';
+
+            fixture.detectChanges();
+        });
+
+        describe('SideBar Test', () => {
+
+            it('should NOT display sidebar if is not allowed', (done) => {
+                component.showRightSidebar = true;
+                component.allowRightSidebar = false;
+                fixture.detectChanges();
+
+                fixture.whenStable().then(() => {
+                    const sidebar = element.querySelector('#adf-right-sidebar');
+                    expect(sidebar).toBeNull();
+                    done();
+                });
+            });
+
+            it('should display sidebar on the right side', (done) => {
+                component.allowRightSidebar = true;
+                component.showRightSidebar = true;
+                fixture.detectChanges();
+
+                fixture.whenStable().then(() => {
+                    const sidebar = element.querySelector('#adf-right-sidebar');
+                    expect(getComputedStyle(sidebar).order).toEqual('4');
+                    done();
+                });
+            });
+
+            it('should NOT display left sidebar if is not allowed', (done) => {
+                component.showLeftSidebar = true;
+                component.allowLeftSidebar = false;
+                fixture.detectChanges();
+
+                fixture.whenStable().then(() => {
+                    const sidebar = element.querySelector('#adf-left-sidebar');
+                    expect(sidebar).toBeNull();
+                    done();
+                });
+
+            });
+
+            it('should display sidebar on the left side', (done) => {
+                component.allowLeftSidebar = true;
+                component.showLeftSidebar = true;
+                fixture.detectChanges();
+
+                fixture.whenStable().then(() => {
+                    const sidebar = element.querySelector('#adf-left-sidebar');
+                    expect(getComputedStyle(sidebar).order).toEqual('1');
+                    done();
+                });
+            });
+        });
+
+        describe('View', () => {
+
+            describe('Overlay mode true', () => {
+
+                beforeEach(() => {
+                    component.overlayMode = true;
+                    component.fileName = 'fake-test-file.pdf';
+                    fixture.detectChanges();
+                });
+
+                it('should header be present if is overlay mode', () => {
+                    expect(element.querySelector('.adf-alfresco-viewer-toolbar')).not.toBeNull();
+                });
+
+                it('should Name File be present if is overlay mode ', (done) => {
+                    component.ngOnChanges();
+                    fixture.detectChanges();
+                    fixture.whenStable().then(() => {
+                        fixture.detectChanges();
+                        expect(element.querySelector('#adf-alfresco-viewer-display-name').textContent).toEqual('fake-test-file.pdf');
+                        done();
+                    });
+                });
+
+                it('should Close button be present if overlay mode', (done) => {
+                    fixture.detectChanges();
+                    fixture.whenStable().then(() => {
+                        fixture.detectChanges();
+                        expect(element.querySelector('.adf-alfresco-viewer-close-button')).not.toBeNull();
+                        done();
+                    });
+                });
+
+                it('should Click on close button hide the viewer', (done) => {
+                    const closeButton: any = element.querySelector('.adf-alfresco-viewer-close-button');
+                    closeButton.click();
+                    fixture.detectChanges();
+
+                    fixture.whenStable().then(() => {
+                        expect(element.querySelector('.adf-alfresco-viewer-content')).toBeNull();
+                        done();
+                    });
+                });
+
+                it('should Esc button hide the viewer', (done) => {
+                    EventMock.keyDown(27);
+
+                    fixture.detectChanges();
+
+                    fixture.whenStable().then(() => {
+                        expect(element.querySelector('.adf-alfresco-viewer-content')).toBeNull();
+                        done();
+                    });
+                });
+
+                it('should not close the viewer on Escape event if dialog was opened', (done) => {
+                    const event = new KeyboardEvent('keydown', {
+                        bubbles: true,
+                        keyCode: 27
+                    } as KeyboardEventInit);
+
+                    const dialogRef = dialog.open(DummyDialogComponent);
+
+                    dialogRef.afterClosed().subscribe(() => {
+                        document.body.dispatchEvent(event);
+                        fixture.detectChanges();
+                        expect(element.querySelector('.adf-alfresco-viewer-content')).toBeNull();
+                        done();
+                    });
+
+                    fixture.detectChanges();
+
+                    document.body.dispatchEvent(event);
+                    fixture.detectChanges();
+                    expect(element.querySelector('.adf-alfresco-viewer-content')).not.toBeNull();
+                });
+            });
+
+            describe('Overlay mode false', () => {
+
+                beforeEach(() => {
+                    component.overlayMode = false;
+                    fixture.detectChanges();
+                });
+
+                it('should Esc button not hide the viewer if is not overlay mode', (done) => {
+                    EventMock.keyDown(27);
+
+                    fixture.detectChanges();
+
+                    fixture.whenStable().then(() => {
+                        expect(element.querySelector('.adf-alfresco-viewer-content')).not.toBeNull();
+                        done();
+                    });
+                });
+            });
+        });
+
+        describe('Attribute', () => {
+
+            it('should FileNodeId present not thrown any error ', () => {
+                component.showViewer = true;
+                component.nodeId = 'file-node-id';
+
+                expect(() => {
+                    component.ngOnChanges();
+                }).not.toThrow();
+            });
+
+
+            it('should showViewer default value  be true', () => {
+                expect(component.showViewer).toBe(true);
+            });
+
+            it('should viewer be hide if showViewer value is false', () => {
+                component.showViewer = false;
+
+                fixture.detectChanges();
+                expect(element.querySelector('.adf-alfresco-viewer-content')).toBeNull();
+            });
+        });
+
+        describe('Events', () => {
+
+            it('should update version when emitted by image-viewer and user has update permissions', () => {
+                spyOn(uploadService, 'uploadFilesInTheQueue').and.callFake(() => {
+                });
+                spyOn(uploadService, 'addToQueue');
+                component.readOnly = false;
+                component.nodeEntry = new NodeEntry({
+                    entry: {
+                        name: 'fakeImage.png',
+                        id: '12',
+                        content: {mimeType: 'img/png'}
+                    }
+                });
+                const data = atob('iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR42mNk+M9QDwADhgGAWjR9awAAAABJRU5ErkJggg==');
+                const fakeBlob = new Blob([data], {type: 'image/png'});
+                const newImageFile: File = new File([fakeBlob], component?.nodeEntry?.entry?.name, {type: component?.nodeEntry?.entry?.content?.mimeType});
+                const newFile = new FileModel(
+                    newImageFile,
+                    {
+                        majorVersion: false,
+                        newVersion: true,
+                        parentId: component?.nodeEntry?.entry?.parentId,
+                        nodeType: component?.nodeEntry?.entry?.content?.mimeType
+                    },
+                    component.nodeEntry.entry?.id
+                );
+                component.onSubmitFile(fakeBlob);
+                fixture.detectChanges();
+
+                expect(uploadService.addToQueue).toHaveBeenCalledWith(...[newFile]);
+                expect(uploadService.uploadFilesInTheQueue).toHaveBeenCalled();
+            });
+
+            it('should not update version when emitted by image-viewer and user doesn`t have update permissions', () => {
+                spyOn(uploadService, 'uploadFilesInTheQueue').and.callFake(() => {
+                });
+                component.readOnly = true;
+                component.nodeEntry = new NodeEntry({
+                    entry: {
+                        name: 'fakeImage.png',
+                        id: '12',
+                        content: {mimeType: 'img/png'}
+                    }
+                });
+                const data = atob('iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR42mNk+M9QDwADhgGAWjR9awAAAABJRU5ErkJggg==');
+                const fakeBlob = new Blob([data], {type: 'image/png'});
+                component.onSubmitFile(fakeBlob);
+                fixture.detectChanges();
+
+                expect(uploadService.uploadFilesInTheQueue).not.toHaveBeenCalled();
+            });
+        });
+
+        describe('Viewer component - Full Screen Mode - Mocking fixture element', () => {
+
+            beforeEach(() => {
+                fixture = TestBed.createComponent(AlfrescoViewerComponent);
+                element = fixture.nativeElement;
+                component = fixture.componentInstance;
+
+                component.showToolbar = true;
+                component.nodeId = 'fake-node-id';
+                component.mimeType = 'application/pdf';
+                fixture.detectChanges();
+            });
+
+            it('should use standard mode', () => {
+                const domElement = jasmine.createSpyObj('el', ['requestFullscreen']);
+                spyOn(fixture.nativeElement, 'querySelector').and.returnValue(domElement);
+
+                component.enterFullScreen();
+                expect(domElement.requestFullscreen).toHaveBeenCalled();
+            });
+
+            it('should use webkit prefix', () => {
+                const domElement = jasmine.createSpyObj('el', ['webkitRequestFullscreen']);
+                spyOn(fixture.nativeElement, 'querySelector').and.returnValue(domElement);
+
+                component.enterFullScreen();
+                expect(domElement.webkitRequestFullscreen).toHaveBeenCalled();
+            });
+
+            it('should use moz prefix', () => {
+                const domElement = jasmine.createSpyObj('el', ['mozRequestFullScreen']);
+                spyOn(fixture.nativeElement, 'querySelector').and.returnValue(domElement);
+
+                component.enterFullScreen();
+                expect(domElement.mozRequestFullScreen).toHaveBeenCalled();
+            });
+
+            it('should use ms prefix', () => {
+                const domElement = jasmine.createSpyObj('el', ['msRequestFullscreen']);
+                spyOn(fixture.nativeElement, 'querySelector').and.returnValue(domElement);
+
+                component.enterFullScreen();
+                expect(domElement.msRequestFullscreen).toHaveBeenCalled();
+            });
+        });
+    });
+});

lib/content-services/src/lib/viewer/components/alfresco-viewer.component.ts

@@ -178,7 +178,7 @@ export class AlfrescoViewerComponent {
     private keyDown$ = fromEvent<KeyboardEvent>(document, 'keydown');
 
     private cacheBusterNumber: number;
-    private closeViewer: any;
+    private closeViewer = true;
 
     versionEntry: VersionEntry;
     isLoading: boolean;
@@ -289,6 +289,7 @@ export class AlfrescoViewerComponent {
             this.isLoading = false;
             this.logService.error('This sharedLink does not exist');
             this.invalidSharedLink.next();
+            this.viewerType = 'invalid-link';
         }
     }
 
@@ -418,7 +419,7 @@ export class AlfrescoViewerComponent {
     onPrintContent(event: MouseEvent) {
         if (this.allowPrint) {
             if (!event.defaultPrevented) {
-                this.viewUtilService.printFileGeneric(this.nodeId, this.mimeType);
+                this.renditionViewerService.printFileGeneric(this.nodeId, this.mimeType);
             }
         }
     }

lib/content-services/src/lib/viewer/services/rendition-viewer.service.ts

@@ -24,6 +24,8 @@ import { AlfrescoApiService , LogService, Track,TranslationService } from '@alfr
 })
 export class RenditionViewerService {
 
+    static TARGET = '_new';
+
     /**
      * Content groups based on categorization of files that can be viewed in the web browser. This
      * implementation or grouping is tied to the definition the ng component: ViewerRenderComponent
@@ -282,4 +284,53 @@ export class RenditionViewerService {
 
         return rendition?.entry?.status?.toString() === 'CREATED' || false;
     }
+
+    /**
+     * This method takes a url to trigger the print dialog against, and the type of artifact that it
+     * is.
+     * This URL should be one that can be rendered in the browser, for example PDF, Image, or Text
+     */
+    printFile(url: string, type: string): void {
+        const pwa = window.open(url, RenditionViewerService.TARGET);
+        if (pwa) {
+            // Because of the way chrome focus and close image window vs. pdf preview window
+            if (type === RenditionViewerService.ContentGroup.IMAGE) {
+                pwa.onfocus = () => {
+                    setTimeout(() => {
+                        pwa.close();
+                    }, 500);
+                };
+            }
+
+            pwa.onload = () => {
+                pwa.print();
+            };
+        }
+    }
+
+    /**
+     * Launch the File Print dialog from anywhere other than the preview service, which resolves the
+     * rendition of the object that can be printed from a web browser.
+     * These are: images, PDF files, or PDF rendition of files.
+     * We also force PDF rendition for TEXT type objects, otherwise the default URL is to download.
+     * TODO there are different TEXT type objects, (HTML, plaintext, xml, etc. we should determine how these are handled)
+     */
+    printFileGeneric(objectId: string, mimeType: string): void {
+        const nodeId = objectId;
+        const type: string = this.getViewerTypeByMimeType(mimeType);
+
+        this.getRendition(nodeId, RenditionViewerService.ContentGroup.PDF)
+            .then((value) => {
+                const url: string = this.getRenditionUrl(nodeId, type, (!!value));
+                const printType = (type === RenditionViewerService.ContentGroup.PDF
+                    || type === RenditionViewerService.ContentGroup.TEXT)
+                    ? RenditionViewerService.ContentGroup.PDF : type;
+                this.printFile(url, printType);
+            })
+            .catch((err) => {
+                this.logService.error('Error with Printing');
+                this.logService.error(err);
+            });
+    }
+
 }

lib/core/src/lib/viewer/components/img-viewer.component.spec.ts

@@ -138,7 +138,7 @@ describe('Test Img viewer component ', () => {
         });
 
         it('The file Name should be present in the alt attribute', () => {
-            component.nameFile = 'fake-name';
+            component.fileName = 'fake-name';
             fixture.detectChanges();
             expect(element.querySelector('#viewer-image').getAttribute('alt')).toEqual('fake-name');
         });

lib/core/src/lib/viewer/components/viewer-render.component.html

@@ -23,7 +23,7 @@
      fxFlexOrder="1"
      fxFlex="1 1 auto">
     <div class="adf-viewer-render-layout-content adf-viewer__fullscreen-container">
-        <div class="adf-viewer-render-content-container" [ngSwitch]="viewerType">
+        <div class="adf-viewer-render-content-container" [ngSwitch]="internalViewerType">
             <ng-container *ngSwitchCase="'external'">
                 <adf-preview-extension
                     *ngIf="!!externalViewer"
@@ -39,7 +39,7 @@
                                 [allowThumbnails]="allowThumbnails"
                                 [blobFile]="blobFile"
                                 [urlFile]="urlFile"
-                                [fileName]="fileName"
+                                [fileName]="internalFileName"
                                 [cacheType]="cacheTypeForContent"
                                 (close)="onClose()"
                                 (error)="onUnsupportedFile()">
@@ -50,7 +50,7 @@
             <ng-container *ngSwitchCase="'image'">
                 <adf-img-viewer [urlFile]="urlFile"
                                 [readOnly]="readOnly"
-                                [fileName]="fileName"
+                                [fileName]="internalFileName"
                                 [blobFile]="blobFile"
                                 (error)="onUnsupportedFile()"
                                 (submit)="onSubmitFile($event)"
@@ -63,7 +63,7 @@
                                   [tracks]="tracks"
                                   [mimeType]="mimeType"
                                   [blobFile]="blobFile"
-                                  [fileName]="fileName"
+                                  [fileName]="internalFileName"
                                   (error)="onUnsupportedFile()">
                 </adf-media-player>
             </ng-container>

lib/core/src/lib/viewer/components/viewer-render.component.ts

@@ -16,7 +16,6 @@
  */
 
 //TODO FIX documentation
-//TODO FIX unit test
 
 import {
     Component, EventEmitter,
@@ -82,10 +81,6 @@ export class ViewerRenderComponent implements OnChanges, OnInit, OnDestroy {
     @Input()
     viewerType: string = 'unknown';
 
-    /** Allows `back` navigation */
-    @Input()
-    allowGoBack = true;
-
     /** Override loading status */
     @Input()
     isLoading = false;
@@ -112,6 +107,8 @@ export class ViewerRenderComponent implements OnChanges, OnInit, OnDestroy {
 
     extensionTemplates: { template: TemplateRef<any>; isVisible: boolean }[] = [];
     extension: string;
+    internalViewerType: string;
+    internalFileName: string;
 
     /**
      * Returns a list of the active Viewer content extensions.
@@ -159,27 +156,26 @@ export class ViewerRenderComponent implements OnChanges, OnInit, OnDestroy {
 
         if (this.blobFile) {
             this.setUpBlobData();
-            this.isLoading = false;
         } else if (this.urlFile) {
             this.setUpUrlFile();
-            this.isLoading = false;
         }
+        this.isLoading = false;
     }
 
     private setUpBlobData() {
-        this.mimeType = this.blobFile.type;
+        this.internalFileName = this.fileName;
-        this.viewerType = this.viewUtilService.getViewerTypeByMimeType(this.mimeType);
+        this.internalViewerType = this.viewUtilService.getViewerTypeByMimeType(this.blobFile.type);
 
-        this.extensionChange.emit(this.mimeType);
+        this.extensionChange.emit(this.blobFile.type);
         this.scrollTop();
     }
 
     private setUpUrlFile() {
-        this.fileName = this.fileName ? this.fileName : this.viewUtilService.getFilenameFromUrl(this.urlFile);
+        this.internalFileName = this.fileName ? this.fileName : this.viewUtilService.getFilenameFromUrl(this.urlFile);
-        this.extension = this.viewUtilService.getFileExtension(this.fileName);
+        this.extension = this.viewUtilService.getFileExtension(this.internalFileName);
-        this.viewerType = this.viewerType === 'unknown' ? this.viewUtilService.getViewerType(this.extension, this.mimeType) : this.viewerType;
+        this.internalViewerType = this.viewerType === 'unknown' ? this.viewUtilService.getViewerType(this.extension, this.mimeType) : this.viewerType;
 
-        this.extensionChange.emit(this.extension);
+        this.extensionChange.emit(this.internalViewerType);
         this.scrollTop();
     }
 

lib/core/src/lib/viewer/directives/viewer-extension.directive.spec.ts

@@ -19,7 +19,7 @@ import { Location } from '@angular/common';
 import { SpyLocation } from '@angular/common/testing';
 import { ChangeDetectorRef, ElementRef } from '@angular/core';
 import { TestBed } from '@angular/core/testing';
-import { ViewerRenderComponent } from '../components/viewer-render.component.ts';
+import { ViewerRenderComponent } from '../components/viewer-render.component';
 import { ViewerExtensionDirective } from './viewer-extension.directive';
 import { setupTestBed } from '../../testing/setup-test-bed';
 import { CoreTestingModule } from '../../testing/core.testing.module';

lib/core/src/lib/viewer/services/view-util.service.ts

@@ -16,15 +16,12 @@
  */
 
 import { Injectable } from '@angular/core';
-import { LogService } from '../../services/log.service';
-import { RenditionViewerService } from "../../../../../content-services/src/lib/viewer/services/rendition-viewer.service";
 import { AppExtensionService, ViewerExtensionRef } from '@alfresco/adf-extensions';
 
 @Injectable({
     providedIn: 'root'
 })
 export class ViewUtilService {
-    static TARGET = '_new';
 
     // Extensions that are supported by the Viewer without conversion
     private extensions = {
@@ -56,9 +53,7 @@ export class ViewUtilService {
         return this.viewerExtensions.map(ext => ext.fileExtension);
     }
 
-    constructor(private renditionViewerService: RenditionViewerService,
+    constructor(private extensionService: AppExtensionService) {
-                private extensionService: AppExtensionService,
-                private logService: LogService) {
     }
 
     /**
@@ -91,55 +86,6 @@ export class ViewUtilService {
         return null;
     }
 
-    /**
-     * This method takes a url to trigger the print dialog against, and the type of artifact that it
-     * is.
-     * This URL should be one that can be rendered in the browser, for example PDF, Image, or Text
-     */
-    printFile(url: string, type: string): void {
-        const pwa = window.open(url, ViewUtilService.TARGET);
-        if (pwa) {
-            // Because of the way chrome focus and close image window vs. pdf preview window
-            if (type === RenditionViewerService.ContentGroup.IMAGE) {
-                pwa.onfocus = () => {
-                    setTimeout(() => {
-                        pwa.close();
-                    }, 500);
-                };
-            }
-
-            pwa.onload = () => {
-                pwa.print();
-            };
-        }
-    }
-
-    /**
-     * Launch the File Print dialog from anywhere other than the preview service, which resolves the
-     * rendition of the object that can be printed from a web browser.
-     * These are: images, PDF files, or PDF rendition of files.
-     * We also force PDF rendition for TEXT type objects, otherwise the default URL is to download.
-     * TODO there are different TEXT type objects, (HTML, plaintext, xml, etc. we should determine how these are handled)
-     */
-    printFileGeneric(objectId: string, mimeType: string): void {
-        const nodeId = objectId;
-        const type: string = this.renditionViewerService.getViewerTypeByMimeType(mimeType);
-
-        this.renditionViewerService.getRendition(nodeId, RenditionViewerService.ContentGroup.PDF)
-            .then((value) => {
-                const url: string = this.renditionViewerService.getRenditionUrl(nodeId, type, (!!value));
-                const printType = (type === RenditionViewerService.ContentGroup.PDF
-                    || type === RenditionViewerService.ContentGroup.TEXT)
-                    ? RenditionViewerService.ContentGroup.PDF : type;
-                this.printFile(url, printType);
-            })
-            .catch((err) => {
-                this.logService.error('Error with Printing');
-                this.logService.error(err);
-            });
-    }
-
-
      getViewerType(extension: string, mimeType: string): string {
         let viewerType = this.getViewerTypeByExtension(extension);
 
@@ -196,7 +142,6 @@ export class ViewUtilService {
         return 'unknown';
     }
 
-
     private isExternalViewer(): boolean {
         return !!this.viewerExtensions.find(ext => ext.fileExtension === '*');
     }
@@ -212,5 +157,4 @@ export class ViewUtilService {
         return false;
     }
 
-
 }