Make the rendition conversion great again (#2126)

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

@@ -3,12 +3,25 @@
         <div *ngIf="!isConversionStarted" class="viewer-download-text mdl-card__supporting-text">
             <h4>File '<span>{{nameFile}}</span>' is of an unsupported format</h4>
         </div>
-        <md-spinner *ngIf="isConversionStarted" id="conversion-spinner" class="adf-conversion-spinner" color="primary"></md-spinner>
+        
+        <md-spinner *ngIf="isConversionStarted" 
+            id="conversion-spinner" 
+            class="adf-conversion-spinner" 
+            color="primary"
+            data-automation-id="viewer-conversion-spinner"></md-spinner>
+
         <div class="button-container mdl-card__actions">
             <button md-button id="viewer-download-button" aria-label="Download" class="mdl-button mdl-js-button mdl-button--raised mdl-js-ripple-effect mdl-button--accent" (click)="download()">
                 <md-icon class="viewer-button-icon">cloud_download</md-icon>   Download
             </button>
-            <button md-button *ngIf="convertible" [disabled]="isConversionStarted" id="viewer-convert-button" aria-label="Convert to PDF" class="mdl-button mdl-js-button mdl-button--raised mdl-js-ripple-effect mdl-button--primary" (click)="convertToPdf()">
+            <button *ngIf="convertible"
+                md-button
+                id="viewer-convert-button"
+                aria-label="Convert to PDF"
+                class="mdl-button mdl-js-button mdl-button--raised mdl-js-ripple-effect mdl-button--primary"
+                [disabled]="isConversionStarted"
+                (click)="convertToPdf()"
+                data-automation-id="viewer-convert-button">
                 <md-icon class="viewer-button-icon">insert_drive_file</md-icon>   Convert to PDF
             </button>
             <button md-button *ngIf="displayable" id="viewer-display-button" aria-label="Show PDF" class="mdl-button mdl-js-button mdl-button--raised mdl-js-ripple-effect mdl-button--primary" (click)="showPDF()">
@@ -18,4 +31,9 @@
     </div>
 </section>
 
-<pdf-viewer *ngIf="isConversionFinished" id="pdf-rendition-viewer" [showToolbar]="showToolbar" [urlFile]="renditionUrl" [nameFile]="nameFile"></pdf-viewer>
+<pdf-viewer *ngIf="isConversionFinished" 
+    id="pdf-rendition-viewer" 
+    [showToolbar]="showToolbar" 
+    [urlFile]="renditionUrl" 
+    [nameFile]="nameFile"
+    data-automation-id="pdf-rendition-viewer"></pdf-viewer>

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', () => {

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