test: update video tests

cypress.d.ts

@@ -5,6 +5,7 @@ declare global {
     interface Chainable {
       mount: typeof mount
       dataCy(value: string): Chainable<JQuery<HTMLElement>>
+      hoverAndDisplay(element: string): Chainable<any>
     }
   }
 }

cypress/support/component.tsx

@@ -29,3 +29,8 @@ Cypress.Commands.add('mount', (component, options) => {
     options
   )
 })
+
+Cypress.Commands.add('hoverAndDisplay', (element) => {
+  cy.get(element).realHover()
+  cy.get(element).should('be.visible')
+})

src/components/media/video/video.cy.tsx

@@ -60,13 +60,13 @@ describe('Video', () => {
         cy.get(playButton).should('exist')
         cy.get(videoElement).its('0.paused').should('equal', true)
         if (viewport === 'macbook-13') {
-          cy.get(controls).realHover()
+          cy.hoverAndDisplay(controls)
         }
         cy.get(playButton).click()
         cy.get(pauseButton).should('exist')
         cy.get(videoElement).its('0.paused').should('equal', false)
         if (viewport === 'macbook-13') {
-          cy.get(controls).realHover()
+          cy.hoverAndDisplay(controls)
         }
         cy.get(pauseButton).click()
         cy.get(playButton).should('exist')
@@ -76,21 +76,17 @@ describe('Video', () => {
         cy.get(loadingSpinner).should('not.exist')
         cy.get(fullScreenEnterButton).should('exist')
         if (viewport === 'macbook-13') {
-          cy.get(controls).realHover()
+          cy.hoverAndDisplay(controls)
         }
         cy.get(fullScreenEnterButton).should('be.visible')
 
         cy.get(fullScreenEnterButton).realClick()
         cy.wait(1000)
-        if (viewport === 'macbook-13') {
-          cy.get(controls).realHover()
-        }
+        cy.hoverAndDisplay(controls)
         cy.get(fullScreenExitButton).should('exist')
         cy.document().its('fullscreenElement').should('exist')
 
-        if (viewport === 'macbook-13') {
-          cy.get(controls).realHover()
-        }
+        cy.hoverAndDisplay(controls)
         cy.get(fullScreenExitButton).realClick()
         cy.wait(1000)
         cy.document().its('fullscreenElement').should('not.exist')
@@ -129,11 +125,14 @@ describe('Video', () => {
         })
 
         if (viewport === 'macbook-13') {
-          cy.get(controls).realHover()
+          cy.hoverAndDisplay(controls)
         }
         cy.get(fullScreenEnterButton).realClick()
         cy.get(fullScreenExitButton).should('not.exist')
         cy.get(fullScreenEnterButton).should('exist')
+        if (viewport === 'macbook-13') {
+          cy.hoverAndDisplay(controls)
+        }
         cy.get(controlError).should('exist')
       })
       it(`should display an error message if pressing play fails on ${viewport} screen`, () => {
@@ -151,7 +150,7 @@ describe('Video', () => {
         cy.get(playButton).should('exist')
         cy.get(pauseButton).should('not.exist')
         if (viewport === 'macbook-13') {
-          cy.get(controls).realHover()
+          cy.hoverAndDisplay(controls)
         }
         cy.get(controlError).should('exist')
       })
@@ -201,22 +200,22 @@ describe('Video', () => {
     it(`should go forwards and backwards 10 seconds when clicking the forward/back buttons`, () => {
       const tenSeconds = 10
 
-      cy.get(controls).realHover()
+      cy.hoverAndDisplay(controls)
       cy.get('[data-cy=forward-ten-seconds-button]').click()
       cy.get(videoElement).its('0.currentTime').should('equal', tenSeconds)
       cy.get('[data-cy=replay-ten-seconds-button]').click()
       cy.get(videoElement).its('0.currentTime').should('equal', 0)
     })
     it(`should mute and unmute the audio when clicking the mute button`, () => {
-      cy.get(controls).realHover()
+      cy.hoverAndDisplay(controls)
       cy.get(playButton).click()
       cy.get(videoElement).its('0.muted').should('equal', false)
       cy.get(muteButton).click({ force: true })
       cy.get(videoElement).its('0.muted').should('equal', true)
     })
     it(`should change the volume when adjusting the volume slider on desktop`, () => {
       cy.get(videoElement).its('0.volume').should('equal', 1)
-      cy.get(controls).realHover()
+      cy.hoverAndDisplay(controls)
       cy.get(muteButton).focus().get(volumeSlider).should('be.visible')
 
       const sliderAnimationWait = 1000
@@ -226,34 +225,34 @@ describe('Video', () => {
     })
     it(`should change the time when the video progress slider is adjusted`, () => {
       cy.get(videoElement).its('0.currentTime').should('equal', 0)
-      cy.get(controls).realHover()
+      cy.hoverAndDisplay(controls)
       cy.get(progressSlider).type('{rightArrow}')
       cy.get(videoElement).its('0.currentTime').should('be.greaterThan', 0)
     })
     it('should show the correct view when going to fullscreen mode then changing the viewport size', () => {
       cy.get(fullScreenEnterButton).should('exist')
-      cy.get(controls).realHover()
+      cy.hoverAndDisplay(controls)
       cy.get(fullScreenEnterButton).realClick()
       cy.wait(1000)
       cy.get(fullScreenExitButton).should('exist')
       cy.document().its('fullscreenElement').should('exist')
 
       cy.viewport('iphone-6')
-      cy.get(controls).realHover()
+      cy.hoverAndDisplay(controls)
       cy.get(fullScreenExitButton).click()
       cy.wait(1000)
       cy.get(fullScreenEnterButton).should('exist')
       cy.document().its('fullscreenElement').should('not.exist')
     })
     it('should toggle between picture-in-picture and normal mode when clicking the picture-in-picture button', () => {
       cy.get(pictureInPictureButton).should('exist')
-      cy.get(controls).realHover()
+      cy.hoverAndDisplay(controls)
       cy.get(pictureInPictureButton).realClick()
       cy.wait(1000)
       cy.get(pictureInPictureExitButton).should('exist')
       cy.document().its('pictureInPictureElement').should('exist')
 
-      cy.get(controls).realHover()
+      cy.hoverAndDisplay(controls)
       cy.get(pictureInPictureExitButton).click()
       cy.wait(1000)
       cy.get(pictureInPictureButton).should('exist')