fix(module:upload): fix parameter value muse be a function or boolean…

… in nzRemove (#1851) close #1850
NG-ZORRO · Jul 22, 2018 · 3532bbe · 3532bbe
1 parent 6f9b371
commit 3532bbe
Show file tree

Hide file tree

Showing 2 changed files with 36 additions and 9 deletions.
diff --git a/components/upload/nz-upload.component.ts b/components/upload/nz-upload.component.ts
@@ -137,7 +137,7 @@ export class NzUploadComponent implements OnInit, OnChanges, OnDestroy {
     return this._withCredentials;
   }
 
-  @Input() nzRemove: ((file: UploadFile) => boolean) | Observable<boolean>;
+  @Input() nzRemove: (file: UploadFile) => boolean | Observable<boolean>;
   @Input() nzPreview: (file: UploadFile) => void;
 
   @Output() nzChange: EventEmitter<UploadChangeParam> = new EventEmitter<UploadChangeParam>();
@@ -314,9 +314,11 @@ export class NzUploadComponent implements OnInit, OnChanges, OnDestroy {
   onRemove = (file: UploadFile): void => {
     this.upload.abort(file);
     file.status = 'removed';
-    ((this.nzRemove ? this.nzRemove instanceof Observable ? this.nzRemove : of(this.nzRemove(file)) : of(true)) as Observable<any>)
+    const fnRes = typeof this.nzRemove === 'function' ?
+      this.nzRemove(file) : this.nzRemove == null ? true : this.nzRemove;
+    (fnRes instanceof Observable ? fnRes : of(fnRes))
     .pipe(filter((res: boolean) => res))
-    .subscribe(res => {
+    .subscribe(() => {
       this.nzFileList = this.removeFileItem(file, this.nzFileList);
       this.nzChange.emit({
         file,

diff --git a/components/upload/upload.spec.ts b/components/upload/upload.spec.ts
@@ -1,12 +1,13 @@
 // tslint:disable:no-any
 import { CommonModule } from '@angular/common';
 import { HttpClientTestingModule, HttpTestingController } from '@angular/common/http/testing';
-import { Component, ContentChild, DebugElement, Injector, Input, ViewChild, ViewEncapsulation } from '@angular/core';
+import { Component, DebugElement, Injector, ViewChild, ViewEncapsulation } from '@angular/core';
 import { fakeAsync, tick, ComponentFixture, TestBed } from '@angular/core/testing';
 import { FormsModule } from '@angular/forms';
 import { By } from '@angular/platform-browser';
 import { NoopAnimationsModule } from '@angular/platform-browser/animations';
 import { of, Observable } from 'rxjs';
+import { delay } from 'rxjs/operators';
 
 import { NzI18nModule, NzI18nService } from '../i18n';
 import en_US from '../i18n/languages/en_US';
@@ -17,7 +18,6 @@ import { ShowUploadListInterface, UploadChangeParam, UploadFile, UploadFilter, U
 import { NzUploadBtnComponent } from './nz-upload-btn.component';
 import { NzUploadListComponent } from './nz-upload-list.component';
 import { NzUploadComponent } from './nz-upload.component';
-import { NzUploadModule } from './nz-upload.module';
 
 const PNGSMALL = { target: { files: [new File([`iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR42mP8/5+hHgAHggJ/PchI7wAAAABJRU5ErkJggg==`], 'test.png', {
   type: 'image/png'
@@ -392,7 +392,7 @@ describe('upload', () => {
         httpMock.verify();
       });
 
-      describe('[onRemove]', () => {
+      describe('[nzRemove]', () => {
         const INITCOUNT = 3;
         beforeEach(() => {
           instance.nzFileList = [
@@ -419,8 +419,33 @@ describe('upload', () => {
           ] as any[];
           fixture.detectChanges();
         });
-        it('should be with Observable', () => {
-          instance.onRemove = of(false);
+        it('should be return a Observable', () => {
+          instance.onRemove = () => of(false);
+          fixture.detectChanges();
+          expect(dl.queryAll(By.css('.anticon-cross')).length).toBe(INITCOUNT);
+          dl.query(By.css('.anticon-cross')).nativeElement.click();
+          expect(dl.queryAll(By.css('.anticon-cross')).length).toBe(INITCOUNT);
+        });
+        it('should be return a Observable includes a delay operation', (done: () => void) => {
+          const DELAY = 20;
+          instance.onRemove = (file: UploadFile) => of(true).pipe(delay(DELAY));
+          fixture.detectChanges();
+          expect(dl.queryAll(By.css('.anticon-cross')).length).toBe(INITCOUNT);
+          dl.query(By.css('.anticon-cross')).nativeElement.click();
+          setTimeout(() => {
+            expect(dl.queryAll(By.css('.anticon-cross')).length).toBe(INITCOUNT - 1);
+            done();
+          }, DELAY + 1);
+        });
+        it('should be return a truth value', () => {
+          instance.onRemove = () => true;
+          fixture.detectChanges();
+          expect(dl.queryAll(By.css('.anticon-cross')).length).toBe(INITCOUNT);
+          dl.query(By.css('.anticon-cross')).nativeElement.click();
+          expect(dl.queryAll(By.css('.anticon-cross')).length).toBe(INITCOUNT - 1);
+        });
+        it('should be return a falsy value', () => {
+          instance.onRemove = () => false;
           fixture.detectChanges();
           expect(dl.queryAll(By.css('.anticon-cross')).length).toBe(INITCOUNT);
           dl.query(By.css('.anticon-cross')).nativeElement.click();
@@ -923,7 +948,7 @@ class TestUploadComponent {
     this._onPreview = true;
   }
   _onRemove = false;
-  onRemove: ((file: UploadFile) => boolean) | Observable<boolean> = (file: UploadFile): boolean => {
+  onRemove: (file: UploadFile) => boolean | Observable<boolean> = (file: UploadFile): boolean => {
     this._onRemove = true;
     return true;
   }