fix(module:table): fix th check not trigger bug (NG-ZORRO#3064)

close NG-ZORRO#3028 close NG-ZORRO#3056 close NG-ZORRO#3058
Ricbet · Apr 9, 2020 · 3dff5c4 · 3dff5c4
1 parent 6114276
commit 3dff5c4
Show file tree

Hide file tree

Showing 4 changed files with 38 additions and 12 deletions.
diff --git a/components/table/demo/default-filter.ts b/components/table/demo/default-filter.ts
@@ -58,6 +58,7 @@ export class NzDemoTableDefaultFilterComponent {
   }
 
   filter(listOfSearchName: string[], searchAddress: string): void {
+    console.log(listOfSearchName, searchAddress);
     this.listOfSearchName = listOfSearchName;
     this.searchAddress = searchAddress;
     this.search();

diff --git a/components/table/nz-th.component.html b/components/table/nz-th.component.html
@@ -43,7 +43,7 @@
   <ul nz-menu>
     <ng-container *ngIf="nzFilterMultiple">
       <li nz-menu-item *ngFor="let filter of multipleFilterList" (click)="checkMultiple(filter)">
-        <label nz-checkbox [ngModel]="filter.checked"></label><span>{{filter.text}}</span>
+        <label nz-checkbox [ngModel]="filter.checked" (ngModelChange)="checkMultiple(filter)"></label><span>{{filter.text}}</span>
       </li>
     </ng-container>
     <ng-container *ngIf="!nzFilterMultiple">
@@ -54,10 +54,10 @@
   </ul>
   <div class="ant-table-filter-dropdown-btns">
     <a class="ant-table-filter-dropdown-link confirm" (click)="hideDropDown()">
-      <span (click)="search()">{{ locale.filterConfirm }}</span>
+      <span>{{ locale.filterConfirm }}</span>
     </a>
-    <a class="ant-table-filter-dropdown-link clear" (click)="hideDropDown()">
-      <span (click)="reset()">{{ locale.filterReset }}</span>
+    <a class="ant-table-filter-dropdown-link clear" (click)="reset();hideDropDown()">
+      <span>{{ locale.filterReset }}</span>
     </a>
   </div>
 </nz-dropdown>
diff --git a/components/table/nz-th.component.ts b/components/table/nz-th.component.ts
@@ -129,14 +129,11 @@ export class NzThComponent implements OnChanges, OnInit, OnDestroy {
     } else {
       this.nzFilterChange.emit(this.filterValue);
     }
-    this.hideDropDown();
   }
 
   reset(): void {
     this.initMultipleFilterList(true);
     this.initSingleFilterList(true);
-    this.search();
-    this.hideDropDown();
     this.hasFilterValue = false;
   }
 

diff --git a/components/table/nz-th.spec.ts b/components/table/nz-th.spec.ts
@@ -1,6 +1,7 @@
 import { Component, ViewChild } from '@angular/core';
-import { fakeAsync, flush, TestBed } from '@angular/core/testing';
+import { fakeAsync, flush, tick, TestBed } from '@angular/core/testing';
 import { By } from '@angular/platform-browser';
+import { NoopAnimationsModule } from '@angular/platform-browser/animations';
 import { NzIconTestModule } from '../icon/nz-icon-test.module';
 import { NzTableComponent } from './nz-table.component';
 import { NzTableModule } from './nz-table.module';
@@ -9,7 +10,7 @@ import { NzThComponent } from './nz-th.component';
 describe('nz-th', () => {
   beforeEach(fakeAsync(() => {
     TestBed.configureTestingModule({
-      imports     : [ NzTableModule, NzIconTestModule ],
+      imports     : [ NzTableModule, NzIconTestModule, NoopAnimationsModule ],
       declarations: [ NzThTestNzTableComponent, NzThTestTableDefaultFilterComponent ]
     });
     TestBed.compileComponents();
@@ -163,11 +164,11 @@ describe('nz-th', () => {
     it('should showFilter work', () => {
       fixture.detectChanges();
       expect(th.nativeElement.classList).not.toContain('ant-table-column-has-filters');
-      expect(th.nativeElement.querySelector('.anticon anticon-filter')).toBeNull();
+      expect(th.nativeElement.querySelector('.anticon.anticon-filter')).toBeNull();
       testComponent.showFilter = true;
       fixture.detectChanges();
       expect(th.nativeElement.classList).toContain('ant-table-column-has-filters');
-      expect(th.nativeElement.querySelector('.anticon anticon-filter')).toBeDefined();
+      expect(th.nativeElement.querySelector('.anticon.anticon-filter')).toBeDefined();
     });
     it('should filterChange work', () => {
       testComponent.showFilter = true;
@@ -217,6 +218,7 @@ describe('nz-th', () => {
       fixture.detectChanges();
       expect(testComponent.filterChange).toHaveBeenCalledTimes(0);
       testComponent.nzThComponent.reset();
+      testComponent.nzThComponent.dropDownVisibleChange(false);
       fixture.detectChanges();
       expect(testComponent.filterChange).toHaveBeenCalledWith([]);
       expect(testComponent.nzThComponent.hasFilterValue).toBe(false);
@@ -248,6 +250,31 @@ describe('nz-th', () => {
         }).createComponent(NzTestDisableThComponent);
       }).toThrow();
     });
+    it('should filter multiple check work', fakeAsync(() => {
+      fixture.detectChanges();
+      testComponent.showFilter = true;
+      fixture.detectChanges();
+      th.nativeElement.querySelector('.anticon.anticon-filter').click();
+      fixture.detectChanges();
+      tick(1000);
+      fixture.detectChanges();
+      expect(testComponent.filterChange).toHaveBeenCalledTimes(0);
+      (document.querySelector('.ant-checkbox-input') as HTMLInputElement).click();
+      fixture.detectChanges();
+      tick(1000);
+      fixture.detectChanges();
+      (document.querySelector('.confirm') as HTMLInputElement).click();
+      fixture.detectChanges();
+      tick(1000);
+      fixture.detectChanges();
+      expect(testComponent.filterChange).toHaveBeenCalledTimes(1);
+      expect(testComponent.filterChange.calls.mostRecent().args[0][0]).toBe('1');
+      // flush all microtask
+      testComponent.destroy = true;
+      fixture.detectChanges();
+      tick(1000);
+      fixture.detectChanges();
+    }));
   });
   describe('nz-th with default filter in nz-table', () => {
     let fixture;
@@ -268,7 +295,7 @@ describe('nz-th', () => {
 @Component({
   selector: 'nz-th-test-nz-table',
   template: `
-    <nz-table>
+    <nz-table *ngIf="!destroy">
       <th
         [nzExpand]="expand"
         [nzShowCheckbox]="showCheckbox"
@@ -293,6 +320,7 @@ describe('nz-th', () => {
 })
 export class NzThTestNzTableComponent {
   @ViewChild(NzThComponent) nzThComponent: NzThComponent;
+  destroy = false;
   showCheckbox = false;
   checked = false;
   checkedChange = jasmine.createSpy('show change');