Skip to content

Commit 8604bbe

Browse files
MKirovaMKirova
MKirova
authored and
MKirova
committed
fix(igxHierarchicalGrid): Allow hiding expansion indicator based on user condition. Moving toggle logic inside icon. Unifying how hgrid tests expand rows.
1 parent ba57d4f commit 8604bbe

File tree

6 files changed

+82
-66
lines changed

6 files changed

+82
-66
lines changed

‎projects/igniteui-angular/src/lib/core/styles/components/grid/_grid-theme.scss‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2196,7 +2196,6 @@
21962196
display: flex;
21972197
align-items: center;
21982198
justify-content: center;
2199-
cursor: pointer;
22002199
z-index: 3;
22012200
color: --var($theme, 'expand-icon-color');
22022201
border-right: 1px solid transparent;
@@ -2216,6 +2215,7 @@
22162215
}
22172216

22182217
igx-icon {
2218+
cursor: pointer;
22192219
color: --var($theme, 'expand-icon-color');
22202220
max-width: $hierarchical-action-icon;
22212221
min-width: $hierarchical-action-icon;

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

Lines changed: 43 additions & 39 deletions
Original file line numberDiff line numberDiff line change
@@ -50,9 +50,9 @@ describe('IgxHierarchicalGrid Integration #hGrid', () => {
5050

5151
expect(document.querySelectorAll('igx-grid-header').length).toEqual(3);
5252

53-
const firstRow = hierarchicalGrid.dataRowList.toArray()[0];
53+
const firstRow = hierarchicalGrid.dataRowList.toArray()[0] as IgxHierarchicalRowComponent;
5454
// first child of the row should expand indicator
55-
firstRow.nativeElement.children[0].click();
55+
UIInteractions.clickElement(firstRow.expander);
5656
fixture.detectChanges();
5757

5858
const childGrid = hierarchicalGrid.hgridAPI.getChildGrids(false)[0];
@@ -89,7 +89,7 @@ describe('IgxHierarchicalGrid Integration #hGrid', () => {
8989
fixture.detectChanges();
9090

9191
let firstRow = hierarchicalGrid.dataRowList.toArray()[0] as IgxHierarchicalRowComponent;
92-
firstRow.nativeElement.children[0].click();
92+
UIInteractions.clickElement(firstRow.expander);
9393
fixture.detectChanges();
9494
expect(firstRow.expanded).toBeTruthy();
9595

@@ -133,10 +133,10 @@ describe('IgxHierarchicalGrid Integration #hGrid', () => {
133133
firstLayoutInstances.push(args.grid);
134134
});
135135
// expand 1st row
136-
hierarchicalGrid.dataRowList.toArray()[0].nativeElement.children[0].click();
136+
UIInteractions.clickElement((hierarchicalGrid.dataRowList.toArray()[0] as IgxHierarchicalRowComponent).expander);
137137
fixture.detectChanges();
138138
// expand 2nd row
139-
hierarchicalGrid.dataRowList.toArray()[1].nativeElement.children[0].click();
139+
UIInteractions.clickElement((hierarchicalGrid.dataRowList.toArray()[1] as IgxHierarchicalRowComponent).expander);
140140
fixture.detectChanges();
141141
// test instances
142142
expect(firstLayoutInstances.length).toEqual(2);
@@ -150,10 +150,10 @@ describe('IgxHierarchicalGrid Integration #hGrid', () => {
150150
firstLayoutInstances.push(args.grid);
151151
});
152152
// expand 1st row
153-
hierarchicalGrid.dataRowList.toArray()[0].nativeElement.children[0].click();
153+
UIInteractions.clickElement((hierarchicalGrid.dataRowList.toArray()[0] as IgxHierarchicalRowComponent).expander);
154154
fixture.detectChanges();
155155
// expand 2nd row
156-
hierarchicalGrid.dataRowList.toArray()[1].nativeElement.children[0].click();
156+
UIInteractions.clickElement((hierarchicalGrid.dataRowList.toArray()[1] as IgxHierarchicalRowComponent).expander);
157157
fixture.detectChanges();
158158
firstLayoutInstances[0].updateRow({ ProductName: 'Changed' }, '00');
159159
firstLayoutInstances[1].updateRow({ ProductName: 'Changed' }, '10');
@@ -213,7 +213,7 @@ describe('IgxHierarchicalGrid Integration #hGrid', () => {
213213
childGrid = args.grid;
214214
});
215215
// expand 1st row
216-
hierarchicalGrid.dataRowList.toArray()[0].nativeElement.children[0].click();
216+
UIInteractions.clickElement((hierarchicalGrid.dataRowList.toArray()[0] as IgxHierarchicalRowComponent).expander);
217217
fixture.detectChanges();
218218
childGrid.updateRow({ ProductName: 'Changed' }, '00');
219219
fixture.detectChanges();
@@ -226,9 +226,9 @@ describe('IgxHierarchicalGrid Integration #hGrid', () => {
226226

227227
describe('Sorting', () => {
228228
it('should display correct child data for expanded row after sorting.', (async () => {
229-
const firstRow = hierarchicalGrid.dataRowList.toArray()[0];
229+
const firstRow = hierarchicalGrid.dataRowList.toArray()[0] as IgxHierarchicalRowComponent;
230230
// expand 1st row
231-
firstRow.nativeElement.children[0].click();
231+
UIInteractions.clickElement(firstRow.expander);
232232
fixture.detectChanges();
233233
hierarchicalGrid.sort({
234234
fieldName: 'ID', dir: SortingDirection.Desc, ignoreCase: false, strategy: DefaultSortingStrategy.instance()
@@ -249,9 +249,9 @@ describe('IgxHierarchicalGrid Integration #hGrid', () => {
249249
}));
250250

251251
it('should allow sorting via headers in child grids', fakeAsync(/** row toggle rAF */() => {
252-
const firstRow = hierarchicalGrid.dataRowList.toArray()[0];
252+
const firstRow = hierarchicalGrid.dataRowList.toArray()[0] as IgxHierarchicalRowComponent;
253253
// expand 1st row
254-
firstRow.nativeElement.children[0].click();
254+
UIInteractions.clickElement(firstRow.expander);
255255
fixture.detectChanges();
256256
// enable sorting
257257
const childGrid = hierarchicalGrid.hgridAPI.getChildGrids(false)[0];
@@ -272,7 +272,7 @@ describe('IgxHierarchicalGrid Integration #hGrid', () => {
272272
}));
273273
});
274274

275-
// describe('GroupBy', () => {
275+
// describe('GroupBy', () => {
276276
// it('Data should be rendered correctly when children are expanded', async() => {
277277
// const firstRow = hierarchicalGrid.dataRowList.toArray()[0];
278278
// // expand 1st row
@@ -361,9 +361,9 @@ describe('IgxHierarchicalGrid Integration #hGrid', () => {
361361
fixture.detectChanges();
362362
expect(document.querySelectorAll('igx-grid-filtering-row').length).toEqual(1);
363363

364-
const firstRow = hierarchicalGrid.dataRowList.toArray()[0];
364+
const firstRow = hierarchicalGrid.dataRowList.toArray()[0] as IgxHierarchicalRowComponent;
365365
// first child of the row should expand indicator
366-
firstRow.nativeElement.children[0].click();
366+
UIInteractions.clickElement(firstRow.expander);
367367
fixture.detectChanges();
368368

369369
filteringCells = fixture.debugElement.queryAll(By.css('igx-grid-filtering-cell'));
@@ -375,7 +375,8 @@ describe('IgxHierarchicalGrid Integration #hGrid', () => {
375375

376376
it('should not lose child grid states after filtering in parent grid.', fakeAsync(() => {
377377
// expand 1st row
378-
hierarchicalGrid.dataRowList.toArray()[0].nativeElement.children[0].click();
378+
const firstRow = hierarchicalGrid.dataRowList.toArray()[0] as IgxHierarchicalRowComponent;
379+
UIInteractions.clickElement(firstRow.expander);
379380
fixture.detectChanges();
380381
const childGrids = fixture.debugElement.queryAll(By.css('igx-child-grid-row'));
381382
let childGrid = childGrids[0].query(By.css('igx-hierarchical-grid')).componentInstance;
@@ -451,7 +452,8 @@ describe('IgxHierarchicalGrid Integration #hGrid', () => {
451452
describe('Summaries', () => {
452453
const SUMMARIES_MARGIN_CLASS = '.igx-grid__summaries-patch';
453454
it('should allow defining summaries for child grid and child should be sized correctly.', fakeAsync(/** row toggle rAF */() => {
454-
hierarchicalGrid.dataRowList.toArray()[0].nativeElement.children[0].click();
455+
let firstRow = hierarchicalGrid.dataRowList.toArray()[0] as IgxHierarchicalRowComponent;
456+
UIInteractions.clickElement(firstRow.expander);
455457
fixture.detectChanges();
456458

457459
const childGrids = fixture.debugElement.queryAll(By.css('igx-child-grid-row'));
@@ -462,7 +464,7 @@ describe('IgxHierarchicalGrid Integration #hGrid', () => {
462464
const summaryRow = childGrid.summariesRowList.first.nativeElement;
463465
const summaryRowIndentation = summaryRow.querySelector(SUMMARIES_MARGIN_CLASS);
464466
expect(summaryRow.children.length).toEqual(2);
465-
expect(summaryRowIndentation.offsetWidth).toEqual(expander.nativeElement.offsetWidth);
467+
expect(summaryRowIndentation.offsetWidth).toEqual(expander.nativeElement.parentElement.offsetWidth);
466468

467469
const gridHeight = childGrid.nativeElement.offsetHeight;
468470
const childElems: HTMLElement[] = Array.from(childGrid.nativeElement.children);
@@ -473,7 +475,8 @@ describe('IgxHierarchicalGrid Integration #hGrid', () => {
473475
// Expect the combined height of all elements (header, body, footer etc) to equal the calculated height of the grid.
474476
expect(elementsHeight).toEqual(gridHeight);
475477

476-
childGrid.dataRowList.toArray()[0].nativeElement.children[0].click();
478+
firstRow = childGrid.dataRowList.toArray()[0] as IgxHierarchicalRowComponent;
479+
UIInteractions.clickElement(firstRow.expander);
477480
fixture.detectChanges();
478481

479482
const childGridDebugElement = childGrids[0].query(By.css('igx-hierarchical-grid'));
@@ -487,7 +490,8 @@ describe('IgxHierarchicalGrid Integration #hGrid', () => {
487490

488491
it('should size summaries with row selectors for parent and children grids correctly.', fakeAsync(/** row toggle rAF */() => {
489492
hierarchicalGrid.rowSelectable = true;
490-
hierarchicalGrid.dataRowList.toArray()[0].nativeElement.children[0].click();
493+
const firstRow = hierarchicalGrid.dataRowList.toArray()[0] as IgxHierarchicalRowComponent;
494+
UIInteractions.clickElement(firstRow.expander);
491495
fixture.detectChanges();
492496
tick(16);
493497

@@ -498,7 +502,7 @@ describe('IgxHierarchicalGrid Integration #hGrid', () => {
498502

499503
expect(rootSummaryRow.children.length).toEqual(2);
500504
expect(rootSummaryIndentation.offsetWidth)
501-
.toEqual(rootExpander.nativeElement.offsetWidth + rootCheckbox.nativeElement.offsetWidth);
505+
.toEqual(rootExpander.nativeElement.parentElement.offsetWidth + rootCheckbox.nativeElement.offsetWidth);
502506

503507
const childGrids = fixture.debugElement.queryAll(By.css('igx-child-grid-row'));
504508
const childGrid = childGrids[0].query(By.css('igx-hierarchical-grid')).componentInstance;
@@ -509,7 +513,7 @@ describe('IgxHierarchicalGrid Integration #hGrid', () => {
509513
const childSummaryIndentation = summaryRow.querySelector(SUMMARIES_MARGIN_CLASS);
510514

511515
expect(summaryRow.children.length).toEqual(2);
512-
expect(childSummaryIndentation.offsetWidth).toEqual(expander.nativeElement.offsetWidth);
516+
expect(childSummaryIndentation.offsetWidth).toEqual(expander.nativeElement.parentElement.offsetWidth);
513517
}));
514518

515519
it('should render summaries for column inside a column group.', fakeAsync(/** row toggle rAF */() => {
@@ -518,7 +522,8 @@ describe('IgxHierarchicalGrid Integration #hGrid', () => {
518522
fixture.componentInstance.rowIsland.childColumns.last.hasSummary = true;
519523
fixture.detectChanges();
520524

521-
hierarchicalGrid.dataRowList.toArray()[0].nativeElement.children[0].click();
525+
const firstRow = hierarchicalGrid.dataRowList.toArray()[0] as IgxHierarchicalRowComponent;
526+
UIInteractions.clickElement(firstRow.expander);
522527
fixture.detectChanges();
523528

524529
const childGrids = fixture.debugElement.queryAll(By.css('igx-child-grid-row'));
@@ -538,12 +543,11 @@ describe('IgxHierarchicalGrid Integration #hGrid', () => {
538543
fixture.detectChanges();
539544

540545
expect(hierarchicalGrid.verticalScrollContainer.igxForOf.length).toEqual(15);
541-
542-
hierarchicalGrid.dataRowList.toArray()[1].nativeElement.children[0].click();
546+
UIInteractions.clickElement((hierarchicalGrid.dataRowList.toArray()[1] as IgxHierarchicalRowComponent).expander);
543547
fixture.detectChanges();
544548
expect(hierarchicalGrid.verticalScrollContainer.igxForOf.length).toEqual(16);
545549

546-
hierarchicalGrid.dataRowList.toArray()[0].nativeElement.children[0].click();
550+
UIInteractions.clickElement((hierarchicalGrid.dataRowList.toArray()[0] as IgxHierarchicalRowComponent).expander);
547551
fixture.detectChanges();
548552
expect(hierarchicalGrid.verticalScrollContainer.igxForOf.length).toEqual(17);
549553

@@ -559,9 +563,9 @@ describe('IgxHierarchicalGrid Integration #hGrid', () => {
559563
hierarchicalGrid.reflow();
560564
fixture.detectChanges();
561565

562-
hierarchicalGrid.dataRowList.toArray()[1].nativeElement.children[0].click();
566+
UIInteractions.clickElement((hierarchicalGrid.dataRowList.toArray()[1] as IgxHierarchicalRowComponent).expander);
563567
fixture.detectChanges();
564-
hierarchicalGrid.dataRowList.toArray()[0].nativeElement.children[0].click();
568+
UIInteractions.clickElement((hierarchicalGrid.dataRowList.toArray()[0] as IgxHierarchicalRowComponent).expander);
565569
fixture.detectChanges();
566570

567571
expect((hierarchicalGrid.dataRowList.toArray()[0] as IgxHierarchicalRowComponent).expanded).toBeTruthy();
@@ -616,7 +620,7 @@ describe('IgxHierarchicalGrid Integration #hGrid', () => {
616620
expect(hierarchicalGrid.hasVerticalSroll()).toBeFalsy();
617621

618622
// expand first
619-
hierarchicalGrid.getRowByKey('0').nativeElement.children[0].click();
623+
UIInteractions.clickElement((hierarchicalGrid.getRowByKey('0') as IgxHierarchicalRowComponent).expander);
620624
await wait(30);
621625
fixture.detectChanges();
622626

@@ -635,7 +639,7 @@ describe('IgxHierarchicalGrid Integration #hGrid', () => {
635639
expect(lastRow.index).toBe(5);
636640
expect(lastRow.rowData).toBe(fixture.componentInstance.data[4]);
637641

638-
hierarchicalGrid.getRowByKey('1').nativeElement.children[0].click();
642+
UIInteractions.clickElement((hierarchicalGrid.getRowByKey('1') as IgxHierarchicalRowComponent).expander);
639643
await wait(30);
640644
fixture.detectChanges();
641645
hierarchicalGrid.verticalScrollContainer.scrollTo(hierarchicalGrid.verticalScrollContainer.igxForOf.length - 1);
@@ -650,7 +654,7 @@ describe('IgxHierarchicalGrid Integration #hGrid', () => {
650654
expect(lastRow.index).toBe(6);
651655
expect(lastRow.rowData).toBe(fixture.componentInstance.data[4]);
652656

653-
hierarchicalGrid.getRowByKey('2').nativeElement.children[0].click();
657+
UIInteractions.clickElement((hierarchicalGrid.getRowByKey('2') as IgxHierarchicalRowComponent).expander);
654658
await wait(30);
655659
fixture.detectChanges();
656660
hierarchicalGrid.verticalScrollContainer.scrollTo(hierarchicalGrid.verticalScrollContainer.igxForOf.length - 1);
@@ -665,7 +669,7 @@ describe('IgxHierarchicalGrid Integration #hGrid', () => {
665669
expect(lastRow.index).toBe(7);
666670
expect(lastRow.rowData).toBe(fixture.componentInstance.data[4]);
667671

668-
hierarchicalGrid.getRowByKey('3').nativeElement.children[0].click();
672+
UIInteractions.clickElement((hierarchicalGrid.getRowByKey('3') as IgxHierarchicalRowComponent).expander);
669673
await wait(30);
670674
fixture.detectChanges();
671675
hierarchicalGrid.verticalScrollContainer.scrollTo(hierarchicalGrid.verticalScrollContainer.igxForOf.length - 1);
@@ -680,7 +684,7 @@ describe('IgxHierarchicalGrid Integration #hGrid', () => {
680684
expect(lastRow.index).toBe(8);
681685
expect(lastRow.rowData).toBe(fixture.componentInstance.data[4]);
682686

683-
hierarchicalGrid.getRowByKey('4').nativeElement.children[0].click();
687+
UIInteractions.clickElement((hierarchicalGrid.getRowByKey('4') as IgxHierarchicalRowComponent).expander);
684688
await wait(30);
685689
fixture.detectChanges();
686690
hierarchicalGrid.verticalScrollContainer.scrollTo(hierarchicalGrid.verticalScrollContainer.igxForOf.length - 1);
@@ -706,7 +710,7 @@ describe('IgxHierarchicalGrid Integration #hGrid', () => {
706710
expect(hierarchicalGrid.hasVerticalSroll()).toBeFalsy();
707711

708712
// expand row
709-
hierarchicalGrid.dataRowList.toArray()[1].nativeElement.children[0].click();
713+
UIInteractions.clickElement((hierarchicalGrid.dataRowList.toArray()[1] as IgxHierarchicalRowComponent).expander);
710714
fixture.detectChanges();
711715
await wait(30);
712716
fixture.detectChanges();
@@ -736,7 +740,7 @@ describe('IgxHierarchicalGrid Integration #hGrid', () => {
736740
describe('Toolbar', () => {
737741
it('should be displayed correctly for child layout and hiding should apply to the correct child.',
738742
fakeAsync(/** row toggle rAF */() => {
739-
hierarchicalGrid.dataRowList.toArray()[0].nativeElement.children[0].click();
743+
UIInteractions.clickElement((hierarchicalGrid.dataRowList.toArray()[0] as IgxHierarchicalRowComponent).expander);
740744
fixture.detectChanges();
741745

742746
const childGrids = fixture.debugElement.queryAll(By.css('igx-child-grid-row'));
@@ -822,7 +826,7 @@ describe('IgxHierarchicalGrid Integration #hGrid', () => {
822826

823827
it('should be displayed correctly for child layout and pinning should apply to the correct child.',
824828
fakeAsync(/** row toggle rAF */() => {
825-
hierarchicalGrid.dataRowList.toArray()[0].nativeElement.children[0].click();
829+
UIInteractions.clickElement((hierarchicalGrid.dataRowList.toArray()[0] as IgxHierarchicalRowComponent).expander);
826830
fixture.detectChanges();
827831

828832
const childGrids = fixture.debugElement.queryAll(By.css('igx-child-grid-row'));
@@ -868,7 +872,7 @@ describe('IgxHierarchicalGrid Integration #hGrid', () => {
868872
fixture = TestBed.createComponent(IgxHierarchicalGridTestCustomToolbarComponent);
869873
fixture.detectChanges();
870874
hierarchicalGrid = fixture.componentInstance.hgrid;
871-
hierarchicalGrid.dataRowList.toArray()[0].nativeElement.children[0].click();
875+
UIInteractions.clickElement((hierarchicalGrid.dataRowList.toArray()[0] as IgxHierarchicalRowComponent).expander);
872876

873877
const toolbars = fixture.debugElement.queryAll(By.css('igx-grid-toolbar'));
874878
expect(toolbars.length).toEqual(3);
@@ -889,7 +893,7 @@ describe('IgxHierarchicalGrid Integration #hGrid', () => {
889893

890894
describe('Moving', () => {
891895
it('should not be possible to drag move a column from another grid.', (async() => {
892-
hierarchicalGrid.dataRowList.toArray()[0].nativeElement.children[0].click();
896+
UIInteractions.clickElement((hierarchicalGrid.dataRowList.toArray()[0] as IgxHierarchicalRowComponent).expander);
893897
fixture.detectChanges();
894898

895899
const childGrids = fixture.debugElement.queryAll(By.css('igx-child-grid-row'));
@@ -935,7 +939,7 @@ describe('IgxHierarchicalGrid Integration #hGrid', () => {
935939
describe('Pinning', () => {
936940
it('should be possible by templating the header and getting column reference for child grid', (async() => {
937941
hierarchicalGrid = fixture.componentInstance.hgrid;
938-
hierarchicalGrid.dataRowList.toArray()[0].nativeElement.children[0].click();
942+
UIInteractions.clickElement((hierarchicalGrid.dataRowList.toArray()[0] as IgxHierarchicalRowComponent).expander);
939943
fixture.detectChanges();
940944

941945
const childGrids = fixture.debugElement.queryAll(By.css('igx-child-grid-row'));

0 commit comments

Comments
 (0)