diff --git a/CHANGELOG.md b/CHANGELOG.md index af80a779ab8..c8c91baad04 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -2,6 +2,13 @@ All notable changes for each version of this project will be documented in this file. +## 21.2.0 + +### Breaking Changes + +- `igxForOf`, `igxGrid`, `igxTreeGrid`, `igxHierarchicalGrid`, `igxPivotGrid` + - original `data` array mutations (like adding/removing/moving records in the original array) are no longer detected automatically. Components need an array ref change for the change to be detected. + ## 21.1.0 ### New Features diff --git a/projects/igniteui-angular-performance/src/app/app.component.html b/projects/igniteui-angular-performance/src/app/app.component.html index 8ca8b694e34..277913f006f 100644 --- a/projects/igniteui-angular-performance/src/app/app.component.html +++ b/projects/igniteui-angular-performance/src/app/app.component.html @@ -5,6 +5,10 @@ {{ route.title }} } + + diff --git a/projects/igniteui-angular-performance/src/app/app.component.ts b/projects/igniteui-angular-performance/src/app/app.component.ts index 109d49db6d3..d25206dadf1 100644 --- a/projects/igniteui-angular-performance/src/app/app.component.ts +++ b/projects/igniteui-angular-performance/src/app/app.component.ts @@ -1,4 +1,4 @@ -import { Component } from '@angular/core'; +import { Component, ViewChild } from '@angular/core'; import { RouterLink, RouterOutlet, Routes } from '@angular/router'; import { IgxButtonDirective } from 'igniteui-angular'; import { routes } from './app.routes'; @@ -11,4 +11,24 @@ import { routes } from './app.routes'; }) export class AppComponent { protected routes: Routes = routes; + + @ViewChild(RouterOutlet) outlet!: RouterOutlet; + + public async OnPerfTest() { + const longTask = []; + const observer = new PerformanceObserver((list) => { + longTask.push(...list.getEntries()); + }); + observer.observe({ entryTypes: ['longtask'] }); + const grid = (this.outlet.component as any).grid || (this.outlet.component as any).pivotGrid; + for (let i = 0; i < 100; i++) { + grid.navigateTo(i * 50); + await new Promise(r => setTimeout(r, 50)); + } + const sum = longTask.reduce((acc, task) => acc + task.duration, 0); + const avgTime = sum / longTask.length; + console.log('Long Tasks:'+ longTask.length + ", ", 'Average Long Task Time:', avgTime); + observer.disconnect(); + + } } diff --git a/projects/igniteui-angular-performance/src/app/grid/grid.component.html b/projects/igniteui-angular-performance/src/app/grid/grid.component.html index 9cad429ffa8..dbc647f41e7 100644 --- a/projects/igniteui-angular-performance/src/app/grid/grid.component.html +++ b/projects/igniteui-angular-performance/src/app/grid/grid.component.html @@ -1,8 +1,9 @@
diff --git a/projects/igniteui-angular-performance/src/app/pivot-grid/pivot-grid.component.ts b/projects/igniteui-angular-performance/src/app/pivot-grid/pivot-grid.component.ts index e6d9f8593af..9070c7202a8 100644 --- a/projects/igniteui-angular-performance/src/app/pivot-grid/pivot-grid.component.ts +++ b/projects/igniteui-angular-performance/src/app/pivot-grid/pivot-grid.component.ts @@ -182,9 +182,9 @@ export class PivotGridComponent { sortDirection: SortingDirection.None }, { - fullDate: false, + fullDate: true, quarters: true, - months: false, + months: true, }), ], values: [ diff --git a/projects/igniteui-angular-performance/src/styles.scss b/projects/igniteui-angular-performance/src/styles.scss index f6fc0768f45..513b45895b7 100644 --- a/projects/igniteui-angular-performance/src/styles.scss +++ b/projects/igniteui-angular-performance/src/styles.scss @@ -1,4 +1,4 @@ -@use '../../igniteui-angular/src/lib/core/styles/themes' as *; +@use '../../igniteui-angular/core/src/core/styles/themes' as *; @import url('https://fonts.googleapis.com/icon?family=Material+Icons'); @include core(); @include typography( diff --git a/projects/igniteui-angular/directives/src/directives/for-of/base.helper.component.ts b/projects/igniteui-angular/directives/src/directives/for-of/base.helper.component.ts index 7df0cac709d..f3afbf0b949 100644 --- a/projects/igniteui-angular/directives/src/directives/for-of/base.helper.component.ts +++ b/projects/igniteui-angular/directives/src/directives/for-of/base.helper.component.ts @@ -43,11 +43,6 @@ export class VirtualHelperBaseDirective implements OnDestroy, AfterViewInit { this._scrollNativeSize = this.calculateScrollNativeSize(); } - @HostListener('scroll', ['$event']) - public onScroll(event) { - this.scrollAmount = event.target.scrollTop || event.target.scrollLeft; - } - public ngAfterViewInit() { this._afterViewInit = true; diff --git a/projects/igniteui-angular/directives/src/directives/for-of/for_of.directive.spec.ts b/projects/igniteui-angular/directives/src/directives/for-of/for_of.directive.spec.ts index 68a390706b4..5b0e44db0cd 100644 --- a/projects/igniteui-angular/directives/src/directives/for-of/for_of.directive.spec.ts +++ b/projects/igniteui-angular/directives/src/directives/for-of/for_of.directive.spec.ts @@ -249,15 +249,17 @@ describe('IgxForOf directive -', () => { it('should update vertical scroll offsets if igxForOf changes. ', () => { fix.componentInstance.scrollTop(5); fix.detectChanges(); + let transform = displayContainer.style.transform; - expect(parseInt(displayContainer.style.top, 10)).toEqual(-5); + expect(parseInt(transform.slice(transform.indexOf('(') + 1, transform.indexOf(')')), 10)).toEqual(-5); spyOn(fix.componentInstance.parentVirtDir.chunkLoad, 'emit'); fix.componentInstance.data = [{ 1: 1, 2: 2, 3: 3, 4: 4 }]; fix.detectChanges(); - expect(parseInt(displayContainer.style.top, 10)).toEqual(0); + transform = displayContainer.style.transform; + expect(parseInt(transform.slice(transform.indexOf('(') + 1, transform.indexOf(')')), 10)).toEqual(0); expect(fix.componentInstance.parentVirtDir.chunkLoad.emit).toHaveBeenCalledTimes(1); }); diff --git a/projects/igniteui-angular/directives/src/directives/for-of/for_of.directive.ts b/projects/igniteui-angular/directives/src/directives/for-of/for_of.directive.ts index be846b90623..f50e55d78d2 100644 --- a/projects/igniteui-angular/directives/src/directives/for-of/for_of.directive.ts +++ b/projects/igniteui-angular/directives/src/directives/for-of/for_of.directive.ts @@ -1,5 +1,5 @@ import { NgForOfContext } from '@angular/common'; -import { ChangeDetectorRef, ComponentRef, Directive, DoCheck, EmbeddedViewRef, EventEmitter, Input, IterableChanges, IterableDiffer, IterableDiffers, NgZone, OnChanges, OnDestroy, OnInit, Output, SimpleChanges, TemplateRef, TrackByFunction, ViewContainerRef, AfterViewInit, booleanAttribute, DOCUMENT, inject } from '@angular/core'; +import { ChangeDetectorRef, ComponentRef, Directive, EmbeddedViewRef, EventEmitter, Input, IterableChanges, IterableDiffer, IterableDiffers, NgZone, OnChanges, OnDestroy, OnInit, Output, SimpleChanges, TemplateRef, TrackByFunction, ViewContainerRef, AfterViewInit, booleanAttribute, DOCUMENT, inject, afterNextRender, runInInjectionContext, EnvironmentInjector } from '@angular/core'; import { DisplayContainerComponent } from './display.container'; import { HVirtualHelperComponent } from './horizontal.virtual.helper.component'; @@ -84,16 +84,17 @@ export abstract class IgxForOfToken { ], standalone: true }) -export class IgxForOfDirective extends IgxForOfToken implements OnInit, OnChanges, DoCheck, OnDestroy, AfterViewInit { +export class IgxForOfDirective extends IgxForOfToken implements OnInit, OnChanges, OnDestroy, AfterViewInit { private _viewContainer = inject(ViewContainerRef); protected _template = inject>>(TemplateRef); protected _differs = inject(IterableDiffers); + protected _injector = inject(EnvironmentInjector); public cdr = inject(ChangeDetectorRef); protected _zone = inject(NgZone); protected syncScrollService = inject(IgxForOfScrollSyncService); protected platformUtil = inject(PlatformUtil); protected document = inject(DOCUMENT); - + private _igxForOf: U & T[] | null = null; /** * Sets the data to be rendered. @@ -102,7 +103,16 @@ export class IgxForOfDirective extends IgxForOfToken extends IgxForOfToken extends IgxForOfToken extends IgxForOfToken extends IgxForOfToken { + afterNextRender({ + write: () => { + this.dc.instance._viewContainer.element.nativeElement.style.transform = `translateY(${-scrollOffset}px)`; + } + }); + }); } const maxRealScrollTop = this.scrollComponent.nativeElement.scrollHeight - containerSize; @@ -903,15 +921,22 @@ export class IgxForOfDirective extends IgxForOfToken { + afterNextRender({ + write: () => { + this.dc.instance._viewContainer.element.nativeElement.style.transform = `translateY(${-scrollOffset}px)`; + } + }); + }); this._zone.onStable.pipe(first()).subscribe(this.recalcUpdateSizes.bind(this)); @@ -1091,13 +1116,14 @@ export class IgxForOfDirective extends IgxForOfToken extends IgxForOfToken extends IgxForOfToken extends IgxForOfContext selector: '[igxGridFor][igxGridForOf]', standalone: true }) -export class IgxGridForOfDirective extends IgxForOfDirective implements OnInit, OnChanges, DoCheck { +export class IgxGridForOfDirective extends IgxForOfDirective implements OnInit, OnChanges { protected syncService = inject(IgxForOfSyncService); @Input() @@ -1643,7 +1671,7 @@ export class IgxGridForOfDirective extends IgxForOfDirec this.syncService.setMaster(this, true); } - public override ngDoCheck() { + public override resolveDataDiff() { if (this._differ) { const changes = this._differ.diff(this.igxForOf); if (changes) { @@ -1677,19 +1705,25 @@ export class IgxGridForOfDirective extends IgxForOfDirec } public override onScroll(event) { - if (!parseInt(this.scrollComponent.nativeElement.style.height, 10)) { + this.scrollComponent.scrollAmount = event.target.scrollTop; + if (!this.scrollComponent.size) { return; } if (!this._bScrollInternal) { - this._calcVirtualScrollPosition(event.target.scrollTop); + this._calcVirtualScrollPosition(this.scrollComponent.scrollAmount); } else { this._bScrollInternal = false; } const scrollOffset = this.fixedUpdateAllElements(this._virtScrollPosition); + runInInjectionContext(this._injector, () => { + afterNextRender({ + write: () => { + this.dc.instance._viewContainer.element.nativeElement.style.transform = `translateY(${-scrollOffset}px)`; + this._zone.onStable.pipe(first()).subscribe(this.recalcUpdateSizes.bind(this)); + } + }); + }); - this.dc.instance._viewContainer.element.nativeElement.style.top = -(scrollOffset) + 'px'; - - this._zone.onStable.pipe(first()).subscribe(this.recalcUpdateSizes.bind(this)); this.cdr.markForCheck(); } @@ -1699,6 +1733,7 @@ export class IgxGridForOfDirective extends IgxForOfDirec if (!this.scrollComponent || !parseInt(firstScrollChild.style.width, 10)) { return; } + this.scrollComponent.scrollAmount = scrollAmount; // Updating horizontal chunks const scrollOffset = this.fixedUpdateAllElements(Math.abs(scrollAmount)); if (scrollAmount < 0) { diff --git a/projects/igniteui-angular/grids/core/src/api.service.ts b/projects/igniteui-angular/grids/core/src/api.service.ts index 2a9ac35fe6a..e911942e672 100644 --- a/projects/igniteui-angular/grids/core/src/api.service.ts +++ b/projects/igniteui-angular/grids/core/src/api.service.ts @@ -319,6 +319,7 @@ export class GridBaseAPIService implements GridServiceType { grid.transactions.add(transaction); } else { grid.data.push(rowData); + grid.data = cloneArray(grid.data); } grid.validation.markAsTouched(rowId); grid.validation.update(rowId, rowData); @@ -334,6 +335,7 @@ export class GridBaseAPIService implements GridServiceType { grid.transactions.add(transaction, grid.data[index]); } else { grid.data.splice(index, 1); + grid.data = cloneArray(grid.data); } } else { const state: State = grid.transactions.getState(rowID); diff --git a/projects/igniteui-angular/grids/core/src/grid-actions/grid-pinning-actions.component.spec.ts b/projects/igniteui-angular/grids/core/src/grid-actions/grid-pinning-actions.component.spec.ts index f5e53ee37a2..a29a9c8121d 100644 --- a/projects/igniteui-angular/grids/core/src/grid-actions/grid-pinning-actions.component.spec.ts +++ b/projects/igniteui-angular/grids/core/src/grid-actions/grid-pinning-actions.component.spec.ts @@ -9,7 +9,7 @@ import { SampleTestData } from '../../../../test-utils/sample-test-data.spec'; import { IgxActionStripComponent } from 'igniteui-angular/action-strip'; import { IgxGridComponent } from 'igniteui-angular/grids/grid'; - +const DEBOUNCETIME = 60; describe('igxGridPinningActions #grid ', () => { let fixture; let actionStrip: IgxActionStripComponent; @@ -65,7 +65,7 @@ describe('igxGridPinningActions #grid ', () => { jumpButton.triggerEventHandler('click', new Event('click')); await wait(); fixture.detectChanges(); - await wait(); + await wait(DEBOUNCETIME); fixture.detectChanges(); const secondToLastVisible = grid.rowList.toArray()[grid.rowList.length - 2]; diff --git a/projects/igniteui-angular/grids/core/src/grid-navigation.service.ts b/projects/igniteui-angular/grids/core/src/grid-navigation.service.ts index bc2ea569236..c38de8ee19c 100644 --- a/projects/igniteui-angular/grids/core/src/grid-navigation.service.ts +++ b/projects/igniteui-angular/grids/core/src/grid-navigation.service.ts @@ -520,7 +520,8 @@ export class IgxGridNavigationService { return Math.ceil(this.grid.headerContainer.scrollPosition); } public get containerTopOffset() { - return parseInt(this.grid.verticalScrollContainer.dc.instance._viewContainer.element.nativeElement.style.top, 10); + const transform = this.grid.verticalScrollContainer.dc.instance._viewContainer.element.nativeElement.style.transform + return Number(transform.match(/translateY\((-?\d+\.?\d*)px\)/)?.[1]) } protected getColumnUnpinnedIndex(visibleColumnIndex: number) { diff --git a/projects/igniteui-angular/grids/grid/src/grid-add-row.spec.ts b/projects/igniteui-angular/grids/grid/src/grid-add-row.spec.ts index bc3beb7bfeb..07900d3677f 100644 --- a/projects/igniteui-angular/grids/grid/src/grid-add-row.spec.ts +++ b/projects/igniteui-angular/grids/grid/src/grid-add-row.spec.ts @@ -18,7 +18,7 @@ import { Subject } from 'rxjs'; import { DefaultSortingStrategy, IgxStringFilteringOperand, SortingDirection, TransactionType } from 'igniteui-angular/core'; import { IgxGridMRLNavigationService } from 'igniteui-angular/grids/core'; -const DEBOUNCETIME = 30; +const DEBOUNCETIME = 60; describe('IgxGrid - Row Adding #grid', () => { const GRID_ROW = 'igx-grid-row'; diff --git a/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts b/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts index 441667e584f..ff880dca911 100644 --- a/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts +++ b/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts @@ -29,7 +29,8 @@ import { ViewChildren, ViewContainerRef, DOCUMENT, - inject + inject, + InjectionToken } from '@angular/core'; import { areEqualArrays, @@ -110,6 +111,15 @@ import { CharSeparatedValueData, DropPosition, FilterMode, getUUID, GridCellMerg import { getCurrentI18n, getNumberFormatter, IResourceChangeEventArgs, } from 'igniteui-i18n-core'; import { I18N_FORMATTER } from 'igniteui-angular/core'; +/** + * Injection token for setting the throttle time used in grid virtual scroll. + * @hidden + */ +export const SCROLL_THROTTLE_TIME = /*@__PURE__*/new InjectionToken('SCROLL_THROTTLE_TIME', { + factory: () => 40 +}); + + interface IMatchInfoCache { row: any; index: number; @@ -166,6 +176,7 @@ export abstract class IgxGridBaseDirective implements GridType, protected _diTransactions = inject(IgxGridTransaction, { optional: true }); /** @hidden @internal */ public i18nFormatter = inject(I18N_FORMATTER); + private readonly THROTTLE_TIME = inject(SCROLL_THROTTLE_TIME); /** * Gets/Sets the display time for the row adding snackbar notification. @@ -3003,6 +3014,9 @@ export abstract class IgxGridBaseDirective implements GridType, /** @hidden @internal */ public resizeNotify = new Subject(); + /** @hidden @internal */ + public scrollNotify = new Subject(); + /** @hidden @internal */ public rowAddedNotifier = new Subject(); @@ -3714,6 +3728,15 @@ export abstract class IgxGridBaseDirective implements GridType, this.subscribeToTransactions(); + this.scrollNotify.pipe( + filter(() => !this._init), + throttleTime(this.THROTTLE_TIME, animationFrameScheduler, { leading: false, trailing: true }), + destructor + ) + .subscribe((event) => { + this.verticalScrollHandler(event); + }); + this.resizeNotify.pipe( filter(() => !this._init), throttleTime(40, animationFrameScheduler, { leading: true, trailing: true }), @@ -4158,7 +4181,7 @@ export abstract class IgxGridBaseDirective implements GridType, this.zone.runOutsideAngular(() => { this.verticalScrollHandler = this.verticalScrollHandler.bind(this); this.horizontalScrollHandler = this.horizontalScrollHandler.bind(this); - this.verticalScrollContainer.getScroll().addEventListener('scroll', this.verticalScrollHandler); + this.verticalScrollContainer.getScroll().addEventListener('scroll', (event) => this.scrollNotify.next(event)); this.headerContainer?.getScroll().addEventListener('scroll', this.horizontalScrollHandler); if (this.hasColumnsToAutosize) { this.headerContainer?.dataChanged.pipe(takeUntil(this.destroy$)).subscribe(() => { @@ -7726,13 +7749,11 @@ export abstract class IgxGridBaseDirective implements GridType, this.verticalScrollContainer.onScroll(event); this.disableTransitions = true; - this.zone.run(() => { - this.zone.onStable.pipe(first()).subscribe(() => { - this.verticalScrollContainer.chunkLoad.emit(this.verticalScrollContainer.state); - if (this.rowEditable) { - this.changeRowEditingOverlayStateOnScroll(this.crudService.rowInEditMode); - } - }); + this.zone.onStable.pipe(first()).subscribe(() => { + this.verticalScrollContainer.chunkLoad.emit(this.verticalScrollContainer.state); + if (this.rowEditable) { + this.changeRowEditingOverlayStateOnScroll(this.crudService.rowInEditMode); + } }); this.disableTransitions = false; diff --git a/projects/igniteui-angular/grids/grid/src/grid-cell-selection.spec.ts b/projects/igniteui-angular/grids/grid/src/grid-cell-selection.spec.ts index 93ba9188b21..45555aba658 100644 --- a/projects/igniteui-angular/grids/grid/src/grid-cell-selection.spec.ts +++ b/projects/igniteui-angular/grids/grid/src/grid-cell-selection.spec.ts @@ -1,6 +1,7 @@ import { TestBed, fakeAsync, tick, ComponentFixture, waitForAsync } from '@angular/core/testing'; import { NoopAnimationsModule } from '@angular/platform-browser/animations'; import { IgxGridComponent } from './public_api'; +import { SCROLL_THROTTLE_TIME } from './../src/grid-base.directive'; import { SelectionWithScrollsComponent, SelectionWithTransactionsComponent, @@ -978,6 +979,9 @@ describe('IgxGrid - Cell selection #grid', () => { let gridContent: DebugElement; beforeEach(() => { + TestBed.configureTestingModule({ + providers: [{ provide: SCROLL_THROTTLE_TIME, useValue: 0 }] + }); fix = TestBed.createComponent(SelectionWithScrollsComponent); fix.detectChanges(); grid = fix.componentInstance.grid; @@ -1586,14 +1590,14 @@ describe('IgxGrid - Cell selection #grid', () => { obj = grid.gridAPI.get_row_by_index(i); } UIInteractions.triggerKeyDownEvtUponElem('arrowdown', obj.nativeElement, true, false, true); - await wait(50); + await wait(100); fix.detectChanges(); } expect(selectionChangeSpy).toHaveBeenCalledTimes(5); cell = grid.gridAPI.get_cell_by_index(10, 'Name'); UIInteractions.triggerKeyDownEvtUponElem('arrowleft', cell.nativeElement, true, false, true); - await wait(50); + await wait(60); fix.detectChanges(); expect(selectionChangeSpy).toHaveBeenCalledTimes(6); @@ -1707,7 +1711,7 @@ describe('IgxGrid - Cell selection #grid', () => { } } UIInteractions.triggerKeyDownEvtUponElem('arrowdown', obj.nativeElement, true, false, true); - await wait(50); + await wait(60); fix.detectChanges(); } @@ -1717,7 +1721,7 @@ describe('IgxGrid - Cell selection #grid', () => { const summaryCell = grid.summariesRowList.find(row => row.index === 8) .summaryCells.find(sCell => sCell.visibleColumnIndex === i); UIInteractions.triggerKeyDownEvtUponElem('arrowright', summaryCell.nativeElement, true); - await wait(50); + await wait(60); fix.detectChanges(); } @@ -1726,7 +1730,7 @@ describe('IgxGrid - Cell selection #grid', () => { const sumCell = grid.summariesRowList.find(row => row.index === 8) .summaryCells.find(sCell => sCell.visibleColumnIndex === 5); UIInteractions.triggerKeyDownEvtUponElem('arrowup', sumCell.nativeElement, true); - await wait(50); + await wait(60); fix.detectChanges(); GridSelectionFunctions.verifySelectedRange(grid, 7, 7, 5, 5); diff --git a/projects/igniteui-angular/grids/grid/src/grid-keyBoardNav.spec.ts b/projects/igniteui-angular/grids/grid/src/grid-keyBoardNav.spec.ts index 8b48210269f..3a9e46bba17 100644 --- a/projects/igniteui-angular/grids/grid/src/grid-keyBoardNav.spec.ts +++ b/projects/igniteui-angular/grids/grid/src/grid-keyBoardNav.spec.ts @@ -15,8 +15,9 @@ import { DebugElement, QueryList } from '@angular/core'; import { IgxGridGroupByRowComponent } from './groupby-row.component'; import { CellType } from 'igniteui-angular/grids/core'; import { DefaultSortingStrategy, SortingDirection } from 'igniteui-angular/core'; +import { SCROLL_THROTTLE_TIME } from './../src/grid-base.directive'; -const DEBOUNCETIME = 30; +const DEBOUNCETIME = 100; describe('IgxGrid - Keyboard navigation #grid', () => { @@ -222,6 +223,9 @@ describe('IgxGrid - Keyboard navigation #grid', () => { })); beforeEach(() => { + TestBed.configureTestingModule({ + providers: [{ provide: SCROLL_THROTTLE_TIME, useValue: 0 }] + }); fix = TestBed.createComponent(VirtualGridComponent); fix.detectChanges(); grid = fix.componentInstance.grid; @@ -287,7 +291,7 @@ describe('IgxGrid - Keyboard navigation #grid', () => { it('should allow navigating up', async () => { grid.verticalScrollContainer.scrollTo(104); - await wait(); + await wait(DEBOUNCETIME); fix.detectChanges(); const cell = grid.gridAPI.get_cell_by_index(100, 'value'); @@ -426,7 +430,7 @@ describe('IgxGrid - Keyboard navigation #grid', () => { fix.detectChanges(); selectedCell = fix.componentInstance.selectedCell; - expect(parseInt(displayContainer.style.top, 10)).toBeLessThanOrEqual(-1 * (grid.rowHeight - bottomCellVisibleHeight)); + expect(grid.navigation.containerTopOffset).toBeLessThanOrEqual(-1 * (grid.rowHeight - bottomCellVisibleHeight)); expect(displayContainer.parentElement.scrollTop).toEqual(0); expect(selectedCell.value).toEqual(40); expect(selectedCell.column.field).toMatch('1'); @@ -439,12 +443,11 @@ describe('IgxGrid - Keyboard navigation #grid', () => { fix.componentInstance.data = fix.componentInstance.generateData(1000); fix.detectChanges(); - const displayContainer = GridFunctions.getGridDisplayContainer(fix).nativeElement; fix.componentInstance.scrollTop(25); await wait(DEBOUNCETIME); fix.detectChanges(); - expect(displayContainer.style.top).toEqual('-25px'); + expect(grid.navigation.containerTopOffset).toEqual(-25); const cell = grid.gridAPI.get_cell_by_index(1, '1'); UIInteractions.simulateClickAndSelectEvent(cell); await wait(); @@ -458,7 +461,7 @@ describe('IgxGrid - Keyboard navigation #grid', () => { fix.detectChanges(); fix.detectChanges(); - expect(displayContainer.style.top).toEqual('0px'); + expect(grid.navigation.containerTopOffset).toEqual(0); expect(fix.componentInstance.selectedCell.value).toEqual(0); expect(fix.componentInstance.selectedCell.column.field).toMatch('1'); }); @@ -549,6 +552,7 @@ describe('IgxGrid - Keyboard navigation #grid', () => { expect(fix.componentInstance.selectedCell.value).toEqual(10); expect(fix.componentInstance.selectedCell.column.field).toMatch('1'); UIInteractions.triggerKeyDownEvtUponElem('arrowleft', grid.tbody.nativeElement, true); + fix.detectChanges(); await wait(DEBOUNCETIME); fix.detectChanges(); @@ -590,8 +594,7 @@ describe('IgxGrid - Keyboard navigation #grid', () => { await wait(DEBOUNCETIME); fix.detectChanges(); - let scrollContainer = grid.verticalScrollContainer.dc.instance._viewContainer; - let scrollContainerOffset = scrollContainer.element.nativeElement.offsetTop; + let scrollContainerOffset = grid.navigation.containerTopOffset; expect(scrollContainerOffset).toEqual(-25); const cell = grid.gridAPI.get_cell_by_index(1, 'value'); @@ -605,8 +608,7 @@ describe('IgxGrid - Keyboard navigation #grid', () => { await wait(DEBOUNCETIME); fix.detectChanges(); - scrollContainer = grid.verticalScrollContainer.dc.instance._viewContainer; - scrollContainerOffset = scrollContainer.element.nativeElement.offsetTop; + scrollContainerOffset = grid.navigation.containerTopOffset; expect(scrollContainerOffset).toEqual(0); expect(fix.componentInstance.selectedCell.value).toEqual(0); diff --git a/projects/igniteui-angular/grids/grid/src/grid-mrl-keyboard-nav.spec.ts b/projects/igniteui-angular/grids/grid/src/grid-mrl-keyboard-nav.spec.ts index 902c33ca6ff..f9d223a6441 100644 --- a/projects/igniteui-angular/grids/grid/src/grid-mrl-keyboard-nav.spec.ts +++ b/projects/igniteui-angular/grids/grid/src/grid-mrl-keyboard-nav.spec.ts @@ -11,8 +11,9 @@ import { GridFunctions, GRID_MRL_BLOCK } from '../../../test-utils/grid-function import { CellType, IGridCellEventArgs, IgxColumnComponent, IgxGridMRLNavigationService } from 'igniteui-angular/grids/core'; import { IgxColumnLayoutComponent } from 'igniteui-angular/grids/core'; import { DefaultSortingStrategy, SortingDirection } from 'igniteui-angular/core'; +import { SCROLL_THROTTLE_TIME } from './../src/grid-base.directive'; -const DEBOUNCE_TIME = 30; +const DEBOUNCE_TIME = 60; const CELL_CSS_CLASS = '.igx-grid__td'; const ROW_CSS_CLASS = '.igx-grid__tr'; const CELL_BLOCK = `.${GRID_MRL_BLOCK}`; @@ -28,6 +29,9 @@ describe('IgxGrid Multi Row Layout - Keyboard navigation #grid', () => { })); beforeEach(() => { + TestBed.configureTestingModule({ + providers: [{ provide: SCROLL_THROTTLE_TIME, useValue: 0 }] + }); fix = TestBed.createComponent(ColumnLayoutTestComponent); }); diff --git a/projects/igniteui-angular/grids/grid/src/grid.component.spec.ts b/projects/igniteui-angular/grids/grid/src/grid.component.spec.ts index 3a09da1118b..2db66e08b36 100644 --- a/projects/igniteui-angular/grids/grid/src/grid.component.spec.ts +++ b/projects/igniteui-angular/grids/grid/src/grid.component.spec.ts @@ -18,6 +18,7 @@ import { AsyncPipe } from '@angular/common'; import { setElementSize, ymd } from '../../../test-utils/helper-utils.spec'; import { FilteringExpressionsTree, FilteringLogic, getComponentSize, GridColumnDataType, IgxNumberFilteringOperand, IgxStringFilteringOperand, ISortingExpression, ɵSize, SortingDirection } from 'igniteui-angular/core'; import { IgxPaginatorComponent, IgxPaginatorContentDirective } from 'igniteui-angular/paginator'; +import { SCROLL_THROTTLE_TIME } from './../src/grid-base.directive'; describe('IgxGrid Component Tests #grid', () => { const MIN_COL_WIDTH = '136px'; @@ -41,6 +42,12 @@ describe('IgxGrid Component Tests #grid', () => { .compileComponents(); })); + beforeEach(() => { + TestBed.configureTestingModule({ + providers: [{ provide: SCROLL_THROTTLE_TIME, useValue: 0 }] + }); + }); + it('should initialize a grid with columns from markup', () => { const fix = TestBed.createComponent(IgxGridMarkupDeclarationComponent); fix.detectChanges(); @@ -2022,7 +2029,7 @@ describe('IgxGrid Component Tests #grid', () => { grid.navigateTo(50, 16); fix.detectChanges(); - await wait(); + await wait(60); fix.detectChanges(); expect(headerRowElement.getAttribute('aria-rowindex')).toBe('1'); diff --git a/projects/igniteui-angular/grids/grid/src/grid.crud.spec.ts b/projects/igniteui-angular/grids/grid/src/grid.crud.spec.ts index a1e0ee794bf..afd33098689 100644 --- a/projects/igniteui-angular/grids/grid/src/grid.crud.spec.ts +++ b/projects/igniteui-angular/grids/grid/src/grid.crud.spec.ts @@ -43,7 +43,8 @@ describe('IgxGrid - CRUD operations #grid', () => { expect(grid.rowList.length).toEqual(expectedLength); }); - it('should support adding rows by manipulating the `data` @Input of the grid', () => { + // No longer supported - array mutations are not detected automatically, need ref change. + xit('should support adding rows by manipulating the `data` @Input of the grid', () => { // Add to the data array without changing the reference // with manual detection for (let i = 0; i < 10; i++) { @@ -103,7 +104,8 @@ describe('IgxGrid - CRUD operations #grid', () => { expect(grid.data.length).toEqual(8); }); - it('should support removing rows by manipulating the `data` @Input of the grid', () => { + // No longer supported - array mutations are not detected automatically, need ref change. + xit('should support removing rows by manipulating the `data` @Input of the grid', () => { // Remove from the data array without changing the reference // with manual detection fix.componentInstance.data.pop(); diff --git a/projects/igniteui-angular/grids/grid/src/grid.master-detail.spec.ts b/projects/igniteui-angular/grids/grid/src/grid.master-detail.spec.ts index 3315c47d56c..497caf776ae 100644 --- a/projects/igniteui-angular/grids/grid/src/grid.master-detail.spec.ts +++ b/projects/igniteui-angular/grids/grid/src/grid.master-detail.spec.ts @@ -15,8 +15,9 @@ import { GridSummaryCalculationMode, IgxStringFilteringOperand, SortingDirection import { IgxCheckboxComponent } from 'igniteui-angular/checkbox'; import { IgxInputDirective, IgxInputGroupComponent } from 'igniteui-angular/input-group'; import { IgxPaginatorComponent } from 'igniteui-angular/paginator'; +import { SCROLL_THROTTLE_TIME } from './../src/grid-base.directive'; -const DEBOUNCE_TIME = 30; +const DEBOUNCE_TIME = 60; const ROW_TAG = 'igx-grid-row'; const GROUP_ROW_TAG = 'igx-grid-groupby-row'; const SUMMARY_ROW_TAG = 'igx-grid-summary-row'; @@ -43,6 +44,12 @@ describe('IgxGrid Master Detail #grid', () => { }).compileComponents(); })); + beforeEach(waitForAsync(() => { + TestBed.configureTestingModule({ + providers: [{ provide: SCROLL_THROTTLE_TIME, useValue: 0 }] + }); + })); + describe('Basic', () => { beforeEach(fakeAsync(() => { fix = TestBed.createComponent(DefaultGridMasterDetailComponent); @@ -607,6 +614,7 @@ describe('IgxGrid Master Detail #grid', () => { await wait(DEBOUNCE_TIME); fix.detectChanges(); await wait(DEBOUNCE_TIME); + fix.detectChanges(); const lastRow = grid.gridAPI.get_row_by_index(52); expect(lastRow).not.toBeUndefined(); @@ -1022,7 +1030,7 @@ describe('IgxGrid Master Detail #grid', () => { // check row can be expanded const lastRow = grid.rowList.last; GridFunctions.toggleMasterRow(fix, lastRow); - await wait(); + await wait(DEBOUNCE_TIME); fix.detectChanges(); expect(lastRow.expanded).toBeTruthy(); const lastRowDetail = GridFunctions.getMasterRowDetail(grid.rowList.last); @@ -1124,19 +1132,21 @@ describe('IgxGrid Master Detail #grid', () => { fix.detectChanges(); UIInteractions.triggerEventHandlerKeyDown('ArrowDown', gridContent); + await wait(DEBOUNCE_TIME); fix.detectChanges(); let targetCellElement2 = grid.getCellByColumn(0, 'Address'); expect(targetCellElement2.active).toBeTruthy(); UIInteractions.triggerEventHandlerKeyDown('ArrowDown', gridContent); + await wait(DEBOUNCE_TIME); fix.detectChanges(); const firstRowDetail = GridFunctions.getMasterRowDetail(grid.rowList.first); GridFunctions.verifyMasterDetailRowFocused(firstRowDetail); UIInteractions.triggerEventHandlerKeyDown('ArrowDown', gridContent); - await wait(); + await wait(DEBOUNCE_TIME); fix.detectChanges(); targetCellElement2 = grid.getCellByColumn(2, 'CompanyName'); @@ -1151,19 +1161,21 @@ describe('IgxGrid Master Detail #grid', () => { fix.detectChanges(); UIInteractions.triggerEventHandlerKeyDown('ArrowUp', gridContent); - await wait(); + await wait(DEBOUNCE_TIME); fix.detectChanges(); let targetCellElement2 = grid.getCellByColumn(2, 'CompanyName'); expect(targetCellElement2.active).toBeTruthy(); UIInteractions.triggerEventHandlerKeyDown('ArrowUp', gridContent); + await wait(DEBOUNCE_TIME); fix.detectChanges(); const firstRowDetail = GridFunctions.getMasterRowDetail(grid.rowList.first); GridFunctions.verifyMasterDetailRowFocused(firstRowDetail); UIInteractions.triggerEventHandlerKeyDown('ArrowUp', gridContent); + await wait(DEBOUNCE_TIME); fix.detectChanges(); targetCellElement2 = grid.getCellByColumn(0, 'Address'); diff --git a/projects/igniteui-angular/grids/grid/src/grid.multi-row-layout.integration.spec.ts b/projects/igniteui-angular/grids/grid/src/grid.multi-row-layout.integration.spec.ts index 5295a492f6f..12692d5eda7 100644 --- a/projects/igniteui-angular/grids/grid/src/grid.multi-row-layout.integration.spec.ts +++ b/projects/igniteui-angular/grids/grid/src/grid.multi-row-layout.integration.spec.ts @@ -857,7 +857,7 @@ describe('IgxGrid - multi-row-layout Integration #grid - ', () => { const lastIndex = grid.data.length + grid.groupsRecords.length - 1; grid.verticalScrollContainer.scrollTo(lastIndex); - await wait(16); // needed because of throttleTime on the resize observer + await wait(50); // needed because of throttleTime on scroll fixture.detectChanges(); const scrollTop = grid.verticalScrollContainer.getScroll().scrollTop; @@ -868,7 +868,7 @@ describe('IgxGrid - multi-row-layout Integration #grid - ', () => { expect(scrolledToBottom).toBeTruthy(); const lastRowOffset = grid.rowList.last.element.nativeElement.offsetTop + - grid.rowList.last.element.nativeElement.offsetHeight + parseInt(tbody.children[0].children[0].style.top, 10); + grid.rowList.last.element.nativeElement.offsetHeight + grid.navigation.containerTopOffset; expect(lastRowOffset).toEqual(tbody.scrollHeight); }); diff --git a/projects/igniteui-angular/grids/hierarchical-grid/src/hierarchical-grid.navigation.spec.ts b/projects/igniteui-angular/grids/hierarchical-grid/src/hierarchical-grid.navigation.spec.ts index e9b7ef3f5cc..45a1b87d69a 100644 --- a/projects/igniteui-angular/grids/hierarchical-grid/src/hierarchical-grid.navigation.spec.ts +++ b/projects/igniteui-angular/grids/hierarchical-grid/src/hierarchical-grid.navigation.spec.ts @@ -10,8 +10,9 @@ import { clearGridSubs, setupHierarchicalGridScrollDetection } from '../../../te import { GridFunctions } from '../../../test-utils/grid-functions.spec'; import { IGridCellEventArgs, IgxColumnComponent, IgxGridCellComponent, IgxGridNavigationService } from 'igniteui-angular/grids/core'; import { IPathSegment } from 'igniteui-angular/core'; +import { SCROLL_THROTTLE_TIME } from './../../grid/src/grid-base.directive'; -const DEBOUNCE_TIME = 50; +const DEBOUNCE_TIME = 60; const GRID_CONTENT_CLASS = '.igx-grid__tbody-content'; const GRID_FOOTER_CLASS = '.igx-grid__tfoot'; @@ -37,11 +38,20 @@ describe('IgxHierarchicalGrid Navigation', () => { jasmine.DEFAULT_TIMEOUT_INTERVAL = defaultTimeout * 2; })); + beforeEach(waitForAsync(() => { + TestBed.configureTestingModule({ + providers: [{ provide: SCROLL_THROTTLE_TIME, useValue: 0 }] + }); + })); + afterAll(() => jasmine.DEFAULT_TIMEOUT_INTERVAL = defaultTimeout); describe('IgxHierarchicalGrid Basic Navigation #hGrid', () => { beforeEach(waitForAsync(() => { + TestBed.configureTestingModule({ + providers: [{ provide: SCROLL_THROTTLE_TIME, useValue: 0 }] + }); fixture = TestBed.createComponent(IgxHierarchicalGridTestBaseComponent); fixture.detectChanges(); hierarchicalGrid = fixture.componentInstance.hgrid; @@ -108,7 +118,7 @@ describe('IgxHierarchicalGrid Navigation', () => { const childGridContent = fixture.debugElement.queryAll(By.css(GRID_CONTENT_CLASS))[1]; UIInteractions.triggerEventHandlerKeyDown('arrowdown', childGridContent, false, false, false); fixture.detectChanges(); - await wait(); + await wait(60); // parent should scroll down so that cell in child is in view. const selectedCell = fixture.componentInstance.selectedCell; const selectedCellElem = childGrid.gridAPI.get_cell_by_index(selectedCell.row.index, selectedCell.column.field) as IgxGridCellComponent; @@ -615,7 +625,7 @@ describe('IgxHierarchicalGrid Navigation', () => { await wait(DEBOUNCE_TIME); hierarchicalGrid.navigateTo(2); - await wait(); + await wait(DEBOUNCE_TIME); const cell = hierarchicalGrid.gridAPI.get_cell_by_index(2, 'ChildLevels'); UIInteractions.simulateDoubleClickAndSelectEvent(cell); @@ -623,7 +633,7 @@ describe('IgxHierarchicalGrid Navigation', () => { await wait(); UIInteractions.triggerKeyDownEvtUponElem('tab', cell.nativeElement, true, false, true); - fixture.detectChanges(); + fixture.detectChanges(DEBOUNCE_TIME); await wait(DEBOUNCE_TIME); const activeEl = document.activeElement; @@ -725,17 +735,17 @@ describe('IgxHierarchicalGrid Navigation', () => { it('should allow navigating up from parent into nested child grid', async () => { hierarchicalGrid.verticalScrollContainer.scrollTo(2); - await wait(); + await wait(DEBOUNCE_TIME); fixture.detectChanges(); const child = hierarchicalGrid.gridAPI.getChildGrids(false)[0]; const lastIndex = child.dataView.length - 1; child.verticalScrollContainer.scrollTo(lastIndex); - await wait(); + await wait(DEBOUNCE_TIME); fixture.detectChanges(); child.verticalScrollContainer.scrollTo(lastIndex); - await wait(); + await wait(DEBOUNCE_TIME); fixture.detectChanges(); const parentCell = hierarchicalGrid.gridAPI.get_cell_by_index(2, 'ID'); @@ -935,7 +945,7 @@ describe('IgxHierarchicalGrid Navigation', () => { firstChildGrid.verticalScrollContainer.scrollTo(9); fixture.detectChanges(); - await wait(); + await wait(DEBOUNCE_TIME); const firstChildCell = firstChildGrid.gridAPI.get_cell_by_index(9, 'Col1'); GridFunctions.focusCell(fixture, firstChildCell); @@ -954,6 +964,9 @@ describe('IgxHierarchicalGrid Navigation', () => { describe('IgxHierarchicalGrid Navigation API #hGrid', () => { beforeEach(waitForAsync(() => { + TestBed.configureTestingModule({ + providers: [{ provide: SCROLL_THROTTLE_TIME, useValue: 1 }] + }); fixture = TestBed.createComponent(IgxHierarchicalGridMultiLayoutComponent); fixture.detectChanges(); hierarchicalGrid = fixture.componentInstance.hgrid; @@ -1004,16 +1017,16 @@ describe('IgxHierarchicalGrid Navigation', () => { }; hierarchicalGrid.navigation.navigateToChildGrid([targetRoot, targetNested], () => { - fixture.detectChanges(); + fixture.detectChanges(); const childGrid = hierarchicalGrid.gridAPI.getChildGrid([targetRoot]).nativeElement; - expect(childGrid).not.toBe(undefined); + expect(childGrid).not.toBe(undefined); const childGridNested = hierarchicalGrid.gridAPI.getChildGrid([targetRoot, targetNested]).nativeElement; - expect(childGridNested).not.toBe(undefined); + expect(childGridNested).not.toBe(undefined); - const parentBottom = childGrid.getBoundingClientRect().bottom; - const parentTop = childGrid.getBoundingClientRect().top; - // check it's in view within its parent - expect(childGridNested.getBoundingClientRect().bottom <= parentBottom && childGridNested.getBoundingClientRect().top >= parentTop); + const parentBottom = childGrid.getBoundingClientRect().bottom; + const parentTop = childGrid.getBoundingClientRect().top; + // check it's in view within its parent + expect(childGridNested.getBoundingClientRect().bottom <= parentBottom && childGridNested.getBoundingClientRect().top >= parentTop); done(); }); }); diff --git a/projects/igniteui-angular/grids/hierarchical-grid/src/hierarchical-grid.virtualization.spec.ts b/projects/igniteui-angular/grids/hierarchical-grid/src/hierarchical-grid.virtualization.spec.ts index 59dab92f738..0bd2f1cb326 100644 --- a/projects/igniteui-angular/grids/hierarchical-grid/src/hierarchical-grid.virtualization.spec.ts +++ b/projects/igniteui-angular/grids/hierarchical-grid/src/hierarchical-grid.virtualization.spec.ts @@ -14,6 +14,7 @@ import { IgxHierarchicalGridDefaultComponent } from '../../../test-utils/hierarc import { firstValueFrom } from 'rxjs'; import { FilteringExpressionsTree, FilteringLogic, IgxStringFilteringOperand } from 'igniteui-angular/core'; import { IgxGridNavigationService } from 'igniteui-angular/grids/core'; +import { SCROLL_THROTTLE_TIME } from './../../grid/src/grid-base.directive'; describe('IgxHierarchicalGrid Virtualization #hGrid', () => { let fixture; @@ -33,6 +34,9 @@ describe('IgxHierarchicalGrid Virtualization #hGrid', () => { })); beforeEach(() => { + TestBed.configureTestingModule({ + providers: [{ provide: SCROLL_THROTTLE_TIME, useValue: 1 }] + }); fixture = TestBed.createComponent(IgxHierarchicalGridTestBaseComponent); fixture.detectChanges(); hierarchicalGrid = fixture.componentInstance.hgrid; @@ -77,17 +81,17 @@ describe('IgxHierarchicalGrid Virtualization #hGrid', () => { elem.scrollTop = 400; fixture.detectChanges(); fixture.componentRef.hostView.detectChanges(); - await wait(30); + await wait(60); fixture.detectChanges(); // collapse and expand the row (firstRow.nativeElement.children[0] as HTMLElement).click(); fixture.detectChanges(); - await wait(30); + await wait(60); fixture.detectChanges(); (firstRow.nativeElement.children[0] as HTMLElement).click(); fixture.detectChanges(); - await wait(30); + await wait(60); fixture.detectChanges(); expect(elem.scrollTop).toBe(400); @@ -173,7 +177,7 @@ describe('IgxHierarchicalGrid Virtualization #hGrid', () => { await wait(100); fixture.detectChanges(); const startIndex = hierarchicalGrid.verticalScrollContainer.state.startIndex; - const topOffset = GridFunctions.getGridDisplayContainer(fixture).nativeElement.style.top; + const topOffset = hierarchicalGrid.navigation.containerTopOffset; const secondRow = hierarchicalGrid.dataRowList.toArray()[1]; // expand second row (secondRow.nativeElement.children[0] as HTMLElement).click(); @@ -182,8 +186,8 @@ describe('IgxHierarchicalGrid Virtualization #hGrid', () => { expect(hierarchicalGrid.verticalScrollContainer.state.startIndex).toEqual(startIndex); expect( - parseInt(GridFunctions.getGridDisplayContainer(fixture).nativeElement.style.top, 10) - - parseInt(topOffset, 10) + hierarchicalGrid.navigation.containerTopOffset - + topOffset ).toBeLessThanOrEqual(1); (secondRow.nativeElement.children[0] as HTMLElement).click(); @@ -192,8 +196,8 @@ describe('IgxHierarchicalGrid Virtualization #hGrid', () => { // collapse second row expect(hierarchicalGrid.verticalScrollContainer.state.startIndex).toEqual(startIndex); expect( - parseInt(GridFunctions.getGridDisplayContainer(fixture).nativeElement.style.top, 10) - - parseInt(topOffset, 10) + hierarchicalGrid.navigation.containerTopOffset - + topOffset ).toBeLessThanOrEqual(1); }); @@ -231,7 +235,7 @@ describe('IgxHierarchicalGrid Virtualization #hGrid', () => { await firstValueFrom(hierarchicalGrid.verticalScrollContainer.chunkLoad); fixture.detectChanges(); const startIndex = hierarchicalGrid.verticalScrollContainer.state.startIndex; - const topOffset = GridFunctions.getGridDisplayContainer(fixture).nativeElement.style.top; + const topOffset = hierarchicalGrid.navigation.containerTopOffset; const secondRow = hierarchicalGrid.rowList.toArray()[2]; // expand second row (secondRow.nativeElement.children[0] as HTMLElement).click(); @@ -240,8 +244,8 @@ describe('IgxHierarchicalGrid Virtualization #hGrid', () => { expect(hierarchicalGrid.verticalScrollContainer.state.startIndex).toEqual(startIndex); expect( - parseInt(GridFunctions.getGridDisplayContainer(fixture).nativeElement.style.top, 10) - - parseInt(topOffset, 10) + hierarchicalGrid.navigation.containerTopOffset - + topOffset ).toBeLessThanOrEqual(1); (secondRow.nativeElement.children[0] as HTMLElement).click(); @@ -250,8 +254,8 @@ describe('IgxHierarchicalGrid Virtualization #hGrid', () => { // collapse second row expect(hierarchicalGrid.verticalScrollContainer.state.startIndex).toEqual(startIndex); expect( - parseInt(GridFunctions.getGridDisplayContainer(fixture).nativeElement.style.top, 10) - - parseInt(topOffset, 10) + hierarchicalGrid.navigation.containerTopOffset - + topOffset ).toBeLessThanOrEqual(1); }); @@ -394,7 +398,7 @@ describe('IgxHierarchicalGrid Virtualization #hGrid', () => { elem.scrollTop = 400; fixture.detectChanges(); fixture.componentRef.hostView.detectChanges(); - await wait(); + await wait(60); fixture.detectChanges(); expect(ri.gridScroll.emit).toHaveBeenCalled(); diff --git a/projects/igniteui-angular/grids/tree-grid/src/tree-grid-keyBoardNav.spec.ts b/projects/igniteui-angular/grids/tree-grid/src/tree-grid-keyBoardNav.spec.ts index 26a57acba1e..d3b4718661e 100644 --- a/projects/igniteui-angular/grids/tree-grid/src/tree-grid-keyBoardNav.spec.ts +++ b/projects/igniteui-angular/grids/tree-grid/src/tree-grid-keyBoardNav.spec.ts @@ -9,8 +9,9 @@ import { GridFunctions } from '../../../test-utils/grid-functions.spec'; import { DebugElement } from '@angular/core'; import { firstValueFrom } from 'rxjs'; import { CellType } from 'igniteui-angular/grids/core'; +import { SCROLL_THROTTLE_TIME } from './../../grid/src/grid-base.directive'; -const DEBOUNCETIME = 30; +const DEBOUNCETIME = 60; describe('IgxTreeGrid - Key Board Navigation #tGrid', () => { beforeEach(waitForAsync(() => { @@ -396,6 +397,9 @@ describe('IgxTreeGrid - Key Board Navigation #tGrid', () => { const treeColumns = ['ID', 'Name', 'HireDate', 'Age', 'OnPTO']; beforeEach(() => { + TestBed.configureTestingModule({ + providers: [{ provide: SCROLL_THROTTLE_TIME, useValue: 0 }] + }); fix = TestBed.createComponent(IgxTreeGridWithScrollsComponent); fix.detectChanges(); treeGrid = fix.componentInstance.treeGrid; diff --git a/projects/igniteui-angular/grids/tree-grid/src/tree-grid-multi-cell-selection.spec.ts b/projects/igniteui-angular/grids/tree-grid/src/tree-grid-multi-cell-selection.spec.ts index ea22664eb2c..404bc18748c 100644 --- a/projects/igniteui-angular/grids/tree-grid/src/tree-grid-multi-cell-selection.spec.ts +++ b/projects/igniteui-angular/grids/tree-grid/src/tree-grid-multi-cell-selection.spec.ts @@ -11,6 +11,7 @@ import { UIInteractions, wait } from '../../../test-utils/ui-interactions.spec'; import { GridSelectionFunctions, GridSummaryFunctions, GridFunctions } from '../../../test-utils/grid-functions.spec'; import { GridSelectionMode } from 'igniteui-angular/grids/core'; import { IgxStringFilteringOperand } from 'igniteui-angular/core'; +import { SCROLL_THROTTLE_TIME } from './../../grid/src/grid-base.directive'; describe('IgxTreeGrid - Multi Cell selection #tGrid', () => { @@ -32,6 +33,9 @@ describe('IgxTreeGrid - Multi Cell selection #tGrid', () => { let detect; beforeEach(() => { + TestBed.configureTestingModule({ + providers: [{ provide: SCROLL_THROTTLE_TIME, useValue: 1 }] + }); fix = TestBed.createComponent(IgxTreeGridSelectionKeyComponent); fix.detectChanges(); treeGrid = fix.componentInstance.treeGrid; @@ -223,7 +227,7 @@ describe('IgxTreeGrid - Multi Cell selection #tGrid', () => { for (let i = 9; i < 14; i++) { cell = treeGrid.gridAPI.get_cell_by_index(i, 'Age'); UIInteractions.triggerKeyDownEvtUponElem('arrowdown', cell.nativeElement, true, false, true); - await wait(30); + await wait(100); fix.detectChanges(); } @@ -232,7 +236,7 @@ describe('IgxTreeGrid - Multi Cell selection #tGrid', () => { cell = treeGrid.gridAPI.get_cell_by_index(14, 'Age'); UIInteractions.triggerKeyDownEvtUponElem('arrowright', cell.nativeElement, true, false, true); - await wait(30); + await wait(60); fix.detectChanges(); expect(selectionChangeSpy).toHaveBeenCalledTimes(6); @@ -240,7 +244,7 @@ describe('IgxTreeGrid - Multi Cell selection #tGrid', () => { cell = treeGrid.gridAPI.get_cell_by_index(14, 'OnPTO'); UIInteractions.triggerKeyDownEvtUponElem('arrowright', cell.nativeElement, true, false, true); - await wait(30); + await wait(60); fix.detectChanges(); expect(selectionChangeSpy).toHaveBeenCalledTimes(7); @@ -249,7 +253,7 @@ describe('IgxTreeGrid - Multi Cell selection #tGrid', () => { for (let i = 14; i > 3; i--) { cell = treeGrid.gridAPI.get_cell_by_index(i, 'HireDate'); UIInteractions.triggerKeyDownEvtUponElem('arrowup', cell.nativeElement, true, false, true); - await wait(30); + await wait(100); fix.detectChanges(); } @@ -259,7 +263,7 @@ describe('IgxTreeGrid - Multi Cell selection #tGrid', () => { for (let i = 4; i > 2; i--) { cell = treeGrid.gridAPI.get_cell_by_index(3, treeGrid.columnList.get(i).field); UIInteractions.triggerKeyDownEvtUponElem('arrowleft', cell.nativeElement, true, false, true); - await wait(30); + await wait(60); fix.detectChanges(); } @@ -385,7 +389,7 @@ describe('IgxTreeGrid - Multi Cell selection #tGrid', () => { .summaryCells.find(sCell => sCell.visibleColumnIndex === 1); } UIInteractions.triggerKeyDownEvtUponElem('arrowdown', cellObj.nativeElement, true, false, true); - await wait(30); + await wait(60); fix.detectChanges(); } @@ -396,7 +400,7 @@ describe('IgxTreeGrid - Multi Cell selection #tGrid', () => { const cellObject = treeGrid.summariesRowList.find(row => row.index === 16) .summaryCells.find(sCell => sCell.visibleColumnIndex === i); UIInteractions.triggerKeyDownEvtUponElem('arrowright', cellObject.nativeElement, true, false, true); - await wait(30); + await wait(60); fix.detectChanges(); } @@ -405,7 +409,7 @@ describe('IgxTreeGrid - Multi Cell selection #tGrid', () => { const summaryCell = treeGrid.summariesRowList.find(row => row.index === 16) .summaryCells.find(sCell => sCell.visibleColumnIndex === 3); UIInteractions.triggerKeyDownEvtUponElem('arrowup', summaryCell.nativeElement, true, false, true); - await wait(30); + await wait(60); fix.detectChanges(); expect(selectionChangeSpy).toHaveBeenCalledTimes(6); GridSelectionFunctions.verifySelectedRange(treeGrid, 8, 15, 1, 3); @@ -425,7 +429,7 @@ describe('IgxTreeGrid - Multi Cell selection #tGrid', () => { const gridContent = GridFunctions.getGridContent(fix); for (let i = 8; i < 16; i++) { UIInteractions.triggerEventHandlerKeyDown('arrowdown', gridContent, false, true); - await wait(30); + await wait(100); fix.detectChanges(); } @@ -433,7 +437,7 @@ describe('IgxTreeGrid - Multi Cell selection #tGrid', () => { GridSelectionFunctions.verifyCellsRegionSelected(treeGrid, 8, 15, 1, 1); UIInteractions.triggerEventHandlerKeyDown('arrowdown', gridContent); - await wait(30); + await wait(60); fix.detectChanges(); GridSelectionFunctions.verifySelectedRange(treeGrid, 17, 17, 1, 1); @@ -556,6 +560,9 @@ describe('IgxTreeGrid - Multi Cell selection #tGrid', () => { let detect; beforeEach(() => { + TestBed.configureTestingModule({ + providers: [{ provide: SCROLL_THROTTLE_TIME, useValue: 0 }] + }); fix = TestBed.createComponent(IgxTreeGridSelectionComponent); fix.detectChanges(); treeGrid = fix.componentInstance.treeGrid; @@ -668,6 +675,9 @@ describe('IgxTreeGrid - Multi Cell selection #tGrid', () => { let treeGrid; beforeEach(() => { + TestBed.configureTestingModule({ + providers: [{ provide: SCROLL_THROTTLE_TIME, useValue: 0 }] + }); fix = TestBed.createComponent(IgxTreeGridSelectionWithTransactionComponent); fix.detectChanges(); treeGrid = fix.componentInstance.treeGrid; @@ -798,6 +808,9 @@ describe('IgxTreeGrid - Multi Cell selection #tGrid', () => { let treeGrid; beforeEach(() => { + TestBed.configureTestingModule({ + providers: [{ provide: SCROLL_THROTTLE_TIME, useValue: 0 }] + }); fix = TestBed.createComponent(IgxTreeGridFKeySelectionWithTransactionComponent); fix.detectChanges(); treeGrid = fix.componentInstance.treeGrid; diff --git a/projects/igniteui-angular/grids/tree-grid/src/tree-grid-search.spec.ts b/projects/igniteui-angular/grids/tree-grid/src/tree-grid-search.spec.ts index a9cfd4007e9..1be5a638a49 100644 --- a/projects/igniteui-angular/grids/tree-grid/src/tree-grid-search.spec.ts +++ b/projects/igniteui-angular/grids/tree-grid/src/tree-grid-search.spec.ts @@ -326,7 +326,7 @@ describe('IgxTreeGrid - search API #tGrid', () => { for (let i = 0; i < 14; i++) { const expectedValue = expectedValues[i % expectedValues.length]; const actualCount = treeGrid.findNext('an'); - await wait(50); + await wait(60); fix.detectChanges(); expect(actualCount).toBe(expectedValues.length); verifyActiveCellValue(fixNativeElement, expectedValue); @@ -337,7 +337,7 @@ describe('IgxTreeGrid - search API #tGrid', () => { for (let i = 13; i >= 0; i--) { const expectedValue = expectedValues[i % expectedValues.length]; const actualCount = treeGrid.findPrev('an'); - await wait(50); + await wait(60); fix.detectChanges(); expect(actualCount).toBe(expectedValues.length); verifyActiveCellValue(fixNativeElement, expectedValue); diff --git a/projects/igniteui-angular/grids/tree-grid/src/tree-grid-summaries.spec.ts b/projects/igniteui-angular/grids/tree-grid/src/tree-grid-summaries.spec.ts index bd5777ceb4e..b27b063dbd7 100644 --- a/projects/igniteui-angular/grids/tree-grid/src/tree-grid-summaries.spec.ts +++ b/projects/igniteui-angular/grids/tree-grid/src/tree-grid-summaries.spec.ts @@ -15,6 +15,7 @@ import { DebugElement } from '@angular/core'; import { IgxTreeGridComponent } from './tree-grid.component'; import { IgxSummaryRow, IgxTreeGridRow } from 'igniteui-angular/grids/core'; import { IgxNumberFilteringOperand } from 'igniteui-angular/core'; +import { SCROLL_THROTTLE_TIME } from './../../grid/src/grid-base.directive'; describe('IgxTreeGrid - Summaries #tGrid', () => { const DEBOUNCETIME = 30; @@ -33,6 +34,12 @@ describe('IgxTreeGrid - Summaries #tGrid', () => { }).compileComponents(); })); + beforeEach(waitForAsync(() => { + TestBed.configureTestingModule({ + providers: [{ provide: SCROLL_THROTTLE_TIME, useValue: 0 }] + }); + })); + describe('', () => { let fix; let treeGrid: IgxTreeGridComponent; @@ -1706,7 +1713,7 @@ describe('IgxTreeGrid - Summaries #tGrid', () => { fix.detectChanges(); (treeGrid as any).scrollTo(23, 0, 0); fix.detectChanges(); - await wait(30); + await wait(60); fix.detectChanges(); let row = treeGrid.getRowByKey(15); diff --git a/projects/igniteui-angular/simple-combo/src/simple-combo/simple-combo.component.spec.ts b/projects/igniteui-angular/simple-combo/src/simple-combo/simple-combo.component.spec.ts index 1030bcc7ab5..ccb9d19a1d8 100644 --- a/projects/igniteui-angular/simple-combo/src/simple-combo/simple-combo.component.spec.ts +++ b/projects/igniteui-angular/simple-combo/src/simple-combo/simple-combo.component.spec.ts @@ -2803,7 +2803,7 @@ describe('IgxSimpleCombo', () => { try { // combo should not throw from the selection getter at this point grid.navigateTo(fixture.componentInstance.data.length - 1, 0); - await wait(30); + await wait(60); fixture.detectChanges(); } catch (error) { fail(`Test failed with error: ${error}`)