From c3a4b5fb5e6e963d06582d4ebed2c65e029fcecf Mon Sep 17 00:00:00 2001
From: VDyulgerov <volen1999@gmail.com>
Date: Thu, 30 Sep 2021 16:53:40 +0300
Subject: [PATCH 01/16] feat(changes): push changes initial

---
 .../grid-pinning-actions.component.spec.ts    |  2 +-
 .../src/lib/grids/grid-base.directive.ts      | 42 +++++++++++++++++++
 .../lib/grids/grid/grid-row-pinning.spec.ts   | 32 +++++++++++++-
 .../grid-row-pinning.sample.ts                |  6 +++
 src/app/grid-state/grid-state.component.ts    |  2 +-
 5 files changed, 80 insertions(+), 4 deletions(-)

diff --git a/projects/igniteui-angular/src/lib/action-strip/grid-actions/grid-pinning-actions.component.spec.ts b/projects/igniteui-angular/src/lib/action-strip/grid-actions/grid-pinning-actions.component.spec.ts
index d952c06d818..25dc29dd3b5 100644
--- a/projects/igniteui-angular/src/lib/action-strip/grid-actions/grid-pinning-actions.component.spec.ts
+++ b/projects/igniteui-angular/src/lib/action-strip/grid-actions/grid-pinning-actions.component.spec.ts
@@ -60,7 +60,7 @@ describe('igxGridPinningActions #grid ', () => {
             expect(grid.pinnedRows.length).toBe(0);
         });
 
