diff options
Diffstat (limited to 'dom/tests/mochitest/ajax/prototype/test/unit/form_test.js')
| -rw-r--r-- | dom/tests/mochitest/ajax/prototype/test/unit/form_test.js | 384 |
1 files changed, 384 insertions, 0 deletions
diff --git a/dom/tests/mochitest/ajax/prototype/test/unit/form_test.js b/dom/tests/mochitest/ajax/prototype/test/unit/form_test.js new file mode 100644 index 0000000000..4cda87d81b --- /dev/null +++ b/dom/tests/mochitest/ajax/prototype/test/unit/form_test.js @@ -0,0 +1,384 @@ +// sweet sweet additional assertions +Object.extend(Test.Unit.Testcase.prototype, { + assertEnabled: function() { + for (var i = 0, element; element = arguments[i]; i++) { + this.assert(!$(element).disabled, Test.Unit.inspect(element) + ' was disabled'); + } + }, + assertDisabled: function() { + for (var i = 0, element; element = arguments[i]; i++) { + this.assert($(element).disabled, Test.Unit.inspect(element) + ' was enabled'); + } + } +}); + +new Test.Unit.Runner({ + + // Make sure to set defaults in the test forms, as some browsers override this + // with previously entered values on page reload + setup: function(){ + $$('form').each(function(f){ f.reset() }); + // hidden value does not reset (for some reason) + $('bigform')['tf_hidden'].value = ''; + }, + + testDollarF: function(){ + this.assertEqual("4", $F("input_enabled")); + }, + + testFormElementEventObserver: function(){ + var callbackCounter = 0; + var observer = new Form.Element.EventObserver('input_enabled', function(){ + callbackCounter++; + }); + + this.assertEqual(0, callbackCounter); + $('input_enabled').value = 'boo!'; + observer.onElementEvent(); // can't test the event directly, simulating + this.assertEqual(1, callbackCounter); + }, + + testFormElementObserver: function(){ + var timedCounter = 0; + // First part: regular field + var observer = new Form.Element.Observer('input_enabled', 0.5, function() { + ++timedCounter; + }); + + // Test it's unchanged yet + this.assertEqual(0, timedCounter); + // Test it doesn't change on first check + this.wait(550, function() { + this.assertEqual(0, timedCounter); + // Change, test it doesn't immediately change + $('input_enabled').value = 'yowza!'; + this.assertEqual(0, timedCounter); + // Test it changes on next check, but not again on the next + this.wait(550, function() { + this.assertEqual(1, timedCounter); + this.wait(550, function() { + this.assertEqual(1, timedCounter); + observer.stop(); + }); + }); + }); + + // Second part: multiple-select + [1, 2, 3].each(function(index) { + $('multiSel1_opt' + index).selected = (1 == index); + }); + timedCounter = 0; + observer = new Form.Element.Observer('multiSel1', 0.5, function() { + ++timedCounter; + }); + + // Test it's unchanged yet + this.assertEqual(0, timedCounter); + // Test it doesn't change on first check + this.wait(550, function() { + this.assertEqual(0, timedCounter); + // Change, test it doesn't immediately change + // NOTE: it is important that the 3rd be re-selected, for the + // serialize form to obtain the expected value :-) + $('multiSel1_opt3').selected = true; + this.assertEqual(0, timedCounter); + // Test it changes on next check, but not again on the next + this.wait(550, function() { + this.assertEqual(1, timedCounter); + this.wait(550, function() { + this.assertEqual(1, timedCounter); + observer.stop(); + }); + }); + }); + }, + + testFormObserver: function(){ + var timedCounter = 0; + // should work the same way was Form.Element.Observer + var observer = new Form.Observer('form', 0.5, function(form, value) { + ++timedCounter; + }); + + // Test it's unchanged yet + this.assertEqual(0, timedCounter); + // Test it doesn't change on first check + this.wait(550, function() { + this.assertEqual(0, timedCounter); + // Change, test it doesn't immediately change + $('input_enabled').value = 'yowza!'; + this.assertEqual(0, timedCounter); + // Test it changes on next check, but not again on the next + this.wait(550, function() { + this.assertEqual(1, timedCounter); + this.wait(550, function() { + this.assertEqual(1, timedCounter); + observer.stop(); + }); + }); + }); + }, + + testFormEnabling: function(){ + var form = $('bigform') + var input1 = $('dummy_disabled'); + var input2 = $('focus_text'); + + this.assertDisabled(input1); + this.assertEnabled(input2); + + form.disable(); + this.assertDisabled(input1, input2); + form.enable(); + this.assertEnabled(input1, input2); + input1.disable(); + this.assertDisabled(input1); + + // non-form elements: + var fieldset = $('selects_fieldset'); + var fields = fieldset.immediateDescendants(); + fields.each(function(select) { this.assertEnabled(select) }, this); + + Form.disable(fieldset) + fields.each(function(select) { this.assertDisabled(select) }, this); + + Form.enable(fieldset) + fields.each(function(select) { this.assertEnabled(select) }, this); + }, + + testFormElementEnabling: function(){ + var field = $('input_disabled'); + field.enable(); + this.assertEnabled(field); + field.disable(); + this.assertDisabled(field); + + var field = $('input_enabled'); + this.assertEnabled(field); + field.disable(); + this.assertDisabled(field); + field.enable(); + this.assertEnabled(field); + }, + + // due to the lack of a DOM hasFocus() API method, + // we're simulating things here a little bit + testFormActivating: function(){ + // Firefox, IE, and Safari 2+ + function getSelection(element){ + try { + if (typeof element.selectionStart == 'number') { + return element.value.substring(element.selectionStart, element.selectionEnd); + } else if (document.selection && document.selection.createRange) { + return document.selection.createRange().text; + } + } + catch(e){ return null } + } + + // Form.focusFirstElement shouldn't focus disabled elements + var element = Form.findFirstElement('bigform'); + this.assertEqual('submit', element.id); + + // Test IE doesn't select text on buttons + Form.focusFirstElement('bigform'); + if (document.selection) this.assertEqual('', getSelection(element)); + + // Form.Element.activate shouldn't select text on buttons + element = $('focus_text'); + this.assertEqual('', getSelection(element)); + + // Form.Element.activate should select text on text input elements + element.activate(); + this.assertEqual('Hello', getSelection(element)); + + // Form.Element.activate shouldn't raise an exception when the form or field is hidden + this.assertNothingRaised(function() { + $('form_focus_hidden').focusFirstElement(); + }); + }, + + testFormGetElements: function() { + var elements = Form.getElements('various'), + names = $w('tf_selectOne tf_textarea tf_checkbox tf_selectMany tf_text tf_radio tf_hidden tf_password'); + this.assertEnumEqual(names, elements.pluck('name')) + }, + + testFormGetInputs: function() { + var form = $('form'); + [form.getInputs(), Form.getInputs(form)].each(function(inputs){ + this.assertEqual(inputs.length, 5); + this.assert(inputs instanceof Array); + this.assert(inputs.all(function(input) { return (input.tagName == "INPUT"); })); + }, this); + }, + + testFormFindFirstElement: function() { + this.assertEqual($('ffe_checkbox'), $('ffe').findFirstElement()); + this.assertEqual($('ffe_ti_submit'), $('ffe_ti').findFirstElement()); + this.assertEqual($('ffe_ti2_checkbox'), $('ffe_ti2').findFirstElement()); + }, + + testFormSerialize: function() { + // form is initially empty + var form = $('bigform'); + var expected = { tf_selectOne:'', tf_textarea:'', tf_text:'', tf_hidden:'', tf_password:'' }; + this.assertHashEqual(expected, Form.serialize('various', true)); + + // set up some stuff + form['tf_selectOne'].selectedIndex = 1; + form['tf_textarea'].value = "boo hoo!"; + form['tf_text'].value = "123öäü"; + form['tf_hidden'].value = "moo%hoo&test"; + form['tf_password'].value = 'sekrit code'; + form['tf_checkbox'].checked = true; + form['tf_radio'].checked = true; + var expected = { tf_selectOne:1, tf_textarea:"boo hoo!", tf_text:"123öäü", + tf_hidden:"moo%hoo&test", tf_password:'sekrit code', tf_checkbox:'on', tf_radio:'on' } + + // return params + this.assertHashEqual(expected, Form.serialize('various', true)); + // return string + this.assertEnumEqual(Object.toQueryString(expected).split('&').sort(), + Form.serialize('various').split('&').sort()); + this.assertEqual('string', typeof $('form').serialize({ hash:false })); + + // Checks that disabled element is not included in serialized form. + $('input_enabled').enable(); + this.assertHashEqual({ val1:4, action:'blah', first_submit:'Commit it!' }, + $('form').serialize(true)); + + // should not eat empty values for duplicate names + $('checkbox_hack').checked = false; + var data = Form.serialize('value_checks', true); + this.assertEnumEqual(['', 'siamese'], data['twin']); + this.assertEqual('0', data['checky']); + + $('checkbox_hack').checked = true; + this.assertEnumEqual($w('1 0'), Form.serialize('value_checks', true)['checky']); + + // all kinds of SELECT controls + var params = Form.serialize('selects_fieldset', true); + var expected = { 'nvm[]':['One', 'Three'], evu:'', 'evm[]':['', 'Three'] }; + this.assertHashEqual(expected, params); + params = Form.serialize('selects_wrapper', true); + this.assertHashEqual(Object.extend(expected, { vu:1, 'vm[]':[1, 3], nvu:'One' }), params); + + // explicit submit button + this.assertHashEqual({ val1:4, action:'blah', second_submit:'Delete it!' }, + $('form').serialize({ submit: 'second_submit' })); + this.assertHashEqual({ val1:4, action:'blah' }, + $('form').serialize({ submit: false })); + this.assertHashEqual({ val1:4, action:'blah' }, + $('form').serialize({ submit: 'inexistent' })); + + // file input should not be serialized + this.assertEqual('', $('form_with_file_input').serialize()); + }, + + testFormMethodsOnExtendedElements: function() { + var form = $('form'); + this.assertEqual(Form.serialize('form'), form.serialize()); + this.assertEqual(Form.Element.serialize('input_enabled'), $('input_enabled').serialize()); + this.assertNotEqual(form.serialize, $('input_enabled').serialize); + + Element.addMethods('INPUT', { anInputMethod: function(input) { return 'input' } }); + Element.addMethods('SELECT', { aSelectMethod: function(select) { return 'select' } }); + + form = $('bigform'); + var input = form['tf_text'], select = form['tf_selectOne']; + input._extendedByPrototype = select._extendedByPrototype = false; + + this.assert($(input).anInputMethod); + this.assert(!input.aSelectMethod); + this.assertEqual('input', input.anInputMethod()); + + this.assert($(select).aSelectMethod); + this.assert(!select.anInputMethod); + this.assertEqual('select', select.aSelectMethod()); + }, + + testFormRequest: function() { + request = $("form").request(); + this.assert($("form").hasAttribute("method")); + this.assert(request.url.include("fixtures/empty.js?val1=4")); + this.assertEqual("get", request.method); + + request = $("form").request({ method: "put", parameters: {val2: "hello"} }); + var url = request.url; + + this.assert(url.startsWith("fixtures/empty.js")); + this.assert(url.endsWith("_method=put") || url.endsWith("_method=put&_=")); + this.assertEqual(4, request.options.parameters['val1']); + this.assertEqual('hello', request.options.parameters['val2']); + this.assertEqual("post", request.method); + this.assertEqual("put", request.parameters['_method']); + + // with empty action attribute + request = $("ffe").request({ method: 'post' }); + this.assert(request.url.include("unit/tmp/form_test.html"), + 'wrong default action for form element with empty action attribute'); + }, + + testFormElementMethodsChaining: function(){ + var methods = $w('clear activate disable enable'), + formElements = $('form').getElements(); + methods.each(function(method){ + formElements.each(function(element){ + var returned = element[method](); + this.assertIdentical(element, returned); + }, this); + }, this); + }, + + testGetValue: function() { + this.assertEqual('Click Me', Form.Element.getValue('button_type_button')); // Button element + this.assertEqual(null, Form.Element.getValue('someBorkedId')); // Unknown + this.assertEqual(null, Form.Element.getValue('form')); // Unsupported + this.assertEqual(null, Form.Element.getValue('form')); // Unsupported + }, + + testSetValue: function(){ + // unkown element + this.assertEqual(null, Form.Element.setValue('someBorkedId', 'blah')); // Unknown + + // test button element + var button = $('button_type_button'); + button.setValue('I Changed'); + this.assertEqual('I Changed', button.getValue()); + + // text input + var input = $('input_enabled'), oldValue = input.getValue(); + this.assertEqual(input, input.setValue('foo'), 'setValue chaining is broken'); + this.assertEqual('foo', input.getValue(), 'value improperly set'); + input.setValue(oldValue); + this.assertEqual(oldValue, input.getValue(), 'value improperly restored to original'); + + // checkbox + input = $('checkbox_hack'); + input.setValue(false); + this.assertEqual(null, input.getValue(), 'checkbox should be unchecked'); + input.setValue(true); + this.assertEqual("1", input.getValue(), 'checkbox should be checked'); + + // selectbox + input = $('bigform')['vu']; + input.setValue('3'); + this.assertEqual('3', input.getValue(), 'single select option improperly set'); + input.setValue('1'); + this.assertEqual('1', input.getValue()); + + // multiple select + input = $('bigform')['vm[]']; + input.setValue(['2', '3']); + this.assertEnumEqual(['2', '3'], input.getValue(), + 'multiple select options improperly set'); + input.setValue(['1', '3']); + this.assertEnumEqual(['1', '3'], input.getValue()); + + // test chainability + var input = $('input_enabled'); + this.assert(Object.isElement(button.setValue('New Value'))); + this.assert(Object.isElement(input.setValue('New Value'))); + } +});
\ No newline at end of file |