import React from 'react' ; import { mount } from '@cypress/react' ; import HoverVideoPlayer from 'react-hover-video-player' ; import { PausedOverlay , LoadingOverlay , makeMockVideoSrc } from '../utils' ; import { videoElementSelector } from '../constants' ; describe ( 'Handles mouse and touch events correctly' , ( ) => { beforeEach ( ( ) => { cy . clock ( ) ; } ) ; it ( 'mouseEnter and mouseLeave events take the video through its play and pause flows correctly' , ( ) => { const videoSrc = makeMockVideoSrc ( { throttleKbps : 1000 , } ) ; mount ( < HoverVideoPlayer videoSrc = { videoSrc } pausedOverlay = { < PausedOverlay / > } loadingOverlay = { < LoadingOverlay / > } />); cy . checkVideoPlaybackState ( 'paused' ) ; cy . checkOverlayVisibilty ( { paused : true , loading : false , } ) ; cy . triggerEventOnPlayer ( 'mouseenter' ) ; cy . checkVideoPlaybackState ( 'loading' ) ; cy . tick ( 199 ) ; cy . checkOverlayVisibilty ( { paused : true , loading : false , } ) ; cy . tick ( 1 ) ; cy . checkOverlayVisibilty ( { paused : true , loading : true , } ) ; cy . checkVideoPlaybackState ( 'playing' ) ; cy . checkOverlayVisibilty ( { paused : false , loading : false , } ) ; cy . get ( videoElementSelector ) . invoke ( 'prop' , 'currentTime' ) . should ( 'be.greaterThan' , 0 ) ; cy . triggerEventOnPlayer ( 'mouseleave' ) ; cy . checkOverlayVisibilty ( { paused : true , loading : false , } ) ; cy . tick ( 399 ) ; cy . checkVideoPlaybackState ( 'playing' , 'the video should still be playing until the overlayTransitionDuration has elapsed' ) ; cy . tick ( 1 ) ; cy . checkVideoPlaybackState ( 'paused' , 'the video should be paused after the overlayTransitionDuration has elapsed' ) ; } ) ; it ( 'touch events take the video through its play and pause flows correctly' , ( ) => { const videoSrc = makeMockVideoSrc ( { throttleKbps : 1000 , } ) ; mount ( < HoverVideoPlayer videoSrc = { videoSrc } pausedOverlay = { < PausedOverlay / > } loadingOverlay = { < LoadingOverlay / > } />); cy . checkVideoPlaybackState ( 'paused' ) ; cy . checkOverlayVisibilty ( { paused : true , loading : false , } ) ; cy . triggerEventOnPlayer ( 'touchstart' ) ; cy . checkVideoPlaybackState ( 'loading' ) ; cy . tick ( 199 ) ; cy . checkOverlayVisibilty ( { paused : true , loading : false , } ) ; cy . tick ( 1 ) ; cy . checkOverlayVisibilty ( { paused : true , loading : true , } ) ; cy . checkVideoPlaybackState ( 'playing' ) ; cy . checkOverlayVisibilty ( { paused : false , loading : false , } ) ; cy . get ( videoElementSelector ) . invoke ( 'prop' , 'currentTime' ) . should ( 'be.greaterThan' , 0 ) ; cy . get ( videoElementSelector ) . trigger ( 'touchstart' ) ; cy . tick ( 400 ) ; cy . checkVideoPlaybackState ( 'playing' , 'the video should still be playing after touching an element inside the player container' ) ; cy . document ( ) . then ( ( doc ) => { doc . body . dispatchEvent ( new TouchEvent ( 'touchstart' , { bubbles : true , } ) ) ; } ) ; cy . checkOverlayVisibilty ( { paused : true , loading : false , } ) ; cy . tick ( 399 ) ; cy . checkVideoPlaybackState ( 'playing' , 'the video should still be playing until the overlayTransitionDuration has elapsed' ) ; cy . tick ( 1 ) ; cy . checkVideoPlaybackState ( 'paused' , 'the video should be paused after the overlayTransitionDuration has elapsed' ) ; } ) ; } ) ;