fix(grid): rem throtttime lead of event (#13684)

Author: tishko0

projects/igniteui-angular/src/lib/directives/for-of/for_of.directive.spec.ts

@@ -293,7 +293,7 @@ describe('IgxForOf directive -', () => {
                 { 1: '10', height: '150px' }
             ];
             fix.detectChanges();
-            await wait();
+            await wait(50);
             let chunkSize = (virtualContainer as any)._calcMaxChunkSize();
             expect(chunkSize).toEqual(9);
 

projects/igniteui-angular/src/lib/directives/for-of/for_of.directive.ts

@@ -439,7 +439,7 @@ export class IgxForOfDirective<T, U extends T[] = T[]> implements OnInit, OnChan
             const destructor = takeUntil<any>(this.destroy$);
             this.contentResizeNotify.pipe(
                 filter(() => this.igxForContainerSize && this.igxForOf && this.igxForOf.length > 0),
-                throttleTime(40, undefined, { leading: true, trailing: true }),
+                throttleTime(40, undefined, { leading: false, trailing: true }),
                 destructor
             ).subscribe(() => this._zone.runTask(() => this.updateSizes()));
         }

projects/igniteui-angular/src/lib/grids/grid-base.directive.ts

@@ -3508,7 +3508,7 @@ export abstract class IgxGridBaseDirective extends DisplayDensityBase implements
 
         this.resizeNotify.pipe(
             filter(() => !this._init),
-            throttleTime(0, animationFrameScheduler, { leading: true, trailing: true }),
+            throttleTime(40, animationFrameScheduler, { leading: false, trailing: true }),
             destructor
         )
             .subscribe(() => {

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

@@ -12,7 +12,7 @@ import { GridFunctions } from '../../test-utils/grid-functions.spec';
 import { IgxGridCellComponent } from '../cell.component';
 import { IGridCellEventArgs, IgxColumnComponent } from '../public_api';
 
-const DEBOUNCE_TIME = 30;
+const DEBOUNCE_TIME = 50;
 const GRID_CONTENT_CLASS = '.igx-grid__tbody-content';
 const GRID_FOOTER_CLASS = '.igx-grid__tfoot';
 
@@ -117,9 +117,11 @@ describe('IgxHierarchicalGrid Navigation', () => {
         });
 
         it('should allow navigating up in child grid when child grid selected cell moves outside the parent view port.',  async () => {
-            hierarchicalGrid.verticalScrollContainer.scrollTo(2);
+            await wait(DEBOUNCE_TIME);
             fixture.detectChanges();
+            hierarchicalGrid.verticalScrollContainer.scrollTo(2);
             await wait(DEBOUNCE_TIME);
+            fixture.detectChanges();
 
             const childGrid = hierarchicalGrid.gridAPI.getChildGrids(false)[0];
             const childCell =  childGrid.dataRowList.toArray()[4].cells.first;
@@ -366,6 +368,8 @@ describe('IgxHierarchicalGrid Navigation', () => {
         });
 
         it('if next child cell is not in view should scroll parent so that it is in view.', async () => {
+            await wait(DEBOUNCE_TIME);
+            fixture.detectChanges();
             hierarchicalGrid.verticalScrollContainer.scrollTo(4);
             fixture.detectChanges();
             await wait(DEBOUNCE_TIME);
@@ -651,6 +655,8 @@ describe('IgxHierarchicalGrid Navigation', () => {
         // complex tests
         it('in case prev cell is not in view port should scroll the closest scrollable parent so that cell comes in view.', async () => {
             // scroll parent so that child top is not in view
+            await wait(DEBOUNCE_TIME);
+            fixture.detectChanges();
             hierarchicalGrid.verticalScrollContainer.addScrollTop(300);
             fixture.detectChanges();
             await wait(DEBOUNCE_TIME);

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

@@ -7,7 +7,7 @@ import { IgxRowIslandComponent } from './row-island.component';
 import { wait, UIInteractions } from '../../test-utils/ui-interactions.spec';
 import { By } from '@angular/platform-browser';
 import { first, delay } from 'rxjs/operators';
-import { setupHierarchicalGridScrollDetection, resizeObserverIgnoreError, clearGridSubs } from '../../test-utils/helper-utils.spec';
+import { setupHierarchicalGridScrollDetection, clearGridSubs } from '../../test-utils/helper-utils.spec';
 import { FilteringExpressionsTree } from '../../data-operations/filtering-expressions-tree';
 import { FilteringLogic } from '../../data-operations/filtering-expression.interface';
 import { IgxStringFilteringOperand } from '../../data-operations/filtering-condition';
@@ -203,9 +203,8 @@ describe('IgxHierarchicalGrid Virtualization #hGrid', () => {
 
         // Scroll to bottom
         hierarchicalGrid.verticalScrollContainer.getScroll().scrollTop = 5000;
-        await wait();
+        await wait(50);
         fixture.detectChanges();
-
         // Expand two rows at the bottom
         (hierarchicalGrid.dataRowList.toArray()[6].nativeElement.children[0] as HTMLElement).click();
         await wait();
@@ -282,7 +281,6 @@ describe('IgxHierarchicalGrid Virtualization #hGrid', () => {
     });
 
     it('should update scroll height after expanding/collapsing row in a nested child grid that has no height.', async () => {
-        resizeObserverIgnoreError();
         fixture.componentInstance.data = [
             { ID: 0, ChildLevels: 3, ProductName: 'Product: A0 ' },
             { ID: 1, ChildLevels: 3, ProductName: 'Product: A0 ' },

projects/igniteui-angular/src/lib/list/list.component.spec.ts

@@ -689,8 +689,8 @@ describe('List', () => {
 
         const items = fixture.debugElement.queryAll(By.css('igx-list-item'));
         const len = items.length;
-        expect(items[0].nativeElement.textContent).toContain('2');
-        expect(fixture.componentInstance.forOfList.items[0].index).toEqual(1);
+        expect(items[0].nativeElement.textContent).toContain('4');
+        expect(fixture.componentInstance.forOfList.items[0].index).toEqual(3);
         expect(items[len - 1].nativeElement.textContent).toContain('10');
         expect(fixture.componentInstance.forOfList.items[len - 1].index).toEqual(9);
     }));

projects/igniteui-angular/src/lib/test-utils/configure-suite.ts

@@ -1,5 +1,4 @@
 import { TestBed, getTestBed, ComponentFixture, waitForAsync } from '@angular/core/testing';
-import { resizeObserverIgnoreError } from './helper-utils.spec';
 
 /**
  * Per https://github.com/angular/angular/issues/12409#issuecomment-391087831
@@ -20,12 +19,10 @@ export const configureTestSuite = (configureAction?: () => TestBed) => {
         document.querySelectorAll('svg').forEach(tag => tag.remove());
     };
 
-    let _resizerSub: jasmine.Spy<OnErrorEventHandlerNonNull>;
-
     beforeAll(() => {
         testBed.resetTestingModule();
         testBed.resetTestingModule = () => testBed;
-        _resizerSub = resizeObserverIgnoreError();
+        jasmine.getEnv().allowRespy(true);
     });
 
     if (configureAction) {
@@ -52,6 +49,5 @@ export const configureTestSuite = (configureAction?: () => TestBed) => {
     afterAll(() => {
         testBed.resetTestingModule = originReset;
         testBed.resetTestingModule();
-        _resizerSub = null;
     });
 };

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

@@ -4,17 +4,6 @@ import { IgxHierarchicalGridComponent } from '../grids/hierarchical-grid/public_
 import { GridType } from '../grids/common/grid.interface';
 import { Subscription } from 'rxjs';
 
-export const resizeObserverIgnoreError = () => {
-    jasmine.getEnv().allowRespy(true);
-    const spy = spyOn(window, 'onerror').and.callFake((...args) => {
-        if (args[0].toString().match('ResizeObserver loop limit exceeded')) {
-            return;
-        }
-        spy.and.callThrough().withArgs(...args);
-    });
-    return spy;
-};
-
 export let gridsubscriptions: Subscription [] = [];
 
 export const setupGridScrollDetection = (fixture: ComponentFixture<any>, grid: GridType) => {

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

@@ -203,6 +203,7 @@ export class ListWithPanningTemplatesComponent extends ListWithPanningComponent
         <div [style.height]="'240px'" [style.overflow]="'hidden'" [style.position]="'relative'">
             <igx-list-item
                 [index]="i"
+                [style.height]="'40px'"
                 *igxFor="let item of data; index as i; scrollOrientation : 'vertical'; containerSize: '240px'; itemSize: '40px'">
                 <div class="item-container">
                     <span>{{ item.key }}</span>&nbsp;