📄 ajax_inplaceeditor_test.html
字号:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"><head> <title>script.aculo.us Unit test file</title> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> <script src="../../lib/prototype.js" type="text/javascript"></script> <script src="../../src/scriptaculous.js" type="text/javascript"></script> <script src="../../src/unittest.js" type="text/javascript"></script> <link rel="stylesheet" href="../test.css" type="text/css" /></head><body><h1>script.aculo.us Unit test file</h1><p> Tests for <code>Ajax.InPlaceEditor</code> and <code>Ajax.InPlaceCollectionEditor</code> in controls.js</p><!-- Log output --><div id="testlog"> </div><h1 id="tobeedited">To be edited</h1><a id="tobeeditedEditControl" href="#">edit</a><p id="newtbe">New to be edited</p><p id="newtbe_external">External control for it</p><p id="contains_ampersand">Me & Myself</p><div id="tobeeditedMultiLine">First line<br/>Second line<br/>Third line</div><!-- Tests follow --><script type="text/javascript" language="javascript" charset="utf-8">// <![CDATA[ var IPCE_COLLECTION = [ ['tbe', 'To be edited'], ['ntbe', 'New to be edited'], ['ntbe2', 'New to be edited 2'], ['ntbe3', 'New to be edited 3'] ]; new Test.Unit.Runner({ setup: function() { with(this) { inPlaceEditor = new Ajax.InPlaceEditor($('tobeedited'), '_ajax_inplaceeditor_result.html', { externalControl: $('tobeeditedEditControl'), ajaxOptions: {method: 'get'} //override so we can use a static for the result }); inPlaceEditorMultiLine = new Ajax.InPlaceEditor($('tobeeditedMultiLine'), '_ajax_inplaceeditor_result.html', { ajaxOptions: {method: 'get'} //override so we can use a static for the result }); }}, teardown: function() { with(this) { inPlaceEditor.dispose(); inPlaceEditorMultiLine.dispose(); }}, // Original-version tests, still pass thx to backward compatibility // Integration test, tests the entire cycle testInPlaceEditor: function() { with(this) { Event.simulateMouse('tobeedited','click'); assertHidden($('tobeedited')); assertNotNull(document.forms[0]); assertEqual("cancel", document.forms[0].lastChild.innerHTML); assertVisible(document.forms[0]); Event.simulateMouse(document.forms[0].lastChild,'click'); assertNull(document.forms[0]); assertVisible($('tobeedited')); assertEqual("transparent", Element.getStyle('tobeedited','background-color')); Event.simulateMouse('tobeedited','mouseover'); Event.simulateMouse('tobeedited','click'); assertEqual("INPUT", document.forms[0].firstChild.tagName); assertEqual("To be edited", document.forms[0].firstChild.value); assertEqual("INPUT", document.forms[0].childNodes[1].tagName); assertEqual("submit", document.forms[0].childNodes[1].type); assertEqual("To be edited", document.forms[0].firstChild.value); assert(Element.hasClassName(document.forms[0], 'inplaceeditor-form'), "form doesn't have proper class: " + document.forms[0].className); Event.simulateMouse(document.forms[0].childNodes[1],'click'); assertVisible($('tobeedited')); assertEqual("Saving...", $('tobeedited').innerHTML); assertEqual("transparent", Element.getStyle('tobeedited','background-color')); assert(Element.hasClassName($('tobeedited'), 'inplaceeditor-saving'), "doesn't have saving class"); wait(1000, function() { assertEqual("Server received: To be edited", $('tobeedited').innerHTML); assertNull(document.forms[0]); assertVisible($('tobeedited')); assert(!Element.hasClassName($('tobeedited'), 'inplaceeditor-saving')); }); }}, testHovering: function() { with(this) { Event.simulateMouse('tobeedited','mouseover'); assertEqual("rgb(255, 255, 153)", Element.getStyle('tobeedited','background-color')); Event.simulateMouse('tobeedited','mouseout'); wait(1100, function() { assertEqual("transparent", Element.getStyle('tobeedited','background-color'), "should be transparent after mouse leaves element"); Event.simulateMouse('tobeedited','click'); }) }}, testLoadsTextFromServer: function() { with(this) { inPlaceEditor.options.loadTextURL = '_ajax_inplaceeditor_text.html'; inPlaceEditor.enterEditMode(); assertEqual('Loading...', inPlaceEditor._form.value.value); assert(inPlaceEditor._form.value.disabled); assert(Element.hasClassName(inPlaceEditor._form, 'inplaceeditor-loading')); wait(1000, function() { assertEqual('Text from server', inPlaceEditor._form.value.value); assert(!inPlaceEditor._form.value.disabled); }); }}, testDisposesProperly: function() { with(this) { assertEqual("transparent", Element.getStyle('tobeedited','background-color')); inPlaceEditor.dispose(); assertEqual("transparent", Element.getStyle('tobeedited','background-color')); assertVisible($('tobeedited')); Event.simulateMouse('tobeedited','click'); assertVisible($('tobeedited')); }}, testUsesTextAreaWhenMoreThanOneRows: function() { with(this) { inPlaceEditor.options.rows = 5; inPlaceEditor.enterEditMode(); assertEqual("TEXTAREA", document.forms[0].firstChild.tagName); assertEqual("BR", document.forms[0].childNodes[1].tagName); }}, testCanSpecifyAllTextsThroughOptions: function() { with(this) { // swedish translation ;-) inPlaceEditor.options.okText = "spara"; inPlaceEditor.options.cancelText = "avbryt"; inPlaceEditor.options.savingText = "Sparar..."; inPlaceEditor.enterEditMode(); assertEqual("spara", document.forms[0].lastChild.previousSibling.value); assertEqual("avbryt", document.forms[0].lastChild.innerHTML); inPlaceEditor.showSaving(); assertEqual("Sparar...", $('tobeedited').innerHTML); }}, testCanSpecifyFormIdThroughOptions: function() { with(this) { inPlaceEditor.enterEditMode(); // default form id assertEqual("tobeedited-inplaceeditor", document.forms[0].id); inPlaceEditor.leaveEditMode(); inPlaceEditor.options.formId = "myFormId"; inPlaceEditor.enterEditMode(); assertEqual("myFormId", document.forms[0].id); }}, testCantEditWhileSaving: function() { with(this) { inPlaceEditor.prepareSubmission(); Event.simulateMouse('tobeedited','mouseover'); assertEqual("transparent", Element.getStyle('tobeedited','background-color')); Event.simulateMouse('tobeedited','click'); assertVisible($('tobeedited')); }}, testCallbackFunctionGetsCalled: function() { with(this) { var called = false; inPlaceEditor.options.callback = function(form) { called = true; } Event.simulateMouse('tobeedited','click'); Event.simulateMouse(document.forms[0].childNodes[1],'click'); assert(called, "callback was not called"); }}, testCanUseExternalElementToGoIntoEditMode: function() { with(this) { Event.simulateMouse('tobeeditedEditControl','click'); assertNotNull(document.forms[0], "external control didn't work"); // doesn't work if you click it again while in edit mode Event.simulateMouse('tobeeditedEditControl','click'); assertNull(document.forms[1], "external control created two forms"); assertNotVisible($('tobeeditedEditControl')); Event.simulateMouse(document.forms[0].childNodes[2],'click'); assertVisible($('tobeeditedEditControl')); }}, // Rewritten-version tests testControlOptions: function() {with(this) { // Default, then explicit default-equivalent, settings [{}, { okControl: 'button', cancelControl: 'link' }].each(function(opts) { var ipe = new Ajax.InPlaceEditor('newtbe', '', opts); Event.simulateMouse('newtbe', 'click'); var submits = $('newtbe-inplaceeditor').getInputs('submit'); assertEqual(1, submits.length, 'Not just one submit'); assertEqual(Ajax.InPlaceEditor.DefaultOptions.okText, submits[0].value, 'Incorrect button label'); assert(submits[0].hasClassName('editor_ok_button'), 'Missing class name on ok button'); var links = $$('#newtbe-inplaceeditor a'); assertEqual(1, links.length, 'Not just one link'); assertEqual(Ajax.InPlaceEditor.DefaultOptions.cancelText, links[0].firstChild.nodeValue, 'Incorrect cancel link text'); assert(links[0].href.endsWith('#'), 'Incorrect cancel link href'); assert(links[0].hasClassName('editor_cancel_link'), 'Missing class name on cancel link'); ipe.dispose(); }); // Reverse: ok link, cancel button var ipe = new Ajax.InPlaceEditor('newtbe', '', { okControl: 'link', cancelControl: 'button' }); Event.simulateMouse('newtbe', 'click'); var links = $$('#newtbe-inplaceeditor a'); assertEqual(1, links.length, 'Not just one link'); assertEqual(Ajax.InPlaceEditor.DefaultOptions.okText, links[0].firstChild.nodeValue, 'Incorrect ok link text'); assert(links[0].href.endsWith('#'), 'Incorrect ok link href'); assert(links[0].hasClassName('editor_ok_link'), 'Missing class name on ok link'); var submits = $('newtbe-inplaceeditor').getInputs('submit'); assertEqual(1, submits.length, 'Not just one submit'); assertEqual(Ajax.InPlaceEditor.DefaultOptions.cancelText, submits[0].value, 'Incorrect button label'); assert(submits[0].hasClassName('editor_cancel_button'), 'Missing class name on cancel button'); ipe.dispose(); // Full links ipe = new Ajax.InPlaceEditor('newtbe', '', { okControl: 'link' }); Event.simulateMouse('newtbe', 'click'); var links = $$('#newtbe-inplaceeditor a'); assertEqual(2, links.length, 'There should be two links'); assertEqual(Ajax.InPlaceEditor.DefaultOptions.okText, links[0].firstChild.nodeValue, 'Incorrect ok link text'); assertEqual(Ajax.InPlaceEditor.DefaultOptions.cancelText, links[1].firstChild.nodeValue, 'Incorrect cancel link text'); assert(links[0].href.endsWith('#'), 'Incorrect ok link href'); assert(links[1].href.endsWith('#'), 'Incorrect cancel link href'); assert(links[0].hasClassName('editor_ok_link'), 'Missing class name on ok link'); assert(links[1].hasClassName('editor_cancel_link'), 'Missing class name on cancel link'); var submits = $('newtbe-inplaceeditor').getInputs('submit'); assertEqual(0, submits.length, 'There should be no submit'); ipe.dispose(); // Full buttons ipe = new Ajax.InPlaceEditor('newtbe', '', { cancelControl: 'button' }); Event.simulateMouse('newtbe', 'click'); var submits = $('newtbe-inplaceeditor').getInputs('submit'); assertEqual(2, submits.length, 'There should be two submits'); assertEqual(Ajax.InPlaceEditor.DefaultOptions.okText, submits[0].value, 'Incorrect ok button text'); assertEqual(Ajax.InPlaceEditor.DefaultOptions.cancelText, submits[1].value, 'Incorrect cancel button text'); assert(submits[0].hasClassName('editor_ok_button'), 'Missing class name on ok button'); assert(submits[1].hasClassName('editor_cancel_button'), 'Missing class name on cancel button'); var links = $$('#newtbe-inplaceeditor a'); assertEqual(0, links.length, 'There should be no link'); ipe.dispose(); // No cancel ipe = new Ajax.InPlaceEditor('newtbe', '', { cancelControl: false }); Event.simulateMouse('newtbe', 'click'); var submits = $('newtbe-inplaceeditor').getInputs('submit'); assertEqual(1, submits.length, 'Not just one submit'); var links = $$('#newtbe-inplaceeditor a'); assertEqual(0, links.length, 'There should be no link'); ipe.dispose(); // No OK ipe = new Ajax.InPlaceEditor('newtbe', '', { okControl: false }); Event.simulateMouse('newtbe', 'click'); var submits = $('newtbe-inplaceeditor').getInputs('submit'); assertEqual(0, submits.length, 'There should be no submit'); var links = $$('#newtbe-inplaceeditor a'); assertEqual(1, links.length, 'Not just one link'); ipe.dispose(); // Nothing ipe = new Ajax.InPlaceEditor('newtbe', '', { okControl: false, cancelControl: false }); Event.simulateMouse('newtbe', 'click'); var submits = $('newtbe-inplaceeditor').getInputs('submit'); assertEqual(0, submits.length, 'There should be no submit'); var links = $$('#newtbe-inplaceeditor a'); assertEqual(0, links.length, 'There should be no link'); ipe.dispose(); // Texts: default mode ipe = new Ajax.InPlaceEditor('newtbe', '', { okControl: false, cancelControl: false }); Event.simulateMouse('newtbe', 'click'); var submits = $('newtbe-inplaceeditor').getInputs('submit'); assertEqual(0, submits.length, 'There should be no submit'); var links = $$('#newtbe-inplaceeditor a'); assertEqual(0, links.length, 'There should be no link'); ipe.dispose(); // Texts: before w/ controls ipe = new Ajax.InPlaceEditor('newtbe', '', { textBeforeControls: '[' }); Event.simulateMouse('newtbe', 'click'); var text = $('newtbe-inplaceeditor').childNodes[1]; assertEqual(3, text.nodeType, 'Missing/misplaced initial text'); assertEqual('[', text.nodeValue, 'Incorrect text'); ipe.dispose(); // Texts: after w/ controls ipe = new Ajax.InPlaceEditor('newtbe', '', { textAfterControls: ']' }); Event.simulateMouse('newtbe', 'click'); var text = $('newtbe-inplaceeditor').childNodes[3]; assertEqual(3, text.nodeType, 'Missing/misplaced final text'); assertEqual(']', text.nodeValue, 'Incorrect text'); ipe.dispose(); // Texts: between w/ controls ipe = new Ajax.InPlaceEditor('newtbe', '', { textBetweenControls: ' ' }); Event.simulateMouse('newtbe', 'click'); var text = $('newtbe-inplaceeditor').childNodes[2];⌨️ 快捷键说明
复制代码
Ctrl + C
搜索代码
Ctrl + F
全屏模式
F11
切换主题
Ctrl + Shift + D
显示快捷键
?
增大字号
Ctrl + =
减小字号
Ctrl + -