Skip to content

Commit 17cbd91

Browse files
ChronosSFChronosSF
authored
Merge pull request #7063 from IgniteUI/sstoychev/ref-int-tests-addendum
chore(*): additional fixes based on feedback.
2 parents cf3f28d + 5256bae commit 17cbd91

File tree

3 files changed

+65
-29
lines changed

3 files changed

+65
-29
lines changed

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

Lines changed: 20 additions & 21 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,14 +235,14 @@ describe('IgxHierarchicalGrid Integration #hGrid', () => {
235235
childGrid.columnList.first.sortable = true;
236236
fixture.detectChanges();
237237

238-
const childHeaders = fixture.debugElement.query(By.css('igx-child-grid-row')).queryAll(By.css('igx-grid-header'));
239-
GridFunctions.clickHeaderSortIcon(childHeaders[0]);
238+
const childHeader = GridFunctions.getColumnHeader('ID', fixture, childGrid);
239+
GridFunctions.clickHeaderSortIcon(childHeader);
240240
fixture.detectChanges();
241-
GridFunctions.clickHeaderSortIcon(childHeaders[0]);
241+
GridFunctions.clickHeaderSortIcon(childHeader);
242242
fixture.detectChanges();
243243

244244
expect(childGrid.dataRowList.first.cells.first.value).toBe('09');
245-
const icon = GridFunctions.getHeaderSortIcon(childHeaders[0]);
245+
const icon = GridFunctions.getHeaderSortIcon(childHeader);
246246
expect(icon).not.toBeNull();
247247
expect(icon.nativeElement.textContent.toLowerCase().trim()).toBe('arrow_downward');
248248
}));
@@ -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

@@ -701,7 +700,7 @@ describe('IgxHierarchicalGrid Integration #hGrid', () => {
701700
let childHeader = GridFunctions.getColumnGroupHeaders(fixture)[4];
702701
const firstHeaderIcon = childHeader.query(By.css('.igx-icon'));
703702

704-
expect(childHeader.nativeElement.classList).not.toContain('igx-grid__th--pinned');
703+
expect(GridFunctions.isHeaderPinned(childHeader)).toBeFalsy();
705704
expect(childGrid.columnList.first.pinned).toBeFalsy();
706705
expect(firstHeaderIcon).toBeDefined();
707706

@@ -711,7 +710,7 @@ describe('IgxHierarchicalGrid Integration #hGrid', () => {
711710

712711
childHeader = GridFunctions.getColumnGroupHeaders(fixture)[4];
713712
expect(childGrid.columnList.first.pinned).toBeTruthy();
714-
expect(childHeader.nativeElement.classList).toContain('igx-grid__th--pinned');
713+
expect(GridFunctions.isHeaderPinned(childHeader)).toBeTruthy();
715714
}));
716715

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

740739
it('should be applied correctly even on the right side', (() => {

‎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 {
@@ -1071,9 +1073,10 @@ export class GridFunctions {
10711073
return fix.debugElement.queryAll(By.directive(IgxGridHeaderComponent));
10721074
}
10731075

1074-
public static getColumnHeader(columnField: string, fix: ComponentFixture<any>): DebugElement {
1076+
public static getColumnHeader(columnField: string, fix: ComponentFixture<any>, forGrid?: IgxGridBaseDirective): DebugElement {
10751077
return this.getColumnHeaders(fix).find((header) => {
1076-
return header.componentInstance.column.field === columnField;
1078+
const col = header.componentInstance.column;
1079+
return col.field === columnField && (forGrid ? forGrid === col.grid : true);
10771080
});
10781081
}
10791082

@@ -1877,6 +1880,14 @@ export class GridFunctions {
18771880
public static getDragIndicators(fix: ComponentFixture<any>): HTMLElement[] {
18781881
return fix.nativeElement.querySelectorAll(DRAG_INDICATOR_CLASS);
18791882
}
1883+
1884+
public static isCellPinned(cell: IgxGridCellComponent): boolean {
1885+
return cell.nativeElement.classList.contains(CELL_PINNED_CLASS);
1886+
}
1887+
1888+
public static isHeaderPinned(header: DebugElement): boolean {
1889+
return header.nativeElement.classList.contains(HEADER_PINNED_CLASS);
1890+
}
18801891
}
18811892
export class GridSummaryFunctions {
18821893
public static getRootSummaryRow(fix): DebugElement {
@@ -2139,7 +2150,16 @@ export class GridSelectionFunctions {
21392150
}
21402151

21412152
public static getRowCheckboxDiv(rowDOM): HTMLElement {
2142-
return rowDOM.querySelector(ROW_DIV_SELECTION_CHECKBOX_CSS_CLASS);
2153+
return rowDOM.querySelector(`.${ROW_DIV_SELECTION_CHECKBOX_CSS_CLASS}`);
2154+
}
2155+
2156+
/**
2157+
* Returns if the specified element looks like a selection checkbox based on specific class affix
2158+
* @param element The element to check
2159+
* @param modifier The modifier to the base class
2160+
*/
2161+
public static isCheckbox(element: HTMLElement, modifier?: string): boolean {
2162+
return element.classList.contains(`${ROW_DIV_SELECTION_CHECKBOX_CSS_CLASS}${modifier || ''}`);
21432163
}
21442164

21452165
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)