additional unit tests for the upload (#6235)

lib/content-services/src/lib/upload/components/file-uploading-dialog.component.html

@@ -83,17 +83,15 @@
         </div>
     </section>
 
-    <footer class="adf-upload-dialog__actions"
+    <footer class="adf-upload-dialog__actions" *ngIf="!isConfirmation">
-            *ngIf="!isConfirmation">
         <button
             id="adf-upload-dialog-cancel-all"
             [attr.aria-label]="'ADF_FILE_UPLOAD.ARIA-LABEL.CANCEL_ALL' | translate"
             color="primary"
             mat-button
             *ngIf="!uploadList.isUploadCompleted() && !uploadList.isUploadCancelled()"
-            (click)="toggleConfirmation()">
+            (click)="toggleConfirmation()"
-            {{ 'ADF_FILE_UPLOAD.BUTTON.CANCEL_ALL' | translate }}
+        >{{ 'ADF_FILE_UPLOAD.BUTTON.CANCEL_ALL' | translate }}</button>
-        </button>
 
         <button
             id="adf-upload-dialog-close"
@@ -101,9 +99,8 @@
             *ngIf="uploadList.isUploadCompleted() || uploadList.isUploadCancelled()"
             mat-button
             color="primary"
-            (click)="close()">
+            (click)="close()"
-            {{ 'ADF_FILE_UPLOAD.BUTTON.CLOSE' | translate }}
+        >{{ 'ADF_FILE_UPLOAD.BUTTON.CLOSE' | translate }}</button>
-        </button>
     </footer>
 
     <footer class="adf-upload-dialog__actions"
@@ -113,17 +110,15 @@
             [attr.aria-label]="'ADF_FILE_UPLOAD.ARIA-LABEL.CONFIRMATION.CANCEL' | translate"
             color="secondary"
             mat-button
-            (click)="cancelAllUploads()">
+            (click)="cancelAllUploads()"
-            {{ 'ADF_FILE_UPLOAD.CONFIRMATION.BUTTON.CANCEL' | translate }}
+        >{{ 'ADF_FILE_UPLOAD.CONFIRMATION.BUTTON.CANCEL' | translate }}</button>
-        </button>
 
         <button
             id="adf-upload-dialog-confirm"
             [attr.aria-label]="'ADF_FILE_UPLOAD.ARIA-LABEL.CONFIRMATION.CONTINUE' | translate"
             mat-button
             color="primary"
-            (click)="toggleConfirmation()">
+            (click)="toggleConfirmation()"
-            {{ 'ADF_FILE_UPLOAD.CONFIRMATION.BUTTON.CONTINUE' | translate }}
+        >{{ 'ADF_FILE_UPLOAD.CONFIRMATION.BUTTON.CONTINUE' | translate }}</button>
-        </button>
     </footer>
 </div>

lib/content-services/src/lib/upload/components/file-uploading-list-row.component.html

@@ -15,9 +15,8 @@
     <span *ngIf="isUploadVersion()" class="adf-file-uploading-row__version" tabindex="0" >
         <mat-chip color="primary"
             [attr.aria-label]="'ADF_FILE_UPLOAD.ARIA-LABEL.VERSION' | translate: { version:  versionNumber }"
-            [title]="'version' + versionNumber" disabled>{{
+            [title]="'version' + versionNumber" disabled
-                versionNumber
+        >{{ versionNumber }}</mat-chip>
-        }}</mat-chip>
     </span>
 
     <div

lib/content-services/src/lib/upload/components/file-uploading-list-row.component.spec.ts

@@ -20,6 +20,7 @@ import { FileModel, FileUploadOptions, FileUploadStatus, setupTestBed } from '@a
 import { FileUploadingListRowComponent } from './file-uploading-list-row.component';
 import { ContentTestingModule } from '../../testing/content.testing.module';
 import { TranslateModule } from '@ngx-translate/core';
+import { By } from '@angular/platform-browser';
 
 describe('FileUploadingListRowComponent', () => {
     let fixture: ComponentFixture<FileUploadingListRowComponent>;
@@ -83,4 +84,52 @@ describe('FileUploadingListRowComponent', () => {
 
         expect(component.remove.emit).not.toHaveBeenCalled();
     });
+
+    it('should show cancel button when upload is in progress', async () => {
+        component.file = new FileModel(<File> { name: 'fake-name' });
+        component.file.data = { entry: { properties: { 'cm:versionLabel': '1' } } };
+        component.file.status = FileUploadStatus.Progress;
+
+        fixture.detectChanges();
+        await fixture.whenStable();
+
+        const cancelButton = fixture.debugElement.query(By.css('[data-automation-id="cancel-upload-progress"]'));
+        expect(cancelButton).not.toBeNull();
+    });
+
+    it('should show cancel button when upload is starting', async () => {
+        component.file = new FileModel(<File> { name: 'fake-name' });
+        component.file.data = { entry: { properties: { 'cm:versionLabel': '1' } } };
+        component.file.status = FileUploadStatus.Starting;
+
+        fixture.detectChanges();
+        await fixture.whenStable();
+
+        const cancelButton = fixture.debugElement.query(By.css('[data-automation-id="cancel-upload-progress"]'));
+        expect(cancelButton).not.toBeNull();
+    });
+
+    it('should hide cancel button when upload is complete', async () => {
+        component.file = new FileModel(<File> { name: 'fake-name' });
+        component.file.data = { entry: { properties: { 'cm:versionLabel': '1' } } };
+        component.file.status = FileUploadStatus.Complete;
+
+        fixture.detectChanges();
+        await fixture.whenStable();
+
+        const cancelButton = fixture.debugElement.query(By.css('[data-automation-id="cancel-upload-progress"]'));
+        expect(cancelButton).toBeNull();
+    });
+
+    it('should provide tooltip for the cancel button', async () => {
+        component.file = new FileModel(<File> { name: 'fake-name' });
+        component.file.data = { entry: { properties: { 'cm:versionLabel': '1' } } };
+        component.file.status = FileUploadStatus.Progress;
+
+        fixture.detectChanges();
+        await fixture.whenStable();
+
+        const cancelButton: HTMLDivElement = fixture.debugElement.query(By.css('[data-automation-id="cancel-upload-progress"]')).nativeElement;
+        expect(cancelButton.title).toBe('ADF_FILE_UPLOAD.BUTTON.CANCEL_FILE');
+    });
 });