/**
 * Grid Row Reordering spec document
 */ import { EventHandler , EmitType } from '@syncfusion/ej2-base' ; import { isNullOrUndefined } from '@syncfusion/ej2-base' ; import { createElement , remove } from '@syncfusion/ej2-base' ; import { Grid } from '../../../src/grid/base/grid' ; import { Column } from '../../../src/grid/models/column' ; import { Sort } from '../../../src/grid/actions/sort' ; import { Page } from '../../../src/grid/actions/page' ; import { Selection } from '../../../src/grid/actions/selection' ; import { RowDD } from '../../../src/grid/actions/row-reorder' ; import { data } from '../base/datasource.spec' ; import '../../../node_modules/es6-promise/dist/es6-promise' ; import { createGrid , destroy } from '../base/specutil.spec' ; Grid . Inject ( Page , Sort , Selection ) ; function copyObject ( source , destiation ) { for ( let prop in source ) { destiation [ prop ] = source [ prop ] ; } return destiation ; } function getEventObject ( eventType , eventName , target ? , x ? , y ? ) { let tempEvent = document . createEvent ( eventType ) ; tempEvent . initEvent ( eventName , true , true ) ; let returnObject = copyObject ( tempEvent , { } ) ; returnObject . preventDefault = ( ) => { return true ; } ; if ( ! isNullOrUndefined ( x ) ) { returnObject . pageX = x ; returnObject . clientX = x ; } if ( ! isNullOrUndefined ( y ) ) { returnObject . pageY = y ; returnObject . clientY = y ; } if ( ! isNullOrUndefined ( target ) ) { returnObject . target = returnObject . srcElement = returnObject . toElement = returnObject . currentTarget = target ; } return returnObject ; } function setMouseCordinates ( eventarg , x , y ) { eventarg . pageX = x ; eventarg . pageY = y ; eventarg . clientX = x ; eventarg . clientY = y ; return eventarg ; } describe ( 'Reorder row functionalities' , ( ) => { let gridObj ; let gridObj1 ; let actionComplete ; let actionComplete1 ; let rows ; let rows1 ; window [ 'browserDetails' ] . isIE = false ; beforeAll ( ( done ) => { gridObj = createGrid ( { dataSource : JSON . parse ( JSON . stringify ( < any > data ) ) , allowRowDragAndDrop : true , rowDropSettings : { targetID : undefined } , allowSelection : true , selectionSettings : { type : 'Multiple' , mode : 'Row' } , columns : [ { field : 'OrderID' } , { field : 'CustomerID' } , { field : 'EmployeeID' } , { field : 'Freight' } , { field : 'ShipCity' } ] , allowSorting : true , allowPaging : true , pageSettings : { pageSize : 6 , currentPage : 1 } , actionComplete : actionComplete , } , done ) ; gridObj1 = createGrid ( { dataSource : [ ] , allowRowDragAndDrop : true , rowDropSettings : { targetID : 'Grid' } , allowSelection : true , selectionSettings : { type : 'Multiple' , mode : 'Row' } , columns : [ { field : 'OrderID' } , { field : 'CustomerID' } , { field : 'EmployeeID' } , { field : 'Freight' } , { field : 'ShipCity' } ] , allowSorting : true , allowPaging : true , pageSettings : { pageSize : 6 , currentPage : 1 } , actionComplete : actionComplete1 , } , done ) ; } ) ; it ( 'drag and drop selected row in second grid with out module inject' , ( ) => { gridObj . selectRows ( [ 3 , 4 , 5 ] ) ; rows = gridObj . getRows ( ) ; let mouseDown = getEventObject ( 'MouseEvents' , 'mousedown' , rows [ 4 ] . firstChild , 50 , 195 ) ; EventHandler . trigger ( gridObj . getContent ( ) as HTMLElement , 'mousedown' , mouseDown ) ; let mousemove = getEventObject ( 'MouseEvents' , 'mousemove' , rows [ 5 ] . firstChild , 80 , 218 ) ; EventHandler . trigger ( < any > ( document ) , 'mousemove' , mousemove ) ; mousemove . srcElement = mousemove . target = mousemove . toElement = document . querySelector ( '#Grid1' ) ; EventHandler . trigger ( < any > ( document ) , 'mousemove' , mousemove ) ; mousemove . srcElement = mousemove . target = mousemove . toElement = gridObj . getContent ( ) . querySelectorAll ( 'tr' ) [ 0 ] ; EventHandler . trigger ( < any > ( document ) , 'mousemove' , mousemove ) ; let mouseup = getEventObject ( 'MouseEvents' , 'mouseup' , gridObj . getContent ( ) . querySelectorAll ( 'tr' ) [ 0 ] , 30 , 200 ) ; EventHandler . trigger ( < any > ( document ) , 'mouseup' , mouseup ) ; } ) ; it ( 'inject row drag and drop module' , ( ) => { Grid . Inject ( RowDD ) ; gridObj . allowRowDragAndDrop = false ; gridObj . dataBind ( ) ; gridObj . allowRowDragAndDrop = true ; gridObj . dataBind ( ) ; } ) ; afterAll ( ( ) => { destroy ( gridObj ) ; destroy ( gridObj1 ) ; } ) ; } ) ; describe ( 'Row Drag and Drop module' , ( ) => { describe ( 'Reorder row functionalities' , ( ) => { let gridObj ; let gridObj1 ; let actionComplete ; let actionComplete1 ; let rows ; let rows1 ; window [ 'browserDetails' ] . isIE = false ; beforeAll ( ( done ) => { gridObj = createGrid ( { dataSource : JSON . parse ( JSON . stringify ( < any > data ) ) , allowRowDragAndDrop : true , rowDropSettings : { targetID : undefined } , allowSelection : true , selectionSettings : { type : 'Multiple' , mode : 'Row' } , columns : [ { field : 'OrderID' } , { field : 'CustomerID' } , { field : 'EmployeeID' } , { field : 'Freight' } , { field : 'ShipCity' } ] , allowSorting : true , allowPaging : true , pageSettings : { pageSize : 6 , currentPage : 1 } , actionComplete : actionComplete , } , done ) ; gridObj1 = createGrid ( { dataSource : [ ] , allowRowDragAndDrop : true , rowDropSettings : { targetID : 'Grid' } , allowSelection : true , selectionSettings : { type : 'Multiple' , mode : 'Row' } , columns : [ { field : 'OrderID' } , { field : 'CustomerID' } , { field : 'EmployeeID' } , { field : 'Freight' } , { field : 'ShipCity' } ] , allowSorting : true , allowPaging : true , pageSettings : { pageSize : 6 , currentPage : 1 } , actionComplete : actionComplete1 , } , done ) ; } ) ; it ( 'chekc drag and drop module' , ( ) => { expect ( gridObj . rowDragAndDropModule ) . not . toBe ( undefined ) ; } ) ; afterAll ( ( ) => { destroy ( gridObj ) ; destroy ( gridObj1 ) ; } ) ; } ) ; describe ( 'Row Drag and Drop module' , ( ) => { } ) ; describe ( 'Reorder row functionalities with mouse and touch' , ( ) => { let gridObj ; let gridObj1 ; let preventDefault = new Function ( ) ; let actionComplete ; let actionComplete1 ; let rows ; let rows1 ; let firstData ; let firstData1 ; let bool = false ; window [ 'browserDetails' ] . isIE = false ; beforeAll ( ( done ) => { gridObj = createGrid ( { dataSource : data , allowRowDragAndDrop : true , rowDropSettings : { targetID : undefined } , allowSelection : true , columns : [ { field : 'OrderID' } , { field : 'CustomerID' } , { field : 'EmployeeID' } , { field : 'Freight' , format : 'c2' } , { field : 'OrderDate' , format : 'yMd' } ] , allowSorting : true , allowPaging : true , pageSettings : { pageSize : 6 , currentPage : 1 } , selectionSettings : { type : 'Multiple' } , actionComplete : actionComplete , } , done ) ; gridObj1 = createGrid ( { dataSource : [ ] , allowRowDragAndDrop : true , rowDropSettings : { targetID : 'Grid' } , allowSelection : true , selectionSettings : { type : 'Multiple' , mode : 'Row' } , columns : [ { field : 'OrderID' } , { field : 'CustomerID' } , { field : 'EmployeeID' } , { field : 'Freight' , format : 'c2' } , { field : 'OrderDate' , format : 'yMd' } ] , allowSorting : true , allowPaging : true , pageSettings : { pageSize : 6 , currentPage : 1 } , actionComplete : actionComplete1 , } , done ) ; } ) ; it ( 'set drop target ID' , ( ) => { gridObj . rowDropSettings . targetID = gridObj1 . element . id ; gridObj . dataBind ( ) ; expect ( document . getElementById ( gridObj1 . element . id ) ) . toEqual ( gridObj1 . element ) ; } ) ; afterAll ( ( ) => { destroy ( gridObj ) ; destroy ( gridObj1 ) ; } ) ; } ) ; } ) ;