Skip to content

Commit 36e5f8f

Browse files
ChronosSFChronosSF
committed
chore(*): additional fixes based on feedback.
1 parent ef8f625 commit 36e5f8f

File tree

3 files changed

+62
-26
lines changed

3 files changed

+62
-26
lines changed

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

Lines changed: 17 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -58,19 +58,19 @@ describe('IgxHierarchicalGrid Integration #hGrid', () => {
5858
expect(hierarchicalGrid.columnList.filter(col => col.columnGroup).length).toEqual(expectedColumnGroups);
5959
expect(hierarchicalGrid.getColumnByName('ProductName').level).toEqual(expectedLevel);
6060

61-
expect(document.querySelectorAll('igx-grid-header').length).toEqual(3);
61+
expect(GridFunctions.getColumnHeaders(fixture).length).toEqual(3);
6262

6363
const firstRow = hierarchicalGrid.dataRowList.first;
6464
// the first row's cell should contain an expand indicator
65-
expect(firstRow.nativeElement.children[0].classList.contains('igx-grid__hierarchical-expander')).toBeTruthy();
65+
expect(HierarchicalGridFunctions.hasExpander(firstRow)).toBeTruthy();
6666
hierarchicalGrid.expandRow(firstRow.rowID);
6767

6868
const childGrid = hierarchicalGrid.hgridAPI.getChildGrids(false)[0];
6969

7070
expect(childGrid.columnList.filter(col => col.columnGroup).length).toEqual(expectedColumnGroups);
7171
expect(childGrid.getColumnByName('ProductName').level).toEqual(expectedLevel);
7272

73-
expect(document.querySelectorAll('igx-grid-header').length).toEqual(6);
73+
expect(GridFunctions.getColumnHeaders(fixture).length).toEqual(6);
7474
}));
7575

