chore(grid): Unifying test sample and updating test

Author: Ivan Kitanov

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

@@ -6,7 +6,7 @@ import {
     SelectionWithTransactionsComponent,
     CellSelectionNoneComponent,
     CellSelectionSingleComponent,
-    IgxGridCellTemplateForRangeSelectionComponent
+    IgxGridRowEditingWithoutEditableColumnsComponent
 } from '../../test-utils/grid-samples.spec';
 import { IgxStringFilteringOperand } from '../../data-operations/filtering-condition';
 import { UIInteractions, wait } from '../../test-utils/ui-interactions.spec';
@@ -28,7 +28,7 @@ describe('IgxGrid - Cell selection #grid', () => {
                 SelectionWithTransactionsComponent,
                 CellSelectionNoneComponent,
                 CellSelectionSingleComponent,
-                IgxGridCellTemplateForRangeSelectionComponent
+                IgxGridRowEditingWithoutEditableColumnsComponent
             ]
         }).compileComponents();
     }));
@@ -259,18 +259,30 @@ describe('IgxGrid - Cell selection #grid', () => {
         });
 
         it('Should not trigger range selection when CellTemplate is used and the user clicks on element inside it',()=>{
-            fix = TestBed.createComponent(IgxGridCellTemplateForRangeSelectionComponent);
+            fix = TestBed.createComponent(IgxGridRowEditingWithoutEditableColumnsComponent);
             fix.detectChanges();
+
+            const component = fix.componentInstance;
             grid = fix.componentInstance.grid;
-            detect = () => grid.cdr.detectChanges();
+
+            expect(component.customCell).toBeDefined();
+
+            const column = grid.getColumnByName('ProductID');
+            column.bodyTemplate = component.customCell;
+            fix.detectChanges();
 
             const selectionChangeSpy = spyOn<any>(grid.rangeSelected, 'emit').and.callThrough();
             const cell = grid.gridAPI.get_cell_by_index(1, 'ProductID');
             const cellElement = cell.nativeElement;
             const span = cellElement.querySelector('span');
 
             expect(span).not.toBeNull();
-            span.click();
+
+
+            const pointerDown = new PointerEvent('pointerdown', { bubbles: true });
+            const pointerUp = new PointerEvent('pointerup', { bubbles: true });
+            span.dispatchEvent(pointerDown);
+            span.dispatchEvent(pointerUp);
             fix.detectChanges();
             expect(selectionChangeSpy).not.toHaveBeenCalled();
         });

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

@@ -1407,31 +1407,18 @@ export class IgxGridRowEditingComponent extends BasicGridComponent {
         <igx-column field="ReorderLevel" header="Reorder Lever" [dataType]="'number'" [editable]="true" width="100px"></igx-column>
         <igx-column field="ProductName" header="Product Name" [dataType]="'string'" width="150px"></igx-column>
         <igx-column field="OrderDate" header="Order Date" [dataType]="'date'" width="150px" [editable]="false"></igx-column>
+        <ng-template #customCell igxCell let-cell="cell" let-val>
+            <span style="background-color: red;">val</span>
+            <br>
+            {{val}}
+        </ng-template>
     </igx-grid>`,
     imports: [IgxGridComponent, IgxColumnComponent, IgxCellTemplateDirective]
 })
 export class IgxGridRowEditingWithoutEditableColumnsComponent extends BasicGridComponent {
     public override data = SampleTestData.foodProductData();
-}
-
-@Component({
-    template: `
-    <igx-grid #grid [data]="data" [primaryKey]="'ProductID'" width="700px" height="400px"  [cellSelection]="'multiple'">
-        <igx-column field="ProductID" header="Product ID">
-            <ng-template igxCell let-cell="cell" let-val>
-               <span style="background-color: red;">val</span>
-                <br>
-                {{val}}
-            </ng-template>
-        </igx-column>
-        <igx-column field="ReorderLevel" header="Reorder Lever" [dataType]="'number'" [editable]="true" width="100px"></igx-column>
-        <igx-column field="ProductName" header="Product Name" [dataType]="'string'" width="150px"></igx-column>
-        <igx-column field="OrderDate" header="Order Date" [dataType]="'date'" width="150px" [editable]="false"></igx-column>
-    </igx-grid>`,
-    imports: [IgxGridComponent, IgxColumnComponent, IgxCellTemplateDirective]
-})
-export class IgxGridCellTemplateForRangeSelectionComponent extends BasicGridComponent {
-    public override data = SampleTestData.foodProductData();
+    @ViewChild('customCell', { static: true })
+    public customCell!: TemplateRef<any>;
 }
 
 @Component({