import React from 'react' ; import { mount } from '@cypress/react' ; import HoverVideoPlayer from 'react-hover-video-player' ; import { LoadingOverlay , makeMockVideoSrc } from '../utils' ; describe ( 'loadingOverlay' , ( ) => { beforeEach ( ( ) => { cy . clock ( ) ; } ) ; it ( 'loading overlay fades in if the video is taking too long to load' , ( ) => { const videoSrc = makeMockVideoSrc ( { throttleKbps : 1000 , } ) ; mount ( < HoverVideoPlayer videoSrc = { videoSrc } loadingOverlay = { < LoadingOverlay / > } loadingStateTimeout = { 123 } / > ) ; cy . checkVideoPlaybackState ( 'paused' ) ; cy . checkOverlayVisibilty ( { loading : false , } ) ; cy . triggerEventOnPlayer ( 'mouseenter' ) ; cy . checkVideoPlaybackState ( 'loading' ) ; cy . tick ( 122 ) ; cy . checkOverlayVisibilty ( { loading : false , } ) ; cy . tick ( 1 ) ; cy . checkOverlayVisibilty ( { loading : true , } ) ; cy . checkVideoPlaybackState ( 'playing' ) ; cy . checkOverlayVisibilty ( { loading : false , } ) ; cy . triggerEventOnPlayer ( 'mouseleave' ) ; cy . checkVideoPlaybackState ( 'paused' ) ; cy . checkOverlayVisibilty ( { loading : false , } ) ; } ) ; } ) ;