Skip to content

Commit f5e7441

Browse files
mddragnevmddragnev
committed
test(filtering): Fix tests because of introduced debounce
1 parent 518bd16 commit f5e7441

File tree

2 files changed

+63
-26
lines changed

2 files changed

+63
-26
lines changed

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

Lines changed: 61 additions & 26 deletions
Original file line numberDiff line numberDiff line change
@@ -16,7 +16,7 @@ import {
1616
import { IgxDatePickerComponent } from '../../date-picker/date-picker.component';
1717
import { IgxGridFilteringCellComponent } from '../filtering/base/grid-filtering-cell.component';
1818
import { IgxGridHeaderComponent } from '../headers/grid-header.component';
19-
import { IgxGridFilteringRowComponent } from '../filtering/base/grid-filtering-row.component';
19+
import { IgxGridFilteringRowComponent, INPUT_DEBOUNCE_TIME } from '../filtering/base/grid-filtering-row.component';
2020
import { GridFunctions, GridSelectionFunctions } from '../../test-utils/grid-functions.spec';
2121
import { IgxBadgeComponent } from '../../badge/badge.component';
2222
import { IgxIconComponent } from '../../icon/icon.component';
@@ -51,7 +51,7 @@ import { GridSelectionMode, FilterMode, Size } from '../common/enums';
5151
import { ControlsFunction } from '../../test-utils/controls-functions.spec';
5252
import { FilteringStrategy, FormattedValuesFilteringStrategy } from '../../data-operations/filtering-strategy';
5353
import { IgxInputGroupComponent } from '../../input-group/public_api';
54-
import { formatDate, getComponentSize } from '../../core/utils';
54+
import { getComponentSize } from '../../core/utils';
5555
import { IgxCalendarComponent } from '../../calendar/calendar.component';
5656
import { GridResourceStringsEN } from '../../core/i18n/grid-resources';
5757
import { setElementSize } from '../../test-utils/helper-utils.spec';
@@ -87,6 +87,9 @@ describe('IgxGrid - Filtering Row UI actions #grid', () => {
8787
const today = SampleTestData.today;
8888

8989
beforeEach(fakeAsync(() => {
90+
TestBed.configureTestingModule({
91+
providers: [{ provide: INPUT_DEBOUNCE_TIME, useValue: 0 }]
92+
});
9093
fix = TestBed.createComponent(IgxGridFilteringComponent);
9194
fix.detectChanges();
9295
grid = fix.componentInstance.grid;
@@ -154,13 +157,17 @@ describe('IgxGrid - Filtering Row UI actions #grid', () => {
154157
// ends with
155158
GridFunctions.openFilterDDAndSelectCondition(fix, 3);
156159
GridFunctions.typeValueInFilterRowInput('script', fix, input);
160+
tick();
161+
fix.detectChanges();
157162

158163
expect(grid.rowList.length).toEqual(2);
159164
verifyFilterRowUI(input, close, reset, false);
160165

161166
// does not contain
162167
GridFunctions.openFilterDDAndSelectCondition(fix, 1);
163168
GridFunctions.typeValueInFilterRowInput('script', fix, input);
169+
tick();
170+
fix.detectChanges();
164171

165172
verifyFilterRowUI(input, close, reset, false);
166173
expect(grid.rowList.length).toEqual(6);
@@ -224,6 +231,8 @@ describe('IgxGrid - Filtering Row UI actions #grid', () => {
224231
// does not equal
225232
GridFunctions.openFilterDDAndSelectCondition(fix, 1);
226233
GridFunctions.typeValueInFilterRowInput(100, fix, input);
234+
tick();
235+
fix.detectChanges();
227236

228237
expect(grid.rowList.length).toEqual(7);
229238
verifyFilterRowUI(input, close, reset, false);
@@ -236,6 +245,9 @@ describe('IgxGrid - Filtering Row UI actions #grid', () => {
236245
// greater than or equal to
237246
GridFunctions.openFilterDDAndSelectCondition(fix, 4);
238247
GridFunctions.typeValueInFilterRowInput(254, fix, input);
248+
tick();
249+
fix.detectChanges();
250+
239251

240252
expect(grid.rowList.length).toEqual(3);
241253
verifyFilterRowUI(input, close, reset, false);
@@ -474,8 +486,8 @@ describe('IgxGrid - Filtering Row UI actions #grid', () => {
474486
GridFunctions.clickFilterCellChipUI(fix, 'ReleaseDateTime');
475487

476488
let filterUIRow = fix.debugElement.query(By.css(FILTER_UI_ROW));
477-
let inputDirectiveInstance = filterUIRow.query(By.directive(IgxDateTimeEditorDirective))
478-
.injector.get(IgxDateTimeEditorDirective);
489+
let inputDirectiveInstance = filterUIRow.query(By.directive(IgxDateTimeEditorDirective))
490+
.injector.get(IgxDateTimeEditorDirective);
479491
expect(inputDirectiveInstance.inputFormat).toMatch('dd-MM-yyyy');
480492
expect(inputDirectiveInstance.displayFormat).toMatch('yyyy-dd-MM');
481493

@@ -508,8 +520,8 @@ describe('IgxGrid - Filtering Row UI actions #grid', () => {
508520
fix.detectChanges();
509521

510522
let filterUIRow = fix.debugElement.query(By.css(FILTER_UI_ROW));
511-
let dateTimeEditor = filterUIRow.query(By.directive(IgxDateTimeEditorDirective))
512-
.injector.get(IgxDateTimeEditorDirective);
523+
let dateTimeEditor = filterUIRow.query(By.directive(IgxDateTimeEditorDirective))
524+
.injector.get(IgxDateTimeEditorDirective);
513525
expect(dateTimeEditor.inputFormat).toMatch('yyyy--dd--MM');
514526
expect(dateTimeEditor.displayFormat).toMatch('yyyy--dd--MM');
515527

@@ -519,7 +531,7 @@ describe('IgxGrid - Filtering Row UI actions #grid', () => {
519531

520532
filterUIRow = fix.debugElement.query(By.css(FILTER_UI_ROW));
521533
dateTimeEditor = filterUIRow.query(By.directive(IgxDateTimeEditorDirective))
522-
.injector.get(IgxDateTimeEditorDirective);
534+
.injector.get(IgxDateTimeEditorDirective);
523535
// since 'shortTime' is numeric, input format will include its numeric parts
524536
expect(dateTimeEditor.inputFormat.normalize('NFKC')).toMatch('hh:mm tt');
525537
expect(dateTimeEditor.displayFormat).toMatch('shortTime');
@@ -536,6 +548,8 @@ describe('IgxGrid - Filtering Row UI actions #grid', () => {
536548
const close = filterUIRow.queryAll(By.css('button'))[1];
537549

538550
GridFunctions.typeValueInFilterRowInput('a', fix, input);
551+
tick();
552+
fix.detectChanges();
539553

540554
expect(grid.rowList.length).toEqual(1);
541555
expect(grid.getCellByColumn(0, 'AnotherField').value).toMatch('custom');
@@ -626,6 +640,8 @@ describe('IgxGrid - Filtering Row UI actions #grid', () => {
626640
GridFunctions.clickFilterCellChip(fix, 'ProductName');
627641

628642
GridFunctions.typeValueInFilterRowInput(filterValue, fix);
643+
tick();
644+
fix.detectChanges();
629645

630646
const filterUIRow = fix.debugElement.query(By.css(FILTER_UI_ROW));
631647
const filterChip = filterUIRow.query(By.directive(IgxChipComponent));
@@ -645,15 +661,17 @@ describe('IgxGrid - Filtering Row UI actions #grid', () => {
645661
tick(16); // onConditionsChanged rAF
646662

647663
GridFunctions.typeValueInFilterRowInput(filterValue, fix);
664+
tick();
665+
fix.detectChanges();
648666

649667
const filterUIRow = fix.debugElement.query(By.css(FILTER_UI_ROW));
650668
const filterChip = filterUIRow.query(By.directive(IgxChipComponent));
651669
expect(filterChip).toBeTruthy();
652670
expect(filterChip.componentInstance.selected).toBeTruthy();
653671

654672
grid.nativeElement.focus();
655-
fix.detectChanges();
656673
tick(100);
674+
fix.detectChanges();
657675

658676
expect(filterChip.componentInstance.selected).toBeFalsy();
659677
}));
@@ -1000,21 +1018,29 @@ describe('IgxGrid - Filtering Row UI actions #grid', () => {
10001018

10011019
// Set input and confirm
10021020
GridFunctions.typeValueInFilterRowInput('-1', fix);
1021+
tick();
1022+
fix.detectChanges();
10031023

10041024
expect(input.componentInstance.value).toEqual('-1');
10051025
expect(grid.rowList.length).toEqual(1);
10061026

10071027
GridFunctions.typeValueInFilterRowInput('0', fix);
1028+
tick();
1029+
fix.detectChanges();
10081030

10091031
expect(input.componentInstance.value).toEqual('0');
10101032
expect(grid.rowList.length).toEqual(0);
10111033

10121034
GridFunctions.typeValueInFilterRowInput('-0.5', fix);
1035+
tick();
1036+
fix.detectChanges();
10131037

10141038
expect(input.componentInstance.value).toEqual('-0.5');
10151039
expect(grid.rowList.length).toEqual(1);
10161040

10171041
GridFunctions.typeValueInFilterRowInput('', fix);
1042+
tick();
1043+
fix.detectChanges();
10181044

10191045
expect(input.componentInstance.value).toEqual(null);
10201046
expect(grid.rowList.length).toEqual(3);
@@ -1039,6 +1065,8 @@ describe('IgxGrid - Filtering Row UI actions #grid', () => {
10391065

10401066
// Set input and confirm
10411067
GridFunctions.typeValueInFilterRowInput('a', fix, input);
1068+
tick();
1069+
fix.detectChanges();
10421070

10431071
// Check a chip is created after input and is marked as selected.
10441072
const filterChip = filteringRow.query(By.directive(IgxChipComponent));
@@ -1672,6 +1700,8 @@ describe('IgxGrid - Filtering Row UI actions #grid', () => {
16721700

16731701
// Type 'ang' in the filter row input.
16741702
GridFunctions.typeValueInFilterRowInput('ang', fix);
1703+
tick();
1704+
fix.detectChanges();
16751705

16761706
// Verify chip is selected (in edit mode).
16771707
const filteringRow = fix.debugElement.query(By.directive(IgxGridFilteringRowComponent));
@@ -1694,6 +1724,8 @@ describe('IgxGrid - Filtering Row UI actions #grid', () => {
16941724

16951725
// Type 'ang' in the filter row input.
16961726
GridFunctions.typeValueInFilterRowInput('ang', fix);
1727+
tick();
1728+
fix.detectChanges();
16971729

16981730
// Verify chip is selected (in edit mode).
16991731
const filteringRow = fix.debugElement.query(By.directive(IgxGridFilteringRowComponent));
@@ -1739,7 +1771,7 @@ describe('IgxGrid - Filtering Row UI actions #grid', () => {
17391771

17401772
filterUIRow = grid.theadRow.filterRow;
17411773
expect(filterUIRow).toBeUndefined();
1742-
}));
1774+
}));
17431775

17441776
it('Should navigate to first cell of grid when pressing \'Tab\' on the last filterCell chip.', fakeAsync(() => {
17451777
pending('Should be fixed with headers navigation');
@@ -2350,7 +2382,7 @@ describe('IgxGrid - Filtering Row UI actions #grid', () => {
23502382
fix.detectChanges();
23512383

23522384
const prefix = GridFunctions.getFilterRowPrefix(fix).nativeElement;
2353-
UIInteractions.triggerKeyDownEvtUponElem('ArrowRight' , prefix);
2385+
UIInteractions.triggerKeyDownEvtUponElem('ArrowRight', prefix);
23542386
fix.detectChanges();
23552387

23562388
expect(console.error).not.toHaveBeenCalled();
@@ -2362,6 +2394,9 @@ describe('IgxGrid - Filtering Row UI actions #grid', () => {
23622394
let grid: IgxGridComponent;
23632395

23642396
beforeEach(fakeAsync(() => {
2397+
TestBed.configureTestingModule({
2398+
providers: [{ provide: INPUT_DEBOUNCE_TIME, useValue: 0 }]
2399+
});
23652400
fix = TestBed.createComponent(IgxGridFilteringComponent);
23662401
fix.detectChanges();
23672402
grid = fix.componentInstance.grid;
@@ -2436,10 +2471,11 @@ describe('IgxGrid - Filtering Row UI actions #grid', () => {
24362471

24372472
// Add first chip.
24382473
GridFunctions.typeValueInFilterRowInput('a', fix);
2439-
tick(100);
2474+
tick();
2475+
fix.detectChanges();
24402476

24412477
grid.getColumnByName('ProductName').hidden = true;
2442-
tick(100);
2478+
tick();
24432479
fix.detectChanges();
24442480

24452481
// Check that the filterRow is closed
@@ -4374,7 +4410,7 @@ describe('IgxGrid - Filtering actions - Excel style filtering #grid', () => {
43744410
expect(displayContainerRect.height > listHeight + itemHeight && displayContainerRect.height < listHeight + (itemHeight * 2)).toBe(true, 'incorrect search display container height');
43754411
// Verify rendered list items count.
43764412
const listItems = displayContainer.querySelectorAll('igx-list-item');
4377-
expect(listItems.length).toBe(Math.ceil(listHeight / itemHeight ) + 1, 'incorrect rendered list items count');
4413+
expect(listItems.length).toBe(Math.ceil(listHeight / itemHeight) + 1, 'incorrect rendered list items count');
43784414
}));
43794415

43804416
it('should correctly display all items in search list after filtering it', (async () => {
@@ -5204,7 +5240,7 @@ describe('IgxGrid - Filtering actions - Excel style filtering #grid', () => {
52045240
tick(200);
52055241

52065242
const dateTimeEditor = fix.debugElement.query(By.directive(IgxDateTimeEditorDirective))
5207-
.injector.get(IgxDateTimeEditorDirective);
5243+
.injector.get(IgxDateTimeEditorDirective);
52085244
expect(dateTimeEditor.inputFormat).toMatch(column.editorOptions.dateTimeFormat);
52095245
expect(dateTimeEditor.displayFormat).toMatch(column.pipeArgs.format);
52105246
}));
@@ -5230,7 +5266,7 @@ describe('IgxGrid - Filtering actions - Excel style filtering #grid', () => {
52305266
tick(200);
52315267

52325268
const dateTimeEditorDirective = fix.debugElement.query(By.directive(IgxDateTimeEditorDirective))
5233-
.injector.get(IgxDateTimeEditorDirective);
5269+
.injector.get(IgxDateTimeEditorDirective);
52345270
expect(dateTimeEditorDirective.inputFormat.normalize('NFKC')).toMatch('dd-MM-yyyy');
52355271
expect(dateTimeEditorDirective.displayFormat.normalize('NFKC')).toMatch('dd-MM-yyyy');
52365272
}));
@@ -5253,7 +5289,7 @@ describe('IgxGrid - Filtering actions - Excel style filtering #grid', () => {
52535289
tick(200);
52545290

52555291
const dateTimeEditorDirective = fix.debugElement.query(By.directive(IgxDateTimeEditorDirective))
5256-
.injector.get(IgxDateTimeEditorDirective);
5292+
.injector.get(IgxDateTimeEditorDirective);
52575293
expect(dateTimeEditorDirective.locale).toMatch(grid.locale);
52585294
}));
52595295

@@ -5273,7 +5309,7 @@ describe('IgxGrid - Filtering actions - Excel style filtering #grid', () => {
52735309
tick(200);
52745310

52755311
const dateTimeEditorDirective = fix.debugElement.query(By.directive(IgxDateTimeEditorDirective))
5276-
.injector.get(IgxDateTimeEditorDirective);
5312+
.injector.get(IgxDateTimeEditorDirective);
52775313
expect(dateTimeEditorDirective.inputFormat).toMatch(column.editorOptions.dateTimeFormat);
52785314
expect(dateTimeEditorDirective.displayFormat).toMatch(column.pipeArgs.format);
52795315
}));
@@ -5294,7 +5330,7 @@ describe('IgxGrid - Filtering actions - Excel style filtering #grid', () => {
52945330
tick(200);
52955331

52965332
const dateTimeEditorDirective = fix.debugElement.query(By.directive(IgxDateTimeEditorDirective))
5297-
.injector.get(IgxDateTimeEditorDirective);
5333+
.injector.get(IgxDateTimeEditorDirective);
52985334
expect(dateTimeEditorDirective.inputFormat).toMatch(column.pipeArgs.format);
52995335
expect(dateTimeEditorDirective.displayFormat).toMatch(column.pipeArgs.format);
53005336
}));
@@ -5613,7 +5649,7 @@ describe('IgxGrid - Filtering actions - Excel style filtering #grid', () => {
56135649
const checkboxes: any[] = Array.from(GridFunctions.getExcelStyleFilteringCheckboxes(fix));
56145650
expect(checkboxes[0].indeterminate).toBeTrue();
56155651
expect(checkboxes[1].checked).toBeFalse();
5616-
const listItemsCheckboxes = checkboxes.slice(2, checkboxes.length-1);
5652+
const listItemsCheckboxes = checkboxes.slice(2, checkboxes.length - 1);
56175653
for (const checkboxItem of listItemsCheckboxes) {
56185654
ControlsFunction.verifyCheckboxState(checkboxItem.parentElement);
56195655
}
@@ -7115,7 +7151,8 @@ describe('IgxGrid - Custom Filtering Strategy #grid', () => {
71157151
imports: [
71167152
NoopAnimationsModule,
71177153
CustomFilteringStrategyComponent
7118-
]
7154+
],
7155+
providers: [{ provide: INPUT_DEBOUNCE_TIME, useValue: 0 }]
71197156
}).compileComponents();
71207157
}));
71217158

@@ -7136,13 +7173,12 @@ describe('IgxGrid - Custom Filtering Strategy #grid', () => {
71367173

71377174
it('Should be able to override getFieldValue method', fakeAsync(() => {
71387175
GridFunctions.clickFilterCellChipUI(fix, 'Name'); // Name column contains nested object as a value
7139-
tick(150);
71407176
fix.detectChanges();
71417177

71427178
GridFunctions.typeValueInFilterRowInput('ca', fix);
7143-
tick(DEBOUNCE_TIME);
7179+
tick();
7180+
fix.detectChanges();
71447181
GridFunctions.submitFilterRowInput(fix);
7145-
tick(DEBOUNCE_TIME);
71467182
fix.detectChanges();
71477183

71487184
expect(grid.filteredData).toEqual([]);
@@ -7154,13 +7190,12 @@ describe('IgxGrid - Custom Filtering Strategy #grid', () => {
71547190
grid.filterStrategy = fix.componentInstance.strategy;
71557191
fix.detectChanges();
71567192
GridFunctions.clickFilterCellChipUI(fix, 'Name'); // Name column contains nested object as a value
7157-
tick(150);
71587193
fix.detectChanges();
71597194

71607195
GridFunctions.typeValueInFilterRowInput('ca', fix);
7161-
tick(DEBOUNCE_TIME);
7196+
tick();
7197+
fix.detectChanges();
71627198
GridFunctions.submitFilterRowInput(fix);
7163-
tick(DEBOUNCE_TIME);
71647199
fix.detectChanges();
71657200

71667201
expect(grid.filteredData).toEqual(

‎projects/igniteui-angular/src/lib/test-utils/grid-functions.spec.ts‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -669,6 +669,8 @@ export class GridFunctions {
669669
const filterUIRow = fix.debugElement.query(By.css(FILTER_UI_ROW));
670670
const input = filterUIRow.query(By.directive(IgxInputDirective));
671671
UIInteractions.clickAndSendInputElementValue(input.nativeElement, value, fix);
672+
tick(); // Needed because of the debounce time in filtering row input
673+
fix.detectChanges();
672674

673675
// Enter key to submit
674676
UIInteractions.triggerEventHandlerKeyDown('Enter', input);

0 commit comments

Comments
 (0)