Skip to content

Commit ba46f1b

Browse files
jackofdiamond5jackofdiamond5
committed
test(filtering): query dom for date picker
1 parent dc3ad3e commit ba46f1b

File tree

1 file changed

+65
-60
lines changed

1 file changed

+65
-60
lines changed

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

Lines changed: 65 additions & 60 deletions
Original file line numberDiff line numberDiff line change
@@ -1286,8 +1286,8 @@ describe('IgxGrid - Filtering Row UI actions #grid', () => {
12861286
const prefix = GridFunctions.getFilterRowPrefix(fix);
12871287
const event = {
12881288
currentTarget: prefix.nativeElement,
1289-
preventDefault: () => {},
1290-
stopPropagation: () => {}
1289+
preventDefault: () => { },
1290+
stopPropagation: () => { }
12911291
};
12921292

12931293
// Click prefix to open conditions dropdown
@@ -1313,8 +1313,8 @@ describe('IgxGrid - Filtering Row UI actions #grid', () => {
13131313
const prefix = GridFunctions.getFilterRowPrefix(fix);
13141314
const event = {
13151315
currentTarget: prefix.nativeElement,
1316-
preventDefault: () => {},
1317-
stopPropagation: () => {}
1316+
preventDefault: () => { },
1317+
stopPropagation: () => { }
13181318
};
13191319

13201320
// Click prefix to open conditions dropdown
@@ -1705,7 +1705,7 @@ describe('IgxGrid - Filtering Row UI actions #grid', () => {
17051705

17061706
filterUIRow = fix.debugElement.query(By.css(FILTER_UI_ROW));
17071707
expect(filterUIRow).toBeNull();
1708-
}));
1708+
}));
17091709

