Skip to content

Commit 37f7c06

Browse files
authored
Merge pull request #8153 from IgniteUI/refactor-mch-tests-m
Refactor Multi Column Header tests
2 parents b1eec0e + 985a353 commit 37f7c06

File tree

6 files changed

+1927
-2175
lines changed

6 files changed

+1927
-2175
lines changed

projects/igniteui-angular/src/lib/grids/grid/column-group.spec.ts

+1,225-2,151
Large diffs are not rendered by default.

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

+11-11
Original file line numberDiff line numberDiff line change
@@ -2566,7 +2566,7 @@ describe('IgxGrid - Filtering Row UI actions #grid', () => {
25662566
expect(filterUIRow).not.toBeNull();
25672567

25682568
// Click on a column with custom filter
2569-
const header = GridFunctions.getColumnHeaderByIndex(fix, 1);
2569+
const header = GridFunctions.getColumnHeaderTitleByIndex(fix, 1);
25702570
header.click();
25712571
fix.detectChanges();
25722572

@@ -3202,16 +3202,16 @@ describe('IgxGrid - Filtering actions - Excel style filtering #grid', () => {
32023202
GridFunctions.clickMoveRightInExcelStyleFiltering(fix);
32033203
tick(100);
32043204
fix.detectChanges();
3205-
expect(GridFunctions.getColumnHeaderByIndex(fix, 0).innerText).toBe('ID');
3206-
expect(GridFunctions.getColumnHeaderByIndex(fix, 1).innerText).toBe('ProductName');
3205+
expect(GridFunctions.getColumnHeaderTitleByIndex(fix, 0).innerText).toBe('ID');
3206+
expect(GridFunctions.getColumnHeaderTitleByIndex(fix, 1).innerText).toBe('ProductName');
32073207
expect(productNameCol.pinned).toBe(true);
32083208

32093209
// Move 'ProductName' one step to the left. (should move)
32103210
GridFunctions.clickMoveLeftInExcelStyleFiltering(fix);
32113211
tick(100);
32123212
fix.detectChanges();
3213-
expect(GridFunctions.getColumnHeaderByIndex(fix, 0).innerText).toBe('ProductName');
3214-
expect(GridFunctions.getColumnHeaderByIndex(fix, 1).innerText).toBe('ID');
3213+
expect(GridFunctions.getColumnHeaderTitleByIndex(fix, 0).innerText).toBe('ProductName');
3214+
expect(GridFunctions.getColumnHeaderTitleByIndex(fix, 1).innerText).toBe('ID');
32153215
expect(productNameCol.pinned).toBe(true);
32163216

32173217
// Try move 'ProductName' one step to the left. (Button should be disabled since it's already first)
@@ -3225,8 +3225,8 @@ describe('IgxGrid - Filtering actions - Excel style filtering #grid', () => {
32253225
GridFunctions.clickMoveRightInExcelStyleFiltering(fix);
32263226
tick(100);
32273227
fix.detectChanges();
3228-
expect(GridFunctions.getColumnHeaderByIndex(fix, 0).innerText).toBe('ID');
3229-
expect(GridFunctions.getColumnHeaderByIndex(fix, 1).innerText).toBe('ProductName');
3228+
expect(GridFunctions.getColumnHeaderTitleByIndex(fix, 0).innerText).toBe('ID');
3229+
expect(GridFunctions.getColumnHeaderTitleByIndex(fix, 1).innerText).toBe('ProductName');
32303230
expect(productNameCol.pinned).toBe(false);
32313231
}));
32323232

@@ -3237,8 +3237,8 @@ describe('IgxGrid - Filtering actions - Excel style filtering #grid', () => {
32373237
productNameCol.pinned = true;
32383238
downloadsCol.movable = true;
32393239
fix.detectChanges();
3240-
expect(GridFunctions.getColumnHeaderByIndex(fix, 0).innerText).toBe('ProductName');
3241-
expect(GridFunctions.getColumnHeaderByIndex(fix, 2).innerText).toBe('Downloads');
3240+
expect(GridFunctions.getColumnHeaderTitleByIndex(fix, 0).innerText).toBe('ProductName');
3241+
expect(GridFunctions.getColumnHeaderTitleByIndex(fix, 2).innerText).toBe('Downloads');
32423242
expect(downloadsCol.pinned).toBe(false);
32433243

32443244
GridFunctions.clickExcelFilterIconFromCode(fix, grid, 'Downloads');
@@ -3250,8 +3250,8 @@ describe('IgxGrid - Filtering actions - Excel style filtering #grid', () => {
32503250
tick(100);
32513251
fix.detectChanges();
32523252

3253-
expect(GridFunctions.getColumnHeaderByIndex(fix, 0).innerText).toBe('ProductName');
3254-
expect(GridFunctions.getColumnHeaderByIndex(fix, 1).innerText).toBe('Downloads');
3253+
expect(GridFunctions.getColumnHeaderTitleByIndex(fix, 0).innerText).toBe('ProductName');
3254+
expect(GridFunctions.getColumnHeaderTitleByIndex(fix, 1).innerText).toBe('Downloads');
32553255
expect(downloadsCol.pinned).toBe(true);
32563256
}));
32573257

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

+5-5
Original file line numberDiff line numberDiff line change
@@ -191,18 +191,18 @@ describe('IgxGrid - Column Pinning #grid', () => {
191191

192192
it('should correctly initialize pinned columns z-index values.', () => {
193193

194-
const headers = GridFunctions.getColumnGroupHeaders(fix);
194+
const headers = GridFunctions.getColumnHeaders(fix);
195195

196196
// First two headers are pinned
197-
expect(headers[0].componentInstance.zIndex).toEqual(9999);
198-
expect(headers[1].componentInstance.zIndex).toEqual(9998);
197+
expect(headers[0].parent.componentInstance.zIndex).toEqual(9999);
198+
expect(headers[1].parent.componentInstance.zIndex).toEqual(9998);
199199

200200
grid.pinColumn('Region');
201201
fix.detectChanges();
202202

203203
// First three headers are pinned
204-
const secondColumnGroupHeader = GridFunctions.getColumnGroupHeaders(fix)[2];
205-
expect(secondColumnGroupHeader.componentInstance.zIndex).toEqual(9997);
204+
const secondColumnGroupHeader = GridFunctions.getColumnHeaders(fix)[2];
205+
expect(secondColumnGroupHeader.parent.componentInstance.zIndex).toEqual(9997);
206206
});
207207

208208
it('should not pin/unpin columns which are already pinned/unpinned', () => {

projects/igniteui-angular/src/lib/grids/hierarchical-grid/hierarchical-grid.integration.spec.ts

+4-4
Original file line numberDiff line numberDiff line change
@@ -730,20 +730,20 @@ describe('IgxHierarchicalGrid Integration #hGrid', () => {
730730
hierarchicalGrid.expandRow(hierarchicalGrid.dataRowList.first.rowID);
731731

732732
const childGrid = hierarchicalGrid.hgridAPI.getChildGrids(false)[0];
733-
let childHeader = GridFunctions.getColumnGroupHeaders(fixture)[4];
733+
let childHeader = GridFunctions.getColumnHeaders(fixture)[3];
734734
const firstHeaderIcon = childHeader.query(By.css('.igx-icon'));
735735

736-
expect(GridFunctions.isHeaderPinned(childHeader)).toBeFalsy();
736+
expect(GridFunctions.isHeaderPinned(childHeader.parent)).toBeFalsy();
737737
expect(childGrid.columnList.first.pinned).toBeFalsy();
738738
expect(firstHeaderIcon).toBeDefined();
739739

740740
UIInteractions.simulateClickAndSelectEvent(firstHeaderIcon);
741741
fixture.detectChanges();
742742
tick();
743743

744-
childHeader = GridFunctions.getColumnGroupHeaders(fixture)[4];
744+
childHeader = GridFunctions.getColumnHeaders(fixture)[3];
745745
expect(childGrid.columnList.first.pinned).toBeTruthy();
746-
expect(GridFunctions.isHeaderPinned(childHeader)).toBeTruthy();
746+
expect(GridFunctions.isHeaderPinned(childHeader.parent)).toBeTruthy();
747747
}));
748748

749749
it('should be applied correctly for child grid with multi-column header.', fakeAsync(() => {

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

+23-4
Original file line numberDiff line numberDiff line change
@@ -91,6 +91,7 @@ export const PINNED_SUMMARY = 'igx-grid-summary--pinned';
9191
export const PAGER_CLASS = '.igx-paginator__pager';
9292
const RESIZE_LINE_CLASS = '.igx-grid__th-resize-line';
9393
const RESIZE_AREA_CLASS = '.igx-grid__th-resize-handle';
94+
const GRID_COL_THEAD_CLASS = '.igx-grid__th';
9495

9596
export class GridFunctions {
9697

@@ -1020,10 +1021,6 @@ export class GridFunctions {
10201021
return GridFunctions.sortNativeElementsVertically(Array.from(searchComponent.querySelectorAll('igx-list-item')));
10211022
}
10221023

1023-
public static getColumnGroupHeaders(fix: ComponentFixture<any>): DebugElement[] {
1024-
return fix.debugElement.queryAll(By.directive(IgxGridHeaderGroupComponent));
1025-
}
1026-
10271024
public static getColumnHeaders(fix: ComponentFixture<any>): DebugElement[] {
10281025
return fix.debugElement.queryAll(By.directive(IgxGridHeaderComponent));
10291026
}
@@ -1035,6 +1032,23 @@ export class GridFunctions {
10351032
});
10361033
}
10371034

1035+
public static getColumnGroupHeaders(fix: ComponentFixture<any>): DebugElement[] {
1036+
const allHeaders = fix.debugElement.queryAll(By.directive(IgxGridHeaderGroupComponent));
1037+
const groupHeaders = allHeaders.filter(h => {
1038+
return h.componentInstance.column.columnGroup;
1039+
});
1040+
return groupHeaders;
1041+
}
1042+
1043+
public static getColumnGroupHeader(header: string, fix: ComponentFixture<any>, forGrid?: IgxGridBaseDirective): DebugElement {
1044+
const headers = this.getColumnGroupHeaders(fix);
1045+
const head = headers.find((gr) => {
1046+
const col = gr.componentInstance.column;
1047+
return col.header === header && (forGrid ? forGrid === col.grid : true);
1048+
});
1049+
return head;
1050+
}
1051+
10381052
public static clickColumnHeaderUI(columnField: string, fix: ComponentFixture<any>, ctrlKey = false, shiftKey = false) {
10391053
const header = this.getColumnHeader(columnField, fix);
10401054
header.triggerEventHandler('click', new MouseEvent('click', { shiftKey: shiftKey, ctrlKey: ctrlKey }));
@@ -1048,6 +1062,11 @@ export class GridFunctions {
10481062
}
10491063

10501064
public static getColumnHeaderByIndex(fix: ComponentFixture<any>, index: number) {
1065+
return fix.debugElement.queryAll(By.css(GRID_COL_THEAD_CLASS))[3];
1066+
}
1067+
1068+
1069+
public static getColumnHeaderTitleByIndex(fix: ComponentFixture<any>, index: number) {
10511070
const nativeHeaders = fix.debugElement.queryAll(By.directive(IgxGridHeaderComponent))
10521071
.map((header) => header.nativeElement);
10531072
const sortedNativeHeaders = GridFunctions.sortNativeElementsHorizontally(nativeHeaders);

0 commit comments

Comments
 (0)