1
0
mirror of https://github.com/videojs/video.js.git synced 2024-12-04 10:34:51 +02:00
video.js/test/unit/player-breakpoints.test.js

108 lines
4.3 KiB
JavaScript
Raw Normal View History

/* 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');
});