17101710
it('Should navigate to first cell of grid when pressing \'Tab\' on the last filterCell chip.', fakeAsync(() => {
17111711
pending('Should be fixed with headers navigation');
@@ -1903,17 +1903,17 @@ describe('IgxGrid - Filtering Row UI actions #grid', () => {
19031903

19041904
let chipToRemove = filterUIRow.componentInstance.expressionsList[3];
19051905
expect(() => {
1906-
filterUIRow.componentInstance.onChipRemoved(null, chipToRemove);
1907-
})
1906+
filterUIRow.componentInstance.onChipRemoved(null, chipToRemove);
1907+
})
19081908
.not.toThrowError(/\'id\' of undefined/);
19091909
fix.detectChanges();
19101910
await wait(500);
19111911
fix.detectChanges();
19121912

19131913
chipToRemove = filterUIRow.componentInstance.expressionsList[2];
19141914
expect(() => {
1915-
filterUIRow.componentInstance.onChipRemoved(null, chipToRemove);
1916-
})
1915+
filterUIRow.componentInstance.onChipRemoved(null, chipToRemove);
1916+
})
19171917
.not.toThrowError(/\'id\' of undefined/);
19181918
fix.detectChanges();
19191919
await wait(100);
@@ -2608,7 +2608,7 @@ describe('IgxGrid - Filtering Row UI actions #grid', () => {
26082608

26092609
it('Should correctly update empty filter cells when scrolling horizontally.', async () => {
26102610
let emptyFilterCells = fix.debugElement.queryAll(By.directive(IgxGridFilteringCellComponent))
2611-
.filter((cell) => cell.nativeElement.children.length === 0);
2611+
.filter((cell) => cell.nativeElement.children.length === 0);
26122612
expect(emptyFilterCells.length).toEqual(1);
26132613

26142614
let emptyFilterHeader = emptyFilterCells[0].parent.query(By.directive(IgxGridHeaderComponent));
@@ -2620,7 +2620,7 @@ describe('IgxGrid - Filtering Row UI actions #grid', () => {
26202620
fix.detectChanges();
26212621

26222622
emptyFilterCells = fix.debugElement.queryAll(By.directive(IgxGridFilteringCellComponent))
2623-
.filter((cell) => cell.nativeElement.children.length === 0);
2623+
.filter((cell) => cell.nativeElement.children.length === 0);
26242624
expect(emptyFilterCells.length).toEqual(1);
26252625

26262626
emptyFilterHeader = emptyFilterCells[0].parent.query(By.directive(IgxGridHeaderComponent));
@@ -4336,7 +4336,7 @@ describe('IgxGrid - Filtering actions - Excel style filtering #grid', () => {
43364336
expect(calendar).toBeNull();
43374337
}));
43384338

4339-
it('Should filter grid through custom date filter dialog.', fakeAsync(() => {
4339+
fit('Should filter grid through custom date filter dialog.', fakeAsync(() => {
43404340
const column = grid.getColumnByName('ReleaseDate');
43414341
// Open excel style custom filtering dialog.
43424342
GridFunctions.clickExcelFilterIcon(fix, 'ReleaseDate');
@@ -4347,8 +4347,10 @@ describe('IgxGrid - Filtering actions - Excel style filtering #grid', () => {
43474347
GridFunctions.clickOperatorFromCascadeMenu(fix, 0);
43484348
tick(200);
43494349

4350-
const datePicker = fix.debugElement.query(By.directive(IgxDatePickerComponent));
4351-
datePicker.triggerEventHandler('click', null);
4350+
const expr = GridFunctions.getExcelCustomFilteringDateExpressions(fix)[0];
4351+
const datePicker = expr.querySelector('igx-date-picker');
4352+
const input = datePicker.querySelector('input');
4353+
UIInteractions.simulateClickEvent(input);
43524354
fix.detectChanges();
43534355

43544356
// Click today item.
@@ -4362,8 +4364,7 @@ describe('IgxGrid - Filtering actions - Excel style filtering #grid', () => {
43624364
// Verify the results are with 'today' date.
43634365
const filteredDate = SampleTestData.today;
43644366
const inputText = grid.datePipe.transform(filteredDate, column.pipeArgs.format, undefined, grid.locale);
4365-
const datePickerInput = fix.debugElement.query(By.css('.igx-date-picker__input-date'));
4366-
expect(datePickerInput.nativeElement.value).toMatch(inputText);
4367+
expect((input as HTMLInputElement).value).toMatch(inputText);
43674368

43684369
// Click 'apply' button to apply filter.
43694370
GridFunctions.clickApplyExcelStyleCustomFiltering(fix);
@@ -4375,7 +4376,7 @@ describe('IgxGrid - Filtering actions - Excel style filtering #grid', () => {
43754376
expect(grid.filteredData.length).toEqual(1);
43764377
}));
43774378

4378-
it('Should filter grid with ISO 8601 dates through custom date filter dialog', fakeAsync(() => {
4379+
fit('Should filter grid with ISO 8601 dates through custom date filter dialog', fakeAsync(() => {
43794380
fix.componentInstance.data = SampleTestData.excelFilteringData().map(rec => {
43804381
const newRec = Object.assign({}, rec) as any;
43814382
newRec.ReleaseDate = rec.ReleaseDate ? rec.ReleaseDate.toISOString() : null;
@@ -4393,8 +4394,10 @@ describe('IgxGrid - Filtering actions - Excel style filtering #grid', () => {
43934394
GridFunctions.clickOperatorFromCascadeMenu(fix, 0);
43944395
tick(200);
43954396

4396-
const datePicker = fix.debugElement.query(By.directive(IgxDatePickerComponent));
4397-
datePicker.triggerEventHandler('click', null);
4397+
const expr = GridFunctions.getExcelCustomFilteringDateExpressions(fix)[0];
4398+
const datePicker = expr.querySelector('igx-date-picker');
4399+
const input = datePicker.querySelector('input');
4400+
UIInteractions.simulateClickEvent(input);
43984401
fix.detectChanges();
43994402

44004403
// Click today item.
@@ -4408,8 +4411,7 @@ describe('IgxGrid - Filtering actions - Excel style filtering #grid', () => {
44084411
// Verify the results are with 'today' date.
44094412
const filteredDate = SampleTestData.today;
44104413
const inputText = grid.datePipe.transform(filteredDate, column.pipeArgs.format, undefined, grid.locale);
4411-
const datePickerInput = fix.debugElement.query(By.css('.igx-date-picker__input-date'));
4412-
expect(datePickerInput.nativeElement.value).toMatch(inputText);
4414+
expect((input as HTMLInputElement).value).toMatch(inputText);
44134415

44144416
// Click 'apply' button to apply filter.
44154417
GridFunctions.clickApplyExcelStyleCustomFiltering(fix);
@@ -4421,7 +4423,7 @@ describe('IgxGrid - Filtering actions - Excel style filtering #grid', () => {
44214423
expect(grid.filteredData.length).toEqual(1);
44224424
}));
44234425

4424-
it('Should filter grid with miliseconds dates through custom date filter dialog', fakeAsync(() => {
4426+
fit('Should filter grid with miliseconds dates through custom date filter dialog', fakeAsync(() => {
44254427
fix.componentInstance.data = SampleTestData.excelFilteringData().map(rec => {
44264428
const newRec = Object.assign({}, rec) as any;
44274429
newRec.ReleaseDate = rec.ReleaseDate ? rec.ReleaseDate.getTime() : null;
@@ -4439,8 +4441,10 @@ describe('IgxGrid - Filtering actions - Excel style filtering #grid', () => {
44394441
GridFunctions.clickOperatorFromCascadeMenu(fix, 0);
44404442
tick(200);
44414443

4442-
const datePicker = fix.debugElement.query(By.directive(IgxDatePickerComponent));
4443-
datePicker.triggerEventHandler('click', null);
4444+
const expr = GridFunctions.getExcelCustomFilteringDateExpressions(fix)[0];
4445+
const datePicker = expr.querySelector('igx-date-picker');
4446+
const input = datePicker.querySelector('input');
4447+
UIInteractions.simulateClickEvent(input);
44444448
fix.detectChanges();
44454449

44464450
// Click today item.
@@ -4454,8 +4458,7 @@ describe('IgxGrid - Filtering actions - Excel style filtering #grid', () => {
44544458
// Verify the results are with 'today' date.
44554459
const filteredDate = SampleTestData.today;
44564460
const inputText = grid.datePipe.transform(filteredDate, column.pipeArgs.format, undefined, grid.locale);
4457-
const datePickerInput = fix.debugElement.query(By.css('.igx-date-picker__input-date'));
4458-
expect(datePickerInput.nativeElement.value).toMatch(inputText);
4461+
expect((input as HTMLInputElement).value).toMatch(inputText);
44594462

44604463
// Click 'apply' button to apply filter.
44614464
GridFunctions.clickApplyExcelStyleCustomFiltering(fix);
@@ -4467,7 +4470,7 @@ describe('IgxGrid - Filtering actions - Excel style filtering #grid', () => {
44674470
expect(grid.filteredData.length).toEqual(1);
44684471
}));
44694472

4470-
it('Should filter grid through custom date filter dialog when using pipeArgs for the column', fakeAsync(() => {
4473+
fit('Should filter grid through custom date filter dialog when using pipeArgs for the column', fakeAsync(() => {
44714474
fix.componentInstance.data = SampleTestData.excelFilteringData().map(rec => {
44724475
const newRec = Object.assign({}, rec) as any;
44734476
newRec.ReleaseDate = rec.ReleaseDate ? rec.ReleaseDate.toISOString() : null;
@@ -4490,8 +4493,10 @@ describe('IgxGrid - Filtering actions - Excel style filtering #grid', () => {
44904493
GridFunctions.clickOperatorFromCascadeMenu(fix, 0);
44914494
tick(200);
44924495

4493-
const datePicker = fix.debugElement.query(By.directive(IgxDatePickerComponent));
4494-
datePicker.triggerEventHandler('click', null);
4496+
const expr = GridFunctions.getExcelCustomFilteringDateExpressions(fix)[0];
4497+
const datePicker = expr.querySelector('igx-date-picker');
4498+
const input = datePicker.querySelector('input');
4499+
UIInteractions.simulateClickEvent(input);
44954500
fix.detectChanges();
44964501

44974502
// Click today item.
@@ -4505,8 +4510,7 @@ describe('IgxGrid - Filtering actions - Excel style filtering #grid', () => {
45054510
// Verify the results are with 'today' date.
45064511
const filteredDate = SampleTestData.today;
45074512
const inputText = grid.datePipe.transform(filteredDate, column.pipeArgs.format, undefined, grid.locale);
4508-
const datePickerInput = fix.debugElement.query(By.css('.igx-date-picker__input-date'));
4509-
expect(datePickerInput.nativeElement.value).toMatch(inputText);
4513+
expect((input as HTMLInputElement).value).toMatch(inputText);
45104514

45114515
// Click 'apply' button to apply filter.
45124516
GridFunctions.clickApplyExcelStyleCustomFiltering(fix);
@@ -4518,7 +4522,7 @@ describe('IgxGrid - Filtering actions - Excel style filtering #grid', () => {
45184522
expect(grid.filteredData.length).toEqual(1);
45194523
}));
45204524

4521-
it('Should filter grid through custom date filter dialog when using pipeArgs and formatter for the column', fakeAsync(() => {
4525+
fit('Should filter grid through custom date filter dialog when using pipeArgs and formatter for the column', fakeAsync(() => {
45224526
const pipe = new DatePipe('fr-FR');
45234527
const formatOptions = {
45244528
timezone: 'utc',
@@ -4541,8 +4545,10 @@ describe('IgxGrid - Filtering actions - Excel style filtering #grid', () => {
45414545
GridFunctions.clickOperatorFromCascadeMenu(fix, 0);
45424546
tick(200);
45434547

4544-
const datePicker = fix.debugElement.query(By.directive(IgxDatePickerComponent));
4545-
datePicker.triggerEventHandler('click', null);
4548+
const expr = GridFunctions.getExcelCustomFilteringDateExpressions(fix)[0];
4549+
const datePicker = expr.querySelector('igx-date-picker');
4550+
const input = datePicker.querySelector('input');
4551+
UIInteractions.simulateClickEvent(input);
45464552
fix.detectChanges();
45474553
tick(350); // calendar animationDone timeout
45484554

@@ -4556,8 +4562,7 @@ describe('IgxGrid - Filtering actions - Excel style filtering #grid', () => {
45564562
// Verify the results are with 'today' date.
45574563
const filteredDate = SampleTestData.today;
45584564
const inputText = column.formatter(filteredDate);
4559-
const datePickerInput = fix.debugElement.query(By.css('.igx-date-picker__input-date'));
4560-
expect(datePickerInput.nativeElement.value).toMatch(inputText);
4565+
expect((input as HTMLInputElement).value).toMatch(inputText);
45614566

45624567
// Click 'apply' button to apply filter.
45634568
GridFunctions.clickApplyExcelStyleCustomFiltering(fix);
@@ -4725,7 +4730,7 @@ describe('IgxGrid - Filtering actions - Excel style filtering #grid', () => {
47254730

47264731
excelMenu = GridFunctions.getExcelStyleFilteringComponent(fix);
47274732
expect(excelMenu).toBeNull();
4728-
}));
4733+
}));
47294734

47304735
it('Should filter date by input string', fakeAsync(() => {
47314736
GridFunctions.clickExcelFilterIcon(fix, 'ReleaseDate');
@@ -4870,17 +4875,17 @@ describe('IgxGrid - Filtering actions - Excel style filtering #grid', () => {
48704875
it('Should display "Add to current filter selection" button on typing in input', fakeAsync(() => {
48714876
// Open excel style filtering dialog.
48724877
GridFunctions.clickExcelFilterIconFromCode(fix, grid, 'Downloads');
4873-
// Type string in search box.
4874-
const searchComponent = GridFunctions.getExcelStyleSearchComponent(fix);
4875-
const inputNativeElement = GridFunctions.getExcelStyleSearchComponentInput(fix, searchComponent);
4876-
UIInteractions.clickAndSendInputElementValue(inputNativeElement, '2', fix);
4877-
tick(100);
4878-
fix.detectChanges();
4878+
// Type string in search box.
4879+
const searchComponent = GridFunctions.getExcelStyleSearchComponent(fix);
4880+
const inputNativeElement = GridFunctions.getExcelStyleSearchComponentInput(fix, searchComponent);
4881+
UIInteractions.clickAndSendInputElementValue(inputNativeElement, '2', fix);
4882+
tick(100);
4883+
fix.detectChanges();
48794884

4880-
// Verify that the second item is 'Add to current filter selection'.
4881-
const listItems = GridFunctions.getExcelStyleSearchComponentListItems(fix, searchComponent);
4882-
expect(listItems.length).toBe(6, 'incorrect rendered list items count');
4883-
expect(listItems[1].innerText).toBe('Add current selection to filter');
4885+
// Verify that the second item is 'Add to current filter selection'.
4886+
const listItems = GridFunctions.getExcelStyleSearchComponentListItems(fix, searchComponent);
4887+
expect(listItems.length).toBe(6, 'incorrect rendered list items count');
4888+
expect(listItems[1].innerText).toBe('Add current selection to filter');
48844889
}));
48854890

48864891
it('Should filter grid the same way as in Excel', fakeAsync(() => {
@@ -4912,20 +4917,20 @@ describe('IgxGrid - Filtering actions - Excel style filtering #grid', () => {
49124917
expect(gridCellValues.length).toEqual(4);
49134918
expect(gridCellValues).toEqual(listItems);
49144919

4915-
// Open excel style custom filtering dialog again.
4916-
GridFunctions.clickExcelFilterIconFromCode(fix, grid, 'Downloads');
4920+
// Open excel style custom filtering dialog again.
4921+
GridFunctions.clickExcelFilterIconFromCode(fix, grid, 'Downloads');
49174922

4918-
// Type string in search box.
4919-
searchComponent = GridFunctions.getExcelStyleSearchComponent(fix);
4920-
inputNativeElement = GridFunctions.getExcelStyleSearchComponentInput(fix, searchComponent);
4921-
UIInteractions.clickAndSendInputElementValue(inputNativeElement, '5', fix);
4922-
tick(100);
4923-
fix.detectChanges();
4923+
// Type string in search box.
4924+
searchComponent = GridFunctions.getExcelStyleSearchComponent(fix);
4925+
inputNativeElement = GridFunctions.getExcelStyleSearchComponentInput(fix, searchComponent);
4926+
UIInteractions.clickAndSendInputElementValue(inputNativeElement, '5', fix);
4927+
tick(100);
4928+
fix.detectChanges();
49244929

4925-
listItems = GridFunctions.getExcelStyleSearchComponentListItems(fix, searchComponent)
4926-
.splice(2)
4927-
.map(c => c.innerText)
4928-
.sort();
4930+
listItems = GridFunctions.getExcelStyleSearchComponentListItems(fix, searchComponent)
4931+
.splice(2)
4932+
.map(c => c.innerText)
4933+
.sort();
49294934

49304935
// Click 'apply' button to apply filter.
49314936
GridFunctions.clickApplyExcelStyleFiltering(fix);
@@ -5081,7 +5086,7 @@ describe('IgxGrid - Filtering actions - Excel style filtering #grid', () => {
50815086
// Verify ESF is visible.
50825087
expect(excelMenu).not.toBeNull();
50835088

5084-
// Verify that the dialog is closed on pressing Escape.
5089+
// Verify that the dialog is closed on pressing Escape.
50855090
inputNativeElement.dispatchEvent(new KeyboardEvent('keydown', { key: 'Escape', bubbles: true }));
50865091
excelMenu = GridFunctions.getExcelStyleFilteringComponent(fix);
50875092
expect(excelMenu).toBeNull();

0 commit comments

Comments
 (0)