ce2dcccf86
- Modified the original tests so TinyMCE can be loaded from /src/wp-includes/js/tinymce. - Added "WP" option to the UI to select only tests relevant to our integration (excludes most of the default plugins tests). - Added tests for obsolete HTML elements and attributes (html4 back-compat). See #27014. git-svn-id: https://develop.svn.wordpress.org/trunk@27155 602fd350-edb4-49c9-b593-d223f7449a82
467 lines
14 KiB
HTML
467 lines
14 KiB
HTML
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<title>tinymce.html.Node tests</title>
|
|
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
|
|
<link rel="stylesheet" href="http://code.jquery.com/qunit/qunit-git.css" type="text/css" />
|
|
<script src="http://code.jquery.com/qunit/qunit-git.js"></script>
|
|
<script src="../../js/qunit/reporter.js"></script>
|
|
<script src="../../js/utils.js"></script>
|
|
<script src="../../js/tinymce_loader.js"></script>
|
|
<script>
|
|
module("tinymce.html.Node");
|
|
|
|
QUnit.config.reorder = false;
|
|
|
|
test('construction', function() {
|
|
var node;
|
|
|
|
expect(15);
|
|
|
|
node = new tinymce.html.Node('#text', 3);
|
|
equal(node.name, '#text');
|
|
equal(node.type, 3);
|
|
|
|
node = new tinymce.html.Node('#comment', 8);
|
|
equal(node.name, '#comment');
|
|
equal(node.type, 8);
|
|
|
|
node = new tinymce.html.Node('b', 1);
|
|
equal(node.name, 'b');
|
|
equal(node.type, 1);
|
|
deepEqual(node.attributes, []);
|
|
|
|
node = new tinymce.html.Node('#pi', 7);
|
|
equal(node.name, '#pi');
|
|
equal(node.type, 7);
|
|
|
|
node = new tinymce.html.Node('#doctype', 10);
|
|
equal(node.name, '#doctype');
|
|
equal(node.type, 10);
|
|
|
|
node = new tinymce.html.Node('#cdata', 4);
|
|
equal(node.name, '#cdata');
|
|
equal(node.type, 4);
|
|
|
|
node = new tinymce.html.Node('#frag', 11);
|
|
equal(node.name, '#frag');
|
|
equal(node.type, 11);
|
|
});
|
|
|
|
test('append inside empty node', function() {
|
|
var root, node, node2;
|
|
|
|
expect(10);
|
|
|
|
root = new tinymce.html.Node('#frag', 11);
|
|
node = root.append(new tinymce.html.Node('b', 1));
|
|
ok(root.firstChild.parent === root);
|
|
equal(root.firstChild.next, undefined);
|
|
equal(root.firstChild.prev, undefined);
|
|
equal(root.firstChild.firstChild, undefined);
|
|
equal(root.firstChild.lastChild, undefined);
|
|
ok(node.parent === root);
|
|
equal(node.next, undefined);
|
|
equal(node.prev, undefined);
|
|
equal(node.firstChild, undefined);
|
|
equal(node.lastChild, undefined);
|
|
});
|
|
|
|
test('append node after node', function() {
|
|
var root, node, node2;
|
|
|
|
expect(17);
|
|
|
|
root = new tinymce.html.Node('#frag', 11);
|
|
node2 = root.append(new tinymce.html.Node('a', 1));
|
|
node = root.append(new tinymce.html.Node('b', 1));
|
|
ok(root.firstChild.parent === root, 'root.firstChild.parent === root');
|
|
ok(root.firstChild === node2, 'root.firstChild');
|
|
ok(root.lastChild === node, 'root.firstChild');
|
|
ok(root.firstChild.next === node, 'root.firstChild.next');
|
|
equal(root.firstChild.prev, undefined, 'root.firstChild.prev');
|
|
equal(root.firstChild.firstChild, undefined, 'root.firstChild.firstChild');
|
|
equal(root.firstChild.lastChild, undefined, 'root.firstChild.lastChild');
|
|
ok(node2.parent === root, 'node2.parent === root');
|
|
ok(node2.next === node, 'node2.next');
|
|
equal(node2.prev, undefined, 'node2.prev');
|
|
equal(node2.firstChild, undefined, 'node2.firstChild');
|
|
equal(node2.lastChild, undefined, 'node2.lastChild');
|
|
ok(node.parent === root, 'node.parent === root');
|
|
equal(node.next, undefined, 'node.next');
|
|
ok(node.prev === node2, 'node.prev');
|
|
equal(node.firstChild, undefined, 'node.firstChild');
|
|
equal(node.lastChild, undefined, 'node.lastChild');
|
|
});
|
|
|
|
test('append existing node before other existing node', function() {
|
|
var root, node, node2;
|
|
|
|
expect(8);
|
|
|
|
root = new tinymce.html.Node('#frag', 11);
|
|
node = root.append(new tinymce.html.Node('a', 1));
|
|
node2 = root.append(new tinymce.html.Node('b', 1));
|
|
root.append(node);
|
|
ok(root.firstChild === node2, 'root.firstChild');
|
|
ok(root.lastChild === node, 'root.lastChild');
|
|
equal(node.next, undefined, 'node.next');
|
|
ok(node.prev === node2, 'node.prev');
|
|
ok(node.parent === root, 'node.parent');
|
|
ok(node2.parent === root, 'node2.parent');
|
|
equal(node2.prev, undefined, 'node2.prev');
|
|
ok(node2.next === node, 'node2.next');
|
|
});
|
|
|
|
test('remove unattached node', function() {
|
|
expect(1);
|
|
|
|
ok(!new tinymce.html.Node('#text', 3).remove().parent);
|
|
});
|
|
|
|
test('remove single child', function() {
|
|
var root, node, node2, node3;
|
|
|
|
expect(6);
|
|
|
|
root = new tinymce.html.Node('#frag', 11);
|
|
node = root.append(new tinymce.html.Node('p', 1));
|
|
node = root.firstChild.remove();
|
|
equal(root.firstChild, undefined);
|
|
equal(root.lastChild, undefined);
|
|
equal(node.parent, undefined);
|
|
equal(node.next, undefined);
|
|
equal(node.prev, undefined);
|
|
equal(node.name, 'p');
|
|
});
|
|
|
|
test('remove middle node', function() {
|
|
var root, node, node2, node3;
|
|
|
|
expect(9);
|
|
|
|
root = new tinymce.html.Node('#frag', 11);
|
|
node = root.append(new tinymce.html.Node('a', 1));
|
|
node2 = root.append(new tinymce.html.Node('b', 1));
|
|
node3 = root.append(new tinymce.html.Node('c', 1));
|
|
node2.remove();
|
|
equal(node2.parent, undefined);
|
|
equal(node2.next, undefined);
|
|
equal(node2.prev, undefined);
|
|
ok(root.firstChild === node, 'root.firstChild');
|
|
ok(root.lastChild === node3, 'root.lastChild');
|
|
ok(node.next === node3, 'node.next');
|
|
equal(node.prev, undefined, 'node.prev');
|
|
ok(node3.prev, node, 'node3.prev');
|
|
equal(node3.next, undefined, 'node3.next');
|
|
});
|
|
|
|
test('insert after last', function() {
|
|
var fragment, root, node, node2;
|
|
|
|
expect(5);
|
|
|
|
fragment = new tinymce.html.Node('#frag', 11);
|
|
root = fragment.append(new tinymce.html.Node('body', 1));
|
|
node = root.append(new tinymce.html.Node('a', 1));
|
|
node2 = root.insert(new tinymce.html.Node('x', 1), node);
|
|
ok(root.firstChild === node, 'root.firstChild');
|
|
ok(root.lastChild === node2, 'root.lastChild');
|
|
ok(node.next === node2, 'node.next');
|
|
ok(node2.prev === node, 'node2.prev');
|
|
ok(node2.parent === root, 'node3.next');
|
|
});
|
|
|
|
test('insert before first', function() {
|
|
var fragment, root, node, node2;
|
|
|
|
expect(8);
|
|
|
|
fragment = new tinymce.html.Node('#frag', 11);
|
|
root = fragment.append(new tinymce.html.Node('body', 1));
|
|
node = root.append(new tinymce.html.Node('a', 1));
|
|
node2 = root.insert(new tinymce.html.Node('x', 1), node, true);
|
|
ok(root.firstChild === node2, 'root.firstChild');
|
|
ok(root.lastChild === node, 'root.lastChild');
|
|
ok(node2.parent === root, 'node2.lastChild');
|
|
ok(node2.next === node, 'node2.next');
|
|
ok(node2.prev === undefined, 'node2.prev');
|
|
ok(node.parent === root, 'node.lastChild');
|
|
ok(node.next === undefined, 'node.next');
|
|
ok(node.prev === node2, 'node.prev');
|
|
});
|
|
|
|
test('insert before second', function() {
|
|
var fragment, root, node, node2;
|
|
|
|
expect(5);
|
|
|
|
fragment = new tinymce.html.Node('#frag', 11);
|
|
root = fragment.append(new tinymce.html.Node('body', 1));
|
|
node = root.append(new tinymce.html.Node('a', 1));
|
|
node2 = root.append(new tinymce.html.Node('b', 1));
|
|
node3 = root.insert(new tinymce.html.Node('x', 1), node2, true);
|
|
ok(root.firstChild === node, 'root.firstChild');
|
|
ok(root.lastChild === node2, 'root.lastChild');
|
|
ok(node3.parent === root, 'node3.parent');
|
|
ok(node3.next === node2, 'node3.next');
|
|
ok(node3.prev === node, 'node3.prev');
|
|
});
|
|
|
|
test('insert after and between two nodes', function() {
|
|
var root, node, node2, node3;
|
|
|
|
expect(7);
|
|
|
|
fragment = new tinymce.html.Node('#frag', 11);
|
|
root = fragment.append(new tinymce.html.Node('body', 1));
|
|
node = root.append(new tinymce.html.Node('a', 1));
|
|
node2 = root.append(new tinymce.html.Node('b', 1));
|
|
node3 = root.insert(new tinymce.html.Node('x', 1), node);
|
|
ok(root.firstChild === node, 'root.firstChild');
|
|
ok(root.lastChild === node2, 'root.lastChild');
|
|
ok(node.next === node3, 'node.next');
|
|
ok(node2.prev === node3, 'node2.prev');
|
|
ok(node3.parent === root, 'node3.next');
|
|
ok(node3.next === node2, 'node3.next');
|
|
ok(node3.prev === node, 'node3.prev');
|
|
});
|
|
|
|
test('replace single child', function() {
|
|
var root, node1, node2;
|
|
|
|
expect(5);
|
|
|
|
root = new tinymce.html.Node('#frag', 11);
|
|
node1 = root.append(new tinymce.html.Node('b', 1));
|
|
node2 = root.append(new tinymce.html.Node('em', 1));
|
|
node1.replace(node2);
|
|
ok(root.firstChild === node2, 'root.firstChild');
|
|
ok(root.lastChild === node2, 'root.lastChild');
|
|
ok(node2.parent === root, 'node2.parent');
|
|
ok(!node2.next, 'node2.next');
|
|
ok(!node2.prev, 'node2.prev');
|
|
});
|
|
|
|
test('replace first child', function() {
|
|
var root, node1, node2, node3;
|
|
|
|
expect(5);
|
|
|
|
root = new tinymce.html.Node('#frag', 11);
|
|
node1 = root.append(new tinymce.html.Node('b', 1));
|
|
node2 = root.append(new tinymce.html.Node('em', 1));
|
|
node3 = root.append(new tinymce.html.Node('b', 1));
|
|
node1.replace(node2);
|
|
ok(root.firstChild === node2, 'root.firstChild');
|
|
ok(root.lastChild === node3, 'root.lastChild');
|
|
ok(node2.parent === root, 'node2.parent');
|
|
ok(node2.next === node3, 'node2.next');
|
|
ok(!node2.prev, 'node2.prev');
|
|
});
|
|
|
|
test('replace last child', function() {
|
|
var root, node1, node2, node3;
|
|
|
|
expect(5);
|
|
|
|
root = new tinymce.html.Node('#frag', 11);
|
|
node1 = root.append(new tinymce.html.Node('b', 1));
|
|
node3 = root.append(new tinymce.html.Node('b', 1));
|
|
node2 = root.append(new tinymce.html.Node('em', 1));
|
|
node3.replace(node2);
|
|
ok(root.firstChild === node1, 'root.firstChild');
|
|
ok(root.lastChild === node2, 'root.lastChild');
|
|
ok(node2.parent === root, 'node2.parent');
|
|
ok(!node2.next, 'node2.next');
|
|
ok(node2.prev === node1, 'node2.prev');
|
|
});
|
|
|
|
test('replace middle child', function() {
|
|
var root, node1, node2, node3, node4;
|
|
|
|
expect(5);
|
|
|
|
root = new tinymce.html.Node('#frag', 11);
|
|
node1 = root.append(new tinymce.html.Node('b', 1));
|
|
node2 = root.append(new tinymce.html.Node('b', 1));
|
|
node3 = root.append(new tinymce.html.Node('b', 1));
|
|
node4 = root.append(new tinymce.html.Node('em', 1));
|
|
node2.replace(node4);
|
|
ok(root.firstChild === node1, 'root.firstChild');
|
|
ok(root.lastChild === node3, 'root.lastChild');
|
|
ok(node4.parent === root, 'node4.parent');
|
|
ok(node4.next === node3, 'node4.next');
|
|
ok(node4.prev === node1, 'node4.prev');
|
|
});
|
|
|
|
test('attr', 22, function() {
|
|
var node;
|
|
|
|
node = new tinymce.html.Node('b', 1);
|
|
deepEqual(node.attributes, []);
|
|
node.attr('attr1', 'value1');
|
|
equal(node.attr('attr1'), 'value1');
|
|
equal(node.attr('attr2'), undefined);
|
|
deepEqual(node.attributes, [{name: 'attr1', value: 'value1'}]);
|
|
deepEqual(node.attributes.map, {'attr1': 'value1'});
|
|
|
|
node = new tinymce.html.Node('b', 1);
|
|
deepEqual(node.attributes, []);
|
|
node.attr('attr1', 'value1');
|
|
node.attr('attr1', 'valueX');
|
|
equal(node.attr('attr1'), 'valueX');
|
|
deepEqual(node.attributes, [{name: 'attr1', value: 'valueX'}]);
|
|
deepEqual(node.attributes.map, {'attr1': 'valueX'});
|
|
|
|
node = new tinymce.html.Node('b', 1);
|
|
deepEqual(node.attributes, []);
|
|
node.attr('attr1', 'value1');
|
|
node.attr('attr2', 'value2');
|
|
equal(node.attr('attr1'), 'value1');
|
|
equal(node.attr('attr2'), 'value2');
|
|
deepEqual(node.attributes, [{name: 'attr1', value: 'value1'}, {name: 'attr2', value: 'value2'}]);
|
|
deepEqual(node.attributes.map, {'attr1': 'value1', 'attr2': 'value2'});
|
|
|
|
node = new tinymce.html.Node('b', 1);
|
|
deepEqual(node.attributes, []);
|
|
node.attr('attr1', 'value1');
|
|
node.attr('attr1', null);
|
|
equal(node.attr('attr1'), undefined);
|
|
deepEqual(node.attributes, []);
|
|
deepEqual(node.attributes.map, {});
|
|
|
|
node = new tinymce.html.Node('b', 1);
|
|
node.attr({a:'1', b:'2'});
|
|
deepEqual(node.attributes, [{name: 'a', value: '1'}, {name: 'b', value: '2'}]);
|
|
deepEqual(node.attributes.map, {a:'1', b:'2'});
|
|
|
|
node = new tinymce.html.Node('b', 1);
|
|
node.attr(null);
|
|
deepEqual(node.attributes, []);
|
|
deepEqual(node.attributes.map, {});
|
|
});
|
|
|
|
test('clone', function() {
|
|
var root, node, clone;
|
|
|
|
expect(16);
|
|
|
|
node = new tinymce.html.Node('#text', 3);
|
|
node.value = 'value';
|
|
clone = node.clone();
|
|
equal(clone.name, '#text');
|
|
equal(clone.type, 3);
|
|
equal(clone.value, 'value');
|
|
equal(clone.parent, undefined);
|
|
equal(clone.next, undefined);
|
|
equal(clone.prev, undefined);
|
|
|
|
root = new tinymce.html.Node('#frag', 11);
|
|
node = new tinymce.html.Node('#text', 3);
|
|
node.value = 'value';
|
|
root.append(node);
|
|
equal(clone.name, '#text');
|
|
equal(clone.type, 3);
|
|
equal(clone.value, 'value');
|
|
equal(clone.parent, undefined);
|
|
equal(clone.next, undefined);
|
|
equal(clone.prev, undefined);
|
|
|
|
node = new tinymce.html.Node('b', 1);
|
|
node.attr('id', 'id');
|
|
node.attr('class', 'class');
|
|
node.attr('title', 'title');
|
|
clone = node.clone();
|
|
equal(clone.name, 'b');
|
|
equal(clone.type, 1);
|
|
deepEqual(clone.attributes, [{name: 'class', value: 'class'}, {name: 'title', value: 'title'}]);
|
|
deepEqual(clone.attributes.map, {'class': 'class', 'title': 'title'});
|
|
});
|
|
|
|
test('unwrap', function() {
|
|
var root, node1, node2, node3;
|
|
|
|
expect(7);
|
|
|
|
root = new tinymce.html.Node('#frag', 11);
|
|
node1 = root.append(new tinymce.html.Node('b', 1));
|
|
node2 = node1.append(new tinymce.html.Node('em', 1));
|
|
node1.unwrap();
|
|
ok(root.firstChild === node2, 'root.firstChild');
|
|
ok(root.lastChild === node2, 'root.lastChild');
|
|
ok(node2.parent === root, 'node2.parent');
|
|
|
|
root = new tinymce.html.Node('#frag', 11);
|
|
node1 = root.append(new tinymce.html.Node('b', 1));
|
|
node2 = node1.append(new tinymce.html.Node('em', 1));
|
|
node3 = node1.append(new tinymce.html.Node('span', 1));
|
|
node1.unwrap();
|
|
ok(root.firstChild === node2, 'root.firstChild');
|
|
ok(root.lastChild === node3, 'root.lastChild');
|
|
ok(node2.parent === root, 'node2.parent');
|
|
ok(node3.parent === root, 'node3.parent');
|
|
});
|
|
|
|
test('empty', function() {
|
|
var root, node1, node2;
|
|
|
|
expect(4);
|
|
|
|
root = new tinymce.html.Node('#frag', 11);
|
|
node1 = root.append(new tinymce.html.Node('b', 1));
|
|
node2 = node1.append(new tinymce.html.Node('em', 1));
|
|
node1.empty();
|
|
ok(root.firstChild === node1, 'root.firstChild');
|
|
ok(root.lastChild === node1, 'root.firstChild');
|
|
ok(!node1.firstChild, 'node1.firstChild');
|
|
ok(!node1.lastChild, 'node1.firstChild');
|
|
});
|
|
|
|
test('isEmpty', function() {
|
|
var root, node1, node2;
|
|
|
|
expect(9);
|
|
|
|
root = new tinymce.html.Node('#frag', 11);
|
|
node1 = root.append(new tinymce.html.Node('p', 1));
|
|
node2 = node1.append(new tinymce.html.Node('b', 1));
|
|
ok(root.isEmpty({img: 1}), 'Is empty 1');
|
|
ok(node1.isEmpty({img: 1}), 'Is empty 2');
|
|
|
|
root = new tinymce.html.Node('#frag', 11);
|
|
node1 = root.append(new tinymce.html.Node('p', 1));
|
|
node2 = node1.append(new tinymce.html.Node('img', 1));
|
|
ok(!root.isEmpty({img: 1}), 'Is not empty 1');
|
|
ok(!node1.isEmpty({img: 1}), 'Is not empty 2');
|
|
|
|
root = new tinymce.html.Node('#frag', 11);
|
|
node1 = root.append(new tinymce.html.Node('p', 1));
|
|
node2 = node1.append(new tinymce.html.Node('#text', 3));
|
|
node2.value = 'X';
|
|
ok(!root.isEmpty({img: 1}), 'Is not empty 3');
|
|
ok(!node1.isEmpty({img: 1}), 'Is not empty 4');
|
|
|
|
root = new tinymce.html.Node('#frag', 11);
|
|
node1 = root.append(new tinymce.html.Node('p', 1));
|
|
node2 = node1.append(new tinymce.html.Node('#text', 3));
|
|
node2.value = '';
|
|
ok(root.isEmpty({img: 1}), 'Is empty 4');
|
|
ok(node1.isEmpty({img: 1}), 'Is empty 5');
|
|
|
|
root = new tinymce.html.Node('#frag', 11);
|
|
node1 = root.append(new tinymce.html.Node('a', 1)).attr('name', 'x');
|
|
ok(!root.isEmpty({img: 1}), 'Contains anchor with name attribute.');
|
|
});
|
|
</script>
|
|
</head>
|
|
<body>
|
|
<h1 id="qunit-header">tinymce.html.Node tests</h1>
|
|
<h2 id="qunit-banner"></h2>
|
|
<div id="qunit-testrunner-toolbar"></div>
|
|
<h2 id="qunit-userAgent"></h2>
|
|
<ol id="qunit-tests"></ol>
|
|
<div id="content"></div>
|
|
</body>
|
|
</html>
|