import { CHART_VIZ_CONTAINER_SELECTOR , visitDynamicWidget } from '../../../../src/testing/selectors' ; import { SECOND_IN_MS } from '../../../../src/utils/time' ; const root = '/tests' ; const VIEWPORT_HEIGHT = 800 ; const VIEWPORT_WIDTH = 500 ; const TIME_FOR_GESTURE_TO_COMPLETE = SECOND_IN_MS ; it ( 'moves viewport when gestures are applied' , ( ) => { const START = new Date ( 2000 , 0 , 0 ) ; const END = new Date ( 2000 , 0 , 2 ) ; const OLD_Y_TICK_LABEL = 'Fri 31' ; visitDynamicWidget ( cy , { componentTag : 'sc-line-chart' , viewportStart : START , viewportEnd : END , gestures : true , } ) ; cy . waitForChart ( ) ; cy . contains ( OLD_Y_TICK_LABEL ) . should ( 'be.visible' ) ; cy . get ( CHART_VIZ_CONTAINER_SELECTOR ) . dblclick ( 'center' ) ; cy . contains ( OLD_Y_TICK_LABEL ) . should ( 'not.exist' ) ; } ) ; it ( 'does not move viewport when gestures are not applied' , ( ) => { const START = new Date ( 2000 , 0 , 0 ) ; const END = new Date ( 2000 , 0 , 2 ) ; const OLD_Y_TICK_LABEL = 'Fri 31' ; visitDynamicWidget ( cy , { componentTag : 'sc-scatter-chart' , viewportStart : START , viewportEnd : END , gestures : false , } ) ; cy . waitForChart ( ) ; cy . contains ( OLD_Y_TICK_LABEL ) . should ( 'exist' ) ; cy . get ( CHART_VIZ_CONTAINER_SELECTOR ) . dblclick ( 'center' ) ; cy . contains ( OLD_Y_TICK_LABEL ) . should ( 'be.visible' ) ; } ) ; it ( 'adjusts y range as data in the view changes' , ( ) => { cy . viewport ( VIEWPORT_WIDTH , VIEWPORT_HEIGHT ) ; cy . visit ( `${ root }/chart/y-range?componentTag=sc-line-chart` ) ; cy . waitForChart ( ) ; const EXISTING_Y_VALUE = '18,000' ; cy . contains ( EXISTING_Y_VALUE ) . should ( 'exist' ) ; cy . get ( '.data-container' ) . dblclick ( 'left' ) ; cy . wait ( SECOND_IN_MS * 0.25 ) ; cy . get ( '.data-container' ) . dblclick ( 'left' ) ; cy . wait ( SECOND_IN_MS * 0.25 ) ; cy . get ( '.data-container' ) . dblclick ( 'left' ) ; cy . wait ( TIME_FOR_GESTURE_TO_COMPLETE ) ; cy . contains ( EXISTING_Y_VALUE ) . should ( 'not.exist' ) ; } ) ; describe ( 'gestures while charts are synchronized' , ( ) => { it ( 'zooms into both charts' , ( ) => { cy . visit ( `${ root }/sc-webgl-chart/multi` ) ; cy . viewport ( VIEWPORT_WIDTH , VIEWPORT_HEIGHT ) ; cy . waitForChart ( ) ; const OLD_Y_TICK_LABEL = '1998' ; cy . contains ( OLD_Y_TICK_LABEL ) . should ( 'exist' ) ; cy . get ( '.data-container' ) . dblclick ( 'center' ) ; cy . wait ( SECOND_IN_MS * 0.25 ) ; cy . get ( '.data-container' ) . dblclick ( 'center' ) ; cy . wait ( SECOND_IN_MS * 0.25 ) ; cy . get ( '.data-container' ) . dblclick ( 'center' ) ; cy . wait ( SECOND_IN_MS * 0.25 ) ; cy . get ( '.data-container' ) . dblclick ( 'center' ) ; cy . wait ( SECOND_IN_MS * 0.25 ) ; cy . get ( '.data-container' ) . dblclick ( 'center' ) ; cy . contains ( OLD_Y_TICK_LABEL ) . should ( 'not.exist' ) ; } ) ; } ) ;