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 79c847b1814..92f86cf8913 100644 --- a/projects/igniteui-angular/src/lib/grids/grid-base.directive.ts +++ b/projects/igniteui-angular/src/lib/grids/grid-base.directive.ts @@ -6220,12 +6220,14 @@ export abstract class IgxGridBaseDirective extends DisplayDensityBase implements * @hidden */ protected _moveColumns(from: IgxColumnComponent, to: IgxColumnComponent, pos: DropPosition) { - const list = this.columnList.toArray(); - this._reorderColumns(from, to, pos, list); - const newList = this._resetColumnList(list); - this.columnList.reset(newList); - this.columnList.notifyOnChanges(); - this._columns = this.columnList.toArray(); + Promise.resolve().then(() => { + const list = this.columnList.toArray(); + this._reorderColumns(from, to, pos, list); + const newList = this._resetColumnList(list); + this.columnList.reset(newList); + this.columnList.notifyOnChanges(); + this._columns = this.columnList.toArray(); + }); } /** diff --git a/projects/igniteui-angular/src/lib/grids/grid/column-group.spec.ts b/projects/igniteui-angular/src/lib/grids/grid/column-group.spec.ts index 8502e14f143..bc0987bd294 100644 --- a/projects/igniteui-angular/src/lib/grids/grid/column-group.spec.ts +++ b/projects/igniteui-angular/src/lib/grids/grid/column-group.spec.ts @@ -996,7 +996,7 @@ describe('IgxGrid - multi-column headers #grid', () => { expect(grid.getCellByColumn(0, 'City').value).toEqual('Berlin'); }); - it('Should pin column groups using indexes correctly.', () => { + it('Should pin column groups using indexes correctly.', fakeAsync(() => { fixture = TestBed.createComponent(StegosaurusGridComponent); fixture.detectChanges(); const ci = fixture.componentInstance; @@ -1018,6 +1018,7 @@ describe('IgxGrid - multi-column headers #grid', () => { // unpinning with index expect(grid.unpinColumn(ci.genInfoColGroup, 2)).toBe(true); + tick(); fixture.detectChanges(); const postUnpinningColList = [ci.idCol].concat(ci.postalCodeColList).concat(ci.cityColList) .concat(ci.countryColList).concat(ci.regionColList).concat(ci.genInfoColList) @@ -1027,18 +1028,21 @@ describe('IgxGrid - multi-column headers #grid', () => { // pinning to non-existent index expect(grid.pinColumn(ci.genInfoColGroup, 15)).toBe(false); + tick(); fixture.detectChanges(); testColumnsVisibleIndexes(postUnpinningColList); testColumnPinning(ci.genInfoColGroup, false); // pinning to negative index expect(grid.pinColumn(ci.genInfoColGroup, -15)).toBe(false); + tick(); fixture.detectChanges(); testColumnsVisibleIndexes(postUnpinningColList); testColumnPinning(ci.genInfoColGroup, false); // pinning with index expect(grid.pinColumn(ci.genInfoColGroup, 2)).toBe(true); + tick(); fixture.detectChanges(); const postPinningColList = [ci.idCol].concat(ci.postalCodeColList).concat(ci.genInfoColList) .concat(ci.cityColList).concat(ci.countryColList).concat(ci.regionColList) @@ -1048,14 +1052,18 @@ describe('IgxGrid - multi-column headers #grid', () => { // unpinning to non-existent index expect(grid.unpinColumn(ci.genInfoColGroup, 15)).toBe(false); + tick(); + fixture.detectChanges(); testColumnsVisibleIndexes(postPinningColList); testColumnPinning(ci.genInfoColGroup, true); // unpinning to negative index expect(grid.unpinColumn(ci.genInfoColGroup, -15)).toBe(false); + tick(); + fixture.detectChanges(); testColumnsVisibleIndexes(postPinningColList); testColumnPinning(ci.genInfoColGroup, true); - }); + })); it('Should initially pin the whole group when one column of the group is pinned', () => { fixture = TestBed.createComponent(ThreeGroupsThreeColumnsGridComponent); @@ -1074,7 +1082,7 @@ describe('IgxGrid - multi-column headers #grid', () => { grid = fixture.componentInstance.grid; })); - it('Should not allow moving group to another level via API.', () => { + it('Should not allow moving group to another level via API.', fakeAsync(() => { expect(grid.pinnedColumns.length).toEqual(0); expect(grid.unpinnedColumns.length).toEqual(16); expect(grid.rowList.first.cells.first.value).toMatch('ALFKI'); @@ -1095,6 +1103,7 @@ describe('IgxGrid - multi-column headers #grid', () => { // Try to move a group column to pinned area, where there is non group column const contName = grid.getColumnByName('ContactName'); grid.moveColumn(contName, colID); + tick(); fixture.detectChanges(); // pinning should be unsuccesfull ! @@ -1123,18 +1132,22 @@ describe('IgxGrid - multi-column headers #grid', () => { const contTitle = grid.getColumnByName('ContactTitle'); grid.moveColumn(colID, genGroup); + tick(); + fixture.detectChanges(); grid.moveColumn(compName, persDetails); - grid.moveColumn(contName, contTitle); + tick(); fixture.detectChanges(); + grid.moveColumn(contName, contTitle); + tick(); fixture.detectChanges(); expect(grid.rowList.first.cells.first.value).toMatch('Sales Representative'); expect(grid.rowList.first.cells.toArray()[1].value).toMatch('Maria Anders'); expect(grid.rowList.first.cells.toArray()[2].value).toMatch('Alfreds Futterkiste'); expect(grid.rowList.first.cells.toArray()[3].value).toMatch('ALFKI'); - }); + })); - it('Should move column group correctly. One level column groups.', () => { + it('Should move column group correctly. One level column groups.', fakeAsync(() => { fixture = TestBed.createComponent(ThreeGroupsThreeColumnsGridComponent); fixture.detectChanges(); const ci = fixture.componentInstance; @@ -1148,36 +1161,42 @@ describe('IgxGrid - multi-column headers #grid', () => { // moving last to be first grid.moveColumn(ci.contactInfoColGroup, ci.genInfoColGroup, DropPosition.BeforeDropTarget); + tick(); fixture.detectChanges(); testColumnsOrder(contactInfoCols.concat(genInfoCols).concat(locCols)); // moving first to be last grid.moveColumn(ci.contactInfoColGroup, ci.locationColGroup); + tick(); fixture.detectChanges(); testColumnsOrder(genInfoCols.concat(locCols).concat(contactInfoCols)); // moving inner to be last grid.moveColumn(ci.locationColGroup, ci.contactInfoColGroup); + tick(); fixture.detectChanges(); testColumnsOrder(genInfoCols.concat(contactInfoCols).concat(locCols)); // moving inner to be first grid.moveColumn(ci.contactInfoColGroup, ci.genInfoColGroup, DropPosition.BeforeDropTarget); + tick(); fixture.detectChanges(); testColumnsOrder(contactInfoCols.concat(genInfoCols).concat(locCols)); // moving to the same spot, no change expected grid.moveColumn(ci.genInfoColGroup, ci.genInfoColGroup); + tick(); fixture.detectChanges(); testColumnsOrder(contactInfoCols.concat(genInfoCols).concat(locCols)); // moving column group to the place of a column, no change expected grid.moveColumn(ci.genInfoColGroup, ci.countryCol); + tick(); fixture.detectChanges(); testColumnsOrder(contactInfoCols.concat(genInfoCols).concat(locCols)); - }); + })); - it('Should move columns within column groups. One level column groups.', () => { + it('Should move columns within column groups. One level column groups.', fakeAsync(() => { fixture = TestBed.createComponent(ThreeGroupsThreeColumnsGridComponent); fixture.detectChanges(); const ci = fixture.componentInstance; @@ -1188,48 +1207,55 @@ describe('IgxGrid - multi-column headers #grid', () => { // moving last to be first grid.moveColumn(ci.postalCodeCol, ci.phoneCol, DropPosition.BeforeDropTarget); + tick(); fixture.detectChanges(); testColumnsOrder(genInfoAndLocCols.concat([ci.contactInfoColGroup, ci.postalCodeCol, ci.phoneCol, ci.faxCol])); // moving first to be last grid.moveColumn(ci.postalCodeCol, ci.faxCol); + tick(); fixture.detectChanges(); testColumnsOrder(genInfoAndLocCols.concat([ci.contactInfoColGroup, ci.phoneCol, ci.faxCol, ci.postalCodeCol])); // moving inner to be last grid.moveColumn(ci.faxCol, ci.postalCodeCol); + tick(); fixture.detectChanges(); testColumnsOrder(genInfoAndLocCols.concat([ci.contactInfoColGroup, ci.phoneCol, ci.postalCodeCol, ci.faxCol])); // moving inner to be first grid.moveColumn(ci.postalCodeCol, ci.phoneCol, DropPosition.BeforeDropTarget); + tick(); fixture.detectChanges(); testColumnsOrder(genInfoAndLocCols.concat([ci.contactInfoColGroup, ci.postalCodeCol, ci.phoneCol, ci.faxCol])); // moving to the sample spot, no change expected grid.moveColumn(ci.postalCodeCol, ci.postalCodeCol); + tick(); fixture.detectChanges(); testColumnsOrder(genInfoAndLocCols.concat([ci.contactInfoColGroup, ci.postalCodeCol, ci.phoneCol, ci.faxCol])); // moving column to the place of its column group, no change expected grid.moveColumn(ci.postalCodeCol, ci.contactInfoColGroup); + tick(); fixture.detectChanges(); testColumnsOrder(genInfoAndLocCols.concat([ci.contactInfoColGroup, ci.postalCodeCol, ci.phoneCol, ci.faxCol])); //// moving column to the place of a column group, no change expected grid.moveColumn(ci.postalCodeCol, ci.genInfoColGroup); + tick(); fixture.detectChanges(); testColumnsOrder(genInfoAndLocCols.concat([ci.contactInfoColGroup, ci.postalCodeCol, ci.phoneCol, ci.faxCol])); - }); + })); - it('Should move columns and groups. Two level column groups.', () => { + it('Should move columns and groups. Two level column groups.', fakeAsync(() => { fixture = TestBed.createComponent(NestedColGroupsGridComponent); fixture.detectChanges(); const ci = fixture.componentInstance; @@ -1237,12 +1263,14 @@ describe('IgxGrid - multi-column headers #grid', () => { // moving a two-level col grid.moveColumn(ci.phoneCol, ci.locationColGroup, DropPosition.BeforeDropTarget); + tick(); fixture.detectChanges(); testColumnsOrder([ci.contactInfoColGroup, ci.phoneCol, ci.locationColGroup, ci.countryCol, ci.genInfoColGroup, ci.companyNameCol, ci.cityCol]); // moving a three-level col grid.moveColumn(ci.cityCol, ci.contactInfoColGroup, DropPosition.BeforeDropTarget); + tick(); fixture.detectChanges(); const colsOrder = [ci.cityCol, ci.contactInfoColGroup, ci.phoneCol, ci.locationColGroup, ci.countryCol, ci.genInfoColGroup, ci.companyNameCol]; @@ -1250,28 +1278,34 @@ describe('IgxGrid - multi-column headers #grid', () => { // moving between different groups, hould stay the same grid.moveColumn(ci.locationColGroup, ci.companyNameCol); + tick(); fixture.detectChanges(); testColumnsOrder(colsOrder); // moving between different levels, should stay the same grid.moveColumn(ci.countryCol, ci.phoneCol); + tick(); + fixture.detectChanges(); testColumnsOrder(colsOrder); // moving between different levels, should stay the same grid.moveColumn(ci.cityCol, ci.phoneCol); + tick(); fixture.detectChanges(); testColumnsOrder(colsOrder); grid.moveColumn(ci.genInfoColGroup, ci.companyNameCol); + tick(); fixture.detectChanges(); testColumnsOrder(colsOrder); grid.moveColumn(ci.locationColGroup, ci.contactInfoColGroup); + tick(); fixture.detectChanges(); testColumnsOrder(colsOrder); - }); + })); - it('Should move columns and groups. Pinning enabled.', () => { + it('Should move columns and groups. Pinning enabled.', fakeAsync(() => { fixture = TestBed.createComponent(StegosaurusGridComponent); fixture.detectChanges(); const ci = fixture.componentInstance; @@ -1287,6 +1321,7 @@ describe('IgxGrid - multi-column headers #grid', () => { // moving group from unpinned to pinned ci.grid.moveColumn(ci.phoneColGroup, ci.idCol, DropPosition.BeforeDropTarget); + tick(); fixture.detectChanges(); let postMovingOrder = ci.phoneColList.concat([ci.idCol]).concat(ci.genInfoColList) .concat(ci.postalCodeColList).concat(ci.cityColList).concat(ci.countryColList) @@ -1297,6 +1332,7 @@ describe('IgxGrid - multi-column headers #grid', () => { // moving sub group to different parent, should not be allowed ci.grid.moveColumn(ci.pDetailsColGroup, ci.regionCol); + tick(); fixture.detectChanges(); testColumnsVisibleIndexes(postMovingOrder); testColumnPinning(ci.pDetailsColGroup, true); @@ -1304,6 +1340,7 @@ describe('IgxGrid - multi-column headers #grid', () => { // moving pinned group as firstly unpinned ci.grid.moveColumn(ci.idCol, ci.cityColGroup); + tick(); fixture.detectChanges(); ci.idCol.pinned = false; fixture.detectChanges(); @@ -1317,11 +1354,12 @@ describe('IgxGrid - multi-column headers #grid', () => { // moving column to different parent, shound not be allowed ci.grid.moveColumn(ci.postalCodeCol, ci.cityCol); + tick(); fixture.detectChanges(); testColumnsVisibleIndexes(postMovingOrder); testColumnPinning(ci.postalCodeCol, true); testColumnPinning(ci.cityCol, true); - }); + })); }); describe('Features integration tests: ', () => { diff --git a/projects/igniteui-angular/src/lib/grids/grid/column-moving.spec.ts b/projects/igniteui-angular/src/lib/grids/grid/column-moving.spec.ts index 003a8904a82..ae74b1b7f8f 100644 --- a/projects/igniteui-angular/src/lib/grids/grid/column-moving.spec.ts +++ b/projects/igniteui-angular/src/lib/grids/grid/column-moving.spec.ts @@ -1,5 +1,5 @@ import { DebugElement } from '@angular/core'; -import { TestBed, fakeAsync } from '@angular/core/testing'; +import { TestBed, fakeAsync, tick } from '@angular/core/testing'; import { FormsModule } from '@angular/forms'; import { By } from '@angular/platform-browser'; import { NoopAnimationsModule } from '@angular/platform-browser/animations'; @@ -51,28 +51,30 @@ describe('IgxGrid - Column Moving #grid', () => { grid.moving = true; })); - it('Should be able to reorder columns.', (() => { + it('Should be able to reorder columns.', fakeAsync(() => { let columnsList = grid.columnList; grid.moveColumn(columnsList.get(0), columnsList.get(2)); - + tick(); + fixture.detectChanges(); expect(columnsList.get(0).field).toEqual('Name'); expect(columnsList.get(1).field).toEqual('LastName'); expect(columnsList.get(2).field).toEqual('ID'); })); - it('Should be able to reorder columns programmatically.', () => { + it('Should be able to reorder columns programmatically.', fakeAsync(() => { let columnsList = grid.columnList; const column = columnsList.get(0) as IgxColumnComponent; column.move(2); + tick(); fixture.detectChanges(); columnsList = grid.columnList; expect(columnsList.get(0).field).toEqual('Name'); expect(columnsList.get(1).field).toEqual('LastName'); expect(columnsList.get(2).field).toEqual('ID'); - }); + })); - it('Should not reorder columns, if passed incorrect index.', () => { + it('Should not reorder columns, if passed incorrect index.', fakeAsync(() => { let columnsList = grid.columnList; expect(columnsList.get(0).field).toEqual('ID'); @@ -81,6 +83,7 @@ describe('IgxGrid - Column Moving #grid', () => { const column = columnsList.get(0) as IgxColumnComponent; column.move(-1); + tick(); fixture.detectChanges(); columnsList = grid.columnList; @@ -89,15 +92,16 @@ describe('IgxGrid - Column Moving #grid', () => { expect(columnsList.get(2).field).toEqual('LastName'); column.move(columnsList.length); + tick(); fixture.detectChanges(); columnsList = grid.columnList; expect(columnsList.get(0).field).toEqual('ID'); expect(columnsList.get(1).field).toEqual('Name'); expect(columnsList.get(2).field).toEqual('LastName'); - }); + })); - it('Should show hidden column on correct index', () => { + it('Should show hidden column on correct index', fakeAsync(() => { let columnsList = grid.columnList; const column = columnsList.get(0) as IgxColumnComponent; @@ -105,6 +109,7 @@ describe('IgxGrid - Column Moving #grid', () => { fixture.detectChanges(); column.move(2); + tick(); column.hidden = false; fixture.detectChanges(); @@ -112,23 +117,25 @@ describe('IgxGrid - Column Moving #grid', () => { expect(columnsList.get(0).field).toEqual('Name'); expect(columnsList.get(1).field).toEqual('LastName'); expect(columnsList.get(2).field).toEqual('ID'); - }); + })); - it('Should fire columnMovingEnd with correct values of event arguments.', () => { + it('Should fire columnMovingEnd with correct values of event arguments.', fakeAsync(() => { let columnsList = grid.columnList; const column = columnsList.get(0) as IgxColumnComponent; spyOn(grid.columnMovingEnd, 'emit').and.callThrough(); column.move(2); + tick(); + fixture.detectChanges(); columnsList = grid.columnList; const args = { source: grid.columnList.get(2), target: grid.columnList.get(1), cancel: false }; expect(grid.columnMovingEnd.emit).toHaveBeenCalledTimes(1); expect(grid.columnMovingEnd.emit).toHaveBeenCalledWith(args); - }); + })); - it('Should exit edit mode and commit the new value when column moving programmatically', () => { + it('Should exit edit mode and commit the new value when column moving programmatically', fakeAsync(() => { fixture.componentInstance.isEditable = true; fixture.detectChanges(); const cacheValue = grid.getCellByColumn(0, 'ID').value; @@ -152,15 +159,16 @@ describe('IgxGrid - Column Moving #grid', () => { const columnsList = grid.columnList; const column = columnsList.get(0) as IgxColumnComponent; column.move(2); + tick(); fixture.detectChanges(); // step 4 - verify cell has exited edit mode correctly expect(grid.columnList.get(2).field).toEqual('ID'); expect(grid.getCellByColumn(0, 'ID').editMode).toBe(false); expect(grid.getCellByColumn(0, 'ID').value).toBe(cacheValue); - }); + })); - it('Should preserve hidden columns order after columns are reordered programmatically', () => { + it('Should preserve hidden columns order after columns are reordered programmatically', fakeAsync(() => { // step 1 - hide a column fixture.componentInstance.isHidden = true; @@ -171,6 +179,7 @@ describe('IgxGrid - Column Moving #grid', () => { const columnsList = grid.columnList; const column = columnsList.get(2) as IgxColumnComponent; column.move(1); + tick(); fixture.detectChanges(); @@ -184,7 +193,7 @@ describe('IgxGrid - Column Moving #grid', () => { expect(grid.visibleColumns[0].field).toEqual('ID'); expect(grid.visibleColumns[1].field).toEqual('Name'); expect(grid.visibleColumns[2].field).toEqual('LastName'); - }); + })); it('Should not break vertical or horizontal scrolling after columns are reordered programmatically', (async () => { let columnsList = grid.columnList; @@ -192,6 +201,7 @@ describe('IgxGrid - Column Moving #grid', () => { // step 1 - move a column const column = columnsList.get(1) as IgxColumnComponent; column.move(2); + await wait(); fixture.detectChanges(); columnsList = grid.columnList; @@ -227,6 +237,7 @@ describe('IgxGrid - Column Moving #grid', () => { // step 2 - move a column const column = columnsList.get(0) as IgxColumnComponent; column.move(2); + await wait(); fixture.detectChanges(); fixture.detectChanges(); @@ -248,6 +259,7 @@ describe('IgxGrid - Column Moving #grid', () => { const column = columnsList.get(0) as IgxColumnComponent; column.move(1); + await wait(); fixture.detectChanges(); columnsList = grid.columnList; @@ -896,6 +908,7 @@ describe('IgxGrid - Column Moving #grid', () => { // step 2 - move that column and verify selection is preserved const column = columnsList.get(0) as IgxColumnComponent; column.move(2); + await wait(); fixture.detectChanges(); columnsList = grid.columnList; @@ -996,6 +1009,7 @@ describe('IgxGrid - Column Moving #grid', () => { // step 1 - move a column const column = columnsList.get(0) as IgxColumnComponent; column.move(2); + await wait(); fixture.detectChanges(); // step 2 - navigate to page 2 and verify correct column order @@ -1071,6 +1085,7 @@ describe('IgxGrid - Column Moving #grid', () => { // step 2 - move that column const column = columnsList.get(0) as IgxColumnComponent; column.move(3); + await wait(); fixture.detectChanges(); fixture.detectChanges(); @@ -1115,6 +1130,7 @@ describe('IgxGrid - Column Moving #grid', () => { // step 2 - move a pinned column const column = grid.getColumnByName('ID'); column.move(2); + await wait(); fixture.detectChanges(); // step 3 - verify pinned columns are reordered correctly @@ -1214,6 +1230,7 @@ describe('IgxGrid - Column Moving #grid', () => { // step 2 - move that column and verify selection is preserved const column = columnsList.get(4) as IgxColumnComponent; column.move(2); + await wait(); fixture.detectChanges(); // step 3 - unpin that column programmatically and verify correct order @@ -1291,6 +1308,7 @@ describe('IgxGrid - Column Moving #grid', () => { // step 2 - move that column and verify selection is preserved const column = grid.getColumnByName('ContactName') as IgxColumnComponent; column.move(1); + await wait(); fixture.detectChanges(); // step 3 - verify column is still unpinned @@ -1356,6 +1374,7 @@ describe('IgxGrid - Column Moving #grid', () => { // step 2 - drag/drop a pinned column among unpinned columns const column = grid.getColumnByName('ID') as IgxColumnComponent; column.move(1); + await wait(); fixture.detectChanges(); // step 3 - verify column is unpinned at the correct place @@ -1429,6 +1448,7 @@ describe('IgxGrid - Column Moving #grid', () => { // step 1 - move level 0 column to first position let column = grid.getColumnByName('ID'); column.move(0); + await wait(); fixture.detectChanges(); let columnsList = grid.columnList.filter((col) => !(col instanceof IgxColumnGroupComponent)); @@ -1438,6 +1458,7 @@ describe('IgxGrid - Column Moving #grid', () => { // step 2 - try moving level 0 column into column group // not possible column.move(3); + await wait(); fixture.detectChanges(); columnsList = grid.columnList.filter((col) => !(col instanceof IgxColumnGroupComponent)); @@ -1448,6 +1469,7 @@ describe('IgxGrid - Column Moving #grid', () => { // step 3 - try moving level 0 column into column group // not possible column.move(5); + await wait(); fixture.detectChanges(); columnsList = grid.columnList.filter((col) => !(col instanceof IgxColumnGroupComponent)); @@ -1458,6 +1480,7 @@ describe('IgxGrid - Column Moving #grid', () => { // step 4 - try moving level 0 column between two column groups column.move(4); + await wait(); fixture.detectChanges(); columnsList = grid.columnList.filter((col) => !(col instanceof IgxColumnGroupComponent)); @@ -1469,6 +1492,7 @@ describe('IgxGrid - Column Moving #grid', () => { // step 5 - move level 0 column to last position column.move(8); + await wait(); fixture.detectChanges(); columnsList = grid.columnList.filter((col) => !(col instanceof IgxColumnGroupComponent)); @@ -1479,6 +1503,7 @@ describe('IgxGrid - Column Moving #grid', () => { // step 6 - move last column between two column groups column.move(4); + await wait(); fixture.detectChanges(); columnsList = grid.columnList.filter((col) => !(col instanceof IgxColumnGroupComponent)); @@ -1492,6 +1517,7 @@ describe('IgxGrid - Column Moving #grid', () => { // step 7 - move level 1 column in the group column = grid.getColumnByName('Address'); column.move(5); + await wait(); fixture.detectChanges(); columnsList = grid.columnList.filter((col) => !(col instanceof IgxColumnGroupComponent)); @@ -1501,6 +1527,7 @@ describe('IgxGrid - Column Moving #grid', () => { // step 8 - move level 1 column outside the group // not possible column.move(4); + await wait(); fixture.detectChanges(); columnsList = grid.columnList.filter((col) => !(col instanceof IgxColumnGroupComponent)); @@ -1511,6 +1538,7 @@ describe('IgxGrid - Column Moving #grid', () => { // step 9 - move level 2 column outsuide the group column = grid.getColumnByName('ContactName'); column.move(0); + await wait(); fixture.detectChanges(); columnsList = grid.columnList.filter((col) => !(col instanceof IgxColumnGroupComponent)); @@ -1522,6 +1550,7 @@ describe('IgxGrid - Column Moving #grid', () => { // step 10 - move level 2 column inside the group column = grid.getColumnByName('ContactTitle'); column.move(2); + await wait(); fixture.detectChanges(); columnsList = grid.columnList.filter((col) => !(col instanceof IgxColumnGroupComponent)); @@ -1533,6 +1562,7 @@ describe('IgxGrid - Column Moving #grid', () => { // step 11 - move level 2 column inside the group column = grid.getColumnByName('Missing'); column.move(8); + await wait(); fixture.detectChanges(); columnsList = grid.columnList.filter((col) => !(col instanceof IgxColumnGroupComponent)); @@ -1544,6 +1574,7 @@ describe('IgxGrid - Column Moving #grid', () => { column = grid.getColumnByName('CompanyName'); column.move(1); + await wait(); fixture.detectChanges(); expect(columnsList[0].field).toEqual('CompanyName'); @@ -1551,6 +1582,7 @@ describe('IgxGrid - Column Moving #grid', () => { expect(columnsList[2].field).toEqual('ContactName'); column.move(2); + await wait(); fixture.detectChanges(); columnsList = grid.columnList.filter((col) => !(col instanceof IgxColumnGroupComponent)); @@ -1562,6 +1594,7 @@ describe('IgxGrid - Column Moving #grid', () => { it('MCH - should not move group column to last position', (async () => { let column = grid.getColumnByName('Missing'); column.move(3); + await wait(); fixture.detectChanges(); let columnsList = grid.columnList.filter((col) => !(col instanceof IgxColumnGroupComponent)); @@ -1571,6 +1604,7 @@ describe('IgxGrid - Column Moving #grid', () => { column = grid.getColumnByName('CompanyName').topLevelParent; column.move(8); + await wait(); fixture.detectChanges(); columnsList = grid.columnList.filter((col) => !(col instanceof IgxColumnGroupComponent)); @@ -1583,6 +1617,7 @@ describe('IgxGrid - Column Moving #grid', () => { let column = grid.getColumnByName('Missing'); column.move(3); + await wait(); fixture.detectChanges(); let columnsList = grid.columnList.filter((col) => !(col instanceof IgxColumnGroupComponent)); @@ -1592,6 +1627,7 @@ describe('IgxGrid - Column Moving #grid', () => { column = grid.getColumnByName('CompanyName').topLevelParent; column.move(6); + await wait(); fixture.detectChanges(); columnsList = grid.columnList.filter((col) => !(col instanceof IgxColumnGroupComponent)); @@ -1611,6 +1647,7 @@ describe('IgxGrid - Column Moving #grid', () => { // step 1 - move level 0 column to first position const column = grid.getColumnByName('CompanyName'); column.move(8); + await wait(); fixture.detectChanges(); columnsList = grid.columnList.filter((col) => !(col instanceof IgxColumnGroupComponent)); diff --git a/projects/igniteui-angular/src/lib/grids/grid/column-selection.spec.ts b/projects/igniteui-angular/src/lib/grids/grid/column-selection.spec.ts index db5b48db39b..450de2e5511 100644 --- a/projects/igniteui-angular/src/lib/grids/grid/column-selection.spec.ts +++ b/projects/igniteui-angular/src/lib/grids/grid/column-selection.spec.ts @@ -1090,17 +1090,18 @@ describe('IgxGrid - Column Selection #grid', () => { GridSelectionFunctions.verifyColumnAndCellsSelected(colProductID); }); - it('Moving: Verify that when move a column, it stays selected', () => { + it('Moving: Verify that when move a column, it stays selected', fakeAsync(() => { colProductID.selected = true; fix.detectChanges(); grid.moveColumn(colProductID, colProductName); + tick(); fix.detectChanges(); GridSelectionFunctions.verifyColumnAndCellsSelected(colProductID); GridSelectionFunctions.verifyColumnAndCellsSelected(colProductName, false); expect(colProductID.visibleIndex).toEqual(1); - }); + })); it('Paging: Verify column stays selected when change page', fakeAsync(() => { colProductName.selected = true; diff --git a/projects/igniteui-angular/src/lib/grids/grid/column.spec.ts b/projects/igniteui-angular/src/lib/grids/grid/column.spec.ts index 3dcd6f488aa..a7158070563 100644 --- a/projects/igniteui-angular/src/lib/grids/grid/column.spec.ts +++ b/projects/igniteui-angular/src/lib/grids/grid/column.spec.ts @@ -160,7 +160,7 @@ describe('IgxGrid - Column properties #grid', () => { } }); - it('should reflect the column in the DOM based on its index', () => { + it('should reflect the column in the DOM based on its index', fakeAsync(() => { const fix = TestBed.createComponent(ColumnCellFormatterComponent); fix.detectChanges(); @@ -176,6 +176,7 @@ describe('IgxGrid - Column properties #grid', () => { // Swap columns grid.moveColumn(grid.columnList.first, grid.columnList.last); + tick(); fix.detectChanges(); expect(grid.columnList.first.field).toMatch('IsEmployed'); @@ -184,7 +185,7 @@ describe('IgxGrid - Column properties #grid', () => { headers = fix.debugElement.queryAll(By.css(COLUMN_HEADER_CLASS)); expect(headers[0].nativeElement.textContent).toMatch('IsEmployed'); expect(headers[1].nativeElement.textContent).toMatch('Name'); - }); + })); it('should support adding and removing columns through a declared iterable', fakeAsync(/** columnList.changes rAF */() => { const fix = TestBed.createComponent(ColumnsFromIterableComponent); diff --git a/projects/igniteui-angular/src/lib/grids/grid/grid-add-row.spec.ts b/projects/igniteui-angular/src/lib/grids/grid/grid-add-row.spec.ts index 1d03fe73928..dbd2450d6b6 100644 --- a/projects/igniteui-angular/src/lib/grids/grid/grid-add-row.spec.ts +++ b/projects/igniteui-angular/src/lib/grids/grid/grid-add-row.spec.ts @@ -1,6 +1,6 @@ import { IgxGridModule, IgxGridComponent } from './public_api'; import { NoopAnimationsModule } from '@angular/platform-browser/animations'; -import { TestBed, fakeAsync } from '@angular/core/testing'; +import { TestBed, fakeAsync, tick } from '@angular/core/testing'; import { configureTestSuite } from '../../test-utils/configure-suite'; import { DebugElement } from '@angular/core'; import { GridFunctions, GridSummaryFunctions } from '../../test-utils/grid-functions.spec'; @@ -936,7 +936,7 @@ describe('IgxGrid - Row Adding #grid', () => { gridContent = GridFunctions.getGridContent(fixture); })); - it('Should exit add row mode when moving a column', () => { + it('Should exit add row mode when moving a column', fakeAsync(() => { spyOn(grid.gridAPI.crudService, 'endEdit').and.callThrough(); const dataLength = grid.data.length; const row = grid.rowList.first; @@ -949,12 +949,13 @@ describe('IgxGrid - Row Adding #grid', () => { expect(grid.rowEditingOverlay.collapsed).toEqual(false); grid.moveColumn(grid.columnList.get(1), grid.columnList.get(2)); + tick(); fixture.detectChanges(); expect(grid.gridAPI.crudService.endEdit).toHaveBeenCalled(); expect(grid.data.length).toBe(dataLength); expect(grid.rowEditingOverlay.collapsed).toEqual(true); - }); + })); it('Should exit add row mode when pinning/unpinning a column', () => { spyOn(grid.gridAPI.crudService, 'endEdit').and.callThrough(); diff --git a/projects/igniteui-angular/src/lib/grids/grid/grid-cell-selection.spec.ts b/projects/igniteui-angular/src/lib/grids/grid/grid-cell-selection.spec.ts index 85157f78a1f..a7253c4de48 100644 --- a/projects/igniteui-angular/src/lib/grids/grid/grid-cell-selection.spec.ts +++ b/projects/igniteui-angular/src/lib/grids/grid/grid-cell-selection.spec.ts @@ -2266,7 +2266,7 @@ describe('IgxGrid - Cell selection #grid', () => { expect(grid.getSelectedData()).toEqual(selectedData); }); - it('Moving: selection should not change when move columns inside selected range', () => { + it('Moving: selection should not change when move columns inside selected range', fakeAsync(() => { const firstCell = grid.gridAPI.get_cell_by_index(2, 'ParentID'); const secondCell = grid.gridAPI.get_cell_by_index(4, 'HireDate'); GridSelectionFunctions.selectCellsRangeNoWait(fix, firstCell, secondCell); @@ -2282,6 +2282,7 @@ describe('IgxGrid - Cell selection #grid', () => { GridSelectionFunctions.verifyCellsRegionSelected(grid, 2, 4, 1, 3); expect(grid.getSelectedData()).toEqual(selectedData); grid.moveColumn(grid.getColumnByName('ParentID'), grid.getColumnByName('HireDate')); + tick(); fix.detectChanges(); GridSelectionFunctions.verifySelectedRange(grid, 2, 4, 1, 3); @@ -2291,6 +2292,7 @@ describe('IgxGrid - Cell selection #grid', () => { fix.detectChanges(); grid.moveColumn(grid.getColumnByName('ParentID'), grid.getColumnByName('ID'), DropPosition.BeforeDropTarget); + tick(); fix.detectChanges(); const newSelectedData = [ { ID: 317, Name: 'Monica Reyes', HireDate: new Date('Sep 18, 2014') }, @@ -2300,7 +2302,7 @@ describe('IgxGrid - Cell selection #grid', () => { GridSelectionFunctions.verifySelectedRange(grid, 2, 4, 1, 3); GridSelectionFunctions.verifyCellsRegionSelected(grid, 2, 4, 1, 3); expect(grid.getSelectedData()).toEqual(newSelectedData); - }); + })); it('Summaries: selection range should not change when enable/disable summaries', (async () => { grid.height = '600px'; diff --git a/projects/igniteui-angular/src/lib/grids/grid/grid-collapsible-columns.spec.ts b/projects/igniteui-angular/src/lib/grids/grid/grid-collapsible-columns.spec.ts index b28495540b1..4676bc0f9d6 100644 --- a/projects/igniteui-angular/src/lib/grids/grid/grid-collapsible-columns.spec.ts +++ b/projects/igniteui-angular/src/lib/grids/grid/grid-collapsible-columns.spec.ts @@ -1,4 +1,4 @@ -import { TestBed, fakeAsync } from '@angular/core/testing'; +import { TestBed, fakeAsync, tick } from '@angular/core/testing'; import { IgxGridModule } from './grid.module'; import { IgxGridComponent } from './grid.component'; import { NoopAnimationsModule } from '@angular/platform-browser/animations'; @@ -554,7 +554,7 @@ describe('IgxGrid - multi-column headers #grid', () => { GridFunctions.verifyGroupIsExpanded(fixture, addressInf, true, true); }); - it('Moving: Verify that expanded state is preserved when move column group', () => { + it('Moving: Verify that expanded state is preserved when move column group', fakeAsync(() => { const generalInf = GridFunctions.getColGroup(grid, 'General Information'); expect(addressInf.expanded).toBeTruthy(); @@ -562,22 +562,25 @@ describe('IgxGrid - multi-column headers #grid', () => { expect(generalInf.visibleIndex).toBe(1); grid.moveColumn(generalInf, addressInf, DropPosition.AfterDropTarget); + tick(); fixture.detectChanges(); expect(addressInf.expanded).toBeTruthy(); expect(generalInf.collapsible).toBeFalsy(); expect(generalInf.visibleIndex).toBe(3); addressInf.expanded = false; + tick(); fixture.detectChanges(); expect(addressInf.expanded).toBeFalsy(); grid.moveColumn(generalInf, addressInf, DropPosition.BeforeDropTarget); + tick(); fixture.detectChanges(); expect(addressInf.expanded).toBeFalsy(); expect(generalInf.collapsible).toBeFalsy(); expect(generalInf.visibleIndex).toBe(1); - }); + })); it('Moving: Verify moving column inside the group', () => { const postalCode = grid.getColumnByName('PostalCode'); diff --git a/projects/igniteui-angular/src/lib/grids/grid/grid-filtering-ui.spec.ts b/projects/igniteui-angular/src/lib/grids/grid/grid-filtering-ui.spec.ts index d2e499c6c2c..57d415792bf 100644 --- a/projects/igniteui-angular/src/lib/grids/grid/grid-filtering-ui.spec.ts +++ b/projects/igniteui-angular/src/lib/grids/grid/grid-filtering-ui.spec.ts @@ -2187,7 +2187,7 @@ describe('IgxGrid - Filtering Row UI actions #grid', () => { // Filtering + Moving it('should move chip under the correct column when column is moved and filter row should open for correct column.', - () => { + fakeAsync(() => { grid.filter('ProductName', 'Angular', IgxStringFilteringOperand.instance().condition('contains')); fix.detectChanges(); @@ -2195,6 +2195,7 @@ describe('IgxGrid - Filtering Row UI actions #grid', () => { const stringCol = grid.getColumnByName('ProductName'); const numberCol = grid.getColumnByName('Downloads'); grid.moveColumn(stringCol, numberCol); + tick(); fix.detectChanges(); // check UI in filter cell is correct after moving @@ -2202,7 +2203,7 @@ describe('IgxGrid - Filtering Row UI actions #grid', () => { expect(GridFunctions.getChipText(filteringCells[2])).toEqual('Angular'); expect(GridFunctions.getChipText(filteringCells[1])).toEqual('Filter'); - }); + })); // Filtering + Hiding it('should not display filter cell for hidden columns and chips should show under correct column.', fakeAsync(() => { @@ -3095,6 +3096,7 @@ describe('IgxGrid - Filtering actions - Excel style filtering #grid', () => { const moveRight = GridFunctions.getExcelStyleFilteringMoveButtons(fix)[1]; moveLeft.click(); + tick(); fix.detectChanges(); expect(grid.columnList.get(2).field).toBe('ProductName'); @@ -5708,6 +5710,7 @@ describe('IgxGrid - Filtering actions - Excel style filtering #grid', () => { const moveRight = GridFunctions.getExcelStyleFilteringMoveButtons(fix)[1]; moveLeft.click(); + tick(); fix.detectChanges(); expect(grid.columnList.get(2).field).toBe('ProductName'); diff --git a/projects/igniteui-angular/src/lib/grids/grid/grid-mrl-keyboard-nav.spec.ts b/projects/igniteui-angular/src/lib/grids/grid/grid-mrl-keyboard-nav.spec.ts index 5c08495ca80..4346a97e0da 100644 --- a/projects/igniteui-angular/src/lib/grids/grid/grid-mrl-keyboard-nav.spec.ts +++ b/projects/igniteui-angular/src/lib/grids/grid/grid-mrl-keyboard-nav.spec.ts @@ -1,5 +1,5 @@ import { Component, ViewChild } from '@angular/core'; -import { TestBed, ComponentFixture, fakeAsync } from '@angular/core/testing'; +import { TestBed, ComponentFixture, fakeAsync, tick } from '@angular/core/testing'; import { By } from '@angular/platform-browser'; import { NoopAnimationsModule } from '@angular/platform-browser/animations'; import { IgxGridModule, IGridCellEventArgs } from './public_api'; @@ -965,7 +965,7 @@ describe('IgxGrid Multi Row Layout - Keyboard navigation #grid', () => { }); describe('Column Moving Integration', () => { - it('tab navigation should follow correct sequence if a column is moved.', () => { + it('tab navigation should follow correct sequence if a column is moved.', fakeAsync(() => { fix.componentInstance.colGroups = [{ group: 'group1', // row span 3 @@ -996,6 +996,7 @@ describe('IgxGrid Multi Row Layout - Keyboard navigation #grid', () => { const col1 = grid.getColumnByName('group3'); const col2 = grid.getColumnByName('group1'); grid.moveColumn(col2, col1); + tick(); fix.detectChanges(); // check visible indexes are correct @@ -1006,7 +1007,7 @@ describe('IgxGrid Multi Row Layout - Keyboard navigation #grid', () => { expect(grid.getCellByColumn(0, 'City').column.visibleIndex).toBe(4); expect(grid.getCellByColumn(0, 'ContactTitle').column.visibleIndex).toBe(5); expect(grid.getCellByColumn(0, 'PostalCode').column.visibleIndex).toBe(6); - }); + })); }); describe('Pinning integration', () => { diff --git a/projects/igniteui-angular/src/lib/grids/grid/grid-row-editing.spec.ts b/projects/igniteui-angular/src/lib/grids/grid/grid-row-editing.spec.ts index 5f2c9a92d1b..690c13a972c 100644 --- a/projects/igniteui-angular/src/lib/grids/grid/grid-row-editing.spec.ts +++ b/projects/igniteui-angular/src/lib/grids/grid/grid-row-editing.spec.ts @@ -1401,7 +1401,7 @@ describe('IgxGrid - Row Editing #grid', () => { ['Count', 'Earliest', 'Latest'], ['10', 'Jan 1, 1901', 'Dec 25, 2025']); })); - it(`Moving: Should exit edit mode when moving a column`, () => { + it(`Moving: Should exit edit mode when moving a column`, fakeAsync(() => { grid.moving = true; const column = grid.columnList.filter(c => c.field === 'ProductName')[0]; const targetColumn = grid.columnList.filter(c => c.field === 'ProductID')[0]; @@ -1417,14 +1417,14 @@ describe('IgxGrid - Row Editing #grid', () => { expect(cell.editMode).toEqual(true); expect(grid.rowEditingOverlay.collapsed).toEqual(false); grid.moveColumn(column, targetColumn); - + tick(); fix.detectChanges(); expect(cell.editMode).toBeFalsy(); expect(grid.gridAPI.crudService.endEdit).toHaveBeenCalled(); expect(grid.gridAPI.crudService.endEdit).toHaveBeenCalledWith(false); expect(grid.rowEditingOverlay.collapsed).toEqual(true); - }); + })); it(`Pinning: Should exit edit mode when pinning/unpinning a column`, () => { spyOn(grid.gridAPI.crudService, 'endEdit').and.callThrough(); diff --git a/projects/igniteui-angular/src/lib/grids/grid/grid-summary.spec.ts b/projects/igniteui-angular/src/lib/grids/grid/grid-summary.spec.ts index e64877a135a..91eb04611ee 100644 --- a/projects/igniteui-angular/src/lib/grids/grid/grid-summary.spec.ts +++ b/projects/igniteui-angular/src/lib/grids/grid/grid-summary.spec.ts @@ -614,13 +614,14 @@ describe('IgxGrid - Summaries #grid', () => { ['Count', 'Earliest', 'Latest'], ['10', 'May 17, 1990', 'Dec 25, 2025']); })); - it('Moving: should move summaries when move column', () => { + it('Moving: should move summaries when move column', fakeAsync(() => { grid.moving = true; const colUnitsInStock = grid.getColumnByName('UnitsInStock'); const colProductID = grid.getColumnByName('ProductID'); fix.detectChanges(); grid.moveColumn(colUnitsInStock, colProductID, DropPosition.BeforeDropTarget); + tick(); fix.detectChanges(); const summaryRow = fix.debugElement.query(By.css(SUMMARY_ROW)); @@ -631,7 +632,7 @@ describe('IgxGrid - Summaries #grid', () => { GridSummaryFunctions.verifyColumnSummaries(summaryRow, 3, ['Count'], ['10']); GridSummaryFunctions.verifyColumnSummaries(summaryRow, 4, ['Count', 'Earliest', 'Latest'], ['10', 'May 17, 1990', 'Dec 25, 2025']); - }); + })); it('Hiding: should hide summary row when a column which has summary is hidded', fakeAsync(() => { grid.getColumnByName('ProductName').hasSummary = false; diff --git a/projects/igniteui-angular/src/lib/grids/grid/grid.master-detail.spec.ts b/projects/igniteui-angular/src/lib/grids/grid/grid.master-detail.spec.ts index 715b977a371..9fa96150a9b 100644 --- a/projects/igniteui-angular/src/lib/grids/grid/grid.master-detail.spec.ts +++ b/projects/igniteui-angular/src/lib/grids/grid/grid.master-detail.spec.ts @@ -785,19 +785,21 @@ describe('IgxGrid Master Detail #grid', () => { fix.detectChanges(); })); - it('Should keep the expand/collapse icon in the first column, even when moving a column in first place.', () => { + it('Should keep the expand/collapse icon in the first column, even when moving a column in first place.', fakeAsync(() => { grid.moveColumn(grid.columnList.last, grid.columnList.first); + tick(); fix.detectChanges(); expect(grid.rowList.first.cells.first instanceof IgxGridExpandableCellComponent).toBeTruthy(); - }); + })); - it('Should keep the expand/collapse icon in the first column, even when moving a column out of first place.', () => { + it('Should keep the expand/collapse icon in the first column, even when moving a column out of first place.', fakeAsync(() => { grid.moveColumn(grid.columnList.first, grid.columnList.last); + tick(); fix.detectChanges(); expect(grid.rowList.first.cells.first instanceof IgxGridExpandableCellComponent).toBeTruthy(); - }); + })); }); describe('Cell Selection', () => { diff --git a/projects/igniteui-angular/src/lib/grids/grid/grid.pinning.spec.ts b/projects/igniteui-angular/src/lib/grids/grid/grid.pinning.spec.ts index 340fc78bd21..2f46267024f 100644 --- a/projects/igniteui-angular/src/lib/grids/grid/grid.pinning.spec.ts +++ b/projects/igniteui-angular/src/lib/grids/grid/grid.pinning.spec.ts @@ -586,10 +586,11 @@ describe('IgxGrid - Column Pinning #grid', () => { GridFunctions.verifyUnpinnedAreaWidth(grid, scrBarMainSection.nativeElement.offsetWidth, false); }); - it('should pin an unpinned column when drag/drop it among pinned columns.', () => { + it('should pin an unpinned column when drag/drop it among pinned columns.', fakeAsync(() => { // move 'ID' column to the pinned area grid.moveColumn(grid.getColumnByName('ID'), grid.getColumnByName('ContactName'), DropPosition.BeforeDropTarget); + tick(); fix.detectChanges(); // verify column is pinned at the correct place @@ -597,7 +598,7 @@ describe('IgxGrid - Column Pinning #grid', () => { expect(grid.pinnedColumns[1].field).toEqual('ID'); expect(grid.pinnedColumns[2].field).toEqual('ContactName'); expect(grid.getColumnByName('ID').pinned).toBeTruthy(); - }); + })); it('should correctly pin columns with their summaries to end.', () => { diff --git a/projects/igniteui-angular/src/lib/grids/grid/grid.search.spec.ts b/projects/igniteui-angular/src/lib/grids/grid/grid.search.spec.ts index 40cffe98bdb..4794cdab2b3 100644 --- a/projects/igniteui-angular/src/lib/grids/grid/grid.search.spec.ts +++ b/projects/igniteui-angular/src/lib/grids/grid/grid.search.spec.ts @@ -590,16 +590,18 @@ describe('IgxGrid - search API #grid - ', () => { verifyActiveHighlight(0); })); - it('Active highlight should be preserved when a column is moved', () => { + it('Active highlight should be preserved when a column is moved', fakeAsync(() => { grid.findNext('casey'); const columns = grid.columnList.toArray(); grid.moveColumn(columns[0], columns[1]); + tick(); + fix.detectChanges(); const highlights = getHighlights(); expect(highlights.length).toBe(1); verifyActiveHighlight(0); - }); + })); it('Should exit edit mode and search a cell', () => { const cell = grid.getCellByColumn(0, 'Name'); diff --git a/projects/igniteui-angular/src/lib/grids/grid/row-drag.directive.spec.ts b/projects/igniteui-angular/src/lib/grids/grid/row-drag.directive.spec.ts index 249a7f252d9..30e3db64df1 100644 --- a/projects/igniteui-angular/src/lib/grids/grid/row-drag.directive.spec.ts +++ b/projects/igniteui-angular/src/lib/grids/grid/row-drag.directive.spec.ts @@ -1,5 +1,5 @@ import { Component, ViewChild, DebugElement, QueryList } from '@angular/core'; -import { TestBed, ComponentFixture, fakeAsync } from '@angular/core/testing'; +import { TestBed, ComponentFixture, fakeAsync, tick } from '@angular/core/testing'; import { FormsModule } from '@angular/forms'; import { By } from '@angular/platform-browser'; import { NoopAnimationsModule } from '@angular/platform-browser/animations'; @@ -508,9 +508,10 @@ describe('Row Drag Tests #grid', () => { fixture.detectChanges(); verifyDragAndDropRowCellValues(1, 0); }); - it('should be able to drag grid row when column moving is enabled', () => { + it('should be able to drag grid row when column moving is enabled', fakeAsync(() => { const dragGridColumns = dragGrid.columnList.toArray(); dragGrid.moveColumn(dragGridColumns[0], dragGridColumns[2]); + tick(); fixture.detectChanges(); dragIndicatorElement = dragIndicatorElements[2].nativeElement; @@ -548,7 +549,7 @@ describe('Row Drag Tests #grid', () => { expect(dropRowCells[2].value).toEqual(dragRowCells[1].value); expect(dropRowCells[3].value).toEqual(dragRowCells[3].value); expect(dropRowCells[4].value).toEqual(dragRowCells[4].value); - }); + })); it('should be able to drag grid row when column pinning is enabled', () => { dragGrid.pinColumn('ProductName'); fixture.detectChanges(); diff --git a/projects/igniteui-angular/src/lib/grids/tree-grid/tree-grid-crud.spec.ts b/projects/igniteui-angular/src/lib/grids/tree-grid/tree-grid-crud.spec.ts index c5aeb29287b..810493b5d48 100644 --- a/projects/igniteui-angular/src/lib/grids/tree-grid/tree-grid-crud.spec.ts +++ b/projects/igniteui-angular/src/lib/grids/tree-grid/tree-grid-crud.spec.ts @@ -367,11 +367,12 @@ describe('IgxTreeGrid - CRUD #tGrid', () => { verifyRowsCount(fix, 3, 10); }); - it('should support updating a child tree-cell through the treeGrid API', () => { + it('should support updating a child tree-cell through the treeGrid API', fakeAsync(() => { // Test prerequisites: move 'Age' column so it becomes the tree-column const sourceColumn = treeGrid.columnList.filter(c => c.field === 'Age')[0]; const targetColumn = treeGrid.columnList.filter(c => c.field === 'ID')[0]; treeGrid.moveColumn(sourceColumn, targetColumn, DropPosition.BeforeDropTarget); + tick(); fix.detectChanges(); verifyCellValue(fix, 6, 'Age', '25'); @@ -383,13 +384,14 @@ describe('IgxTreeGrid - CRUD #tGrid', () => { verifyCellValue(fix, 6, 'Age', '18'); verifyRowsCount(fix, 3, 10); - }); + })); - it('should support updating a child tree-cell through the cellObject API', () => { + it('should support updating a child tree-cell through the cellObject API', fakeAsync(() => { // Test prerequisites: move 'Age' column so it becomes the tree-column const sourceColumn = treeGrid.columnList.filter(c => c.field === 'Age')[0]; const targetColumn = treeGrid.columnList.filter(c => c.field === 'ID')[0]; treeGrid.moveColumn(sourceColumn, targetColumn, DropPosition.BeforeDropTarget); + tick(); fix.detectChanges(); @@ -402,7 +404,7 @@ describe('IgxTreeGrid - CRUD #tGrid', () => { verifyCellValue(fix, 6, 'Age', '18'); verifyRowsCount(fix, 3, 10); - }); + })); }); describe('Primary/Foreign key', () => { @@ -514,11 +516,12 @@ describe('IgxTreeGrid - CRUD #tGrid', () => { verifyTreeGridRecordsCount(fix, 4, 8); // Root rows count increment with 1 due to the row update. }); - it('should support updating a child tree-cell through the treeGrid API', () => { + it('should support updating a child tree-cell through the treeGrid API', fakeAsync(() => { // Test prerequisites: move 'Name' column so it becomes the tree-column const sourceColumn = treeGrid.columnList.filter(c => c.field === 'Name')[0]; const targetColumn = treeGrid.columnList.filter(c => c.field === 'ID')[0]; treeGrid.moveColumn(sourceColumn, targetColumn, DropPosition.BeforeDropTarget); + tick(); fix.detectChanges(); verifyCellValue(fix, 3, 'Name', 'Debra Morton'); @@ -530,13 +533,14 @@ describe('IgxTreeGrid - CRUD #tGrid', () => { verifyCellValue(fix, 3, 'Name', 'Michael Myers'); verifyRowsCount(fix, 8, 8); - }); + })); - it('should support updating a child tree-cell through the cellObject API', () => { + it('should support updating a child tree-cell through the cellObject API', fakeAsync(() => { // Test prerequisites: move 'Name' column so it becomes the tree-column const sourceColumn = treeGrid.columnList.filter(c => c.field === 'Name')[0]; const targetColumn = treeGrid.columnList.filter(c => c.field === 'ID')[0]; treeGrid.moveColumn(sourceColumn, targetColumn, DropPosition.BeforeDropTarget); + tick(); fix.detectChanges(); verifyCellValue(fix, 3, 'Name', 'Debra Morton'); @@ -548,7 +552,7 @@ describe('IgxTreeGrid - CRUD #tGrid', () => { verifyCellValue(fix, 3, 'Name', 'Michael Myers'); verifyRowsCount(fix, 8, 8); - }); + })); }); }); diff --git a/projects/igniteui-angular/src/lib/grids/tree-grid/tree-grid-indentation.spec.ts b/projects/igniteui-angular/src/lib/grids/tree-grid/tree-grid-indentation.spec.ts index 03c961e6a10..4fa744f88eb 100644 --- a/projects/igniteui-angular/src/lib/grids/tree-grid/tree-grid-indentation.spec.ts +++ b/projects/igniteui-angular/src/lib/grids/tree-grid/tree-grid-indentation.spec.ts @@ -169,7 +169,7 @@ describe('IgxTreeGrid - Indentation #tGrid', () => { TreeGridFunctions.verifyRowIndentationLevel(treeGrid.getRowByIndex(9), rows[9], 1); })); - it('should change cell content alignment of tree-column with number dataType when it is no longer tree-column', () => { + it('should change cell content alignment of tree-column with number dataType when it is no longer tree-column', fakeAsync(() => { TreeGridFunctions.verifyTreeColumn(fix, 'ID', 4); verifyCellsContentAlignment(fix, 'ID', true); // Verify cells of 'ID' are left-aligned. @@ -177,6 +177,7 @@ describe('IgxTreeGrid - Indentation #tGrid', () => { const sourceColumn = treeGrid.columnList.filter(c => c.field === 'ID')[0]; let targetColumn = treeGrid.columnList.filter(c => c.field === 'Age')[0]; treeGrid.moveColumn(sourceColumn, targetColumn, DropPosition.BeforeDropTarget); + tick(); fix.detectChanges(); TreeGridFunctions.verifyTreeColumn(fix, 'Name', 4); @@ -185,11 +186,12 @@ describe('IgxTreeGrid - Indentation #tGrid', () => { // Moving 'ID' column targetColumn = treeGrid.columnList.filter(c => c.field === 'Name')[0]; treeGrid.moveColumn(sourceColumn, targetColumn, DropPosition.BeforeDropTarget); + tick(); fix.detectChanges(); TreeGridFunctions.verifyTreeColumn(fix, 'ID', 4); verifyCellsContentAlignment(fix, 'ID', true); // Verify cells of 'ID' are left-aligned. - }); + })); }); describe('Primary/Foreign key', () => { @@ -334,16 +336,16 @@ describe('IgxTreeGrid - Indentation #tGrid', () => { const sourceColumn = treeGrid.columnList.filter(c => c.field === 'ID')[0]; let targetColumn = treeGrid.columnList.filter(c => c.field === 'Age')[0]; treeGrid.moveColumn(sourceColumn, targetColumn, DropPosition.BeforeDropTarget); + tick(); fix.detectChanges(); - tick(16); TreeGridFunctions.verifyTreeColumn(fix, 'ParentID', 5); verifyCellsContentAlignment(fix, 'ID', false); // Verify cells of 'ID' are right-aligned. // Moving 'ID' column targetColumn = treeGrid.columnList.filter(c => c.field === 'ParentID')[0]; treeGrid.moveColumn(sourceColumn, targetColumn, DropPosition.BeforeDropTarget); + tick(); fix.detectChanges(); - tick(16); TreeGridFunctions.verifyTreeColumn(fix, 'ID', 5); verifyCellsContentAlignment(fix, 'ID', true); // Verify cells of 'ID' are left-aligned. })); 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 3bb7ed62aa5..d869af25ea9 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 @@ -138,17 +138,18 @@ describe('IgxTreeGrid - Integration #tGrid', () => { TreeGridFunctions.verifyTreeColumn(fix, 'ID', 3); }); - it('(API) should transform a non-tree column into a tree column when moving the original tree-column through', () => { + it('(API) should transform a non-tree column into a tree column when moving the original tree-column through', fakeAsync(() => { TreeGridFunctions.verifyTreeColumn(fix, 'ID', 4); // Move tree-column const sourceColumn = treeGrid.columnList.filter(c => c.field === 'ID')[0]; const targetColumn = treeGrid.columnList.filter(c => c.field === 'HireDate')[0]; treeGrid.moveColumn(sourceColumn, targetColumn); + tick(); fix.detectChanges(); TreeGridFunctions.verifyTreeColumn(fix, 'Name', 4); - }); + })); it('(UI) should transform a non-tree column into a tree column when moving the original tree-column through', (async () => { TreeGridFunctions.verifyTreeColumn(fix, 'ID', 4); @@ -161,6 +162,7 @@ describe('IgxTreeGrid - Integration #tGrid', () => { await wait(); UIInteractions.simulatePointerEvent('pointermove', header, 490, 30); UIInteractions.simulatePointerEvent('pointerup', header, 490, 30); + await wait() fix.detectChanges(); TreeGridFunctions.verifyTreeColumn(fix, 'Name', 4); @@ -251,17 +253,18 @@ describe('IgxTreeGrid - Integration #tGrid', () => { TreeGridFunctions.verifyTreeColumn(fix, 'ID', 4); }); - it('(API) should transform a non-tree column into a tree column when moving the original tree-column through', () => { + it('(API) should transform a non-tree column into a tree column when moving the original tree-column through', fakeAsync(() => { TreeGridFunctions.verifyTreeColumn(fix, 'ID', 5); // Move tree-column const sourceColumn = treeGrid.columnList.filter(c => c.field === 'ID')[0]; const targetColumn = treeGrid.columnList.filter(c => c.field === 'JobTitle')[0]; treeGrid.moveColumn(sourceColumn, targetColumn); + tick(); fix.detectChanges(); TreeGridFunctions.verifyTreeColumn(fix, 'ParentID', 5); - }); + })); it('(UI) should transform a non-tree column into a tree column when moving the original tree-column through', (async () => { TreeGridFunctions.verifyTreeColumn(fix, 'ID', 5); @@ -274,6 +277,7 @@ describe('IgxTreeGrid - Integration #tGrid', () => { await wait(); UIInteractions.simulatePointerEvent('pointermove', header, 490, 30); UIInteractions.simulatePointerEvent('pointerup', header, 490, 30); + await wait() fix.detectChanges(); TreeGridFunctions.verifyTreeColumn(fix, 'ParentID', 5); @@ -1282,17 +1286,18 @@ describe('IgxTreeGrid - Integration #tGrid', () => { TreeGridFunctions.verifyTreeColumnInMultiColHeaders(fix, 'ID', 3); }); - it('(API) Should transform a non-tree column into a tree column when moving it first and both are part of the same group', () => { + it('(API) Should transform a non-tree column into a tree column when moving it first and both are part of the same group', fakeAsync(() => { TreeGridFunctions.verifyTreeColumnInMultiColHeaders(fix, 'ID', 4); // Move tree-column const sourceColumn = treeGrid.columnList.filter(c => c.field === 'ID')[0]; const targetColumn = treeGrid.columnList.filter(c => c.field === 'Name')[0]; treeGrid.moveColumn(sourceColumn, targetColumn); + tick(); fix.detectChanges(); TreeGridFunctions.verifyTreeColumnInMultiColHeaders(fix, 'Name', 4); - }); + })); it('(UI) Should transform a non-tree column into a tree column when moving it first within a group', (async () => { TreeGridFunctions.verifyTreeColumnInMultiColHeaders(fix, 'ID', 4); @@ -1305,22 +1310,24 @@ describe('IgxTreeGrid - Integration #tGrid', () => { await wait(); UIInteractions.simulatePointerEvent('pointermove', header, 420, 90); UIInteractions.simulatePointerEvent('pointerup', header, 420, 90); + await wait() fix.detectChanges(); TreeGridFunctions.verifyTreeColumnInMultiColHeaders(fix, 'Name', 4); })); - it('(API) Should transform a non-tree column of a column group to a tree column when its group is moved first', () => { + it('(API) Should transform a non-tree column of a column group to a tree column when its group is moved first', fakeAsync(() => { TreeGridFunctions.verifyTreeColumnInMultiColHeaders(fix, 'ID', 4); // Move group-column const sourceColumn = treeGrid.columnList.filter(c => c.header === 'General Information')[0]; const targetColumn = treeGrid.columnList.filter(c => c.header === 'Additional Information')[0]; treeGrid.moveColumn(sourceColumn, targetColumn); + tick(); fix.detectChanges(); TreeGridFunctions.verifyTreeColumnInMultiColHeaders(fix, 'HireDate', 4); - }); + })); it('(UI) Should transform a non-tree column of a column group to a tree column when its group is moved first', (async () => { TreeGridFunctions.verifyTreeColumnInMultiColHeaders(fix, 'ID', 4); @@ -1557,7 +1564,7 @@ describe('IgxTreeGrid - Integration #tGrid', () => { expect(wrongChipPosition.nativeElement.getElementsByClassName('igx-grid__td--pinned-chip').length).toBe(0); }); - it('pinned chip should always be in the first column', () => { + it('pinned chip should always be in the first column', fakeAsync(() => { const rowToPin = treeGrid.getRowByIndex(0); const primaryKey = treeGrid.primaryKey; @@ -1566,11 +1573,12 @@ describe('IgxTreeGrid - Integration #tGrid', () => { const thirdColumnField = treeGrid.columnList.get(2).field; treeGrid.moveColumn(treeGrid.columnList.get(2), treeGrid.columnList.get(0), DropPosition.BeforeDropTarget); + tick(); fix.detectChanges(); const pinnedChipExpectedPosition = treeGrid.gridAPI.get_cell_by_index(1, thirdColumnField); expect(pinnedChipExpectedPosition.nativeElement.getElementsByClassName('igx-grid__td--pinned-chip').length).toBe(1); - }); + })); it('should expand/collapse a pinned row with children', () => { let rows = TreeGridFunctions.getAllRows(fix); diff --git a/projects/igniteui-angular/src/lib/services/excel/excel-exporter-grid.spec.ts b/projects/igniteui-angular/src/lib/services/excel/excel-exporter-grid.spec.ts index e1409f286ce..ff976598c3c 100644 --- a/projects/igniteui-angular/src/lib/services/excel/excel-exporter-grid.spec.ts +++ b/projects/igniteui-angular/src/lib/services/excel/excel-exporter-grid.spec.ts @@ -1139,6 +1139,7 @@ describe('Excel Exporter', () => { it('should export grid with multi column headers and moved column', async () => { grid.columnList.get(0).move(2); + await wait(); fix.detectChanges(); await exportAndVerify(grid, options, actualData.exportMultiColumnHeadersDataWithMovedColumn, false);