Skip to content

Commit 3474cc7

Browse files
igdmdimitrovigdmdimitrov
committed
test(esf): added more tests for ESF templates #7221 
1 parent aaab274 commit 3474cc7

File tree

2 files changed

+182
-6
lines changed

2 files changed

+182
-6
lines changed

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

Lines changed: 115 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -36,10 +36,12 @@ import {
3636
IgxGridFilteringScrollComponent,
3737
IgxGridFilteringMCHComponent,
3838
IgxGridFilteringTemplateComponent,
39+
IgxGridFilteringESFEmptyTemplatesComponent,
3940
IgxGridFilteringESFTemplatesComponent,
4041
IgxGridFilteringESFLoadOnDemandComponent,
4142
CustomFilteringStrategyComponent,
42-
IgxGridExternalESFComponent
43+
IgxGridExternalESFComponent,
44+
IgxGridExternalESFTemplateComponent
4345
} from '../../test-utils/grid-samples.spec';
4446
import { GridSelectionMode, FilterMode } from '../common/enums';
4547
import { ControlsFunction } from '../../test-utils/controls-functions.spec';
@@ -2581,10 +2583,12 @@ describe('IgxGrid - Filtering actions - Excel style filtering #grid', () => {
25812583
TestBed.configureTestingModule({
25822584
declarations: [
25832585
IgxGridFilteringComponent,
2586+
IgxGridFilteringESFEmptyTemplatesComponent,
25842587
IgxGridFilteringESFTemplatesComponent,
25852588
IgxGridFilteringESFLoadOnDemandComponent,
25862589
IgxGridFilteringMCHComponent,
2587-
IgxGridExternalESFComponent
2590+
IgxGridExternalESFComponent,
2591+
IgxGridExternalESFTemplateComponent
25882592
],
25892593
imports: [
25902594
NoopAnimationsModule,
@@ -4342,16 +4346,19 @@ describe('IgxGrid - Filtering actions - Excel style filtering #grid', () => {
43424346
}));
43434347
});
43444348

4345-
describe(null, () => {
4349+
describe('Templates: ', () => {
43464350
let fix, grid;
43474351
beforeEach(fakeAsync(() => {
4348-
43494352
fix = TestBed.createComponent(IgxGridFilteringESFTemplatesComponent);
43504353
fix.detectChanges();
43514354
grid = fix.componentInstance.grid;
43524355
}));
43534356

43544357
it('Should use custom templates for ESF components instead of default ones.', fakeAsync(() => {
4358+
fix = TestBed.createComponent(IgxGridFilteringESFEmptyTemplatesComponent);
4359+
fix.detectChanges();
4360+
grid = fix.componentInstance.grid;
4361+
43554362
grid.columnSelection = GridSelectionMode.multiple;
43564363
fix.detectChanges();
43574364

@@ -4383,6 +4390,110 @@ describe('IgxGrid - Filtering actions - Excel style filtering #grid', () => {
43834390
expect(GridFunctions.getExcelFilteringSearchComponent(fix, excelMenu)).toBeNull();
43844391
}
43854392
}));
4393+
4394+
it('Should filter and clear the excel search component correctly from template', fakeAsync(() => {
4395+
GridFunctions.clickExcelFilterIconFromCode(fix, grid, 'ProductName');
4396+
4397+
const searchComponent = GridFunctions.getExcelStyleSearchComponent(fix);
4398+
let listItems = GridFunctions.getExcelStyleSearchComponentListItems(fix, searchComponent);
4399+
expect(listItems.length).toBe(6, 'incorrect rendered list items count');
4400+
4401+
// Type string in search box.
4402+
const inputNativeElement = GridFunctions.getExcelStyleSearchComponentInput(fix, searchComponent);
4403+
UIInteractions.clickAndSendInputElementValue(inputNativeElement, 'ignite', fix);
4404+
tick(100);
4405+
fix.detectChanges();
4406+
4407+
listItems = GridFunctions.getExcelStyleSearchComponentListItems(fix, searchComponent);
4408+
expect(listItems.length).toBe(3, 'incorrect rendered list items count');
4409+
4410+
// Clear filtering of ESF search.
4411+
const clearIcon: any = Array.from(searchComponent.querySelectorAll('igx-icon'))
4412+
.find((icon: any) => icon.innerText === 'clear');
4413+
clearIcon.click();
4414+
fix.detectChanges();
4415+
4416+
listItems = GridFunctions.getExcelStyleSearchComponentListItems(fix, searchComponent);
4417+
expect(listItems.length).toBe(6, 'incorrect rendered list items count');
4418+
tick(100);
4419+
}));
4420+
4421+
it('Should move column left/right when clicking buttons from template', fakeAsync(() => {
4422+
grid.columns[2].movable = true;
4423+
fix.detectChanges();
4424+
4425+
GridFunctions.clickExcelFilterIconFromCode(fix, grid, 'Downloads');
4426+
4427+
const moveLeft = GridFunctions.getExcelStyleFilteringMoveButtons(fix)[0];
4428+
const moveRight = GridFunctions.getExcelStyleFilteringMoveButtons(fix)[1];
4429+
4430+
moveLeft.click();
4431+
fix.detectChanges();
4432+
4433+
expect(grid.columns[2].field).toBe('ProductName');
4434+
expect(grid.columns[1].field).toBe('Downloads');
4435+
4436+
moveLeft.click();
4437+
tick();
4438+
fix.detectChanges();
4439+
4440+
expect(grid.columns[1].field).toBe('ID');
4441+
expect(grid.columns[0].field).toBe('Downloads');
4442+
ControlsFunction.verifyButtonIsDisabled(moveLeft);
4443+
4444+
moveRight.click();
4445+
tick();
4446+
fix.detectChanges();
4447+
4448+
expect(grid.columns[0].field).toBe('ID');
4449+
expect(grid.columns[1].field).toBe('Downloads');
4450+
ControlsFunction.verifyButtonIsDisabled(moveLeft, false);
4451+
}));
4452+
4453+
it('should select/deselect column in external ESF template when interact with the column selection item through esf menu', () => {
4454+
fix = TestBed.createComponent(IgxGridExternalESFTemplateComponent);
4455+
grid = fix.componentInstance.grid;
4456+
fix.detectChanges();
4457+
4458+
// Test in single multiple mode
4459+
grid.columnSelection = GridSelectionMode.multiple;
4460+
fix.detectChanges();
4461+
4462+
spyOn(grid.onColumnSelectionChange, 'emit');
4463+
const column = grid.getColumnByName('Downloads');
4464+
fix.componentInstance.esf.column = column;
4465+
fix.detectChanges();
4466+
4467+
GridFunctions.clickColumnSelectionInExcelStyleFiltering(fix);
4468+
fix.detectChanges();
4469+
4470+
expect(grid.onColumnSelectionChange.emit).toHaveBeenCalledTimes(1);
4471+
GridSelectionFunctions.verifyColumnAndCellsSelected(column, true);
4472+
4473+
GridFunctions.clickColumnSelectionInExcelStyleFiltering(fix);
4474+
fix.detectChanges();
4475+
4476+
expect(grid.onColumnSelectionChange.emit).toHaveBeenCalledTimes(2);
4477+
GridSelectionFunctions.verifyColumnAndCellsSelected(column, false);
4478+
4479+
// Test in single selection mode
4480+
grid.columnSelection = GridSelectionMode.single;
4481+
fix.detectChanges();
4482+
4483+
grid.selectColumns(['ID']);
4484+
fix.detectChanges();
4485+
4486+
const columnId = grid.getColumnByName('ID');
4487+
GridSelectionFunctions.verifyColumnAndCellsSelected(columnId);
4488+
4489+
GridFunctions.clickColumnSelectionInExcelStyleFiltering(fix);
4490+
fix.detectChanges();
4491+
4492+
expect(grid.onColumnSelectionChange.emit).toHaveBeenCalledTimes(3);
4493+
GridSelectionFunctions.verifyColumnAndCellsSelected(column, true);
4494+
GridSelectionFunctions.verifyColumnAndCellsSelected(columnId, false);
4495+
4496+
});
43864497
});
43874498

43884499
describe('Load values on demand', () => {

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

Lines changed: 67 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1091,8 +1091,6 @@ export class CustomFilteringStrategyComponent extends BasicGridComponent {
10911091
public data = SampleTestData.personNameObjectJobCompany();
10921092
}
10931093

1094-
1095-
10961094
@Component({
10971095
template: `<igx-grid [data]="data" height="500px" [allowFiltering]='true'
10981096
[filterMode]="'excelStyleFilter'" [uniqueColumnValuesStrategy]="columnValuesStrategy">
@@ -1142,13 +1140,80 @@ export class IgxGridFilteringESFLoadOnDemandComponent extends BasicGridComponent
11421140
</igx-grid-excel-style-filtering>
11431141
</igx-grid>`
11441142
})
1143+
export class IgxGridFilteringESFEmptyTemplatesComponent extends BasicGridComponent {
1144+
public customFilter = CustomFilter.instance();
1145+
public resizable = false;
1146+
public filterable = true;
1147+
public data = SampleTestData.excelFilteringData();
1148+
}
1149+
1150+
@Component({
1151+
template: `<igx-grid [data]="data" height="500px" [allowFiltering]='true' [filterMode]="'excelStyleFilter'">
1152+
<igx-column width="100px" [field]="'ID'" [header]="'ID'" [hasSummary]="true"
1153+
[filterable]="false" [resizable]="resizable" [sortable]="'true'" [movable]="'true'"></igx-column>
1154+
<igx-column width="100px" [field]="'ProductName'" [filterable]="filterable" [resizable]="resizable" dataType="string"
1155+
[sortable]="'true'" [movable]="'true'"></igx-column>
1156+
<igx-column width="100px" [field]="'Downloads'" [filterable]="filterable" [resizable]="resizable" dataType="number"
1157+
[sortable]="'true'" [movable]="'true'"></igx-column>
1158+
<igx-column width="100px" [field]="'Released'" [filterable]="filterable" [resizable]="resizable" dataType="boolean"
1159+
[sortable]="'true'" [movable]="'true'"></igx-column>
1160+
<igx-column width="100px" [field]="'ReleaseDate'" [header]="'ReleaseDate'" headerClasses="header-release-date"
1161+
[filterable]="filterable" [resizable]="resizable" dataType="date" [sortable]="'true'" [movable]="'true'">
1162+
</igx-column>
1163+
<igx-column width="100px" [field]="'AnotherField'" [header]="'Another Field'" [filterable]="filterable"
1164+
dataType="string" [filters]="customFilter" [sortable]="'true'" [movable]="'true'">
1165+
</igx-column>
1166+
1167+
<igx-grid-excel-style-filtering [minHeight]="'0px'" [maxHeight]="'500px'">
1168+
<igx-excel-style-column-operations>
1169+
<igx-excel-style-moving></igx-excel-style-moving>
1170+
<igx-excel-style-pinning></igx-excel-style-pinning>
1171+
</igx-excel-style-column-operations>
1172+
<igx-excel-style-filter-operations>
1173+
<igx-excel-style-search></igx-excel-style-search>
1174+
</igx-excel-style-filter-operations>
1175+
</igx-grid-excel-style-filtering>
1176+
</igx-grid>`
1177+
})
11451178
export class IgxGridFilteringESFTemplatesComponent extends BasicGridComponent {
11461179
public customFilter = CustomFilter.instance();
11471180
public resizable = false;
11481181
public filterable = true;
11491182
public data = SampleTestData.excelFilteringData();
11501183
}
11511184

1185+
@Component({
1186+
template: `
1187+
<igx-grid-excel-style-filtering style="height: 700px; width: 350px"
1188+
[column]="grid1.getColumnByName('ProductName')">
1189+
<igx-excel-style-column-operations>
1190+
<igx-excel-style-selecting></igx-excel-style-selecting>
1191+
</igx-excel-style-column-operations>
1192+
<igx-excel-style-filter-operations>Filter Operations Template</igx-excel-style-filter-operations>
1193+
</igx-grid-excel-style-filtering>
1194+
<igx-grid #grid1 [data]="data" height="500px">
1195+
<igx-column width="100px" [field]="'ID'" [header]="'ID'" [hasSummary]="true"
1196+
[filterable]="false" [resizable]="resizable"></igx-column>
1197+
<igx-column width="100px" [field]="'ProductName'" [sortable]="true"
1198+
[filterable]="filterable" [resizable]="resizable" dataType="string" [selectable]="false"></igx-column>
1199+
<igx-column width="100px" [field]="'Downloads'" [filterable]="filterable" [resizable]="resizable" dataType="number"></igx-column>
1200+
<igx-column width="100px" [field]="'Released'" [filterable]="filterable"
1201+
[selectable]="false" [resizable]="resizable" dataType="boolean"></igx-column>
1202+
<igx-column width="100px" [field]="'ReleaseDate'" [header]="'ReleaseDate'" headerClasses="header-release-date"
1203+
[filterable]="filterable" [resizable]="resizable" dataType="date">
1204+
</igx-column>
1205+
<igx-column width="100px" [field]="'AnotherField'" [header]="'Another Field'" [filterable]="filterable"
1206+
dataType="string" [filters]="customFilter">
1207+
</igx-column>
1208+
</igx-grid>`
1209+
})
1210+
export class IgxGridExternalESFTemplateComponent extends BasicGridComponent {
1211+
public customFilter = CustomFilter.instance();
1212+
public resizable = false;
1213+
public filterable = true;
1214+
public data = SampleTestData.excelFilteringData();
1215+
}
1216+
11521217
@Component({
11531218
template: `<igx-grid [data]="data" height="500px" [allowFiltering]='true'>
11541219
<igx-column width="100px" [field]="'ID'" [header]="'ID'" [hasSummary]="true"

0 commit comments

Comments
 (0)