chore(grids): Adding tests for tGrid and hGrid

Author: Ivan Kitanov

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

@@ -9,7 +9,8 @@ import {
     IgxHierarchicalGridRowSelectionComponent,
     IgxHierarchicalGridRowSelectionTestSelectRowOnClickComponent,
     IgxHierarchicalGridCustomSelectorsComponent,
-    IgxHierarchicalGridRowSelectionNoTransactionsComponent
+    IgxHierarchicalGridRowSelectionNoTransactionsComponent,
+    IgxHierGridExternalAdvancedFilteringComponent
 } from '../../test-utils/hierarchical-grid-components.spec';
 import { GridSelectionFunctions, GridFunctions } from '../../test-utils/grid-functions.spec';
 import { GridSelectionMode, Size } from '../common/enums';
@@ -33,7 +34,8 @@ describe('IgxHierarchicalGrid selection #hGrid', () => {
                 IgxHierarchicalGridRowSelectionComponent,
                 IgxHierarchicalGridRowSelectionTestSelectRowOnClickComponent,
                 IgxHierarchicalGridCustomSelectorsComponent,
-                IgxHierarchicalGridRowSelectionNoTransactionsComponent
+                IgxHierarchicalGridRowSelectionNoTransactionsComponent,
+                IgxHierGridExternalAdvancedFilteringComponent,
             ]
         }).compileComponents();
     }))
@@ -474,6 +476,30 @@ describe('IgxHierarchicalGrid selection #hGrid', () => {
             GridSelectionFunctions.verifySelectedRange(hierarchicalGrid, 0, 0, 2, 2);
         }));
 
+        it('Should not trigger range selection when CellTemplate is used and the user clicks on element inside it', () => {
+            fix = TestBed.createComponent(IgxHierGridExternalAdvancedFilteringComponent);
+            fix.detectChanges();
+
+            const component = fix.componentInstance;
+            hierarchicalGrid = fix.componentInstance.hgrid;
+
+            expect(component.customCell).toBeDefined();
+
+            const column = hierarchicalGrid.getColumnByName('ID');
+            column.bodyTemplate = component.customCell;
+            fix.detectChanges();
+
+            const selectionChangeSpy = spyOn<any>(hierarchicalGrid.rangeSelected, 'emit').and.callThrough();
+            const cell = hierarchicalGrid.gridAPI.get_cell_by_index(0, 'ID');
+            const cellElement = cell.nativeElement;
+            const span = cellElement.querySelector('span');
+
+            expect(span).not.toBeNull();
+
+            UIInteractions.simulateClickAndSelectEvent(span);
+            fix.detectChanges();
+            expect(selectionChangeSpy).not.toHaveBeenCalled();
+        });
     });
 
     describe('Row Selection', () => {

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

@@ -964,6 +964,27 @@ describe('IgxTreeGrid - Selection #tGrid', () => {
             expect(treeGrid.selectedCells[0] instanceof IgxGridCell).toBe(true);
             expect(treeGrid.selectedCells[0].value).toBe(19);
         });
+
+        it('Should not trigger range selection when CellTemplate is used and the user clicks on element inside it', () => {
+            const component = fix.componentInstance;
+
+            expect(component.customCell).toBeDefined();
+
+            const column = treeGrid.getColumnByName('ID');
+            column.bodyTemplate = component.customCell;
+            fix.detectChanges();
+
+            const selectionChangeSpy = spyOn<any>(treeGrid.rangeSelected, 'emit').and.callThrough();
+            const cell = treeGrid.gridAPI.get_cell_by_index(0, 'ID');
+            const cellElement = cell.nativeElement;
+            const span = cellElement.querySelector('span');
+
+            expect(span).not.toBeNull();
+
+            UIInteractions.simulateClickAndSelectEvent(span);
+            fix.detectChanges();
+            expect(selectionChangeSpy).not.toHaveBeenCalled();
+        });
     });
 
     describe('Cell/Row Selection With Row Editing', () => {

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

@@ -1,4 +1,4 @@
-import { Component, ViewChild, OnInit } from '@angular/core';
+import { Component, ViewChild, OnInit, TemplateRef } from '@angular/core';
 import { SampleTestData } from './sample-test-data.spec';
 import { ColumnType, IPinningConfig, IgxAdvancedFilteringDialogComponent, IgxColumnComponent, IgxNumberSummaryOperand, IgxSummaryResult } from '../grids/public_api';
 import { IgxHierarchicalGridComponent } from '../grids/hierarchical-grid/hierarchical-grid.component';
@@ -460,6 +460,11 @@ export class IgxHierarchicalGridActionStripComponent extends IgxHierarchicalGrid
                 <igx-column field="ProductName"></igx-column>
             </igx-row-island>
         </igx-row-island>
+        <ng-template #customCell igxCell let-cell="cell" let-val>
+            <span style="background-color: red;">val</span>
+            <br>
+            {{val}}
+        </ng-template>
     </igx-hierarchical-grid>
     <igx-advanced-filtering-dialog [grid]="hierarchicalGrid">
     </igx-advanced-filtering-dialog>`,
@@ -468,7 +473,8 @@ export class IgxHierarchicalGridActionStripComponent extends IgxHierarchicalGrid
 export class IgxHierGridExternalAdvancedFilteringComponent extends IgxHierarchicalGridTestBaseComponent {
     @ViewChild('hierarchicalGrid', { read: IgxHierarchicalGridComponent, static: true })
     public override hgrid: IgxHierarchicalGridComponent;
-
+    @ViewChild('customCell', { static: true })
+    public customCell!: TemplateRef<any>;
     public override data = SampleTestData.generateHGridData(5, 3);
 }
 

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

@@ -1,4 +1,4 @@
-import { Component, ViewChild, OnInit } from '@angular/core';
+import { Component, ViewChild, OnInit, TemplateRef } from '@angular/core';
 import { IgxTreeGridComponent } from '../grids/tree-grid/tree-grid.component';
 import { SampleTestData } from './sample-test-data.spec';
 import { IgxSummaryOperand, IgxNumberSummaryOperand, IgxSummaryResult, IPinningConfig, IgxColumnComponent } from '../grids/public_api';
@@ -191,13 +191,20 @@ export class IgxTreeGridExpandingComponent {
         <igx-column [field]="'HireDate'" dataType="date"></igx-column>
         <igx-column [field]="'Age'" dataType="number"></igx-column>
         <igx-paginator [perPage]="10"></igx-paginator>
+        <ng-template #customCell igxCell let-cell="cell" let-val>
+            <span style="background-color: red;">val</span>
+            <br>
+            {{val}}
+        </ng-template>
     </igx-tree-grid>
     `,
     imports: [IgxTreeGridComponent, IgxColumnComponent, IgxPaginatorComponent]
 })
 export class IgxTreeGridCellSelectionComponent {
     @ViewChild(IgxTreeGridComponent, { static: true }) public treeGrid: IgxTreeGridComponent;
     public data = SampleTestData.employeeTreeData();
+    @ViewChild('customCell', { static: true })
+    public customCell!: TemplateRef<any>;
 }
 
 @Component({