7676
it('should apply height correctly with and without filtering', fakeAsync(() => {
@@ -235,7 +235,7 @@ describe('IgxHierarchicalGrid Integration #hGrid', () => {
235235
childGrid.columnList.first.sortable = true;
236236
fixture.detectChanges();
237237

238-
const childHeader = fixture.debugElement.query(By.css('igx-child-grid-row')).queryAll(By.css('igx-grid-header'))[0];
238+
const childHeader = GridFunctions.getColumnHeader('ID', fixture, childGrid);
239239
UIInteractions.simulateClickEvent(childHeader.nativeElement);
240240
fixture.detectChanges();
241241
UIInteractions.simulateClickEvent(childHeader.nativeElement);
@@ -270,8 +270,7 @@ describe('IgxHierarchicalGrid Integration #hGrid', () => {
270270
it('should not lose child grid states after filtering in parent grid.', fakeAsync(() => {
271271
// expand first row
272272
hierarchicalGrid.expandRow(hierarchicalGrid.dataRowList.first.rowID);
273-
const childGrids = fixture.debugElement.queryAll(By.css('igx-child-grid-row'));
274-
let childGrid = childGrids[0].query(By.css('igx-hierarchical-grid')).componentInstance;
273+
let childGrid = hierarchicalGrid.hgridAPI.getChildGrids(false)[0];
275274
let firstChildCell = childGrid.dataRowList.first.cells.first;
276275
UIInteractions.simulateClickAndSelectCellEvent(firstChildCell);
277276
expect(firstChildCell.selected).toBe(true);
@@ -282,7 +281,7 @@ describe('IgxHierarchicalGrid Integration #hGrid', () => {
282281
expect((hierarchicalGrid.getRowByIndex(0) as IgxHierarchicalRowComponent).expanded).toBe(true);
283282
expect(hierarchicalGrid.getRowByIndex(1) instanceof IgxChildGridRowComponent).toBeTruthy();
284283

285-
childGrid = childGrids[0].query(By.css('igx-hierarchical-grid')).componentInstance;
284+
childGrid = hierarchicalGrid.hgridAPI.getChildGrids(false)[0];
286285
firstChildCell = childGrid.dataRowList.first.cells.first;
287286
expect(firstChildCell.selected).toBe(true);
288287
}));
@@ -305,17 +304,17 @@ describe('IgxHierarchicalGrid Integration #hGrid', () => {
305304
it('should apply classes to the header when filter row is visible', fakeAsync(() => {
306305
hierarchicalGrid.rowSelection = GridSelectionMode.multiple;
307306
fixture.detectChanges();
308-
const headerExpander: HTMLElement = fixture.nativeElement.querySelector('.igx-grid__hierarchical-expander');
309-
const headerCheckbox: HTMLElement = fixture.nativeElement.querySelector('.igx-grid__cbx-selection');
307+
const headerExpander: HTMLElement = HierarchicalGridFunctions.getExpander(fixture);
308+
const headerCheckbox: HTMLElement = GridSelectionFunctions.getRowCheckboxDiv(fixture.nativeElement);
310309

311-
expect(headerExpander.classList.contains('igx-grid__hierarchical-expander--push')).toBeFalsy();
312-
expect(headerCheckbox.classList.contains('igx-grid__cbx-selection--push')).toBeFalsy();
310+
expect(HierarchicalGridFunctions.isExpander(headerExpander, '--push')).toBeFalsy();
311+
expect(GridSelectionFunctions.isCheckbox(headerCheckbox, '--push')).toBeFalsy();
313312

314313
// open filter row
315314
GridFunctions.clickFilterCellChipUI(fixture, 'ID');
316315

317-
expect(headerExpander.classList.contains('igx-grid__hierarchical-expander--push')).toBeTruthy();
318-
expect(headerCheckbox.classList.contains('igx-grid__cbx-selection--push')).toBeTruthy();
316+
expect(HierarchicalGridFunctions.isExpander(headerExpander, '--push')).toBeTruthy();
317+
expect(GridSelectionFunctions.isCheckbox(headerCheckbox, '--push')).toBeTruthy();
319318
}));
320319
});
321320

@@ -704,7 +703,7 @@ describe('IgxHierarchicalGrid Integration #hGrid', () => {
704703
let childHeader = GridFunctions.getColumnGroupHeaders(fixture)[4];
705704
const firstHeaderIcon = childHeader.query(By.css('.igx-icon'));
706705

707-
expect(childHeader.nativeElement.classList).not.toContain('igx-grid__th--pinned');
706+
expect(GridFunctions.isHeaderPinned(childHeader)).toBeFalsy();
708707
expect(childGrid.columnList.first.pinned).toBeFalsy();
709708
expect(firstHeaderIcon).toBeDefined();
710709

@@ -714,7 +713,7 @@ describe('IgxHierarchicalGrid Integration #hGrid', () => {
714713

715714
childHeader = GridFunctions.getColumnGroupHeaders(fixture)[4];
716715
expect(childGrid.columnList.first.pinned).toBeTruthy();
717-
expect(childHeader.nativeElement.classList).toContain('igx-grid__th--pinned');
716+
expect(GridFunctions.isHeaderPinned(childHeader)).toBeTruthy();
718717
}));
719718

720719
it('should be applied correctly for child grid with multi-column header.', (() => {
@@ -731,13 +730,13 @@ describe('IgxHierarchicalGrid Integration #hGrid', () => {
731730
expect(childGrid.getRowByIndex(0).cells.length).toBe(3);
732731
let cell = childGrid.getCellByColumn(0, 'ChildLevels');
733732
expect(cell.visibleColumnIndex).toEqual(0);
734-
expect(cell.nativeElement.classList).toContain('igx-grid__td--pinned');
733+
expect(GridFunctions.isCellPinned(cell)).toBeTruthy();
735734
cell = childGrid.getCellByColumn(0, 'ProductName');
736735
expect(cell.visibleColumnIndex).toEqual(1);
737-
expect(cell.nativeElement.classList).toContain('igx-grid__td--pinned');
736+
expect(GridFunctions.isCellPinned(cell)).toBeTruthy();
738737
cell = childGrid.getCellByColumn(0, 'ID');
739738
expect(cell.visibleColumnIndex).toEqual(2);
740-
expect(cell.nativeElement.classList).not.toContain('igx-grid__td--pinned');
739+
expect(GridFunctions.isCellPinned(cell)).toBeFalsy();
741740
}));
742741
});
743742
});

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

Lines changed: 24 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -49,7 +49,7 @@ const PAGER_BUTTONS = '.igx-paginator__pager > button';
4949
const ACTIVE_GROUP_ROW_CLASS = 'igx-grid__group-row--active';
5050
const GROUP_ROW_CLASS = 'igx-grid-groupby-row';
5151
const CELL_SELECTED_CSS_CLASS = 'igx-grid__td--selected';
52-
const ROW_DIV_SELECTION_CHECKBOX_CSS_CLASS = '.igx-grid__cbx-selection';
52+
const ROW_DIV_SELECTION_CHECKBOX_CSS_CLASS = 'igx-grid__cbx-selection';
5353
const ROW_SELECTION_CSS_CLASS = 'igx-grid__tr--selected';
5454
const HEADER_ROW_CSS_CLASS = '.igx-grid__thead';
5555
const CHECKBOX_INPUT_CSS_CLASS = '.igx-checkbox__input';
@@ -71,6 +71,8 @@ const SELECTED_COLUMN_CLASS = 'igx-grid__th--selected';
7171
const HOVERED_COLUMN_CLASS = 'igx-grid__th--selectable';
7272
const SELECTED_COLUMN_CELL_CLASS = 'igx-grid__td--column-selected';
7373
const DRAG_INDICATOR_CLASS = '.igx-grid__drag-indicator';
74+
const CELL_PINNED_CLASS = 'igx-grid__td--pinned';
75+
const HEADER_PINNED_CLASS = 'igx-grid__th--pinned';
7476
export const PAGER_CLASS = '.igx-paginator__pager';
7577

7678
export class GridFunctions {
@@ -1064,9 +1066,10 @@ export class GridFunctions {
10641066
return fix.debugElement.queryAll(By.directive(IgxGridHeaderComponent));
10651067
}
10661068

1067-
public static getColumnHeader(columnField: string, fix: ComponentFixture<any>): DebugElement {
1069+
public static getColumnHeader(columnField: string, fix: ComponentFixture<any>, forGrid?: IgxGridBaseDirective): DebugElement {
10681070
return this.getColumnHeaders(fix).find((header) => {
1069-
return header.componentInstance.column.field === columnField;
1071+
const col = header.componentInstance.column;
1072+
return col.field === columnField && (forGrid ? forGrid === col.grid : true);
10701073
});
10711074
}
10721075

@@ -1857,6 +1860,14 @@ export class GridFunctions {
18571860
public static getDragIndicators(fix: ComponentFixture<any>): HTMLElement[] {
18581861
return fix.nativeElement.querySelectorAll(DRAG_INDICATOR_CLASS);
18591862
}
1863+
1864+
public static isCellPinned(cell: IgxGridCellComponent): boolean {
1865+
return cell.nativeElement.classList.contains(CELL_PINNED_CLASS);
1866+
}
1867+
1868+
public static isHeaderPinned(header: DebugElement): boolean {
1869+
return header.nativeElement.classList.contains(HEADER_PINNED_CLASS);
1870+
}
18601871
}
18611872
export class GridSummaryFunctions {
18621873
public static getRootSummaryRow(fix): DebugElement {
@@ -2120,7 +2131,16 @@ export class GridSelectionFunctions {
21202131
}
21212132

21222133
public static getRowCheckboxDiv(rowDOM): HTMLElement {
2123-
return rowDOM.querySelector(ROW_DIV_SELECTION_CHECKBOX_CSS_CLASS);
2134+
return rowDOM.querySelector(`.${ROW_DIV_SELECTION_CHECKBOX_CSS_CLASS}`);
2135+
}
2136+
2137+
/**
2138+
* Returns if the specified element looks like a selection checkbox based on specific class affix
2139+
* @param element The element to check
2140+
* @param modifier The modifier to the base class
2141+
*/
2142+
public static isCheckbox(element: HTMLElement, modifier?: string): boolean {
2143+
return element.classList.contains(`${ROW_DIV_SELECTION_CHECKBOX_CSS_CLASS}${modifier || ''}`);
21242144
}
21252145

21262146
public static getRowCheckboxInput(rowDOM): HTMLInputElement {

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

Lines changed: 21 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,8 @@
11
import { DebugElement } from '@angular/core';
22
import { ComponentFixture } from '@angular/core/testing';
33
import { By } from '@angular/platform-browser';
4-
import { IgxHierarchicalRowComponent } from '../grids/hierarchical-grid';
5-
import { first } from 'rxjs/operators';
4+
import { IgxHierarchicalRowComponent } from '../grids/hierarchical-grid/hierarchical-row.component';
5+
import { IgxRowDirective } from '../grids/row.directive';
66

77
const EXPANDER_CLASS = 'igx-grid__hierarchical-expander';
88

@@ -29,7 +29,24 @@ export class HierarchicalGridFunctions {
2929
* @param fix the ComponentFixture to search
3030
* @param modifier css search modifier
3131
*/
32-
public static getExpander(fix: ComponentFixture<any>, modifier: string): HTMLElement {
33-
return fix.nativeElement.querySelector('.' + EXPANDER_CLASS + (modifier || ''));
32+
public static getExpander(fix: ComponentFixture<any>, modifier?: string): HTMLElement {
33+
return fix.nativeElement.querySelector(`.${EXPANDER_CLASS}${modifier || ''}`);
34+
}
35+
36+
/**
37+
* Returns if there is an expander element in the specified row
38+
* @param row the row instance to check for expander
39+
*/
40+
public static hasExpander(row: IgxRowDirective<any>): boolean {
41+
return row.nativeElement.children[0].classList.contains(EXPANDER_CLASS);
42+
}
43+
44+
/**
45+
* Returns if the specified element looks like an expander based on specific class affix
46+
* @param element The element to check
47+
* @param modifier The modifier to the base class
48+
*/
49+
public static isExpander(element: HTMLElement, modifier?: string): boolean {
50+
return element.classList.contains(`${EXPANDER_CLASS}${modifier || ''}`);
3451
}
3552
}

0 commit comments

Comments
 (0)