diff --git a/ng2-components/ng2-alfresco-viewer/src/components/notSupportedFormat.component.html b/ng2-components/ng2-alfresco-viewer/src/components/notSupportedFormat.component.html index 7372b57320..2c435e4690 100644 --- a/ng2-components/ng2-alfresco-viewer/src/components/notSupportedFormat.component.html +++ b/ng2-components/ng2-alfresco-viewer/src/components/notSupportedFormat.component.html @@ -3,12 +3,25 @@

File '{{nameFile}}' is of an unsupported format

- + + +
-
- + diff --git a/ng2-components/ng2-alfresco-viewer/src/components/notSupportedFormat.component.spec.ts b/ng2-components/ng2-alfresco-viewer/src/components/notSupportedFormat.component.spec.ts index ab3c5afee8..2dd0a1457a 100644 --- a/ng2-components/ng2-alfresco-viewer/src/components/notSupportedFormat.component.spec.ts +++ b/ng2-components/ng2-alfresco-viewer/src/components/notSupportedFormat.component.spec.ts @@ -18,6 +18,7 @@ import { DebugElement } from '@angular/core'; import { async, ComponentFixture, TestBed } from '@angular/core/testing'; import { MdButtonModule, MdIconModule, MdProgressSpinnerModule } from '@angular/material'; +import { By } from '@angular/platform-browser'; import { AlfrescoApiService, AlfrescoAuthenticationService, @@ -35,9 +36,9 @@ interface RenditionResponse { entry: { status: string }; -}; +} -describe('Test ng2-alfresco-viewer Not Supported Format View component', () => { +describe('NotSupportedFormatComponent', () => { const nodeId = 'not-supported-node-id'; @@ -157,6 +158,60 @@ describe('Test ng2-alfresco-viewer Not Supported Format View component', () => { expect(element.querySelector('#viewer-convert-button')).toBeNull(); }); })); + + it('should start the conversion when clicking on the "Convert to PDF" button', () => { + component.convertible = true; + fixture.detectChanges(); + + const convertButton = debug.query(By.css('[data-automation-id="viewer-convert-button"]')); + convertButton.triggerEventHandler('click', null); + fixture.detectChanges(); + + const conversionSpinner = debug.query(By.css('[data-automation-id="viewer-conversion-spinner"]')); + expect(renditionsService.convert).toHaveBeenCalled(); + expect(conversionSpinner).not.toBeNull(); + }); + + it('should remove the spinner if an error happens during conversion', () => { + component.convertToPdf(); + + conversionSubject.error('whatever'); + fixture.detectChanges(); + + const conversionSpinner = debug.query(By.css('[data-automation-id="viewer-conversion-spinner"]')); + expect(conversionSpinner).toBeNull(); + }); + + it('should remove the spinner and show the pdf if conversion has finished', () => { + component.convertToPdf(); + + conversionSubject.complete(); + fixture.detectChanges(); + + const conversionSpinner = debug.query(By.css('[data-automation-id="viewer-conversion-spinner"]')); + const pdfRenditionViewer = debug.query(By.css('[data-automation-id="pdf-rendition-viewer"]')); + expect(conversionSpinner).toBeNull(); + expect(pdfRenditionViewer).not.toBeNull(); + }); + + it('should unsubscribe from the conversion subscription on ngOnDestroy', () => { + component.convertToPdf(); + + component.ngOnDestroy(); + conversionSubject.complete(); + fixture.detectChanges(); + + const pdfRenditionViewer = debug.query(By.css('[data-automation-id="pdf-rendition-viewer"]')); + expect(pdfRenditionViewer).toBeNull(); + }); + + it('should not throw error on ngOnDestroy if the conversion hasn\'t started at all' , () => { + const callNgOnDestroy = () => { + component.ngOnDestroy(); + }; + + expect(callNgOnDestroy).not.toThrowError(); + }); }); describe('User Interaction', () => { diff --git a/ng2-components/ng2-alfresco-viewer/src/components/notSupportedFormat.component.ts b/ng2-components/ng2-alfresco-viewer/src/components/notSupportedFormat.component.ts index 4496e1eb3e..8e6f72f1fc 100644 --- a/ng2-components/ng2-alfresco-viewer/src/components/notSupportedFormat.component.ts +++ b/ng2-components/ng2-alfresco-viewer/src/components/notSupportedFormat.component.ts @@ -17,7 +17,7 @@ /* tslint:disable:component-selector */ -import { Component, Input, OnInit } from '@angular/core'; +import { Component, Input, OnDestroy, OnInit } from '@angular/core'; import { ContentService, RenditionsService } from 'ng2-alfresco-core'; import { AlfrescoApiService } from 'ng2-alfresco-core'; @@ -28,7 +28,7 @@ const DEFAULT_CONVERSION_ENCODING = 'pdf'; templateUrl: './notSupportedFormat.component.html', styleUrls: ['./notSupportedFormat.component.css'] }) -export class NotSupportedFormatComponent implements OnInit { +export class NotSupportedFormatComponent implements OnInit, OnDestroy { @Input() nameFile: string; @@ -50,6 +50,7 @@ export class NotSupportedFormatComponent implements OnInit { isConversionStarted: boolean = false; isConversionFinished: boolean = false; renditionUrl: string|null = null; + conversionsubscription: any = null; constructor( private contentService: ContentService, @@ -57,6 +58,15 @@ export class NotSupportedFormatComponent implements OnInit { private apiService: AlfrescoApiService ) {} + /** + * Checks for available renditions if the nodeId is present + */ + ngOnInit() { + if (this.nodeId) { + this.checkRendition(); + } + } + /** * Download file opening it in a new window */ @@ -68,12 +78,6 @@ export class NotSupportedFormatComponent implements OnInit { } } - ngOnInit() { - if (this.nodeId) { - this.checkRendition(); - } - } - /** * Update component's button according to the given rendition's availability * @@ -104,7 +108,7 @@ export class NotSupportedFormatComponent implements OnInit { convertToPdf(): void { this.isConversionStarted = true; - this.renditionsService.convert(this.nodeId, DEFAULT_CONVERSION_ENCODING) + this.conversionsubscription = this.renditionsService.convert(this.nodeId, DEFAULT_CONVERSION_ENCODING) .subscribe({ error: (error) => { this.isConversionStarted = false; }, complete: () => { this.showPDF(); } @@ -119,4 +123,13 @@ export class NotSupportedFormatComponent implements OnInit { this.isConversionStarted = false; this.isConversionFinished = true; } + + /** + * Kills the subscription polling if it has been started + */ + ngOnDestroy(): void { + if (this.isConversionStarted) { + this.conversionsubscription.unsubscribe(); + } + } }