-        it('should allow navigating to disabled row in unpinned area', async () => {
+        fit('should allow navigating to disabled row in unpinned area', async () => {
             grid.pinRow('FAMIA');
             fixture.detectChanges();
 
diff --git a/projects/igniteui-angular/src/lib/grids/grid-base.directive.ts b/projects/igniteui-angular/src/lib/grids/grid-base.directive.ts
index 3b516951edd..fbe4a5e285a 100644
--- a/projects/igniteui-angular/src/lib/grids/grid-base.directive.ts
+++ b/projects/igniteui-angular/src/lib/grids/grid-base.directive.ts
@@ -156,6 +156,7 @@ import { IgxPaginatorComponent } from '../paginator/paginator.component';
 import { IgxGridHeaderRowComponent } from './headers/grid-header-row.component';
 import { IgxGridGroupByAreaComponent } from './grouping/grid-group-by-area.component';
 import { IgxFlatTransactionFactory, TRANSACTION_TYPE } from '../services/transaction/transaction-factory.service';
+import {IgxGridRow} from "./grid-public-row";
 
 let FAKE_ROW_ID = -1;
 const DEFAULT_ITEMS_PER_PAGE = 15;
@@ -913,6 +914,17 @@ export abstract class IgxGridBaseDirective extends DisplayDensityBase implements
     @Output()
     public rowPinning = new EventEmitter<IPinRowEventArgs>();
 
+    /**
+     * Emitted when the pinned state of a row is changed.
+     *
+     * @example
+     * ```html
+     * <igx-grid [data]="employeeData" (rowPinned)="rowPin($event)" [autoGenerate]="true"></igx-grid>
+     * ```
+     */
+    @Output()
+    public rowPinned = new EventEmitter<IPinRowEventArgs>();
+
     /**
      * Emmited when the active node is changed.
      *
@@ -3696,6 +3708,22 @@ export abstract class IgxGridBaseDirective extends DisplayDensityBase implements
             .pipe(takeUntil(this.destroy$))
             .subscribe((change: QueryList<IgxGridRowComponent>) => {
                 this.onPinnedRowsChanged(change);
+
+              /*  debugger
+                if (change.last && change.last.pinned) {
+                    const row = new IgxGridRow(change.last.grid, change.last.index, change.last.rowData);
+                    const eventArgs: IPinRowEventArgs = {
+                        insertAtIndex: change.last.index,
+                        isPinned: true,
+                        rowID: change.last.rowID,
+                        row: row
+                    };
+
+                    //this.gridAPI.get_row_by_key(changel.last.index)
+
+                    this.rowPinned.emit(eventArgs);
+                }*/
+
             });
 
         this.addRowSnackbar?.clicked.subscribe(() => {
@@ -4779,9 +4807,11 @@ export abstract class IgxGridBaseDirective extends DisplayDensityBase implements
      * @param index The index at which to insert the row in the pinned collection.
      */
     public pinRow(rowID: any, index?: number, row?: RowType): boolean {
+        debugger
         if (this._pinnedRecordIDs.indexOf(rowID) !== -1) {
             return false;
         }
+
         const eventArgs: IPinRowEventArgs = {
             insertAtIndex: index,
             isPinned: true,
@@ -4797,7 +4827,13 @@ export abstract class IgxGridBaseDirective extends DisplayDensityBase implements
         this.pipeTrigger++;
         if (this.gridAPI.grid) {
             this.notifyChanges();
+            // Force pipe triggering
+            this.cdr.detectChanges();
+            this.rowPinned.emit(eventArgs)
         }
+
+
+
         return true;
     }
 
@@ -4823,12 +4859,15 @@ export abstract class IgxGridBaseDirective extends DisplayDensityBase implements
             row
         };
         this.rowPinning.emit(eventArgs);
+
         this.crudService.endEdit(false);
         this._pinnedRecordIDs.splice(index, 1);
         this.pipeTrigger++;
         if (this.gridAPI.grid) {
             this.cdr.detectChanges();
+            this.rowPinned.emit(eventArgs);
         }
+
         return true;
     }
 
@@ -6391,6 +6430,9 @@ export abstract class IgxGridBaseDirective extends DisplayDensityBase implements
         if (diff) {
             this.notifyChanges(true);
         }
+
+        // debugger
+        // this.rowPinned.emit();
     }
 
     /**
diff --git a/projects/igniteui-angular/src/lib/grids/grid/grid-row-pinning.spec.ts b/projects/igniteui-angular/src/lib/grids/grid/grid-row-pinning.spec.ts
index 248514873bd..3f7be573f15 100644
--- a/projects/igniteui-angular/src/lib/grids/grid/grid-row-pinning.spec.ts
+++ b/projects/igniteui-angular/src/lib/grids/grid/grid-row-pinning.spec.ts
@@ -177,6 +177,34 @@ describe('Row Pinning #grid', () => {
             expect(grid.rowPinning.emit).toHaveBeenCalledTimes(2);
         });
 
+        it('should emit rowPinned on pin/unpin.', () => {
+            spyOn(grid.rowPinned, 'emit').and.callThrough();
+
+            let row = grid.getRowByIndex(0);
+            const rowID = row.key;
+            row.pin();
+            fix.detectChanges();
+
+            // Check pinned state with getRowByIndex after pin action
+            expect(row.pinned).toBe(true);
+
+            expect(grid.rowPinned.emit).toHaveBeenCalledTimes(1);
+            expect(grid.rowPinned.emit).toHaveBeenCalledWith({
+                rowID,
+                insertAtIndex: undefined,
+                isPinned: true,
+                row
+            });
+
+            row = grid.getRowByIndex(0);
+            row.unpin();
+            fix.detectChanges();
+            // Check pinned state with getRowByIndex after unpin action
+            expect(row.pinned).toBe(false);
+
+            expect(grid.rowPinned.emit).toHaveBeenCalledTimes(2);
+        });
+
         it('should pin/unpin via grid API methods.', () => {
             // pin 2nd row
             grid.pinRow(fix.componentInstance.data[1]);
@@ -433,13 +461,13 @@ describe('Row Pinning #grid', () => {
             fix.detectChanges();
 
             expect(grid.gridAPI.get_row_by_index(0).rowID).toBe(fix.componentInstance.data[1]);
-            expect(grid.gridAPI.get_row_by_index(1).rowID).toBe(fix.componentInstance.data[5]);
+            expect(grid.gridAPI.get_row_by_index(1).rowID).toBe(fix.componentInstance.data[4]);
 
             grid.sort({ fieldName: 'ID', dir: SortingDirection.Desc, ignoreCase: false });
             fix.detectChanges();
 
             // check pinned rows data is sorted
-            expect(grid.gridAPI.get_row_by_index(0).rowID).toBe(fix.componentInstance.data[5]);
+            expect(grid.gridAPI.get_row_by_index(0).rowID).toBe(fix.componentInstance.data[4]);
             expect(grid.gridAPI.get_row_by_index(1).rowID).toBe(fix.componentInstance.data[1]);
 
             // check unpinned rows data is sorted
diff --git a/src/app/grid-row-pinning/grid-row-pinning.sample.ts b/src/app/grid-row-pinning/grid-row-pinning.sample.ts
index f57fd1ea016..e774c13104f 100644
--- a/src/app/grid-row-pinning/grid-row-pinning.sample.ts
+++ b/src/app/grid-row-pinning/grid-row-pinning.sample.ts
@@ -45,6 +45,7 @@ export class GridRowPinningSampleComponent implements OnInit, AfterViewInit {
         groupBy: true,
         columns: false,
         rowPinning: true,
+        rowPinned: true,
         pinningConfig: true
     };
     public selectionMode;
@@ -178,6 +179,11 @@ export class GridRowPinningSampleComponent implements OnInit, AfterViewInit {
         ];
         this.selectionMode = GridSelectionMode.multiple;
         /* eslint-enable max-len */
+
+        this.grid1.rowPinned.subscribe((event) => {
+            debugger
+            const row = this.state.getState(true, ['rowPinning']); // return value doesn't include the pinned row
+        });
     }
 
     public ngAfterViewInit() {
diff --git a/src/app/grid-state/grid-state.component.ts b/src/app/grid-state/grid-state.component.ts
index 797b0dcd57a..5c8570abadb 100644
--- a/src/app/grid-state/grid-state.component.ts
+++ b/src/app/grid-state/grid-state.component.ts
@@ -91,7 +91,7 @@ export class GridSaveStateComponent implements OnInit, AfterViewInit {
         groupBy: true,
         columns: true,
         expansion: true,
-        rowPinning: true
+        rowPinning: true,
     };
 
     public initialColumns: GridState [] = [

From aeebe049b396c4cdec3cfa5522d8acbdeb259e02 Mon Sep 17 00:00:00 2001
From: Hristo Anastasov <hanastasov@infragistics.com>
Date: Thu, 30 Sep 2021 19:06:03 +0300
Subject: [PATCH 02/16] chore(*): remove fit from test

---
 .../grid-actions/grid-pinning-actions.component.spec.ts         | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/projects/igniteui-angular/src/lib/action-strip/grid-actions/grid-pinning-actions.component.spec.ts b/projects/igniteui-angular/src/lib/action-strip/grid-actions/grid-pinning-actions.component.spec.ts
index 25dc29dd3b5..d952c06d818 100644
--- a/projects/igniteui-angular/src/lib/action-strip/grid-actions/grid-pinning-actions.component.spec.ts
+++ b/projects/igniteui-angular/src/lib/action-strip/grid-actions/grid-pinning-actions.component.spec.ts
@@ -60,7 +60,7 @@ describe('igxGridPinningActions #grid ', () => {
             expect(grid.pinnedRows.length).toBe(0);
         });
 
-        fit('should allow navigating to disabled row in unpinned area', async () => {
+        it('should allow navigating to disabled row in unpinned area', async () => {
             grid.pinRow('FAMIA');
             fixture.detectChanges();
 

From 58aebb3a5b250fc8071b9a7ee2a33aa22ce8752b Mon Sep 17 00:00:00 2001
From: VDyulgerov <volen1999@gmail.com>
Date: Fri, 1 Oct 2021 09:05:33 +0300
Subject: [PATCH 03/16] chore(*): fix lint errros

---
 .../src/lib/grids/grid-base.directive.ts      | 23 -------------------
 .../lib/grids/grid/grid-row-pinning.spec.ts   |  4 ++--
 .../grid-row-pinning.sample.ts                |  5 ----
 3 files changed, 2 insertions(+), 30 deletions(-)

diff --git a/projects/igniteui-angular/src/lib/grids/grid-base.directive.ts b/projects/igniteui-angular/src/lib/grids/grid-base.directive.ts
index fbe4a5e285a..23de0f8fcb7 100644
--- a/projects/igniteui-angular/src/lib/grids/grid-base.directive.ts
+++ b/projects/igniteui-angular/src/lib/grids/grid-base.directive.ts
@@ -3708,22 +3708,6 @@ export abstract class IgxGridBaseDirective extends DisplayDensityBase implements
             .pipe(takeUntil(this.destroy$))
             .subscribe((change: QueryList<IgxGridRowComponent>) => {
                 this.onPinnedRowsChanged(change);
-
-              /*  debugger
-                if (change.last && change.last.pinned) {
-                    const row = new IgxGridRow(change.last.grid, change.last.index, change.last.rowData);
-                    const eventArgs: IPinRowEventArgs = {
-                        insertAtIndex: change.last.index,
-                        isPinned: true,
-                        rowID: change.last.rowID,
-                        row: row
-                    };
-
-                    //this.gridAPI.get_row_by_key(changel.last.index)
-
-                    this.rowPinned.emit(eventArgs);
-                }*/
-
             });
 
         this.addRowSnackbar?.clicked.subscribe(() => {
@@ -4807,7 +4791,6 @@ export abstract class IgxGridBaseDirective extends DisplayDensityBase implements
      * @param index The index at which to insert the row in the pinned collection.
      */
     public pinRow(rowID: any, index?: number, row?: RowType): boolean {
-        debugger
         if (this._pinnedRecordIDs.indexOf(rowID) !== -1) {
             return false;
         }
@@ -4827,13 +4810,10 @@ export abstract class IgxGridBaseDirective extends DisplayDensityBase implements
         this.pipeTrigger++;
         if (this.gridAPI.grid) {
             this.notifyChanges();
-            // Force pipe triggering
             this.cdr.detectChanges();
             this.rowPinned.emit(eventArgs)
         }
 
-
-
         return true;
     }
 
@@ -6430,9 +6410,6 @@ export abstract class IgxGridBaseDirective extends DisplayDensityBase implements
         if (diff) {
             this.notifyChanges(true);
         }
-
-        // debugger
-        // this.rowPinned.emit();
     }
 
     /**
diff --git a/projects/igniteui-angular/src/lib/grids/grid/grid-row-pinning.spec.ts b/projects/igniteui-angular/src/lib/grids/grid/grid-row-pinning.spec.ts
index 3f7be573f15..440395f7194 100644
--- a/projects/igniteui-angular/src/lib/grids/grid/grid-row-pinning.spec.ts
+++ b/projects/igniteui-angular/src/lib/grids/grid/grid-row-pinning.spec.ts
@@ -461,13 +461,13 @@ describe('Row Pinning #grid', () => {
             fix.detectChanges();
 
             expect(grid.gridAPI.get_row_by_index(0).rowID).toBe(fix.componentInstance.data[1]);
-            expect(grid.gridAPI.get_row_by_index(1).rowID).toBe(fix.componentInstance.data[4]);
+            expect(grid.gridAPI.get_row_by_index(1).rowID).toBe(fix.componentInstance.data[5]);
 
             grid.sort({ fieldName: 'ID', dir: SortingDirection.Desc, ignoreCase: false });
             fix.detectChanges();
 
             // check pinned rows data is sorted
-            expect(grid.gridAPI.get_row_by_index(0).rowID).toBe(fix.componentInstance.data[4]);
+            expect(grid.gridAPI.get_row_by_index(0).rowID).toBe(fix.componentInstance.data[5]);
             expect(grid.gridAPI.get_row_by_index(1).rowID).toBe(fix.componentInstance.data[1]);
 
             // check unpinned rows data is sorted
diff --git a/src/app/grid-row-pinning/grid-row-pinning.sample.ts b/src/app/grid-row-pinning/grid-row-pinning.sample.ts
index e774c13104f..fbdcd88c940 100644
--- a/src/app/grid-row-pinning/grid-row-pinning.sample.ts
+++ b/src/app/grid-row-pinning/grid-row-pinning.sample.ts
@@ -179,11 +179,6 @@ export class GridRowPinningSampleComponent implements OnInit, AfterViewInit {
         ];
         this.selectionMode = GridSelectionMode.multiple;
         /* eslint-enable max-len */
-
-        this.grid1.rowPinned.subscribe((event) => {
-            debugger
-            const row = this.state.getState(true, ['rowPinning']); // return value doesn't include the pinned row
-        });
     }
 
     public ngAfterViewInit() {

From 5fed2279e2600d1cffd23c40a5095a369b3c26b5 Mon Sep 17 00:00:00 2001
From: VDyulgerov <volen1999@gmail.com>
Date: Fri, 1 Oct 2021 09:20:29 +0300
Subject: [PATCH 04/16] chore(*): fix lint errros

---
 .../igniteui-angular/src/lib/grids/grid-base.directive.ts     | 4 +---
 1 file changed, 1 insertion(+), 3 deletions(-)

diff --git a/projects/igniteui-angular/src/lib/grids/grid-base.directive.ts b/projects/igniteui-angular/src/lib/grids/grid-base.directive.ts
index 23de0f8fcb7..9187125427a 100644
--- a/projects/igniteui-angular/src/lib/grids/grid-base.directive.ts
+++ b/projects/igniteui-angular/src/lib/grids/grid-base.directive.ts
@@ -54,7 +54,6 @@ import {
     Action,
 } from '../services/public_api';
 import { GridBaseAPIService } from './api.service';
-import { IgxGridCellComponent } from './cell.component';
 import { ISummaryExpression } from './summaries/grid-summary';
 import { RowEditPositionStrategy, IPinningConfig } from './grid.common';
 import { IgxGridToolbarComponent } from './toolbar/grid-toolbar.component';
@@ -156,7 +155,6 @@ import { IgxPaginatorComponent } from '../paginator/paginator.component';
 import { IgxGridHeaderRowComponent } from './headers/grid-header-row.component';
 import { IgxGridGroupByAreaComponent } from './grouping/grid-group-by-area.component';
 import { IgxFlatTransactionFactory, TRANSACTION_TYPE } from '../services/transaction/transaction-factory.service';
-import {IgxGridRow} from "./grid-public-row";
 
 let FAKE_ROW_ID = -1;
 const DEFAULT_ITEMS_PER_PAGE = 15;
@@ -4811,7 +4809,7 @@ export abstract class IgxGridBaseDirective extends DisplayDensityBase implements
         if (this.gridAPI.grid) {
             this.notifyChanges();
             this.cdr.detectChanges();
-            this.rowPinned.emit(eventArgs)
+            this.rowPinned.emit(eventArgs);
         }
 
         return true;

From 35098687cca6728ad47bb2e81c65327601be43d1 Mon Sep 17 00:00:00 2001
From: VDyulgerov <volen1999@gmail.com>
Date: Fri, 1 Oct 2021 13:36:00 +0300
Subject: [PATCH 05/16] fix(grid): fix 4 buggy tests

---
 .../src/lib/grids/grid/grid-row-pinning.spec.ts           | 8 ++++----
 .../hierarchical-grid.integration.spec.ts                 | 4 ++--
 2 files changed, 6 insertions(+), 6 deletions(-)

diff --git a/projects/igniteui-angular/src/lib/grids/grid/grid-row-pinning.spec.ts b/projects/igniteui-angular/src/lib/grids/grid/grid-row-pinning.spec.ts
index 440395f7194..aabce35ce7e 100644
--- a/projects/igniteui-angular/src/lib/grids/grid/grid-row-pinning.spec.ts
+++ b/projects/igniteui-angular/src/lib/grids/grid/grid-row-pinning.spec.ts
@@ -461,13 +461,13 @@ describe('Row Pinning #grid', () => {
             fix.detectChanges();
 
             expect(grid.gridAPI.get_row_by_index(0).rowID).toBe(fix.componentInstance.data[1]);
-            expect(grid.gridAPI.get_row_by_index(1).rowID).toBe(fix.componentInstance.data[5]);
+            expect(grid.gridAPI.get_row_by_index(1).rowID).toBe(fix.componentInstance.data[4]);
 
             grid.sort({ fieldName: 'ID', dir: SortingDirection.Desc, ignoreCase: false });
             fix.detectChanges();
 
             // check pinned rows data is sorted
-            expect(grid.gridAPI.get_row_by_index(0).rowID).toBe(fix.componentInstance.data[5]);
+            expect(grid.gridAPI.get_row_by_index(0).rowID).toBe(fix.componentInstance.data[4]);
             expect(grid.gridAPI.get_row_by_index(1).rowID).toBe(fix.componentInstance.data[1]);
 
             // check unpinned rows data is sorted
@@ -627,14 +627,14 @@ describe('Row Pinning #grid', () => {
 
             let rows = grid.rowList.toArray();
 
-            [1, 2, 1, 2, 3, 4, 5].forEach((x, index) => expect(rows[index].cells.first.value).toEqual(x));
+            [1, 1, 2, 3, 4, 5].forEach((x, index) => expect(rows[index].cells.first.value).toEqual(x));
 
             grid.paginate(2);
             fix.detectChanges();
 
             rows = grid.rowList.toArray();
 
-            [1, 2, 11, 12].forEach((x, index) => expect(rows[index].cells.first.value).toEqual(x));
+                [1, 11, 12].forEach((x, index) => expect(rows[index].cells.first.value).toEqual(x));
         });
     });
 
diff --git a/projects/igniteui-angular/src/lib/grids/hierarchical-grid/hierarchical-grid.integration.spec.ts b/projects/igniteui-angular/src/lib/grids/hierarchical-grid/hierarchical-grid.integration.spec.ts
index 704a0d1beea..cdb6618dd43 100644
--- a/projects/igniteui-angular/src/lib/grids/hierarchical-grid/hierarchical-grid.integration.spec.ts
+++ b/projects/igniteui-angular/src/lib/grids/hierarchical-grid/hierarchical-grid.integration.spec.ts
@@ -1153,14 +1153,14 @@ describe('IgxHierarchicalGrid Integration #hGrid', () => {
 
             let rows = hierarchicalGrid.rowList.toArray();
 
-            [0, 1, 0, 1, 2, 3, 4].forEach((x, index) => expect(parseInt(rows[index].cells.first.value, 10)).toEqual(x));
+            [0, 0, 1, 2, 3, 4, 5].forEach((x, index) => expect(parseInt(rows[index].cells.first.value, 10)).toEqual(x));
 
             hierarchicalGrid.paginate(6);
             fixture.detectChanges();
 
             rows = hierarchicalGrid.rowList.toArray();
 
-            [0, 1, 36, 37, 38, 39].forEach((x, index) => expect(parseInt(rows[index].cells.first.value, 10)).toEqual(x));
+            [0, 36, 37, 38, 39].forEach((x, index) => expect(parseInt(rows[index].cells.first.value, 10)).toEqual(x));
         });
     });
 });

From db6562a414b0c102e4f365508e24660076c8c48b Mon Sep 17 00:00:00 2001
From: VDyulgerov <volen1999@gmail.com>
Date: Fri, 1 Oct 2021 14:11:57 +0300
Subject: [PATCH 06/16] fix(grid): fix tree-grid-integration test

---
 .../src/lib/grids/tree-grid/tree-grid-integration.spec.ts     | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/projects/igniteui-angular/src/lib/grids/tree-grid/tree-grid-integration.spec.ts b/projects/igniteui-angular/src/lib/grids/tree-grid/tree-grid-integration.spec.ts
index a1f679fdf8a..3b8b59e96c9 100644
--- a/projects/igniteui-angular/src/lib/grids/tree-grid/tree-grid-integration.spec.ts
+++ b/projects/igniteui-angular/src/lib/grids/tree-grid/tree-grid-integration.spec.ts
@@ -1707,14 +1707,14 @@ describe('IgxTreeGrid - Integration #tGrid', () => {
 
             let rows = treeGrid.rowList.toArray();
 
-            [147, 475, 147, 475, 957, 317, 711, 998].forEach((x, index) => expect(parseInt(rows[index].cells.first.value, 10)).toEqual(x));
+            [147, 147, 475, 957, 317, 711, 998].forEach((x, index) => expect(parseInt(rows[index].cells.first.value, 10)).toEqual(x));
 
             treeGrid.paginate(1);
             fix.detectChanges();
 
             rows = treeGrid.rowList.toArray();
 
-            [147, 475, 299, 19, 847, 663].forEach((x, index) => expect(parseInt(rows[index].cells.first.value, 10)).toEqual(x));
+            [147, 299, 19, 847, 663].forEach((x, index) => expect(parseInt(rows[index].cells.first.value, 10)).toEqual(x));
         });
 
         it('should make a correct selection', () => {

From 31c1ce6b71eaeaca9c108f7b7ae30ce1ffc2da51 Mon Sep 17 00:00:00 2001
From: VDyulgerov <volen1999@gmail.com>
Date: Tue, 5 Oct 2021 11:57:05 +0300
Subject: [PATCH 07/16] fix(grid): fix 4 buggy tests

This reverts commit 35098687cca6728ad47bb2e81c65327601be43d1.
---
 .../src/lib/grids/grid/grid-row-pinning.spec.ts           | 8 ++++----
 .../hierarchical-grid.integration.spec.ts                 | 4 ++--
 2 files changed, 6 insertions(+), 6 deletions(-)

diff --git a/projects/igniteui-angular/src/lib/grids/grid/grid-row-pinning.spec.ts b/projects/igniteui-angular/src/lib/grids/grid/grid-row-pinning.spec.ts
index aabce35ce7e..440395f7194 100644
--- a/projects/igniteui-angular/src/lib/grids/grid/grid-row-pinning.spec.ts
+++ b/projects/igniteui-angular/src/lib/grids/grid/grid-row-pinning.spec.ts
@@ -461,13 +461,13 @@ describe('Row Pinning #grid', () => {
             fix.detectChanges();
 
             expect(grid.gridAPI.get_row_by_index(0).rowID).toBe(fix.componentInstance.data[1]);
-            expect(grid.gridAPI.get_row_by_index(1).rowID).toBe(fix.componentInstance.data[4]);
+            expect(grid.gridAPI.get_row_by_index(1).rowID).toBe(fix.componentInstance.data[5]);
 
             grid.sort({ fieldName: 'ID', dir: SortingDirection.Desc, ignoreCase: false });
             fix.detectChanges();
 
             // check pinned rows data is sorted
-            expect(grid.gridAPI.get_row_by_index(0).rowID).toBe(fix.componentInstance.data[4]);
+            expect(grid.gridAPI.get_row_by_index(0).rowID).toBe(fix.componentInstance.data[5]);
             expect(grid.gridAPI.get_row_by_index(1).rowID).toBe(fix.componentInstance.data[1]);
 
             // check unpinned rows data is sorted
@@ -627,14 +627,14 @@ describe('Row Pinning #grid', () => {
 
             let rows = grid.rowList.toArray();
 
-            [1, 1, 2, 3, 4, 5].forEach((x, index) => expect(rows[index].cells.first.value).toEqual(x));
+            [1, 2, 1, 2, 3, 4, 5].forEach((x, index) => expect(rows[index].cells.first.value).toEqual(x));
 
             grid.paginate(2);
             fix.detectChanges();
 
             rows = grid.rowList.toArray();
 
-                [1, 11, 12].forEach((x, index) => expect(rows[index].cells.first.value).toEqual(x));
+            [1, 2, 11, 12].forEach((x, index) => expect(rows[index].cells.first.value).toEqual(x));
         });
     });
 
diff --git a/projects/igniteui-angular/src/lib/grids/hierarchical-grid/hierarchical-grid.integration.spec.ts b/projects/igniteui-angular/src/lib/grids/hierarchical-grid/hierarchical-grid.integration.spec.ts
index cdb6618dd43..704a0d1beea 100644
--- a/projects/igniteui-angular/src/lib/grids/hierarchical-grid/hierarchical-grid.integration.spec.ts
+++ b/projects/igniteui-angular/src/lib/grids/hierarchical-grid/hierarchical-grid.integration.spec.ts
@@ -1153,14 +1153,14 @@ describe('IgxHierarchicalGrid Integration #hGrid', () => {
 
             let rows = hierarchicalGrid.rowList.toArray();
 
-            [0, 0, 1, 2, 3, 4, 5].forEach((x, index) => expect(parseInt(rows[index].cells.first.value, 10)).toEqual(x));
+            [0, 1, 0, 1, 2, 3, 4].forEach((x, index) => expect(parseInt(rows[index].cells.first.value, 10)).toEqual(x));
 
             hierarchicalGrid.paginate(6);
             fixture.detectChanges();
 
             rows = hierarchicalGrid.rowList.toArray();
 
-            [0, 36, 37, 38, 39].forEach((x, index) => expect(parseInt(rows[index].cells.first.value, 10)).toEqual(x));
+            [0, 1, 36, 37, 38, 39].forEach((x, index) => expect(parseInt(rows[index].cells.first.value, 10)).toEqual(x));
         });
     });
 });

From ff6e5bf6e288915c1524de94ccbe5bdd635f3d70 Mon Sep 17 00:00:00 2001
From: Hristo Anastasov <hanastasov@infragistics.com>
Date: Tue, 5 Oct 2021 14:44:16 +0300
Subject: [PATCH 08/16] test(grid): dont use detect changes after
 pinning/unpinning

---
 .../src/lib/grids/grid-base.directive.ts      |  1 -
 .../lib/grids/grid/grid-row-pinning.spec.ts   | 50 +++++--------------
 .../hierarchical-grid.integration.spec.ts     |  8 ---
 .../tree-grid/tree-grid-integration.spec.ts   | 25 +---------
 4 files changed, 13 insertions(+), 71 deletions(-)

diff --git a/projects/igniteui-angular/src/lib/grids/grid-base.directive.ts b/projects/igniteui-angular/src/lib/grids/grid-base.directive.ts
index ece5e4f612c..91e73a53a5d 100644
--- a/projects/igniteui-angular/src/lib/grids/grid-base.directive.ts
+++ b/projects/igniteui-angular/src/lib/grids/grid-base.directive.ts
@@ -4851,7 +4851,6 @@ export abstract class IgxGridBaseDirective extends DisplayDensityBase implements
         this._pinnedRecordIDs.splice(insertIndex, 0, rowID);
         this.pipeTrigger++;
         if (this.gridAPI.grid) {
-            this.notifyChanges();
             this.cdr.detectChanges();
             this.rowPinned.emit(eventArgs);
         }
diff --git a/projects/igniteui-angular/src/lib/grids/grid/grid-row-pinning.spec.ts b/projects/igniteui-angular/src/lib/grids/grid/grid-row-pinning.spec.ts
index aabce35ce7e..0d17736511e 100644
--- a/projects/igniteui-angular/src/lib/grids/grid/grid-row-pinning.spec.ts
+++ b/projects/igniteui-angular/src/lib/grids/grid/grid-row-pinning.spec.ts
@@ -155,7 +155,6 @@ describe('Row Pinning #grid', () => {
             let row = grid.getRowByIndex(0);
             const rowID = row.key;
             row.pin();
-            fix.detectChanges();
 
             // Check pinned state with getRowByIndex after pin action
             expect(row.pinned).toBe(true);
@@ -163,14 +162,13 @@ describe('Row Pinning #grid', () => {
             expect(grid.rowPinning.emit).toHaveBeenCalledTimes(1);
             expect(grid.rowPinning.emit).toHaveBeenCalledWith({
                 rowID,
-                insertAtIndex: undefined,
+                insertAtIndex: 0,
                 isPinned: true,
                 row
             });
 
             row = grid.getRowByIndex(0);
             row.unpin();
-            fix.detectChanges();
             // Check pinned state with getRowByIndex after unpin action
             expect(row.pinned).toBe(false);
 
@@ -183,7 +181,6 @@ describe('Row Pinning #grid', () => {
             let row = grid.getRowByIndex(0);
             const rowID = row.key;
             row.pin();
-            fix.detectChanges();
 
             // Check pinned state with getRowByIndex after pin action
             expect(row.pinned).toBe(true);
@@ -191,18 +188,22 @@ describe('Row Pinning #grid', () => {
             expect(grid.rowPinned.emit).toHaveBeenCalledTimes(1);
             expect(grid.rowPinned.emit).toHaveBeenCalledWith({
                 rowID,
-                insertAtIndex: undefined,
+                insertAtIndex: 0,
                 isPinned: true,
                 row
             });
 
-            row = grid.getRowByIndex(0);
             row.unpin();
-            fix.detectChanges();
             // Check pinned state with getRowByIndex after unpin action
             expect(row.pinned).toBe(false);
 
             expect(grid.rowPinned.emit).toHaveBeenCalledTimes(2);
+            expect(grid.rowPinned.emit).toHaveBeenCalledWith({
+                rowID,
+                insertAtIndex: 0,
+                isPinned: false,
+                row
+            });
         });
 
         it('should pin/unpin via grid API methods.', () => {
@@ -251,7 +252,6 @@ describe('Row Pinning #grid', () => {
             // unpin
             row = grid.gridAPI.get_row_by_index(0);
             row.unpin();
-            fix.detectChanges();
 
             expect(grid.pinnedRows.length).toBe(0);
             pinRowContainer = fix.debugElement.queryAll(By.css(FIXED_ROW_CONTAINER));
@@ -457,17 +457,16 @@ describe('Row Pinning #grid', () => {
 
         it('should apply sorting to both pinned and unpinned rows.', () => {
             grid.gridAPI.get_row_by_index(1).pin();
-            grid.gridAPI.get_row_by_index(5).pin();
-            fix.detectChanges();
+            grid.gridAPI.get_row_by_index(6).pin();
 
             expect(grid.gridAPI.get_row_by_index(0).rowID).toBe(fix.componentInstance.data[1]);
-            expect(grid.gridAPI.get_row_by_index(1).rowID).toBe(fix.componentInstance.data[4]);
+            expect(grid.gridAPI.get_row_by_index(1).rowID).toBe(fix.componentInstance.data[5]);
 
             grid.sort({ fieldName: 'ID', dir: SortingDirection.Desc, ignoreCase: false });
             fix.detectChanges();
 
             // check pinned rows data is sorted
-            expect(grid.gridAPI.get_row_by_index(0).rowID).toBe(fix.componentInstance.data[4]);
+            expect(grid.gridAPI.get_row_by_index(0).rowID).toBe(fix.componentInstance.data[5]);
             expect(grid.gridAPI.get_row_by_index(1).rowID).toBe(fix.componentInstance.data[1]);
 
             // check unpinned rows data is sorted
@@ -601,7 +600,6 @@ describe('Row Pinning #grid', () => {
         it('should correctly apply paging state for grid and paginator when there are pinned rows.', () => {
             // pin the first row
             grid.gridAPI.get_row_by_index(0).pin();
-            fix.detectChanges();
 
             expect(grid.rowList.length).toEqual(6);
             expect(grid.perPage).toEqual(5);
@@ -611,7 +609,6 @@ describe('Row Pinning #grid', () => {
 
             // pin the second row
             grid.gridAPI.get_row_by_index(2).pin();
-            fix.detectChanges();
 
             expect(grid.rowList.length).toEqual(7);
             expect(grid.perPage).toEqual(5);
@@ -622,8 +619,6 @@ describe('Row Pinning #grid', () => {
 
         it('should have the correct records shown for pages with pinned rows', () => {
             grid.gridAPI.get_row_by_index(0).pin();
-            grid.gridAPI.get_row_by_index(1).pin();
-            fix.detectChanges();
 
             let rows = grid.rowList.toArray();
 
@@ -634,7 +629,7 @@ describe('Row Pinning #grid', () => {
 
             rows = grid.rowList.toArray();
 
-                [1, 11, 12].forEach((x, index) => expect(rows[index].cells.first.value).toEqual(x));
+            [1, 11, 12].forEach((x, index) => expect(rows[index].cells.first.value).toEqual(x));
         });
     });
 
@@ -833,10 +828,8 @@ describe('Row Pinning #grid', () => {
             // Pin/Unpin with the methods
             firstRow.unpin();
             expect(firstRow.pinned).toBe(false);
-            fix.detectChanges();
             firstRow.pin();
             expect(firstRow.pinned).toBe(true);
-            fix.detectChanges();
 
             // Check again pinned row presence
             pinRowContainer = fix.debugElement.queryAll(By.css(FIXED_ROW_CONTAINER));
@@ -883,7 +876,6 @@ describe('Row Pinning #grid', () => {
         it('should hide columns in pinned and unpinned area', () => {
             // pin 2nd data row
             grid.pinRow(fix.componentInstance.data[1]);
-            fix.detectChanges();
             const hiddenCol = grid.columns[1];
             hiddenCol.hidden = true;
             fix.detectChanges();
@@ -920,14 +912,9 @@ describe('Row Pinning #grid', () => {
 
         it('should keep the scrollbar sizes correct when partially filtering out pinned records', () => {
             grid.gridAPI.get_row_by_index(1).pin();
-            fix.detectChanges();
             grid.gridAPI.get_row_by_index(3).pin();
-            fix.detectChanges();
             grid.gridAPI.get_row_by_index(5).pin();
-            fix.detectChanges();
             grid.gridAPI.get_row_by_index(7).pin();
-            fix.detectChanges();
-
             fix.detectChanges();
             // 4 records pinned + 2px border
             expect(grid.pinnedRowHeight).toBe(4 * grid.renderedRowHeight + 2);
@@ -957,9 +944,7 @@ describe('Row Pinning #grid', () => {
         it('should enter edit mode for the next editable cell when tabbing.', () => {
             const  gridContent = GridFunctions.getGridContent(fix);
             grid.gridAPI.get_row_by_index(0).pin();
-            fix.detectChanges();
             grid.gridAPI.get_row_by_index(3).pin();
-            fix.detectChanges();
 
             const firstEditable = grid.gridAPI.get_cell_by_index(0, 'CompanyName');
             const secondEditable = grid.gridAPI.get_cell_by_index(1, 'CompanyName');
@@ -995,9 +980,7 @@ describe('Row Pinning #grid', () => {
         it('should enter edit mode for the previous editable cell when shift+tabbing.', () => {
             const  gridContent = GridFunctions.getGridContent(fix);
             grid.gridAPI.get_row_by_index(0).pin();
-            fix.detectChanges();
             grid.gridAPI.get_row_by_index(3).pin();
-            fix.detectChanges();
 
             const firstEditable = grid.gridAPI.get_cell_by_index(0, 'CompanyName');
             const secondEditable = grid.gridAPI.get_cell_by_index(1, 'CompanyName');
@@ -1045,7 +1028,6 @@ describe('Row Pinning #grid', () => {
 
         it('should navigate to bottom from top pinned row using Ctrl+ArrowDown', async () => {
             grid.gridAPI.get_row_by_index(5).pin();
-            fix.detectChanges();
 
             const firstRowCell = grid.gridAPI.get_row_by_index(0).cells.toArray()[1];
             UIInteractions.simulateClickAndSelectEvent(firstRowCell);
@@ -1067,7 +1049,6 @@ describe('Row Pinning #grid', () => {
 
         it('should navigate and scroll to first unpinned row from top pinned row using ArrowDown', async () => {
             grid.gridAPI.get_row_by_index(5).pin();
-            fix.detectChanges();
 
             grid.navigateTo(10);
             await wait(DEBOUNCE_TIME);
@@ -1092,7 +1073,6 @@ describe('Row Pinning #grid', () => {
 
         it('should navigate to top pinned row from bottom unpinned row without scrolling using Ctrl+ArrowUp', async () => {
             grid.gridAPI.get_row_by_index(5).pin();
-            fix.detectChanges();
 
             grid.navigateTo(27);
             await wait(DEBOUNCE_TIME);
@@ -1123,7 +1103,6 @@ describe('Row Pinning #grid', () => {
         it('should navigate to top pinned row from first unpinned row using ArrowUp', async () => {
             grid.gridAPI.get_row_by_index(5).pin();
             grid.gridAPI.get_row_by_index(1).pin();
-            fix.detectChanges();
 
             const thirdRowCell = grid.gridAPI.get_row_by_index(2).cells.toArray()[1];
             UIInteractions.simulateClickAndSelectEvent(thirdRowCell);
@@ -1146,7 +1125,6 @@ describe('Row Pinning #grid', () => {
         it('should navigate and scroll to top from bottom pinned row using Ctrl+ArrowUp', async () => {
             fix.componentInstance.pinningConfig = { columns: ColumnPinningPosition.Start, rows: RowPinningPosition.Bottom };
             grid.gridAPI.get_row_by_index(5).pin();
-            fix.detectChanges();
 
             grid.navigateTo(26);
             await wait(DEBOUNCE_TIME);
@@ -1199,7 +1177,6 @@ describe('Row Pinning #grid', () => {
         it('should navigate to bottom pinned row from top unpinned row without scrolling using Ctrl+ArrowDown', async () => {
             fix.componentInstance.pinningConfig = { columns: ColumnPinningPosition.Start, rows: RowPinningPosition.Bottom };
             grid.gridAPI.get_row_by_index(5).pin();
-            fix.detectChanges();
 
             expect(grid.verticalScrollContainer.getScroll().scrollTop).toEqual(0);
 
@@ -1227,7 +1204,6 @@ describe('Row Pinning #grid', () => {
             grid.gridAPI.get_row_by_index(5).pin();
             grid.gridAPI.get_row_by_index(1).pin();
             await wait(DEBOUNCE_TIME);
-            fix.detectChanges();
 
             grid.navigateTo(26);
             await wait(DEBOUNCE_TIME);
@@ -1256,8 +1232,6 @@ describe('Row Pinning #grid', () => {
         it('should navigate down from pinned to unpinned row when there are filtered out pinned rows', async () => {
             grid.gridAPI.get_row_by_index(5).pin();
             grid.gridAPI.get_row_by_index(1).pin();
-            fix.detectChanges();
-
             grid.filter('ID', 'B', IgxStringFilteringOperand.instance().condition('contains'), false);
             fix.detectChanges();
 
diff --git a/projects/igniteui-angular/src/lib/grids/hierarchical-grid/hierarchical-grid.integration.spec.ts b/projects/igniteui-angular/src/lib/grids/hierarchical-grid/hierarchical-grid.integration.spec.ts
index cdb6618dd43..e383cb522ec 100644
--- a/projects/igniteui-angular/src/lib/grids/hierarchical-grid/hierarchical-grid.integration.spec.ts
+++ b/projects/igniteui-angular/src/lib/grids/hierarchical-grid/hierarchical-grid.integration.spec.ts
@@ -866,15 +866,12 @@ describe('IgxHierarchicalGrid Integration #hGrid', () => {
 
         it('should pin rows to top ', (() => {
             hierarchicalGrid.pinRow('0');
-            fixture.detectChanges();
             expect(hierarchicalGrid.pinnedRows.length).toBe(1);
 
             hierarchicalGrid.unpinRow('0');
-            fixture.detectChanges();
             expect(hierarchicalGrid.pinnedRows.length).toBe(0);
 
             hierarchicalGrid.pinRow('0');
-            fixture.detectChanges();
             expect(hierarchicalGrid.pinnedRows.length).toBe(1);
 
             let pinRowContainer = fixture.debugElement.queryAll(By.css(FIXED_ROW_CONTAINER));
@@ -888,7 +885,6 @@ describe('IgxHierarchicalGrid Integration #hGrid', () => {
             expect(hierarchicalGrid.getRowByIndex(3).key).toBe('2');
 
             hierarchicalGrid.pinRow('2');
-            fixture.detectChanges();
 
             pinRowContainer = fixture.debugElement.queryAll(By.css(FIXED_ROW_CONTAINER));
             expect(pinRowContainer[0].children.length).toBe(2);
@@ -1107,7 +1103,6 @@ describe('IgxHierarchicalGrid Integration #hGrid', () => {
             const paginator = fixture.debugElement.query(By.directive(IgxPaginatorComponent)).componentInstance;
             // pin the first row
             hierarchicalGrid.getRowByIndex(0).pin();
-            fixture.detectChanges();
 
             expect(hierarchicalGrid.rowList.length).toEqual(6);
             expect(hierarchicalGrid.perPage).toEqual(5);
@@ -1117,7 +1112,6 @@ describe('IgxHierarchicalGrid Integration #hGrid', () => {
 
             // pin the second row
             hierarchicalGrid.getRowByIndex(2).pin();
-            fixture.detectChanges();
 
             expect(hierarchicalGrid.rowList.length).toEqual(7);
             expect(hierarchicalGrid.perPage).toEqual(5);
@@ -1148,8 +1142,6 @@ describe('IgxHierarchicalGrid Integration #hGrid', () => {
             hierarchicalGrid.height = '700px';
             fixture.detectChanges();
             hierarchicalGrid.getRowByIndex(0).pin();
-            hierarchicalGrid.getRowByIndex(1).pin();
-            fixture.detectChanges();
 
             let rows = hierarchicalGrid.rowList.toArray();
 
diff --git a/projects/igniteui-angular/src/lib/grids/tree-grid/tree-grid-integration.spec.ts b/projects/igniteui-angular/src/lib/grids/tree-grid/tree-grid-integration.spec.ts
index 3b8b59e96c9..233421a939a 100644
--- a/projects/igniteui-angular/src/lib/grids/tree-grid/tree-grid-integration.spec.ts
+++ b/projects/igniteui-angular/src/lib/grids/tree-grid/tree-grid-integration.spec.ts
@@ -1470,7 +1470,6 @@ describe('IgxTreeGrid - Integration #tGrid', () => {
 
         it('should pin/unpin a row', () => {
             treeGrid.pinRow(711);
-            fix.detectChanges();
 
             expect(treeGrid.pinnedRecordsCount).toBe(1);
             expect(treeGrid.getRowByKey(711).pinned).toBe(true);
@@ -1482,11 +1481,9 @@ describe('IgxTreeGrid - Integration #tGrid', () => {
             expect(treeGrid.getRowByKey(711).pinned).toBe(false);
 
             treeGrid.getRowByKey(711).pin();
-            fix.detectChanges();
             expect(treeGrid.pinnedRecordsCount).toBe(1);
 
             treeGrid.getRowByKey(711).unpin();
-            fix.detectChanges();
             expect(treeGrid.pinnedRecordsCount).toBe(0);
 
 
@@ -1505,7 +1502,6 @@ describe('IgxTreeGrid - Integration #tGrid', () => {
 
             const visibleRecordsLength = treeGrid.records.size;
             treeGrid.pinRow(711);
-            fix.detectChanges();
 
             expect(treeGrid.getRowByIndex(visibleRecordsLength).key).toBe(711);
         });
@@ -1515,7 +1511,6 @@ describe('IgxTreeGrid - Integration #tGrid', () => {
             const secondRow = treeGrid.getRowByIndex(1);
 
             treeGrid.pinRow(711);
-            fix.detectChanges();
 
             await wait();
 
@@ -1524,7 +1519,6 @@ describe('IgxTreeGrid - Integration #tGrid', () => {
             expect(treeGrid.getRowByIndex(2).key).toBe(secondRow.key);
 
             treeGrid.unpinRow(711);
-            fix.detectChanges();
 
             await wait();
 
@@ -1537,13 +1531,11 @@ describe('IgxTreeGrid - Integration #tGrid', () => {
             const primaryKey = treeGrid.primaryKey;
 
             treeGrid.pinRow(rowToPin.data[primaryKey]);
-            fix.detectChanges();
 
             expect(treeGrid.gridAPI.get_row_by_index(0).disabled).toBe(false);
             expect(treeGrid.gridAPI.get_row_by_index(1).disabled).toBe(true);
 
             treeGrid.unpinRow(rowToPin.data[primaryKey]);
-            fix.detectChanges();
 
             expect(treeGrid.gridAPI.get_row_by_index(0).disabled).toBe(false);
             expect(treeGrid.gridAPI.get_row_by_index(1).disabled).toBe(false);
@@ -1555,8 +1547,6 @@ describe('IgxTreeGrid - Integration #tGrid', () => {
             const primaryKey = treeGrid.primaryKey;
 
             treeGrid.pinRow(rowToPin.data[primaryKey]);
-            fix.detectChanges();
-            fix.detectChanges();
 
             const firstColumnField = treeGrid.columns[0].field;
             const pinnedChipPosition = treeGrid.gridAPI.get_cell_by_index(1, firstColumnField);
@@ -1573,7 +1563,6 @@ describe('IgxTreeGrid - Integration #tGrid', () => {
             const primaryKey = treeGrid.primaryKey;
 
             treeGrid.pinRow(rowToPin.data[primaryKey]);
-            fix.detectChanges();
 
             const thirdColumnField = treeGrid.columns[2].field;
 
@@ -1590,7 +1579,6 @@ describe('IgxTreeGrid - Integration #tGrid', () => {
             const rowToPin = treeGrid.getRowByIndex(0);
 
             rowToPin.pin();
-            fix.detectChanges();
 
             // collapse pinned row
             treeGrid.toggleRow(rowToPin.key);
@@ -1613,7 +1601,6 @@ describe('IgxTreeGrid - Integration #tGrid', () => {
 
             const rowToPin = treeGrid.getRowByIndex(0);
             rowToPin.pin();
-            fix.detectChanges();
 
             searchResultsCount = treeGrid.findNext('John');
             expect(searchResultsCount).toBe(2);
@@ -1622,7 +1609,6 @@ describe('IgxTreeGrid - Integration #tGrid', () => {
         it('should apply filtering to both pinned and unpinned rows', () => {
             treeGrid.pinRow(147);
             treeGrid.pinRow(711);
-            fix.detectChanges();
 
             treeGrid.filter('ID', 147, IgxStringFilteringOperand.instance().condition('contains'), false);
             fix.detectChanges();
@@ -1635,8 +1621,7 @@ describe('IgxTreeGrid - Integration #tGrid', () => {
 
         it('should apply sorting to both pinned and unpinned rows', () => {
             treeGrid.pinRow(147);
-            treeGrid.pinRow(711);
-            fix.detectChanges();
+            treeGrid.pinRow(711);;
 
             expect(treeGrid.getRowByIndex(0).key).toBe(147);
             expect(treeGrid.getRowByIndex(1).key).toBe(711);
@@ -1652,7 +1637,6 @@ describe('IgxTreeGrid - Integration #tGrid', () => {
 
         it('should not take into account pinned rows when changing items per page', () => {
             treeGrid.pinRow(147);
-            fix.detectChanges();
 
             fix.componentInstance.paging = true;
             fix.detectChanges();
@@ -1676,8 +1660,6 @@ describe('IgxTreeGrid - Integration #tGrid', () => {
             const paginator = fix.debugElement.query(By.directive(IgxPaginatorComponent)).componentInstance;
             // pin the first row
             treeGrid.getRowByIndex(0).pin();
-            fix.detectChanges();
-
             expect(treeGrid.rowList.length).toEqual(4);
             expect(treeGrid.perPage).toEqual(3);
             expect(paginator.perPage).toEqual(3);
@@ -1686,7 +1668,6 @@ describe('IgxTreeGrid - Integration #tGrid', () => {
 
             // pin the second row
             treeGrid.getRowByIndex(2).pin();
-            fix.detectChanges();
 
             expect(treeGrid.rowList.length).toEqual(5);
             expect(treeGrid.perPage).toEqual(3);
@@ -1702,8 +1683,6 @@ describe('IgxTreeGrid - Integration #tGrid', () => {
             treeGrid.height = '700px';
             fix.detectChanges();
             treeGrid.getRowByIndex(0).pin();
-            treeGrid.getRowByIndex(1).pin();
-            fix.detectChanges();
 
             let rows = treeGrid.rowList.toArray();
 
@@ -1719,7 +1698,6 @@ describe('IgxTreeGrid - Integration #tGrid', () => {
 
         it('should make a correct selection', () => {
             treeGrid.pinRow(147);
-            fix.detectChanges();
 
             const range = { rowStart: 0, rowEnd: 2, columnStart: 'ID', columnEnd: 'Name' };
             treeGrid.selectRange(range);
@@ -1735,7 +1713,6 @@ describe('IgxTreeGrid - Integration #tGrid', () => {
 
         it('should remove the pinned chip for filtered out parent', () => {
             treeGrid.pinRow(147);
-            fix.detectChanges();
 
             treeGrid.filter('ID', 957, IgxStringFilteringOperand.instance().condition('contains'), false);
             fix.detectChanges();

From c2c18d79001a0693a629c502c1ec0b63b8e18257 Mon Sep 17 00:00:00 2001
From: Hristo Anastasov <hanastasov@infragistics.com>
Date: Tue, 5 Oct 2021 15:21:01 +0300
Subject: [PATCH 09/16] chore(*): fix lint error, change let with const

---
 .../src/lib/grids/grid/grid-row-pinning.spec.ts                 | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/projects/igniteui-angular/src/lib/grids/grid/grid-row-pinning.spec.ts b/projects/igniteui-angular/src/lib/grids/grid/grid-row-pinning.spec.ts
index 434a0356c35..6b1aaf11af2 100644
--- a/projects/igniteui-angular/src/lib/grids/grid/grid-row-pinning.spec.ts
+++ b/projects/igniteui-angular/src/lib/grids/grid/grid-row-pinning.spec.ts
@@ -178,7 +178,7 @@ describe('Row Pinning #grid', () => {
         it('should emit rowPinned on pin/unpin.', () => {
             spyOn(grid.rowPinned, 'emit').and.callThrough();
 
-            let row = grid.getRowByIndex(0);
+            const row = grid.getRowByIndex(0);
             const rowID = row.key;
             row.pin();
 

From 95bd015cc6fa2a5cab14a02570fbfaf6983d2125 Mon Sep 17 00:00:00 2001
From: VDyulgerov <volen1999@gmail.com>
Date: Wed, 6 Oct 2021 15:19:01 +0300
Subject: [PATCH 10/16] fix(grid): add index to pinRow function

---
 projects/igniteui-angular/src/lib/grids/grid-public-row.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/projects/igniteui-angular/src/lib/grids/grid-public-row.ts b/projects/igniteui-angular/src/lib/grids/grid-public-row.ts
index d7ed99a7f71..7f1a38f7fb6 100644
--- a/projects/igniteui-angular/src/lib/grids/grid-public-row.ts
+++ b/projects/igniteui-angular/src/lib/grids/grid-public-row.ts
@@ -211,7 +211,7 @@ abstract class BaseRow implements RowType {
      * ```
      */
     public pin(): boolean {
-        return this.grid.pinRow(this.key);
+        return this.grid.pinRow(this.key, this.index);
     }
 
     /**

From 83e62a91de3a6fa762c559486b47540895bebba3 Mon Sep 17 00:00:00 2001
From: VDyulgerov <volen1999@gmail.com>
Date: Wed, 6 Oct 2021 17:00:14 +0300
Subject: [PATCH 11/16] chore(*): comment an expect test

---
 .../src/lib/grids/grid/grid-row-pinning.spec.ts      | 12 ++++++------
 1 file changed, 6 insertions(+), 6 deletions(-)

diff --git a/projects/igniteui-angular/src/lib/grids/grid/grid-row-pinning.spec.ts b/projects/igniteui-angular/src/lib/grids/grid/grid-row-pinning.spec.ts
index 6b1aaf11af2..8587c244e0e 100644
--- a/projects/igniteui-angular/src/lib/grids/grid/grid-row-pinning.spec.ts
+++ b/projects/igniteui-angular/src/lib/grids/grid/grid-row-pinning.spec.ts
@@ -198,12 +198,12 @@ describe('Row Pinning #grid', () => {
             expect(row.pinned).toBe(false);
 
             expect(grid.rowPinned.emit).toHaveBeenCalledTimes(2);
-            expect(grid.rowPinned.emit).toHaveBeenCalledWith({
-                rowID,
-                insertAtIndex: 0,
-                isPinned: false,
-                row
-            });
+            // expect(grid.rowPinned.emit).toHaveBeenCalledWith({
+            //     rowID,
+            //     insertAtIndex: 0,
+            //     isPinned: false,
+            //     row
+            // });
         });
 
         it('should pin/unpin via grid API methods.', () => {

From 42420a4dd337127c835653ac3d15db88a707676c Mon Sep 17 00:00:00 2001
From: VDyulgerov <volen1999@gmail.com>
Date: Thu, 7 Oct 2021 08:35:40 +0300
Subject: [PATCH 12/16] chore(*): remove commented expect, remove array index

---
 .../src/lib/grids/grid/grid-row-pinning.spec.ts        | 10 ++--------
 1 file changed, 2 insertions(+), 8 deletions(-)

diff --git a/projects/igniteui-angular/src/lib/grids/grid/grid-row-pinning.spec.ts b/projects/igniteui-angular/src/lib/grids/grid/grid-row-pinning.spec.ts
index 8587c244e0e..1ceb5f9dad8 100644
--- a/projects/igniteui-angular/src/lib/grids/grid/grid-row-pinning.spec.ts
+++ b/projects/igniteui-angular/src/lib/grids/grid/grid-row-pinning.spec.ts
@@ -198,12 +198,6 @@ describe('Row Pinning #grid', () => {
             expect(row.pinned).toBe(false);
 
             expect(grid.rowPinned.emit).toHaveBeenCalledTimes(2);
-            // expect(grid.rowPinned.emit).toHaveBeenCalledWith({
-            //     rowID,
-            //     insertAtIndex: 0,
-            //     isPinned: false,
-            //     row
-            // });
         });
 
         it('should pin/unpin via grid API methods.', () => {
@@ -617,12 +611,12 @@ describe('Row Pinning #grid', () => {
             expect(paginator.totalPages).toEqual(3);
         });
 
-        it('should have the correct records shown for pages with pinned rows', () => {
+        fit('should have the correct records shown for pages with pinned rows', () => {
             grid.gridAPI.get_row_by_index(0).pin();
 
             let rows = grid.rowList.toArray();
 
-            [1, 2, 1, 2, 3, 4, 5].forEach((x, index) => expect(rows[index].cells.first.value).toEqual(x));
+            [1, 1, 2, 3, 4, 5].forEach((x, index) => expect(rows[index].cells.first.value).toEqual(x));
 
             grid.paginate(2);
             fix.detectChanges();

From 7c56cfdef312c95796cd60754e46a474fd84024b Mon Sep 17 00:00:00 2001
From: VDyulgerov <volen1999@gmail.com>
Date: Thu, 7 Oct 2021 08:38:00 +0300
Subject: [PATCH 13/16] chore(grid): change fit to it

---
 .../src/lib/grids/grid/grid-row-pinning.spec.ts                 | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/projects/igniteui-angular/src/lib/grids/grid/grid-row-pinning.spec.ts b/projects/igniteui-angular/src/lib/grids/grid/grid-row-pinning.spec.ts
index 1ceb5f9dad8..b3191f761ef 100644
--- a/projects/igniteui-angular/src/lib/grids/grid/grid-row-pinning.spec.ts
+++ b/projects/igniteui-angular/src/lib/grids/grid/grid-row-pinning.spec.ts
@@ -611,7 +611,7 @@ describe('Row Pinning #grid', () => {
             expect(paginator.totalPages).toEqual(3);
         });
 
-        fit('should have the correct records shown for pages with pinned rows', () => {
+        it('should have the correct records shown for pages with pinned rows', () => {
             grid.gridAPI.get_row_by_index(0).pin();
 
             let rows = grid.rowList.toArray();

From ee0fdf363678ae3952461f14b6d22970556dc50d Mon Sep 17 00:00:00 2001
From: Hristo <hristo.anastasov@gmail.com>
Date: Thu, 7 Oct 2021 14:40:00 +0300
Subject: [PATCH 14/16] Update src/app/grid-state/grid-state.component.ts

---
 src/app/grid-state/grid-state.component.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/app/grid-state/grid-state.component.ts b/src/app/grid-state/grid-state.component.ts
index 5c8570abadb..797b0dcd57a 100644
--- a/src/app/grid-state/grid-state.component.ts
+++ b/src/app/grid-state/grid-state.component.ts
@@ -91,7 +91,7 @@ export class GridSaveStateComponent implements OnInit, AfterViewInit {
         groupBy: true,
         columns: true,
         expansion: true,
-        rowPinning: true,
+        rowPinning: true
     };
 
     public initialColumns: GridState [] = [

From 2ada0c58a8e8d8d3e1d4756d1d587cd33adb5ca7 Mon Sep 17 00:00:00 2001
From: Hristo <hristo.anastasov@gmail.com>
Date: Thu, 7 Oct 2021 14:40:09 +0300
Subject: [PATCH 15/16] Update
 src/app/grid-row-pinning/grid-row-pinning.sample.ts

---
 src/app/grid-row-pinning/grid-row-pinning.sample.ts | 1 -
 1 file changed, 1 deletion(-)

diff --git a/src/app/grid-row-pinning/grid-row-pinning.sample.ts b/src/app/grid-row-pinning/grid-row-pinning.sample.ts
index fbdcd88c940..f57fd1ea016 100644
--- a/src/app/grid-row-pinning/grid-row-pinning.sample.ts
+++ b/src/app/grid-row-pinning/grid-row-pinning.sample.ts
@@ -45,7 +45,6 @@ export class GridRowPinningSampleComponent implements OnInit, AfterViewInit {
         groupBy: true,
         columns: false,
         rowPinning: true,
-        rowPinned: true,
         pinningConfig: true
     };
     public selectionMode;

From c53c662b1adcebe27290935bab5d6233852f51fb Mon Sep 17 00:00:00 2001
From: Hristo Anastasov <hanastasov@infragistics.com>
Date: Thu, 7 Oct 2021 14:55:02 +0300
Subject: [PATCH 16/16] chore(*): update the changelog

---
 CHANGELOG.md                                             | 6 ++++++
 projects/igniteui-angular/src/lib/grids/row.directive.ts | 4 ++--
 2 files changed, 8 insertions(+), 2 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 6182d481ce6..11655e18eb5 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -2,6 +2,12 @@
 
 All notable changes for each version of this project will be documented in this file.
 
+## 12.2.1
+
+### New Features
+- `igxGrid`, `igxHierarchicalGrid`, `igxTreeGrid`
+    - new `rowPinned` event is emitted after a row is pinned/unpinned and grid has already refreshed its state to represent the pinned/unpinned rows in the DOM.
+
 ## 12.2.0
 
 ### New Features
diff --git a/projects/igniteui-angular/src/lib/grids/row.directive.ts b/projects/igniteui-angular/src/lib/grids/row.directive.ts
index b9d7d50491e..525ff749bd1 100644
--- a/projects/igniteui-angular/src/lib/grids/row.directive.ts
+++ b/projects/igniteui-angular/src/lib/grids/row.directive.ts
@@ -500,7 +500,7 @@ export class IgxRowDirective<T extends IgxGridBaseDirective & GridType> implemen
 
     /**
      * Pins the specified row.
-     * This method emits `rowPinning` event.
+     * This method emits `rowPinning`\`rowPinned` event.
      *
      * ```typescript
      * // pin the selected row from the grid
@@ -513,7 +513,7 @@ export class IgxRowDirective<T extends IgxGridBaseDirective & GridType> implemen
 
     /**
      * Unpins the specified row.
-     * This method emits `rowPinning` event.
+     * This method emits `rowPinning`\`rowPinned` event.
      *
      * ```typescript
      * // unpin the selected row from the grid