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 ( 'The video player transitions between states as expected' , ( ) => { beforeEach ( ( ) => { cy . clock ( ) ; } ) ; it ( 'an attempt to play the video will correctly interrupt any attempts to pause it' , ( ) => { const videoSrc = makeMockVideoSrc ( ) ; mount ( < HoverVideoPlayer videoSrc = { videoSrc } pausedOverlay = { < PausedOverlay / > } loadingOverlay = { < LoadingOverlay / > } />); cy . checkVideoPlaybackState ( 'paused' ) ; cy . checkOverlayVisibilty ( { paused : true , loading : false , } ) ; cy . triggerEventOnPlayer ( 'mouseenter' ) ; cy . checkVideoPlaybackState ( 'playing' ) ; cy . checkOverlayVisibilty ( { paused : false , loading : false , } ) ; cy . triggerEventOnPlayer ( 'mouseleave' ) ; cy . checkOverlayVisibilty ( { paused : true , loading : false , } ) ; cy . tick ( 399 ) ; cy . checkVideoPlaybackState ( 'playing' , 'the video should still be playing because overlayTransitionDuration has not elapsed' ) ; cy . triggerEventOnPlayer ( 'mouseenter' ) ; cy . checkOverlayVisibilty ( { paused : false , loading : false , } ) ; cy . tick ( 500 ) ; cy . checkVideoPlaybackState ( 'playing' , 'the video should still be playing because the pause timeout was cancelled' ) ; } ) ; it ( 'an attempt to play the video when it is already loading will be handled 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 ( 200 ) ; cy . checkOverlayVisibilty ( { paused : true , loading : true , } ) ; cy . triggerEventOnPlayer ( 'mouseleave' ) ; cy . checkOverlayVisibilty ( { paused : true , loading : false , } ) ; cy . tick ( 500 ) ; cy . checkVideoPlaybackState ( 'loading' , 'the video should still be loading even if it is no longer being hovered over' ) ; cy . triggerEventOnPlayer ( 'mouseenter' ) ; cy . wait ( 1 ) ; cy . checkOverlayVisibilty ( { paused : true , loading : false , } ) ; cy . tick ( 200 ) ; cy . checkOverlayVisibilty ( { paused : true , loading : true , } ) ; cy . checkVideoPlaybackState ( 'loading' , 'the video should still be loading' ) ; cy . checkVideoPlaybackState ( 'playing' , 'the video should finish loading and play' ) ; } ) ; it ( 'pausing the video will correctly interrupt an active attempt to play the video' , ( ) => { const videoSrc = makeMockVideoSrc ( { throttleKbps : 1000 , } ) ; mount ( < HoverVideoPlayer videoSrc = { videoSrc } pausedOverlay = { < PausedOverlay / > } loadingOverlay = { < LoadingOverlay / > } />); cy . triggerEventOnPlayer ( 'mouseenter' ) ; cy . checkVideoPlaybackState ( 'loading' ) ; cy . tick ( 200 ) ; cy . checkOverlayVisibilty ( { paused : true , loading : true , } ) ; cy . triggerEventOnPlayer ( 'mouseleave' ) ; cy . checkOverlayVisibilty ( { paused : true , loading : false , } ) ; cy . checkVideoPlaybackState ( 'loading' ) ; cy . get ( videoElementSelector ) . invoke ( 'prop' , 'readyState' ) . should ( 'be.gte' , HTMLMediaElement . HAVE_FUTURE_DATA ) ; cy . checkVideoPlaybackState ( 'paused' ) ; cy . checkOverlayVisibilty ( { paused : true , loading : false , } ) ; } ) ; it ( 'the video correctly handles states when the video ends without looping' , ( ) => { const videoSrc = makeMockVideoSrc ( ) ; mount ( < HoverVideoPlayer videoSrc = { videoSrc } pausedOverlay = { < PausedOverlay / > } loadingOverlay = { < LoadingOverlay / > } loop = { false } / > ) ; cy . get ( videoElementSelector ) . invoke ( 'prop' , 'loop' ) . should ( 'be.false' ) ; cy . get ( videoElementSelector ) . invoke ( 'prop' , 'ended' ) . should ( 'be.false' ) ; cy . triggerEventOnPlayer ( 'mouseenter' ) ; cy . checkVideoPlaybackState ( 'playing' ) ; cy . checkOverlayVisibilty ( { paused : false , loading : false , } ) ; cy . get ( videoElementSelector ) . invoke ( 'prop' , 'currentTime' , 10 ) ; cy . get ( videoElementSelector ) . invoke ( 'prop' , 'ended' ) . should ( 'be.true' ) ; cy . get ( videoElementSelector ) . invoke ( 'prop' , 'paused' ) . should ( 'be.true' ) ; cy . checkOverlayVisibilty ( { paused : false , loading : false , } ) ; cy . triggerEventOnPlayer ( 'mouseleave' ) ; cy . checkOverlayVisibilty ( { paused : true , loading : false , } ) ; cy . triggerEventOnPlayer ( 'mouseenter' ) ; cy . checkVideoPlaybackState ( 'playing' , 'playback should resume successfully after the video is ended' ) ; cy . checkOverlayVisibilty ( { paused : false , loading : false , } ) ; } ) ; } ) ;