Skip to content

Commit ddb2eb2

Browse files
luwesluwes
committed
test: update tests
1 parent b1c355e commit ddb2eb2

File tree

3 files changed

+290
-260
lines changed

3 files changed

+290
-260
lines changed

‎test/Player.tsx‎

Lines changed: 56 additions & 260 deletions
Original file line numberDiff line numberDiff line change
@@ -49,281 +49,77 @@ test('video.play()', async (t) => {
4949
t.equal(videoRef.current?.paused, false);
5050
});
5151

52-
// test('player.pause()', t => {
53-
// const wrapper = create(<Player playing />)
54-
// const load = sinon.fake()
55-
// const pause = sinon.fake()
56-
// wrapper.getInstance().handlePlayerMount({ load, pause })
57-
// wrapper.getInstance().isPlaying = true
58-
// setProps(wrapper, { playing: false })
59-
// t.ok(pause.calledOnce)
60-
// })
61-
62-
// test('player.setVolume()', t => {
63-
// const wrapper = create(<Player volume={0.5} />)
64-
// const load = sinon.fake()
65-
// const setVolume = sinon.fake()
66-
// wrapper.getInstance().handlePlayerMount({ load, setVolume })
67-
// setProps(wrapper, { volume: 0.4 })
68-
// t.ok(setVolume.calledOnce)
69-
// })
70-
71-
// test('player.mute()', t => {
72-
// const wrapper = create(<Player muted={false} />)
73-
// const load = sinon.fake()
74-
// const mute = sinon.fake()
75-
// wrapper.getInstance().handlePlayerMount({ load, mute })
76-
// setProps(wrapper, { muted: true })
77-
// t.ok(mute.calledOnce)
78-
// })
79-
80-
// test('player.unmute()', async t => {
81-
// const wrapper = create(<Player muted volume={0.8} />)
82-
// const load = sinon.fake()
83-
// const unmute = sinon.fake()
84-
// const setVolume = sinon.fake()
85-
// wrapper.getInstance().handlePlayerMount({ load, unmute, setVolume })
86-
// setProps(wrapper, { muted: false })
87-
// t.ok(unmute.calledOnce)
88-
// return new Promise(resolve => setTimeout(() => {
89-
// t.ok(setVolume.calledOnceWith(0.8))
90-
// resolve()
91-
// }))
92-
// })
93-
94-
// test('player.setPlaybackRate()', t => {
95-
// const wrapper = create(<Player playbackRate={1} />)
96-
// const load = sinon.fake()
97-
// const setPlaybackRate = sinon.fake()
98-
// wrapper.getInstance().handlePlayerMount({ load, setPlaybackRate })
99-
// setProps(wrapper, { playbackRate: 0.5 })
100-
// t.ok(setPlaybackRate.calledOnce)
101-
// })
102-
103-
// const COMMON_METHODS = ['getDuration', 'getCurrentTime', 'getSecondsLoaded']
104-
105-
// for (const method of COMMON_METHODS) {
106-
// test(`${method}()`, t => {
107-
// const instance = create(<Player />).getInstance()
108-
// instance.player = { [method]: () => 123 }
109-
// instance.isReady = true
110-
// t.ok(instance[method]() === 123)
111-
// })
52+
test('video.pause()', async (t) => {
53+
const videoRef: React.Ref<HTMLVideoElement> = React.createRef();
54+
const wrapper = render(<Player ref={videoRef} src="file.mp4" playing activePlayer={HtmlPlayer} />);
11255

113-
// test(`${method}() - null`, t => {
114-
// const instance = create(<Player />).getInstance()
115-
// t.ok(instance[method]() === null)
116-
// })
117-
// }
56+
const pause = sinon.fake();
57+
videoRef.current?.addEventListener('pause', pause);
11858

119-
// test('progress()', t => {
120-
// const load = sinon.fake()
121-
// const onProgress = sinon.fake()
122-
// const instance = create(<Player url='file.mp4' onProgress={onProgress} />).getInstance()
123-
// instance.handlePlayerMount({
124-
// load,
125-
// getCurrentTime: sinon.fake.returns(10),
126-
// getSecondsLoaded: sinon.fake.returns(20),
127-
// getDuration: sinon.fake.returns(40)
128-
// })
129-
// instance.isReady = true
130-
// instance.progress()
131-
// instance.progress() // Call twice to ensure onProgress is not called again
132-
// t.ok(onProgress.calledOnceWith({
133-
// loaded: 0.5,
134-
// loadedSeconds: 20,
135-
// played: 0.25,
136-
// playedSeconds: 10
137-
// }))
138-
// })
59+
act(() => {
60+
wrapper.update(<Player ref={videoRef} src="file.mp4" activePlayer={HtmlPlayer} />);
61+
});
62+
await Promise.resolve();
13963

140-
// test('progress() handlePlayerMount', t => {
141-
// const load = sinon.fake()
142-
// const onProgress = sinon.fake()
143-
// const instance = create(<Player url='file.mp4' onProgress={onProgress} />).getInstance()
144-
// instance.isReady = true
145-
// instance.handlePlayerMount({
146-
// load,
147-
// getCurrentTime: sinon.fake.returns(10),
148-
// getSecondsLoaded: sinon.fake.returns(20),
149-
// getDuration: sinon.fake.returns(40)
150-
// })
151-
// t.ok(onProgress.calledWith({
152-
// loaded: 0.5,
153-
// loadedSeconds: 20,
154-
// played: 0.25,
155-
// playedSeconds: 10
156-
// }))
157-
// })
64+
t.ok(pause.calledOnce);
65+
t.equal(videoRef.current?.paused, true);
66+
});
15867

