Skip to content

Commit ab6bccc

Browse files
viktorkombovviktorkombov
committed
test(grids): align zone tests with deferred render callbacks
1 parent 82469ee commit ab6bccc

19 files changed

Lines changed: 232 additions & 2330 deletions

‎projects/igniteui-angular-elements/src/app/custom-strategy.spec.ts‎

Lines changed: 4 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import { IgxActionStripComponent, IgxColumnComponent, IgxGridComponent, IgxHierarchicalGridComponent } from 'igniteui-angular';
22
import { html } from 'lit';
3-
import { filter, firstValueFrom, fromEvent, skip, timer } from 'rxjs';
3+
import { firstValueFrom, fromEvent, skip, timer } from 'rxjs';
44
import { ComponentRefKey, IgcNgElement } from './custom-strategy';
55
import hgridData from '../assets/data/projects-hgrid.js';
66
import { SampleTestData } from 'igniteui-angular/test-utils/sample-test-data.spec';
@@ -19,12 +19,6 @@ import { defineComponents } from '../utils/register';
1919

2020
describe('Elements: ', () => {
2121
let testContainer: HTMLDivElement;
22-
const waitForChildrenResolved = async (element: IgcNgElement, predicate: () => boolean = () => true) => {
23-
if (predicate()) {
24-
return;
25-
}
26-
await firstValueFrom(fromEvent(element, 'childrenResolved').pipe(filter(() => predicate())));
27-
};
2822

2923
beforeAll(async () =>{
3024
defineComponents(
@@ -212,7 +206,7 @@ describe('Elements: ', () => {
212206
testContainer.innerHTML = innerHtml;
213207
const grid = document.querySelector<IgcNgElement & InstanceType<typeof IgcGridComponent>>('#testGrid');
214208

215-
await waitForChildrenResolved(grid, () => grid.columns.length === 8);
209+
await firstValueFrom(fromEvent(grid, "childrenResolved"));
216210

217211
const thirdGroup = document.querySelector<IgcNgElement>('igc-column-layout[header="Product Stock"]');
218212
const secondGroup = document.querySelector<IgcNgElement>('igc-column-layout[header="Product Details"]');
@@ -221,9 +215,8 @@ describe('Elements: ', () => {
221215
expect(grid.getColumnByName('ProductID')).toBeTruthy();
222216
expect(grid.getColumnByVisibleIndex(1).field).toEqual('ProductName');
223217

224-
const columnsRemoved = waitForChildrenResolved(grid, () => grid.columns.length === 4);
225218
grid.removeChild(secondGroup);
226-
await columnsRemoved;
219+
await firstValueFrom(fromEvent(grid, "childrenResolved"));
227220

228221
expect(grid.columns.length).toEqual(4);
229222
expect(grid.getColumnByName('ProductID')).toBeTruthy();
@@ -234,9 +227,8 @@ describe('Elements: ', () => {
234227
const newColumn = document.createElement('igc-column');
235228
newColumn.setAttribute('field', 'ProductName');
236229
newGroup.appendChild(newColumn);
237-
const columnsInserted = waitForChildrenResolved(grid, () => grid.columns.length === 6);
238230
grid.insertBefore(newGroup, thirdGroup);
239-
await columnsInserted;
231+
await firstValueFrom(fromEvent(grid, "childrenResolved"));
240232

241233
expect(grid.columns.length).toEqual(6);
242234
expect(grid.getColumnByVisibleIndex(1).field).toEqual('ProductName');

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

Lines changed: 1 addition & 40 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import { AsyncPipe, NgClass, NgForOfContext } from '@angular/common';
2-
import { AfterViewInit, ChangeDetectorRef, Component, Directive, Injectable, IterableDiffers, NgZone, OnInit, QueryList, TemplateRef, ViewChild, ViewChildren, ViewContainerRef, DebugElement, Pipe, PipeTransform, inject, ChangeDetectionStrategy, provideZonelessChangeDetection } from '@angular/core';
2+
import { AfterViewInit, ChangeDetectorRef, Component, Directive, Injectable, IterableDiffers, NgZone, OnInit, QueryList, TemplateRef, ViewChild, ViewChildren, ViewContainerRef, DebugElement, Pipe, PipeTransform, inject, ChangeDetectionStrategy } from '@angular/core';
33
import { TestBed, ComponentFixture, waitForAsync } from '@angular/core/testing';
44
import { By } from '@angular/platform-browser';
55
import { BehaviorSubject, Observable } from 'rxjs';
@@ -990,45 +990,6 @@ describe('IgxForOf directive -', () => {
990990
});
991991
});
992992

993-
describe('zoneless change detection', () => {
994-
it('should recalculate vertical sizes after scroll without relying on NgZone.onStable', async () => {
995-
TestBed.configureTestingModule({
996-
imports: [VerticalVirtualComponent],
997-
providers: [provideZonelessChangeDetection()]
998-
});
999-
const fix = TestBed.createComponent(VerticalVirtualComponent);
1000-
dg.generateData(300, 5, fix.componentInstance);
1001-
fix.componentRef.hostView.detectChanges();
1002-
fix.detectChanges();
1003-
1004-
const recalcSpy = spyOn(fix.componentInstance.parentVirtDir, 'recalcUpdateSizes').and.callThrough();
1005-
1006-
fix.componentInstance.scrollTop(100);
1007-
await fix.whenStable();
1008-
1009-
expect(recalcSpy).toHaveBeenCalled();
1010-
});
1011-
1012-
it('should recalculate horizontal sizes after scroll without relying on NgZone.onStable', async () => {
1013-
TestBed.configureTestingModule({
1014-
imports: [HorizontalVirtualComponent],
1015-
providers: [provideZonelessChangeDetection()]
1016-
});
1017-
const fix = TestBed.createComponent(HorizontalVirtualComponent);
1018-
dg.generateData(300, 5, fix.componentInstance);
1019-
fix.componentRef.hostView.detectChanges();
1020-
fix.detectChanges();
1021-
1022-
const horizontalDir = fix.componentInstance.childVirtDirs.first;
1023-
const recalcSpy = spyOn(horizontalDir, 'recalcUpdateSizes').and.callThrough();
1024-
1025-
fix.componentInstance.scrollLeft(150);
1026-
await fix.whenStable();
1027-
1028-
expect(recalcSpy).toHaveBeenCalled();
1029-
});
1030-
});
1031-
1032993
describe('variable size component', () => {
1033994
beforeEach(waitForAsync(() => {
1034995
TestBed.configureTestingModule({

‎projects/igniteui-angular/grids/grid/src/column-group.spec.ts‎

Lines changed: 2 additions & 32 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import { TestBed, ComponentFixture, waitForAsync, fakeAsync, tick } from '@angular/core/testing';
22
import { IgxGridComponent } from './grid.component';
3-
import { DebugElement, QueryList, provideZonelessChangeDetection } from '@angular/core';
3+
import { DebugElement, QueryList } from '@angular/core';
44
import { NoopAnimationsModule } from '@angular/platform-browser/animations';
55
import { IgxColumnComponent } from 'igniteui-angular/grids/core';
66
import { IgxColumnGroupComponent } from 'igniteui-angular/grids/core';
@@ -1764,37 +1764,6 @@ describe('IgxGrid - multi-column headers #grid', () => {
17641764
expect(firstGroupedRow.records.length).toEqual(6);
17651765
});
17661766
});
1767-
describe('Columns widths tests in zoneless change detection (1 group 3 columns) ', () => {
1768-
beforeEach(waitForAsync(() => {
1769-
TestBed.configureTestingModule({
1770-
providers: [provideZonelessChangeDetection()]
1771-
});
1772-
}));
1773-
1774-
it('Width should be correct. Column group with three columns. No width.', async () => {
1775-
fixture = TestBed.createComponent(OneGroupThreeColsGridComponent);
1776-
fixture.detectChanges();
1777-
await fixture.whenStable();
1778-
await wait(16);
1779-
await fixture.whenStable();
1780-
componentInstance = fixture.componentInstance;
1781-
grid = fixture.componentInstance.grid;
1782-
1783-
const scrWitdh = grid.nativeElement.querySelector('.igx-grid__tbody-scrollbar').getBoundingClientRect().width;
1784-
const availableWidth = parseInt(componentInstance.gridWrapperWidthPx, 10) - scrWitdh;
1785-
const locationColGroup = getColGroup(grid, 'Location');
1786-
const colWidth = availableWidth / 3;
1787-
const expectWidthWithinPixel = (actualWidth: string, expectedWidth: number) =>
1788-
expect(Math.abs(parseFloat(actualWidth) - expectedWidth)).toBeLessThanOrEqual(1);
1789-
expectWidthWithinPixel(locationColGroup.width, availableWidth);
1790-
const countryColumn = grid.getColumnByName('Country');
1791-
expectWidthWithinPixel(countryColumn.width, colWidth);
1792-
const regionColumn = grid.getColumnByName('Region');
1793-
expectWidthWithinPixel(regionColumn.width, colWidth);
1794-
const cityColumn = grid.getColumnByName('City');
1795-
expectWidthWithinPixel(cityColumn.width, colWidth);
1796-
});
1797-
});
17981767
});
17991768

18001769
const getColGroup = (grid: IgxGridComponent, headerName: string): IgxColumnGroupComponent => {
@@ -1940,3 +1909,4 @@ class NestedColGroupsTests {
19401909
'slaveColGroup', masterColGroupChildrenCount);
19411910
}
19421911
}
1912+

‎projects/igniteui-angular/grids/grid/src/column.spec.ts‎

Lines changed: 7 additions & 69 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import { Component, DebugElement, TemplateRef, ViewChild, ChangeDetectionStrategy, provideZonelessChangeDetection } from '@angular/core';
1+
import { Component, DebugElement, TemplateRef, ViewChild, ChangeDetectionStrategy } from '@angular/core';
22
import { TestBed, fakeAsync, tick, waitForAsync, ComponentFixture } from '@angular/core/testing';
33
import { By } from '@angular/platform-browser';
44
import { getLocaleCurrencySymbol, registerLocaleData } from '@angular/common';
@@ -1162,7 +1162,7 @@ describe('IgxGrid - Column properties #grid', () => {
11621162
receiveTimeColumn.editorOptions = { dateTimeFormat: 'h-mm-ss aaaaa' };
11631163
fix.detectChanges();
11641164

1165-
producedDateColumn._cells[0].setEditMode(true);
1165+
producedDateColumn._cells[0].setEditMode(true)
11661166
fix.detectChanges();
11671167
tick();
11681168

@@ -1174,7 +1174,7 @@ describe('IgxGrid - Column properties #grid', () => {
11741174

11751175
expect((dateTimeEditor.nativeElement as any).value).toEqual('2014-10-01');
11761176

1177-
orderDateColumn._cells[0].setEditMode(true);
1177+
orderDateColumn._cells[0].setEditMode(true)
11781178
fix.detectChanges();
11791179
tick();
11801180

@@ -1186,7 +1186,7 @@ describe('IgxGrid - Column properties #grid', () => {
11861186

11871187
expect((dateTimeEditor.nativeElement as any).value).toEqual('2015--10--01');
11881188

1189-
receiveTimeColumn._cells[0].setEditMode(true);
1189+
receiveTimeColumn._cells[0].setEditMode(true)
11901190
fix.detectChanges();
11911191
tick();
11921192

@@ -1338,7 +1338,7 @@ describe('IgxGrid - Column properties #grid', () => {
13381338
};
13391339
fix.detectChanges();
13401340

1341-
producedDateColumn._cells[0].setEditMode(true);
1341+
producedDateColumn._cells[0].setEditMode(true)
13421342
fix.detectChanges();
13431343

13441344
let inputDebugElement = fix.debugElement.query(By.directive(IgxInputDirective));
@@ -1349,7 +1349,7 @@ describe('IgxGrid - Column properties #grid', () => {
13491349

13501350
expect(dateTimeEditor.nativeElement.value).toEqual('10/01/2014');
13511351

1352-
orderDateColumn._cells[0].setEditMode(true);
1352+
orderDateColumn._cells[0].setEditMode(true)
13531353
fix.detectChanges();
13541354

13551355
inputDebugElement = fix.debugElement.query(By.directive(IgxInputDirective));
@@ -1360,7 +1360,7 @@ describe('IgxGrid - Column properties #grid', () => {
13601360

13611361
expect(dateTimeEditor.nativeElement.value.normalize('NFKC')).toEqual('10/01/2015, 11:37:22 AM');
13621362

1363-
receiveTimeColumn._cells[0].setEditMode(true);
1363+
receiveTimeColumn._cells[0].setEditMode(true)
13641364
fix.detectChanges();
13651365

13661366
inputDebugElement = fix.debugElement.query(By.directive(IgxInputDirective));
@@ -1420,68 +1420,6 @@ describe('IgxGrid - Column properties #grid', () => {
14201420

14211421
});
14221422

1423-
describe('Date, DateTime and Time column tests in zoneless change detection', () => {
1424-
let grid: IgxGridComponent;
1425-
let fix: ComponentFixture<IgxGridDateTimeColumnComponent>;
1426-
1427-
beforeEach(() => {
1428-
TestBed.configureTestingModule({
1429-
providers: [provideZonelessChangeDetection()]
1430-
});
1431-
fix = TestBed.createComponent(IgxGridDateTimeColumnComponent);
1432-
fix.detectChanges();
1433-
1434-
grid = fix.componentInstance.grid;
1435-
});
1436-
1437-
it('Date/Time/DateTime: Use default locale format as inputFormat when editorOptions/pipeArgs formats are null/empty ', async () => {
1438-
const producedDateColumn = grid.getColumnByName('ProducedDate');
1439-
const orderDateColumn = grid.getColumnByName('OrderDate');
1440-
const receiveTimeColumn = grid.getColumnByName('ReceiveTime');
1441-
1442-
1443-
producedDateColumn.editorOptions = null;
1444-
orderDateColumn.editorOptions.dateTimeFormat = '';
1445-
receiveTimeColumn.pipeArgs = {
1446-
format: undefined
1447-
};
1448-
await fix.whenStable();
1449-
1450-
producedDateColumn._cells[0].setEditMode(true);
1451-
await fix.whenStable();
1452-
1453-
let inputDebugElement = fix.debugElement.query(By.directive(IgxInputDirective));
1454-
let dateTimeEditor = inputDebugElement.injector.get(IgxDateTimeEditorDirective);
1455-
dateTimeEditor.nativeElement.focus();
1456-
await wait(16);
1457-
await fix.whenStable();
1458-
1459-
expect(dateTimeEditor.nativeElement.value).toEqual('10/01/2014');
1460-
1461-
orderDateColumn._cells[0].setEditMode(true);
1462-
await fix.whenStable();
1463-
1464-
inputDebugElement = fix.debugElement.query(By.directive(IgxInputDirective));
1465-
dateTimeEditor = inputDebugElement.injector.get(IgxDateTimeEditorDirective);
1466-
dateTimeEditor.nativeElement.focus();
1467-
await wait(16);
1468-
await fix.whenStable();
1469-
1470-
expect(dateTimeEditor.nativeElement.value.normalize('NFKC')).toEqual('10/01/2015, 11:37:22 AM');
1471-
1472-
receiveTimeColumn._cells[0].setEditMode(true);
1473-
await fix.whenStable();
1474-
1475-
inputDebugElement = fix.debugElement.query(By.directive(IgxInputDirective));
1476-
dateTimeEditor = inputDebugElement.injector.get(IgxDateTimeEditorDirective);
1477-
dateTimeEditor.nativeElement.focus();
1478-
await wait(16);
1479-
await fix.whenStable();
1480-
1481-
expect(dateTimeEditor.nativeElement.value.normalize('NFKC')).toEqual('08:37 AM');
1482-
});
1483-
});
1484-
14851423
describe('Data type image column tests', () => {
14861424
let fix: ComponentFixture<IgxGridComponent>;
14871425
let grid: IgxGridComponent;

‎projects/igniteui-angular/grids/grid/src/grid-cell-selection.spec.ts‎

Lines changed: 8 additions & 57 deletions
Original file line numberDiff line numberDiff line change
@@ -10,11 +10,11 @@ import {
1010
IgxGridRowEditingWithoutEditableColumnsComponent
1111
} from '../../../test-utils/grid-samples.spec';
1212
import { UIInteractions, wait } from '../../../test-utils/ui-interactions.spec';
13-
import { clearGridSubs, setupGridScrollDetection, waitForGridScroll } from '../../../test-utils/helper-utils.spec';
13+
import { clearGridSubs, setupGridScrollDetection } from '../../../test-utils/helper-utils.spec';
1414
import { GridSelectionMode } from 'igniteui-angular/grids/core';
1515

1616
import { GridSelectionFunctions, GridFunctions } from '../../../test-utils/grid-functions.spec';
17-
import { DebugElement, provideZonelessChangeDetection } from '@angular/core';
17+
import { DebugElement } from '@angular/core';
1818
import { DropPosition } from 'igniteui-angular/grids/core';
1919
import { IgxGridGroupByRowComponent } from './groupby-row.component';
2020
import { DefaultSortingStrategy, IgxStringFilteringOperand, SortingDirection } from 'igniteui-angular/core';
@@ -1448,25 +1448,14 @@ describe('IgxGrid - Cell selection #grid', () => {
14481448
const selectionChangeSpy = spyOn<any>(grid.rangeSelected, 'emit').and.callThrough();
14491449

14501450
UIInteractions.simulateClickAndSelectEvent(firstCell);
1451-
await wait();
1452-
fix.detectChanges();
1453-
1454-
const verticalScroll = waitForGridScroll(fix, grid, 'vertical');
1455-
const horizontalScroll = waitForGridScroll(fix, grid, 'horizontal');
1456-
1457-
UIInteractions.triggerKeyDownEvtUponElem(
1458-
'end',
1459-
firstCell.nativeElement,
1460-
true,
1461-
false,
1462-
true,
1463-
true
1464-
);
1451+
await fix.whenStable();
14651452

1466-
await verticalScroll;
1467-
await horizontalScroll;
1453+
expect(selectionChangeSpy).toHaveBeenCalledTimes(0);
1454+
GridSelectionFunctions.verifyCellSelected(firstCell);
1455+
expect(grid.selectedCells.length).toBe(1);
14681456

1469-
// Render the final activation/selection state.
1457+
UIInteractions.triggerKeyDownEvtUponElem('end', firstCell.nativeElement, true, false, true, true);
1458+
await wait(200);
14701459
fix.detectChanges();
14711460

14721461
expect(selectionChangeSpy).toHaveBeenCalledTimes(1);
@@ -1747,44 +1736,6 @@ describe('IgxGrid - Cell selection #grid', () => {
17471736
}));
17481737
});
17491738

1750-
describe('Keyboard navigation in zoneless change detection', () => {
1751-
let fix: ComponentFixture<any>;
1752-
let grid;
1753-
1754-
beforeEach(() => {
1755-
TestBed.configureTestingModule({
1756-
providers: [
1757-
provideZonelessChangeDetection(),
1758-
{ provide: SCROLL_THROTTLE_TIME_MULTIPLIER, useValue: 0 }
1759-
]
1760-
});
1761-
fix = TestBed.createComponent(SelectionWithScrollsComponent);
1762-
fix.detectChanges();
1763-
grid = fix.componentInstance.grid;
1764-
});
1765-
1766-
it('Should handle Shift + Ctrl + End keys combination', (async () => {
1767-
const firstCell = grid.gridAPI.get_cell_by_index(2, 'ID');
1768-
const selectionChangeSpy = spyOn<any>(grid.rangeSelected, 'emit').and.callThrough();
1769-
1770-
UIInteractions.simulateClickAndSelectEvent(firstCell);
1771-
await wait();
1772-
await fix.whenStable();
1773-
1774-
expect(selectionChangeSpy).toHaveBeenCalledTimes(0);
1775-
GridSelectionFunctions.verifyCellSelected(firstCell);
1776-
expect(grid.selectedCells.length).toBe(1);
1777-
1778-
UIInteractions.triggerKeyDownEvtUponElem('end', firstCell.nativeElement, true, false, true, true);
1779-
await wait(200);
1780-
await fix.whenStable();
1781-
1782-
expect(selectionChangeSpy).toHaveBeenCalledTimes(1);
1783-
GridSelectionFunctions.verifySelectedRange(grid, 2, 7, 0, 5);
1784-
GridSelectionFunctions.verifyCellsRegionSelected(grid, 3, 7, 2, 5);
1785-
}));
1786-
});
1787-
17881739
describe('Features integration', () => {
17891740
let fix;
17901741
let grid;

0 commit comments

Comments
 (0)