Merge pull request #8163 from IgniteUI/mkirova/fix-8076

chore(*): Add function that waits for activeNodeChange/onSelection  to complete.

Author: ChronosSF

projects/igniteui-angular/src/lib/grids/grid/grid-mrl-keyboard-nav.spec.ts

@@ -6,7 +6,7 @@ import { IgxGridModule, IgxGridCellComponent, IGridCellEventArgs } from './publi
 import { IgxGridComponent } from './grid.component';
 import { SampleTestData } from '../../test-utils/sample-test-data.spec';
 import { configureTestSuite } from '../../test-utils/configure-suite';
-import { wait, UIInteractions } from '../../test-utils/ui-interactions.spec';
+import { wait, UIInteractions, waitForSelectionChange } from '../../test-utils/ui-interactions.spec';
 import { setupGridScrollDetection } from '../../test-utils/helper-utils.spec';
 import { SortingDirection } from '../../data-operations/sorting-expression.interface';
 import { DefaultSortingStrategy } from '../../data-operations/sorting-strategy';
@@ -1894,21 +1894,19 @@ describe('IgxGrid Multi Row Layout - Keyboard navigation #grid', () => {
                 fix.detectChanges();
 
                 GridFunctions.simulateGridContentKeydown(fix, 'ArrowRight', false, false, true);
-                await wait(DEBOUNCETIME * 2);
+                await waitForSelectionChange(fix.componentInstance.grid);
                 fix.detectChanges();
 
                 expect(fix.componentInstance.selectedCell.value).toEqual(fix.componentInstance.data[0].Phone);
                 expect(fix.componentInstance.selectedCell.column.field).toMatch('Phone');
 
                 GridFunctions.simulateGridContentKeydown(fix, 'ArrowDown');
-                await wait();
                 fix.detectChanges();
 
                 expect(fix.componentInstance.selectedCell.value).toEqual(fix.componentInstance.data[0].Fax);
                 expect(fix.componentInstance.selectedCell.column.field).toMatch('Fax');
 
                 GridFunctions.simulateGridContentKeydown(fix, 'ArrowUp');
-                await wait();
                 fix.detectChanges();
 
                 expect(fix.componentInstance.selectedCell.value).toEqual(fix.componentInstance.data[0].Phone);

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

@@ -3,7 +3,7 @@ import { async, TestBed, ComponentFixture, fakeAsync, tick } from '@angular/core
 import { configureTestSuite } from '../../test-utils/configure-suite';
 import { NoopAnimationsModule } from '@angular/platform-browser/animations';
 import { By } from '@angular/platform-browser';
-import { UIInteractions, wait} from '../../test-utils/ui-interactions.spec';
+import { UIInteractions, wait, waitForActiveNodeChange} from '../../test-utils/ui-interactions.spec';
 import { IgxGridModule } from './public_api';
 import { IgxGridComponent } from './grid.component';
 import { IgxGridRowComponent } from './grid-row.component';
@@ -639,7 +639,7 @@ describe('IgxGrid Master Detail #grid', () => {
             fix.detectChanges();
 
             UIInteractions.triggerEventHandlerKeyDown('ArrowUp', gridContent, false, false, true);
-            await wait(DEBOUNCETIME * 2);
+            await waitForActiveNodeChange(grid);
             fix.detectChanges();
 
             const fRow = grid.getRowByIndex(0);

projects/igniteui-angular/src/lib/test-utils/ui-interactions.spec.ts

@@ -1,9 +1,31 @@
+import { first } from 'rxjs/operators';
 import { HorizontalAlignment, VerticalAlignment, Point } from '../services/public_api';
 import { DebugElement } from '@angular/core';
 
 export function wait(ms = 0) {
     return new Promise((resolve, reject) => setTimeout(resolve, ms));
 }
+
+export function waitForActiveNodeChange (grid) {
+    // wait for grid scroll operation to complete and state to be updated.
+    return new Promise((resolve, reject) => {
+        grid.activeNodeChange.pipe(first()).subscribe(() => {
+            grid.cdr.detectChanges();
+            resolve();
+        });
+    });
+}
+
+export function waitForSelectionChange (grid) {
+    // wait for grid scroll operation to complete and state to be updated.
+    return new Promise((resolve, reject) => {
+        grid.onSelection.pipe(first()).subscribe(() => {
+            grid.cdr.detectChanges();
+            resolve();
+        });
+    });
+}
+
 declare var Touch: {
     prototype: Touch;
     new(prop): Touch;