159-
// test('seekTo() - seconds', t => {
160-
// const load = sinon.fake()
161-
// const seekTo = sinon.fake()
162-
// const instance = create(<Player />).getInstance()
163-
// instance.handlePlayerMount({ load, seekTo })
164-
// instance.isReady = true
165-
// instance.seekTo(10)
166-
// t.ok(seekTo.calledOnceWith(10))
167-
// })
68+
test('video.volume = 0.5', async (t) => {
69+
const videoRef: React.Ref<HTMLVideoElement> = React.createRef();
70+
const wrapper = render(<Player ref={videoRef} src="file.mp4" activePlayer={HtmlPlayer} />);
16871

169-
// test('seekTo() - fraction', t => {
170-
// const load = sinon.fake()
171-
// const seekTo = sinon.fake()
172-
// const instance = create(<Player />).getInstance()
173-
// instance.handlePlayerMount({
174-
// load,
175-
// seekTo,
176-
// getDuration: sinon.fake.returns(10)
177-
// })
178-
// instance.isReady = true
179-
// instance.seekTo(0.5)
180-
// t.ok(seekTo.calledOnceWith(5))
181-
// })
72+
act(() => {
73+
wrapper.update(<Player ref={videoRef} src="file.mp4" volume={0.5} activePlayer={HtmlPlayer} />);
74+
});
75+
await Promise.resolve();
18276

183-
// test('seekTo() - warning', t => {
184-
// const stub = sinon.stub(console, 'warn')
185-
// const load = sinon.fake()
186-
// const seekTo = sinon.fake()
187-
// const instance = create(<Player />).getInstance()
188-
// instance.handlePlayerMount({
189-
// load,
190-
// seekTo,
191-
// getDuration: sinon.fake.returns(null)
192-
// })
193-
// instance.isReady = true
194-
// instance.seekTo(0.5)
195-
// t.ok(seekTo.notCalled)
196-
// t.ok(stub.calledOnce)
197-
// stub.restore()
198-
// })
77+
t.equal(videoRef.current?.volume, 0.5);
78+
});
19979

