import document from 'global/document';
import * as Dom from '../../../src/js/utils/dom.js';
import TestHelpers from '../test-helpers.js';
q.module('dom');
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';
ok(Dom.getEl('test_id1') === el1, 'found element for ID');
ok(Dom.getEl('#test_id2') === el2, 'found element for CSS ID');
});
test('should create an element', function(){
let div = Dom.createEl();
let span = Dom.createEl('span', {
innerHTML: 'fdsa'
}, {
'data-test': 'asdf'
});
ok(div.nodeName === 'DIV');
ok(span.nodeName === 'SPAN');
ok(span.getAttribute('data-test') === 'asdf');
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');
Dom.insertElFirst(el1, parent);
ok(parent.firstChild === el1, 'inserts first into empty parent');
Dom.insertElFirst(el2, parent);
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');
var data = Dom.getElData(el);
ok(typeof data === 'object', 'data object created');
// Add data
var testData = { asdf: 'fdsa' };
data.test = testData;
ok(Dom.getElData(el).test === testData, 'data added');
// Remove all data
Dom.removeElData(el);
ok(!Dom.hasElData(el), 'cached item emptied');
});
test('addElClass()', function(){
var el = document.createElement('div');
expect(5);
Dom.addElClass(el, 'test-class');
strictEqual(el.className, 'test-class', 'adds a single class');
Dom.addElClass(el, 'test-class');
strictEqual(el.className, 'test-class', 'does not duplicate classes');
throws(function(){
Dom.addElClass(el, 'foo foo-bar');
}, 'throws when attempting to add a class with whitespace');
Dom.addElClass(el, 'test2_className');
strictEqual(el.className, 'test-class test2_className', 'adds second class');
Dom.addElClass(el, 'FOO');
strictEqual(el.className, 'test-class test2_className FOO', 'adds third class');
});
test('removeElClass()', function() {
var el = document.createElement('div');
el.className = 'test-class foo foo test2_className FOO bar';
expect(5);
Dom.removeElClass(el, 'test-class');
strictEqual(el.className, 'foo foo test2_className FOO bar', 'removes one class');
Dom.removeElClass(el, 'foo');
strictEqual(el.className, 'test2_className FOO bar', 'removes all instances of a class');
throws(function(){
Dom.removeElClass(el, 'test2_className bar');
}, 'throws when attempting to remove a class with whitespace');
Dom.removeElClass(el, 'test2_className');
strictEqual(el.className, 'FOO bar', 'removes another class');
Dom.removeElClass(el, 'FOO');
strictEqual(el.className, 'bar', 'removes another class');
});
test('hasElClass()', function(){
var el = document.createElement('div');
el.className = 'test-class foo foo test2_className FOO bar';
strictEqual(Dom.hasElClass(el, 'test-class'), true, 'class detected');
strictEqual(Dom.hasElClass(el, 'foo'), true, 'class detected');
strictEqual(Dom.hasElClass(el, 'test2_className'), true, 'class detected');
strictEqual(Dom.hasElClass(el, 'FOO'), true, 'class detected');
strictEqual(Dom.hasElClass(el, 'bar'), true, 'class detected');
strictEqual(Dom.hasElClass(el, 'test2'), false, 'valid substring - but not a class - correctly not detected');
strictEqual(Dom.hasElClass(el, 'className'), false, 'valid substring - but not a class - correctly not detected');
throws(function(){
Dom.hasElClass(el, 'FOO bar');
}, 'throws when attempting to detect a class with whitespace');
});
test('toggleElClass()', function() {
let el = Dom.createEl('div', {className: 'foo bar'});
let predicateToggles = [
{
toggle: 'foo',
predicate: true,
className: 'foo bar',
message: 'if predicate `true` matches state of the element, do nothing'
},
{
toggle: 'baz',
predicate: false,
className: 'foo bar',
message: 'if predicate `false` matches state of the element, do nothing'
},
{
toggle: 'baz',
predicate: true,
className: 'foo bar baz',
message: 'if predicate `true` differs from state of the element, add the class'
},
{
toggle: 'foo',
predicate: false,
className: 'bar baz',
message: 'if predicate `false` differs from state of the element, remove the class'
},
{
toggle: 'bar',
predicate: () => true,
className: 'bar baz',
message: 'if a predicate function returns `true`, matching the state of the element, do nothing'
},
{
toggle: 'foo',
predicate: () => false,
className: 'bar baz',
message: 'if a predicate function returns `false`, matching the state of the element, do nothing'
},
{
toggle: 'foo',
predicate: () => true,
className: 'bar baz foo',
message: 'if a predicate function returns `true`, differing from state of the element, add the class'
},
{
toggle: 'foo',
predicate: () => false,
className: 'bar baz',
message: 'if a predicate function returns `false`, differing from state of the element, remove the class'
},
{
toggle: 'foo',
predicate: Function.prototype,
className: 'bar baz foo',
message: 'if a predicate function returns `undefined` and the element does not have the class, add the class'
},
{
toggle: 'bar',
predicate: Function.prototype,
className: 'baz foo',
message: 'if a predicate function returns `undefined` and the element has the class, remove the class'
},
{
toggle: 'bar',
predicate: () => [],
className: 'baz foo bar',
message: 'if a predicate function returns a defined non-boolean value and the element does not have the class, add the class'
},
{
toggle: 'baz',
predicate: () => 'this is incorrect',
className: 'foo bar',
message: 'if a predicate function returns a defined non-boolean value and the element has the class, remove the class'
},
];
expect(3 + predicateToggles.length);
Dom.toggleElClass(el, 'bar');
strictEqual(el.className, 'foo', 'toggles a class off, if present');
Dom.toggleElClass(el, 'bar');
strictEqual(el.className, 'foo bar', 'toggles a class on, if absent');
throws(function(){
Dom.toggleElClass(el, 'foo bar');
}, 'throws when attempting to toggle a class with whitespace');
predicateToggles.forEach(x => {
Dom.toggleElClass(el, x.toggle, x.predicate);
strictEqual(el.className, x.className, x.message);
});
});
test('should set element attributes from object', function(){
var el, vid1Vals;
el = document.createElement('div');
el.id = 'el1';
Dom.setElAttributes(el, { controls: true, 'data-test': 'asdf' });
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(){
// Creating the source/track tags outside of the video tag prevents log errors
let tags = `