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();
+ }
+ }
}