Skip to content

Commit

Permalink
fix(module:table): fix th check not trigger bug (NG-ZORRO#3064)
Browse files Browse the repository at this point in the history
  • Loading branch information
vthinkxie authored and Ricbet committed Apr 9, 2020
1 parent 6114276 commit 3dff5c4
Show file tree
Hide file tree
Showing 4 changed files with 38 additions and 12 deletions.
1 change: 1 addition & 0 deletions components/table/demo/default-filter.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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();
Expand Down
8 changes: 4 additions & 4 deletions components/table/nz-th.component.html
Original file line number Diff line number Diff line change
Expand Up @@ -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">
Expand All @@ -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>
3 changes: 0 additions & 3 deletions components/table/nz-th.component.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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;
}

Expand Down
38 changes: 33 additions & 5 deletions components/table/nz-th.spec.ts
Original file line number Diff line number Diff line change
@@ -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';
Expand All @@ -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();
Expand Down Expand Up @@ -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;
Expand Down Expand Up @@ -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);
Expand Down Expand Up @@ -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;
Expand All @@ -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"
Expand All @@ -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');
Expand Down

0 comments on commit 3dff5c4

Please sign in to comment.