igniteui-angular-sovn
Version:
Ignite UI for Angular is a dependency-free Angular toolkit for building modern web apps
1,961 lines • 91.2 kB
text/typescript
import { DebugElement } from '@angular/core';
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';
import { IgxColumnGroupComponent } from '../columns/column-group.component';
import { IgxInputDirective } from '../../directives/input/input.directive';
import {
MovableColumnsComponent,
MovableTemplatedColumnsComponent,
MovableColumnsLargeComponent,
MultiColumnHeadersComponent
} from '../../test-utils/grid-samples.spec';
import { UIInteractions, wait } from '../../test-utils/ui-interactions.spec';
import { configureTestSuite } from '../../test-utils/configure-suite';
import { IgxGridComponent } from './grid.component';
import { GridSelectionFunctions, GridFunctions } from '../../test-utils/grid-functions.spec';
import { SortingDirection } from '../../data-operations/sorting-strategy';
import { IgxColumnComponent } from '../public_api';
describe('IgxGrid - Column Moving #grid', () => {
const CELL_CSS_CLASS = '.igx-grid__td';
const COLUMN_HEADER_CLASS = '.igx-grid-th';
const COLUMN_GROUP_HEADER_CLASS = '.igx-grid-thead__title';
const COLUMN_RESIZE_CLASS = '.igx-grid-th__resize-line';
let fixture; let grid: IgxGridComponent;
configureTestSuite((() => {
return TestBed.configureTestingModule({
imports: [
FormsModule,
NoopAnimationsModule,
MovableColumnsComponent,
MovableTemplatedColumnsComponent,
MovableColumnsLargeComponent,
MultiColumnHeadersComponent
]
});
}));
describe('', () => {
beforeEach(() => {
fixture = TestBed.createComponent(MovableColumnsComponent);
fixture.detectChanges();
grid = fixture.componentInstance.grid;
grid.moving = true;
});
it('Should be able to reorder columns.', fakeAsync(() => {
let columnsList = grid.columns;
grid.moveColumn(columnsList[0], columnsList[2]);
tick();
fixture.detectChanges();
columnsList = grid.columns;
expect(columnsList[0].field).toEqual('Name');
expect(columnsList[1].field).toEqual('LastName');
expect(columnsList[2].field).toEqual('ID');
}));
it('Should be able to reorder columns programmatically.', fakeAsync(() => {
let columnsList = grid.columns;
const column = columnsList[0] as IgxColumnComponent;
column.move(2);
tick();
fixture.detectChanges();
columnsList = grid.columns;
expect(columnsList[0].field).toEqual('Name');
expect(columnsList[1].field).toEqual('LastName');
expect(columnsList[2].field).toEqual('ID');
}));
it('Should not reorder columns, if passed incorrect index.', fakeAsync(() => {
let columnsList = grid.columns;
expect(columnsList[0].field).toEqual('ID');
expect(columnsList[1].field).toEqual('Name');
expect(columnsList[2].field).toEqual('LastName');
const column = columnsList[0] as IgxColumnComponent;
column.move(-1);
tick();
fixture.detectChanges();
columnsList = grid.columns;
expect(columnsList[0].field).toEqual('ID');
expect(columnsList[1].field).toEqual('Name');
expect(columnsList[2].field).toEqual('LastName');
column.move(columnsList.length);
tick();
fixture.detectChanges();
columnsList = grid.columns;
expect(columnsList[0].field).toEqual('ID');
expect(columnsList[1].field).toEqual('Name');
expect(columnsList[2].field).toEqual('LastName');
}));
it('Should show hidden column on correct index', fakeAsync(() => {
let columnsList = grid.columns;
const column = columnsList[0] as IgxColumnComponent;
column.hidden = true;
fixture.detectChanges();
column.move(2);
tick();
column.hidden = false;
fixture.detectChanges();
columnsList = grid.columns;
expect(columnsList[0].field).toEqual('Name');
expect(columnsList[1].field).toEqual('LastName');
expect(columnsList[2].field).toEqual('ID');
}));
it('Should fire columnMovingEnd with correct values of event arguments.', fakeAsync(() => {
let columnsList = grid.columns;
const column = columnsList[0] as IgxColumnComponent;
spyOn(grid.columnMovingEnd, 'emit').and.callThrough();
column.move(2);
tick();
fixture.detectChanges();
columnsList = grid.columns;
const args = { source: grid.columns[2], target: grid.columns[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', fakeAsync(() => {
fixture.componentInstance.isEditable = true;
fixture.detectChanges();
const cacheValue = grid.getCellByColumn(0, 'ID').value;
// step 1 - enter edit mode on a cell
const cell = fixture.debugElement.queryAll(By.css(CELL_CSS_CLASS))[0];
cell.nativeElement.dispatchEvent(new Event('focus'));
fixture.detectChanges();
cell.triggerEventHandler('dblclick', {});
fixture.detectChanges();
expect(grid.getCellByColumn(0, 'ID').editMode).toBe(true);
// step 2 - enter some new value
const editTemplate = cell.query(By.css('input'));
editTemplate.nativeElement.value = '4';
editTemplate.nativeElement.dispatchEvent(new Event('input'));
fixture.detectChanges();
// step 3 - move a column
const columnsList = grid.columns;
const column = columnsList[0] as IgxColumnComponent;
column.move(2);
tick();
fixture.detectChanges();
// step 4 - verify cell has exited edit mode correctly
expect(grid.columns[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', fakeAsync(() => {
// step 1 - hide a column
fixture.componentInstance.isHidden = true;
fixture.detectChanges();
fixture.detectChanges();
// step 2 - move a column
const columnsList = grid.columns;
const column = columnsList[2] as IgxColumnComponent;
column.move(1);
tick();
fixture.detectChanges();
expect(grid.visibleColumns[1].field).toEqual('LastName');
// step 3 - show hidden columns and verify correct order
fixture.componentInstance.isHidden = false;
fixture.detectChanges();
fixture.detectChanges();
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.columns;
// step 1 - move a column
const column = columnsList[1] as IgxColumnComponent;
column.move(2);
await wait();
fixture.detectChanges();
columnsList = grid.columns;
expect(columnsList[0].field).toEqual('ID');
expect(columnsList[1].field).toEqual('LastName');
expect(columnsList[2].field).toEqual('Name');
// step 2 - verify vertical scrolling is not broken
grid.verticalScrollContainer.getScroll().scrollTop = 200;
await wait(100);
fixture.detectChanges();
expect(grid.columns[0].cells[3].value).toBeTruthy(7);
// step 3 - verify horizontal scrolling is not broken
grid.headerContainer.getScroll().scrollLeft = 200;
await wait(100);
fixture.detectChanges();
expect(grid.columns[2].cells[3].value).toBeTruthy('BRown');
}));
it('Should be able to reorder columns programmatically when a column is grouped.', (async () => {
fixture.componentInstance.isGroupable = true;
fixture.detectChanges();
let columnsList = grid.columns;
// step 1 - group a column
grid.groupBy({ fieldName: 'ID', dir: SortingDirection.Desc, ignoreCase: false });
fixture.detectChanges();
// step 2 - move a column
const column = columnsList[0] as IgxColumnComponent;
column.move(2);
await wait();
fixture.detectChanges();
fixture.detectChanges();
columnsList = grid.columns;
expect(columnsList[0].field).toEqual('Name');
expect(columnsList[1].field).toEqual('LastName');
expect(columnsList[2].field).toEqual('ID');
}));
it('Should not break KB after columns are reordered programmatically - selection belongs to the moved column.', (async () => {
let columnsList = grid.columns;
// step 1 - select a cell from 'ID' column
const cell = grid.gridAPI.get_cell_by_index(0, 'ID');
UIInteractions.simulateClickAndSelectEvent(cell);
fixture.detectChanges();
// step 2 - move that column
const column = columnsList[0] as IgxColumnComponent;
column.move(1);
await wait();
fixture.detectChanges();
columnsList = grid.columns;
expect(columnsList[0].field).toEqual('Name');
expect(columnsList[1].field).toEqual('ID');
expect(columnsList[2].field).toEqual('LastName');
// step 3 - navigate right and verify cell selection is updated
const gridContent = GridFunctions.getGridContent(fixture);
GridFunctions.focusFirstCell(fixture, grid);
UIInteractions.triggerKeyDownEvtUponElem('arrowright', gridContent.nativeElement, true);
await wait(50);
fixture.detectChanges();
expect(grid.getCellByColumn(0, 'ID').selected).toBeTruthy();
}));
it('Should not reorder columns when dropping the ghost image on a non-interactive area.', (async () => {
const headers: DebugElement[] = fixture.debugElement.queryAll(By.css(COLUMN_HEADER_CLASS));
// step 1 - start moving a column, release the drag ghost over cells area
// and verify columns are not reordered
const header = headers[1].nativeElement;
UIInteractions.simulatePointerEvent('pointerdown', header, 250, 65);
await wait();
UIInteractions.simulatePointerEvent('pointermove', header, 256, 71);
await wait(50);
UIInteractions.simulatePointerEvent('pointermove', header, 380, 350);
await wait();
UIInteractions.simulatePointerEvent('pointerup', header, 380, 350);
await wait();
fixture.detectChanges();
const columnsList = grid.columns;
expect(columnsList[0].field).toEqual('ID');
expect(columnsList[1].field).toEqual('Name');
expect(columnsList[2].field).toEqual('LastName');
}));
it('Should not reorder columns on hitting ESCAPE key.', (async () => {
const headers: DebugElement[] = fixture.debugElement.queryAll(By.css(COLUMN_HEADER_CLASS));
// step 2 - start moving a column
const header = headers[0].nativeElement;
UIInteractions.simulatePointerEvent('pointerdown', header, 130, 65);
await wait();
UIInteractions.simulatePointerEvent('pointermove', header, 136, 71);
await wait(50);
UIInteractions.simulatePointerEvent('pointermove', header, 270, 71);
await wait();
// step 2 - hit ESCAPE over the headers area and verify column moving is canceled
document.dispatchEvent(new KeyboardEvent('keydown', { key: 'Escape' }));
document.dispatchEvent(new KeyboardEvent('keyup', { key: 'Escape' }));
fixture.detectChanges();
UIInteractions.simulatePointerEvent('pointerup', header, 270, 71);
await wait();
fixture.detectChanges();
const columnsList = grid.columns;
expect(columnsList[0].field).toEqual('ID');
expect(columnsList[1].field).toEqual('Name');
expect(columnsList[2].field).toEqual('LastName');
}));
it('Should not break sorting and resizing when column moving is enabled.', (async () => {
fixture.componentInstance.isFilterable = true;
fixture.componentInstance.isResizable = true;
fixture.componentInstance.isSortable = true;
fixture.detectChanges();
const headers: DebugElement[] = fixture.debugElement.queryAll(By.css(COLUMN_HEADER_CLASS));
const header = headers[1].nativeElement;
let columnsList = grid.columns;
// step 1 - move a column
UIInteractions.simulatePointerEvent('pointerdown', header, 250, 65);
await wait();
UIInteractions.simulatePointerEvent('pointermove', header, 244, 71);
await wait(50);
UIInteractions.simulatePointerEvent('pointermove', header, 100, 71);
await wait(50);
UIInteractions.simulatePointerEvent('pointerup', header, 100, 71);
await wait();
fixture.detectChanges();
columnsList = grid.columns;
expect(columnsList[0].field).toEqual('Name');
expect(columnsList[1].field).toEqual('ID');
expect(columnsList[2].field).toEqual('LastName');
// step 2 - verify resizing is not broken
const resizeHandle = headers[0].parent.nativeElement.children[2];
UIInteractions.simulateMouseEvent('mousedown', resizeHandle, 200, 80);
await wait(250);
fixture.detectChanges();
const resizer = fixture.debugElement.queryAll(By.css(COLUMN_RESIZE_CLASS))[0].nativeElement;
expect(resizer).toBeDefined();
UIInteractions.simulateMouseEvent('mousemove', resizer, 300, 5);
UIInteractions.simulateMouseEvent('mouseup', resizer, 300, 5);
fixture.detectChanges();
expect(grid.columns[0].width).toEqual('250px');
// step 3 - verify sorting is not broken
GridFunctions.clickHeaderSortIcon(headers[0]);
GridFunctions.clickHeaderSortIcon(headers[0]);
fixture.detectChanges();
expect(grid.getCellByColumn(0, 'ID').value).toEqual(6);
}));
it('Should not break vertical or horizontal scrolling after columns are reordered.', (async () => {
const headers: DebugElement[] = fixture.debugElement.queryAll(By.css(COLUMN_HEADER_CLASS));
const header = headers[1].nativeElement;
let columnsList = grid.columns;
// step 1 - move a column
UIInteractions.simulatePointerEvent('pointerdown', header, 250, 65);
await wait();
UIInteractions.simulatePointerEvent('pointermove', header, 244, 71);
await wait(50);
UIInteractions.simulatePointerEvent('pointermove', header, 100, 71);
await wait();
UIInteractions.simulatePointerEvent('pointerup', header, 100, 71);
await wait();
fixture.detectChanges();
columnsList = grid.columns;
expect(columnsList[0].field).toEqual('Name');
expect(columnsList[1].field).toEqual('ID');
expect(columnsList[2].field).toEqual('LastName');
// step 2 - verify vertical scrolling is not broken
grid.verticalScrollContainer.getScroll().scrollTop = 200;
await wait(100);
fixture.detectChanges();
expect(grid.columns[0].cells[3].value).toBeTruthy('Rick');
// step 3 - verify horizontal scrolling is not broken
grid.headerContainer.getScroll().scrollLeft = 200;
await wait(100);
fixture.detectChanges();
expect(grid.columns[2].cells[3].value).toBeTruthy('BRown');
}));
it('Should fire columnMovingStart, columnMoving and columnMovingEnd with correct values of event arguments.', (async () => {
const headers: DebugElement[] = fixture.debugElement.queryAll(By.css(COLUMN_HEADER_CLASS));
// step 1 - start moving a column
const header = headers[0].nativeElement;
UIInteractions.simulatePointerEvent('pointerdown', header, 150, 65);
await wait();
// step 2 - verify columnMovingStart is fired correctly
expect(fixture.componentInstance.countStart).toEqual(1);
expect(fixture.componentInstance.source).toEqual(grid.columns[0]);
UIInteractions.simulatePointerEvent('pointermove', header, 156, 71);
await wait(50);
UIInteractions.simulatePointerEvent('pointermove', header, 330, 75);
await wait(50);
// step 3 - verify columnMoving is fired correctly
expect(fixture.componentInstance.count).toBeGreaterThan(1);
expect(fixture.componentInstance.source).toEqual(grid.columns[0]);
UIInteractions.simulatePointerEvent('pointerup', header, 330, 75);
await wait();
fixture.detectChanges();
// step 4 - verify columnMovingEnd is fired correctly
expect(fixture.componentInstance.countEnd).toEqual(1);
expect(fixture.componentInstance.source).toEqual(grid.columns[1]);
expect(fixture.componentInstance.target).toEqual(grid.columns[0]);
expect(fixture.componentInstance.cancel).toBe(false);
}));
it('Should be able to cancel columnMoving event.', (async () => {
const headers: DebugElement[] = fixture.debugElement.queryAll(By.css(COLUMN_HEADER_CLASS));
// step 1 - try moving a column
const header = headers[0].nativeElement;
UIInteractions.simulatePointerEvent('pointerdown', header, 150, 65);
await wait();
if (fixture.componentInstance.source.field === 'ID') {
fixture.componentInstance.cancel = true;
}
UIInteractions.simulatePointerEvent('pointermove', header, 156, 71);
await wait();
UIInteractions.simulatePointerEvent('pointermove', header, 330, 75);
await wait(50);
UIInteractions.simulatePointerEvent('pointerup', header, 330, 75);
await wait();
fixture.detectChanges();
// step 2 - verify the event was canceled
const columnsList = grid.columns;
expect(columnsList[0].field).toEqual('ID');
expect(columnsList[1].field).toEqual('Name');
expect(columnsList[2].field).toEqual('LastName');
}));
it('Should be able to cancel columnMovingEnd event.', (async () => {
const headers: DebugElement[] = fixture.debugElement.queryAll(By.css(COLUMN_HEADER_CLASS));
// step 1 - subscribe to the columnMovingEnd event in order to cancel it
grid.columnMovingEnd.subscribe((e) => {
if (fixture.componentInstance.target.field === 'Name') {
e.cancel = true;
}
});
// step 2 - try moving a column
const header = headers[0].nativeElement;
UIInteractions.simulatePointerEvent('pointerdown', header, 150, 65);
await wait();
UIInteractions.simulatePointerEvent('pointermove', header, 156, 71);
await wait();
UIInteractions.simulatePointerEvent('pointermove', header, 330, 75);
await wait(50);
UIInteractions.simulatePointerEvent('pointerup', header, 330, 75);
await wait(50);
fixture.detectChanges();
// step 3 - verify the event was canceled(in componentInstance)
const columnsList = grid.columns;
expect(columnsList[0].field).toEqual('ID');
expect(columnsList[1].field).toEqual('Name');
expect(columnsList[2].field).toEqual('LastName');
}));
it('Should preserve filtering after columns are reordered.', async () => {
pending('This scenario need to be reworked with new Filtering row');
fixture.componentInstance.isFilterable = true;
fixture.detectChanges();
const headers: DebugElement[] = fixture.debugElement.queryAll(By.css(COLUMN_HEADER_CLASS));
headers[0].triggerEventHandler('click', new Event('click'));
fixture.detectChanges();
// step 1 - filter a column
const filterUIContainer = fixture.debugElement.query(By.css('igx-grid-filter'));
const filterIcon = filterUIContainer.query(By.css('igx-icon'));
filterIcon.nativeElement.click();
await wait();
fixture.detectChanges();
const select = filterUIContainer.query(By.css('select'));
const options = select.nativeElement.options;
options[4].selected = true;
select.nativeElement.dispatchEvent(new Event('change'));
fixture.detectChanges();
const input = filterUIContainer.query(By.directive(IgxInputDirective));
input.nativeElement.value = '2';
input.nativeElement.dispatchEvent(new Event('input'));
fixture.detectChanges();
filterUIContainer.queryAll(By.css('button'))[1].nativeElement.click();
fixture.detectChanges();
// step 2 - move a column and verify column remains filtered
const header = headers[0].nativeElement;
UIInteractions.simulatePointerEvent('pointerdown', header, 130, 65);
await wait();
UIInteractions.simulatePointerEvent('pointermove', header, 130, 71);
await wait(50);
UIInteractions.simulatePointerEvent('pointermove', header, 300, 71);
await wait(50);
UIInteractions.simulatePointerEvent('pointerup', header, 300, 71);
await wait();
fixture.detectChanges();
expect(grid.columns[1].field).toEqual('ID');
expect(grid.rowList.length).toEqual(1);
});
it('Should exit edit mode and discard the new value when column moving starts.', (async () => {
fixture.componentInstance.isEditable = true;
fixture.detectChanges();
const headers: DebugElement[] = fixture.debugElement.queryAll(By.css(COLUMN_HEADER_CLASS));
// step 1 - enter edit mode on a cell
const cell = fixture.debugElement.queryAll(By.css(CELL_CSS_CLASS))[0];
const cacheValue = grid.getCellByColumn(0, 'ID').value;
cell.nativeElement.dispatchEvent(new Event('focus'));
fixture.detectChanges();
cell.triggerEventHandler('dblclick', {});
fixture.detectChanges();
expect(grid.getCellByColumn(0, 'ID').editMode).toBe(true);
// step 2 - enter some new value
const editTemplate = cell.query(By.css('input'));
editTemplate.nativeElement.value = '4';
editTemplate.nativeElement.dispatchEvent(new Event('input'));
fixture.detectChanges();
// step 3 - move a column
const header = headers[1].nativeElement;
UIInteractions.simulatePointerEvent('pointerdown', header, 250, 65);
await wait();
UIInteractions.simulatePointerEvent('pointermove', header, 244, 71);
await wait(50);
UIInteractions.simulatePointerEvent('pointermove', header, 100, 71);
await wait();
UIInteractions.simulatePointerEvent('pointerup', header, 100, 71);
await wait();
fixture.detectChanges();
// step 4 - verify cell has exited edit mode correctly
expect(grid.columns[1].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.', (async () => {
const headers: DebugElement[] = fixture.debugElement.queryAll(By.css(COLUMN_HEADER_CLASS));
// step 1 - hide a column
fixture.componentInstance.isHidden = true;
fixture.detectChanges();
fixture.detectChanges();
// step 2 - move a column
const header = headers[2].nativeElement;
UIInteractions.simulatePointerEvent('pointerdown', header, 400, 65);
await wait();
UIInteractions.simulatePointerEvent('pointermove', header, 400, 71);
await wait(50);
UIInteractions.simulatePointerEvent('pointermove', header, 80, 71);
await wait();
UIInteractions.simulatePointerEvent('pointerup', header, 80, 71);
await wait();
fixture.detectChanges();
expect(grid.visibleColumns[0].field).toEqual('Region');
// step 3 - show hidden columns and verify correct order
fixture.componentInstance.isHidden = false;
fixture.detectChanges();
fixture.detectChanges();
expect(grid.visibleColumns[0].field).toEqual('ID');
expect(grid.visibleColumns[1].field).toEqual('Region');
}));
it('Should be able to reorder columns when a column is grouped.', (async () => {
fixture.componentInstance.isGroupable = true;
fixture.detectChanges();
// step 1 - group a column
grid.groupBy({ fieldName: 'ID', dir: SortingDirection.Desc, ignoreCase: false });
fixture.detectChanges();
// step 2 - move a column
const header = fixture.debugElement.queryAll(By.css(COLUMN_HEADER_CLASS))[0].nativeElement;
UIInteractions.simulatePointerEvent('pointerdown', header, 180, 120);
await wait();
UIInteractions.simulatePointerEvent('pointermove', header, 180, 126);
await wait(50);
UIInteractions.simulatePointerEvent('pointermove', header, 350, 135);
await wait();
UIInteractions.simulatePointerEvent('pointerup', header, 350, 135);
await wait();
fixture.detectChanges();
const columnsList = grid.columns;
expect(columnsList[0].field).toEqual('Name');
expect(columnsList[1].field).toEqual('ID');
}));
it('Should not break KB after columns are reordered - selection belongs to the moved column.', (async () => {
const headers: DebugElement[] = fixture.debugElement.queryAll(By.css(COLUMN_HEADER_CLASS));
// step 1 - select a cell from 'ID' column
const cell = grid.gridAPI.get_cell_by_index(0, 'ID');
UIInteractions.simulateClickAndSelectEvent(cell);
fixture.detectChanges();
// step 2 - move that column
const header = headers[0].nativeElement;
UIInteractions.simulatePointerEvent('pointerdown', header, 150, 65);
await wait();
UIInteractions.simulatePointerEvent('pointermove', header, 156, 71);
await wait(50);
UIInteractions.simulatePointerEvent('pointermove', header, 330, 75);
await wait();
UIInteractions.simulatePointerEvent('pointerup', header, 330, 75);
await wait();
fixture.detectChanges();
const columnsList = grid.columns;
expect(columnsList[0].field).toEqual('Name');
expect(columnsList[1].field).toEqual('ID');
expect(columnsList[2].field).toEqual('LastName');
// step 3 - navigate right and verify cell selection is updated
const gridContent = GridFunctions.getGridContent(fixture);
GridFunctions.focusFirstCell(fixture, grid);
UIInteractions.triggerKeyDownEvtUponElem('arrowright', gridContent.nativeElement, true);
await wait(50);
fixture.detectChanges();
expect(grid.getCellByColumn(0, 'ID').selected).toBeTruthy();
}));
it('Should not break KB after columns are reordered - selection does not belong to the moved column.', (async () => {
const headers: DebugElement[] = fixture.debugElement.queryAll(By.css(COLUMN_HEADER_CLASS));
// step 1 - select a cell from 'ID' column
const cell = fixture.debugElement.queryAll(By.css(CELL_CSS_CLASS))[0];
UIInteractions.simulateClickAndSelectEvent(cell);
fixture.detectChanges();
// step 2 - move that column
const header = headers[0].nativeElement;
UIInteractions.simulatePointerEvent('pointerdown', header, 150, 65);
await wait();
UIInteractions.simulatePointerEvent('pointermove', header, 156, 71);
await wait(50);
UIInteractions.simulatePointerEvent('pointermove', header, 480, 75);
await wait();
UIInteractions.simulatePointerEvent('pointerup', header, 480, 75);
await wait();
fixture.detectChanges();
const columnsList = grid.columns;
expect(columnsList[0].field).toEqual('Name');
expect(columnsList[1].field).toEqual('LastName');
expect(columnsList[2].field).toEqual('ID');
// step 3 - navigate and verify cell selection is updated
const gridContent = GridFunctions.getGridContent(fixture);
GridFunctions.focusFirstCell(fixture, grid);
UIInteractions.triggerKeyDownEvtUponElem('arrowright', gridContent.nativeElement, true);
await wait(50);
fixture.detectChanges();
expect(grid.getCellByColumn(0, 'LastName').selected).toBeTruthy();
}));
});
describe('', () => {
beforeEach(() => {
fixture = TestBed.createComponent(MovableTemplatedColumnsComponent);
fixture.detectChanges();
grid = fixture.componentInstance.grid;
grid.moving = true;
});
it('Should reorder movable columns with templated headers.', (async () => {
fixture.componentInstance.isResizable = true;
fixture.componentInstance.isSortable = true;
fixture.componentInstance.isFilterable = true;
fixture.detectChanges();
const headers: DebugElement[] = fixture.debugElement.queryAll(By.css(COLUMN_HEADER_CLASS));
// step 1 - move a column
const header = headers[0].nativeElement;
UIInteractions.simulatePointerEvent('pointerdown', header, 50, 50);
await wait();
UIInteractions.simulatePointerEvent('pointermove', header, 56, 56);
await wait(50);
UIInteractions.simulatePointerEvent('pointermove', header, 230, 30);
await wait();
UIInteractions.simulatePointerEvent('pointerup', header, 230, 30);
await wait();
fixture.detectChanges();
// step 2 - verify column are reordered correctly
const columnsList = grid.columns;
expect(columnsList[0].field).toEqual('Name');
expect(columnsList[1].field).toEqual('ID');
expect(columnsList[2].field).toEqual('LastName');
}));
});
describe('', () => {
beforeEach(() => {
fixture = TestBed.createComponent(MovableColumnsLargeComponent);
fixture.detectChanges();
grid = fixture.componentInstance.grid;
grid.moving = true;
});
it('Should be able to scroll forwards to reorder columns that are out of view.', (async () => {
// step 1 - start moving a column and verify columns are scrolled into view,
// when holding the drag ghost over the right edge of the grid
const header = grid.headerCellList[0].nativeElement;
UIInteractions.simulatePointerEvent('pointerdown', header, 50, 50);
await wait();
UIInteractions.simulatePointerEvent('pointermove', header, 56, 56);
await wait();
UIInteractions.simulatePointerEvent('pointermove', header, 485, 30);
await wait(1000);
fixture.detectChanges();
// step 2 - verify the column being moved can be reordered among new columns
UIInteractions.simulatePointerEvent('pointermove', header, 450, 30);
await wait();
UIInteractions.simulatePointerEvent('pointerup', header, 450, 30);
await wait();
fixture.detectChanges();
const list = grid.columns;
expect(list[0].field).toEqual('CompanyName');
expect(list[4].field).toEqual('ID');
}));
it('Should be able to scroll backwards to reorder columns that are out of view.', (async () => {
// step 1 - scroll left to the end
grid.headerContainer.getScroll().scrollLeft = 1000;
await wait(30);
fixture.detectChanges();
// step 2 - start moving a column and verify columns are scrolled into view,
// when holding the drag ghost over the left edge of the grid
const header = grid.headerCellList[4].nativeElement;
UIInteractions.simulatePointerEvent('pointerdown', header, 350, 50);
await wait();
UIInteractions.simulatePointerEvent('pointermove', header, 356, 56);
await wait(50);
UIInteractions.simulatePointerEvent('pointermove', header, 10, 30);
await wait(500);
fixture.detectChanges();
// step 3 - verify the column being moved can be reordered among new columns
UIInteractions.simulatePointerEvent('pointermove', header, 130, 30);
await wait();
UIInteractions.simulatePointerEvent('pointerup', header, 130, 30);
await wait();
fixture.detectChanges();
const list = grid.columns;
expect(list[0].field).toEqual('ID');
expect(list[7].field).toEqual('Region');
}));
it('Should be able to scroll/reorder columns that are out of view - with pinned columns.', (async () => {
grid.getColumnByName('ID').pinned = true;
fixture.detectChanges();
// step 1 - scroll left to the end
grid.headerContainer.getScroll().scrollLeft = 1000;
await wait(30);
fixture.detectChanges();
// step 2 - start moving a column and verify columns are scrolled into view,
// when holding the drag ghost before pinned area edge
const header = grid.headerCellList[5].nativeElement;
UIInteractions.simulatePointerEvent('pointerdown', header, 450, 50);
await wait();
UIInteractions.simulatePointerEvent('pointermove', header, 456, 56);
await wait(50);
UIInteractions.simulatePointerEvent('pointermove', header, 110, 30);
await wait(1000);
fixture.detectChanges();
// step 4 - verify the column being moved can be reordered among new columns
UIInteractions.simulatePointerEvent('pointermove', header, 200, 30);
await wait();
UIInteractions.simulatePointerEvent('pointerup', header, 200, 30);
await wait();
fixture.detectChanges();
const list = grid.columns;
expect(list[0].field).toEqual('ID');
expect(list[2].field).toEqual('Fax');
}));
it('Should preserve cell selection after columns are reordered.', (async () => {
let headers: DebugElement[] = fixture.debugElement.queryAll(By.css(COLUMN_HEADER_CLASS));
// step 1 - select a cell from the 'ID' column
const cell = grid.gridAPI.get_cell_by_index(0, 'ID');
cell.activate(null);
fixture.detectChanges();
expect(cell.selected).toBeTruthy();
// step 2 - move that column and verify selection is preserved
let header = headers[0].nativeElement;
UIInteractions.simulatePointerEvent('pointerdown', header, 70, 50);
await wait();
UIInteractions.simulatePointerEvent('pointermove', header, 64, 56);
await wait(50);
UIInteractions.simulatePointerEvent('pointermove', header, 280, 25);
await wait(50);
UIInteractions.simulatePointerEvent('pointerup', header, 280, 25);
await wait();
fixture.detectChanges();
let columnsList = grid.columns;
expect(columnsList[0].field).toEqual('CompanyName');
expect(columnsList[1].field).toEqual('ContactName');
expect(columnsList[2].field).toEqual('ID');
expect(grid.getCellByColumn(0, 'CompanyName').selected).toBeTruthy();
// step 3 - move another column and verify selection is preserved
headers = fixture.debugElement.queryAll(By.css(COLUMN_HEADER_CLASS));
header = headers[1].nativeElement;
UIInteractions.simulatePointerEvent('pointerdown', header, 150, 50);
await wait();
UIInteractions.simulatePointerEvent('pointermove', header, 150, 56);
await wait(50);
UIInteractions.simulatePointerEvent('pointermove', header, 40, 25);
await wait();
UIInteractions.simulatePointerEvent('pointerup', header, 40, 25);
await wait();
fixture.detectChanges();
columnsList = grid.columns;
expect(columnsList[0].field).toEqual('ContactName');
expect(columnsList[1].field).toEqual('CompanyName');
expect(columnsList[2].field).toEqual('ID');
expect(grid.getCellByColumn(0, 'ContactName').selected).toBeTruthy();
}));
it('Should preserve cell selection after columns are reordered programatically.', (async () => {
let columnsList = grid.columns;
// step 1 - select a cell from the 'ID' column
const cell = grid.gridAPI.get_cell_by_index(0, 'ID');
cell.activate(null);
fixture.detectChanges();
expect(cell.selected).toBeTruthy();
// step 2 - move that column and verify selection is preserved
const column = columnsList[0] as IgxColumnComponent;
column.move(2);
await wait();
fixture.detectChanges();
columnsList = grid.columns;
expect(columnsList[0].field).toEqual('CompanyName');
expect(columnsList[1].field).toEqual('ContactName');
expect(columnsList[2].field).toEqual('ID');
expect(grid.getCellByColumn(0, 'CompanyName').selected).toBeTruthy();
}));
it('Should preserve cell selection after columns are reordered - horizontal scrolling.', (async () => {
const headers: DebugElement[] = fixture.debugElement.queryAll(By.css(COLUMN_HEADER_CLASS));
// step 1 - select a visible cell from the 'ID' column
const cell = grid.gridAPI.get_cell_by_index(0, 'ID');
UIInteractions.simulateClickAndSelectEvent(cell);
fixture.detectChanges();
expect(cell.selected).toBeTruthy();
GridSelectionFunctions.verifySelectedRange(grid, 0, 0, 0, 0);
// step 2 - reorder that column among columns that are currently out of view
// and verify selection is preserved
const header = headers[0].nativeElement;
UIInteractions.simulatePointerEvent('pointerdown', header, 50, 50);
await wait();
UIInteractions.simulatePointerEvent('pointermove', header, 56, 56);
await wait(50);
UIInteractions.simulatePointerEvent('pointermove', header, 490, 30);
await wait(1000);
fixture.detectChanges();
UIInteractions.simulatePointerEvent('pointermove', header, 350, 30);
await wait();
UIInteractions.simulatePointerEvent('pointerup', header, 350, 30);
await wait();
fixture.detectChanges();
GridSelectionFunctions.verifySelectedRange(grid, 0, 0, 0, 0);
}));
it('Should preserve cell selection after columns are reordered - vertical scrolling.', (async () => {
// step 1 - scroll left to the end
grid.headerContainer.getScroll().scrollLeft = 1000;
await wait(50);
fixture.detectChanges();
// step 2 - scroll down vertically and select a cell that was initially out of view
grid.verticalScrollContainer.getScroll().scrollTop = 1200;
await wait(100);
fixture.detectChanges();
const cell = grid.gridAPI.get_cell_by_index(25, 'Phone');
const selectedData = [{ Phone: '40.32.21.21'}];
UIInteractions.simulateClickAndSelectEvent(cell);
fixture.detectChanges();
expect(cell.selected).toBeTruthy();
GridSelectionFunctions.verifySelectedRange(grid, 25, 25, 9, 9);
expect(grid.getSelectedData()).toEqual(selectedData);
// step 3 - scroll up vertically so that the selected cell becomes out of view
grid.verticalScrollContainer.getScroll().scrollTop = 0;
await wait(50);
fixture.detectChanges();
// step 4 - reorder that "Phone" column
const header = fixture.debugElement.queryAll(By.css(COLUMN_HEADER_CLASS))[4].nativeElement;
UIInteractions.simulatePointerEvent('pointerdown', header, 350, 50);
await wait();
UIInteractions.simulatePointerEvent('pointermove', header, 356, 56);
await wait(100);
UIInteractions.simulatePointerEvent('pointermove', header, 10, 30);
await wait(100);
fixture.detectChanges();
UIInteractions.simulatePointerEvent('pointermove', header, 40, 30);
await wait(50);
UIInteractions.simulatePointerEvent('pointerup', header, 40, 30);
await wait(50);
fixture.detectChanges();
// step 5 - verify selection is preserved
grid.verticalScrollContainer.getScroll().scrollTop = 1200;
await wait(100);
fixture.detectChanges();
const newSelectedData = [{Country: 'France'}];
GridSelectionFunctions.verifySelectedRange(grid, 25, 25, 9, 9);
expect(grid.getSelectedData()).toEqual(newSelectedData);
}));
it('Should affect all pages when columns are reordered programatically and paging is enabled.', (async () => {
fixture.componentInstance.paging = true;
fixture.detectChanges();
let columnsList = grid.columns;
// step 1 - move a column
const column = columnsList[0] as IgxColumnComponent;
column.move(2);
await wait();
fixture.detectChanges();
// step 2 - navigate to page 2 and verify correct column order
grid.paginator.paginate(1);
fixture.detectChanges();
columnsList = grid.columns;
expect(columnsList[2].field).toEqual('ID');
expect(columnsList[3].field).toEqual('ContactTitle');
expect(columnsList[4].field).toEqual('Address');
}));
it('Should affect all pages when columns are reordered and paging is enabled.', (async () => {
fixture.componentInstance.paging = true;
fixture.detectChanges();
const headers: DebugElement[] = fixture.debugElement.queryAll(By.css(COLUMN_HEADER_CLASS));
// step 1 - move a column
const header = headers[0].nativeElement;
UIInteractions.simulatePointerEvent('pointerdown', header, 50, 25);
await wait();
UIInteractions.simulatePointerEvent('pointermove', header, 56, 31);
await wait(50);
UIInteractions.simulatePointerEvent('pointermove', header, 420, 31);
await wait(50);
UIInteractions.simulatePointerEvent('pointerup', header, 420, 31);
await wait();
fixture.detectChanges();
// step 2 - navigate to page 2 and verify correct column order
grid.paginator.paginate(1);
fixture.detectChanges();
const columnsList = grid.columns;
expect(columnsList[2].field).toEqual('ContactTitle');
expect(columnsList[3].field).toEqual('ID');
expect(columnsList[4].field).toEqual('Address');
}));
it('Should preserve sorting after columns are reordered.', (async () => {
const headers: DebugElement[] = fixture.debugElement.queryAll(By.css(COLUMN_HEADER_CLASS));
// step 1 - sort the 'ID' column
headers[0].triggerEventHandler('click', new Event('click'));
fixture.detectChanges();
// step 2 - move that column
const header = headers[0].nativeElement;
UIInteractions.simulatePointerEvent('pointerdown', header, 50, 25);
await wait();
UIInteractions.simulatePointerEvent('pointermove', header, 50, 31);
await wait(50);
UIInteractions.simulatePointerEvent('pointermove', header, 420, 31);
await wait(50);
UIInteractions.simulatePointerEvent('pointerup', header, 420, 31);
await wait();
fixture.detectChanges();
// step 3 - verify column remains sorted
expect(grid.columns[3].field).toEqual('ID');
expect(grid.getCellByColumn(0, 'ID').value).toEqual('ALFKI');
}));
it('Should preserve sorting after columns are reordered programatically.', (async () => {
const columnsList = grid.columns;
const headers: DebugElement[] = fixture.debugElement.queryAll(By.css(COLUMN_HEADER_CLASS));
// step 1 - sort the 'ID' column
headers[0].triggerEventHandler('click', new Event('click'));
fixture.detectChanges();
// step 2 - move that column
const column = columnsList[0] as IgxColumnComponent;
column.move(3);
await wait();
fixture.detectChanges();
fixture.detectChanges();
// step 3 - verify column remains sorted
expect(grid.columns[3].field).toEqual('ID');
expect(grid.getCellByColumn(0, 'ID').value).toEqual('ALFKI');
}));
it('Pinning - should be able to reorder pinned columns among themselves.', (async () => {
// step 1 - pin some columns
grid.getColumnByName('Address').pinned = true;
grid.getColumnByName('ID').pinned = true;
grid.getColumnByName('ContactTitle').pinned = true;
fixture.detectChanges();
// step 2 - move a pinned column
const header = fixture.debugElement.queryAll(By.css(COLUMN_HEADER_CLASS))[0].nativeElement;
UIInteractions.simulatePointerEvent('pointerdown', header, 50, 25);
await wait();
UIInteractions.simulatePointerEvent('pointermove', header, 50, 31);
await wait(50);
UIInteractions.simulatePointerEvent('pointermove', header, 280, 31);
await wait(50);
UIInteractions.simulatePointerEvent('pointerup', header, 280, 31);
await wait(50);
fixture.detectChanges();
// step 3 - verify pinned columns are reordered correctly
expect(grid.pinnedColumns[0].field).toEqual('ID');
expect(grid.pinnedColumns[1].field).toEqual('ContactTitle');
expect(grid.pinnedColumns[2].field).toEqual('Address');
}));
it('Pinning - should be able to programatically reorder pinned columns among themselves.', (async () => {
// step 1 - pin some columns
grid.getColumnByName('Address').pinned = true;
grid.getColumnByName('ID').pinned = true;
grid.getColumnByName('ContactTitle').pinned = true;
fixture.detectChanges();
// 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
expect(grid.pinnedColumns[0].field).toEqual('Address');
expect(grid.pinnedColumns[1].field).toEqual('ContactTitle');
expect(grid.pinnedColumns[2].field).toEqual('ID');
}));
it('Pinning - should pin an unpinned column when drag/drop it among pinned columns.', (async () => {
// step 1 - pin some columns
grid.getColumnByName('Address').pinned = true;
grid.getColumnByName('ID').pinned = true;
fixture.detectChanges();
// step 2 - drag/drop an unpinned column among pinned columns
const header = fixture.debugElement.queryAll(By.css(COLUMN_HEADER_CLASS))[3].nativeElement;
UIInteractions.simulatePointerEvent('pointerdown', header, 350, 25);
await wait();
UIInteractions.simulatePointerEvent('pointermove', header, 350, 31);
await wait(50);
UIInteractions.simulatePointerEvent('pointermove', header, 130, 31);
await wait(50);
UIInteractions.simulatePointerEvent('pointerup', header, 130, 31);
await wait();
fixture.detectChanges();
// step 3 - verify column is pinned at the correct place
expect(grid.pinnedColumns[0].field).toEqual('Address');
expect(grid.pinnedColumns[1].field).toEqual('ContactName');
expect(grid.pinnedColumns[2].field).toEqual('ID');
expect(grid.getColumnByName('ContactName').pinned).toBeTruthy();
}));
it('Pinning - should unpin a pinned column when drag/drop it among unpinned columns.', (async () => {
// step 1 - pin some columns
grid.getColumnByName('Address').pinned = true;
grid.getColumnByName('ID').pinned = true;
grid.getColumnByName('ContactTitle').pinned = true;
fixture.detectChanges();
// step 2 - drag/drop a pinned column among unpinned columns
const header = fixture.debugElement.queryAll(By.css(COLUMN_HEADER_CLASS))[1].nativeElement;
UIInteractions.simulatePointerEvent('pointerdown', header, 150, 25);
await wait();
UIInteractions.simulatePointerEvent('pointermove', header, 150, 31);
await wait(50);
UIInteractions.simulatePointerEvent('pointermove', header, 330, 31);
await wait(50);
UIInteractions.simulatePointerEvent('pointerup', header, 330, 31);
await wait();
fixture.detectChanges();
// step 3 - verify column is unpinned at the correct place
expect(grid.pinnedColumns[0].field).toEqual('Address');
expect(grid.pinnedColumns[1].field).toEqual('ContactTitle');
expect(grid.unpinnedColumns[0].field).toEqual('ID');
expect(grid.getColumnByName('ID').pinned).toBeFalsy();
}));
it('Pinning - should not be able to pin a column if pinned area exceeds maximum allowed width.', (async () => {
// step 1 - pin some columns
grid.getColumnByName('Address').pinned = true;
grid.getColumnByName('ID').pinned = true;
grid.getColumnByName('ContactTitle').pinned = true;
fixture.detectChanges();
// step 2 - try drag/drop an unpinned column among pinned columns
const header = fixture.debugElement.queryAll(By.css(COLUMN_HEADER_CLASS))[1].nativeElement;
UIInteractions.simulatePointerEvent('pointerdown', header, 450, 25);
await wait();
UIInteractions.simulatePointerEvent('pointermove', header, 450, 31);
await wait(50);
UIInteractions.simulatePointerEvent('pointermove', header, 180, 31);
await wait(50);
UIInteractions.simulatePointerEvent('pointerup', header, 180, 31);
await wait();
fixture.detectChanges();
// step 3 - verify column cannot be pinned
expect(grid.pinnedColumns.length).toEqual(3);
expect(grid.unpinnedColumns[0].field).toEqual('CompanyName');
expect(grid.getColumnByName('CompanyName').pinned).toBeFalsy();
}));
it('Pinning - Should be able to pin/unpin columns programmatically', (async () => {
const columnsList = grid.columns;
// step 1 - pin some columns
grid.getColumnByName('ID').pinned = true;
grid.getColumnByName('CompanyName').pinned = true;
fixture.detectChanges();
// step 2 - pin a column interactively via drag/drop
// step 2 - move that column and verify selection is preserved
const column = columnsList[4] as IgxColumnComponent;
column.move(2);
await wait();
fixture.detectChanges();
// step 3 - unpin that column programmatically and verify correct order
grid.getColumnByName('ID').unpin();
fixture.detectChanges();
expect(grid.getColumnByName('ID').pinned).toBeFalsy();
expect(grid.unpinnedColumns[0].field).toEqual('ID');
}));
it('Pinning - Should be able to pin/unpin columns both: programmatically and interactively via drag/drop.', (async () => {
// step 1 - pin some columns
grid.getColumnByName('ID').pinned = true;
grid.getColumnByName('CompanyName').pinned = true;
fixture.detectChanges();
// step 2 - pin a column interactively via drag/drop
const header = fixture.debugElement.queryAll(By.css(COLUMN_HEADER_CLASS))[4].nativeElement;
UIInteractions.simulatePointerEvent('pointerdown', header, 450, 25);
await wait();
UIInteractions.simulatePointerEvent('pointermove', header, 450, 31);
await wait(50);
UIInteractions.simulatePointerEvent('pointermove', header, 80, 31);
await wait(50);
UIInteractions.simulatePointerEvent('pointerup', header, 80, 31);
await wait();
fixture.detectChanges();
// step 3 - unpin that column programmatically and verify correct order
grid.getColumnByName('ID').unpin();
fixture.detectChanges();
expect(grid.getColumnByName('ID').pinned).toBeFalsy();
expect(grid.unpinnedColumns[0].field).toEqual('ID');
}));
it('Pinning - Should not be able to pin a column if disablePinning is enabled for that column', (async () => {
// step 1 - pin some columns
grid.getColumnByName('Address').pinned = true;
grid.getColumnByName('ID').pinned = true;
grid.getColumnByName('ContactName').disablePinning = true;
fixture.detectChanges();
// step 2 - drag/drop an unpinned column among pinned columns
const header = fixture.debugElement.queryAll(By.css(COLUMN_HEADER_CLASS))[3].nativeElement;
UIInteractions.simulatePointerEvent('pointerdown', header, 350, 25);
await wait();
UIInteractions.simulatePointerEvent('pointermove', header, 350, 31);
await wait(50);
UIInteractions.simulatePointerEvent('pointermove', header, 130, 31);
await wait(50);
UIInteractions.simulatePointerEvent('pointerup', header, 130, 31);
await wait();
fixture.detectChanges();
// step 3 - verify column is still unpinned
expect(grid.pinnedColumns.length).toEqual(2);
expect(grid.pinnedColumns[0].field).toEqual('Address');
expect(grid.pinnedColumns[1].field).toEqual('ID');
expect(grid.unpinnedColumns[0].field).toEqual('CompanyName');
expect(grid.unpinnedColumns[1].field).toEqual('ContactName');
expect(grid.getColumnByName('ContactName').pinned).toBeFalsy();
}));
it('Pinning - Should not be able to pin a column programmaticaly if disablePinning is enabled for that column', (async () => {
// step 1 - pin some columns
grid.getColumnByName('Address').pinned = true;
grid.getColumnByName('ID').pinned = true;
grid.getColumnByName('ContactName').disablePinning = true;
fixture.detectChanges();
// step 2 - drag/drop an unpinned column among pinned columns
// 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
expect(grid.pinnedColumns.length).toEqual(2);
expect(grid.pinnedColumns[0].field).toEqual('Address');
expect(grid.pinnedColumns[1].field).toEqual('ID');
expect(grid.unpinnedColumns[0].field).toEqual('CompanyName');
expect(grid.unpinnedColumns[1].field).toEqual('ContactName');
expect(grid.getColumnByName('ContactName').pinned).toBeFalsy();
}));
it('Pinning - Should not be able to move unpinned column if disablePinning is enabled for all unpinned columns', (async () => {
// step 1 - pin some columns
grid.getColumnByName('Address').pinned = true;
grid.getColumnByName('ContactTitle').pinned = true;
grid.columns.forEach((column) => {
if (column.field !== 'Address' && column.field !== 'ContactTitle') {
column.disablePinning = true;
}
});
fixture.detectChanges();
// step 2 - drag/drop a pinned column among unpinned columns
const header = fixture.debugElement.queryAll(By.css(COLUMN_HEADER_CLASS))[2].nativeElement;
UIInteractions.simulatePointerEvent('pointerdown', header, 350, 25);
await wait();
UIInteractions.simulatePointerEvent('pointermove', header, 350, 31);
await wait(50);
UIInteractions.simulatePointerEvent('pointermove', header, 400, 31);
await wait(50);
UIInteractions.simulatePointerEvent('pointerup', header, 400, 31);
await wait();
fixture.detectChanges();
// step 3 - verify column is unpinned at the correct place
expect(grid.pinnedColumns[0].field).toEqual('Address');
expect(grid.pinnedColumns[1].field).toEqual('ContactTitle');
expect(grid.unpinnedColumns[0].field).toEqual('CompanyName');
expect(grid.unpinnedColumns[1].field).toEqual('ID');
expect(grid.getColumnByName('ID').pinned).toBeFalsy();
}));
// eslint-disable-next-line max-len
it('Pinning - Should not be able to programmatically move unpinned column if disablePinning is enabled for all unpinned columns', (async () => {
// step 1 - pin some columns
grid.getColumnByName('Address').pinned = true;
grid.getColumnByName('ContactTitle').pinned = true;
fixture.detectChanges();
expect(grid.pinnedColumns[0].field).toEqual('Address');
expect(grid.pinnedColumns[1].field).toEqual('ContactTitle');
expect(grid.unpinnedColumns[0].field).toEqual('ID');
expect(grid.unpinnedColumns[1].field).toEqual('CompanyName');
grid.columns.forEach((col) => {
if (col.field !== 'Address' && col.field !== 'ContactTitle') {
col.disablePinning = true;
}
});
fixture.detectChanges();
// 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
expect(grid.pinnedColumns[0].field).toEqual('Address');
expect(grid.pinnedColumns[1].field).toEqual('ContactTitle');
expect(grid.unpinnedColumns[0].field).toEqual('ID');
expect(grid.unpinnedColumns[1].field).toEqual('CompanyName');
expect(grid.getColumnByName('ID').pinned).toBeFalsy();
}));
});
describe('', () => {
beforeEach(() => {
fixture = TestBed.createComponent(MultiColumnHeadersComponent);
fixture.detectChanges();
grid = fixture.componentInstance.grid;
grid.moving = true;
});
it('MCH - should reorder only columns on the same level (top level simple column).', (async () => {
// step 1 - try reordering simple column level 0 and simple column level 1
const header = fixture.debugElement.queryAll(By.css(COLUMN_HEADER_CLASS))[0].nativeElement;
UIInteractions.simulatePointerEvent('pointerdown', header, 50, 75);
await wait();
UIInteractions.simulatePointerEvent('pointermove', header, 50, 81);
await wait(50);
UIInteractions.simulatePointerEvent('pointermove', header, 200, 81);
await wait();
UIInteractions.simulatePointerEvent('pointerup', header, 200, 81);
await wait();
fixture.detectChanges();
let columnsList = grid.columns.filter((col) => !(col instanceof IgxColumnGroupComponent));
expect(columnsList[0].field).toEqual('Missing');
expect(columnsList[1].field).toEqual('CompanyName');
// step 2 - try reordering simple column level 0 and group column level 1
UIInteractions.simulatePointerEvent('pointerdown', header, 50, 75);
await wait();
UIInteractions.simulatePointerEvent('pointermove', header, 50, 81);
await wait(50);
UIInteractions.simulatePointerEvent('pointermove', header, 380, 81);
await wait();
UIInteractions.simulatePointerEvent('pointerup', header, 380, 81);
await wait();
fixture.detectChanges();
columnsList = grid.columns.filter((col) => !(col instanceof IgxColumnGroupComponent));
expect(columnsList[0].field).toEqual('Missing');
expect(columnsList[1].field).toEqual('CompanyName');
// step 3 - try reordering simple column level 0 and group column level 0
UIInteractions.simulatePointerEvent('pointerdown', header, 50, 75);
await wait();
UIInteractions.simulatePointerEvent('pointermove', header, 50, 81);
await wait(50);
UIInteractions.simulatePointerEvent('pointermove', header, 380, 25);
await wait();
UIInteractions.simulatePointerEvent('pointerup', header, 380, 25);
await wait();
fixture.detectChanges();
columnsList = grid.columns.filter((col) => !(col instanceof IgxColumnGroupComponent));
expect(columnsList[0].field).toEqual('CompanyName');
expect(columnsList[3].field).toEqual('Missing');
}));
it('MCH - should programmatically reorder columns', (async () => {
// step 1 - move level 0 column to first position
let column = grid.getColumnByName('ID');
column.move(0);
await wait();
fixture.detectChanges();
let columnsList = grid.columns.filter((col) => !(col instanceof IgxColumnGroupComponent));
expect(columnsList[0].field).toEqual('ID');
expect(columnsList[1].field).toEqual('Missing');
expect(columnsList[2].field).toEqual('CompanyName');
// step 2 - try moving level 0 column into column group // not possible
column.move(3);
await wait();
fixture.detectChanges();
columnsList = grid.columns.filter((col) => !(col instanceof IgxColumnGroupComponent));
expect(columnsList[0].field).toEqual('ID');
expect(columnsList[1].field).toEqual('Missing');
expect(columnsList[2].field).toEqual('CompanyName');
expect(columnsList[3].field).toEqual('ContactName');
// step 3 - try moving level 0 column into column group // not possible
column.move(5);
await wait();
fixture.detectChanges();
columnsList = grid.columns.filter((col) => !(col instanceof IgxColumnGroupComponent));
expect(columnsList[0].field).toEqual('ID');
expect(columnsList[1].field).toEqual('Missing');
expect(columnsList[2].field).toEqual('CompanyName');
expect(columnsList[3].field).toEqual('ContactName');
// step 4 - try moving level 0 column between two column groups
column.move(4);
await wait();
fixture.detectChanges();
columnsList = grid.columns.filter((col) => !(col instanceof IgxColumnGroupComponent));
expect(columnsList[0].field).toEqual('Missing');
expect(columnsList[1].field).toEqual('CompanyName');
expect(columnsList[2].field).toEqual('ContactName');
expect(columnsList[3].field).toEqual('ContactTitle');
expect(columnsList[4].field).toEqual('ID');
// step 5 - move level 0 column to last position
column.move(8);
await wait();
fixture.detectChanges();
columnsList = grid.columns.filter((col) => !(col instanceof IgxColumnGroupComponent));
expect(columnsList[0].field).toEqual('Missing');
expect(columnsList[1].field).toEqual('CompanyName');
expect(columnsList[2].field).toEqual('ContactName');
expect(columnsList[8].field).toEqual('ID');
// step 6 - move last column between two column groups
column.move(4);
await wait();
fixture.detectChanges();
columnsList = grid.columns.filter((col) => !(col instanceof IgxColumnGroupComponent));
expect(columnsList[0].field).toEqual('Missing');
expect(columnsList[1].field).toEqual('CompanyName');
expect(columnsList[2].field).toEqual('ContactName');
expect(columnsList[3].field).toEqual('ContactTitle');
expect(columnsList[4].field).toEqual('ID');
// step 7 - move level 1 column in the group
column = grid.getColumnByName('Address');
column.move(5);
await wait();
fixture.detectChanges();
columnsList = grid.columns.filter((col) => !(col instanceof IgxColumnGroupComponent));
expect(columnsList[4].field).toEqual('ID');
expect(columnsList[5].field).toEqual('Address');
expect(columnsList[6].field).toEqual('Country');
// step 8 - move level 1 column outside the group // not possible
column.move(4);
await wait();
fixture.detectChanges();
columnsList = grid.columns.filter((col) => !(col instanceof IgxColumnGroupComponent));
expect(columnsList[4].field).toEqual('ID');
expect(columnsList[5].field).toEqual('Address');
expect(columnsList[6].field).toEqual('Country');
// step 9 - move level 2 column outsuide the group
column = grid.getColumnByName('ContactName');
column.move(0);
await wait();
fixture.detectChanges();
columnsList = grid.columns.filter((col) => !(col instanceof IgxColumnGroupComponent));
expect(columnsList[0].field).toEqual('Missing');
expect(columnsList[1].field).toEqual('CompanyName');
expect(columnsList[2].field).toEqual('ContactName');
expect(columnsList[3].field).toEqual('ContactTitle');
// step 10 - move level 2 column inside the group
column = grid.getColumnByName('ContactTitle');
column.move(2);
await wait();
fixture.detectChanges();
columnsList = grid.columns.filter((col) => !(col instanceof IgxColumnGroupComponent));
expect(columnsList[0].field).toEqual('Missing');
expect(columnsList[1].field).toEqual('CompanyName');
expect(columnsList[2].field).toEqual('ContactTitle');
expect(columnsList[3].field).toEqual('ContactName');
// step 11 - move level 2 column inside the group
column = grid.getColumnByName('Missing');
column.move(8);
await wait();
fixture.detectChanges();
columnsList = grid.columns.filter((col) => !(col instanceof IgxColumnGroupComponent));
expect(columnsList[0].field).toEqual('CompanyName');
expect(columnsList[1].field).toEqual('ContactTitle');
expect(columnsList[2].field).toEqual('ContactName');
expect(columnsList[7].field).toEqual('City');
expect(columnsList[8].field).toEqual('Missing');
column = grid.getColumnByName('CompanyName');
column.move(1);
await wait();
fixture.detectChanges();
expect(columnsList[0].field).toEqual('CompanyName');
expect(columnsList[1].field).toEqual('ContactTitle');
expect(columnsList[2].field).toEqual('ContactName');
column.move(2);
await wait();
fixture.detectChanges();
columnsList = grid.columns.filter((col) => !(col instanceof IgxColumnGroupComponent));
expect(columnsList[0].field).toEqual('ContactTitle');
expect(columnsList[1].field).toEqual('ContactName');
expect(columnsList[2].field).toEqual('CompanyName');
}));
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.columns.filter((col) => !(col instanceof IgxColumnGroupComponent));
expect(columnsList[0].field).toEqual('CompanyName');
expect(columnsList[1].field).toEqual('ContactName');
expect(columnsList[3].field).toEqual('Missing');
column = grid.getColumnByName('CompanyName').topLevelParent;
column.move(8);
await wait();
fixture.detectChanges();
columnsList = grid.columns.filter((col) => !(col instanceof IgxColumnGroupComponent));
expect(columnsList[0].field).toEqual('CompanyName');
expect(columnsList[1].field).toEqual('ContactName');
expect(columnsList[3].field).toEqual('Missing');
}));
it('MCH - should be able to move group column to position lastIndex - group.children.length', (async () => {
let column = grid.getColumnByName('Missing');
column.move(3);
await wait();
fixture.detectChanges();
let columnsList = grid.columns.filter((col) => !(col instanceof IgxColumnGroupComponent));
expect(columnsList[0].field).toEqual('CompanyName');
expect(columnsList[1].field).toEqual('ContactName');
expect(columnsList[3].field).toEqual('Missing');
column = grid.getColumnByName('CompanyName').topLevelParent;
column.move(6);
await wait();
fixture.detectChanges();
columnsList = grid.columns.filter((col) => !(col instanceof IgxColumnGroupComponent));
expect(columnsList[6].field).toEqual('CompanyName');
expect(columnsList[7].field).toEqual('ContactName');
expect(columnsList[8].field).toEqual('ContactTitle');
}));
it('MCH - trying to move level 1 column to last position should be impossible', (async () => {
let columnsList = grid.columns.filter((col) => !(col instanceof IgxColumnGroupComponent));
expect(columnsList[0].field).toEqual('Missing');
expect(columnsList[1].field).toEqual('CompanyName');
expect(columnsList[2].field).toEqual('ContactName');
expect(columnsList[8].field).toEqual('Address');
// step 1 - move level 0 column to first position
const column = grid.getColumnByName('CompanyName');
column.move(8);
await wait();
fixture.detectChanges();
columnsList = grid.columns.filter((col) => !(col instanceof IgxColumnGroupComponent));
expect(columnsList[0].field).toEqual('Missing');
expect(columnsList[1].field).toEqual('CompanyName');
expect(columnsList[2].field).toEqual('ContactName');
expect(columnsList[8].field).toEqual('Address');
}));
it('MCH - should reorder only columns on the same level (top level group column).', (async () => {
// step 1 - try reordering group column level 0 and simple column level 1
let header = fixture.debugElement.queryAll(By.css(COLUMN_GROUP_HEADER_CLASS))[0].nativeElement;
UIInteractions.simulatePointerEvent('pointerdown', header, 250, 25);
await wait();
UIInteractions.simulatePointerEvent('pointermove', header, 250, 31);
await wait(50);
UIInteractions.simulatePointerEvent('pointermove', header, 650, 75);
await wait();
UIInteractions.simulatePointerEvent('pointerup', header, 650, 75);
await wait();
fixture.detectChanges();
let columnsList = grid.columns.filter((col) => !(col instanceof IgxColumnGroupComponent));
expect(columnsList[0].field).toEqual('Missing');
expect(columnsList[1].field).toEqual('CompanyName');
expect(columnsList[4].field).toEqual('ID');
expect(columnsList[5].field).toEqual('Country');
// step 2 - try reordering group column level 0 and simple column level 0
UIInteractions.simulatePointerEvent('pointerdown', header, 250, 25);
await wait();
UIInteractions.simulatePointerEvent('pointermove', header, 250, 31);
await wait(50);
UIInteractions.simulatePointerEvent('pointermove', header, 570, 81);
await wait(50);
UIInteractions.simulatePointerEvent('pointerup', header, 570, 81);
await wait();
fixture.detectChanges();
columnsList = grid.columns.filter((col) => !(col instanceof IgxColumnGroupComponent));
expect(columnsList[0].field).toEqual('Missing');
expect(columnsList[1].field).toEqual('ID');
expect(columnsList[2].field).toEqual('CompanyName');
// step 3 - try reordering group column level 0 and group column level 0
header = fixture.debugElement.queryAll(By.css(COLUMN_GROUP_HEADER_CLASS))[2].nativeElement;
UIInteractions.simulatePointerEvent('pointerdown', header, 700, 25);
await wait();
UIInteractions.simulatePointerEvent('pointermove', header, 700, 31);
await wait(50);
UIInteractions.simulatePointerEvent('pointermove', header, 200, 31);
await wait();
UIInteractions.simulatePointerEvent('pointerup', header, 200, 31);
await wait();
fixture.detectChanges();
columnsList = grid.columns.filter((col) => !(col instanceof IgxColumnGroupComponent));
expect(columnsList[0].field).toEqual('Missing');
expect(columnsList[1].field).toEqual('ID');
expect(columnsList[2].field).toEqual('Country');
expect(columnsList[3].field).toEqual('Region');
}));
it('MCH - should reorder only columns on the same level (sub level simple column).', (async () => {
// step 1 - try reordering simple column level 1 and simple column level 0
const header = fixture.debugElement.queryAll(By.css(COLUMN_HEADER_CLASS))[1].nativeElement;
UIInteractions.simulatePointerEvent('pointerdown', header, 150, 100);
await wait();
UIInteractions.simulatePointerEvent('pointermove', header, 150, 106);
await wait(50);
UIInteractions.simulatePointerEvent('pointermove', header, 40, 106);
await wait();
UIInteractions.simulatePointerEvent('pointerup', header, 40, 106);
await wait();
fixture.detectChanges();
let columnsList = grid.columns.filter((col) => !(col instanceof IgxColumnGroupComponent));
expect(columnsList[0].field).toEqual('Missing');
expect(columnsList[1].field).toEqual('CompanyName');
expect(columnsList[4].field).toEqual('ID');
// step 2 - try reordering simple column level 1 and simple column level 2
UIInteractions.simulatePointerEvent('pointerdown', header, 150, 100);
await wait();
UIInteractions.simulatePointerEvent('pointermove', header, 150, 106);
await wait(50);
UIInteractions.simulatePointerEvent('pointermove', header, 300, 125);
await wait();
UIInteractions.simulatePointerEvent('pointerup', header, 300, 125);
await wait();
fixture.detectChanges();
columnsList = grid.columns.filter((col) => !(col instanceof IgxColumnGroupComponent));
expect(columnsList[0].field).toEqual('Missing');
expect(columnsList[1].field).toEqual('CompanyName');
expect(columnsList[4].field).toEqual('ID');
// step 3 - try reordering simple column level 1 and group column level 0
UIInteractions.simulatePointerEvent('pointerdown', header, 150, 100);
await wait();
UIInteractions.simulatePointerEvent('pointermove', header, 150, 106);
await wait(50);
UIInteractions.simulatePointerEvent('pointermove', header, 700, 30);
await wait();
UIInteractions.simulatePointerEvent('pointerup', header, 700, 30);
fixture.detectChanges();
columnsList = grid.columns.filter((col) => !(col instanceof IgxColumnGroupComponent));
expect(columnsList[0].field).toEqual('Missing');
expect(columnsList[1].field).toEqual('CompanyName');
expect(columnsList[4].field).toEqual('ID');
// step 4 - try reordering simple column level 1 and group column level 1
UIInteractions.simulatePointerEvent('pointerdown', header, 150, 100);
await wait();
UIInteractions.simulatePointerEvent('pointermove', header, 150, 106);
await wait(50);
UIInteractions.simulatePointerEvent('pointermove', header, 430, 75);
await wait();
UIInteractions.simulatePointerEvent('pointerup', header, 430, 75);
await wait();
fixture.detectChanges();
columnsList = grid.columns.filter((col) => !(col instanceof IgxColumnGroupComponent));
expect(columnsList[0].field).toEqual('Missing');
expect(columnsList[1].field).toEqual('ContactName');
expect(columnsList[3].field).toEqual('CompanyName');
}));
it('MCH - should reorder only columns on the same level (sub level group column).', (async () => {
// step 1 - try reordering group column level 1 and simple column level 0
const header = fixture.debugElement.queryAll(By.css(COLUMN_GROUP_HEADER_CLASS))[1].nativeElement;
UIInteractions.simulatePointerEvent('pointerdown', header, 300, 75);
await wait();
UIInteractions.simulatePointerEvent('pointermove', header, 300, 81);
await wait(50);
UIInteractions.simulatePointerEvent('pointermove', header, 40, 81);
await wait();
UIInteractions.simulatePointerEvent('pointerup', header, 40, 81);
await wait();
fixture.detectChanges();
let columnsList = grid.columns.filter((col) => !(col instanceof IgxColumnGroupComponent));
expect(columnsList[0].field).toEqual('Missing');
expect(columnsList[1].field).toEqual('CompanyName');
expect(columnsList[2].field).toEqual('ContactName');
// step 2 - try reordering group column level 1 and group column level 0
UIInteractions.simulatePointerEvent('pointerdown', header, 300, 75);
await wait();
UIInteractions.simulatePointerEvent('pointermove', header, 300, 81);
await wait(50);
UIInteractions.simulatePointerEvent('pointermove', header, 800, 25);
await wait();
UIInteractions.simulatePointerEvent('pointerup', header, 800, 25);
await wait();
fixture.detectChanges();
columnsList = grid.columns.filter((col) => !(col instanceof IgxColumnGroupComponent));
expect(columnsList[0].field).toEqual('Missing');
expect(columnsList[1].field).toEqual('CompanyName');
expect(columnsList[2].field).toEqual('ContactName');
// step 3 - try reordering group column level 1 and simple column level 1
UIInteractions.simulatePointerEvent('pointerdown', header, 300, 75);
await wait();
UIInteractions.simulatePointerEvent('pointermove', header, 300, 81);
await wait(50);
UIInteractions.simulatePointerEvent('pointermove', header, 130, 81);
await wait();
UIInteractions.simulatePointerEvent('pointerup', header, 130, 81);
await wait();
fixture.detectChanges();
columnsList = grid.columns.filter((col) => !(col instanceof IgxColumnGroupComponent));
expect(columnsList[0].field).toEqual('Missing');
expect(columnsList[1].field).toEqual('ContactName');
expect(columnsList[3].field).toEqual('CompanyName');
}));
it('MCH - should reorder only columns on the same level, with same parent.', (async () => {
// step 1 - try reordering simple column level 1 and simple column level 1 (different parent)
let header = fixture.debugElement.queryAll(By.css(COLUMN_HEADER_CLASS))[1].nativeElement;
UIInteractions.simulatePointerEvent('pointerdown', header, 150, 75);
await wait();
UIInteractions.simulatePointerEvent('pointermove', header, 150, 81);
await wait(50);
UIInteractions.simulatePointerEvent('pointermove', header, 660, 100);
await wait();
UIInteractions.simulatePointerEvent('pointerup', header, 600, 100);
await wait();
fixture.detectChanges();
let columnsList = grid.columns.filter((col) => !(col instanceof IgxColumnGroupComponent));
expect(columnsList[1].field).toEqual('CompanyName');
expect(columnsList[5].field).toEqual('Country');
// step 2 - try reordering simple column level 2 and simple column level 2 (same parent)
header = fixture.debugElement.queryAll(By.css(COLUMN_HEADER_CLASS))[3].nativeElement;
UIInteractions.simulatePointerEvent('pointerdown', header, 400, 125);
await wait();
UIInteractions.simulatePointerEvent('pointermove', header, 400, 131);
await wait(50);
UIInteractions.simulatePointerEvent('pointermove', header, 260, 131);
await wait();
UIInteractions.simulatePointerEvent('pointerup', header, 260, 131);
await wait();
fixture.detectChanges();
columnsList = grid.columns.filter((col) => !(col instanceof IgxColumnGroupComponent));
expect(columnsList[2].field).toEqual('ContactTitle');
expect(columnsList[3].field).toEqual('ContactName');
// step 3 - try reordering simple column level 0 and simple column level 0 (no parent)
header = fixture.debugElement.queryAll(By.css(COLUMN_HEADER_CLASS))[0].nativeElement;
UIInteractions.simulatePointerEvent('pointerdown', header, 50, 75);
await wait();
UIInteractions.simulatePointerEvent('pointermove', header, 50, 81);
await wait(50);
UIInteractions.simulatePointerEvent('pointermove', header, 580, 81);
await wait();
UIInteractions.simulatePointerEvent('pointerup', header, 580, 81);
await wait();
fixture.detectChanges();
columnsList = grid.columns.filter((col) => !(col instanceof IgxColumnGroupComponent));
expect(columnsList[0].field).toEqual('CompanyName');
expect(columnsList[3].field).toEqual('ID');
expect(columnsList[4].field).toEqual('Missing');
}));
it('MCH - should not break selection and keyboard navigation when reordering columns.', (async () => {
// step 1 - select a cell from 'ContactName' column
const cell = grid.gridAPI.get_cell_by_index(0, 'ContactName');
UIInteractions.simulateClickAndSelectEvent(cell);
fixture.detectChanges();
GridSelectionFunctions.verifySelectedRange(grid, 0, 0, 2, 2);
// step 2 - reorder the parent column and verify selection is preserved
const header = fixture.debugElement.queryAll(By.css(COLUMN_GROUP_HEADER_CLASS))[0].nativeElement;
UIInteractions.simulatePointerEvent('pointerdown', header, 300, 25);
await wait();
UIInteractions.simulatePointerEvent('pointermove', header, 300, 31);
await wait(50);
UIInteractions.simulatePointerEvent('pointermove', header, 580, 50);
await wait();
UIInteractions.simulatePointerEvent('pointerup', header, 580, 50);
await wait();
fixture.detectChanges();
GridSelectionFunctions.verifySelectedRange(grid, 0, 0, 2, 2);
expect(grid.getSelectedData()).toEqual([{CompanyName: 'Alfreds Futterkiste' }]);
// step 3 - navigate right and verify cell selection is updated
const cellEl = fixture.debugElement.queryAll(By.css(CELL_CSS_CLASS))[2];
UIInteractions.simulateClickAndSelectEvent(cellEl);
UIInteractions.triggerKeyDownEvtUponElem('arrowright', cellEl.nativeElement, true);
await wait(50);
fixture.detectChanges();
GridSelectionFunctions.verifySelectedRange(grid, 0, 0, 3, 3);
expect(grid.getSelectedData()).toEqual([{ContactName: 'Maria Anders' }]);
}));
it('MCH - should pin only top level columns.', (async () => {
fixture.componentInstance.isPinned = true;
await wait();
fixture.detectChanges();
// step 2 - try pinning a sub level simple column
let header = fixture.debugElement.queryAll(By.css(COLUMN_HEADER_CLASS))[1].nativeElement;
UIInteractions.simulatePointerEvent('pointerdown', header, 150, 75);
await wait();
fixture.detectChanges();
UIInteractions.simulatePointerEvent('pointermove', header, 150, 81);
await wait();
fixture.detectChanges();
UIInteractions.simulatePointerEvent('pointermove', header, 30, 50);
await wait();
fixture.detectChanges();
UIInteractions.simulatePointerEvent('pointerup', header, 30, 50);
await wait();
fixture.detectChanges();
let columnsList = grid.columns.filter((col) => !(col instanceof IgxColumnGroupComponent));
expect(columnsList[0].field).toEqual('Missing');
expect(columnsList[1].field).toEqual('CompanyName');
// step 3 - try pinning a top level group column
header = fixture.debugElement.queryAll(By.css(COLUMN_GROUP_HEADER_CLASS))[0].nativeElement;
UIInteractions.simulatePointerEvent('pointerdown', header, 150, 25);
await wait();
fixture.detectChanges();
UIInteractions.simulatePointerEvent('pointermove', header, 150, 31);
await wait(30);
fixture.detectChanges();
UIInteractions.simulatePointerEvent('pointermove', header, 40, 50);
await wait(30);
fixture.detectChanges();
UIInteractions.simulatePointerEvent('pointerup', header, 40, 50);
await wait(30);
fixture.detectChanges();
columnsList = grid.columns.filter((col) => !(col instanceof IgxColumnGroupComponent));
expect(columnsList[0].field).toEqual('CompanyName');
expect(columnsList[3].field).toEqual('Missing');
}));
});
});