import React from 'react' ; import { mount } from '@cypress/react' ; import HoverVideoPlayer from 'react-hover-video-player' ; import { makeMockVideoSrc } from '../utils' ; import { videoElementSelector } from '../constants' ; describe ( 'Playback works as expected when only playbackRangeStart is set' , ( ) => { it ( 'behaves correctly when loop is true and restartOnPaused is false' , ( ) => { mount ( < HoverVideoPlayer videoSrc = { makeMockVideoSrc ( ) } playbackRangeStart = { 8.7 } / > ) ; cy . checkVideoPlaybackState ( 'paused' , 'The video should initially be paused' ) ; cy . get ( videoElementSelector ) . invoke ( 'prop' , 'currentTime' ) . should ( 'equal' , 8.7 ) ; cy . triggerEventOnPlayer ( 'mouseenter' ) ; cy . checkVideoPlaybackState ( 'playing' , 'The video should start playing after mousing over it' ) ; cy . get ( videoElementSelector ) . should ( ( $video ) => { const videoElement = $video [ 0 ] ; expect ( videoElement . currentTime ) . to . equal ( videoElement . duration ) ; } ) ; cy . get ( videoElementSelector ) . invoke ( 'prop' , 'currentTime' ) . should ( 'be.closeTo' , 8.7 , 0.03 ) ; cy . checkVideoPlaybackState ( 'playing' , 'The video should still be playing after looping' ) ; cy . get ( videoElementSelector ) . should ( ( $video ) => { const videoElement = $video [ 0 ] ; expect ( videoElement . currentTime ) . to . equal ( videoElement . duration ) ; } ) ; cy . get ( videoElementSelector ) . invoke ( 'prop' , 'currentTime' ) . should ( 'be.closeTo' , 8.7 , 0.03 ) ; cy . checkVideoPlaybackState ( 'playing' , 'The video should still be playing after looping a second time' ) ; cy . triggerEventOnPlayer ( 'mouseleave' ) ; cy . checkVideoPlaybackState ( 'paused' ) ; } ) ; it ( 'behaves correctly when loop is false and restartOnPaused is true' , ( ) => { mount ( < HoverVideoPlayer videoSrc = { makeMockVideoSrc ( ) } playbackRangeStart = { 8.7 } loop = { false } restartOnPaused / > ) ; cy . checkVideoPlaybackState ( 'paused' ) ; cy . get ( videoElementSelector ) . invoke ( 'prop' , 'currentTime' ) . should ( 'equal' , 8.7 ) ; cy . triggerEventOnPlayer ( 'mouseenter' ) ; cy . checkVideoPlaybackState ( 'playing' ) ; cy . get ( videoElementSelector ) . should ( ( $video ) => { const videoElement = $video [ 0 ] ; expect ( videoElement . currentTime ) . to . equal ( videoElement . duration ) ; } ) ; cy . checkVideoPlaybackState ( 'paused' ) ; cy . triggerEventOnPlayer ( 'mouseleave' ) ; cy . checkVideoPlaybackState ( 'paused' ) ; cy . get ( videoElementSelector ) . invoke ( 'prop' , 'currentTime' ) . should ( 'equal' , 8.7 ) ; cy . triggerEventOnPlayer ( 'mouseenter' ) ; cy . checkVideoPlaybackState ( 'playing' ) ; cy . get ( videoElementSelector ) . should ( ( $video ) => { const videoElement = $video [ 0 ] ; expect ( videoElement . currentTime ) . to . equal ( videoElement . duration ) ; } ) ; cy . checkVideoPlaybackState ( 'paused' ) ; cy . triggerEventOnPlayer ( 'mouseleave' ) ; cy . checkVideoPlaybackState ( 'paused' ) ; } ) ; it ( 'behaves correctly when loop and restartOnPaused are both false' , ( ) => { mount ( < HoverVideoPlayer videoSrc = { makeMockVideoSrc ( ) } playbackRangeStart = { 8.7 } loop = { false } / > ) ; cy . checkVideoPlaybackState ( 'paused' ) ; cy . get ( videoElementSelector ) . invoke ( 'prop' , 'currentTime' ) . should ( 'equal' , 8.7 ) ; cy . triggerEventOnPlayer ( 'mouseenter' ) ; cy . checkVideoPlaybackState ( 'playing' ) ; cy . get ( videoElementSelector ) . should ( ( $video ) => { const videoElement = $video [ 0 ] ; expect ( videoElement . currentTime ) . to . equal ( videoElement . duration ) ; } ) ; cy . checkVideoPlaybackState ( 'paused' ) ; cy . triggerEventOnPlayer ( 'mouseleave' ) ; cy . checkVideoPlaybackState ( 'paused' ) ; cy . get ( videoElementSelector ) . should ( ( $video ) => { const videoElement = $video [ 0 ] ; expect ( videoElement . currentTime ) . to . equal ( videoElement . duration ) ; } ) ; cy . triggerEventOnPlayer ( 'mouseenter' ) ; cy . checkVideoPlaybackState ( 'paused' , 'The video should stay stuck at the end' ) ; cy . get ( videoElementSelector ) . should ( ( $video ) => { const videoElement = $video [ 0 ] ; expect ( videoElement . currentTime ) . to . equal ( videoElement . duration ) ; } ) ; cy . triggerEventOnPlayer ( 'mouseleave' ) ; cy . checkVideoPlaybackState ( 'paused' ) ; } ) ; it ( 'keeps the video inside the playback range' , ( ) => { mount ( < HoverVideoPlayer videoSrc = { makeMockVideoSrc ( ) } playbackRangeStart = { 8.7 } loop = { false } / > ) ; cy . log ( 'The video should initially be set to the start of the playback range' ) ; cy . get ( videoElementSelector ) . invoke ( 'prop' , 'currentTime' ) . should ( 'equal' , 8.7 ) ; cy . log ( "Attempt to set the video's time to before the start of the playback range" ) ; cy . get ( videoElementSelector ) . invoke ( 'prop' , 'currentTime' , 0 ) ; cy . log ( 'The video should have been set back to the start of the playback range' ) ; cy . get ( videoElementSelector ) . invoke ( 'prop' , 'currentTime' ) . should ( 'equal' , 8.7 ) ; } ) ; } ) ;