Skip to content

Commit

Permalink
test(row-drag): Adding ghostContext tests #6081
Browse files Browse the repository at this point in the history
  • Loading branch information
@dafo
dafo committed Nov 6, 2019
1 parent 3269511 commit 46ece50
Showing 1 changed file with 93 additions and 2 deletions.
95 changes: 93 additions & 2 deletions projects/igniteui-angular/src/lib/grids/grid/row-drag.directive.spec.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -392,6 +392,7 @@ describe('IgxGrid - Row Drag Tests #grid', () => {
fixture.detectChanges();
dragIndicatorElements = fixture.debugElement.queryAll(By.css('.' + CSS_CLASS_DRAG_INDICATOR));
dragRows = fixture.debugElement.queryAll(By.directive(IgxRowDragDirective));
const rowDragDirective = dragRows[1].injector.get(IgxRowDragDirective) as any;
const dragIndicatorElement = dragIndicatorElements[2].nativeElement;
const startPoint: Point = UIInteractions.getPointFromElement(dragIndicatorElement);
const movePoint: Point = UIInteractions.getPointFromElement(rows[4].nativeElement);
Expand All @@ -404,6 +405,10 @@ describe('IgxGrid - Row Drag Tests #grid', () => {
ghostElements = document.getElementsByClassName(CSS_CLASS_GHOST_ROW);
expect(ghostElements.length).toEqual(1);

expect(rowDragDirective.ghostContext.data.ProductName).toEqual('NetAdvantage');
expect(rowDragDirective.ghostContext.data.ID).toEqual(2);
expect(rowDragDirective.ghostContext.grid).toEqual(grid);

const ghostText = document.getElementsByClassName(CSS_CLASS_GHOST_ROW)[0].textContent;
expect(ghostText).toEqual(' Moving a row! ');
}));
Expand Down Expand Up @@ -810,7 +815,7 @@ describe('IgxGrid - Row Drag Tests #grid', () => {
dragRows = fixture.debugElement.queryAll(By.directive(IgxRowDragDirective));
}));

it('should be able to drag row on every hiearchical level', (async () => {
it('should be able to drag row on every hierarchical level', (async () => {
// first level row
let dragIndicatorElement: Element = dragIndicatorElements[1].nativeElement;
let rowToDrag = dragGrid.getRowByIndex(0);
Expand Down Expand Up @@ -864,6 +869,41 @@ describe('IgxGrid - Row Drag Tests #grid', () => {
await pointerUp(dragIndicatorElement, dropPoint, fixture);
verifyRowDragEndEvent(nestedChildGrid, rowToDrag, rowDragDirective, false, 1);
}));

it('should correctly create custom ghost element', (async () => {
// first level row
let dragIndicatorElement: Element = dragIndicatorElements[1].nativeElement;
let rowToDrag = dragGrid.getRowByIndex(0);
let rowDragDirective = dragRows[0].injector.get(IgxRowDragDirective) as any;

let startPoint: Point = UIInteractions.getPointFromElement(dragIndicatorElement);
const movePoint: Point = UIInteractions.getPointFromElement(dragGrid.getRowByIndex(3).nativeElement);
const dropPoint: Point = UIInteractions.getPointFromElement(dropAreaElement);

await pointerDown(dragIndicatorElement, startPoint, fixture);
await pointerMove(dragIndicatorElement, movePoint, fixture);
await pointerMove(dragIndicatorElement, dropPoint, fixture);
await pointerUp(dragIndicatorElement, dropPoint, fixture);

expect(rowDragDirective.ghostContext.data.ProductName).toEqual('Product: A0');
expect(rowDragDirective.ghostContext.grid).toEqual(dragGrid);

// second level row
dragIndicatorElement = dragIndicatorElements[8].nativeElement;
const childGrid = dragGrid.hgridAPI.getChildGrids(false)[0];
rowToDrag = childGrid.getRowByIndex(0);
rowDragDirective = dragRows[4].injector.get(IgxRowDragDirective);
startPoint = UIInteractions.getPointFromElement(dragIndicatorElement);

await pointerDown(dragIndicatorElement, startPoint, fixture);
await pointerMove(dragIndicatorElement, movePoint, fixture);
await pointerMove(dragIndicatorElement, dropPoint, fixture);
await pointerUp(dragIndicatorElement, dropPoint, fixture);

expect(rowDragDirective.ghostContext.data.ProductName).toEqual('Product: A0');
expect(rowDragDirective.ghostContext.data.ChildLevels).toEqual(2);
expect(rowDragDirective.ghostContext.grid).toEqual(childGrid);
}));
});
describe('Tree Grid Tests', () => {
let dragGrid: IgxTreeGridComponent;
Expand All @@ -880,7 +920,7 @@ describe('IgxGrid - Row Drag Tests #grid', () => {
dragRows = fixture.debugElement.queryAll(By.directive(IgxRowDragDirective));
}));

it('should be able to drag row on every hiearchical level', (async () => {
it('should be able to drag row on every hierarchical level', (async () => {
// first level row
let dragIndicatorElement: Element = dragIndicatorElements[1].nativeElement;
let rowToDrag = dragGrid.getRowByIndex(0);
Expand Down Expand Up @@ -1138,6 +1178,57 @@ export class IgxHierarchicalGridTestComponent {
}
}

@Component({
template: `
<igx-hierarchical-grid #hierarchicalDragGrid [data]="data"
[autoGenerate]="true" [height]="'500px'" [width]="'1500px'"
primaryKey="ID" [expandChildren]='true' [rowDraggable]="true">
<igx-row-island [key]="'childData'" [expandChildren]='true' [autoGenerate]="true" [rowDraggable]="true" #rowIsland>
<igx-row-island [key]="'childData2'" [autoGenerate]="true" [rowDraggable]="true" #rowIsland2 >
</igx-row-island>
<ng-template let-data igxRowDragGhost>
<div>
Moving {{data.ProductName}}!
</div>
</ng-template>
</igx-row-island>
<ng-template let-data igxRowDragGhost>
<div>
Moving {{data.ProductName}}!
</div>
</ng-template>
</igx-hierarchical-grid>`
})
export class IgxHierarchicalGridCustomGhostTestComponent {
public data;
newData = [];
@ViewChild('hierarchicalDragGrid', { read: IgxHierarchicalGridComponent, static: true }) public hDragGrid: IgxHierarchicalGridComponent;
@ViewChild('rowIsland', { read: IgxRowIslandComponent, static: true }) public rowIsland: IgxRowIslandComponent;
@ViewChild('rowIsland2', { read: IgxRowIslandComponent, static: true }) public rowIsland2: IgxRowIslandComponent;

constructor() {
this.data = this.generateData(2, 3);
}
generateData(count: number, level: number) {
const prods = [];
const currLevel = level;
let children;
for (let i = 0; i < count; i++) {
const item = {
ID: i, ChildLevels: currLevel, ProductName: 'Product: A' + i, 'Col1': i,
'Col2': i, 'Col3': i
};
if (currLevel > 1) {
children = this.generateData(count / 2, currLevel - 1);
const childProp = currLevel === 3 ? 'childData' : 'childData2';
item[childProp] = children;
}
prods.push(item);
}
return prods;
}
}

@Component({
template: `
<igx-tree-grid #treeGrid [data]="data" primaryKey="employeeID" foreignKey="PID" width="900px" height="500px" [rowDraggable]="true">
Expand Down

0 comments on commit 46ece50

Please sign in to comment.