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

662 lines
22 KiB
JavaScript
Raw Normal View History

/* eslint-env qunit */
Broke up Lib and Util into smaller libraries of functions Broke out bind, guid, and element data functions from Lib Separated out more dom functions in to dom.js Broke out URL functions into url.js Removed setLocalStorage since it wasn't being used Moved browser tests out of lib Moved log functions into their own file Removed trim() since it wasn't being used Moved formatTime into its own file Moved round into its own file and renamed roundFloat() Moved capitalize into its own file and renamed as toTitleCase() Moved createTimeRange into its own file Removed Lib.arr.forEach infavor of the native forEach Removed Lib.obj.create in favor of native Object.create (ES6-sham) Removed obj.each in favor of native Object.getOwnPropertyNames().forEach() Removed obj.merge and copy. Using lodash.assign instead. Replaced Lib.obj.isPlain with lodash.isPlainObject Removed Lib.obj.isArray in favor of the native Array.isArray Also removed the lib.js tests file as all tests have been moved or removed. Removed Lib.isEmpty in favor of !Object.getOwnPropertyNames().length Switched Util.mergeOptions and deepMerge to use new mergeOptions() Moved Lib.TEST_VID to Html5.TEST_VID Removed Lib references everywhere. Woo! Attempting to fix sourcemap test errors by setting grunt-browserify version Switched to object.assign from lodash.assign Removed unused 'inherits' dependency Reorganzied test files and added '.test' to file names Combined js/core.js and js/video.js Moved events.js into the utils directory
2015-05-04 01:12:38 +02:00
import videojs from '../../src/js/video.js';
import * as Dom from '../../src/js/utils/dom.js';
import log from '../../src/js/utils/log.js';
import document from 'global/document';
import window from 'global/window';
import sinon from 'sinon';
// import custom element for Shadow DOM test
import './utils/custom-element.test';
QUnit.module('video.js', {
beforeEach() {
this.clock = sinon.useFakeTimers();
},
afterEach() {
this.clock.restore();
videojs.getAllPlayers().forEach(p => p.dispose());
}
});
QUnit.test('should return a video player instance', function(assert) {
const fixture = document.getElementById('qunit-fixture');
fixture.innerHTML += '<video id="test_vid_id"></video>' +
'<video id="test_vid_id2"></video>';
const player = videojs('test_vid_id', { techOrder: ['techFaker'] });
assert.ok(player, 'created player from tag');
assert.ok(player.id() === 'test_vid_id');
assert.ok(
videojs.getPlayers().test_vid_id === player,
'added player to global reference'
);
const playerAgain = videojs('test_vid_id');
assert.ok(player === playerAgain, 'did not create a second player from same tag');
assert.equal(player, playerAgain, 'we did not make a new player');
const tag2 = document.getElementById('test_vid_id2');
const player2 = videojs(tag2, { techOrder: ['techFaker'] });
assert.ok(player2.id() === 'test_vid_id2', 'created player from element');
});
QUnit.test(
'should log if the supplied element is not included in the DOM',
function(assert) {
const origWarnLog = log.warn;
const fixture = document.getElementById('qunit-fixture');
const warnLogs = [];
log.warn = (args) => {
warnLogs.push(args);
};
const vid = document.createElement('video');
vid.id = 'test_vid_id';
fixture.appendChild(vid);
const player = videojs(vid);
assert.ok(player, 'created player from tag');
assert.equal(warnLogs.length, 0, 'no warn logs');
const vid2 = document.createElement('video');
vid2.id = 'test_vid_id2';
const player2 = videojs(vid2);
assert.ok(player2, 'created player from tag');
assert.equal(warnLogs.length, 1, 'logged a warning');
assert.equal(
warnLogs[0],
'The element supplied is not included in the DOM',
'logged the right message'
);
// should only log warnings on the first creation
videojs(vid2);
videojs('test_vid_id2');
assert.equal(warnLogs.length, 1, 'did not log another warning');
log.warn = origWarnLog;
}
);
const skipWithoutCustomElements = 'customElements' in window ? 'test' : 'skip';
QUnit[skipWithoutCustomElements](
'should not log if the supplied element is included in the Shadow DOM',
function(assert) {
const origWarnLog = log.warn;
const fixture = document.getElementById('qunit-fixture');
const warnLogs = [];
log.warn = (args) => {
warnLogs.push(args);
};
const customElem = document.createElement('test-custom-element');
fixture.appendChild(customElem);
const innerPlayer = customElem.innerPlayer;
assert.ok(innerPlayer, 'created player within Shadow DOM');
assert.equal(warnLogs.length, 0, 'no warn logs');
log.warn = origWarnLog;
}
);
QUnit.test(
'should log about already initialized players if options already passed',
function(assert) {
const origWarnLog = log.warn;
const fixture = document.getElementById('qunit-fixture');
const warnLogs = [];
log.warn = (args) => {
warnLogs.push(args);
};
fixture.innerHTML += '<video id="test_vid_id"></video>';
const player = videojs('test_vid_id', { techOrder: ['techFaker'] });
assert.ok(player, 'created player from tag');
assert.equal(player.id(), 'test_vid_id', 'player has the right ID');
assert.equal(warnLogs.length, 0, 'no warn logs');
const playerAgain = videojs('test_vid_id');
assert.equal(player, playerAgain, 'did not create a second player from same tag');
assert.equal(warnLogs.length, 0, 'no warn logs');
const playerAgainWithOptions = videojs('test_vid_id', { techOrder: ['techFaker'] });
assert.equal(
player,
playerAgainWithOptions,
'did not create a second player from same tag'
);
assert.equal(warnLogs.length, 1, 'logged a warning');
assert.equal(
warnLogs[0],
'Player "test_vid_id" is already initialised. Options will not be applied.',
'logged the right message'
);
log.warn = origWarnLog;
}
);
QUnit.test('should return a video player instance from el html5 tech', function(assert) {
const fixture = document.getElementById('qunit-fixture');
fixture.innerHTML += '<video id="test_vid_id"></video>' +
'<video id="test_vid_id2"></video>';
const vid = document.querySelector('#test_vid_id');
const player = videojs(vid);
assert.ok(player, 'created player from tag');
assert.ok(player.id() === 'test_vid_id');
assert.ok(
videojs.getPlayers().test_vid_id === player,
'added player to global reference'
);
const playerAgain = videojs(vid);
assert.ok(player === playerAgain, 'did not create a second player from same tag');
assert.equal(player, playerAgain, 'we did not make a new player');
const tag2 = document.getElementById('test_vid_id2');
const player2 = videojs(tag2, { techOrder: ['techFaker'] });
assert.ok(player2.id() === 'test_vid_id2', 'created player from element');
});
QUnit.test('should return a video player instance from el techfaker', function(assert) {
const fixture = document.getElementById('qunit-fixture');
fixture.innerHTML += '<video id="test_vid_id"></video>' +
'<video id="test_vid_id2"></video>';
const vid = document.querySelector('#test_vid_id');
const player = videojs(vid, {techOrder: ['techFaker']});
assert.ok(player, 'created player from tag');
assert.ok(player.id() === 'test_vid_id');
assert.ok(
videojs.getPlayers().test_vid_id === player,
'added player to global reference'
);
Broke up Lib and Util into smaller libraries of functions Broke out bind, guid, and element data functions from Lib Separated out more dom functions in to dom.js Broke out URL functions into url.js Removed setLocalStorage since it wasn't being used Moved browser tests out of lib Moved log functions into their own file Removed trim() since it wasn't being used Moved formatTime into its own file Moved round into its own file and renamed roundFloat() Moved capitalize into its own file and renamed as toTitleCase() Moved createTimeRange into its own file Removed Lib.arr.forEach infavor of the native forEach Removed Lib.obj.create in favor of native Object.create (ES6-sham) Removed obj.each in favor of native Object.getOwnPropertyNames().forEach() Removed obj.merge and copy. Using lodash.assign instead. Replaced Lib.obj.isPlain with lodash.isPlainObject Removed Lib.obj.isArray in favor of the native Array.isArray Also removed the lib.js tests file as all tests have been moved or removed. Removed Lib.isEmpty in favor of !Object.getOwnPropertyNames().length Switched Util.mergeOptions and deepMerge to use new mergeOptions() Moved Lib.TEST_VID to Html5.TEST_VID Removed Lib references everywhere. Woo! Attempting to fix sourcemap test errors by setting grunt-browserify version Switched to object.assign from lodash.assign Removed unused 'inherits' dependency Reorganzied test files and added '.test' to file names Combined js/core.js and js/video.js Moved events.js into the utils directory
2015-05-04 01:12:38 +02:00
const playerAgain = videojs(vid);
assert.ok(player === playerAgain, 'did not create a second player from same tag');
assert.equal(player, playerAgain, 'we did not make a new player');
const tag2 = document.getElementById('test_vid_id2');
const player2 = videojs(tag2, { techOrder: ['techFaker'] });
assert.ok(player2.id() === 'test_vid_id2', 'created player from element');
});
QUnit.test('should add the value to the languages object', function(assert) {
const code = 'es';
const data = {Hello: 'Hola'};
const result = videojs.addLanguage(code, data);
assert.ok(videojs.options.languages[code], 'should exist');
assert.equal(videojs.options.languages.es.Hello, 'Hola', 'should match');
assert.deepEqual(result.Hello, videojs.options.languages.es.Hello, 'should also match');
});
Broke up Lib and Util into smaller libraries of functions Broke out bind, guid, and element data functions from Lib Separated out more dom functions in to dom.js Broke out URL functions into url.js Removed setLocalStorage since it wasn't being used Moved browser tests out of lib Moved log functions into their own file Removed trim() since it wasn't being used Moved formatTime into its own file Moved round into its own file and renamed roundFloat() Moved capitalize into its own file and renamed as toTitleCase() Moved createTimeRange into its own file Removed Lib.arr.forEach infavor of the native forEach Removed Lib.obj.create in favor of native Object.create (ES6-sham) Removed obj.each in favor of native Object.getOwnPropertyNames().forEach() Removed obj.merge and copy. Using lodash.assign instead. Replaced Lib.obj.isPlain with lodash.isPlainObject Removed Lib.obj.isArray in favor of the native Array.isArray Also removed the lib.js tests file as all tests have been moved or removed. Removed Lib.isEmpty in favor of !Object.getOwnPropertyNames().length Switched Util.mergeOptions and deepMerge to use new mergeOptions() Moved Lib.TEST_VID to Html5.TEST_VID Removed Lib references everywhere. Woo! Attempting to fix sourcemap test errors by setting grunt-browserify version Switched to object.assign from lodash.assign Removed unused 'inherits' dependency Reorganzied test files and added '.test' to file names Combined js/core.js and js/video.js Moved events.js into the utils directory
2015-05-04 01:12:38 +02:00
QUnit.test('should add the value to the languages object with lower case lang code', function(assert) {
const code = 'DE';
const data = {Hello: 'Guten Tag'};
const result = videojs.addLanguage(code, data);
assert.ok(videojs.options.languages[code.toLowerCase()], 'should exist');
assert.equal(
videojs.options.languages[code.toLowerCase()].Hello,
'Guten Tag',
'should match'
);
assert.deepEqual(
result,
videojs.options.languages[code.toLowerCase()],
'should also match'
);
});
Broke up Lib and Util into smaller libraries of functions Broke out bind, guid, and element data functions from Lib Separated out more dom functions in to dom.js Broke out URL functions into url.js Removed setLocalStorage since it wasn't being used Moved browser tests out of lib Moved log functions into their own file Removed trim() since it wasn't being used Moved formatTime into its own file Moved round into its own file and renamed roundFloat() Moved capitalize into its own file and renamed as toTitleCase() Moved createTimeRange into its own file Removed Lib.arr.forEach infavor of the native forEach Removed Lib.obj.create in favor of native Object.create (ES6-sham) Removed obj.each in favor of native Object.getOwnPropertyNames().forEach() Removed obj.merge and copy. Using lodash.assign instead. Replaced Lib.obj.isPlain with lodash.isPlainObject Removed Lib.obj.isArray in favor of the native Array.isArray Also removed the lib.js tests file as all tests have been moved or removed. Removed Lib.isEmpty in favor of !Object.getOwnPropertyNames().length Switched Util.mergeOptions and deepMerge to use new mergeOptions() Moved Lib.TEST_VID to Html5.TEST_VID Removed Lib references everywhere. Woo! Attempting to fix sourcemap test errors by setting grunt-browserify version Switched to object.assign from lodash.assign Removed unused 'inherits' dependency Reorganzied test files and added '.test' to file names Combined js/core.js and js/video.js Moved events.js into the utils directory
2015-05-04 01:12:38 +02:00
QUnit.test('should expose plugin functions', function(assert) {
[
'registerPlugin',
'plugin',
'getPlugins',
'getPlugin',
'getPluginVersion'
].forEach(name => {
assert.strictEqual(typeof videojs[name], 'function', `videojs.${name} is a function`);
});
Broke up Lib and Util into smaller libraries of functions Broke out bind, guid, and element data functions from Lib Separated out more dom functions in to dom.js Broke out URL functions into url.js Removed setLocalStorage since it wasn't being used Moved browser tests out of lib Moved log functions into their own file Removed trim() since it wasn't being used Moved formatTime into its own file Moved round into its own file and renamed roundFloat() Moved capitalize into its own file and renamed as toTitleCase() Moved createTimeRange into its own file Removed Lib.arr.forEach infavor of the native forEach Removed Lib.obj.create in favor of native Object.create (ES6-sham) Removed obj.each in favor of native Object.getOwnPropertyNames().forEach() Removed obj.merge and copy. Using lodash.assign instead. Replaced Lib.obj.isPlain with lodash.isPlainObject Removed Lib.obj.isArray in favor of the native Array.isArray Also removed the lib.js tests file as all tests have been moved or removed. Removed Lib.isEmpty in favor of !Object.getOwnPropertyNames().length Switched Util.mergeOptions and deepMerge to use new mergeOptions() Moved Lib.TEST_VID to Html5.TEST_VID Removed Lib references everywhere. Woo! Attempting to fix sourcemap test errors by setting grunt-browserify version Switched to object.assign from lodash.assign Removed unused 'inherits' dependency Reorganzied test files and added '.test' to file names Combined js/core.js and js/video.js Moved events.js into the utils directory
2015-05-04 01:12:38 +02:00
});
QUnit.test('should expose options and players properties for backward-compatibility', function(assert) {
assert.ok(typeof videojs.options, 'object', 'options should be an object');
assert.ok(typeof videojs.players, 'object', 'players should be an object');
});
QUnit.test('should expose DOM functions', function(assert) {
const methods = [
'isEl',
'isTextNode',
'createEl',
'hasClass',
'addClass',
'removeClass',
'toggleClass',
'setAttributes',
'getAttributes',
'emptyEl',
'insertContent',
'appendContent'
];
methods.forEach(name => {
assert.strictEqual(typeof videojs[name], 'function', `function videojs.${name}`);
assert.strictEqual(typeof Dom[name], 'function', `Dom.${name} function exists`);
});
});
QUnit.test('ingest player div if data-vjs-player attribute is present on video parentNode', function(assert) {
const fixture = document.querySelector('#qunit-fixture');
fixture.innerHTML = `
<div data-vjs-player class="foo">
<video id="test_vid_id">
<source src="http://example.com/video.mp4" type="video/mp4"></source>
</video>
</div>
`;
const playerDiv = document.querySelector('.foo');
const vid = document.querySelector('#test_vid_id');
const player = videojs(vid, {
techOrder: ['html5']
});
assert.equal(player.el(), playerDiv, 'we re-used the given div');
assert.ok(player.hasClass('foo'), 'keeps any classes that were around previously');
});
QUnit.test('ingested player div should not create a new tag for movingMediaElementInDOM', function(assert) {
const Html5 = videojs.getTech('Html5');
const oldIS = Html5.isSupported;
const oldMoving = Html5.prototype.movingMediaElementInDOM;
const oldCPT = Html5.nativeSourceHandler.canPlayType;
const fixture = document.querySelector('#qunit-fixture');
fixture.innerHTML = `
<div data-vjs-player class="foo">
<video id="test_vid_id">
<source src="http://example.com/video.mp4" type="video/mp4"></source>
</video>
</div>
`;
Html5.prototype.movingMediaElementInDOM = false;
Html5.isSupported = () => true;
Html5.nativeSourceHandler.canPlayType = () => true;
const playerDiv = document.querySelector('.foo');
const vid = document.querySelector('#test_vid_id');
const player = videojs(vid, {
techOrder: ['html5']
});
this.clock.tick(1);
assert.equal(player.el(), playerDiv, 'we re-used the given div');
assert.equal(player.tech_.el(), vid, 'we re-used the video element');
assert.ok(player.hasClass('foo'), 'keeps any classes that were around previously');
Html5.prototype.movingMediaElementInDOM = oldMoving;
Html5.isSupported = oldIS;
Html5.nativeSourceHandler.canPlayType = oldCPT;
});
QUnit.test('should create a new tag for movingMediaElementInDOM', function(assert) {
const Html5 = videojs.getTech('Html5');
const oldMoving = Html5.prototype.movingMediaElementInDOM;
const oldCPT = Html5.nativeSourceHandler.canPlayType;
const fixture = document.querySelector('#qunit-fixture');
const oldIS = Html5.isSupported;
fixture.innerHTML = `
<div class="foo">
<video id="test_vid_id">
<source src="http://example.com/video.mp4" type="video/mp4"></source>
</video>
</div>
`;
Html5.prototype.movingMediaElementInDOM = false;
Html5.isSupported = () => true;
Html5.nativeSourceHandler.canPlayType = () => true;
const playerDiv = document.querySelector('.foo');
const vid = document.querySelector('#test_vid_id');
const player = videojs(vid, {
techOrder: ['html5']
});
this.clock.tick(1);
assert.notEqual(player.el(), playerDiv, 'we used a new div');
assert.notEqual(player.tech_.el(), vid, 'we a new video element');
Html5.prototype.movingMediaElementInDOM = oldMoving;
Html5.isSupported = oldIS;
Html5.nativeSourceHandler.canPlayType = oldCPT;
});
QUnit.test('getPlayer', function(assert) {
const fixture = document.getElementById('qunit-fixture');
fixture.innerHTML += '<video-js id="test_vid_id"></video-js>';
assert.notOk(videojs.getPlayer('test_vid_id'), 'no player was created yet');
const tag = document.querySelector('#test_vid_id');
const player = videojs(tag);
assert.strictEqual(videojs.getPlayer('#test_vid_id'), player, 'the player was returned when using a jQuery-style ID selector');
assert.strictEqual(videojs.getPlayer('test_vid_id'), player, 'the player was returned when using a raw ID value');
assert.strictEqual(videojs.getPlayer(tag), player, 'the player was returned when using the original tag/element');
player.dispose();
});
QUnit.test('videojs() works with the tech id', function(assert) {
const fixture = document.getElementById('qunit-fixture');
fixture.innerHTML += '<video-js id="player"></video-js>';
const tag = document.querySelector('#player');
const player = videojs('#player', {techOrder: ['html5']});
assert.strictEqual(videojs('player_html5_api'), player, 'the player was returned for the tech id');
assert.strictEqual(videojs(tag), player, 'the player was returned when using the original tag/element');
player.dispose();
});
QUnit.test('getPlayer works with the tech id', function(assert) {
const fixture = document.getElementById('qunit-fixture');
fixture.innerHTML += '<video-js id="player"></video-js>';
const tag = document.querySelector('#player');
const player = videojs('#player', {techOrder: ['html5']});
assert.strictEqual(videojs.getPlayer('player_html5_api'), player, 'the player was returned for the tech id');
assert.strictEqual(videojs.getPlayer(tag), player, 'the player was returned when using the original tag/element');
player.dispose();
});
QUnit.test('getAllPlayers', function(assert) {
const fixture = document.getElementById('qunit-fixture');
fixture.innerHTML += '<video id="test_vid_id"></video>' +
'<video id="test_vid_id2"></video>';
let all = videojs.getAllPlayers();
assert.ok(Array.isArray(all), 'an array was returned');
assert.strictEqual(all.length, 0, 'the array was empty because no players have been created yet');
const player = videojs('test_vid_id');
const player2 = videojs('test_vid_id2');
all = videojs.getAllPlayers();
assert.ok(Array.isArray(all), 'an array was returned');
assert.strictEqual(all.length, 2, 'the array had two items');
assert.notStrictEqual(all.indexOf(player), -1, 'the first player was in the array');
assert.notStrictEqual(all.indexOf(player2), -1, 'the second player was in the array');
});
/* **************************************************** *
* div embed tests copied from video emebed tests above *
* **************************************************** */
QUnit.module('video.js video-js embed', {
beforeEach() {
this.clock = sinon.useFakeTimers();
},
afterEach() {
this.clock.restore();
videojs.getAllPlayers().forEach(p => p.dispose());
}
});
QUnit.test('should return a video player instance', function(assert) {
const fixture = document.getElementById('qunit-fixture');
fixture.innerHTML += '<video-js id="test_vid_id"></video-js>' +
'<video-js id="test_vid_id2"></video-js>';
const player = videojs('test_vid_id', { techOrder: ['techFaker'] });
assert.ok(player, 'created player from tag');
assert.ok(player.id() === 'test_vid_id');
assert.ok(
videojs.getPlayers().test_vid_id === player,
'added player to global reference'
);
const playerAgain = videojs('test_vid_id');
assert.ok(player === playerAgain, 'did not create a second player from same tag');
assert.equal(player, playerAgain, 'we did not make a new player');
const tag2 = document.getElementById('test_vid_id2');
const player2 = videojs(tag2, { techOrder: ['techFaker'] });
assert.ok(player2.id() === 'test_vid_id2', 'created player from element');
});
QUnit.test('should add video-js class to video-js embed if missing', function(assert) {
const fixture = document.getElementById('qunit-fixture');
fixture.innerHTML += '<video-js id="test_vid_id"></video-js>' +
'<video-js id="test_vid_id2" class="foo"></video-js>';
const player = videojs('test_vid_id', { techOrder: ['techFaker'] });
assert.ok(player, 'created player from tag');
assert.ok(player.id() === 'test_vid_id');
assert.ok(player.hasClass('video-js'), 'we have the video-js class');
const tag2 = document.getElementById('test_vid_id2');
const player2 = videojs(tag2, { techOrder: ['techFaker'] });
assert.ok(player2.id() === 'test_vid_id2', 'created player from element');
assert.ok(player2.hasClass('video-js'), 'we have the video-js class');
assert.ok(player2.hasClass('foo'), 'we have the foo class');
});
QUnit.test(
'should log about already initialized players if options already passed',
function(assert) {
const origWarnLog = log.warn;
const fixture = document.getElementById('qunit-fixture');
const warnLogs = [];
log.warn = (args) => {
warnLogs.push(args);
};
fixture.innerHTML += '<video-js id="test_vid_id"></video-js>';
const player = videojs('test_vid_id', { techOrder: ['techFaker'] });
assert.ok(player, 'created player from tag');
assert.equal(player.id(), 'test_vid_id', 'player has the right ID');
assert.equal(warnLogs.length, 0, 'no warn logs');
const playerAgain = videojs('test_vid_id');
assert.equal(player, playerAgain, 'did not create a second player from same tag');
assert.equal(warnLogs.length, 0, 'no warn logs');
const playerAgainWithOptions = videojs('test_vid_id', { techOrder: ['techFaker'] });
assert.equal(
player,
playerAgainWithOptions,
'did not create a second player from same tag'
);
assert.equal(warnLogs.length, 1, 'logged a warning');
assert.equal(
warnLogs[0],
'Player "test_vid_id" is already initialised. Options will not be applied.',
'logged the right message'
);
log.warn = origWarnLog;
}
);
QUnit.test('should return a video player instance from el html5 tech', function(assert) {
const fixture = document.getElementById('qunit-fixture');
fixture.innerHTML += '<video-js id="test_vid_id"></video-js>' +
'<video-js id="test_vid_id2"></video-js>';
const vid = document.querySelector('#test_vid_id');
const player = videojs(vid);
assert.ok(player, 'created player from tag');
assert.ok(player.id() === 'test_vid_id');
assert.ok(
videojs.getPlayers().test_vid_id === player,
'added player to global reference'
);
const playerAgain = videojs(vid);
assert.ok(player === playerAgain, 'did not create a second player from same tag');
assert.equal(player, playerAgain, 'we did not make a new player');
const tag2 = document.getElementById('test_vid_id2');
const player2 = videojs(tag2, { techOrder: ['techFaker'] });
assert.ok(player2.id() === 'test_vid_id2', 'created player from element');
});
QUnit.test('should return a video player instance from el techfaker', function(assert) {
const fixture = document.getElementById('qunit-fixture');
fixture.innerHTML += '<video-js id="test_vid_id"></video-js>' +
'<video-js id="test_vid_id2"></video-js>';
const vid = document.querySelector('#test_vid_id');
const player = videojs(vid, {techOrder: ['techFaker']});
assert.ok(player, 'created player from tag');
assert.ok(player.id() === 'test_vid_id');
assert.ok(
videojs.getPlayers().test_vid_id === player,
'added player to global reference'
);
const playerAgain = videojs(vid);
assert.ok(player === playerAgain, 'did not create a second player from same tag');
assert.equal(player, playerAgain, 'we did not make a new player');
const tag2 = document.getElementById('test_vid_id2');
const player2 = videojs(tag2, { techOrder: ['techFaker'] });
assert.ok(player2.id() === 'test_vid_id2', 'created player from element');
});
QUnit.test('adds video-js class name with the video-js embed', function(assert) {
const fixture = document.getElementById('qunit-fixture');
fixture.innerHTML += '<video-js id="test_vid_id"></video-js>' +
'<video-js class="video-js" id="test_vid_id2"></video-js>';
const vid = document.querySelector('#test_vid_id');
const player = videojs(vid, {techOrder: ['techFaker']});
const tag2 = document.getElementById('test_vid_id2');
const player2 = videojs(tag2, { techOrder: ['techFaker'] });
assert.ok(player.hasClass('video-js'), 'video-js class was added to the first embed');
assert.ok(player2.hasClass('video-js'), 'video-js class was preserved to the second embed');
});
let testOrSkip = 'test';
// The following test uses some DocumentFragment properties that are not
// available in IE or older Safaris, so we skip it.
if (videojs.browser.IE_VERSION || videojs.browser.IS_ANY_SAFARI) {
testOrSkip = 'skip';
}
QUnit[testOrSkip]('stores placeholder el and restores on dispose', function(assert) {
const fixture = document.getElementById('qunit-fixture');
const embeds = [
{
type: 'video el',
src: '<video id="test1"><source src="http://example.com/video.mp4" type="video/mp4"></source></video>',
initSelector: 'test1',
testSelector: '#test1'
},
{
type: 'video-js el',
src: '<video-js id="test2"><source src="http://example.com/video.mp4" type="video/mp4"></source></video-js>',
initSelector: 'test2',
testSelector: '#test2'
},
{
type: 'div ingest',
src: '<div data-vjs-player><video id="test3"><source src="http://example.com/video.mp4" type="video/mp4"></source></video></div>',
initSelector: 'test3',
testSelector: 'div[data-vjs-player]'
}
];
embeds.forEach(embed => {
const comparisonEl = document.createRange().createContextualFragment(embed.src).children[0];
fixture.innerHTML += embed.src;
const player = videojs(embed.initSelector, {restoreEl: true});
assert.ok(comparisonEl.isEqualNode(player.options_.restoreEl), `${embed.type}: restoreEl option replaced by an element`);
assert.notOk(document.querySelector(embed.testSelector).isSameNode(player.options_.restoreEl), `${embed.type}: restoreEl is not the original element`);
assert.notOk(comparisonEl.isSameNode(player.options_.restoreEl), `${embed.type}: restoreEl is not the control element`);
player.dispose();
const expectedEl = document.querySelector(embed.testSelector);
assert.ok(comparisonEl.isEqualNode(expectedEl), `${embed.type}: element was restored`);
});
});