forked from videojs/video.js
-
Notifications
You must be signed in to change notification settings - Fork 0
/
controls.test.js
329 lines (235 loc) · 11 KB
/
controls.test.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
/* eslint-env qunit */
import VolumeControl from '../../src/js/control-bar/volume-control/volume-control.js';
import MuteToggle from '../../src/js/control-bar/mute-toggle.js';
import VolumeBar from '../../src/js/control-bar/volume-control/volume-bar.js';
import PlayToggle from '../../src/js/control-bar/play-toggle.js';
import PlaybackRateMenuButton from '../../src/js/control-bar/playback-rate-menu/playback-rate-menu-button.js';
import Slider from '../../src/js/slider/slider.js';
import PictureInPictureToggle from '../../src/js/control-bar/picture-in-picture-toggle.js';
import FullscreenToggle from '../../src/js/control-bar/fullscreen-toggle.js';
import ControlBar from '../../src/js/control-bar/control-bar.js';
import TestHelpers from './test-helpers.js';
import document from 'global/document';
import sinon from 'sinon';
QUnit.module('Controls', {
beforeEach(assert) {
this.clock = sinon.useFakeTimers();
},
afterEach(assert) {
this.clock.restore();
}
});
QUnit.test('should hide volume and mute toggle control if it\'s not supported', function(assert) {
assert.expect(2);
const player = TestHelpers.makePlayer();
player.tech_.featuresVolumeControl = false;
player.tech_.featuresMuteControl = false;
const volumeControl = new VolumeControl(player);
const muteToggle = new MuteToggle(player);
assert.ok(volumeControl.hasClass('vjs-hidden'), 'volumeControl is not hidden');
assert.ok(muteToggle.hasClass('vjs-hidden'), 'muteToggle is not hidden');
player.dispose();
volumeControl.dispose();
muteToggle.dispose();
});
QUnit.test('should show replay icon when video playback ended', function(assert) {
assert.expect(1);
const player = TestHelpers.makePlayer();
const playToggle = new PlayToggle(player);
player.trigger('ended');
assert.ok(playToggle.hasClass('vjs-ended'), 'playToogle is in the ended state');
player.dispose();
playToggle.dispose();
});
QUnit.test('should show replay icon when video playback ended and replay option is set to true', function(assert) {
assert.expect(1);
const player = TestHelpers.makePlayer();
const playToggle = new PlayToggle(player, {replay: true});
player.trigger('ended');
assert.ok(playToggle.hasClass('vjs-ended'), 'playToogle is in the ended state');
player.dispose();
playToggle.dispose();
});
QUnit.test('should not show the replay icon when video playback ended', function(assert) {
assert.expect(1);
const player = TestHelpers.makePlayer();
const playToggle = new PlayToggle(player, {replay: false});
player.trigger('ended');
assert.equal(playToggle.hasClass('vjs-ended'), false, 'playToogle is not in the ended state');
player.dispose();
playToggle.dispose();
});
QUnit.test('should test and toggle volume control on `loadstart`', function(assert) {
const player = TestHelpers.makePlayer();
player.tech_.featuresVolumeControl = true;
player.tech_.featuresMuteControl = true;
const volumeControl = new VolumeControl(player);
const muteToggle = new MuteToggle(player);
assert.equal(volumeControl.hasClass('vjs-hidden'), false, 'volumeControl is hidden initially');
assert.equal(muteToggle.hasClass('vjs-hidden'), false, 'muteToggle is hidden initially');
player.tech_.featuresVolumeControl = false;
player.tech_.featuresMuteControl = false;
player.trigger('loadstart');
assert.equal(volumeControl.hasClass('vjs-hidden'), true, 'volumeControl does not hide itself');
assert.equal(muteToggle.hasClass('vjs-hidden'), true, 'muteToggle does not hide itself');
player.tech_.featuresVolumeControl = true;
player.tech_.featuresMuteControl = true;
player.trigger('loadstart');
assert.equal(volumeControl.hasClass('vjs-hidden'), false, 'volumeControl does not show itself');
assert.equal(muteToggle.hasClass('vjs-hidden'), false, 'muteToggle does not show itself');
player.dispose();
volumeControl.dispose();
muteToggle.dispose();
});
QUnit.test('calculateDistance should use changedTouches, if available', function(assert) {
const player = TestHelpers.makePlayer();
player.tech_.featuresVolumeControl = true;
const slider = new Slider(player);
document.body.appendChild(slider.el_);
slider.el_.style.position = 'absolute';
slider.el_.style.width = '200px';
slider.el_.style.left = '0px';
const event = {
pageX: 10,
changedTouches: [{
pageX: 100
}]
};
assert.equal(slider.calculateDistance(event), 0.5, 'we should have touched exactly in the center, so, the ratio should be half');
player.dispose();
slider.dispose();
});
QUnit.test('should hide playback rate control if it\'s not supported', function(assert) {
assert.expect(1);
const player = TestHelpers.makePlayer();
const playbackRate = new PlaybackRateMenuButton(player);
assert.ok(playbackRate.el().className.indexOf('vjs-hidden') >= 0, 'playbackRate is not hidden');
player.dispose();
playbackRate.dispose();
});
QUnit.test('Picture-in-Picture control text should be correct when enterpictureinpicture and leavepictureinpicture are triggered', function(assert) {
const player = TestHelpers.makePlayer();
const pictureInPictureToggle = new PictureInPictureToggle(player);
player.isInPictureInPicture(true);
player.trigger('enterpictureinpicture');
assert.equal(pictureInPictureToggle.controlText(), 'Exit Picture-in-Picture', 'Control Text is correct while switching to Picture-in-Picture mode');
player.isInPictureInPicture(false);
player.trigger('leavepictureinpicture');
assert.equal(pictureInPictureToggle.controlText(), 'Picture-in-Picture', 'Control Text is correct while switching back to normal mode');
player.dispose();
pictureInPictureToggle.dispose();
});
QUnit.test('Fullscreen control text should be correct when fullscreenchange is triggered', function(assert) {
const player = TestHelpers.makePlayer({controlBar: false});
const fullscreentoggle = new FullscreenToggle(player);
// make the fullscreenchange handler doesn't trigger
player.off(player.fsApi_.fullscreenchange, player.boundDocumentFullscreenChange_);
player.isFullscreen(true);
player.trigger('fullscreenchange');
assert.equal(fullscreentoggle.controlText(), 'Non-Fullscreen', 'Control Text is correct while switching to fullscreen mode');
player.isFullscreen(false);
player.trigger('fullscreenchange');
assert.equal(fullscreentoggle.controlText(), 'Fullscreen', 'Control Text is correct while switching back to normal mode');
player.dispose();
fullscreentoggle.dispose();
});
QUnit.test('Clicking MuteToggle when volume is above 0 should toggle muted property and not change volume', function(assert) {
const player = TestHelpers.makePlayer({ techOrder: ['html5'] });
const muteToggle = new MuteToggle(player);
assert.equal(player.volume(), 1, 'volume is above 0');
assert.equal(player.muted(), false, 'player is not muted');
muteToggle.handleClick();
assert.equal(player.volume(), 1, 'volume is same');
assert.equal(player.muted(), true, 'player is muted');
player.dispose();
muteToggle.dispose();
});
QUnit.test('Clicking MuteToggle when volume is 0 and muted is false should set volume to lastVolume and keep muted false', function(assert) {
const player = TestHelpers.makePlayer({ techOrder: ['html5'] });
const muteToggle = new MuteToggle(player);
player.volume(0);
assert.equal(player.lastVolume_(), 1, 'lastVolume is set');
assert.equal(player.muted(), false, 'player is muted');
muteToggle.handleClick();
assert.equal(player.volume(), 1, 'volume is set to lastVolume');
assert.equal(player.muted(), false, 'muted remains false');
player.dispose();
muteToggle.dispose();
});
QUnit.test('Clicking MuteToggle when volume is 0 and muted is true should set volume to lastVolume and sets muted to false', function(assert) {
const player = TestHelpers.makePlayer({ techOrder: ['html5'] });
const muteToggle = new MuteToggle(player);
player.volume(0);
player.muted(true);
player.lastVolume_(0.5);
muteToggle.handleClick();
assert.equal(player.volume(), 0.5, 'volume is set to lastVolume');
assert.equal(player.muted(), false, 'muted is set to false');
player.dispose();
muteToggle.dispose();
});
QUnit.test('Clicking MuteToggle when volume is 0, lastVolume is less than 0.1, and muted is true sets volume to 0.1 and muted to false', function(assert) {
const player = TestHelpers.makePlayer({ techOrder: ['html5'] });
const muteToggle = new MuteToggle(player);
player.volume(0);
player.muted(true);
player.lastVolume_(0.05);
muteToggle.handleClick();
// `Number.prototype.toFixed()` is used here to circumvent rounding issues
assert.equal(player.volume().toFixed(1), (0.1).toFixed(1), 'since lastVolume is less than 0.1, volume is set to 0.1');
assert.equal(player.muted(), false, 'muted is set to false');
player.dispose();
muteToggle.dispose();
});
QUnit.test('ARIA value of VolumeBar should start at 100', function(assert) {
const player = TestHelpers.makePlayer({ techOrder: ['html5'] });
const volumeBar = new VolumeBar(player);
this.clock.tick(1);
assert.equal(volumeBar.el_.getAttribute('aria-valuenow'), 100, 'ARIA value of VolumeBar is 100');
player.dispose();
volumeBar.dispose();
});
QUnit.test('Muting with MuteToggle should set ARIA value of VolumeBar to 0', function(assert) {
const player = TestHelpers.makePlayer({ techOrder: ['html5'] });
const volumeBar = new VolumeBar(player);
const muteToggle = new MuteToggle(player);
this.clock.tick(1);
assert.equal(player.volume(), 1, 'Volume is 1');
assert.equal(player.muted(), false, 'Muted is false');
assert.equal(volumeBar.el_.getAttribute('aria-valuenow'), 100, 'ARIA value of VolumeBar is 100');
muteToggle.handleClick();
// Because `volumechange` is triggered asynchronously, it doesn't end up
// getting fired on `player` in the test environment, so we run it
// manually.
player.trigger('volumechange');
assert.equal(player.volume(), 1, 'Volume remains 1');
assert.equal(player.muted(), true, 'Muted is true');
assert.equal(volumeBar.el_.getAttribute('aria-valuenow'), 0, 'ARIA value of VolumeBar is 0');
player.dispose();
muteToggle.dispose();
volumeBar.dispose();
});
QUnit.test('controlbar children to false individually, does not cause an assertion', function(assert) {
const defaultChildren = ControlBar.prototype.options_.children;
defaultChildren.forEach((childName) => {
const options = {controlBar: {}};
options.controlBar[childName] = false;
const player = TestHelpers.makePlayer(options);
this.clock.tick(1000);
player.triggerReady();
player.dispose();
assert.ok(true, `${childName}: false. did not cause an assertion`);
});
});
QUnit.test('all controlbar children to false, does not cause an assertion', function(assert) {
const defaultChildren = ControlBar.prototype.options_.children;
const options = {controlBar: {}};
defaultChildren.forEach((childName) => {
options.controlBar[childName] = false;
});
const player = TestHelpers.makePlayer(options);
this.clock.tick(1000);
player.triggerReady();
player.dispose();
assert.ok(true, 'did not cause an assertion');
});