#189 Fix upload test

ng2-components/ng2-alfresco-upload/src/components/file-uploading-dialog.component.html

@@ -1,7 +1,7 @@
 <div *ngIf="filesUploadingList" class="file-dialog" [ngClass]="{show: isDialogActive}">
     <div class="header">
         <div class="title">
-            {{totalCompleted}} {{'FILE_UPLOAD.MESSAGES.COMPLETED' | translate}}
+            <span id="total-upload-completed">{{totalCompleted}}</span> {{'FILE_UPLOAD.MESSAGES.COMPLETED' | translate}}
         </div>
         <div class="buttons">
             <div class="minimize-button" [ngClass]="{active: _isDialogMinimized}"  (click)="toggleDialogMinimize()">

ng2-components/ng2-alfresco-upload/src/components/file-uploading-dialog.component.spec.ts

@@ -24,8 +24,11 @@ import {
 import { provide } from '@angular/core';
 import { FileUploadingDialogComponent } from './file-uploading-dialog.component';
 import { FileModel } from '../models/file.model';
-import { AlfrescoTranslationService } from 'ng2-alfresco-core';
+import { AlfrescoTranslationService, AlfrescoSettingsService } from 'ng2-alfresco-core';
 import { TranslationMock } from '../assets/translation.service.mock';
+import { UploadServiceMock } from '../assets/upload.service.mock';
+import { UploadService } from '../services/upload.service';
+import { Observable } from 'rxjs/Observable';
 
 describe('FileUploadDialog', () => {
 
@@ -33,27 +36,150 @@ describe('FileUploadDialog', () => {
 
     beforeEachProviders(() => {
         return [
-            provide(AlfrescoTranslationService, {useClass: TranslationMock})
+            provide(AlfrescoSettingsService, {useClass: AlfrescoSettingsService}),
+            provide(AlfrescoTranslationService, {useClass: TranslationMock}),
+            provide(UploadService, {useClass: UploadServiceMock})
         ];
     });
 
-    it('should render dialog box with css class show', inject([TestComponentBuilder], (tcb: TestComponentBuilder) => {
-        return tcb
-            .createAsync(FileUploadingDialogComponent)
-            .then((fixture) => {
-                let fileFake = {
-                    id: 'fake-id',
-                    name: 'fake-name'
-                };
-                let file = new FileModel(fileFake);
-                let component = fixture.componentInstance;
-                component.filesUploadingList = [file];
+    it('should render completed upload 1 when an element is added to Observer',
+        inject([TestComponentBuilder, UploadService],
+            (tcb: TestComponentBuilder, updService: UploadService) => {
+                return tcb
+                    .createAsync(FileUploadingDialogComponent)
+                    .then((fixture) => {
+                        let fileFake = {
+                            id: 'fake-id',
+                            name: 'fake-name'
+                        };
+                        let file = new FileModel(fileFake);
+                        file.progress = {'percent': 50};
 
-                let compiled = fixture.debugElement.nativeElement;
-                component.showDialog();
-                fixture.detectChanges();
+                        updService.totalCompleted$ = new Observable(observer => {
+                            observer.next(1);
+                        });
 
-                expect(compiled.querySelector('.file-dialog').getAttribute('class')).toEqual('file-dialog show');
-            });
-    }));
+                        let component = fixture.componentInstance;
+                        fixture.detectChanges();
+                        component.filesUploadingList = [file];
+
+                        let compiled = fixture.debugElement.nativeElement;
+
+                        fixture.detectChanges();
+
+                        expect(compiled.querySelector('#total-upload-completed').innerText).toEqual('1');
+                    }
+                );
+            }
+        )
+    );
+
+    it('should render dialog box with css class show when an element is added to Observer',
+        inject([TestComponentBuilder, UploadService],
+            (tcb: TestComponentBuilder, updService: UploadService) => {
+                return tcb
+                    .createAsync(FileUploadingDialogComponent)
+                    .then((fixture) => {
+                        let fileFake = {
+                            id: 'fake-id',
+                            name: 'fake-name'
+                        };
+                        let file = new FileModel(fileFake);
+                        file.progress = {'percent': 50};
+
+                        updService.addToQueue([file]);
+
+
+                        let component = fixture.componentInstance;
+                        fixture.detectChanges();
+                        component.filesUploadingList = [file];
+
+                        let compiled = fixture.debugElement.nativeElement;
+
+                        fixture.detectChanges();
+
+                        expect(compiled.querySelector('.file-dialog').getAttribute('class')).toEqual('file-dialog show');
+                    }
+                );
+            }
+        )
+    );
+
+    it('should render dialog box with css class show when the toggleShowDialog is called',
+        inject([TestComponentBuilder, UploadService],
+            (tcb: TestComponentBuilder, updService: UploadService) => {
+                return tcb
+                    .createAsync(FileUploadingDialogComponent)
+                    .then((fixture) => {
+                        let fileFake = {
+                            id: 'fake-id',
+                            name: 'fake-name'
+                        };
+                        let file = new FileModel(fileFake);
+
+                        let component = fixture.componentInstance;
+                        fixture.detectChanges();
+                        component.filesUploadingList = [file];
+
+                        let compiled = fixture.debugElement.nativeElement;
+
+                        component.toggleShowDialog();
+                        fixture.detectChanges();
+
+                        expect(compiled.querySelector('.file-dialog').getAttribute('class')).toEqual('file-dialog show');
+                    }
+                );
+            }
+        )
+    );
+
+    it('should render dialog box with css class hide',
+        inject([TestComponentBuilder],
+            (tcb: TestComponentBuilder) => {
+                return tcb
+                    .createAsync(FileUploadingDialogComponent)
+                    .then((fixture) => {
+                        let fileFake = {
+                            id: 'fake-id',
+                            name: 'fake-name'
+                        };
+                        let file = new FileModel(fileFake);
+                        let component = fixture.componentInstance;
+                        component.filesUploadingList = [file];
+                        component.isDialogActive = true;
+
+                        let compiled = fixture.debugElement.nativeElement;
+
+                        component.toggleShowDialog();
+                        fixture.detectChanges();
+
+                        expect(compiled.querySelector('.file-dialog').getAttribute('class')).toEqual('file-dialog');
+                    }
+                );
+            }
+        )
+    );
+
+    it('should render minimize dialog as default',
+        inject([TestComponentBuilder], (tcb: TestComponentBuilder) => {
+            return tcb
+                .createAsync(FileUploadingDialogComponent)
+                .then((fixture) => {
+                    let fileFake = {
+                        id: 'fake-id',
+                        name: 'fake-name'
+                    };
+                    let file = new FileModel(fileFake);
+                    let component = fixture.componentInstance;
+                    component.filesUploadingList = [file];
+                    component.isDialogActive = true;
+
+                    let compiled = fixture.debugElement.nativeElement;
+
+                    component.toggleDialogMinimize();
+                    fixture.detectChanges();
+
+                    expect(compiled.querySelector('.minimize-button').getAttribute('class')).toEqual('minimize-button active');
+                });
+        }));
 });

ng2-components/ng2-alfresco-upload/src/components/file-uploading-dialog.component.ts

@@ -60,17 +60,21 @@ export class FileUploadingDialogComponent implements OnInit{
     }
 
     ngOnInit() {
-        this._uploaderService.filesUpload$.subscribe((fileList: FileModel[]) => {
-            this.filesUploadingList = fileList;
-            if (this.filesUploadingList.length > 0) {
-                this.isDialogActive = true;
+        if(this._uploaderService.filesUpload$) {
+            this._uploaderService.filesUpload$.subscribe((fileList: FileModel[]) => {
+                this.filesUploadingList = fileList;
+                if (this.filesUploadingList.length > 0) {
+                    this.isDialogActive = true;
+                    this.cd.detectChanges();
+                }
+            });
+        }
+        if(this._uploaderService.totalCompleted$) {
+            this._uploaderService.totalCompleted$.subscribe((total: number) => {
+                this.totalCompleted = total;
                 this.cd.detectChanges();
-            }
-        });
-        this._uploaderService.totalCompleted$.subscribe((total: number) => {
-            this.totalCompleted = total;
-            this.cd.detectChanges();
-        });
+            });
+        }
     }
 
     /**

ng2-components/ng2-alfresco-upload/src/components/upload-button.component.spec.ts

@@ -19,15 +19,25 @@ import { describe, expect, it, inject, beforeEachProviders } from '@angular/core
 import { TestComponentBuilder } from '@angular/compiler/testing';
 import { provide } from '@angular/core';
 import { UploadButtonComponent } from './upload-button.component';
-import { AlfrescoTranslationService } from 'ng2-alfresco-core';
+import { AlfrescoTranslationService, AlfrescoSettingsService } from 'ng2-alfresco-core';
 import { TranslationMock } from '../assets/translation.service.mock';
 import { UploadServiceMock } from '../assets/upload.service.mock';
 import { UploadService } from '../services/upload.service';
+import { AlfrescoApiMock } from '../assets/AlfrescoApi.mock';
+
+
+declare var AlfrescoApi: any;
 
 describe('AlfrescoUploadButton', () => {
 
+    beforeEach( () => {
+        window['AlfrescoApi'] = AlfrescoApiMock;
+        window['componentHandler'] = null;
+    });
+
     beforeEachProviders(() => {
         return [
+            provide(AlfrescoSettingsService, {useClass: AlfrescoSettingsService}),
             provide(AlfrescoTranslationService, {useClass: TranslationMock}),
             provide(UploadService, {useClass: UploadServiceMock})
         ];
@@ -72,37 +82,74 @@ describe('AlfrescoUploadButton', () => {
                 });
         }));
 
-    it('should call onFilesAdded method', inject([TestComponentBuilder], (tcb: TestComponentBuilder) => {
+    it('should call uploadFile with the default folder', inject([TestComponentBuilder], (tcb: TestComponentBuilder) => {
         return tcb
             .createAsync(UploadButtonComponent)
             .then((fixture) => {
                 let component = fixture.componentInstance;
-                component.onFilesAdded = jasmine.createSpy('onFilesAdded');
+                component.uploaddirectory = 'folder-default';
+                component.uploadFiles = jasmine.createSpy('uploadFiles');
 
                 fixture.detectChanges();
+                let file = {name: 'fake-name-1', size: 10, webkitRelativePath: 'fake-folder1/fake-name-1.json'};
 
                 let fakeEvent = {
-                    currentTarget: {files: [{name: 'fake-name', size: 10}]}
+                    currentTarget: {
+                        files: [file]
+                    },
+                    target: {value: 'fake-value'}
                 };
 
                 component.onFilesAdded(fakeEvent);
-                expect(component.onFilesAdded).toHaveBeenCalledWith(fakeEvent);
+                expect(component.uploadFiles).toHaveBeenCalledWith('folder-default', [file]);
             });
     }));
 
-    it('should render dialog box with css class show',
-        inject([TestComponentBuilder], (tcb: TestComponentBuilder) => {
-            return tcb
-                .createAsync(UploadButtonComponent)
-                .then((fixture) => {
-                    let component = fixture.componentInstance;
-                    fixture.detectChanges();
-                    let compiled = fixture.debugElement.nativeElement;
+    it('should create a folder and call upload file', inject([TestComponentBuilder], (tcb: TestComponentBuilder) => {
+        return tcb
+            .createAsync(UploadButtonComponent)
+            .then((fixture) => {
+                let component = fixture.componentInstance;
+
+                component.uploadFiles = jasmine.createSpy('uploadFiles');
+                let doneFn = jasmine.createSpy('success');
+
+                fixture.detectChanges();
+
+                let file = {name: 'fake-name-1', size: 10, webkitRelativePath: 'fake-folder1/fake-name-1.json'};
+
+                let fakeEvent = {
+                    currentTarget: {
+                        files: [file]
+                    },
+                    target: {value: 'fake-value'}
+                };
+                component.onDirectoryAdded(fakeEvent);
+                expect(doneFn).not.toHaveBeenCalledWith(fakeEvent);
+            });
+    }));
+
+    it('should throws an exception when the folder already exist', inject([TestComponentBuilder], (tcb: TestComponentBuilder) => {
+        return tcb
+            .createAsync(UploadButtonComponent)
+            .then((fixture) => {
+                let component = fixture.componentInstance;
+
+                component.uploadFiles = jasmine.createSpy('uploadFiles');
+
+                fixture.detectChanges();
+
+                let file = {name: 'fake-name-1', size: 10, webkitRelativePath: 'folder-duplicate-fake/fake-name-1.json'};
+
+                let fakeEvent = {
+                    currentTarget: {
+                        files: [file]
+                    },
+                    target: {value: 'fake-value'}
+                };
+                component.onDirectoryAdded(fakeEvent);
+                expect(component.uploadFiles).not.toHaveBeenCalledWith(fakeEvent);
+            });
+    }));
 
-                    component._showDialog();
-                    fixture.detectChanges();
-                    expect(compiled.querySelector('.file-dialog').getAttribute('class')).toEqual('file-dialog show');
-                });
-        }));
 });
-

ng2-components/ng2-alfresco-upload/src/components/upload-button.component.ts

@@ -135,9 +135,11 @@ export class UploadButtonComponent {
                     },
                     error => {
                         let errorMessagePlaceholder = this.getErrorMessage(error.response);
-                        let errorMessage = this.formatString(errorMessagePlaceholder, [directoryName]);
-                        if (errorMessage) {
-                            this._showErrorNotificationBar(errorMessage);
+                        if (errorMessagePlaceholder) {
+                            let errorMessage = this.formatString(errorMessagePlaceholder, [directoryName]);
+                            if (errorMessage) {
+                                this._showErrorNotificationBar(errorMessage);
+                            }
                         }
                         console.log(error);
                     }
@@ -222,16 +224,18 @@ export class UploadButtonComponent {
         messageTranslate = this.translate.get('FILE_UPLOAD.MESSAGES.PROGRESS');
         actionTranslate = this.translate.get('FILE_UPLOAD.ACTION.UNDO');
 
-        this.undoNotificationBar.nativeElement.MaterialSnackbar.showSnackbar({
-            message: messageTranslate.value,
-            timeout: 3000,
-            actionHandler: function () {
-                latestFilesAdded.forEach((uploadingFileModel: FileModel) => {
-                    uploadingFileModel.setAbort();
-                });
-            },
-            actionText: actionTranslate.value
-        });
+        if(this.undoNotificationBar.nativeElement.MaterialSnackbar) {
+            this.undoNotificationBar.nativeElement.MaterialSnackbar.showSnackbar({
+                message: messageTranslate.value,
+                timeout: 3000,
+                actionHandler: function () {
+                    latestFilesAdded.forEach((uploadingFileModel: FileModel) => {
+                        uploadingFileModel.setAbort();
+                    });
+                },
+                actionText: actionTranslate.value
+            });
+        }
     }
 
     /**
@@ -257,10 +261,12 @@ export class UploadButtonComponent {
             componentHandler.upgradeAllRegistered();
         }
 
-        this.undoNotificationBar.nativeElement.MaterialSnackbar.showSnackbar({
-            message: errorMessage,
-            timeout: 3000
-        });
+        if (this.undoNotificationBar.nativeElement.MaterialSnackbar) {
+            this.undoNotificationBar.nativeElement.MaterialSnackbar.showSnackbar({
+                message: errorMessage,
+                timeout: 3000
+            });
+        }
     }
 
     /**