From 1d208d1c539a6afb8db571401bb442d71b8598e3 Mon Sep 17 00:00:00 2001
From: Tobias Schweizer <tobiasschweizer@users.noreply.github.com>
Date: Tue, 26 Jan 2021 14:35:09 +0100
Subject: [PATCH] feat(viewer): integrate file upload component in form logic
 (DSP-1257) (#264)

* feat(viewer): add @Output to upload comp.

* feat(viewer): add @Output to upload comp.

* test(viewer): add test host comp. to UploadFileComponent specs

* refactor(viewer): remove Outputs from file upload comp.

* feat(viewer): add methods for new and updated values to upload file comp.

* tests(viewer): add specs to upload file comp.

* refactor(playground): remove Output bindings from file upload playground comp.

* tests(viewer): add specs to upload file comp.

* refactor(viewer): file upload comp. reset form

* tests(viewer): add specs to upload file serv.

* refactor(viewer): ordered imports
---
 .../upload-file/upload-file.component.html    |   2 +-
 .../upload-file/upload-file.component.spec.ts | 154 ++++++++++++++----
 .../upload-file/upload-file.component.ts      | 103 ++++++++++--
 .../services/upload-file.service.spec.ts      |   6 +
 .../upload-playground.component.html          |   2 +-
 .../upload-playground.component.ts            |   5 +-
 6 files changed, 216 insertions(+), 56 deletions(-)

diff --git a/projects/dsp-ui/src/lib/viewer/representation/upload-file/upload-file.component.html b/projects/dsp-ui/src/lib/viewer/representation/upload-file/upload-file.component.html
index 74a4484fb..1f340bb26 100644
--- a/projects/dsp-ui/src/lib/viewer/representation/upload-file/upload-file.component.html
+++ b/projects/dsp-ui/src/lib/viewer/representation/upload-file/upload-file.component.html
@@ -22,7 +22,7 @@
 
         <ng-container *ngIf="!isLoading && file">
             <div class="thumbnail">
-                <img src="{{ thumbnaillUrl }}"
+                <img src="{{ thumbnailUrl }}"
                     alt="thumbnail" />
                 <button mat-button
                     class="delete-file"
diff --git a/projects/dsp-ui/src/lib/viewer/representation/upload-file/upload-file.component.spec.ts b/projects/dsp-ui/src/lib/viewer/representation/upload-file/upload-file.component.spec.ts
index f0fd0ef5b..8f057a35b 100644
--- a/projects/dsp-ui/src/lib/viewer/representation/upload-file/upload-file.component.spec.ts
+++ b/projects/dsp-ui/src/lib/viewer/representation/upload-file/upload-file.component.spec.ts
@@ -1,25 +1,53 @@
+import { Component, OnInit, ViewChild } from '@angular/core';
 import { async, ComponentFixture, TestBed } from '@angular/core/testing';
-import { FormBuilder, ReactiveFormsModule } from '@angular/forms';
+import { FormBuilder, FormGroup, ReactiveFormsModule } from '@angular/forms';
 import { MatIconModule } from '@angular/material/icon';
 import { MatInputModule } from '@angular/material/input';
 import { MatSnackBarModule } from '@angular/material/snack-bar';
-import { Constants } from '@dasch-swiss/dsp-js';
+import { Constants, CreateStillImageFileValue } from '@dasch-swiss/dsp-js';
+import { of } from 'rxjs';
 import { UploadFileService } from '../../services/upload-file.service';
 import { UploadFileComponent } from './upload-file.component';
 
-class MockUploadFileService {
-    envUrl = 'envUrl';
+/**
+ * Test host component to simulate parent component.
+ */
+@Component({
+    template: `
+    <dsp-upload-file #upload [representation]="representation" [parentForm]="form"></dsp-upload-file>`
+})
+class TestHostComponent implements OnInit {
+
+    @ViewChild('upload') uploadFileComp: UploadFileComponent;
+
+    representation = Constants.StillImageFileValue;
+
+    form: FormGroup;
+
+    constructor(private _fb: FormBuilder) {
+    }
+
+    ngOnInit() {
+        this.form = this._fb.group({});
+    }
+
 }
 
+
 describe('UploadFileComponent', () => {
-    const mockFile = new File(['1'], 'testfile');
+    const mockFile = new File(['1'], 'testfile', { type: 'image/jpeg' });
+
     const fb = new FormBuilder();
-    let component: UploadFileComponent;
-    let fixture: ComponentFixture<UploadFileComponent>;
+
+    let testHostComponent: TestHostComponent;
+    let testHostFixture: ComponentFixture<TestHostComponent>;
 
     beforeEach(async(() => {
+
+        const uploadServiceSpy = jasmine.createSpyObj('UploadFileService', ['upload']);
+
         TestBed.configureTestingModule({
-            declarations: [UploadFileComponent],
+            declarations: [UploadFileComponent, TestHostComponent],
             imports: [
                 MatInputModule,
                 MatSnackBarModule,
@@ -27,59 +55,68 @@ describe('UploadFileComponent', () => {
                 MatIconModule
             ],
             providers: [
-                { provide: UploadFileService, useClass: MockUploadFileService }
+                { provide: UploadFileService, useValue: uploadServiceSpy }
             ]
         })
             .compileComponents();
     }));
 
     beforeEach(() => {
-        fixture = TestBed.createComponent(UploadFileComponent);
-        component = fixture.componentInstance;
-        fixture.detectChanges();
+        testHostFixture = TestBed.createComponent(TestHostComponent);
+        testHostComponent = testHostFixture.componentInstance;
+        testHostFixture.detectChanges();
     });
 
     it('should create', () => {
-        expect(component).toBeTruthy();
+        expect(testHostComponent).toBeTruthy();
+        expect(testHostComponent.uploadFileComp).toBeTruthy();
     });
 
     it('should display resource type', () => {
-        expect(component.representation).toBeUndefined();
+        expect(testHostComponent.uploadFileComp.representation).toBeDefined();
     });
 
-    it('should be created with no fille', () => {
-        expect(component.file).toBeFalsy();
+    it('should be created without a file', () => {
+        expect(testHostComponent.uploadFileComp.file).toBeFalsy();
     });
 
-    it('should delete attachement', () => {
-        component.file = mockFile;
-        component.fileControl.setValue(mockFile);
-        component.thumbnaillUrl = 'test';
-        component.deleteAttachment();
-        expect(component.file).toBeNull();
-        expect(component.fileControl.value).toBeNull();
-        expect(component.thumbnaillUrl).toBeNull();
+    it('should delete attachment', () => {
+        testHostComponent.uploadFileComp.file = mockFile;
+        testHostComponent.uploadFileComp.fileControl.setValue(mockFile);
+        testHostComponent.uploadFileComp.thumbnailUrl = 'test';
+        testHostComponent.uploadFileComp.deleteAttachment();
+        expect(testHostComponent.uploadFileComp.file).toBeNull();
+        expect(testHostComponent.uploadFileComp.fileControl.value).toBeNull();
+        expect(testHostComponent.uploadFileComp.thumbnailUrl).toBeNull();
     });
 
     describe('form', () => {
-        it('should create form group and file control', () => {
-            expect(component.form).toBeDefined();
-            expect(component.fileControl).toBeTruthy();
-        });
+        it('should create form group and file control and add it to the parent form', async(() => {
+
+            testHostFixture.whenStable().then(() => {
+
+                expect(testHostComponent.uploadFileComp.form).toBeDefined();
+                expect(testHostComponent.uploadFileComp.fileControl).toBeTruthy();
+
+                // check that the form control has been added to the parent form
+                expect(testHostComponent.form.contains('file')).toBe(true);
+
+            });
+        }));
 
         it('should reset the form', () => {
-            component.form = fb.group({ test: '' });
-            component.resetForm();
-            expect(component.form.get('test').value).toBeNull();
+            testHostComponent.uploadFileComp.form = fb.group({ test: '' });
+            testHostComponent.uploadFileComp.resetForm();
+            expect(testHostComponent.uploadFileComp.form.get('test').value).toBeNull();
         });
     });
 
     describe('isFileTypeSupported', () => {
         it('should return true for the supported image files', () => {
             const fileTypes = ['image/jpeg', 'image/jp2', 'image/tiff', 'image/tiff-fx', 'image/png'];
-            component.representation = Constants.StillImageFileValue;
+
             for (const type of fileTypes) {
-                expect(component['_isFileTypeSupported'](type)).toBeTruthy();
+                expect(testHostComponent.uploadFileComp['_isFileTypeSupported'](type)).toBeTruthy();
             }
         });
 
@@ -87,7 +124,7 @@ describe('UploadFileComponent', () => {
             // TODO: add real unsupported filetypes?
             const fileTypes = ['image/a', 'image/b', 'image/c', 'image/d', 'image/e'];
             for (const type of fileTypes) {
-                expect(component['_isFileTypeSupported'](type)).toBeFalsy();
+                expect(testHostComponent.uploadFileComp['_isFileTypeSupported'](type)).toBeFalsy();
             }
         });
     });
@@ -96,13 +133,58 @@ describe('UploadFileComponent', () => {
         it('should return false for one file array', () => {
             const filesArray: File[] = [];
             filesArray.push(mockFile);
-            expect(component['_isMoreThanOneFile'](filesArray)).toBeFalsy();
+            expect(testHostComponent.uploadFileComp['_isMoreThanOneFile'](filesArray)).toBeFalsy();
         });
 
         it('should return false for more than one file', () => {
             const filesArray: File[] = [];
             filesArray.push(mockFile, mockFile, mockFile);
-            expect(component['_isMoreThanOneFile'](filesArray)).toBeTruthy();
+            expect(testHostComponent.uploadFileComp['_isMoreThanOneFile'](filesArray)).toBeTruthy();
         });
     });
+
+    describe('addFile', () => {
+
+        it('should make a request to Sipi when a file is added', () => {
+
+            expect(testHostComponent.uploadFileComp.form.valid).toBe(false);
+
+            const uploadService = TestBed.inject(UploadFileService) as jasmine.SpyObj<UploadFileService>;
+
+            uploadService.upload.and.returnValue(of({
+                uploadedFiles: [
+                    {
+                        fileType: 'image',
+                        temporaryUrl: 'http://localhost:1024/tmp/8oDdefPSkaz-EG187srxBFZ.jp2',
+                        originalFilename: 'beaver.jpg',
+                        internalFilename: '8oDdefPSkaz-EG187srxBFZ.jp2'
+                    }
+                ]
+            }));
+
+            // https://stackoverflow.com/questions/57080760/fake-file-drop-event-for-unit-testing
+            const drop = {
+                preventDefault: () => {},
+                stopPropagation: () => {},
+                target: { files: [mockFile] }
+            };
+
+            testHostComponent.uploadFileComp.addFile(drop);
+
+            expect(testHostComponent.uploadFileComp.form.valid).toBe(true);
+
+            const createFileVal = testHostComponent.uploadFileComp.getNewValue();
+
+            expect(createFileVal instanceof CreateStillImageFileValue).toBe(true);
+            expect((createFileVal as CreateStillImageFileValue).filename).toEqual('8oDdefPSkaz-EG187srxBFZ.jp2');
+
+            const expectedFormData = new FormData();
+            expectedFormData.append(mockFile.name, mockFile);
+
+            expect(uploadService.upload).toHaveBeenCalledTimes(1);
+            expect(uploadService.upload).toHaveBeenCalledWith(expectedFormData);
+
+        });
+
+    });
 });
diff --git a/projects/dsp-ui/src/lib/viewer/representation/upload-file/upload-file.component.ts b/projects/dsp-ui/src/lib/viewer/representation/upload-file/upload-file.component.ts
index 5dbe4a577..4a8f1fc61 100644
--- a/projects/dsp-ui/src/lib/viewer/representation/upload-file/upload-file.component.ts
+++ b/projects/dsp-ui/src/lib/viewer/representation/upload-file/upload-file.component.ts
@@ -1,9 +1,18 @@
 import { Component, Input, OnInit } from '@angular/core';
 import { FormBuilder, FormControl, FormGroup, Validators } from '@angular/forms';
-import { Constants } from '@dasch-swiss/dsp-js';
+import {
+    Constants,
+    CreateFileValue,
+    CreateStillImageFileValue,
+    UpdateFileValue,
+    UpdateStillImageFileValue
+} from '@dasch-swiss/dsp-js';
 import { NotificationService } from '../../../action/services/notification.service';
 import { UploadedFileResponse, UploadFileService } from '../../services/upload-file.service';
 
+// https://stackoverflow.com/questions/45661010/dynamic-nested-reactive-form-expressionchangedafterithasbeencheckederror
+const resolvedPromise = Promise.resolve(null);
+
 @Component({
     selector: 'dsp-upload-file',
     templateUrl: './upload-file.component.html',
@@ -11,6 +20,8 @@ import { UploadedFileResponse, UploadFileService } from '../../services/upload-f
 })
 export class UploadFileComponent implements OnInit {
 
+    @Input() parentForm?: FormGroup;
+
     @Input() representation: string; // only StillImageRepresentation supported so far
     readonly fromLabels = {
         upload: 'Upload file',
@@ -18,9 +29,9 @@ export class UploadFileComponent implements OnInit {
     };
     file: File;
     form: FormGroup;
-    get fileControl() { return this.form.get('file') as FormControl; }
+    fileControl: FormControl;
     isLoading = false;
-    thumbnaillUrl: string;
+    thumbnailUrl: string;
 
     constructor(
         private readonly _fb: FormBuilder,
@@ -56,24 +67,23 @@ export class UploadFileComponent implements OnInit {
                 this.file = null;
             } else {
                 // show loading indicator only for files > 1MB
-                this.isLoading = this.file.size > 1048576 ? true : false;
+                this.isLoading = this.file.size > 1048576;
 
                 formData.append(this.file.name, this.file);
                 this._ufs.upload(formData).subscribe(
                     (res: UploadedFileResponse) => {
                         const temporaryUrl = res.uploadedFiles[0].temporaryUrl;
                         const thumbnailUri = '/full/150,/0/default.jpg';
-                        this.thumbnaillUrl = `${temporaryUrl}${thumbnailUri}`;
+                        this.thumbnailUrl = `${temporaryUrl}${thumbnailUri}`;
+
+                        this.fileControl.setValue(res.uploadedFiles[0]);
+                        this.isLoading = false;
                     },
                     (e: Error) => {
                         this._ns.openSnackBar(e.message);
                         this.isLoading = false;
                         this.file = null;
-                        this.thumbnaillUrl = null;
-                    },
-                    () => {
-                        this.fileControl.setValue(this.file);
-                        this.isLoading = false;
+                        this.thumbnailUrl = null;
                     }
                 );
             }
@@ -82,7 +92,7 @@ export class UploadFileComponent implements OnInit {
     }
 
     /**
-     * Converst file size to display in KB or MB
+     * Converts file size to display in KB or MB
      * @param val file size to be converted
      */
     convertBytes(val: number): string {
@@ -100,7 +110,7 @@ export class UploadFileComponent implements OnInit {
     }
 
     /**
-     * Converts date to readable format
+     * Converts date to a readable format.
      * @param date date to be converted
      */
     convertDate(date: number): string {
@@ -108,11 +118,9 @@ export class UploadFileComponent implements OnInit {
     }
 
     /**
-     * Removes the attachement
+     * Removes the attachment
      */
     deleteAttachment(): void {
-        this.file = null;
-        this.thumbnaillUrl = null;
         this.fileControl.reset();
     }
 
@@ -120,9 +128,27 @@ export class UploadFileComponent implements OnInit {
      * Initializes form group
      */
     initializeForm(): void {
+        this.fileControl = new FormControl(null, Validators.required);
+
+        this.fileControl.valueChanges.subscribe(
+            val => {
+                // check if the form has been reset
+                if (val === null) {
+                    this.file = null;
+                    this.thumbnailUrl = null;
+                }
+            }
+        );
+
         this.form = this._fb.group({
-            file: [null, Validators.required]
+            file: this.fileControl
         }, { updateOn: 'blur' });
+
+        if (this.parentForm !== undefined) {
+            resolvedPromise.then(() => {
+                this.parentForm.addControl('file', this.form);
+            });
+        }
     }
 
     /**
@@ -132,12 +158,55 @@ export class UploadFileComponent implements OnInit {
         this.form.reset();
     }
 
+    /**
+     * Create a new file value.
+     */
+    getNewValue(): CreateFileValue | false {
+
+        if (!this.form.valid) {
+            return false;
+        }
+
+        const filename = this.fileControl.value.internalFilename;
+
+        // TODO: handle different file types
+
+        const fileValue = new CreateStillImageFileValue();
+        fileValue.filename = filename;
+
+        return fileValue;
+
+    }
+
+    /**
+     * Create an updated file value.
+     *
+     * @param id the current file value's id.
+     */
+    getUpdatedValue(id: string): UpdateFileValue | false {
+
+        if (!this.form.valid) {
+            return false;
+        }
+
+        const filename = this.fileControl.value.internalFilename;
+
+        // TODO: handle different file types
+
+        const fileValue = new UpdateStillImageFileValue();
+        fileValue.filename = filename;
+        fileValue.id = id;
+
+        return fileValue;
+
+    }
+
     /**
      * Checks if added file type is supported for certain resource type
      * @param fileType file type to be checked
      */
     private _isFileTypeSupported(fileType: string): boolean {
-        return this._supportedFileTypes().includes(fileType) ? true : false;
+        return this._supportedFileTypes().includes(fileType);
     }
 
     /**
diff --git a/projects/dsp-ui/src/lib/viewer/services/upload-file.service.spec.ts b/projects/dsp-ui/src/lib/viewer/services/upload-file.service.spec.ts
index efaedffb5..68b823e28 100644
--- a/projects/dsp-ui/src/lib/viewer/services/upload-file.service.spec.ts
+++ b/projects/dsp-ui/src/lib/viewer/services/upload-file.service.spec.ts
@@ -87,6 +87,12 @@ describe('UploadFileService', () => {
 
         expect(httpRequest.request.method).toEqual('POST');
 
+        const expectedFormData = new FormData();
+        const mockFile = new File(['1'], 'testfile', { type: 'image/jpeg' });
+
+        expectedFormData.append(mockFile.name, mockFile);
+        expect(httpRequest.request.body).toEqual(expectedFormData);
+
         httpRequest.flush(expectedResponse);
 
     });
diff --git a/src/app/upload-playground/upload-playground.component.html b/src/app/upload-playground/upload-playground.component.html
index 339963180..b479bcbd0 100644
--- a/src/app/upload-playground/upload-playground.component.html
+++ b/src/app/upload-playground/upload-playground.component.html
@@ -1,2 +1,2 @@
 <p>upload-playground works!</p>
-<dsp-upload-file [representation]="type"></dsp-upload-file>
+<dsp-upload-file #upload [representation]="type"></dsp-upload-file>
diff --git a/src/app/upload-playground/upload-playground.component.ts b/src/app/upload-playground/upload-playground.component.ts
index 5d0b7e602..671fc8625 100644
--- a/src/app/upload-playground/upload-playground.component.ts
+++ b/src/app/upload-playground/upload-playground.component.ts
@@ -1,5 +1,6 @@
-import { Component } from '@angular/core';
+import { Component, OnInit, ViewChild } from '@angular/core';
 import { Constants } from '@dasch-swiss/dsp-js';
+import { UploadFileComponent } from '@dasch-swiss/dsp-ui';
 
 @Component({
     selector: 'app-upload-playground',
@@ -7,6 +8,8 @@ import { Constants } from '@dasch-swiss/dsp-js';
     styleUrls: ['./upload-playground.component.scss']
 })
 export class UploadPlaygroundComponent {
+    @ViewChild('upload') uploadComp: UploadFileComponent;
 
     type = Constants.StillImageFileValue;
+
 }