chore(*): Add test for external sort template set via input.

Author: MKirova

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

@@ -571,6 +571,29 @@ describe('IgxGrid - Grid Sorting #grid', () => {
             expect(icon.nativeElement.textContent.toLowerCase().trim()).toBe('expand_more');
         });
 
+        it('Should allow setting custom templates for header sorting none/ascending/descending icons via Input.', () => {
+            fixture = TestBed.createComponent(SortByParityComponent);
+            fixture.detectChanges();
+            grid = fixture.componentInstance.grid;
+            grid.sortHeaderIconTemplate = fixture.componentInstance.sortIconTemplate;
+            grid.sortAscendingHeaderIconTemplate = fixture.componentInstance.sortAscIconTemplate;
+            grid.sortDescendingHeaderIconTemplate = fixture.componentInstance.sortDescIconTemplate;
+            fixture.detectChanges();
+            const header = GridFunctions.getColumnHeader('Name', fixture, grid);
+            let icon = GridFunctions.getHeaderSortIcon(header);
+            expect(icon.nativeElement.textContent.toLowerCase().trim()).toBe('arrow_right');
+
+            grid.sort({ fieldName: 'Name', dir: SortingDirection.Asc, ignoreCase: false });
+            fixture.detectChanges();
+            icon = GridFunctions.getHeaderSortIcon(header);
+            expect(icon.nativeElement.textContent.toLowerCase().trim()).toBe('arrow_drop_up');
+
+            grid.sort({ fieldName: 'Name', dir: SortingDirection.Desc, ignoreCase: false });
+            fixture.detectChanges();
+            icon = GridFunctions.getHeaderSortIcon(header);
+            expect(icon.nativeElement.textContent.toLowerCase().trim()).toBe('arrow_drop_down');
+        });
+
         it('Should be able to set single sorting mode and sort one column at a time', fakeAsync(() => {
             fixture = TestBed.createComponent(SortByParityComponent);
             fixture.detectChanges();

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

@@ -7,7 +7,7 @@ import {
 } from './grid-base-components.spec';
 import { IGridSelection } from './grid-interfaces.spec';
 import { SampleTestData, DataParent } from './sample-test-data.spec';
-import { ColumnDefinitions, GridTemplateStrings, EventSubscriptions, TemplateDefinitions } from './template-strings.spec';
+import { ColumnDefinitions, GridTemplateStrings, EventSubscriptions, TemplateDefinitions, ExternalTemplateDefinitions } from './template-strings.spec';
 import { IgxColumnComponent } from '../grids/columns/column.component';
 import { IgxFilteringOperand, IgxNumberFilteringOperand } from '../data-operations/filtering-condition';
 import { IFilteringExpressionsTree, FilteringExpressionsTree } from '../data-operations/filtering-expressions-tree';
@@ -2294,8 +2294,18 @@ export class NoColumnWidthGridComponent extends BasicGridComponent {
         '',
         '',
         TemplateDefinitions.sortIconTemplates)
+        +  ExternalTemplateDefinitions.sortIconTemplates
 })
 export class SortByParityComponent extends GridDeclaredColumnsComponent implements ISortingStrategy {
+     @ViewChild('sortIcon', {read: TemplateRef })
+     public sortIconTemplate: TemplateRef<any>;
+
+     @ViewChild('sortAscIcon', {read: TemplateRef })
+     public sortAscIconTemplate: TemplateRef<any>;
+
+     @ViewChild('sortDescIcon', {read: TemplateRef })
+     public sortDescIconTemplate: TemplateRef<any>;
+
     public sort(data: any[], fieldName: string, dir: SortingDirection) {
         const key = fieldName;
         const reverse = (dir === SortingDirection.Desc ? -1 : 1);

projects/igniteui-angular/src/lib/test-utils/template-strings.spec.ts

@@ -514,6 +514,20 @@ export class TemplateDefinitions {
     `;
 }
 
+export class ExternalTemplateDefinitions {
+    public static sortIconTemplates = `
+        <ng-template #sortIcon igxSortHeaderIcon>
+            <igx-icon>arrow_right</igx-icon>
+        </ng-template>
+        <ng-template #sortAscIcon igxSortAscendingHeaderIcon>
+            <igx-icon>arrow_drop_up</igx-icon>
+        </ng-template>
+        <ng-template #sortDescIcon igxSortDescendingHeaderIcon>
+            <igx-icon>arrow_drop_down</igx-icon>
+        </ng-template>
+    `;
+}
+
 export class EventSubscriptions {
 
     public static columnInit = ` (columnInit)="columnInit($event)"`;