/**
 * virtual scrolling spec
 */ import { EmitType , EventHandler } from '@syncfusion/ej2-base' ; import { extend } from '@syncfusion/ej2-base' ; import { DataManager } from '@syncfusion/ej2-data' ; import { createElement , remove } from '@syncfusion/ej2-base' ; import { Grid } from '../../../src/grid/base/grid' ; import { Sort } from '../../../src/grid/actions/sort' ; import { Group } from '../../../src/grid/actions/group' ; import { Selection } from '../../../src/grid/actions/selection' ; import { Filter } from '../../../src/grid/actions/filter' ; import { VirtualScroll } from '../../../src/grid/actions/virtual-scroll' ; import { GridModel } from '../../../src/grid/base/grid-model' ; import { Column , ColumnModel } from '../../../src/grid/models/column' ; import { Row } from '../../../src/grid/models/row' ; import { VirtualContentRenderer } from '../../../src/grid/renderer/virtual-content-renderer' ; import { VirtualRowModelGenerator } from '../../../src/grid/services/virtual-row-model-generator' ; import { RowModelGenerator } from '../../../src/grid/services/row-model-generator' ; import '../../../node_modules/es6-promise/dist/es6-promise' ; Grid . Inject ( VirtualScroll , Sort , Filter , Selection , Group ) ; let createGrid = ( options , done ) : Grid => { let grid ; let dataBound = ( ) => { done ( ) ; } ; let div = createElement ( 'div' , { id : 'Grid' } ) ; document . body . appendChild ( div ) ; grid = new Grid ( extend ( { } , { dataBound : dataBound , } , options ) ) ; grid . appendTo ( div ) ; return grid ; } ; let destroy = ( grid ) => { if ( grid ) { grid . destroy ( ) ; document . getElementById ( 'Grid' ) . remove ( ) ; } } ; let ctr = 0 ; let count500 = Array . apply ( null , Array ( 5 ) ) . map ( ( ) => 'Column' + ++ ctr + '' ) ; let count5000 = Array . apply ( null , Array ( 500 ) ) . map ( ( ) => 'Column' + ++ ctr + '' ) ; let data = ( ( ) => { let arr = [ ] ; for ( let i = 0 , o = { } , j = 0 ; i < 1000 ; i ++ , j ++ , o = { } ) { count500 . forEach ( ( lt ) => o [ lt ] = 'Column' + lt + 'Row' + i ) ; arr [ j ] = o ; } return arr ; } ) ( ) ; let data1 = ( ( ) => { let arr = [ ] ; for ( let i = 0 , o = { } , j = 0 ; i < 1000 ; i ++ , j ++ , o = { } ) { count5000 . forEach ( ( lt ) => o [ lt ] = 'Column' + lt + 'Row' + i ) ; arr [ j ] = o ; } return arr ; } ) ( ) ; describe ( 'Virtualization testing' , ( ) => { describe ( 'scroll continous' , ( ) => { let grid ; let rows ; beforeAll ( ( done ) => { grid = createGrid ( { dataSource : data , columns : count500 , enableVirtualization : true , allowFiltering : true , allowSorting : true , height : 300 } , ( ) => { let content = ( < HTMLElement > grid . getContent ( ) . firstChild ) ; EventHandler . trigger ( content , 'wheel' ) ; content . scrollTop = 10 ; content . scrollTop = 500 ; EventHandler . trigger ( content , 'scroll' , { target : content } ) ; setTimeout ( done , 100 ) ; } ) ; } ) ; afterAll ( ( ) => { destroy ( grid ) ; } ) ; } ) ; describe ( 'virtualization with grouping enabled' , ( ) => { let grid ; let rows ; beforeAll ( ( done ) => { grid = createGrid ( { dataSource : data , columns : count500 , allowGrouping : true , groupSettings : { columns : [ 'Column1' ] } , enableVirtualization : true , height : 300 } , ( ) => { let content = ( < HTMLElement > grid . getContent ( ) . firstChild ) ; EventHandler . trigger ( ( < HTMLElement > grid . getContent ( ) . firstChild ) , 'wheel' ) ; content . scrollTop = 10 ; content . scrollTop = 1200 ; setTimeout ( done , 200 ) ; } ) ; } ) ; it ( 'check pageSize' , ( ) => { let row_model = new RowModelGenerator ( grid ) ; row_model . refreshRows ( ( < any > grid . contentModule ) . rows ) ; let contentModule = < VirtualContentRenderer > grid . contentModule ; let fn = ( < any > ( contentModule as any ) . observer ) . virtualScrollHandler ( function ( ) { } , function ( ) { } ) ; let elem = createElement ( 'div' ) ; elem . scrollTop = 32 ; elem . scrollLeft = - 12 ; ( contentModule as any ) . observer . fromWheel = true ; ( contentModule as any ) . observer . options . debounceEvent = true ; fn ( { target : elem } ) ; ( < any > ( contentModule as any ) . observer ) . options . axes = [ ] ; fn ( { target : elem } ) ; ( < any > contentModule ) . virtualEle . setWrapperWidth ( null , 1 ) ; ( < any > contentModule ) . getInfoFromView ( 'down' , ( contentModule as any ) . observer . sentinelInfo . up , { top : 100 , left : 50 } ) ; ( < any > contentModule ) . block ( 5 ) ; ( < any > contentModule ) . onDataReady ( { count : undefined } ) ; ( < any > contentModule ) . preventEvent = true ; ( < any > contentModule ) . scrollListener ( ) ; ( < any > contentModule ) . onDataReady ( { count : 1 } ) ; grid . dataSource = new DataManager ( ) ; contentModule . renderTable ( ) ; ( < any > contentModule ) . getInfoFromView = function ( ) { return { loadNext : true , loadSelf : true , event : 'virtual' } ; } ; ( < any > contentModule ) . scrollListener ( { sentinel : { axis : 'Z' } } ) ; ( contentModule as any ) . offsetKeys = [ 1 ] ; let fn1 = ( ) => { return 1 ; } ; ( contentModule as any ) . getTotalBlocks = fn1 ; ( contentModule as any ) . getPageFromTop ( 1000 , { block : 2 } ) ; expect ( 1 ) . toBe ( 1 ) ; } ) ; afterAll ( ( ) => { destroy ( grid ) ; } ) ; } ) ; describe ( 'Row height checking in Virtual mode' , ( ) => { let grid ; beforeAll ( ( done ) => { grid = createGrid ( { dataSource : data , columns : count500 , enableVirtualization : true , enableColumnVirtualization : true , allowGrouping : true , height : 300 , rowHeight : 70 } , done ) ; } ) ; it ( 'API Checking' , ( ) => { expect ( ( grid . element . querySelectorAll ( '.e-row' ) [ 0 ] as HTMLElement ) . style . height ) . toBe ( '70px' ) ; expect ( ( grid . element . classList . contains ( 'e-grid-min-height' ) ) ) . toBeTruthy ( ) ; } ) ; it ( 'EJ2-7420- Focus strategy script error' , ( ) => { spyOn ( ( < any > grid ) . focusModule , 'onFocus' ) ; grid . groupColumn ( 'Column4' ) ; expect ( ( < any > grid ) . focusModule . onFocus ) . not . toHaveBeenCalled ( ) ; } ) ; afterAll ( ( ) => { destroy ( grid ) ; } ) ; } ) ; describe ( 'Check scroll position after grid filter actions' , ( ) => { let grid ; let rows ; let oneTime = true ; beforeAll ( ( ) => { grid = createGrid ( { dataSource : data , columns : count500 , enableVirtualization : true , allowFiltering : true , allowSorting : true , height : 300 } , ( ) => { if ( oneTime ) { oneTime = false ; ( < HTMLElement > grid . getContent ( ) . firstChild ) . scrollTop = 500 ; } } ) ; } ) ; it ( 'check scroll top after filter - should change to 0' , ( done ) => { grid . filterByColumn ( 'Column1' , 'startswith' , 'c' ) ; setTimeout ( done , 200 ) ; expect ( ( < HTMLElement > grid . getContent ( ) . firstChild ) . scrollTop ) . toEqual ( 0 ) ; } ) ; afterAll ( ( ) => { destroy ( grid ) ; } ) ; } ) ; describe ( 'Check scroll position after grid sort actions' , ( ) => { let grid ; let oneTime = true ; let rows ; beforeAll ( ( done ) => { grid = createGrid ( { dataSource : data , columns : count500 , enableVirtualization : true , allowFiltering : true , allowSorting : true , height : 300 } , ( ) => { if ( oneTime ) { oneTime = false ; grid . dataBound = function ( ) { } ; grid . actionComplete = function ( args ) { if ( args . requestType === 'sorting' ) { done ( ) ; } } ; ( < HTMLElement > grid . getContent ( ) . firstChild ) . scrollTop = 500 ; grid . sortColumn ( 'Column1' , 'Ascending' ) ; } } ) ; } ) ; it ( 'check scroll top after filter - should change to 0' , ( ) => { expect ( ( < HTMLElement > grid . getContent ( ) . firstChild ) . scrollTop ) . toEqual ( 500 ) ; } ) ; afterAll ( ( ) => { destroy ( grid ) ; } ) ; } ) ; describe ( 'Selection feature testing' , ( ) => { describe ( 'without scrolling' , ( ) => { let grid ; let oneTime = true ; let rows ; beforeAll ( ( done ) => { grid = createGrid ( { dataSource : data , columns : count500 , enableVirtualization : true , allowSelection : true , selectionSettings : { type : 'Multiple' } , height : 300 } , done ) ; } ) ; it ( 'check selection by click in first page' , ( done ) => { grid . rowSelected = < EmitType < { } > > done ; let row = < HTMLTableRowElement > ( < HTMLTableElement > grid . getContentTable ( ) ) . rows [ 0 ] ; ( < HTMLElement > row . cells [ 0 ] ) . click ( ) ; expect ( grid . getSelectedRowIndexes ( ) [ 0 ] ) . toEqual ( 0 ) ; } ) ; it ( 'check selection by selectRow method in first page' , ( done ) => { grid . rowSelected = < EmitType < { } > > done ; grid . selectRow ( 2 , true ) ; expect ( grid . getSelectedRowIndexes ( ) [ 0 ] ) . toEqual ( 2 ) ; } ) ; afterAll ( ( ) => { destroy ( grid ) ; } ) ; } ) ; describe ( 'after scrolling' , ( ) => { let grid ; let oneTime = true ; let rows ; beforeAll ( ( done ) => { grid = createGrid ( { dataSource : data , columns : count500 , enableVirtualization : true , allowSelection : true , selectionSettings : { type : 'Multiple' } , height : 300 } , ( ) => { ( < HTMLElement > grid . getContent ( ) . firstChild ) . scrollTop = 500 ; setTimeout ( done , 50 ) ; } ) ; } ) ; it ( 'check selection by click in first row' , ( done ) => { grid . rowSelected = < EmitType < { } > > done ; let row = < HTMLTableRowElement > ( < HTMLTableElement > grid . getContentTable ( ) ) . rows [ 0 ] ; let index = parseInt ( row . getAttribute ( 'aria-rowindex' ) , 10 ) ; ( < HTMLElement > row . cells [ 0 ] ) . click ( ) ; expect ( grid . getSelectedRowIndexes ( ) [ 0 ] ) . toEqual ( index ) ; } ) ; it ( 'check selection by selectRow method' , ( done ) => { let row = < HTMLTableRowElement > ( < HTMLTableElement > grid . getContentTable ( ) ) . rows [ 5 ] ; let index = parseInt ( row . getAttribute ( 'aria-rowindex' ) , 10 ) ; grid . rowSelected = < EmitType < { } > > done ; grid . selectRow ( index , true ) ; expect ( grid . getSelectedRowIndexes ( ) [ 0 ] ) . toEqual ( index ) ; } ) ; afterAll ( ( ) => { destroy ( grid ) ; } ) ; } ) ; } ) ; } ) ; describe ( 'Column virtualization' , ( ) => { describe ( 'scroll left continous' , ( ) => { let grid ; let rows ; beforeAll ( ( done ) => { grid = createGrid ( { dataSource : data1 , columns : count5000 , enableVirtualization : true , enableColumnVirtualization : true , height : 300 , width : 400 , } , ( ) => { ( < HTMLElement > grid . getContent ( ) . firstChild ) . scrollLeft = 10 ; ( < HTMLElement > grid . getContent ( ) . firstChild ) . scrollLeft = 500 ; done ( ) ; } ) ; } ) ; it ( 'check first column index' , ( ) => { expect ( grid . getColumns ( ) . length ) . toBeLessThan ( 500 ) ; let row = < HTMLTableRowElement > ( < HTMLTableElement > grid . getContentTable ( ) ) . rows [ 0 ] ; expect ( grid . getColumnIndexesInView ( ) [ 0 ] ) . toBeGreaterThanOrEqual ( parseInt ( row . cells [ 0 ] . getAttribute ( 'aria-colindex' ) , 10 ) ) ; } ) ; it ( 'check last column index' , ( ) => { let row = < HTMLTableRowElement > ( < HTMLTableElement > grid . getContentTable ( ) ) . rows [ 0 ] ; let indexes = grid . getColumnIndexesInView ( ) ; expect ( indexes [ indexes . length - 1 ] ) . toBeGreaterThanOrEqual ( parseInt ( row . cells [ indexes . length - 1 ] . getAttribute ( 'aria-colindex' ) , 10 ) ) ; } ) ; it ( 'horizontal should not disturb vertical scroll' , ( done ) => { ( < HTMLElement > grid . getContent ( ) . firstChild ) . scrollLeft = 100 ; setTimeout ( done , 200 ) ; expect ( grid . pageSettings . currentPage ) . toEqual ( 1 ) ; } ) ; it ( 'horizontal scroll the grid content' , ( done ) => { ( < HTMLElement > grid . getContent ( ) . firstChild ) . scrollLeft = 1000 ; setTimeout ( done , 200 ) ; expect ( grid . pageSettings . currentPage ) . toEqual ( 1 ) ; expect ( grid . getColumns ( ) . length ) . toBeLessThan ( 500 ) ; let row = < HTMLTableRowElement > ( < HTMLTableElement > grid . getContentTable ( ) ) . rows [ 0 ] ; expect ( grid . getColumnIndexesInView ( ) [ 0 ] ) . toBeGreaterThanOrEqual ( parseInt ( row . cells [ 0 ] . getAttribute ( 'aria-colindex' ) , 10 ) ) ; } ) ; afterAll ( ( ) => { destroy ( grid ) ; } ) ; } ) ; describe ( 'Grouping enabled' , ( ) => { let grid ; let rows ; beforeAll ( ( done ) => { grid = createGrid ( { dataSource : data1 , columns : count5000 , enableVirtualization : true , enableColumnVirtualization : true , height : 300 , width : 400 , allowGrouping : true , groupSettings : { columns : [ 'Column6' ] } } , ( ) => { ( < HTMLElement > grid . getContent ( ) . firstChild ) . scrollLeft = 10 ; ( < HTMLElement > grid . getContent ( ) . firstChild ) . scrollLeft = 700 ; done ( ) ; } ) ; } ) ; it ( 'check expand group cell' , ( ) => { expect ( grid . getColumns ( ) . length ) . toBeLessThan ( 500 ) ; let row = < HTMLTableRowElement > ( < HTMLTableElement > grid . getContentTable ( ) ) . rows [ 0 ] ; expect ( row . cells [ 0 ] . classList . contains ( 'e-recordplusexpand' ) ) . toBeTruthy ( ) ; expect ( row . cells . length ) . toBeTruthy ( grid . getColumns ( ) . length ) ; } ) ; it ( 'horizontal scroll the grouped grid content' , ( done ) => { ( < HTMLElement > grid . getContent ( ) . firstChild ) . scrollLeft = 1000 ; setTimeout ( done , 200 ) ; expect ( grid . pageSettings . currentPage ) . toEqual ( 1 ) ; expect ( grid . getColumns ( ) . length ) . toBeLessThan ( 500 ) ; let row = < HTMLTableRowElement > ( < HTMLTableElement > grid . getContentTable ( ) ) . rows [ 0 ] ; expect ( row . cells [ 0 ] . classList . contains ( 'e-recordplusexpand' ) ) . toBeTruthy ( ) ; expect ( row . querySelectorAll ( '.e-groupcaption' ) . length ) . toEqual ( grid . getColumns ( ) . length ) ; } ) ; it ( 'vertical scroll in up direction' , ( done ) => { ( < HTMLElement > grid . getContent ( ) . firstChild ) . scrollTop = 100 ; setTimeout ( done , 200 ) ; let row = < HTMLTableRowElement > ( < HTMLTableElement > grid . getContentTable ( ) ) . rows [ 0 ] ; } ) ; it ( 'check group merge' , ( ) => { let gen = ( < VirtualRowModelGenerator > ( < VirtualContentRenderer > grid . contentModule ) . getModelGenerator ( ) ) ; gen . cache [ 1 ] = [ new Row < Column > ( { data : { field : 'test1' , 'key' : 'test1' } , isDataRow : false } ) ] ; let res = gen . updateGroupRow ( [ new Row < Column > ( { data : { field : 'test1' , 'key' : 'test1' } , isDataRow : false } ) , new Row < Column > ( { data : { field : 'test1' , 'key' : 'test1' } , isDataRow : true } ) ] , 3 ) ; expect ( res . length ) . toBe ( 1 ) ; let no = gen . updateGroupRow ( [ new Row < Column > ( { data : { field : 'test1' , 'key' : 'test1' } , isDataRow : true } ) ] , 3 ) ; expect ( res . length ) . toBe ( 1 ) ; } ) ; it ( 'for coverage' , ( ) => { window [ 'browserDetails' ] [ 'isDevice' ] = false ; let gen = ( < VirtualRowModelGenerator > ( < VirtualContentRenderer > grid . contentModule ) . getModelGenerator ( ) ) ; gen . getColumnIndexes ( undefined ) ; ( gen as any ) . getStartIndex ( 1 , 2 , 3 ) ; ( gen as any ) . getStartIndex ( 1 , 2 , 0 ) ; ( gen as any ) . cache = { 1 : [ { data : { field : 'Column9' } , field : 'Column9' } ] , 2 : [ { data : { field : 'Column9' } , field : 'Column8' } ] } ; ( gen as any ) . generateRows ( { records : [ ] } , { virtualInfo : null } ) ; window [ 'browserDetails' ] [ 'isDevice' ] = true ; let contentModule = < VirtualContentRenderer > grid . contentModule ; contentModule . ensureBlocks ( { block : 0 , blockIndexes : [ 124 , 125 ] , page : 63 , direction : 'up' } ) ; } ) ; afterAll ( ( ) => { destroy ( grid ) ; } ) ; } ) ; describe ( 'Check scroll position after selecting and scroll' , ( ) => { let grid ; beforeAll ( ( done ) => { grid = createGrid ( { dataSource : data , enableVirtualization : true , allowFiltering : true , allowSorting : true , selectionSettings : { persistSelection : true , type : 'Multiple' } , height : 300 } , done ) ; } ) ; it ( 'check selecting row' , ( ) => { grid . selectRow ( 1 , true ) ; } ) ; it ( 'change the scrollbar place' , ( ) => { ( < HTMLElement > grid . getContent ( ) . firstChild ) . scrollTop = 100 ; } ) ; it ( 'check scrollposition is same or not' , ( ) => { expect ( ( < HTMLElement > grid . getContent ( ) . firstChild ) . scrollTop ) . toBe ( 100 ) ; } ) ; afterAll ( ( ) => { destroy ( grid ) ; } ) ; } ) ; } ) ;