sergiotarxz/Wordpress
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity
9b56f72fb1
Wordpress/tests/qunit/editor/plugins/table.html
Andrew Ozz ce2dcccf86 Incorporate the TinyMCE tests into our JS tests: 
- 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
2014-02-10 01:11:25 +00:00

349 lines
9.8 KiB
HTML
Raw Blame History

<!DOCTYPE html>
<html>
<head>
<title>Unit tests for the Table plugin</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>
</head>
<body>
<script>
var editor;
QUnit.config.reorder = false;
QUnit.config.autostart = false;
module("Table plugin", {
autostart: false
});
function getFontmostWindow() {
return editor.windowManager.windows[editor.windowManager.windows.length - 1];
}
function fillAndSubmitWindowForm(data) {
var win = getFontmostWindow();
win.fromJSON(data);
win.find('form')[0].submit();
win.close();
}
function cleanTableHtml(html) {
return cleanHtml(html).replace(/<p>(&nbsp;|<br[^>]+>)<\/p>$/, '');
}
test("Table properties dialog (get data from plain table)", function() {
editor.setContent('<table><tr><td>X</td></tr></table>');
setSelection('td', 0);
editor.execCommand('mceInsertTable');
deepEqual(getFontmostWindow().toJSON(), {
"align": false,
"border": "",
"caption": false,
"cellpadding": "",
"cellspacing": "",
"height": "",
"width": ""
});
getFontmostWindow().close();
});
test("Table properties dialog (get data from full table)", function() {
editor.setContent(
'<table style="width: 100px; height: 101px;" border="4" cellspacing="2" cellpadding="3">' +
'<caption>&nbsp;</caption>' +
'<tbody>' +
'<tr>' +
'<td>&nbsp;</td>' +
'</tr>' +
'</tbody>' +
'</table>'
);
setSelection('td', 0);
editor.execCommand('mceInsertTable');
deepEqual(getFontmostWindow().toJSON(), {
"align": false,
"border": "4",
"caption": true,
"cellpadding": "3",
"cellspacing": "2",
"height": "101",
"width": "100"
});
getFontmostWindow().close();
});
test("Table properties dialog (add caption)", function() {
editor.setContent('<table><tr><td>X</td></tr></table>');
setSelection('td', 0);
editor.execCommand('mceInsertTable');
fillAndSubmitWindowForm({
caption: true
});
equal(
cleanTableHtml(editor.getContent()),
'<table><caption>&nbsp;</caption><tbody><tr><td>x</td></tr></tbody></table>'
);
});
test("Table properties dialog (remove caption)", function() {
editor.setContent('<table><caption>&nbsp;</caption><tr><td>X</td></tr></table>');
setSelection('td', 0);
editor.execCommand('mceInsertTable');
fillAndSubmitWindowForm({
caption: false
});
equal(
cleanTableHtml(editor.getContent()),
'<table><tbody><tr><td>x</td></tr></tbody></table>'
);
});
test("Table properties dialog (change size in pixels)", function() {
editor.setContent('<table><tr><td>X</td></tr></table>');
setSelection('td', 0);
editor.execCommand('mceInsertTable');
fillAndSubmitWindowForm({
width: 100,
height: 101
});
equal(
cleanTableHtml(editor.getContent()),
'<table style="width: 100px; height: 101px;"><tbody><tr><td>x</td></tr></tbody></table>'
);
});
test("Table properties dialog (change size in %)", function() {
editor.setContent('<table><tr><td>X</td></tr></table>');
setSelection('td', 0);
editor.execCommand('mceInsertTable');
fillAndSubmitWindowForm({
width: "100%",
height: "101%"
});
equal(
cleanTableHtml(editor.getContent()),
'<table style="width: 100%; height: 101%;"><tbody><tr><td>x</td></tr></tbody></table>'
);
});
test("Table properties dialog (change: border,cellpadding,cellspacing,align)", function() {
editor.setContent('<table><tr><td>X</td></tr></table>');
setSelection('td', 0);
editor.execCommand('mceInsertTable');
fillAndSubmitWindowForm({
border: "1",
cellpadding: "2",
cellspacing: "3",
align: "right"
});
equal(
cleanTableHtml(editor.getContent()),
'<table style="float: right;" border="1" cellspacing="3" cellpadding="2"><tbody><tr><td>x</td></tr></tbody></table>'
);
});
test("Table cell properties dialog (get data from plain cell)", function() {
editor.setContent('<table><tr><td>X</td></tr></table>');
setSelection('td', 0);
editor.execCommand('mceTableCellProps');
deepEqual(getFontmostWindow().toJSON(), {
"align": false,
"height": "",
"scope": "",
"type": "td",
"width": ""
});
getFontmostWindow().close();
});
test("Table cell properties dialog (get data from complex cell)", function() {
editor.setContent('<table><tr><th style="text-align: right; width: 10px; height: 11px" scope="row">X</th></tr></table>');
setSelection('th', 0);
editor.execCommand('mceTableCellProps');
deepEqual(getFontmostWindow().toJSON(), {
"align": "right",
"height": "11",
"scope": "row",
"type": "th",
"width": "10"
});
getFontmostWindow().close();
});
test("Table cell properties dialog (update all)", function() {
editor.setContent('<table><tr><td>X</td></tr></table>');
setSelection('td', 0);
editor.execCommand('mceTableCellProps');
fillAndSubmitWindowForm({
"align": "right",
"height": "11",
"scope": "row",
"type": "th",
"width": "10"
});
equal(
cleanTableHtml(editor.getContent()),
'<table><tbody><tr><th style="width: 10px; height: 11px; text-align: right;" scope="row">x</th></tr></tbody></table>'
);
});
test("Table row properties dialog (get data from plain cell)", function() {
editor.setContent('<table><tr><td>X</td></tr></table>');
setSelection('td', 0);
editor.execCommand('mceTableRowProps');
deepEqual(getFontmostWindow().toJSON(), {
"align": false,
"height": "",
"type": "tbody"
});
getFontmostWindow().close();
});
test("Table row properties dialog (get data from complex cell)", function() {
editor.setContent('<table><thead><tr style="height: 10px; text-align: right"><td>X</td></tr></thead></table>');
setSelection('td', 0);
editor.execCommand('mceTableRowProps');
deepEqual(getFontmostWindow().toJSON(), {
"align": "right",
"height": "10",
"type": "thead"
});
getFontmostWindow().close();
});
test("Table row properties dialog (update all)", function() {
editor.setContent('<table><tr><td>X</td></tr></table>');
setSelection('td', 0);
editor.execCommand('mceTableRowProps');
fillAndSubmitWindowForm({
"align": "right",
"height": "10",
"type": "thead"
});
equal(
cleanTableHtml(editor.getContent()),
'<table><thead><tr style="height: 10px; text-align: right;"><td>x</td></tr></thead></table>'
);
});
test("mceTableDelete command", function() {
editor.setContent('<table><tr><td>X</td></tr></table>');
setSelection('td', 0);
editor.execCommand('mceTableDelete');
equal(cleanTableHtml(editor.getContent()), '');
});
test("mceTableDeleteCol command", function() {
editor.setContent('<table><tr><td>1</td><td>2</td></tr></table>');
setSelection('td', 0);
editor.execCommand('mceTableDeleteCol');
equal(cleanTableHtml(editor.getContent()), '<table><tbody><tr><td>2</td></tr></tbody></table>');
});
test("mceTableDeleteRow command", function() {
editor.setContent('<table><tr><td>1</td></tr><tr><td>2</td></tr></table>');
setSelection('td', 0);
editor.execCommand('mceTableDeleteRow');
equal(cleanTableHtml(editor.getContent()), '<table><tbody><tr><td>2</td></tr></tbody></table>');
});
test("mceTableInsertColAfter command", function() {
editor.setContent('<table><tr><td>1</td></tr><tr><td>2</td></tr></table>');
setSelection('td', 0);
editor.execCommand('mceTableInsertColAfter');
equal(cleanTableHtml(editor.getContent()), '<table><tbody><tr><td>1</td><td>&nbsp;</td></tr><tr><td>2</td><td>&nbsp;</td></tr></tbody></table>');
});
test("mceTableInsertColBefore command", function() {
editor.setContent('<table><tr><td>1</td></tr><tr><td>2</td></tr></table>');
setSelection('td', 0);
editor.execCommand('mceTableInsertColBefore');
equal(cleanTableHtml(editor.getContent()), '<table><tbody><tr><td>&nbsp;</td><td>1</td></tr><tr><td>&nbsp;</td><td>2</td></tr></tbody></table>');
});
test("mceTableInsertRowAfter command", function() {
editor.setContent('<table><tr><td>1</td><td>2</td></tr></table>');
setSelection('td', 0);
editor.execCommand('mceTableInsertRowAfter');
equal(cleanTableHtml(editor.getContent()), '<table><tbody><tr><td>1</td><td>2</td></tr><tr><td>&nbsp;</td><td>&nbsp;</td></tr></tbody></table>');
});
test("mceTableInsertRowBefore command", function() {
editor.setContent('<table><tr><td>1</td><td>2</td></tr></table>');
setSelection('td', 0);
editor.execCommand('mceTableInsertRowBefore');
equal(cleanTableHtml(editor.getContent()), '<table><tbody><tr><td>&nbsp;</td><td>&nbsp;</td></tr><tr><td>1</td><td>2</td></tr></tbody></table>');
});
test("mceTableMergeCells command with cell selection", function() {
editor.setContent('<table><tr><td class="mce-item-selected">1</td><td class="mce-item-selected">2</td></tr></table>');
setSelection('td', 0);
editor.execCommand('mceTableMergeCells');
equal(cleanTableHtml(editor.getContent()), '<table><tbody><tr><td colspan="2">12</td></tr></tbody></table>');
});
test("mceTableSplitCells command", function() {
editor.setContent('<table><tbody><tr><td colspan="2">12</td></tr></tbody></table>');
setSelection('td', 0);
editor.execCommand('mceTableSplitCells');
equal(
cleanTableHtml(editor.getContent()),
'<table><tbody><tr><td>12</td><td>&nbsp;</td></tr></tbody></table>'
);
});
tinymce.init({
selector: "textarea",
add_unload_trigger: false,
plugins: 'table',
valid_styles: {
'*' : 'width,height,text-align,float'
},
init_instance_callback: function(ed) {
editor = ed;
QUnit.start();
}
});
</script>
<h1 id="qunit-header">Unit tests for the Table plugin</h1>
<h2 id="qunit-banner"></h2>
<div id="qunit-testrunner-toolbar"></div>
<h2 id="qunit-userAgent"></h2>
<ol id="qunit-tests"></ol>
<textarea id="elm1" name="elm1"></textarea>
<div>
<a href="javascript:alert(tinymce.EditorManager.get('elm1').getContent({format : 'raw'}));">[getRawContents]</a>
<a href="javascript:alert(tinymce.EditorManager.get('elm1').getContent());">[getContents]</a>
</div>
</body>
</html>
Reference in New Issue View Git Blame Copy Permalink