200-
// test('seekTo() - set seekOnPlay', t => {
201-
// const load = sinon.fake()
202-
// const seekTo = sinon.fake()
203-
// const instance = create(<Player />).getInstance()
204-
// instance.handlePlayerMount({ load, seekTo })
205-
// instance.isReady = false
206-
// instance.seekTo(10)
207-
// t.ok(seekTo.notCalled)
208-
// t.ok(instance.seekOnPlay === 10)
209-
// })
80+
test('video.muted = true', async (t) => {
81+
const videoRef: React.Ref<HTMLVideoElement> = React.createRef();
82+
const wrapper = render(<Player ref={videoRef} src="file.mp4" activePlayer={HtmlPlayer} />);
21083

211-
// test('onReady()', t => {
212-
// const onReady = sinon.fake()
213-
// const load = sinon.fake()
214-
// const setVolume = sinon.fake()
215-
// const play = sinon.fake()
216-
// const instance = create(<Player onReady={onReady} playing volume={1} />).getInstance()
217-
// instance.handlePlayerMount({ load, setVolume, play })
218-
// instance.handleDurationCheck = sinon.fake()
219-
// instance.isReady = true
220-
// instance.handleReady()
221-
// t.ok(setVolume.calledOnceWith(1))
222-
// t.ok(play.calledOnce)
223-
// })
84+
act(() => {
85+
wrapper.update(<Player ref={videoRef} src="file.mp4" muted activePlayer={HtmlPlayer} />);
86+
});
87+
await Promise.resolve();
22488

225-
// test('loadOnReady', t => {
226-
// const load = sinon.fake()
227-
// const play = sinon.fake()
228-
// const instance = create(<Player />).getInstance()
229-
// instance.handlePlayerMount({ load, play })
230-
// instance.handleDurationCheck = sinon.fake()
231-
// instance.loadOnReady = 'file.mp4'
232-
// instance.handleReady()
233-
// t.ok(load.calledWith('file.mp4'))
234-
// t.ok(play.notCalled)
235-
// })
89+
t.equal(videoRef.current?.muted, true);
90+
});
23691

237-
// test('onPlay()', t => {
238-
// const onPlay = sinon.fake()
239-
// const instance = create(<Player onPlay={onPlay} />).getInstance()
240-
// instance.handlePlayerMount({ load: () => {} })
241-
// instance.handleDurationCheck = sinon.fake()
242-
// instance.handlePlay()
243-
// t.ok(onPlay.calledOnce)
244-
// t.ok(instance.isPlaying)
245-
// t.notOk(instance.isLoading)
246-
// })
92+
test('video.muted = false', async (t) => {
93+
const videoRef: React.Ref<HTMLVideoElement> = React.createRef();
94+
const wrapper = render(<Player ref={videoRef} src="file.mp4" muted activePlayer={HtmlPlayer} />);
24795

248-
// test('onStart()', t => {
249-
// const onStart = sinon.fake()
250-
// const instance = create(<Player onStart={onStart} />).getInstance()
251-
// instance.handlePlayerMount({ load: () => {} })
252-
// instance.handleDurationCheck = sinon.fake()
253-
// instance.startOnPlay = true
254-
// instance.handlePlay()
255-
// t.ok(onStart.calledOnce)
256-
// t.notOk(instance.startOnPlay)
257-
// })
96+
act(() => {
97+
wrapper.update(<Player ref={videoRef} src="file.mp4" activePlayer={HtmlPlayer} />);
98+
});
99+
await Promise.resolve();
258100

259-
// test('seekOnPlay', t => {
260-
// const seekTo = sinon.stub(Player.prototype, 'seekTo')
261-
// const instance = create(<Player />).getInstance()
262-
// instance.handlePlayerMount({ load: () => {} })
263-
// instance.handleDurationCheck = sinon.fake()
264-
// instance.seekOnPlay = 10
265-
// instance.handlePlay()
266-
// t.ok(seekTo.calledOnceWith(10))
267-
// t.ok(instance.seekOnPlay === null)
268-
// seekTo.restore()
269-
// })
101+
t.equal(videoRef.current?.muted, false);
102+
});
270103

