import { videoElementSelector , pausedOverlayWrapperSelector , loadingOverlayWrapperSelector , hoverOverlayWrapperSelector , playerContainerSelector , } from '../constants' ; declare global { namespace Cypress { interface Chainable < Subject > { param { string } eventName triggerEventOnPlayer ( eventName ) : Chainable < Element > ; param { Object } expectedOverlayVisibilityStatus checkOverlayVisibilty ( expectedOverlayVisibilityStatus ) ; param expectedPlaybackState param message checkVideoPlaybackState ( expectedPlaybackState , message ? ) ; } } } Cypress . Commands . add ( 'triggerEventOnPlayer' , ( eventName ) : Cypress . Chainable < JQuery < HTMLElement > > => cy . get ( playerContainerSelector ) . trigger ( eventName ) ) ; Cypress . Commands . add ( 'checkOverlayVisibilty' , ( { paused , loading , hover , } ) => { if ( paused === undefined ) { cy . log ( 'There should not be a paused overlay' ) ; cy . get ( pausedOverlayWrapperSelector ) . should ( 'not.exist' ) ; } else { cy . log ( `The paused overlay should be ${ paused ? 'visible' : 'hidden' }` ) ; cy . get ( pausedOverlayWrapperSelector ) . should ( 'have.css' , 'opacity' , paused ? '1' : '0' ) ; } if ( loading === undefined ) { cy . log ( 'There should not be a loading overlay' ) ; cy . get ( loadingOverlayWrapperSelector ) . should ( 'not.exist' ) ; } else { cy . log ( `The loading overlay should be ${ loading ? 'visible' : 'hidden' }` ) ; cy . get ( loadingOverlayWrapperSelector ) . should ( 'have.css' , 'opacity' , loading ? '1' : '0' ) ; } if ( hover === undefined ) { cy . log ( 'There should not be a hover overlay' ) ; cy . get ( hoverOverlayWrapperSelector ) . should ( 'not.exist' ) ; } else { cy . log ( `The hover overlay should be ${ hover ? 'visible' : 'hidden' }` ) ; cy . get ( hoverOverlayWrapperSelector ) . should ( 'have.css' , 'opacity' , hover ? '1' : '0' ) ; } } ) ; Cypress . Commands . add ( 'checkVideoPlaybackState' , ( expectedPlaybackState , message = `the video should be ${ expectedPlaybackState }` ) => { cy . log ( message ) ; expect ( [ 'playing' , 'loading' , 'paused' ] ) . to . include ( expectedPlaybackState ) ; switch ( expectedPlaybackState ) { case 'playing' : cy . get ( videoElementSelector ) . invoke ( 'prop' , 'paused' ) . should ( 'be.false' ) ; cy . get ( videoElementSelector ) . invoke ( 'prop' , 'ended' ) . should ( 'be.false' ) ; cy . get ( videoElementSelector ) . invoke ( 'prop' , 'readyState' ) . should ( 'be.gte' , HTMLMediaElement . HAVE_FUTURE_DATA ) ; break ; case 'loading' : cy . get ( videoElementSelector ) . invoke ( 'prop' , 'paused' ) . should ( 'be.false' ) ; cy . get ( videoElementSelector ) . invoke ( 'prop' , 'ended' ) . should ( 'be.false' ) ; cy . get ( videoElementSelector ) . invoke ( 'prop' , 'readyState' ) . should ( 'be.lessThan' , HTMLMediaElement . HAVE_FUTURE_DATA ) ; break ; case 'paused' : default : cy . get ( videoElementSelector ) . should ( ( $video ) => { const videoElement = $video [ 0 ] ; expect ( videoElement . paused || videoElement . ended ) . to . be . true ; } ) ; } } ) ;