igniteui-angular-sovn

import { Component, ViewChild, DebugElement, QueryList, TemplateRef } from '@angular/core'; import { TestBed, ComponentFixture } from '@angular/core/testing'; import { By } from '@angular/platform-browser'; import { NoopAnimationsModule } from '@angular/platform-browser/animations'; import { configureTestSuite } from '../../test-utils/configure-suite'; import { UIInteractions, wait } from '../../test-utils/ui-interactions.spec'; import { DataParent, SampleTestData } from '../../test-utils/sample-test-data.spec'; import { Point } from '../../services/public_api'; import { IgxGridComponent } from './grid.component'; import { IgxColumnComponent } from '../columns/column.component'; import { IgxDragIndicatorIconDirective, IgxRowDragDirective, IgxRowDragGhostDirective } from '../row-drag.directive'; import { IRowDragStartEventArgs, IRowDragEndEventArgs } from '../common/events'; import { IgxDropDirective } from '../../directives/drag-drop/drag-drop.directive'; import { IgxStringFilteringOperand } from '../../data-operations/filtering-condition'; import { IgxHierarchicalGridComponent } from '../hierarchical-grid/public_api'; import { IgxRowIslandComponent } from '../hierarchical-grid/row-island.component'; import { IgxTreeGridComponent } from '../tree-grid/public_api'; import { GridSelectionMode } from '../common/enums'; import { CellType, GridType, RowType } from '../common/grid.interface'; import { SortingDirection } from '../../data-operations/sorting-strategy'; import { IgxRowDirective } from '../row.directive'; import { NgStyle } from '@angular/common'; import { IgxIconComponent } from '../../icon/icon.component'; const DEBOUNCE_TIME = 50; const CSS_CLASS_DRAG_INDICATOR = '.igx-grid__drag-indicator'; const CSS_CLASS_DRAG_INDICATOR_OFF = 'igx-grid__drag-indicator--off'; const CSS_CLASS_GRID_ROW = '.igx-grid__tr'; const CSS_CLASS_DRAG_ROW = 'igx-grid__tr--drag'; const CSS_CLASS_GHOST_ROW = 'igx-grid__tr--ghost'; const CSS_CLASS_SELECTED_ROW = 'igx-grid__tr--selected'; const CSS_CLASS_SELECTION_CHECKBOX = '.igx-grid__cbx-selection'; const CSS_CLASS_VIRTUAL_HSCROLLBAR = '.igx-vhelper--horizontal'; const CSS_CLASS_LAST_PINNED_HEADER = 'igx-grid-th--pinned-last'; const CSS_CLASS_DROPPABLE_AREA = '.droppable-area'; const CSS_CLASS_NON_DROPPABLE_AREA = '.non-droppable-area'; describe('Row Drag Tests', () => { describe('Flat Grid', () => { let fixture: ComponentFixture<any>; let dropAreaElement: Element; let dragIndicatorElements: DebugElement[]; let dragIndicatorElement: Element; let rowDragDirective: IgxRowDragDirective; let startPoint: Point; let movePoint: Point; let dropPoint: Point; let pointerDownEvent: PointerEvent; let pointerMoveEvent: PointerEvent; let pointerUpEvent: PointerEvent; describe('General tests', () => { describe('Drag and drop tests', () => { let grid: IgxGridComponent; let nonDroppableAreaElement: Element; let rows: IgxRowDirective[]; let dragRows: DebugElement[]; let rowToDrag: IgxRowDirective; configureTestSuite((() => { return TestBed.configureTestingModule({ imports: [ NoopAnimationsModule, IgxGridRowDraggableComponent ] }); })); beforeEach(() => { fixture = TestBed.createComponent(IgxGridRowDraggableComponent); grid = fixture.componentInstance.instance; fixture.detectChanges(); rows = grid.rowList.toArray(); dropAreaElement = fixture.debugElement.query(By.css(CSS_CLASS_DROPPABLE_AREA)).nativeElement; nonDroppableAreaElement = fixture.debugElement.query(By.css(CSS_CLASS_NON_DROPPABLE_AREA)).nativeElement; dragIndicatorElements = fixture.debugElement.queryAll(By.css(CSS_CLASS_DRAG_INDICATOR)); dragRows = fixture.debugElement.queryAll(By.directive(IgxRowDragDirective)); }); it('should drag and drop draggable row over droppable container', () => { dragIndicatorElement = dragIndicatorElements[2].nativeElement; rowToDrag = rows[1]; rowDragDirective = dragRows[1].injector.get(IgxRowDragDirective); startPoint = UIInteractions.getPointFromElement(dragIndicatorElement); movePoint = UIInteractions.getPointFromElement(rows[4].nativeElement); dropPoint = UIInteractions.getPointFromElement(dropAreaElement); pointerDownEvent = UIInteractions.createPointerEvent('pointerdown', startPoint); pointerMoveEvent = UIInteractions.createPointerEvent('pointermove', movePoint); pointerUpEvent = UIInteractions.createPointerEvent('pointerup', dropPoint); spyOn(grid.rowDragStart, 'emit'); spyOn(grid.rowDragEnd, 'emit'); expect(rowToDrag.dragging).toBeFalsy(); expect(rowToDrag.grid.rowDragging).toBeFalsy(); rowDragDirective.onPointerDown(pointerDownEvent); rowDragDirective.onPointerMove(pointerMoveEvent); expect(rowToDrag.dragging).toBeTruthy(); expect(rowToDrag.grid.rowDragging).toBeTruthy(); verifyRowDragStartEvent(grid, grid.getRowByIndex(rowToDrag.index), rowToDrag.nativeElement, rowDragDirective); pointerMoveEvent = UIInteractions.createPointerEvent('pointermove', dropPoint); rowDragDirective.onPointerMove(pointerMoveEvent); expect(rowToDrag.dragging).toBeTruthy(); expect(rowToDrag.grid.rowDragging).toBeTruthy(); rowDragDirective.onPointerUp(pointerUpEvent); expect(rowToDrag.dragging).toBeFalsy(); expect(rowToDrag.grid.rowDragging).toBeFalsy(); verifyRowDragEndEvent(grid, grid.getRowByIndex(rowToDrag.index), rowToDrag.nativeElement, rowDragDirective, false); }); it('should be able to drag row only by drag icon', async () => { dragIndicatorElement = dragIndicatorElements[2].nativeElement; rowDragDirective = dragRows[1].injector.get(IgxRowDragDirective); rowToDrag = rows[1]; const rowElement = rowToDrag.nativeElement; const dragIndicatorPoint = UIInteractions.getPointFromElement(dragIndicatorElement); const rowPoint = UIInteractions.getPointFromElement(rowElement); movePoint = UIInteractions.getPointFromElement(rows[4].nativeElement); pointerDownEvent = UIInteractions.createPointerEvent('pointerdown', startPoint); pointerMoveEvent = UIInteractions.createPointerEvent('pointermove', movePoint); pointerUpEvent = UIInteractions.createPointerEvent('pointerup', dropPoint); spyOn(grid.rowDragStart, 'emit'); expect(rowToDrag.dragging).toBeFalsy(); expect(rowToDrag.grid.rowDragging).toBeFalsy(); await pointerDown(rowElement, rowPoint, fixture); await pointerMove(rowElement, movePoint, fixture); expect(rowToDrag.dragging).toBeFalsy(); expect(rowToDrag.grid.rowDragging).toBeFalsy(); expect(grid.rowDragStart.emit).toHaveBeenCalledTimes(0); await pointerDown(dragIndicatorElement, dragIndicatorPoint, fixture); await pointerMove(dragIndicatorElement, movePoint, fixture); expect(rowToDrag.dragging).toBeTruthy(); expect(rowToDrag.grid.rowDragging).toBeTruthy(); verifyRowDragStartEvent(grid, grid.getRowByIndex(rowToDrag.index), rowToDrag.nativeElement, rowDragDirective); await pointerUp(dragIndicatorElement, movePoint, fixture); }); it('should not be able to drag grid header', () => { const header = fixture.debugElement.query(By.css(CSS_CLASS_GRID_ROW)); const headerDragDirective = header.injector.get(IgxRowDragDirective, false); expect(headerDragDirective).toBe(false); }); it('should cancel dragging when ESCAPE key is pressed.', async () => { dragIndicatorElement = dragIndicatorElements[2].nativeElement; const row = rows[1]; rowDragDirective = dragRows[1].injector.get(IgxRowDragDirective); startPoint = UIInteractions.getPointFromElement(dragIndicatorElement); movePoint = UIInteractions.getPointFromElement(rows[4].nativeElement); spyOn(grid.rowDragStart, 'emit'); spyOn(grid.rowDragEnd, 'emit'); rowDragDirective.onPointerDown(UIInteractions.createPointerEvent('pointerdown', startPoint)); rowDragDirective.onPointerMove(UIInteractions.createPointerEvent('pointermove', movePoint)); expect(row.dragging).toBeTruthy(); expect(grid.rowDragging).toBeTruthy(); expect(grid.rowDragStart.emit).toHaveBeenCalledTimes(1); UIInteractions.triggerKeyDownEvtUponElem('Escape', dragIndicatorElement); await wait(DEBOUNCE_TIME); fixture.detectChanges(); expect(row.dragging).toBeFalsy(); expect(grid.rowDragging).toBeFalsy(); expect(grid.rowDragEnd.emit).toHaveBeenCalledTimes(1); }); it('should create ghost element upon row dragging', () => { dragIndicatorElement = dragIndicatorElements[2].nativeElement; rowDragDirective = dragRows[1].injector.get(IgxRowDragDirective); startPoint = UIInteractions.getPointFromElement(dragIndicatorElement); movePoint = UIInteractions.getPointFromElement(rows[4].nativeElement); dropPoint = UIInteractions.getPointFromElement(dropAreaElement); pointerDownEvent = UIInteractions.createPointerEvent('pointerdown', startPoint); pointerMoveEvent = UIInteractions.createPointerEvent('pointermove', movePoint); pointerUpEvent = UIInteractions.createPointerEvent('pointerup', dropPoint); let ghostElements: HTMLCollection; rowDragDirective.onPointerDown(pointerDownEvent); rowDragDirective.onPointerMove(pointerMoveEvent); pointerMoveEvent = UIInteractions.createPointerEvent('pointermove', dropPoint); rowDragDirective.onPointerMove(pointerMoveEvent); ghostElements = document.getElementsByClassName(CSS_CLASS_GHOST_ROW); expect(ghostElements.length).toEqual(1); rowDragDirective.onPointerUp(pointerUpEvent); ghostElements = document.getElementsByClassName(CSS_CLASS_GHOST_ROW); expect(ghostElements.length).toEqual(0); }); it('should apply drag class to row upon row dragging', () => { dragIndicatorElement = dragIndicatorElements[2].nativeElement; rowDragDirective = dragRows[1].injector.get(IgxRowDragDirective); rowToDrag = rows[1]; startPoint = UIInteractions.getPointFromElement(dragIndicatorElement); movePoint = UIInteractions.getPointFromElement(rows[4].nativeElement); dropPoint = UIInteractions.getPointFromElement(dropAreaElement); pointerDownEvent = UIInteractions.createPointerEvent('pointerdown', startPoint); pointerMoveEvent = UIInteractions.createPointerEvent('pointermove', movePoint); pointerUpEvent = UIInteractions.createPointerEvent('pointerup', dropPoint); expect(rowToDrag.dragging).toBeFalsy(); expect(rowToDrag.grid.rowDragging).toBeFalsy(); expect(rowToDrag.element.nativeElement.classList.contains(CSS_CLASS_DRAG_ROW)).toBeFalsy(); rowDragDirective.onPointerDown(pointerDownEvent); rowDragDirective.onPointerMove(pointerMoveEvent); expect(rowToDrag.dragging).toBeTruthy(); expect(rowToDrag.grid.rowDragging).toBeTruthy(); expect(rowToDrag.element.nativeElement.classList.contains(CSS_CLASS_DRAG_ROW)).toBeTruthy(); pointerMoveEvent = UIInteractions.createPointerEvent('pointermove', dropPoint); rowDragDirective.onPointerMove(pointerMoveEvent); rowDragDirective.onPointerUp(pointerUpEvent); expect(rowToDrag.dragging).toBeFalsy(); expect(rowToDrag.grid.rowDragging).toBeFalsy(); expect(rowToDrag.element.nativeElement.classList.contains(CSS_CLASS_DRAG_ROW)).toBeFalsy(); }); it('should align horizontal scrollbar with first column when column pinning is disabled', () => { // has no draggable and selectable rows grid.width = '400px'; grid.rowSelection = GridSelectionMode.none; grid.rowDraggable = false; fixture.detectChanges(); let rowSelectElement: DebugElement = fixture.debugElement.query(By.css(CSS_CLASS_SELECTION_CHECKBOX)); let rowDragIndicatorElement: DebugElement = fixture.debugElement.query(By.css(CSS_CLASS_DRAG_INDICATOR)); let horizontalScrollbarElement: DebugElement = fixture.debugElement.query(By.css(CSS_CLASS_VIRTUAL_HSCROLLBAR)); expect(rowSelectElement).toBeNull(); expect(rowDragIndicatorElement).toBeNull(); // has draggable rows and has no selectable rows grid.rowSelection = GridSelectionMode.none; grid.rowDraggable = true; fixture.detectChanges(); rowSelectElement = fixture.debugElement.query(By.css(CSS_CLASS_SELECTION_CHECKBOX)); rowDragIndicatorElement = fixture.debugElement.query(By.css(CSS_CLASS_DRAG_INDICATOR)); horizontalScrollbarElement = fixture.debugElement.query(By.css(CSS_CLASS_VIRTUAL_HSCROLLBAR)); const dragIndicatorRect = rowDragIndicatorElement.nativeElement.getBoundingClientRect(); let horizontalScrollbarRect = horizontalScrollbarElement.nativeElement.getBoundingClientRect(); expect(rowSelectElement).toBeNull(); expect(dragIndicatorRect.right).toBe(horizontalScrollbarRect.left); // has draggable and selectable rows grid.rowSelection = GridSelectionMode.multiple; grid.rowDraggable = true; fixture.detectChanges(); horizontalScrollbarElement = fixture.debugElement.query(By.css(CSS_CLASS_VIRTUAL_HSCROLLBAR)); horizontalScrollbarRect = horizontalScrollbarElement.nativeElement.getBoundingClientRect(); // The horizontal scrollbar should be visible expect(horizontalScrollbarRect.left).not.toBe(0); }); it('should align horizontal scrollbar with first non-pinned column when column pinning is enabled', () => { grid.width = '400px'; grid.pinColumn('ProductName'); fixture.detectChanges(); // selectable rows disabled let horizontalScrollbarElement: DebugElement = fixture.debugElement.query(By.css(CSS_CLASS_VIRTUAL_HSCROLLBAR)); let horizontalScrollbarRect = horizontalScrollbarElement.nativeElement.getBoundingClientRect(); let pinnedColumnHeaderElement: DebugElement = fixture.debugElement.query(By.css('.' + CSS_CLASS_LAST_PINNED_HEADER)); let pinnedColumnHeaderRect = pinnedColumnHeaderElement.nativeElement.getBoundingClientRect(); // The horizontal scrollbar should be visible expect(horizontalScrollbarRect.left).not.toBe(0); // selectable rows enabled grid.rowSelection = GridSelectionMode.multiple; fixture.detectChanges(); horizontalScrollbarElement = fixture.debugElement.query(By.css(CSS_CLASS_VIRTUAL_HSCROLLBAR)); horizontalScrollbarRect = horizontalScrollbarElement.nativeElement.getBoundingClientRect(); pinnedColumnHeaderElement = fixture.debugElement.query(By.css('.' + CSS_CLASS_LAST_PINNED_HEADER)); pinnedColumnHeaderRect = pinnedColumnHeaderElement.nativeElement.getBoundingClientRect(); expect(pinnedColumnHeaderRect.right).toBe(horizontalScrollbarRect.left); }); it('should fire drag events with correct values of event arguments.', () => { rowToDrag = rows[2]; rowDragDirective = dragRows[2].injector.get(IgxRowDragDirective); dragIndicatorElement = dragIndicatorElements[3].nativeElement; startPoint = UIInteractions.getPointFromElement(dragIndicatorElement); dropPoint = UIInteractions.getPointFromElement(dropAreaElement); pointerDownEvent = UIInteractions.createPointerEvent('pointerdown', startPoint); pointerMoveEvent = UIInteractions.createPointerEvent('pointermove', dropPoint); pointerUpEvent = UIInteractions.createPointerEvent('pointerup', dropPoint); spyOn(grid.rowDragStart, 'emit').and.callThrough(); spyOn(grid.rowDragEnd, 'emit').and.callThrough(); rowDragDirective.onPointerDown(pointerDownEvent); rowDragDirective.onPointerMove(pointerMoveEvent); verifyRowDragStartEvent(grid, grid.getRowByIndex(rowToDrag.index), rowToDrag.nativeElement, rowDragDirective); rowDragDirective.onPointerMove(pointerMoveEvent); rowDragDirective.onPointerUp(pointerUpEvent); verifyRowDragEndEvent(grid, grid.getRowByIndex(rowToDrag.index), rowToDrag.nativeElement, rowDragDirective, false); }); it('should emit dragdrop events if dropping a row on a non-interactive area', () => { dragIndicatorElement = dragIndicatorElements[2].nativeElement; rowToDrag = rows[1]; rowDragDirective = dragRows[1].injector.get(IgxRowDragDirective); startPoint = UIInteractions.getPointFromElement(dragIndicatorElement); movePoint = UIInteractions.getPointFromElement(rows[4].nativeElement); dropPoint = UIInteractions.getPointFromElement(nonDroppableAreaElement); pointerDownEvent = UIInteractions.createPointerEvent('pointerdown', startPoint); pointerMoveEvent = UIInteractions.createPointerEvent('pointermove', movePoint); pointerUpEvent = UIInteractions.createPointerEvent('pointerup', dropPoint); spyOn(grid.rowDragStart, 'emit'); spyOn(grid.rowDragEnd, 'emit'); expect(rowToDrag.dragging).toBeFalsy(); expect(rowToDrag.grid.rowDragging).toBeFalsy(); rowDragDirective.onPointerDown(pointerDownEvent); rowDragDirective.onPointerMove(pointerMoveEvent); expect(rowToDrag.dragging).toBeTruthy(); expect(rowToDrag.grid.rowDragging).toBeTruthy(); verifyRowDragStartEvent(grid, grid.getRowByIndex(rowToDrag.index), rowToDrag.nativeElement, rowDragDirective); pointerMoveEvent = UIInteractions.createPointerEvent('pointermove', dropPoint); rowDragDirective.onPointerMove(pointerMoveEvent); expect(rowToDrag.dragging).toBeTruthy(); expect(rowToDrag.grid.rowDragging).toBeTruthy(); rowDragDirective.onPointerUp(pointerUpEvent); expect(rowToDrag.dragging).toBeFalsy(); expect(rowToDrag.grid.rowDragging).toBeFalsy(); verifyRowDragEndEvent(grid, grid.getRowByIndex(rowToDrag.index), rowToDrag.nativeElement, rowDragDirective, false); }); it('should destroy the drag ghost if dropping a row on a non-interactive area when animations are enabled', () => { grid.rowDragEnd.subscribe((e: IRowDragEndEventArgs) => { e.animation = true; }); dragIndicatorElement = dragIndicatorElements[2].nativeElement; rowToDrag = rows[1]; rowDragDirective = dragRows[1].injector.get(IgxRowDragDirective); startPoint = UIInteractions.getPointFromElement(dragIndicatorElement); movePoint = UIInteractions.getPointFromElement(rows[4].nativeElement); dropPoint = UIInteractions.getPointFromElement(nonDroppableAreaElement); pointerDownEvent = UIInteractions.createPointerEvent('pointerdown', startPoint); pointerMoveEvent = UIInteractions.createPointerEvent('pointermove', movePoint); pointerUpEvent = UIInteractions.createPointerEvent('pointerup', dropPoint); spyOn(grid.rowDragStart, 'emit'); spyOn(grid.rowDragEnd, 'emit'); expect(rowToDrag.dragging).toBeFalsy(); expect(rowToDrag.grid.rowDragging).toBeFalsy(); rowDragDirective.onPointerDown(pointerDownEvent); rowDragDirective.onPointerMove(pointerMoveEvent); expect(rowToDrag.dragging).toBeTruthy(); expect(rowToDrag.grid.rowDragging).toBeTruthy(); verifyRowDragStartEvent(grid, grid.getRowByIndex(rowToDrag.index), rowToDrag.nativeElement, rowDragDirective); pointerMoveEvent = UIInteractions.createPointerEvent('pointermove', dropPoint); rowDragDirective.onPointerMove(pointerMoveEvent); expect(rowToDrag.dragging).toBeTruthy(); expect(rowToDrag.grid.rowDragging).toBeTruthy(); rowDragDirective.onPointerUp(pointerUpEvent); expect(rowToDrag.dragging).toBeFalsy(); expect(rowToDrag.grid.rowDragging).toBeFalsy(); verifyRowDragEndEvent(grid, grid.getRowByIndex(rowToDrag.index), rowToDrag.nativeElement, rowDragDirective, false); const ghostElements = document.getElementsByClassName(CSS_CLASS_GHOST_ROW); expect(ghostElements.length).toEqual(0); const dragIndicatorsOff = document.getElementsByClassName(CSS_CLASS_DRAG_INDICATOR_OFF); expect(dragIndicatorsOff.length).toEqual(0); }); it('should be able to cancel rowDragStart event.', () => { grid.rowDragStart.subscribe((e: IRowDragStartEventArgs) => { e.cancel = true; }); rowToDrag = rows[2]; rowDragDirective = dragRows[2].injector.get(IgxRowDragDirective); dragIndicatorElement = dragIndicatorElements[rowToDrag.index].nativeElement; startPoint = UIInteractions.getPointFromElement(dragIndicatorElement); dropPoint = UIInteractions.getPointFromElement(dropAreaElement); pointerDownEvent = UIInteractions.createPointerEvent('pointerdown', startPoint); pointerMoveEvent = UIInteractions.createPointerEvent('pointermove', dropPoint); pointerUpEvent = UIInteractions.createPointerEvent('pointerup', dropPoint); spyOn(grid.rowDragStart, 'emit').and.callThrough(); spyOn(grid.rowDragEnd, 'emit').and.callThrough(); rowDragDirective.onPointerDown(pointerDownEvent); rowDragDirective.onPointerMove(pointerMoveEvent); expect(grid.rowDragStart.emit).toHaveBeenCalledTimes(1); rowDragDirective.onPointerMove(pointerMoveEvent); rowDragDirective.onPointerUp(pointerUpEvent); expect(grid.rowDragEnd.emit).toHaveBeenCalledTimes(0); const ghostElements = document.getElementsByClassName(CSS_CLASS_GHOST_ROW); expect(ghostElements.length).toEqual(0); }); }); describe('Custom ghost template tests', () => { let grid: IgxGridComponent; let rows: IgxRowDirective[]; let dragRows: DebugElement[]; configureTestSuite((() => { return TestBed.configureTestingModule({ imports: [ NoopAnimationsModule, IgxGridRowCustomGhostDraggableComponent ] }); })); beforeEach(() => { fixture = TestBed.createComponent(IgxGridRowCustomGhostDraggableComponent); grid = fixture.componentInstance.instance; fixture.detectChanges(); }); it('should correctly create custom ghost element', () => { dropAreaElement = fixture.debugElement.query(By.css(CSS_CLASS_DROPPABLE_AREA)).nativeElement; rows = grid.rowList.toArray(); dragIndicatorElements = fixture.debugElement.queryAll(By.css(CSS_CLASS_DRAG_INDICATOR)); dragRows = fixture.debugElement.queryAll(By.directive(IgxRowDragDirective)); rowDragDirective = dragRows[1].injector.get(IgxRowDragDirective); dragIndicatorElement = dragIndicatorElements[2].nativeElement; startPoint = UIInteractions.getPointFromElement(dragIndicatorElement); movePoint = UIInteractions.getPointFromElement(rows[4].nativeElement); dropPoint = UIInteractions.getPointFromElement(dropAreaElement); pointerDownEvent = UIInteractions.createPointerEvent('pointerdown', startPoint); pointerMoveEvent = UIInteractions.createPointerEvent('pointermove', movePoint); rowDragDirective.onPointerDown(pointerDownEvent); rowDragDirective.onPointerMove(pointerMoveEvent); pointerMoveEvent = UIInteractions.createPointerEvent('pointermove', dropPoint); rowDragDirective.onPointerMove(pointerMoveEvent); const ghostElements: HTMLCollection = document.getElementsByClassName(CSS_CLASS_GHOST_ROW); expect(ghostElements.length).toEqual(1); expect((rowDragDirective as any).ghostContext.data.ProductName).toEqual('NetAdvantage'); expect((rowDragDirective as any).ghostContext.data.ID).toEqual(2); expect((rowDragDirective as any).ghostContext.grid).toEqual(grid); const ghostText = document.getElementsByClassName(CSS_CLASS_GHOST_ROW)[0].textContent; expect(ghostText).toEqual(' Moving a row! '); pointerUpEvent = UIInteractions.createPointerEvent('pointerup', dropPoint); rowDragDirective.onPointerUp(pointerUpEvent); }); it('should allow setting custom drag icon and ghost element via Input.', () => { dropAreaElement = fixture.debugElement.query(By.css(CSS_CLASS_DROPPABLE_AREA)).nativeElement; grid.dragIndicatorIconTemplate = fixture.componentInstance.rowDragTemplate; grid.dragGhostCustomTemplate = fixture.componentInstance.rowDragGhostTemplate; fixture.detectChanges(); rows = grid.rowList.toArray(); dragIndicatorElements = fixture.debugElement.queryAll(By.css(CSS_CLASS_DRAG_INDICATOR)); dragIndicatorElement = dragIndicatorElements[2].nativeElement; dragRows = fixture.debugElement.queryAll(By.directive(IgxRowDragDirective)); rowDragDirective = dragRows[1].injector.get(IgxRowDragDirective); expect(dragIndicatorElement.textContent.trim()).toBe('expand_less'); startPoint = UIInteractions.getPointFromElement(dragIndicatorElement); movePoint = UIInteractions.getPointFromElement(rows[4].nativeElement); dropPoint = UIInteractions.getPointFromElement(dropAreaElement); pointerDownEvent = UIInteractions.createPointerEvent('pointerdown', startPoint); pointerMoveEvent = UIInteractions.createPointerEvent('pointermove', movePoint); rowDragDirective.onPointerDown(pointerDownEvent); rowDragDirective.onPointerMove(pointerMoveEvent); pointerMoveEvent = UIInteractions.createPointerEvent('pointermove', dropPoint); rowDragDirective.onPointerMove(pointerMoveEvent); const ghostElements: HTMLCollection = document.getElementsByClassName(CSS_CLASS_GHOST_ROW); expect(ghostElements.length).toEqual(1); const ghostText = document.getElementsByClassName(CSS_CLASS_GHOST_ROW)[0].textContent; expect(ghostText.trim()).toEqual('CUSTOM'); pointerUpEvent = UIInteractions.createPointerEvent('pointerup', dropPoint); rowDragDirective.onPointerUp(pointerUpEvent); }); }); }); describe('Grid feature integration tests', () => { let dragGrid: IgxGridComponent; let dropGrid: IgxGridComponent; let dragGridRows: IgxRowDirective[]; let dropGridRows: IgxRowDirective[]; let dragRows: DebugElement[]; configureTestSuite((() => { return TestBed.configureTestingModule({ imports: [ NoopAnimationsModule, IgxGridFeaturesRowDragComponent ] }); })); beforeEach(() => { fixture = TestBed.createComponent(IgxGridFeaturesRowDragComponent); dragGrid = fixture.componentInstance.dragGrid; dropGrid = fixture.componentInstance.dropGrid; fixture.detectChanges(); dragGridRows = dragGrid.rowList.toArray(); dropAreaElement = fixture.debugElement.query(By.directive(IgxDropDirective)).nativeElement; dragIndicatorElements = fixture.debugElement.queryAll(By.css(CSS_CLASS_DRAG_INDICATOR)); dragRows = fixture.debugElement.queryAll(By.directive(IgxRowDragDirective)); }); const verifyDragAndDropRowCellValues = (dragRowIndex: number, dropRowIndex: number) => { const dragRow = dragGrid.gridAPI.get_row_by_index(dragRowIndex); const dragRowCells = (dragRow.cells as QueryList<CellType>).toArray(); const dropRow = dropGrid.gridAPI.get_row_by_index(dropRowIndex); const dropRowCells = (dropRow.cells as QueryList<CellType>).toArray(); for (let cellIndex = 0; cellIndex < dropRowCells.length; cellIndex++) { expect(dropRowCells[cellIndex].value).toEqual(dragRowCells[cellIndex].value); } }; it('should drop row data in the proper grid columns', () => { dragIndicatorElement = dragIndicatorElements[2].nativeElement; rowDragDirective = dragRows[1].injector.get(IgxRowDragDirective); startPoint = UIInteractions.getPointFromElement(dragIndicatorElement); movePoint = UIInteractions.getPointFromElement(dragGridRows[2].nativeElement); dropPoint = UIInteractions.getPointFromElement(dropAreaElement); pointerDownEvent = UIInteractions.createPointerEvent('pointerdown', startPoint); pointerMoveEvent = UIInteractions.createPointerEvent('pointermove', dropPoint); pointerUpEvent = UIInteractions.createPointerEvent('pointerup', dropPoint); rowDragDirective.onPointerDown(pointerDownEvent); rowDragDirective.onPointerMove(pointerMoveEvent); rowDragDirective.onPointerUp(pointerUpEvent); fixture.detectChanges(); verifyDragAndDropRowCellValues(1, 0); }); it('should be able to drag grid row when column moving is enabled', () => { const dragGridColumns = dragGrid.columns; dragGrid.moveColumn(dragGridColumns[0], dragGridColumns[2]); fixture.detectChanges(); dragIndicatorElement = dragIndicatorElements[2].nativeElement; const row = dragGridRows[1]; rowDragDirective = dragRows[1].injector.get(IgxRowDragDirective); const dragRowCells = row.cells.toArray(); startPoint = UIInteractions.getPointFromElement(dragIndicatorElement); movePoint = UIInteractions.getPointFromElement(dragGridRows[2].nativeElement); dropPoint = UIInteractions.getPointFromElement(dropAreaElement); pointerDownEvent = UIInteractions.createPointerEvent('pointerdown', startPoint); pointerMoveEvent = UIInteractions.createPointerEvent('pointermove', movePoint); pointerUpEvent = UIInteractions.createPointerEvent('pointerup', dropPoint); spyOn(dragGrid.rowDragStart, 'emit').and.callThrough(); spyOn(dragGrid.rowDragEnd, 'emit').and.callThrough(); rowDragDirective.onPointerDown(pointerDownEvent); rowDragDirective.onPointerMove(pointerMoveEvent); expect(row.dragging).toBeTruthy(); expect(row.grid.rowDragging).toBeTruthy(); verifyRowDragStartEvent(dragGrid, dragGrid.getRowByIndex(row.index), row.nativeElement, rowDragDirective); pointerMoveEvent = UIInteractions.createPointerEvent('pointermove', dropPoint); rowDragDirective.onPointerMove(pointerMoveEvent); rowDragDirective.onPointerUp(pointerUpEvent); fixture.detectChanges(); expect(row.dragging).toBeFalsy(); expect(row.grid.rowDragging).toBeFalsy(); verifyRowDragEndEvent(dragGrid, dragGrid.getRowByIndex(row.index), row.nativeElement, rowDragDirective, false); dropGridRows = dropGrid.rowList.toArray(); const dropRowCells = dropGridRows[0].cells.toArray(); expect(dropRowCells[0].value).toEqual(dragRowCells[2].value); expect(dropRowCells[1].value).toEqual(dragRowCells[0].value); 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(); dragIndicatorElement = dragIndicatorElements[2].nativeElement; const row = dragGridRows[1]; rowDragDirective = dragRows[1].injector.get(IgxRowDragDirective); const dragRowCells = row.cells.toArray(); startPoint = UIInteractions.getPointFromElement(dragIndicatorElement); movePoint = UIInteractions.getPointFromElement(dragGridRows[2].nativeElement); dropPoint = UIInteractions.getPointFromElement(dropAreaElement); pointerDownEvent = UIInteractions.createPointerEvent('pointerdown', startPoint); pointerMoveEvent = UIInteractions.createPointerEvent('pointermove', movePoint); pointerUpEvent = UIInteractions.createPointerEvent('pointerup', dropPoint); spyOn(dragGrid.rowDragStart, 'emit').and.callThrough(); spyOn(dragGrid.rowDragEnd, 'emit').and.callThrough(); rowDragDirective.onPointerDown(pointerDownEvent); rowDragDirective.onPointerMove(pointerMoveEvent); expect(row.dragging).toBeTruthy(); expect(row.grid.rowDragging).toBeTruthy(); verifyRowDragStartEvent(dragGrid, dragGrid.getRowByIndex(row.index), row.nativeElement, rowDragDirective); pointerMoveEvent = UIInteractions.createPointerEvent('pointermove', dropPoint); rowDragDirective.onPointerMove(pointerMoveEvent); rowDragDirective.onPointerUp(pointerUpEvent); fixture.detectChanges(); expect(row.dragging).toBeFalsy(); expect(row.grid.rowDragging).toBeFalsy(); verifyRowDragEndEvent(dragGrid, dragGrid.getRowByIndex(row.index), row.nativeElement, rowDragDirective, false); dropGridRows = dropGrid.rowList.toArray(); const dropRowCells = dropGridRows[0].cells.toArray(); expect(dropRowCells[0].value).toEqual(dragRowCells[1].value); expect(dropRowCells[1].value).toEqual(dragRowCells[2].value); expect(dropRowCells[2].value).toEqual(dragRowCells[0].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 hiding is enabled', () => { const hiddenDragCellValue = dragGrid.getCellByColumn(1, 'Downloads').value; const column = dragGrid.getColumnByName('Downloads'); column.hidden = true; dragIndicatorElement = dragIndicatorElements[2].nativeElement; const row = dragGridRows[1]; rowDragDirective = dragRows[1].injector.get(IgxRowDragDirective); startPoint = UIInteractions.getPointFromElement(dragIndicatorElement); movePoint = UIInteractions.getPointFromElement(dragGridRows[2].nativeElement); dropPoint = UIInteractions.getPointFromElement(dropAreaElement); pointerDownEvent = UIInteractions.createPointerEvent('pointerdown', startPoint); pointerMoveEvent = UIInteractions.createPointerEvent('pointermove', movePoint); pointerUpEvent = UIInteractions.createPointerEvent('pointerup', dropPoint); spyOn(dragGrid.rowDragStart, 'emit').and.callThrough(); spyOn(dragGrid.rowDragEnd, 'emit').and.callThrough(); rowDragDirective.onPointerDown(pointerDownEvent); rowDragDirective.onPointerMove(pointerMoveEvent); expect(row.dragging).toBeTruthy(); expect(dragGrid.rowDragging).toBeTruthy(); verifyRowDragStartEvent(dragGrid, dragGrid.getRowByIndex(row.index), row.nativeElement, rowDragDirective); pointerMoveEvent = UIInteractions.createPointerEvent('pointermove', dropPoint); rowDragDirective.onPointerMove(pointerMoveEvent); rowDragDirective.onPointerUp(pointerUpEvent); fixture.detectChanges(); expect(row.dragging).toBeFalsy(); expect(dragGrid.rowDragging).toBeFalsy(); expect(dropGrid.rowList.length).toEqual(1); verifyRowDragEndEvent(dragGrid, dragGrid.getRowByIndex(row.index), row.nativeElement, rowDragDirective, false); const hiddenDropCellValue = dropGrid.getCellByColumn(0, 'Downloads').value; expect(hiddenDropCellValue).toEqual(hiddenDragCellValue); }); it('should be able to drag sorted grid row', () => { dragGrid.sort({ fieldName: 'ProductName', dir: SortingDirection.Desc, ignoreCase: true }); dragIndicatorElement = dragIndicatorElements[2].nativeElement; const row = dragGridRows[1]; rowDragDirective = dragRows[1].injector.get(IgxRowDragDirective); startPoint = UIInteractions.getPointFromElement(dragIndicatorElement); movePoint = UIInteractions.getPointFromElement(dragGridRows[4].nativeElement); dropPoint = UIInteractions.getPointFromElement(dropAreaElement); pointerDownEvent = UIInteractions.createPointerEvent('pointerdown', startPoint); pointerMoveEvent = UIInteractions.createPointerEvent('pointermove', movePoint); pointerUpEvent = UIInteractions.createPointerEvent('pointerup', dropPoint); spyOn(dragGrid.rowDragStart, 'emit').and.callThrough(); spyOn(dragGrid.rowDragEnd, 'emit').and.callThrough(); rowDragDirective.onPointerDown(pointerDownEvent); rowDragDirective.onPointerMove(pointerMoveEvent); expect(row.dragging).toBeTruthy(); expect(row.grid.rowDragging).toBeTruthy(); verifyRowDragStartEvent(dragGrid, dragGrid.getRowByIndex(row.index), row.nativeElement, rowDragDirective); pointerMoveEvent = UIInteractions.createPointerEvent('pointermove', dropPoint); rowDragDirective.onPointerMove(pointerMoveEvent); rowDragDirective.onPointerUp(pointerUpEvent); fixture.detectChanges(); expect(row.dragging).toBeFalsy(); expect(row.grid.rowDragging).toBeFalsy(); verifyRowDragEndEvent(dragGrid, dragGrid.getRowByIndex(row.index), row.nativeElement, rowDragDirective, false); expect(dropGrid.rowList.length).toEqual(1); verifyDragAndDropRowCellValues(1, 0); }); it('should be able to drag filtered grid row', () => { dragGrid.filter('ProductName', 'Advantage', IgxStringFilteringOperand.instance().condition('contains'), true); dragIndicatorElement = dragIndicatorElements[2].nativeElement; const row = dragGridRows[1]; rowDragDirective = dragRows[1].injector.get(IgxRowDragDirective); startPoint = UIInteractions.getPointFromElement(dragIndicatorElement); movePoint = UIInteractions.getPointFromElement(dragGridRows[4].nativeElement); dropPoint = UIInteractions.getPointFromElement(dropAreaElement); pointerDownEvent = UIInteractions.createPointerEvent('pointerdown', startPoint); pointerMoveEvent = UIInteractions.createPointerEvent('pointermove', movePoint); pointerUpEvent = UIInteractions.createPointerEvent('pointerup', dropPoint); spyOn(dragGrid.rowDragStart, 'emit').and.callThrough(); spyOn(dragGrid.rowDragEnd, 'emit').and.callThrough(); rowDragDirective.onPointerDown(pointerDownEvent); rowDragDirective.onPointerMove(pointerMoveEvent); expect(row.dragging).toBeTruthy(); expect(row.grid.rowDragging).toBeTruthy(); verifyRowDragStartEvent(dragGrid, dragGrid.getRowByIndex(row.index), row.nativeElement, rowDragDirective); pointerMoveEvent = UIInteractions.createPointerEvent('pointermove', dropPoint); rowDragDirective.onPointerMove(pointerMoveEvent); rowDragDirective.onPointerUp(pointerUpEvent); fixture.detectChanges(); expect(row.dragging).toBeFalsy(); expect(row.grid.rowDragging).toBeFalsy(); verifyRowDragEndEvent(dragGrid, dragGrid.getRowByIndex(row.index), row.nativeElement, rowDragDirective, false); expect(dropGrid.rowList.length).toEqual(1); verifyDragAndDropRowCellValues(1, 0); }); it('should be able to drag selected grid row', () => { dragGrid.rowSelection = GridSelectionMode.multiple; fixture.detectChanges(); dragGrid.selectRows([2], false); fixture.detectChanges(); dragIndicatorElement = dragIndicatorElements[2].nativeElement; const row = dragGridRows[1]; rowDragDirective = dragRows[1].injector.get(IgxRowDragDirective); expect(row.selected).toBeTruthy(); startPoint = UIInteractions.getPointFromElement(dragIndicatorElement); movePoint = UIInteractions.getPointFromElement(dragGridRows[4].nativeElement); dropPoint = UIInteractions.getPointFromElement(dropAreaElement); pointerDownEvent = UIInteractions.createPointerEvent('pointerdown', startPoint); pointerMoveEvent = UIInteractions.createPointerEvent('pointermove', movePoint); pointerUpEvent = UIInteractions.createPointerEvent('pointerup', dropPoint); spyOn(dragGrid.rowDragStart, 'emit').and.callThrough(); spyOn(dragGrid.rowDragEnd, 'emit').and.callThrough(); rowDragDirective.onPointerDown(pointerDownEvent); rowDragDirective.onPointerMove(pointerMoveEvent); expect(row.dragging).toBeTruthy(); expect(row.grid.rowDragging).toBeTruthy(); verifyRowDragStartEvent(dragGrid, dragGrid.getRowByIndex(row.index), row.nativeElement, rowDragDirective); pointerMoveEvent = UIInteractions.createPointerEvent('pointermove', dropPoint); rowDragDirective.onPointerMove(pointerMoveEvent); rowDragDirective.onPointerUp(pointerUpEvent); fixture.detectChanges(); expect(row.dragging).toBeFalsy(); expect(row.grid.rowDragging).toBeFalsy(); verifyRowDragEndEvent(dragGrid, dragGrid.getRowByIndex(row.index), row.nativeElement, rowDragDirective, false); expect(dropGrid.rowList.length).toEqual(1); expect(row.selected).toBeTruthy(); }); it('should not apply selection class to ghost element when dragging selected grid row', () => { dragGrid.rowSelection = GridSelectionMode.multiple; fixture.detectChanges(); dragGrid.selectRows([2], false); fixture.detectChanges(); dragIndicatorElement = dragIndicatorElements[2].nativeElement; rowDragDirective = dragRows[1].injector.get(IgxRowDragDirective); const row = dragGridRows[1]; expect(row.selected).toBeTruthy(); startPoint = UIInteractions.getPointFromElement(dragIndicatorElement); movePoint = UIInteractions.getPointFromElement(dragGridRows[4].nativeElement); dropPoint = UIInteractions.getPointFromElement(dropAreaElement); pointerDownEvent = UIInteractions.createPointerEvent('pointerdown', startPoint); pointerMoveEvent = UIInteractions.createPointerEvent('pointermove', movePoint); pointerUpEvent = UIInteractions.createPointerEvent('pointerup', dropPoint); rowDragDirective.onPointerDown(pointerDownEvent); rowDragDirective.onPointerMove(pointerMoveEvent); expect(row.dragging).toBeTruthy(); expect(row.grid.rowDragging).toBeTruthy(); const ghostElements = document.getElementsByClassName(CSS_CLASS_GHOST_ROW); const ghostElement = ghostElements[0]; expect(ghostElements.length).toEqual(1); expect(ghostElement.classList.contains(CSS_CLASS_SELECTED_ROW)).toBeFalsy(); pointerMoveEvent = UIInteractions.createPointerEvent('pointermove', dropPoint); rowDragDirective.onPointerMove(pointerMoveEvent); rowDragDirective.onPointerUp(pointerUpEvent); fixture.detectChanges(); }); it('should be able to drag grid row with selected cells', () => { const range = { rowStart: 1, rowEnd: 1, columnStart: 0, columnEnd: 2 }; dragGrid.sele