import React from 'react' ; import { mount } from '@cypress/react' ; import HoverVideoPlayer from 'react-hover-video-player' ; import { PausedOverlay , LoadingOverlay , makeMockVideoSrc } from '../utils' ; import { pausedOverlayWrapperSelector , loadingOverlayWrapperSelector , } from '../constants' ; describe ( 'overlayTransitionDuration' , ( ) => { beforeEach ( ( ) => { cy . clock ( ) ; } ) ; it ( 'Stop attempts take the amount of time set by overlayTransitionDuration prop if a pausedOverlay is provided' , ( ) => { const videoSrc = makeMockVideoSrc ( ) ; mount ( < HoverVideoPlayer videoSrc = { videoSrc } pausedOverlay = { < PausedOverlay / > } overlayTransitionDuration = { 900 } / > ) ; cy . get ( pausedOverlayWrapperSelector ) . should ( 'have.css' , 'transition-duration' , '0.9s' ) ; cy . triggerEventOnPlayer ( 'mouseenter' ) ; cy . checkVideoPlaybackState ( 'playing' ) ; cy . checkOverlayVisibilty ( { paused : false , } ) ; cy . triggerEventOnPlayer ( 'mouseleave' ) ; cy . checkOverlayVisibilty ( { paused : true , } ) ; cy . tick ( 899 ) ; cy . checkVideoPlaybackState ( 'playing' ) ; cy . tick ( 1 ) ; cy . checkVideoPlaybackState ( 'paused' ) ; } ) ; it ( 'Stop attempts stop immediately if a pausedOverlay is not provided' , ( ) => { const videoSrc = makeMockVideoSrc ( ) ; mount ( < HoverVideoPlayer videoSrc = { videoSrc } loadingOverlay = { < LoadingOverlay / > } overlayTransitionDuration = { 900 } / > ) ; cy . checkOverlayVisibilty ( { loading : false , } ) ; cy . get ( loadingOverlayWrapperSelector ) . should ( 'have.css' , 'transition-duration' , '0.9s' ) ; cy . triggerEventOnPlayer ( 'mouseenter' ) ; cy . checkVideoPlaybackState ( 'playing' ) ; cy . triggerEventOnPlayer ( 'mouseleave' ) ; cy . checkVideoPlaybackState ( 'paused' ) ; } ) ; } ) ;