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
|
/* eslint-env qunit */
import sinon from 'sinon';
import TestHelpers from './test-helpers';
const getExpectedBreakpoints = (o) => Object.assign({}, {
tiny: 210,
xsmall: 320,
small: 425,
medium: 768,
large: 1440,
xlarge: 2560,
huge: Infinity
}, o);
QUnit.module('Player: Breakpoints', {
beforeEach() {
this.clock = sinon.useFakeTimers();
this.player = TestHelpers.makePlayer({});
},
afterEach() {
this.player.dispose();
this.clock.restore();
}
});
QUnit.test('breakpoints are disabled by default', function(assert) {
assert.deepEqual(this.player.breakpoints(), getExpectedBreakpoints(), 'default breakpoints defined');
assert.notOk(this.player.responsive(), 'player is not responsive');
assert.strictEqual(this.player.currentBreakpoint(), '', 'no current breakpoint set');
assert.strictEqual(this.player.currentBreakpointClass(), '', 'no current breakpoint set');
});
QUnit.test('enabling responsive mode', function(assert) {
this.player.responsive(true);
assert.ok(this.player.responsive(), 'player is responsive');
// Player should be 300x150 by default.
assert.strictEqual(this.player.currentBreakpoint(), 'xsmall', 'current breakpoint set');
assert.strictEqual(this.player.currentBreakpointClass(), 'vjs-layout-x-small', 'current breakpoint set');
});
QUnit.test('setting custom breakpoints and enabling responsive mode', function(assert) {
this.player.breakpoints({tiny: 300});
this.player.responsive(true);
assert.deepEqual(this.player.breakpoints(), getExpectedBreakpoints({tiny: 300}), 'breakpoints defined');
// Player should be 300x150 by default.
assert.strictEqual(this.player.currentBreakpoint(), 'tiny', 'current breakpoint set');
assert.strictEqual(this.player.currentBreakpointClass(), 'vjs-layout-tiny', 'current breakpoint set');
});
QUnit.test('setting breakpoints/responsive via option', function(assert) {
const player = TestHelpers.makePlayer({breakpoints: {tiny: 300}, responsive: true});
assert.deepEqual(player.breakpoints(), getExpectedBreakpoints({tiny: 300}), 'breakpoints defined');
// Player should be 300x150 by default.
assert.strictEqual(player.currentBreakpoint(), 'tiny', 'current breakpoint set');
assert.strictEqual(player.currentBreakpointClass(), 'vjs-layout-tiny', 'current breakpoint set');
player.dispose();
});
QUnit.test('changing the player size triggers breakpoints', function(assert) {
let currentWidth;
this.player.responsive(true);
this.player.currentWidth = () => currentWidth;
currentWidth = 200;
this.player.trigger('playerresize');
assert.strictEqual(this.player.currentBreakpoint(), 'tiny', 'current breakpoint is correct');
assert.strictEqual(this.player.currentBreakpointClass(), 'vjs-layout-tiny', 'current breakpoint set');
currentWidth = 300;
this.player.trigger('playerresize');
assert.strictEqual(this.player.currentBreakpoint(), 'xsmall', 'current breakpoint is correct');
assert.strictEqual(this.player.currentBreakpointClass(), 'vjs-layout-x-small', 'current breakpoint set');
currentWidth = 400;
this.player.trigger('playerresize');
assert.strictEqual(this.player.currentBreakpoint(), 'small', 'current breakpoint is correct');
assert.strictEqual(this.player.currentBreakpointClass(), 'vjs-layout-small', 'current breakpoint set');
currentWidth = 600;
this.player.trigger('playerresize');
assert.strictEqual(this.player.currentBreakpoint(), 'medium', 'current breakpoint is correct');
assert.strictEqual(this.player.currentBreakpointClass(), 'vjs-layout-medium', 'current breakpoint set');
currentWidth = 900;
this.player.trigger('playerresize');
assert.strictEqual(this.player.currentBreakpoint(), 'large', 'current breakpoint is correct');
assert.strictEqual(this.player.currentBreakpointClass(), 'vjs-layout-large', 'current breakpoint set');
currentWidth = 1600;
this.player.trigger('playerresize');
assert.strictEqual(this.player.currentBreakpoint(), 'xlarge', 'current breakpoint is correct');
assert.strictEqual(this.player.currentBreakpointClass(), 'vjs-layout-x-large', 'current breakpoint set');
currentWidth = 3000;
this.player.trigger('playerresize');
assert.strictEqual(this.player.currentBreakpoint(), 'huge', 'current breakpoint is correct');
assert.strictEqual(this.player.currentBreakpointClass(), 'vjs-layout-huge', 'current breakpoint set');
});
|
