Skip to content

Commit 6aafb73

Browse files
zdrawkuzdrawku
authored
Merge pull request #8701 from IgniteUI/hanastasov/sorting-filt-tests-10.2.x
Add filtering and sorting tests for date values
2 parents 5d7c0c3 + d88cbb6 commit 6aafb73

File tree

3 files changed

+308
-7
lines changed

3 files changed

+308
-7
lines changed

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

Lines changed: 191 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -4240,6 +4240,7 @@ describe('IgxGrid - Filtering actions - Excel style filtering #grid', () => {
42404240
}));
42414241

42424242
it('Should filter grid through custom date filter dialog.', fakeAsync(() => {
4243+
const column = grid.getColumnByName('ReleaseDate');
42434244
// Open excel style custom filtering dialog.
42444245
GridFunctions.clickExcelFilterIcon(fix, 'ReleaseDate');
42454246
tick(100);
@@ -4269,8 +4270,13 @@ describe('IgxGrid - Filtering actions - Excel style filtering #grid', () => {
42694270
GridFunctions.clickApplyExcelStyleCustomFiltering(fix);
42704271

42714272
// Verify the results are with 'today' date.
4272-
const cellValue = GridFunctions.getColumnCells(fix, 'ReleaseDate')[0].nativeElement;
4273-
expect(new Date(cellValue.innerText).toDateString()).toMatch(new Date().toDateString());
4273+
const pipe = new DatePipe(grid.locale);
4274+
const cell = GridFunctions.getColumnCells(fix, 'ReleaseDate')[0].nativeElement;
4275+
const filteredDate = SampleTestData.today;
4276+
const inputText = grid.datePipe.transform(filteredDate, column.pipeArgs.format, undefined, grid.locale);
4277+
const cellText = pipe.transform(filteredDate, column.pipeArgs.format, column.pipeArgs.timezone);
4278+
expect(cell.innerText).toMatch(cellText);
4279+
expect(datePickerInput.value).toMatch(inputText);
42744280
expect(grid.filteredData.length).toEqual(1);
42754281
}));
42764282

@@ -4281,6 +4287,7 @@ describe('IgxGrid - Filtering actions - Excel style filtering #grid', () => {
42814287
return newRec;
42824288
});
42834289
fix.detectChanges();
4290+
const column = grid.getColumnByName('ReleaseDate');
42844291

42854292
// Open excel style custom filtering dialog.
42864293
GridFunctions.clickExcelFilterIcon(fix, 'ReleaseDate');
@@ -4311,8 +4318,13 @@ describe('IgxGrid - Filtering actions - Excel style filtering #grid', () => {
43114318
GridFunctions.clickApplyExcelStyleCustomFiltering(fix);
43124319

43134320
// Verify the results are with 'today' date.
4314-
const cellValue = GridFunctions.getColumnCells(fix, 'ReleaseDate')[0].nativeElement;
4315-
expect(new Date(cellValue.innerText).toDateString()).toMatch(new Date().toDateString());
4321+
const pipe = new DatePipe(grid.locale);
4322+
const cell = GridFunctions.getColumnCells(fix, 'ReleaseDate')[0].nativeElement;
4323+
const filteredDate = SampleTestData.today;
4324+
const inputText = grid.datePipe.transform(filteredDate, column.pipeArgs.format, undefined, grid.locale);
4325+
const cellText = pipe.transform(filteredDate, column.pipeArgs.format, column.pipeArgs.timezone);
4326+
expect(cell.innerText).toMatch(cellText);
4327+
expect(datePickerInput.value).toMatch(inputText);
43164328
expect(grid.filteredData.length).toEqual(1);
43174329
}));
43184330

@@ -4323,6 +4335,7 @@ describe('IgxGrid - Filtering actions - Excel style filtering #grid', () => {
43234335
return newRec;
43244336
});
43254337
fix.detectChanges();
4338+
const column = grid.getColumnByName('ReleaseDate');
43264339

43274340
// Open excel style custom filtering dialog.
43284341
GridFunctions.clickExcelFilterIcon(fix, 'ReleaseDate');
@@ -4353,8 +4366,145 @@ describe('IgxGrid - Filtering actions - Excel style filtering #grid', () => {
43534366
GridFunctions.clickApplyExcelStyleCustomFiltering(fix);
43544367

43554368
// Verify the results are with 'today' date.
4356-
const cellValue = GridFunctions.getColumnCells(fix, 'ReleaseDate')[0].nativeElement;
4357-
expect(new Date(cellValue.innerText).toDateString()).toMatch(new Date().toDateString());
4369+
const pipe = new DatePipe(grid.locale);
4370+
const cell = GridFunctions.getColumnCells(fix, 'ReleaseDate')[0].nativeElement;
4371+
const filteredDate = SampleTestData.today;
4372+
const inputText = grid.datePipe.transform(filteredDate, column.pipeArgs.format, undefined, grid.locale);
4373+
const cellText = pipe.transform(filteredDate, column.pipeArgs.format, column.pipeArgs.timezone);
4374+
expect(cell.innerText).toMatch(cellText);
4375+
expect(datePickerInput.value).toMatch(inputText);
4376+
expect(grid.filteredData.length).toEqual(1);
4377+
}));
4378+
4379+
it('Should filter grid through custom date filter dialog when using pipeArgs for the column', fakeAsync(() => {
4380+
fix.componentInstance.data = SampleTestData.excelFilteringData().map(rec => {
4381+
const newRec = Object.assign({}, rec) as any;
4382+
newRec.ReleaseDate = rec.ReleaseDate ? rec.ReleaseDate.toISOString() : null;
4383+
return newRec;
4384+
});
4385+
4386+
const formatOptions = {
4387+
timezone: 'utc',
4388+
};
4389+
const column = grid.getColumnByName('ReleaseDate');
4390+
column.pipeArgs = formatOptions;
4391+
fix.detectChanges();
4392+
4393+
// Open excel style custom filtering dialog.
4394+
GridFunctions.clickExcelFilterIcon(fix, 'ReleaseDate');
4395+
tick(100);
4396+
fix.detectChanges();
4397+
GridFunctions.clickExcelFilterCascadeButton(fix);
4398+
fix.detectChanges();
4399+
GridFunctions.clickOperatorFromCascadeMenu(fix, 0);
4400+
tick(200);
4401+
4402+
const expr = GridFunctions.getExcelCustomFilteringDateExpressions(fix)[0];
4403+
const datePicker = expr.querySelector('igx-date-picker');
4404+
const datePickerInput = datePicker.querySelector('input');
4405+
4406+
// Click date picker input to open calendar.
4407+
datePickerInput.dispatchEvent(new MouseEvent('click'));
4408+
tick(100);
4409+
fix.detectChanges();
4410+
4411+
// Click today item.
4412+
const calendar = document.querySelector('igx-calendar');
4413+
const days = calendar.querySelectorAll('igx-day-item');
4414+
const todayItem = calendar.querySelector('.igx-calendar__date--current');
4415+
let todayIndex;
4416+
let i = 0;
4417+
while (!todayIndex) {
4418+
const item = days[i];
4419+
if (item === todayItem) {
4420+
todayIndex = i;
4421+
}
4422+
i++;
4423+
}
4424+
4425+
// find the day 15 days later than today
4426+
const day = days[todayIndex + 15];
4427+
(day as HTMLElement).click();
4428+
tick(100);
4429+
fix.detectChanges();
4430+
4431+
// Click 'apply' button to apply filter.
4432+
GridFunctions.clickApplyExcelStyleCustomFiltering(fix);
4433+
4434+
// Verify the results. Filtered day is date that is 15 days after today
4435+
const pipe = new DatePipe(grid.locale);
4436+
const cell = GridFunctions.getColumnCells(fix, 'ReleaseDate')[0].nativeElement;
4437+
const filteredDate = SampleTestData.timeGenerator.timedelta(SampleTestData.today, 'day', 15);
4438+
const inputText = grid.datePipe.transform(filteredDate, column.pipeArgs.format, undefined, grid.locale);
4439+
const cellText = pipe.transform(filteredDate, column.pipeArgs.format, column.pipeArgs.timezone);
4440+
expect(cell.innerText).toMatch(cellText);
4441+
expect(datePickerInput.value).toMatch(inputText);
4442+
expect(grid.filteredData.length).toEqual(1);
4443+
}));
4444+
4445+
it('Should filter grid through custom date filter dialog when using pipeArgs and formatter for the column', fakeAsync(() => {
4446+
registerLocaleData(localeFR);
4447+
const pipe = new DatePipe('fr-FR');
4448+
const formatOptions = {
4449+
timezone: 'utc',
4450+
};
4451+
const column = grid.getColumnByName('ReleaseDate');
4452+
column.pipeArgs = formatOptions;
4453+
grid.getColumnByName('ReleaseDate').formatter = ((value: any) => {
4454+
const val = value !== null && value !== undefined && value !== '' ? pipe.transform(value, 'longDate') : 'No value!';
4455+
return val;
4456+
});
4457+
fix.detectChanges();
4458+
4459+
// Open excel style custom filtering dialog.
4460+
GridFunctions.clickExcelFilterIcon(fix, 'ReleaseDate');
4461+
tick(100);
4462+
fix.detectChanges();
4463+
GridFunctions.clickExcelFilterCascadeButton(fix);
4464+
fix.detectChanges();
4465+
GridFunctions.clickOperatorFromCascadeMenu(fix, 0);
4466+
tick(200);
4467+
4468+
const expr = GridFunctions.getExcelCustomFilteringDateExpressions(fix)[0];
4469+
const datePicker = expr.querySelector('igx-date-picker');
4470+
const datePickerInput = datePicker.querySelector('input');
4471+
4472+
// Click date picker input to open calendar.
4473+
datePickerInput.dispatchEvent(new MouseEvent('click'));
4474+
tick(100);
4475+
fix.detectChanges();
4476+
4477+
// Click today item.
4478+
const calendar = document.querySelector('igx-calendar');
4479+
const days = calendar.querySelectorAll('igx-day-item');
4480+
const todayItem = calendar.querySelector('.igx-calendar__date--current');
4481+
let todayIndex;
4482+
let i = 0;
4483+
while (!todayIndex) {
4484+
const item = days[i];
4485+
if (item === todayItem) {
4486+
todayIndex = i;
4487+
}
4488+
i++;
4489+
}
4490+
4491+
// find the day 15 days later than today
4492+
const day = days[todayIndex + 15];
4493+
(day as HTMLElement).click();
4494+
tick(100);
4495+
fix.detectChanges();
4496+
4497+
// Click 'apply' button to apply filter.
4498+
GridFunctions.clickApplyExcelStyleCustomFiltering(fix);
4499+
4500+
// Verify the results. Filtered day is date that is 15 days after today
4501+
const cell = GridFunctions.getColumnCells(fix, 'ReleaseDate')[0].nativeElement;
4502+
const filteredDate = SampleTestData.timeGenerator.timedelta(SampleTestData.today, 'day', 15);
4503+
const inputText = column.formatter(filteredDate);
4504+
const cellText = column.formatter(filteredDate);
4505+
expect(cell.innerText).toMatch(cellText);
4506+
// TODO https://github.com/IgniteUI/igniteui-angular/issues/8697
4507+
// expect(datePickerInput.value).toMatch(inputText);
43584508
expect(grid.filteredData.length).toEqual(1);
43594509
}));
43604510

