2015-05-04 01:12:38 +02:00
|
|
|
import document from 'global/document';
|
|
|
|
import * as Dom from '../../../src/js/utils/dom.js';
|
2015-05-17 00:59:46 +02:00
|
|
|
import TestHelpers from '../test-helpers.js';
|
2015-05-04 01:12:38 +02:00
|
|
|
|
2015-08-03 21:19:36 +02:00
|
|
|
q.module('dom');
|
|
|
|
|
2015-05-04 01:12:38 +02:00
|
|
|
test('should return the element with the ID', function(){
|
|
|
|
var el1 = document.createElement('div');
|
|
|
|
var el2 = document.createElement('div');
|
|
|
|
var fixture = document.getElementById('qunit-fixture');
|
|
|
|
|
|
|
|
fixture.appendChild(el1);
|
|
|
|
fixture.appendChild(el2);
|
|
|
|
|
|
|
|
el1.id = 'test_id1';
|
|
|
|
el2.id = 'test_id2';
|
|
|
|
|
2015-05-17 00:59:46 +02:00
|
|
|
ok(Dom.getEl('test_id1') === el1, 'found element for ID');
|
|
|
|
ok(Dom.getEl('#test_id2') === el2, 'found element for CSS ID');
|
2015-05-04 01:12:38 +02:00
|
|
|
});
|
|
|
|
|
|
|
|
test('should create an element', function(){
|
2015-09-15 19:57:55 +02:00
|
|
|
let div = Dom.createEl();
|
|
|
|
let span = Dom.createEl('span', {
|
|
|
|
innerHTML: 'fdsa'
|
|
|
|
}, {
|
|
|
|
'data-test': 'asdf'
|
|
|
|
});
|
|
|
|
|
2015-05-04 01:12:38 +02:00
|
|
|
ok(div.nodeName === 'DIV');
|
|
|
|
ok(span.nodeName === 'SPAN');
|
2015-09-15 19:57:55 +02:00
|
|
|
ok(span.getAttribute('data-test') === 'asdf');
|
2015-05-04 01:12:38 +02:00
|
|
|
ok(span.innerHTML === 'fdsa');
|
|
|
|
});
|
|
|
|
|
|
|
|
test('should insert an element first in another', function(){
|
|
|
|
var el1 = document.createElement('div');
|
|
|
|
var el2 = document.createElement('div');
|
|
|
|
var parent = document.createElement('div');
|
|
|
|
|
2015-05-17 00:59:46 +02:00
|
|
|
Dom.insertElFirst(el1, parent);
|
2015-05-04 01:12:38 +02:00
|
|
|
ok(parent.firstChild === el1, 'inserts first into empty parent');
|
|
|
|
|
2015-05-17 00:59:46 +02:00
|
|
|
Dom.insertElFirst(el2, parent);
|
2015-05-04 01:12:38 +02:00
|
|
|
ok(parent.firstChild === el2, 'inserts first into parent with child');
|
|
|
|
});
|
|
|
|
|
|
|
|
test('should get and remove data from an element', function(){
|
|
|
|
var el = document.createElement('div');
|
2015-05-17 00:59:46 +02:00
|
|
|
var data = Dom.getElData(el);
|
2015-05-04 01:12:38 +02:00
|
|
|
|
|
|
|
ok(typeof data === 'object', 'data object created');
|
|
|
|
|
|
|
|
// Add data
|
|
|
|
var testData = { asdf: 'fdsa' };
|
|
|
|
data.test = testData;
|
2015-05-17 00:59:46 +02:00
|
|
|
ok(Dom.getElData(el).test === testData, 'data added');
|
2015-05-04 01:12:38 +02:00
|
|
|
|
|
|
|
// Remove all data
|
2015-05-17 00:59:46 +02:00
|
|
|
Dom.removeElData(el);
|
2015-05-04 01:12:38 +02:00
|
|
|
|
2015-05-17 00:59:46 +02:00
|
|
|
ok(!Dom.hasElData(el), 'cached item emptied');
|
2015-05-04 01:12:38 +02:00
|
|
|
});
|
|
|
|
|
|
|
|
test('should add and remove a class name on an element', function(){
|
|
|
|
var el = document.createElement('div');
|
2015-05-17 00:59:46 +02:00
|
|
|
Dom.addElClass(el, 'test-class');
|
2015-05-04 01:12:38 +02:00
|
|
|
ok(el.className === 'test-class', 'class added');
|
2015-05-17 00:59:46 +02:00
|
|
|
Dom.addElClass(el, 'test-class');
|
2015-05-04 01:12:38 +02:00
|
|
|
ok(el.className === 'test-class', 'same class not duplicated');
|
2015-05-17 00:59:46 +02:00
|
|
|
Dom.addElClass(el, 'test-class2');
|
2015-05-04 01:12:38 +02:00
|
|
|
ok(el.className === 'test-class test-class2', 'added second class');
|
2015-05-17 00:59:46 +02:00
|
|
|
Dom.removeElClass(el, 'test-class');
|
2015-05-04 01:12:38 +02:00
|
|
|
ok(el.className === 'test-class2', 'removed first class');
|
|
|
|
});
|
|
|
|
|
|
|
|
test('should read class names on an element', function(){
|
|
|
|
var el = document.createElement('div');
|
2015-05-17 00:59:46 +02:00
|
|
|
Dom.addElClass(el, 'test-class1');
|
|
|
|
ok(Dom.hasElClass(el, 'test-class1') === true, 'class detected');
|
|
|
|
ok(Dom.hasElClass(el, 'test-class') === false, 'substring correctly not detected');
|
2015-05-04 01:12:38 +02:00
|
|
|
});
|
|
|
|
|
|
|
|
test('should set element attributes from object', function(){
|
|
|
|
var el, vid1Vals;
|
|
|
|
|
|
|
|
el = document.createElement('div');
|
|
|
|
el.id = 'el1';
|
|
|
|
|
2015-05-17 00:59:46 +02:00
|
|
|
Dom.setElAttributes(el, { controls: true, 'data-test': 'asdf' });
|
2015-05-04 01:12:38 +02:00
|
|
|
|
|
|
|
equal(el.getAttribute('id'), 'el1');
|
|
|
|
equal(el.getAttribute('controls'), '');
|
|
|
|
equal(el.getAttribute('data-test'), 'asdf');
|
|
|
|
});
|
|
|
|
|
|
|
|
test('should read tag attributes from elements, including HTML5 in all browsers', function(){
|
2015-08-25 02:46:54 +02:00
|
|
|
// Creating the source/track tags outside of the video tag prevents log errors
|
|
|
|
let tags = `
|
2015-09-01 02:17:26 +02:00
|
|
|
<video id="vid1" controls autoplay loop muted preload="none" src="http://google.com" poster="http://www2.videojs.com/img/video-js-html5-video-player.png" data-test="asdf" data-empty-string="">
|
|
|
|
<source id="source" src="http://google.com" type="video/mp4" media="fdsa" title="test" >
|
|
|
|
</video>
|
2015-08-25 02:46:54 +02:00
|
|
|
<track id="track" default src="http://google.com" kind="captions" srclang="en" label="testlabel" title="test" >
|
|
|
|
`;
|
2015-05-04 01:12:38 +02:00
|
|
|
|
2015-08-25 02:46:54 +02:00
|
|
|
let fixture = document.getElementById('qunit-fixture');
|
|
|
|
|
|
|
|
// Have to use innerHTML to append for IE8. AppendChild doesn't work.
|
|
|
|
// Also it must be added to the page body, not just in memory.
|
|
|
|
fixture.innerHTML += tags;
|
|
|
|
|
|
|
|
let vid1Vals = Dom.getElAttributes(fixture.getElementsByTagName('video')[0]);
|
|
|
|
let sourceVals = Dom.getElAttributes(fixture.getElementsByTagName('source')[0]);
|
|
|
|
let trackVals = Dom.getElAttributes(fixture.getElementsByTagName('track')[0]);
|
2015-05-04 01:12:38 +02:00
|
|
|
|
|
|
|
// vid1
|
2015-08-25 02:46:54 +02:00
|
|
|
// was using deepEqual, but ie8 would send all properties as attributes
|
2015-05-04 01:12:38 +02:00
|
|
|
equal(vid1Vals['autoplay'], true);
|
|
|
|
equal(vid1Vals['controls'], true);
|
|
|
|
equal(vid1Vals['data-test'], 'asdf');
|
|
|
|
equal(vid1Vals['data-empty-string'], '');
|
|
|
|
equal(vid1Vals['id'], 'vid1');
|
|
|
|
equal(vid1Vals['loop'], true);
|
|
|
|
equal(vid1Vals['muted'], true);
|
|
|
|
equal(vid1Vals['poster'], 'http://www2.videojs.com/img/video-js-html5-video-player.png');
|
|
|
|
equal(vid1Vals['preload'], 'none');
|
|
|
|
equal(vid1Vals['src'], 'http://google.com');
|
|
|
|
|
|
|
|
// sourceVals
|
|
|
|
equal(sourceVals['title'], 'test');
|
|
|
|
equal(sourceVals['media'], 'fdsa');
|
|
|
|
equal(sourceVals['type'], 'video/mp4');
|
|
|
|
equal(sourceVals['src'], 'http://google.com');
|
|
|
|
equal(sourceVals['id'], 'source');
|
|
|
|
|
|
|
|
// trackVals
|
|
|
|
equal(trackVals['default'], true);
|
|
|
|
equal(trackVals['id'], 'track');
|
|
|
|
equal(trackVals['kind'], 'captions');
|
|
|
|
equal(trackVals['label'], 'testlabel');
|
|
|
|
equal(trackVals['src'], 'http://google.com');
|
|
|
|
equal(trackVals['srclang'], 'en');
|
|
|
|
equal(trackVals['title'], 'test');
|
|
|
|
});
|
|
|
|
|
2015-05-17 00:59:46 +02:00
|
|
|
test('Dom.findElPosition should find top and left position', function() {
|
2015-05-04 01:12:38 +02:00
|
|
|
const d = document.createElement('div');
|
2015-05-17 00:59:46 +02:00
|
|
|
let position = Dom.findElPosition(d);
|
2015-05-04 01:12:38 +02:00
|
|
|
d.style.top = '10px';
|
|
|
|
d.style.left = '20px';
|
|
|
|
d.style.position = 'absolute';
|
|
|
|
|
|
|
|
deepEqual(position, {left: 0, top: 0}, 'If element isn\'t in the DOM, we should get zeros');
|
|
|
|
|
|
|
|
document.body.appendChild(d);
|
2015-05-17 00:59:46 +02:00
|
|
|
position = Dom.findElPosition(d);
|
2015-05-04 01:12:38 +02:00
|
|
|
deepEqual(position, {left: 20, top: 10}, 'The position was not correct');
|
|
|
|
|
|
|
|
d.getBoundingClientRect = null;
|
2015-05-17 00:59:46 +02:00
|
|
|
position = Dom.findElPosition(d);
|
2015-05-04 01:12:38 +02:00
|
|
|
deepEqual(position, {left: 0, top: 0}, 'If there is no gBCR, we should get zeros');
|
|
|
|
});
|