Skip to content

Commit 550fa7a

Browse files
kaseyveekaseyvee
committed
fix: flaky video tests
1 parent 015292d commit 550fa7a

File tree

4 files changed

+47
-68
lines changed

4 files changed

+47
-68
lines changed

‎cypress/support/component-index.html‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -15,6 +15,11 @@
1515
href="https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded:opsz,wght,FILL,GRAD@24,400,1,0"
1616
/>
1717
<title>Components App</title>
18+
<style>
19+
.rustic-video-controls {
20+
opacity: 1 !important;
21+
}
22+
</style>
1823
</head>
1924
<body style="margin: 0">
2025
<div data-cy-root></div>

‎cypress/support/component.tsx‎

Lines changed: 0 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -29,8 +29,3 @@ Cypress.Commands.add('mount', (component, options) => {
2929
options
3030
)
3131
})
32-
33-
Cypress.Commands.add('hoverAndDisplay', (element) => {
34-
cy.get(element).realHover()
35-
cy.get(element, { timeout: 2000 }).should('be.visible')
36-
})

‎public/videoExamples/videoCypress.mp4‎

546 KB
Binary file not shown.

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

Lines changed: 42 additions & 63 deletions
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,6 @@ import Video from './video'
66

77
describe('Video', () => {
88
const videoElement = '[data-cy=video-element]'
9-
const controls = '[data-cy=controls]'
109
const volumeSlider = '[data-cy=volume-slider]'
1110
const muteButton = '[data-cy=mute-button]'
1211
const progressSlider = '[data-cy=progress-slider]'
@@ -22,7 +21,7 @@ describe('Video', () => {
2221
const controlError = '[data-cy=control-error]'
2322
const loadingSpinner = '[data-cy=spinner]'
2423

25-
const src = '/videoExamples/videoStorybook.mp4'
24+
const src = '/videoExamples/videoCypress.mp4'
2625
const title = 'Video Component'
2726
const captions = '/audioExamples/captions.vtt'
2827
const transcriptContent =
@@ -31,14 +30,12 @@ describe('Video', () => {
3130
context('Mobile and Desktop', () => {
3231
beforeEach(() => {
3332
cy.mount(
34-
<div style={{ width: '200px' }}>
35-
<Video
36-
src={src}
37-
title={title}
38-
captions={captions}
39-
transcript={transcriptContent}
40-
/>
41-
</div>
33+
<Video
34+
src={src}
35+
title={title}
36+
captions={captions}
37+
transcript={transcriptContent}
38+
/>
4239
)
4340
})
4441

@@ -59,34 +56,22 @@ describe('Video', () => {
5956
cy.viewport(viewport)
6057
cy.get(playButton).should('exist')
6158
cy.get(videoElement).its('0.paused').should('equal', true)
62-
if (viewport === 'macbook-13') {
63-
cy.hoverAndDisplay(controls)
64-
}
6559
cy.get(playButton).click()
6660
cy.get(pauseButton).should('exist')
6761
cy.get(videoElement).its('0.paused').should('equal', false)
68-
if (viewport === 'macbook-13') {
69-
cy.hoverAndDisplay(controls)
70-
}
7162
cy.get(pauseButton).click()
7263
cy.get(playButton).should('exist')
7364
})
7465
it(`should toggle between fullscreen and normal mode when clicking the fullscreen button on ${viewport} screen`, () => {
7566
cy.viewport(viewport)
7667
cy.get(loadingSpinner).should('not.exist')
7768
cy.get(fullScreenEnterButton).should('exist')
78-
if (viewport === 'macbook-13') {
79-
cy.hoverAndDisplay(controls)
80-
}
8169
cy.get(fullScreenEnterButton).should('be.visible')
8270

8371
cy.get(fullScreenEnterButton).realClick()
8472
cy.wait(1000)
85-
cy.hoverAndDisplay(controls)
86-
cy.get(fullScreenExitButton).should('exist')
8773
cy.document().its('fullscreenElement').should('exist')
8874

89-
cy.hoverAndDisplay(controls)
9075
cy.get(fullScreenExitButton).realClick()
9176
cy.wait(1000)
9277
cy.document().its('fullscreenElement').should('not.exist')
@@ -115,26 +100,6 @@ describe('Video', () => {
115100
})
116101
})
117102
})
118-
it(`should display an error message if entering fullscreen fails on ${viewport} screen`, () => {
119-
cy.viewport(viewport)
120-
cy.get(loadingSpinner).should('not.exist')
121-
cy.window().then((window) => {
122-
cy.stub(window.HTMLElement.prototype, 'requestFullscreen').rejects(
123-
new TypeError('some error')
124-
)
125-
})
126-
127-
if (viewport === 'macbook-13') {
128-
cy.hoverAndDisplay(controls)
129-
}
130-
cy.get(fullScreenEnterButton).realClick()
131-
cy.get(fullScreenExitButton).should('not.exist')
132-
cy.get(fullScreenEnterButton).should('exist')
133-
if (viewport === 'macbook-13') {
134-
cy.hoverAndDisplay(controls)
135-
}
136-
cy.get(controlError).should('exist')
137-
})
138103
it(`should display an error message if pressing play fails on ${viewport} screen`, () => {
139104
cy.viewport(viewport)
140105
cy.window().then((window) => {
@@ -143,15 +108,9 @@ describe('Video', () => {
143108
)
144109
})
145110

146-
if (viewport === 'macbook-13') {
147-
cy.get(controls).realHover()
148-
}
149111
cy.get(playButton).click()
150112
cy.get(playButton).should('exist')
151113
cy.get(pauseButton).should('not.exist')
152-
if (viewport === 'macbook-13') {
153-
cy.hoverAndDisplay(controls)
154-
}
155114
cy.get(controlError).should('exist')
156115
})
157116
})
@@ -174,13 +133,28 @@ describe('Video', () => {
174133
cy.get(fullScreenEnterButton).should('exist')
175134
cy.get(fullScreenEnterButton).realClick()
176135
cy.wait(1000)
177-
cy.get(controls).click()
178136
cy.get(playButton).should('exist')
179137
cy.get(transcriptToggle).should('exist')
180138
cy.get(fullScreenExitButton).should('exist')
181139
cy.get(miniPlayerButton).should('exist')
182140
cy.get(progressSlider).should('exist')
183141
})
142+
143+
it('should display an error message if entering fullscreen fails', () => {
144+
cy.get(loadingSpinner).should('not.exist')
145+
cy.window()
146+
.then((window) => {
147+
cy.stub(window.HTMLElement.prototype, 'requestFullscreen').rejects(
148+
new TypeError('some error')
149+
)
150+
})
151+
.then(() => {
152+
cy.get(fullScreenEnterButton).realClick()
153+
cy.get(fullScreenExitButton).should('not.exist')
154+
cy.get(fullScreenEnterButton).should('exist')
155+
cy.get(controlError).should('exist')
156+
})
157+
})
184158
})
185159

186160
context('Desktop', () => {
@@ -200,22 +174,19 @@ describe('Video', () => {
200174
it(`should go forwards and backwards 10 seconds when clicking the forward/back buttons`, () => {
201175
const tenSeconds = 10
202176

203-
cy.hoverAndDisplay(controls)
204177
cy.get('[data-cy=forward-ten-seconds-button]').click()
205178
cy.get(videoElement).its('0.currentTime').should('equal', tenSeconds)
206179
cy.get('[data-cy=replay-ten-seconds-button]').click()
207180
cy.get(videoElement).its('0.currentTime').should('equal', 0)
208181
})
209182
it(`should mute and unmute the audio when clicking the mute button`, () => {
210-
cy.hoverAndDisplay(controls)
211183
cy.get(playButton).click()
212184
cy.get(videoElement).its('0.muted').should('equal', false)
213185
cy.get(muteButton).click({ force: true })
214186
cy.get(videoElement).its('0.muted').should('equal', true)
215187
})
216188
it(`should change the volume when adjusting the volume slider on desktop`, () => {
217189
cy.get(videoElement).its('0.volume').should('equal', 1)
218-
cy.hoverAndDisplay(controls)
219190
cy.get(muteButton).focus().get(volumeSlider).should('be.visible')
220191

221192
const sliderAnimationWait = 1000
@@ -225,38 +196,46 @@ describe('Video', () => {
225196
})
226197
it(`should change the time when the video progress slider is adjusted`, () => {
227198
cy.get(videoElement).its('0.currentTime').should('equal', 0)
228-
cy.hoverAndDisplay(controls)
229199
cy.get(progressSlider).type('{rightArrow}')
230200
cy.get(videoElement).its('0.currentTime').should('be.greaterThan', 0)
231201
})
232202
it('should show the correct view when going to fullscreen mode then changing the viewport size', () => {
233203
cy.get(fullScreenEnterButton).should('exist')
234-
cy.hoverAndDisplay(controls)
235204
cy.get(fullScreenEnterButton).realClick()
236-
cy.wait(1000)
237-
cy.get(fullScreenExitButton).should('exist')
205+
cy.get(fullScreenExitButton, { timeout: 2000 }).should('exist')
238206
cy.document().its('fullscreenElement').should('exist')
239207

240208
cy.viewport('iphone-6')
241-
cy.hoverAndDisplay(controls)
242209
cy.get(fullScreenExitButton).click()
243-
cy.wait(1000)
244-
cy.get(fullScreenEnterButton).should('exist')
210+
cy.get(fullScreenEnterButton, { timeout: 2000 }).should('exist')
245211
cy.document().its('fullscreenElement').should('not.exist')
246212
})
247213
it('should toggle between mini player and normal mode when clicking the mini player button', () => {
248214
cy.get(miniPlayerButton).should('exist')
249-
cy.hoverAndDisplay(controls)
250215
cy.get(miniPlayerButton).realClick()
251216
cy.wait(1000)
252-
cy.get(miniPlayerExitButton).should('exist')
217+
cy.get(miniPlayerExitButton, { timeout: 2000 }).should('exist')
253218
cy.document().its('pictureInPictureElement').should('exist')
254219

255-
cy.hoverAndDisplay(controls)
256220
cy.get(miniPlayerExitButton).click()
257221
cy.wait(1000)
258-
cy.get(miniPlayerButton).should('exist')
222+
cy.get(miniPlayerButton, { timeout: 2000 }).should('exist')
259223
cy.document().its('pictureInPictureElement').should('not.exist')
260224
})
225+
it('should display an error message if entering fullscreen fails', () => {
226+
cy.get(loadingSpinner).should('not.exist')
227+
cy.window()
228+
.then((window) => {
229+
cy.stub(window.HTMLElement.prototype, 'requestFullscreen').rejects(
230+
new TypeError('some error')
231+
)
232+
})
233+
.then(() => {
234+
cy.get(fullScreenEnterButton).realClick()
235+
cy.get(fullScreenExitButton).should('not.exist')
236+
cy.get(fullScreenEnterButton).should('exist')
237+
cy.get(controlError).should('exist')
238+
})
239+
})
261240
})
262241
})

0 commit comments

Comments
 (0)