import React from 'react' ; import { mount } from '@cypress/react' ; import HoverVideoPlayer from 'react-hover-video-player' ; import { makeMockVideoSrc , HoverVideoPlayerWrappedWithFocusToggleButton , } from '../utils' ; import { videoElementSelector } from '../constants' ; describe ( 'unloadVideoOnPaused prop' , ( ) => { it ( "unloads the video's sources while it is paused when set to true" , ( ) => { const videoSrc = makeMockVideoSrc ( { throttleKbps : 1000 , } ) ; mount ( < HoverVideoPlayer videoSrc = { videoSrc } unloadVideoOnPaused / > ) ; cy . checkVideoPlaybackState ( 'paused' ) ; cy . get ( videoElementSelector ) . should ( 'not.have.descendants' , 'source' ) ; cy . get ( videoElementSelector ) . invoke ( 'prop' , 'readyState' ) . should ( 'equal' , HTMLMediaElement . HAVE_NOTHING ) ; cy . get ( videoElementSelector ) . invoke ( 'prop' , 'currentSrc' ) . should ( 'equal' , '' ) ; cy . get ( videoElementSelector ) . invoke ( 'prop' , 'currentTime' ) . should ( 'equal' , 0 ) ; cy . triggerEventOnPlayer ( 'mouseenter' ) ; cy . checkVideoPlaybackState ( 'playing' ) ; cy . get ( videoElementSelector ) . should ( 'have.descendants' , `source[src="${ videoSrc }"]` ) ; cy . get ( videoElementSelector ) . invoke ( 'prop' , 'readyState' ) . should ( 'be.gte' , HTMLMediaElement . HAVE_FUTURE_DATA ) ; cy . get ( videoElementSelector ) . invoke ( 'prop' , 'currentSrc' ) . should ( 'equal' , `${ window . location . origin }${ videoSrc }` ) ; cy . get ( videoElementSelector ) . invoke ( 'prop' , 'currentTime' ) . should ( 'be.greaterThan' , 0.2 ) ; cy . triggerEventOnPlayer ( 'mouseleave' ) ; cy . checkVideoPlaybackState ( 'paused' ) ; cy . get ( videoElementSelector ) . should ( 'not.have.descendants' , 'source' ) ; cy . get ( videoElementSelector ) . invoke ( 'prop' , 'readyState' ) . should ( 'equal' , HTMLMediaElement . HAVE_NOTHING ) ; cy . get ( videoElementSelector ) . invoke ( 'prop' , 'currentTime' ) . should ( 'equal' , 0 ) ; cy . get ( videoElementSelector ) . invoke ( 'prop' , 'currentSrc' ) . should ( 'equal' , `${ window . location . origin }${ videoSrc }` ) ; cy . triggerEventOnPlayer ( 'mouseenter' ) ; cy . get ( videoElementSelector ) . invoke ( 'prop' , 'currentTime' ) . should ( 'be.greaterThan' , 0.2 ) ; cy . checkVideoPlaybackState ( 'loading' ) ; cy . checkVideoPlaybackState ( 'playing' ) ; } ) ; it ( 'does not restore previous time when restartOnPaused is true' , ( ) => { const videoSrc = makeMockVideoSrc ( ) ; mount ( < HoverVideoPlayer videoSrc = { videoSrc } unloadVideoOnPaused restartOnPaused / > ) ; cy . triggerEventOnPlayer ( 'mouseenter' ) ; cy . checkVideoPlaybackState ( 'playing' ) ; cy . get ( videoElementSelector ) . invoke ( 'prop' , 'currentTime' ) . should ( 'be.greaterThan' , 0.2 ) ; cy . triggerEventOnPlayer ( 'mouseleave' ) ; cy . checkVideoPlaybackState ( 'paused' ) ; cy . get ( videoElementSelector ) . invoke ( 'prop' , 'currentTime' ) . should ( 'equal' , 0 ) ; cy . triggerEventOnPlayer ( 'mouseenter' ) ; cy . get ( videoElementSelector ) . invoke ( 'prop' , 'currentTime' ) . should ( 'equal' , 0 ) ; cy . checkVideoPlaybackState ( 'playing' ) ; } ) ; it ( 'unloaded video is able to play immediately if focused prop is initially set to true' , ( ) => { const videoSrc = makeMockVideoSrc ( ) ; mount ( < HoverVideoPlayerWrappedWithFocusToggleButton videoSrc = { videoSrc } unloadVideoOnPaused focused / > ) ; cy . get ( videoElementSelector ) . should ( 'have.descendants' , `source[src="${ videoSrc }"]` ) ; cy . get ( videoElementSelector ) . invoke ( 'prop' , 'currentSrc' ) . should ( 'equal' , `${ window . location . origin }${ videoSrc }` ) ; cy . checkVideoPlaybackState ( 'playing' , 'The video should start playing right away' ) ; cy . get ( '[data-testid="toggle-focus-button"]' ) . click ( ) ; cy . checkVideoPlaybackState ( 'paused' ) ; cy . get ( videoElementSelector ) . should ( 'not.have.descendants' , 'source' ) ; cy . get ( videoElementSelector ) . invoke ( 'prop' , 'readyState' ) . should ( 'equal' , HTMLMediaElement . HAVE_NOTHING ) ; cy . get ( '[data-testid="toggle-focus-button"]' ) . click ( ) ; cy . checkVideoPlaybackState ( 'playing' ) ; } ) ; it ( 'does not unload the video until any pending play attempt is resolved' , ( ) => { mount ( < HoverVideoPlayer videoSrc = { makeMockVideoSrc ( { throttleKbps : 1000 , } ) } unloadVideoOnPaused / > ) ; cy . checkVideoPlaybackState ( 'paused' ) ; cy . get ( videoElementSelector ) . should ( 'not.have.descendants' , 'source' ) ; cy . get ( videoElementSelector ) . invoke ( 'prop' , 'readyState' ) . should ( 'equal' , HTMLMediaElement . HAVE_NOTHING ) ; cy . triggerEventOnPlayer ( 'mouseenter' ) ; cy . checkVideoPlaybackState ( 'loading' ) ; cy . get ( videoElementSelector ) . should ( 'have.descendants' , 'source' ) ; cy . triggerEventOnPlayer ( 'mouseleave' ) ; cy . log ( 'the video should still be loading even if it is no longer being hovered over' ) ; cy . checkVideoPlaybackState ( 'loading' ) ; cy . get ( videoElementSelector ) . should ( 'have.descendants' , 'source' ) ; cy . checkVideoPlaybackState ( 'paused' ) ; cy . get ( videoElementSelector ) . should ( 'not.have.descendants' , 'source' ) ; cy . get ( videoElementSelector ) . invoke ( 'prop' , 'readyState' ) . should ( 'equal' , HTMLMediaElement . HAVE_NOTHING ) ; } ) ; } ) ;