271-
// test('onPause()', t => {
272-
// const onPause = sinon.fake()
273-
// const instance = create(<Player onPause={onPause} />).getInstance()
274-
// instance.isLoading = false
275-
// instance.handlePause()
276-
// t.ok(onPause.calledOnce)
277-
// t.notOk(instance.isPlaying)
278-
// })
104+
test('video.playbackRate = 0.5', async (t) => {
105+
const videoRef: React.Ref<HTMLVideoElement> = React.createRef();
106+
const wrapper = render(<Player ref={videoRef} src="file.mp4" activePlayer={HtmlPlayer} />);
279107

280-
// test('onPause() - isLoading', t => {
281-
// const onPause = sinon.fake()
282-
// const instance = create(<Player onPause={onPause} />).getInstance()
283-
// instance.isLoading = true
284-
// instance.handlePause()
285-
// t.ok(onPause.notCalled)
286-
// })
108+
act(() => {
109+
wrapper.update(<Player ref={videoRef} src="file.mp4" playbackRate={0.5} activePlayer={HtmlPlayer} />);
110+
});
111+
await Promise.resolve();
287112

288-
// test('onEnded()', t => {
289-
// const activePlayer = () => null
290-
// const onEnded = sinon.fake()
291-
// const instance = create(<Player activePlayer={activePlayer} onEnded={onEnded} />).getInstance()
292-
// instance.isPlaying = true
293-
// instance.handleEnded()
294-
// t.ok(onEnded.calledOnce)
295-
// t.notOk(instance.isPlaying)
296-
// })
113+
t.equal(videoRef.current?.playbackRate, 0.5);
114+
});
297115

298-
// test('loopOnEnded', t => {
299-
// const activePlayer = () => null
300-
// activePlayer.loopOnEnded = true
301-
// const seekTo = sinon.stub(Player.prototype, 'seekTo')
302-
// const instance = create(<Player loop activePlayer={activePlayer} />).getInstance()
303-
// instance.handlePlayerMount({ load: () => {} })
304-
// instance.isPlaying = true
305-
// instance.handleEnded()
306-
// t.ok(seekTo.calledOnceWith(0))
307-
// t.ok(instance.isPlaying)
308-
// seekTo.restore()
309-
// })
116+
await test('video.duration', async (t) => {
117+
const videoRef: React.Ref<HTMLVideoElement> = React.createRef();
118+
render(<Player ref={videoRef} src="https://stream.mux.com/a4nOgmxGWg6gULfcBbAa00gXyfcwPnAFldF8RdsNyk8M/low.mp4" activePlayer={HtmlPlayer} />);
310119

311-
// test('handleDurationCheck', t => {
312-
// const onDuration = sinon.fake()
313-
// const instance = create(<Player onDuration={onDuration} />).getInstance()
314-
// instance.getDuration = sinon.fake.returns(10)
315-
// instance.handleDurationCheck()
316-
// instance.handleDurationCheck() // Call twice to ensure onDuration is not called again
317-
// t.ok(onDuration.calledOnceWith(10))
318-
// t.ok(instance.onDurationCalled)
319-
// })
120+
await new Promise((resolve) => {
121+
videoRef.current?.addEventListener('durationchange', resolve);
122+
});
320123

321-
// test('durationCheckTimeout', t => {
322-
// const onDuration = sinon.fake()
323-
// const instance = create(<Player onDuration={onDuration} />).getInstance()
324-
// instance.getDuration = sinon.fake.returns(null)
325-
// instance.durationCheckTimeout = null
326-
// instance.handleDurationCheck()
327-
// t.ok(onDuration.notCalled)
328-
// t.truthy(instance.durationCheckTimeout)
329-
// })
124+
t.equal(videoRef.current?.duration, 10);
125+
});

‎test/helpers/server-safe-globals.js‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -35,6 +35,13 @@ class HTMLVideoElement extends Element {
3535
async load() {
3636
await Promise.resolve();
3737
this.dispatchEvent(new Event('loadstart'));
38+
39+
await Promise.resolve();
40+
this.duration = 10;
41+
this.dispatchEvent(new Event('durationchange'));
42+
this.dispatchEvent(new Event('loadedmetadata'));
43+
this.dispatchEvent(new Event('loadeddata'));
44+
this.dispatchEvent(new Event('canplay'));
3845
}
3946

4047
pause() {

0 commit comments

Comments
 (0)