@@ -5373,6 +5523,41 @@ describe('IgxGrid - Filtering actions - Excel style filtering #grid', () => {
53735523
expect(loadingIndicator).toBeNull('esf loading indicator is visible');
53745524
}));
53755525

5526+
it('Verify ESF list items when different date values produce same value label in the ESF list', fakeAsync(() => {
5527+
const grid = fix.componentInstance.grid;
5528+
grid.getColumnByName('ReleaseDate').formatter = ((value: any) => {
5529+
const pipe = new DatePipe(grid.locale);
5530+
const val = value !== null && value !== undefined && value !== '' ? pipe.transform(value, 'longTime') : 'No value!';
5531+
return val;
5532+
});
5533+
fix.detectChanges();
5534+
5535+
// Open excel style custom filtering dialog and wait a bit.
5536+
GridFunctions.clickExcelFilterIcon(fix, 'ReleaseDate');
5537+
tick(1050);
5538+
fix.detectChanges();
5539+
5540+
// Verify items in search have loaded and that the loading indicator is not visible.
5541+
const listItems = GridFunctions.getExcelStyleSearchComponentListItems(fix);
5542+
expect(listItems.length).toBe(3, 'incorrect rendered list items count');
5543+
5544+
const checkboxElements = GridFunctions.getExcelStyleFilteringCheckboxes(fix);
5545+
checkboxElements[0].click();
5546+
checkboxElements[2].click();
5547+
tick();
5548+
fix.detectChanges();
5549+
5550+
GridFunctions.clickApplyExcelStyleFiltering(fix);
5551+
fix.detectChanges();
5552+
5553+
expect(grid.filteredData.length).toEqual(1);
5554+
expect(grid.filteredData[0].Downloads).toEqual(254);
5555+
5556+
tick(1050);
5557+
fix.detectChanges();
5558+
5559+
}));
5560+
53765561
it('Done callback should be executed only once per column', fakeAsync(() => {
53775562
const compInstance = fix.componentInstance as IgxGridFilteringESFLoadOnDemandComponent;
53785563
// Open excel style custom filtering dialog and wait a bit.

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

Lines changed: 45 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -360,6 +360,51 @@ describe('IgxGrid - Filtering actions #grid', () => {
360360
expect(grid.rowList.length).toEqual(1);
361361
}));
362362

363+
it('should correctly filter with earliest/latest \'date\' values', fakeAsync(() => {
364+
const earliest = new Date(SampleTestData.timeGenerator.timedelta(SampleTestData.today, 'month', -1).getTime() + 7200 * 1000);
365+
const latest = new Date(SampleTestData.timeGenerator.timedelta(SampleTestData.today, 'month', 1).getTime() - 7200 * 1000);
366+
367+
// Before filter
368+
expect(grid.rowList.length).toEqual(8);
369+
grid.filter('ReleaseDate', earliest, IgxDateFilteringOperand.instance().condition('before'));
370+
fix.detectChanges();
371+
expect(grid.rowList.length).toEqual(1);
372+
373+
// After filter
374+
grid.clearFilter('ReleaseDate');
375+
fix.detectChanges();
376+
grid.filter('ReleaseDate', earliest, IgxDateFilteringOperand.instance().condition('after'));
377+
fix.detectChanges();
378+
expect(grid.rowList.length).toEqual(5);
379+
380+
// DoesNotEqual filter
381+
grid.clearFilter('ReleaseDate');
382+
fix.detectChanges();
383+
grid.filter('ReleaseDate', earliest, IgxDateFilteringOperand.instance().condition('doesNotEqual'));
384+
fix.detectChanges();
385+
expect(grid.rowList.length).toEqual(7);
386+
387+
// Equals filter
388+
grid.clearFilter('ReleaseDate');
389+
fix.detectChanges();
390+
grid.filter('ReleaseDate', earliest, IgxDateFilteringOperand.instance().condition('equals'));
391+
fix.detectChanges();
392+
expect(grid.rowList.length).toEqual(1);
393+
394+
// Before filter
395+
grid.clearFilter('ReleaseDate');
396+
fix.detectChanges();
397+
grid.filter('ReleaseDate', latest, IgxDateFilteringOperand.instance().condition('before'));
398+
fix.detectChanges();
399+
expect(grid.rowList.length).toEqual(5);
400+
401+
// After filter
402+
grid.clearFilter('ReleaseDate');
403+
fix.detectChanges();
404+
grid.filter('ReleaseDate', latest, IgxDateFilteringOperand.instance().condition('after'));
405+
fix.detectChanges();
406+
expect(grid.rowList.length).toEqual(1);
407+
}));
363408
it('should correctly filter by \'date\' filtering conditions when dates are ISO 8601 strings', fakeAsync(() => {
364409
const cal = SampleTestData.timeGenerator;
365410
const today = SampleTestData.today;

0 commit comments

Comments
 (0)