inteligr8/alfresco-ng2-components
1
0
Fork 0
mirror of https://github.com/Alfresco/alfresco-ng2-components.git synced 2025-05-12 17:04:57 +00:00
Code Issues Packages Projects Releases Wiki Activity

[MNT-22613] Viewer extensibility fixes (#7294)

Browse Source 
* viewer fixes and unit tests

* update docs

* fix unit test
This commit is contained in:
Denys Vuika 2021-10-12 13:57:13 +01:00 committed by GitHub
parent 567ca18547
commit 254a6cd9d3
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
4 changed files with 63 additions and 14 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
docs/extensions/components/preview-extension.component.md
View File

@ -108,7 +108,7 @@ You can also use `*` wildcard to register a single component that opens all file
"content": [
{
"id": "dev.tools.viewer.viewer",
"fileExtension": ["*"],
"fileExtension": "*",
"component": "your-extension.main.component"
}
]

54
lib/core/viewer/components/viewer.component.spec.ts
View File

@ -183,7 +183,7 @@ describe('ViewerComponent', () => {
});
describe('Extension Type Test', () => {
it('should use external viewer via wildcard notation', async () => {
it('should display pdf external viewer via wildcard notation', async () => {
const extension: ViewerExtensionRef = {
component: 'custom.component',
id: 'custom.component.id',
@ -207,7 +207,7 @@ describe('ViewerComponent', () => {
expect(element.querySelector('[data-automation-id="custom.component"]')).not.toBeNull();
});
it('should use first external viewer provided', async () => {
it('should display pdf with the first external viewer provided', async () => {
const extensions: ViewerExtensionRef[] = [
{
component: 'custom.component.1',
@ -236,6 +236,56 @@ describe('ViewerComponent', () => {
expect(element.querySelector('[data-automation-id="custom.component.2"]')).toBeNull();
});
it('should display url with the external viewer provided', async () => {
const extension: ViewerExtensionRef = {
component: 'custom.component',
id: 'custom.component.id',
fileExtension: '*'
};
spyOn(extensionService, 'getViewerExtensions').and.returnValue([extension]);
fixture = TestBed.createComponent(ViewerComponent);
element = fixture.nativeElement;
component = fixture.componentInstance;
component.urlFile = 'http://localhost:4200/alfresco';
component.ngOnChanges();
fixture.detectChanges();
await fixture.whenStable();
expect(component.externalExtensions.includes('*')).toBe(true);
expect(component.externalViewer).toBe(extension);
expect(component.viewerType).toBe('external');
expect(element.querySelector('[data-automation-id="custom.component"]')).not.toBeNull();
});
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(ViewerComponent);
element = fixture.nativeElement;
component = fixture.componentInstance;
spyOn(component.nodesApi, 'getNode').and.callFake(() => Promise.resolve({ 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();
}));
it('should extension file pdf be loaded', (done) => {
component.urlFile = 'fake-test-file.pdf';
component.ngOnChanges();

16
lib/core/viewer/components/viewer.component.ts
View File

@ -18,7 +18,7 @@
import {
Component, ContentChild, EventEmitter, HostListener, ElementRef,
Input, OnChanges, Output, TemplateRef,
ViewEncapsulation, OnInit, OnDestroy
ViewEncapsulation, OnInit, OnDestroy, ChangeDetectorRef
} from '@angular/core';
import {
SharedLinkEntry,
@ -311,7 +311,8 @@ export class ViewerComponent implements OnChanges, OnInit, OnDestroy {
private contentService: ContentService,
private uploadService: UploadService,
private el: ElementRef,
public dialog: MatDialog) {
public dialog: MatDialog,
private cdr: ChangeDetectorRef) {
viewUtilService.maxRetries = this.maxRetries;
}
@ -413,6 +414,7 @@ export class ViewerComponent implements OnChanges, OnInit, OnDestroy {
} else {
this.setUpNodeFile(node.entry).then(() => {
this.isLoading = false;
this.cdr.detectChanges();
});
}
},
@ -447,7 +449,7 @@ export class ViewerComponent implements OnChanges, OnInit, OnDestroy {
this.scrollTop();
}
private async setUpNodeFile(nodeData: Node, versionData?: Version) {
private async setUpNodeFile(nodeData: Node, versionData?: Version): Promise<void> {
this.readOnly = !this.contentService.hasAllowableOperations(nodeData, 'update');
if (versionData && versionData.content) {
@ -470,13 +472,11 @@ export class ViewerComponent implements OnChanges, OnInit, OnDestroy {
this.fileName = versionData ? versionData.name : nodeData.name;
this.viewerType = this.getViewerType(this.extension, this.mimeType);
let setupNode: Promise<void>;
if (this.viewerType === 'unknown') {
if (versionData) {
setupNode = this.viewUtilService.displayNodeRendition(nodeData.id, versionData.id);
await this.viewUtilService.displayNodeRendition(nodeData.id, versionData.id);
} else {
setupNode = this.viewUtilService.displayNodeRendition(nodeData.id);
await this.viewUtilService.displayNodeRendition(nodeData.id);
}
}
@ -484,8 +484,6 @@ export class ViewerComponent implements OnChanges, OnInit, OnDestroy {
this.sidebarRightTemplateContext.node = nodeData;
this.sidebarLeftTemplateContext.node = nodeData;
this.scrollTop();
return setupNode;
}
private getViewerType(extension: string, mimeType: string): string {

5
lib/core/viewer/directives/viewer-extension.directive.spec.ts
View File

@ -17,7 +17,7 @@
import { Location } from '@angular/common';
import { SpyLocation } from '@angular/common/testing';
import { ElementRef } from '@angular/core';
import { ChangeDetectorRef, ElementRef } from '@angular/core';
import { TestBed } from '@angular/core/testing';
import { ViewerComponent } from '../components/viewer.component';
import { ViewerExtensionDirective } from './viewer-extension.directive';
@ -43,7 +43,8 @@ describe('ExtensionViewerDirective', () => {
{ provide: Location, useClass: SpyLocation },
ViewerExtensionDirective,
{provide: ElementRef, useClass: MockElementRef},
ViewerComponent
ViewerComponent,
{ provide: ChangeDetectorRef, useValue: { detectChanges: () => {} } }
]
});