test(row-drag): Adding tests for ghostContext #6081

Author: dafo

projects/igniteui-angular/src/lib/grids/grid/row-drag.directive.spec.ts

@@ -46,6 +46,7 @@ describe('IgxGrid - Row Drag Tests #grid', () => {
                 IgxGridRowCustomGhostDraggableComponent,
                 IgxGridFeaturesRowDragComponent,
                 IgxHierarchicalGridTestComponent,
+                IgxHierarchicalGridCustomGhostTestComponent,
                 IgxTreeGridTestComponent
             ],
             imports: [
@@ -391,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);
@@ -403,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! ');
         }));
@@ -794,7 +800,7 @@ describe('IgxGrid - Row Drag Tests #grid', () => {
             expect(dragCell.value).toEqual(newCellValue);
         }));
     });
-    describe('Hiearchical Grid Tests', () => {
+    describe('Hierarchical Grid Tests', () => {
         let dragGrid: IgxHierarchicalGridComponent;
         let dropGrid: IgxHierarchicalGridComponent;
         let dragRows: DebugElement[];
@@ -809,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);
@@ -863,6 +869,47 @@ 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 () => {
+            fixture = TestBed.createComponent(IgxHierarchicalGridCustomGhostTestComponent );
+            dragGrid = fixture.componentInstance.hDragGrid;
+            fixture.detectChanges();
+            dragIndicatorElements = fixture.debugElement.queryAll(By.css('.' + CSS_CLASS_DRAG_INDICATOR));
+            dragRows = fixture.debugElement.queryAll(By.directive(IgxRowDragDirective));
+
+            // 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;
@@ -1137,6 +1184,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">