Skip to content

Commit ca3f5e7

Browse files
zhostizhosti
committed
test(grid-filtering): add grid filtering event tests for different column types
1 parent be041f2 commit ca3f5e7

File tree

1 file changed

+207
-91
lines changed

1 file changed

+207
-91
lines changed

‎projects/igniteui-angular/src/lib/grids/grid/grid-filtering-ui.spec.ts

Lines changed: 207 additions & 91 deletions
Original file line numberDiff line numberDiff line change
@@ -464,61 +464,6 @@ describe('IgxGrid - Filtering Row UI actions #grid', () => {
464464
verifyFilterRowUI(input, close, reset, false);
465465
}));
466466

467-
it('Should emit filteringDone when we clicked reset', fakeAsync(() => {
468-
spyOn(grid.filtering, 'emit');
469-
spyOn(grid.filteringDone, 'emit');
470-
471-
const filterVal = 'search';
472-
const columnName = 'ProductName';
473-
474-
grid.filter(columnName, filterVal, IgxStringFilteringOperand.instance().condition('contains'));
475-
tick(100);
476-
fix.detectChanges();
477-
478-
const filteringExpressions = grid.filteringExpressionsTree.find(columnName) as FilteringExpressionsTree;
479-
const args = { owner: grid, cancel: false, filteringExpressions };
480-
expect(grid.filtering.emit).toHaveBeenCalledWith(args);
481-
expect(grid.filtering.emit).toHaveBeenCalledTimes(1);
482-
expect(grid.filteringDone.emit).toHaveBeenCalledWith(filteringExpressions);
483-
expect(grid.filteringDone.emit).toHaveBeenCalledTimes(1);
484-
485-
GridFunctions.clickFilterCellChip(fix, columnName);
486-
GridFunctions.resetFilterRow(fix);
487-
488-
const emptyFilter = new FilteringExpressionsTree(null, columnName);
489-
expect(grid.filtering.emit).toHaveBeenCalledWith({ owner: grid, cancel: false, filteringExpressions: emptyFilter });
490-
expect(grid.filtering.emit).toHaveBeenCalledTimes(2);
491-
expect(grid.filteringDone.emit).toHaveBeenCalledWith(emptyFilter);
492-
expect(grid.filteringDone.emit).toHaveBeenCalledTimes(2);
493-
494-
const filterUiRow = fix.debugElement.query(By.css(FILTER_UI_ROW));
495-
const reset = filterUiRow.queryAll(By.css('button'))[0];
496-
expect(reset.nativeElement.classList.contains('igx-button--disabled')).toEqual(true);
497-
}));
498-
499-
it('Should emit filteringDone when clear the input of filteringUI', fakeAsync(() => {
500-
spyOn(grid.filtering, 'emit');
501-
spyOn(grid.filteringDone, 'emit');
502-
const columnName = 'ProductName';
503-
const filterValue = 'search';
504-
grid.filter(columnName, filterValue, IgxStringFilteringOperand.instance().condition('contains'));
505-
tick(100);
506-
fix.detectChanges();
507-
508-
GridFunctions.clickFilterCellChip(fix, columnName);
509-
510-
spyOn(grid.filteringDone, 'emit');
511-
512-
grid.filteringRow.onClearClick();
513-
tick(100);
514-
fix.detectChanges();
515-
516-
const emptyFilter = new FilteringExpressionsTree(null, columnName);
517-
const args = { owner: grid, cancel: false, filteringExpressions: emptyFilter };
518-
expect(grid.filtering.emit).toHaveBeenCalledWith(args);
519-
expect(grid.filteringDone.emit).toHaveBeenCalledWith(emptyFilter);
520-
}));
521-
522467
it('Removing second condition removes the And/Or button', fakeAsync(() => {
523468
const filteringExpressionsTree = new FilteringExpressionsTree(FilteringLogic.And, 'ProductName');
524469
const expression = {
@@ -824,42 +769,6 @@ describe('IgxGrid - Filtering Row UI actions #grid', () => {
824769
expect(GridFunctions.getFilterRowRightArrowButton(fix)).not.toBe(null);
825770
}));
826771

827-
it('should update UI when chip is removed from header cell.', fakeAsync(() => {
828-
spyOn(grid.filtering, 'emit');
829-
spyOn(grid.filteringDone, 'emit');
830-
831-
const columnName = 'ProductName';
832-
grid.filter(columnName, 'I', IgxStringFilteringOperand.instance().condition('startsWith'));
833-
tick(30);
834-
fix.detectChanges();
835-
836-
expect(grid.rowList.length).toEqual(2);
837-
838-
const filteringExpressions = grid.filteringExpressionsTree.find(columnName) as FilteringExpressionsTree;
839-
const args = { owner: grid, cancel: false, filteringExpressions };
840-
expect(grid.filtering.emit).toHaveBeenCalledWith(args);
841-
expect(grid.filtering.emit).toHaveBeenCalledTimes(1);
842-
expect(grid.filteringDone.emit).toHaveBeenCalledWith(filteringExpressions);
843-
expect(grid.filteringDone.emit).toHaveBeenCalledTimes(1);
844-
845-
const filteringCells = GridFunctions.getFilteringCells(fix);
846-
const stringCellChip = filteringCells[1].query(By.css('igx-chip'));
847-
848-
// remove chip
849-
ControlsFunction.clickChipRemoveButton(stringCellChip.nativeElement);
850-
tick(30);
851-
fix.detectChanges();
852-
853-
expect(grid.rowList.length).toEqual(8);
854-
855-
const emptyFilter = new FilteringExpressionsTree(null, columnName);
856-
args.filteringExpressions = emptyFilter;
857-
expect(grid.filtering.emit).toHaveBeenCalledWith(args);
858-
expect(grid.filtering.emit).toHaveBeenCalledTimes(2);
859-
expect(grid.filteringDone.emit).toHaveBeenCalledWith(emptyFilter);
860-
expect(grid.filteringDone.emit).toHaveBeenCalledTimes(2);
861-
}));
862-
863772
it('should update UI when chip is removed from filter row.', fakeAsync(() => {
864773
grid.filter('ProductName', 'I', IgxStringFilteringOperand.instance().condition('startsWith'));
865774
fix.detectChanges();
@@ -2794,6 +2703,131 @@ describe('IgxGrid - Filtering Row UI actions #grid', () => {
27942703
expect(grid.rowList.length).toEqual(1);
27952704
}));
27962705
});
2706+
2707+
describe('Filtering events', () => {
2708+
let fix: ComponentFixture<any>;
2709+
let grid: IgxGridComponent;
2710+
2711+
const cal = SampleTestData.timeGenerator;
2712+
const today = SampleTestData.today;
2713+
2714+
beforeEach(fakeAsync(() => {
2715+
fix = TestBed.createComponent(IgxGridDatesFilteringComponent);
2716+
fix.detectChanges();
2717+
grid = fix.componentInstance.grid;
2718+
2719+
spyOn(grid.filtering, 'emit');
2720+
spyOn(grid.filteringDone, 'emit');
2721+
}));
2722+
2723+
it('Should emit filteringDone when we clicked reset - Date column type', fakeAsync(() => {
2724+
emitFilteringDoneOnResetClick(
2725+
fix,
2726+
grid,
2727+
cal.timedelta(today, 'day', 15),
2728+
"ReleaseDate",
2729+
IgxDateFilteringOperand.instance().condition("equals")
2730+
);
2731+
}));
2732+
2733+
it('Should emit filteringDone when we clicked reset - String column type', fakeAsync(() => {
2734+
emitFilteringDoneOnResetClick(
2735+
fix,
2736+
grid,
2737+
"search",
2738+
"ProductName",
2739+
IgxStringFilteringOperand.instance().condition("contains")
2740+
);
2741+
}));
2742+
2743+
it('Should emit filteringDone when we clicked reset - Number column type', fakeAsync(() => {
2744+
emitFilteringDoneOnResetClick(
2745+
fix,
2746+
grid,
2747+
100,
2748+
"Downloads",
2749+
IgxStringFilteringOperand.instance().condition("equals")
2750+
);
2751+
}));
2752+
2753+
it('Should emit filteringDone when clear the input of filteringUI - Date column type', fakeAsync(() => {
2754+
emitFilteringDoneOnInputClear(
2755+
fix,
2756+
grid,
2757+
cal.timedelta(today, 'day', 15),
2758+
"ReleaseDate",
2759+
IgxDateFilteringOperand.instance().condition("equals")
2760+
);
2761+
}));
2762+
2763+
it('Should emit filteringDone when clear the input of filteringUI - String column type', fakeAsync(() => {
2764+
emitFilteringDoneOnInputClear(
2765+
fix,
2766+
grid,
2767+
"search",
2768+
"ProductName",
2769+
IgxStringFilteringOperand.instance().condition("contains")
2770+
);
2771+
}));
2772+
2773+
it('Should emit filteringDone when clear the input of filteringUI - Number column type', fakeAsync(() => {
2774+
emitFilteringDoneOnInputClear(
2775+
fix,
2776+
grid,
2777+
3,
2778+
"Downloads",
2779+
IgxStringFilteringOperand.instance().condition("equals")
2780+
);
2781+
}));
2782+
2783+
it('should update UI when chip is removed from header cell - Date column type.', fakeAsync(() => {
2784+
verifyRemoveChipFromHeader(
2785+
fix,
2786+
grid,
2787+
cal.timedelta(today, 'day', 15),
2788+
"ReleaseDate",
2789+
IgxDateFilteringOperand.instance().condition("equals"),
2790+
1,
2791+
4
2792+
);
2793+
}));
2794+
2795+
it('should update UI when chip is removed from header cell - String column type.', fakeAsync(() => {
2796+
verifyRemoveChipFromHeader(
2797+
fix,
2798+
grid,
2799+
"I",
2800+
"ProductName",
2801+
IgxStringFilteringOperand.instance().condition("startsWith"),
2802+
2,
2803+
1
2804+
);
2805+
}));
2806+
2807+
it('should update UI when chip is removed from header cell - Number column type.', fakeAsync(() => {
2808+
verifyRemoveChipFromHeader(
2809+
fix,
2810+
grid,
2811+
100,
2812+
"Downloads",
2813+
IgxStringFilteringOperand.instance().condition("equals"),
2814+
1,
2815+
2
2816+
);
2817+
}));
2818+
2819+
it('should emit filteringDone after chip is close from filtering row - Date column type', fakeAsync(() => {
2820+
closeChipFromFiteringUIRow(fix, grid, 'ReleaseDate', 4);
2821+
}));
2822+
2823+
it('should emit filteringDone after chip is close from filtering row - String column type', fakeAsync(() => {
2824+
closeChipFromFiteringUIRow(fix, grid, 'ProductName', 9);
2825+
}));
2826+
2827+
it('should emit filteringDone after chip is close from filtering row - Number column type', fakeAsync(() => {
2828+
closeChipFromFiteringUIRow(fix, grid, 'Downloads', 7);
2829+
}));
2830+
});
27972831
});
27982832

27992833
describe('IgxGrid - Filtering actions - Excel style filtering #grid', () => {
@@ -6460,3 +6494,85 @@ const verifyChipVisibility = (fix, index: number, shouldBeFullyVisible: boolean)
64606494
expect(chipRect.left >= visibleChipAreaRect.left && chipRect.right <= visibleChipAreaRect.right)
64616495
.toBe(shouldBeFullyVisible, 'chip[' + index + '] visibility is incorrect');
64626496
};
6497+
6498+
const emitFilteringDoneOnResetClick = (fix, grid, filterVal: any, columnName: string, condition) => {
6499+
filterGrid(fix, grid, columnName, filterVal, condition)
6500+
6501+
const filteringExpressions = grid.filteringExpressionsTree.find(columnName) as FilteringExpressionsTree;
6502+
verifyEmitFilteringDone(grid, filteringExpressions, 1);
6503+
6504+
GridFunctions.clickFilterCellChip(fix, columnName);
6505+
GridFunctions.resetFilterRow(fix);
6506+
6507+
const emptyFilter = new FilteringExpressionsTree(null, columnName);
6508+
verifyEmitFilteringDone(grid, emptyFilter, 2);
6509+
6510+
const filterUiRow = fix.debugElement.query(By.css(FILTER_UI_ROW));
6511+
const reset = filterUiRow.queryAll(By.css('button'))[0];
6512+
expect(reset.nativeElement.classList.contains('igx-button--disabled')).toEqual(true);
6513+
};
6514+
6515+
const emitFilteringDoneOnInputClear = (fix, grid, filterVal, columnName, condition) => {
6516+
filterGrid(fix, grid, columnName, filterVal, condition)
6517+
6518+
GridFunctions.clickFilterCellChip(fix, columnName);
6519+
6520+
spyOn(grid.filteringDone, 'emit');
6521+
6522+
grid.filteringRow.onClearClick();
6523+
tick(100);
6524+
fix.detectChanges();
6525+
6526+
const emptyFilter = new FilteringExpressionsTree(null, columnName);
6527+
verifyEmitFilteringDone(grid, emptyFilter, 2);
6528+
};
6529+
6530+
const verifyRemoveChipFromHeader = (fix, grid, filterVal, columnName, condition, rowListLength, cellIndex) => {
6531+
filterGrid(fix, grid, columnName, filterVal, condition);
6532+
6533+
const filteringExpressions = grid.filteringExpressionsTree.find(columnName) as FilteringExpressionsTree;
6534+
verifyEmitFilteringDone(grid, filteringExpressions, 1);
6535+
6536+
const filteringCells = GridFunctions.getFilteringCells(fix);
6537+
const stringCellChip = filteringCells[cellIndex].query(By.css('igx-chip'));
6538+
6539+
// remove chip
6540+
ControlsFunction.clickChipRemoveButton(stringCellChip.nativeElement);
6541+
tick(30);
6542+
fix.detectChanges();
6543+
6544+
expect(grid.rowList.length).toEqual(8);
6545+
6546+
const emptyFilter = new FilteringExpressionsTree(null, columnName);
6547+
verifyEmitFilteringDone(grid, emptyFilter, 2);
6548+
}
6549+
6550+
const closeChipFromFiteringUIRow = (fix, grid, columnName, index) => {
6551+
GridFunctions.clickFilterCellChip(fix, columnName);
6552+
6553+
const filterUIRow = fix.debugElement.query(By.css(FILTER_UI_ROW));
6554+
const close = filterUIRow.queryAll(By.css('button'))[1];
6555+
6556+
GridFunctions.openFilterDDAndSelectCondition(fix, index);
6557+
6558+
close.triggerEventHandler('click', null);
6559+
tick();
6560+
fix.detectChanges();
6561+
6562+
const filteringExpressions = grid.filteringExpressionsTree.find(columnName) as FilteringExpressionsTree;
6563+
verifyEmitFilteringDone(grid, filteringExpressions, 1);
6564+
}
6565+
6566+
const verifyEmitFilteringDone = (grid, filteringExpressions, calledTimes) => {
6567+
const args = { owner: grid, cancel: false, filteringExpressions };
6568+
expect(grid.filtering.emit).toHaveBeenCalledWith(args);
6569+
expect(grid.filtering.emit).toHaveBeenCalledTimes(calledTimes);
6570+
expect(grid.filteringDone.emit).toHaveBeenCalledWith(filteringExpressions);
6571+
expect(grid.filteringDone.emit).toHaveBeenCalledTimes(calledTimes);
6572+
}
6573+
6574+
const filterGrid = (fix, grid, columnName, filterVal, condition) => {
6575+
grid.filter(columnName, filterVal, condition);
6576+
tick(100);
6577+
fix.detectChanges();
6578+
}

0 commit comments

Comments
 (0)