mirror of
https://github.com/silverstripe/silverstripe-framework
synced 2024-10-22 14:05:37 +02:00
985 lines
32 KiB
HTML
985 lines
32 KiB
HTML
|
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
|
||
|
|
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
|
||
|
|
<head>
|
||
|
|
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
|
||
|
|
<title>jQuery form.js Unit Test</title>
|
||
|
|
|
||
|
|
<!-- load latest build of jquery.js -->
|
||
|
|
<script type="text/javascript" src="../../../jquery/dist/jquery.js"></script>
|
||
|
|
|
||
|
|
<!-- load testrunner from jquery project -->
|
||
|
|
<script type="text/javascript" src="../../../jquery/test/data/testrunner.js"></script>
|
||
|
|
|
||
|
|
<!-- load form.js (this is what we're testing! -->
|
||
|
|
<script type="text/javascript" src="../jquery.form.js"></script>
|
||
|
|
|
||
|
|
<link rel="Stylesheet" media="screen" href="../../../jquery/test/data/testsuite.css" />
|
||
|
|
|
||
|
|
<script>
|
||
|
|
_config.asyncTimeout = 5;
|
||
|
|
|
||
|
|
// test form with inputs named 'action' and 'method'
|
||
|
|
test("'action' and 'method' form attributes", function() {
|
||
|
|
var f = $("#form1");
|
||
|
|
ok( f.attr('action').match('text.php'), "form 'action'");
|
||
|
|
ok( f.attr('method').match('get'), "form 'method'");
|
||
|
|
});
|
||
|
|
|
||
|
|
// test serialization to array
|
||
|
|
test("formToArray: multi-select", function() {
|
||
|
|
var a = $("#form1").formToArray();
|
||
|
|
ok( a.constructor == Array, "type check");
|
||
|
|
ok( a.length == 13, "array length");
|
||
|
|
ok( arrayCount(a, 'Multiple') == 3, "multi-select");
|
||
|
|
});
|
||
|
|
|
||
|
|
// test serialization to array
|
||
|
|
test("formToArray: 'action' and 'method' inputs", function() {
|
||
|
|
var a = $("#form1").formToArray();
|
||
|
|
ok( a.constructor == Array, "type check");
|
||
|
|
ok( arrayValue(a, 'action') == 1, "input name=action");
|
||
|
|
ok( arrayValue(a, 'method') == 2, "input name=method");
|
||
|
|
});
|
||
|
|
|
||
|
|
// test formToArray semantic support
|
||
|
|
test("formToArray: semantic test", function() {
|
||
|
|
var formData = $("#form2").formToArray(true);
|
||
|
|
var testData = ['a','b','c','d','e','f'];
|
||
|
|
for (var i=0; i < 6; i++) {
|
||
|
|
ok(formData[i].name == testData[i], "match value at index="+i);
|
||
|
|
}
|
||
|
|
});
|
||
|
|
|
||
|
|
test("formToArray: text promotion for missing value attributes", function() {
|
||
|
|
var expected = [
|
||
|
|
{ name: 'A', value: ''},
|
||
|
|
{ name: 'B', value: 'MISSING_ATTR'},
|
||
|
|
{ name: 'C', value: ''},
|
||
|
|
{ name: 'C', value: 'MISSING_ATTR'}
|
||
|
|
];
|
||
|
|
|
||
|
|
var a = $('#form6').formToArray(true);
|
||
|
|
|
||
|
|
// verify all the option values
|
||
|
|
for (var i=0; i < a.length; i++) {
|
||
|
|
ok( a[i].name == expected[i].name, 'Name: ' + a[i].name + ' = ' + expected[i].name);
|
||
|
|
ok( a[i].value == expected[i].value, 'Value: ' + a[i].value + ' = ' + expected[i].value);
|
||
|
|
}
|
||
|
|
});
|
||
|
|
|
||
|
|
// test string serialization
|
||
|
|
test("serialize: param count", function() {
|
||
|
|
var s = $("#form1").formSerialize();
|
||
|
|
ok( s.constructor == String, "type check");
|
||
|
|
ok( s.split('&').length == 13, "string array length");
|
||
|
|
});
|
||
|
|
|
||
|
|
// test support for input elements not contained within a form
|
||
|
|
test("serialize: pseudo form", function() {
|
||
|
|
var s = $("#pseudo *").fieldSerialize();
|
||
|
|
ok( s.constructor == String, "type check");
|
||
|
|
ok( s.split('&').length == 3, "string array length");
|
||
|
|
});
|
||
|
|
|
||
|
|
|
||
|
|
// test resetForm
|
||
|
|
test("resetForm (text input)", function() {
|
||
|
|
var $el = $('#form1 input[@name=Name]');
|
||
|
|
var val = $el.val();
|
||
|
|
ok( 'MyName1' == val, 'beforeSubmit: ' + val);
|
||
|
|
$el.val("test");
|
||
|
|
val = $el.val();
|
||
|
|
ok( 'test' == $el.val(), 'update: ' + val);
|
||
|
|
$('#form1').resetForm();
|
||
|
|
val = $el.val();
|
||
|
|
ok( 'MyName1' == val, 'success: ' + val);
|
||
|
|
});
|
||
|
|
|
||
|
|
// test resetForm
|
||
|
|
test("resetForm (select)", function() {
|
||
|
|
var $el = $('#form1 select[@name=Single]');
|
||
|
|
var val = $el.val();
|
||
|
|
ok( 'one' == val, 'beforeSubmit: ' + val);
|
||
|
|
$el.val("two");
|
||
|
|
val = $el.val();
|
||
|
|
ok( 'two' == $el.val(), 'update: ' + val);
|
||
|
|
$('#form1').resetForm();
|
||
|
|
val = $el.val();
|
||
|
|
ok( 'one' == val, 'success: ' + val);
|
||
|
|
});
|
||
|
|
|
||
|
|
// test resetForm
|
||
|
|
test("resetForm (textarea)", function() {
|
||
|
|
var $el = $('#form1 textarea');
|
||
|
|
var val = $el.val();
|
||
|
|
ok( 'This is Form1' == val, 'beforeSubmit: ' + val);
|
||
|
|
$el.val("test");
|
||
|
|
val = $el.val();
|
||
|
|
ok( 'test' == val, 'udpate: ' + val);
|
||
|
|
$('#form1').resetForm();
|
||
|
|
val = $el.val();
|
||
|
|
ok( 'This is Form1' == val, 'success: ' + val);
|
||
|
|
});
|
||
|
|
|
||
|
|
// test resetForm
|
||
|
|
test("resetForm (checkbox)", function() {
|
||
|
|
var el = $('#form1 input:checkbox:checked')[0];
|
||
|
|
var val = el.value;
|
||
|
|
ok( el.checked, 'beforeSubmit: ' + el.checked);
|
||
|
|
el.checked = false;
|
||
|
|
ok( !el.checked, 'update: ' + el.checked);
|
||
|
|
$('#form1').resetForm();
|
||
|
|
ok( el.checked, 'success: ' + el.checked);
|
||
|
|
});
|
||
|
|
|
||
|
|
// test resetForm
|
||
|
|
test("resetForm (radio)", function() {
|
||
|
|
var el = $('#form1 input:radio:checked')[0];
|
||
|
|
var val = el.value;
|
||
|
|
ok( el.checked, 'beforeSubmit: ' + el.checked);
|
||
|
|
el.checked = false;
|
||
|
|
ok( !el.checked, 'update: ' + el.checked);
|
||
|
|
$('#form1').resetForm();
|
||
|
|
ok( el.checked, 'success: ' + el.checked);
|
||
|
|
});
|
||
|
|
|
||
|
|
|
||
|
|
// test clearForm
|
||
|
|
test("clearForm (text input)", function() {
|
||
|
|
var $el = $('#form1 input[@name=Name]');
|
||
|
|
var val = $el.val();
|
||
|
|
ok( 'MyName1' == val, 'beforeSubmit: ' + val);
|
||
|
|
$('#form1').clearForm();
|
||
|
|
val = $el.val();
|
||
|
|
ok( !val, 'success: ' + val);
|
||
|
|
});
|
||
|
|
|
||
|
|
// test resetForm
|
||
|
|
test("clearForm (select)", function() {
|
||
|
|
var $el = $('#form1 select[@name=Single]');
|
||
|
|
var val = $el.val();
|
||
|
|
ok( 'one' == val, 'beforeSubmit: ' + val);
|
||
|
|
$('#form1').clearForm();
|
||
|
|
val = $el.val();
|
||
|
|
ok( '' == val, 'success: ' + val);
|
||
|
|
});
|
||
|
|
|
||
|
|
// test clearForm; here we're testing that a hidden field is NOT cleared
|
||
|
|
test("clearForm: (hidden input)", function() {
|
||
|
|
var $el = $('#form1 input:hidden');
|
||
|
|
var val = $el.val();
|
||
|
|
ok( 'hiddenValue' == val, 'beforeSubmit: ' + val);
|
||
|
|
$('#form1').clearForm();
|
||
|
|
val = $el.val();
|
||
|
|
ok( 'hiddenValue' == val, 'success: ' + val);
|
||
|
|
});
|
||
|
|
|
||
|
|
|
||
|
|
// test clearForm; here we're testing that a submit element is NOT cleared
|
||
|
|
test("clearForm: (submit input)", function() {
|
||
|
|
var $el = $('#form1 input:submit');
|
||
|
|
var val = $el.val();
|
||
|
|
ok( 'Submit1' == val, 'beforeSubmit: ' + val);
|
||
|
|
$('#form1').clearForm();
|
||
|
|
val = $el.val();
|
||
|
|
ok( 'Submit1' == val, 'success: ' + val);
|
||
|
|
});
|
||
|
|
|
||
|
|
// test clearForm
|
||
|
|
test("clearForm (checkbox)", function() {
|
||
|
|
var el = $('#form1 input:checkbox:checked')[0];
|
||
|
|
ok( el.checked, 'beforeSubmit: ' + el.checked);
|
||
|
|
$('#form1').clearForm();
|
||
|
|
ok( !el.checked, 'success: ' + el.checked);
|
||
|
|
});
|
||
|
|
|
||
|
|
|
||
|
|
// test clearForm
|
||
|
|
test("clearForm (radio)", function() {
|
||
|
|
var el = $('#form1 input:radio:checked')[0];
|
||
|
|
ok( el.checked, 'beforeSubmit: ' + el.checked);
|
||
|
|
$('#form1').clearForm();
|
||
|
|
ok( !el.checked, 'success: ' + el.checked);
|
||
|
|
});
|
||
|
|
|
||
|
|
// test ajaxSubmit target update
|
||
|
|
test("ajaxSubmit: target == String", function() {
|
||
|
|
$('#targetDiv').empty();
|
||
|
|
stop();
|
||
|
|
var opts = {
|
||
|
|
target: '#targetDiv',
|
||
|
|
success: function() { // post-callback
|
||
|
|
ok( true, 'post-callback');
|
||
|
|
ok( $('#targetDiv').text().match("Lorem ipsum"), "targetDiv updated");
|
||
|
|
start();
|
||
|
|
}
|
||
|
|
};
|
||
|
|
|
||
|
|
expect(2);
|
||
|
|
$('#form3').ajaxSubmit(opts);
|
||
|
|
});
|
||
|
|
|
||
|
|
// test passing jQuery object as the target
|
||
|
|
test("ajaxSubmit: target == jQuery object", function() {
|
||
|
|
stop();
|
||
|
|
var target = $('#targetDiv');
|
||
|
|
target.empty();
|
||
|
|
|
||
|
|
var opts = {
|
||
|
|
target: target,
|
||
|
|
success: function(responseText) { // post-callback
|
||
|
|
ok( true, 'post-callback');
|
||
|
|
ok( $('#targetDiv').text().match("Lorem ipsum"), "targetDiv updated");
|
||
|
|
start();
|
||
|
|
}
|
||
|
|
};
|
||
|
|
|
||
|
|
expect(2);
|
||
|
|
$("#form2").ajaxSubmit(opts);
|
||
|
|
});
|
||
|
|
|
||
|
|
// test passing DOM element as the target
|
||
|
|
test("ajaxSubmit: target == DOM element", function() {
|
||
|
|
stop();
|
||
|
|
$('#targetDiv').empty();
|
||
|
|
var target = $('#targetDiv')[0];
|
||
|
|
|
||
|
|
var opts = {
|
||
|
|
target: target,
|
||
|
|
success: function(responseText) { // post-callback
|
||
|
|
ok( true, 'post-callback');
|
||
|
|
ok( $('#targetDiv').text().match("Lorem ipsum"), "targetDiv updated");
|
||
|
|
start();
|
||
|
|
}
|
||
|
|
};
|
||
|
|
|
||
|
|
expect(2);
|
||
|
|
$("#form2").ajaxSubmit(opts);
|
||
|
|
});
|
||
|
|
|
||
|
|
// test simulated $.load behavior
|
||
|
|
test("ajaxSubmit: load target with scripts", function() {
|
||
|
|
stop();
|
||
|
|
$('#targetDiv').empty();
|
||
|
|
|
||
|
|
var opts = {
|
||
|
|
target: '#targetDiv',
|
||
|
|
url: 'doc-with-scripts.html?' + new Date().getTime(),
|
||
|
|
success: function(responseText) { // post-callback
|
||
|
|
ok( true, 'success-callback');
|
||
|
|
ok( $('#targetDiv').text().match("Lorem ipsum"), "targetDiv updated");
|
||
|
|
ok( typeof unitTestVariable1 != 'undefined', 'first script block executed');
|
||
|
|
ok( typeof unitTestVariable2 != 'undefined', 'second script block executed');
|
||
|
|
ok( typeof scriptCount != 'undefined', 'third script block executed');
|
||
|
|
ok( scriptCount == 1, 'scripts executed once: ' + scriptCount);
|
||
|
|
start();
|
||
|
|
}
|
||
|
|
};
|
||
|
|
|
||
|
|
expect(6);
|
||
|
|
$("#form2").ajaxSubmit(opts);
|
||
|
|
});
|
||
|
|
|
||
|
|
// test ajaxSubmit pre-submit callback
|
||
|
|
test("ajaxSubmit: pre-submit callback", function() {
|
||
|
|
var opts = {
|
||
|
|
beforeSubmit: function(a, jq) { // pre-submit callback
|
||
|
|
ok( true, 'pre-submit callback');
|
||
|
|
ok( a.constructor == Array, "type check array");
|
||
|
|
ok( jq.jquery, "type check jQuery");
|
||
|
|
ok( jq[0].tagName.toLowerCase() == 'form', "jQuery arg == 'form': " + jq[0].tagName.toLowerCase());
|
||
|
|
}
|
||
|
|
};
|
||
|
|
|
||
|
|
expect(4);
|
||
|
|
$('#form3').ajaxSubmit(opts);
|
||
|
|
});
|
||
|
|
|
||
|
|
// test ajaxSubmit post-submit callback for response and status text
|
||
|
|
test("ajaxSubmit: post-submit callback", function() {
|
||
|
|
stop();
|
||
|
|
|
||
|
|
var opts = {
|
||
|
|
success: function(responseText, statusText) { // post-submit callback
|
||
|
|
ok( true, 'post-submit callback');
|
||
|
|
ok( responseText.match("Lorem ipsum"), "responseText");
|
||
|
|
ok( statusText == "success", "statusText");
|
||
|
|
start();
|
||
|
|
}
|
||
|
|
};
|
||
|
|
|
||
|
|
expect(3);
|
||
|
|
$('#form3').ajaxSubmit(opts);
|
||
|
|
});
|
||
|
|
|
||
|
|
// test ajaxSubmit with function argument
|
||
|
|
test("ajaxSubmit: function arg", function() {
|
||
|
|
stop();
|
||
|
|
|
||
|
|
expect(1);
|
||
|
|
$('#form3').ajaxSubmit(function() {
|
||
|
|
ok( true, 'callback hit');
|
||
|
|
start();
|
||
|
|
});
|
||
|
|
});
|
||
|
|
|
||
|
|
// test semantic support via ajaxSubmit's pre-submit callback
|
||
|
|
test("ajaxSubmit: semantic test", function() {
|
||
|
|
var testData = ['a','b','c','d','e','f'];
|
||
|
|
|
||
|
|
var opts = {
|
||
|
|
semantic: true,
|
||
|
|
beforeSubmit: function(a, jq) { // pre-submit callback
|
||
|
|
ok( true, 'pre-submit callback');
|
||
|
|
ok( a.constructor == Array, "type check");
|
||
|
|
ok( jq.jquery, "type check jQuery");
|
||
|
|
for (var i=0; i < a.length; i++) {
|
||
|
|
ok(a[i].name == testData[i], "match value at index="+i);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
};
|
||
|
|
|
||
|
|
expect(9);
|
||
|
|
$('#form2').ajaxSubmit(opts);
|
||
|
|
});
|
||
|
|
|
||
|
|
// test json datatype
|
||
|
|
test("ajaxSubmit: dataType == json", function() {
|
||
|
|
stop();
|
||
|
|
|
||
|
|
var opts = {
|
||
|
|
url: 'json.txt',
|
||
|
|
dataType: 'json',
|
||
|
|
success: function(data, statusText) { // post-submit callback
|
||
|
|
// assert that the json data was evaluated
|
||
|
|
ok( typeof data == 'object', 'json data type');
|
||
|
|
ok( data.name == 'jquery-test', 'json data contents');
|
||
|
|
start();
|
||
|
|
}
|
||
|
|
};
|
||
|
|
|
||
|
|
expect(2);
|
||
|
|
$('#form2').ajaxSubmit(opts);
|
||
|
|
});
|
||
|
|
|
||
|
|
// test script datatype
|
||
|
|
test("ajaxSubmit: dataType == script", function() {
|
||
|
|
stop();
|
||
|
|
|
||
|
|
var opts = {
|
||
|
|
url: 'script.txt?' + new Date().getTime(), // don't let ie cache it
|
||
|
|
dataType: 'script',
|
||
|
|
success: function(responseText, statusText) { // post-submit callback
|
||
|
|
ok( typeof formScriptTest == 'function', 'script evaluated');
|
||
|
|
ok( responseText.match('formScriptTest'), 'script returned');
|
||
|
|
start();
|
||
|
|
}
|
||
|
|
};
|
||
|
|
|
||
|
|
expect(2);
|
||
|
|
$('#form2').ajaxSubmit(opts);
|
||
|
|
});
|
||
|
|
|
||
|
|
// test xml datatype
|
||
|
|
test("ajaxSubmit: dataType == xml", function() {
|
||
|
|
stop();
|
||
|
|
|
||
|
|
var opts = {
|
||
|
|
url: 'test.xml',
|
||
|
|
dataType: 'xml',
|
||
|
|
success: function(responseXML, statusText) { // post-submit callback
|
||
|
|
ok( typeof responseXML == 'object', 'data type xml');
|
||
|
|
ok( $('test', responseXML).size() == 3, 'xml data query');
|
||
|
|
start();
|
||
|
|
}
|
||
|
|
};
|
||
|
|
|
||
|
|
expect(2);
|
||
|
|
$('#form2').ajaxSubmit(opts);
|
||
|
|
});
|
||
|
|
|
||
|
|
|
||
|
|
// test that args embedded in the action are honored; no real way
|
||
|
|
// to assert this so successful callback is used to signal success
|
||
|
|
test("ajaxSubmit: existing args in action attr", function() {
|
||
|
|
stop();
|
||
|
|
|
||
|
|
var opts = {
|
||
|
|
success: function() { // post-submit callback
|
||
|
|
ok( true, 'post callback');
|
||
|
|
start();
|
||
|
|
}
|
||
|
|
};
|
||
|
|
|
||
|
|
expect(1);
|
||
|
|
$('#form5').ajaxSubmit(opts);
|
||
|
|
});
|
||
|
|
|
||
|
|
// test ajaxSubmit using pre-submit callback to cancel submit
|
||
|
|
test("ajaxSubmit: cancel submit", function() {
|
||
|
|
|
||
|
|
var opts = {
|
||
|
|
beforeSubmit: function(a, jq) { // pre-submit callback
|
||
|
|
ok( true, 'pre-submit callback');
|
||
|
|
ok( a.constructor == Array, "type check");
|
||
|
|
ok( jq.jquery, "type check jQuery");
|
||
|
|
return false; // return false to abort submit
|
||
|
|
},
|
||
|
|
success: function() { // post-submit callback
|
||
|
|
ok( false, "should not hit this post-submit callback");
|
||
|
|
}
|
||
|
|
};
|
||
|
|
|
||
|
|
expect(3);
|
||
|
|
$('#form3').ajaxSubmit(opts);
|
||
|
|
});
|
||
|
|
|
||
|
|
// test submitting a pseudo-form
|
||
|
|
test("ajaxSubmit: pseudo-form", function() {
|
||
|
|
stop();
|
||
|
|
|
||
|
|
var opts = {
|
||
|
|
beforeSubmit: function(a, jq) { // pre-submit callback
|
||
|
|
ok( true, 'pre-submit callback');
|
||
|
|
ok( a.constructor == Array, "type check");
|
||
|
|
ok( jq.jquery, "type check jQuery");
|
||
|
|
ok( jq[0].tagName.toLowerCase() == 'div', "jQuery arg == 'div'");
|
||
|
|
},
|
||
|
|
success: function() { // post-submit callback
|
||
|
|
ok( true, 'post-submit callback');
|
||
|
|
start();
|
||
|
|
},
|
||
|
|
// url and method must be provided for a pseudo form since they can
|
||
|
|
// not be extracted from the markup
|
||
|
|
url: 'text.php',
|
||
|
|
type: 'post'
|
||
|
|
};
|
||
|
|
|
||
|
|
expect(5);
|
||
|
|
$("#pseudo").ajaxSubmit(opts);
|
||
|
|
});
|
||
|
|
|
||
|
|
// test eval of json response
|
||
|
|
test("ajaxSubmit: evaluate response", function() {
|
||
|
|
stop();
|
||
|
|
|
||
|
|
var opts = {
|
||
|
|
success: function(responseText) { // post-callback
|
||
|
|
ok( true, 'post-callback');
|
||
|
|
var data = eval.call(window, '('+responseText+')');
|
||
|
|
ok( data.name == 'jquery-test', 'evaled response');
|
||
|
|
start();
|
||
|
|
},
|
||
|
|
url: 'json.txt'
|
||
|
|
};
|
||
|
|
|
||
|
|
expect(2);
|
||
|
|
$("#form2").ajaxSubmit(opts);
|
||
|
|
});
|
||
|
|
|
||
|
|
|
||
|
|
// test pre and post callbacks for ajaxForm
|
||
|
|
test("ajaxForm: pre and post callbacks", function() {
|
||
|
|
stop();
|
||
|
|
|
||
|
|
var opts = {
|
||
|
|
beforeSubmit: function(a, jq) { // pre-submit callback
|
||
|
|
ok( true, 'pre-submit callback');
|
||
|
|
ok( a.constructor == Array, "type check");
|
||
|
|
ok( jq.jquery, "type check jQuery");
|
||
|
|
},
|
||
|
|
success: function() { // post-submit callback
|
||
|
|
ok( true, 'post-submit callback');
|
||
|
|
start();
|
||
|
|
}
|
||
|
|
};
|
||
|
|
|
||
|
|
expect(4);
|
||
|
|
$("#form4").ajaxForm(opts);
|
||
|
|
$('#submitForm4')[0].click(); // trigger the submit button
|
||
|
|
});
|
||
|
|
|
||
|
|
// test that the value of the submit button is captured
|
||
|
|
test("ajaxForm: capture submit element", function() {
|
||
|
|
|
||
|
|
var opts = {
|
||
|
|
beforeSubmit: function(a, jq) { // pre-callback
|
||
|
|
ok( true, 'pre-callback');
|
||
|
|
ok( a.constructor == Array, "type check");
|
||
|
|
ok( jq.jquery, "type check jQuery");
|
||
|
|
ok( arrayValue(a, 'form4inputName') != null, "submit button");
|
||
|
|
}
|
||
|
|
};
|
||
|
|
|
||
|
|
expect(4);
|
||
|
|
$("#form4").ajaxForm(opts);
|
||
|
|
$('#submitForm4withName')[0].click();
|
||
|
|
});
|
||
|
|
|
||
|
|
// test image submit support
|
||
|
|
test("ajaxForm: capture submit image coordinates", function() {
|
||
|
|
|
||
|
|
var opts = {
|
||
|
|
beforeSubmit: function(a, jq) { // pre-callback
|
||
|
|
ok( true, 'pre-callback');
|
||
|
|
ok( a.constructor == Array, "type check");
|
||
|
|
ok( jq.jquery, "type check jQuery");
|
||
|
|
ok( arrayValue(a, 'myImage.x') != null, "x coord");
|
||
|
|
ok( arrayValue(a, 'myImage.y') != null, "y coord");
|
||
|
|
}
|
||
|
|
};
|
||
|
|
|
||
|
|
expect(5);
|
||
|
|
$("#form4").ajaxForm(opts);
|
||
|
|
$('#form4imageSubmit')[0].click();
|
||
|
|
});
|
||
|
|
|
||
|
|
// test image submit support
|
||
|
|
test("ajaxForm: capture submit image coordinates (semantic=true)", function() {
|
||
|
|
|
||
|
|
var opts = {
|
||
|
|
semantic: true,
|
||
|
|
beforeSubmit: function(a, jq) { // pre-callback
|
||
|
|
ok( true, 'pre-callback');
|
||
|
|
ok( a.constructor == Array, "type check");
|
||
|
|
ok( jq.jquery, "type check jQuery");
|
||
|
|
ok( arrayValue(a, 'myImage.x') != null, "x coord");
|
||
|
|
ok( arrayValue(a, 'myImage.y') != null, "y coord");
|
||
|
|
}
|
||
|
|
};
|
||
|
|
|
||
|
|
expect(5);
|
||
|
|
$("#form4").ajaxForm(opts);
|
||
|
|
$('#form4imageSubmit')[0].click();
|
||
|
|
});
|
||
|
|
|
||
|
|
// test that the targetDiv gets updated
|
||
|
|
test("ajaxForm: update target div", function() {
|
||
|
|
$('#targetDiv').empty();
|
||
|
|
stop();
|
||
|
|
|
||
|
|
var opts = {
|
||
|
|
target: '#targetDiv',
|
||
|
|
beforeSubmit: function(a, jq) { // pre-callback
|
||
|
|
ok( true, 'pre-callback');
|
||
|
|
ok( a.constructor == Array, "type check");
|
||
|
|
ok( jq.jquery, "type check jQuery");
|
||
|
|
},
|
||
|
|
success: function() {
|
||
|
|
ok( true, 'post-callback');
|
||
|
|
ok( $('#targetDiv').text().match("Lorem ipsum"), "targetDiv updated");
|
||
|
|
start();
|
||
|
|
}
|
||
|
|
};
|
||
|
|
|
||
|
|
expect(5);
|
||
|
|
$("#form4").ajaxForm(opts);
|
||
|
|
$('#submitForm4')[0].click();
|
||
|
|
});
|
||
|
|
|
||
|
|
test("'success' callback", function() {
|
||
|
|
$('#targetDiv').empty();
|
||
|
|
stop();
|
||
|
|
|
||
|
|
var opts = {
|
||
|
|
success: function() {
|
||
|
|
ok( true, 'post-callback');
|
||
|
|
start();
|
||
|
|
}
|
||
|
|
};
|
||
|
|
|
||
|
|
expect(1);
|
||
|
|
$('#form3').ajaxSubmit(opts);
|
||
|
|
});
|
||
|
|
|
||
|
|
test("'error' callback", function() {
|
||
|
|
$('#targetDiv').empty();
|
||
|
|
stop();
|
||
|
|
|
||
|
|
var opts = {
|
||
|
|
url: 'bogus.php',
|
||
|
|
error: function() {
|
||
|
|
ok( true, 'error-callback');
|
||
|
|
start();
|
||
|
|
},
|
||
|
|
success: function() { // post-submit callback
|
||
|
|
ok( false, "should not hit post-submit callback");
|
||
|
|
}
|
||
|
|
};
|
||
|
|
|
||
|
|
expect(1);
|
||
|
|
$('#form3').ajaxSubmit(opts);
|
||
|
|
});
|
||
|
|
|
||
|
|
|
||
|
|
test("fieldValue(true)", function() {
|
||
|
|
ok ('5' == $('#fieldTest input').fieldValue(true)[0], 'input');
|
||
|
|
ok ('1' == $('#fieldTest :input').fieldValue(true)[0], ':input');
|
||
|
|
ok ('5' == $('#fieldTest :hidden').fieldValue(true)[0], ':hidden');
|
||
|
|
ok ('14' == $('#fieldTest :password').fieldValue(true)[0], ':password');
|
||
|
|
ok ('12' == $('#fieldTest :radio').fieldValue(true)[0], ':radio');
|
||
|
|
ok ('1' == $('#fieldTest select').fieldValue(true)[0], 'select');
|
||
|
|
|
||
|
|
var expected = ['8','10'];
|
||
|
|
var result = $('#fieldTest :checkbox').fieldValue(true);
|
||
|
|
ok (result.length == expected.length, 'result size check (checkbox): ' + result.length + '=' + expected.length);
|
||
|
|
for (var i=0; i < result.length; i++)
|
||
|
|
ok ( result[i] == expected[i], expected[i] );
|
||
|
|
|
||
|
|
expected = ['3','4'];
|
||
|
|
result = $('#fieldTest [@name=B]').fieldValue(true);
|
||
|
|
ok (result.length == expected.length, 'result size check (select-multiple): ' + result.length + '=' + expected.length);
|
||
|
|
for (var i=0; i < result.length; i++)
|
||
|
|
ok ( result[i] == expected[i], expected[i] );
|
||
|
|
});
|
||
|
|
|
||
|
|
test("fieldValue(false)", function() {
|
||
|
|
ok ('5' == $('#fieldTest input').fieldValue(false)[0], 'input');
|
||
|
|
ok ('1' == $('#fieldTest :input').fieldValue(false)[0], ':input');
|
||
|
|
ok ('5' == $('#fieldTest :hidden').fieldValue(false)[0], ':hidden');
|
||
|
|
ok ('14' == $('#fieldTest :password').fieldValue(false)[0], ':password');
|
||
|
|
ok ('1' == $('#fieldTest select').fieldValue(false)[0], 'select');
|
||
|
|
|
||
|
|
var expected = ['8','9','10'];
|
||
|
|
var result = $('#fieldTest :checkbox').fieldValue(false);
|
||
|
|
ok (result.length == expected.length, 'result size check (checkbox): ' + result.length + '=' + expected.length);
|
||
|
|
for (var i=0; i < result.length; i++)
|
||
|
|
ok ( result[i] == expected[i], expected[i] );
|
||
|
|
|
||
|
|
expected = ['11','12','13'];
|
||
|
|
result = $('#fieldTest :radio').fieldValue(false);
|
||
|
|
ok (result.length == expected.length, 'result size check (radio): ' + result.length + '=' + expected.length);
|
||
|
|
for (var i=0; i < result.length; i++)
|
||
|
|
ok ( result[i] == expected[i], expected[i] );
|
||
|
|
|
||
|
|
expected = ['3','4'];
|
||
|
|
result = $('#fieldTest [@name=B]').fieldValue(false);
|
||
|
|
ok (result.length == expected.length, 'result size check (select-multiple): ' + result.length + '=' + expected.length);
|
||
|
|
for (var i=0; i < result.length; i++)
|
||
|
|
ok ( result[i] == expected[i], expected[i] );
|
||
|
|
});
|
||
|
|
|
||
|
|
test("fieldSerialize(true) input", function() {
|
||
|
|
var expected = ['C=5', 'D=6', 'F=8', 'F=10', 'G=12', 'H=14'];
|
||
|
|
|
||
|
|
var result = $('#fieldTest input').fieldSerialize(true);
|
||
|
|
result = result.split('&');
|
||
|
|
|
||
|
|
ok (result.length == expected.length, 'result size check: ' + result.length + '=' + expected.length);
|
||
|
|
for (var i=0; i < result.length; i++)
|
||
|
|
ok( result[i] == expected[i], expected[i] + ' = ' + result[i]);
|
||
|
|
});
|
||
|
|
|
||
|
|
test("fieldSerialize(true) :input", function() {
|
||
|
|
var expected = ['A=1','B=3','B=4','C=5','D=6','E=7','F=8','F=10','G=12','H=14'];
|
||
|
|
|
||
|
|
var result = $('#fieldTest :input').fieldSerialize(true);
|
||
|
|
result = result.split('&');
|
||
|
|
|
||
|
|
ok (result.length == expected.length, 'result size check: ' + result.length + '=' + expected.length);
|
||
|
|
for (var i=0; i < result.length; i++)
|
||
|
|
ok( result[i] == expected[i], expected[i] + ' = ' + result[i]);
|
||
|
|
});
|
||
|
|
|
||
|
|
test("fieldSerialize(false) :input", function() {
|
||
|
|
var expected = ['A=1','B=3','B=4','C=5','D=6','E=7','F=8','F=9','F=10','G=11','G=12','G=13','H=14','I=15','J=16'];
|
||
|
|
|
||
|
|
var result = $('#fieldTest :input').fieldSerialize(false);
|
||
|
|
result = result.split('&');
|
||
|
|
|
||
|
|
ok (result.length == expected.length, 'result size check: ' + result.length + '=' + expected.length);
|
||
|
|
for (var i=0; i < result.length; i++)
|
||
|
|
ok( result[i] == expected[i], expected[i] + ' = ' + result[i]);
|
||
|
|
});
|
||
|
|
|
||
|
|
test("fieldSerialize(true) select-mulitple", function() {
|
||
|
|
var expected = ['B=3','B=4'];
|
||
|
|
|
||
|
|
var result = $('#fieldTest [@name=B]').fieldSerialize(true);
|
||
|
|
result = result.split('&');
|
||
|
|
|
||
|
|
ok (result.length == expected.length, 'result size check: ' + result.length + '=' + expected.length);
|
||
|
|
for (var i=0; i < result.length; i++)
|
||
|
|
ok( result[i] == expected[i], expected[i] + ' = ' + result[i]);
|
||
|
|
});
|
||
|
|
|
||
|
|
test("fieldSerialize(true) :checkbox", function() {
|
||
|
|
var expected = ['F=8','F=10'];
|
||
|
|
|
||
|
|
var result = $('#fieldTest :checkbox').fieldSerialize(true);
|
||
|
|
result = result.split('&');
|
||
|
|
|
||
|
|
ok (result.length == expected.length, 'result size check: ' + result.length + '=' + expected.length);
|
||
|
|
for (var i=0; i < result.length; i++)
|
||
|
|
ok( result[i] == expected[i], expected[i] + ' = ' + result[i]);
|
||
|
|
});
|
||
|
|
|
||
|
|
test("fieldSerialize(false) :checkbox", function() {
|
||
|
|
var expected = ['F=8','F=9','F=10'];
|
||
|
|
|
||
|
|
var result = $('#fieldTest :checkbox').fieldSerialize(false);
|
||
|
|
result = result.split('&');
|
||
|
|
|
||
|
|
ok (result.length == expected.length, 'result size check: ' + result.length + '=' + expected.length);
|
||
|
|
for (var i=0; i < result.length; i++)
|
||
|
|
ok( result[i] == expected[i], expected[i] + ' = ' + result[i]);
|
||
|
|
});
|
||
|
|
|
||
|
|
test("fieldSerialize(true) :radio", function() {
|
||
|
|
var expected = ['G=12'];
|
||
|
|
|
||
|
|
var result = $('#fieldTest :radio').fieldSerialize(true);
|
||
|
|
result = result.split('&');
|
||
|
|
|
||
|
|
ok (result.length == expected.length, 'result size check: ' + result.length + '=' + expected.length);
|
||
|
|
for (var i=0; i < result.length; i++)
|
||
|
|
ok( result[i] == expected[i], expected[i] + ' = ' + result[i]);
|
||
|
|
});
|
||
|
|
|
||
|
|
test("fieldSerialize(false) :radio", function() {
|
||
|
|
var expected = ['G=11','G=12','G=13'];
|
||
|
|
|
||
|
|
var result = $('#fieldTest :radio').fieldSerialize(false);
|
||
|
|
result = result.split('&');
|
||
|
|
|
||
|
|
ok (result.length == expected.length, 'result size check: ' + result.length + '=' + expected.length);
|
||
|
|
for (var i=0; i < result.length; i++)
|
||
|
|
ok( result[i] == expected[i], expected[i] + ' = ' + result[i]);
|
||
|
|
});
|
||
|
|
|
||
|
|
|
||
|
|
test("ajaxForm - auto unbind", function() {
|
||
|
|
$('#targetDiv').empty();
|
||
|
|
stop();
|
||
|
|
|
||
|
|
var opts = {
|
||
|
|
target: '#targetDiv',
|
||
|
|
beforeSubmit: function(a, jq) { // pre-callback
|
||
|
|
ok( true, 'pre-callback');
|
||
|
|
},
|
||
|
|
success: function() {
|
||
|
|
ok( true, 'post-callback');
|
||
|
|
start();
|
||
|
|
}
|
||
|
|
};
|
||
|
|
|
||
|
|
expect(2);
|
||
|
|
// multiple binds
|
||
|
|
$("#form8").ajaxForm(opts).ajaxForm(opts).ajaxForm(opts);
|
||
|
|
$('#submitForm8')[0].click();
|
||
|
|
});
|
||
|
|
|
||
|
|
test("ajaxFormUnbind", function() {
|
||
|
|
$('#targetDiv').empty();
|
||
|
|
stop();
|
||
|
|
|
||
|
|
var opts = {
|
||
|
|
target: '#targetDiv',
|
||
|
|
beforeSubmit: function(a, jq) { // pre-callback
|
||
|
|
ok( true, 'pre-callback');
|
||
|
|
},
|
||
|
|
success: function() {
|
||
|
|
ok( true, 'post-callback');
|
||
|
|
start();
|
||
|
|
}
|
||
|
|
};
|
||
|
|
|
||
|
|
expect(0);
|
||
|
|
// multiple binds
|
||
|
|
$("#form9").ajaxForm(opts).submit(function(){return false;});
|
||
|
|
$("#form9").ajaxFormUnbind(opts);
|
||
|
|
$('#submitForm9')[0].click();
|
||
|
|
|
||
|
|
setTimeout(start, 500);
|
||
|
|
});
|
||
|
|
|
||
|
|
// helper method
|
||
|
|
function arrayCount(arr, key) {
|
||
|
|
var count=0;
|
||
|
|
for (var i=0; i < arr.length; i++) {
|
||
|
|
if (arr[i].name == key)
|
||
|
|
count++;
|
||
|
|
}
|
||
|
|
return count;
|
||
|
|
}
|
||
|
|
|
||
|
|
// helper method
|
||
|
|
function arrayValue(arr, key) {
|
||
|
|
for (var i=0; i < arr.length; i++) {
|
||
|
|
if (arr[i].name == key)
|
||
|
|
return arr[i].value;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
</script>
|
||
|
|
</head>
|
||
|
|
<body id="body">
|
||
|
|
<h1 id="banner">jQuery form.js - Test Suite</h1>
|
||
|
|
<h2 id="userAgent"></h2>
|
||
|
|
|
||
|
|
<!-- Test HTML -->
|
||
|
|
<div id="main" style="display: none;">
|
||
|
|
|
||
|
|
<!-- form1 -->
|
||
|
|
<form id="form1" action="text.php" method="get"><div>
|
||
|
|
<input type="hidden" name="Hidden" value="hiddenValue" />
|
||
|
|
<input name="Name" type="text" value="MyName1" />
|
||
|
|
<input name="Password" type="password" />
|
||
|
|
<select name="Multiple" multiple="multiple">
|
||
|
|
<optgroup label="block 1">
|
||
|
|
<option value="one" selected="selected">One</option>
|
||
|
|
<option value="two">Two</option>
|
||
|
|
<option value="three">Three</option>
|
||
|
|
</optgroup>
|
||
|
|
<optgroup label="block 2">
|
||
|
|
<option value="four" selected="selected">Four</option>
|
||
|
|
<option value="five">Five</option>
|
||
|
|
<option value="six" selected="selected">Six</option>
|
||
|
|
</optgroup>
|
||
|
|
</select>
|
||
|
|
<select name="Single">
|
||
|
|
<option value="one" selected="selected">One</option>
|
||
|
|
<option value="two">Two</option>
|
||
|
|
<option value="three">Three</option>
|
||
|
|
</select>
|
||
|
|
<select name="Single2">
|
||
|
|
<optgroup label="block 3">
|
||
|
|
<option value="A" selected="selected">A</option>
|
||
|
|
<option value="B">B</option>
|
||
|
|
<option value="C">C</option>
|
||
|
|
</optgroup>
|
||
|
|
<optgroup label="block 3">
|
||
|
|
<option value="D">D</option>
|
||
|
|
<option value="E">E</option>
|
||
|
|
<option value="F">F</option>
|
||
|
|
</optgroup>
|
||
|
|
</select>
|
||
|
|
<input type="checkbox" name="Check" value="1" />
|
||
|
|
<input type="checkbox" name="Check" value="2" checked="checked" />
|
||
|
|
<input type="checkbox" name="Check" value="3" />
|
||
|
|
<input type="radio" name="Radio" value="1" />
|
||
|
|
<input type="radio" name="Radio" value="2" checked="checked" />
|
||
|
|
<input type="radio" name="Radio" value="3" />
|
||
|
|
<input type="text" name="action" value="1" />
|
||
|
|
<input type="text" name="method" value="2" />
|
||
|
|
<textarea name="Text" rows="2" cols="20">This is Form1</textarea>
|
||
|
|
<input type="submit" name="submitButton" value="Submit1" />
|
||
|
|
<input type="submit" name="submitButton" value="Submit2" />
|
||
|
|
<input type="submit" name="submitButton" value="Submit3" />
|
||
|
|
<input type="image" name="submitButton" value="Submit4" src="submit.gif" />
|
||
|
|
<input type="reset" name="resetButton " value="Reset" />
|
||
|
|
</div></form>
|
||
|
|
|
||
|
|
<!-- form2 -->
|
||
|
|
<form id="form2" action="text.php" method="get"><div>
|
||
|
|
<input name="a" type="text" />
|
||
|
|
<textarea name="b" rows="1" cols="1"></textarea>
|
||
|
|
<input name="c" type="text" />
|
||
|
|
<select name="d"><option value="x">x</option></select>
|
||
|
|
<textarea name="e" rows="1" cols="1"></textarea>
|
||
|
|
<input name="f" type="text" />
|
||
|
|
<input type="reset" name="resetButton " value="Reset" />
|
||
|
|
</div></form>
|
||
|
|
|
||
|
|
<!-- form3 -->
|
||
|
|
<form id="form3" action="text.php" method="post"><div>
|
||
|
|
<input name="a" type="text" />
|
||
|
|
</div></form>
|
||
|
|
|
||
|
|
<!-- form4 -->
|
||
|
|
<form id="form4" action="text.php" method="get"><div>
|
||
|
|
<input name="a" type="text" />
|
||
|
|
<input type="submit" id="submitForm4" />
|
||
|
|
<input type="submit" id="submitForm4withName" name="form4inputName" />
|
||
|
|
<input type="image" id="form4imageSubmit" name="myImage" src="submit.gif" />
|
||
|
|
</div></form>
|
||
|
|
|
||
|
|
<!-- form5 -->
|
||
|
|
<form id="form5" action="text.php?test=form" method="get"><div>
|
||
|
|
<input name="a" type="text" />
|
||
|
|
<input type="submit" />
|
||
|
|
<input type="submit" name="form5inputName" />
|
||
|
|
<input type="image" id="form5imageSubmit" name="myImage" src="submit.gif" />
|
||
|
|
</div></form>
|
||
|
|
|
||
|
|
<!-- form6, 'option' testing -->
|
||
|
|
<form id="form6" action="text.php" method="get"><div>
|
||
|
|
<select name="A">
|
||
|
|
<option value="" selected="selected">EMPTY_STRING</option> <!-- TEST A: value === empty string -->
|
||
|
|
</select>
|
||
|
|
<select name="B">
|
||
|
|
<option selected="selected">MISSING_ATTR</option> <!-- TEST B: no value attr -->
|
||
|
|
</select>
|
||
|
|
<select name="C" multiple="multiple">
|
||
|
|
<option value="" selected="selected">EMPTY_STRING</option>
|
||
|
|
<option selected="selected">MISSING_ATTR</option>
|
||
|
|
</select>
|
||
|
|
</div></form>
|
||
|
|
|
||
|
|
<!-- form7, 'enctype' testing -->
|
||
|
|
<form id="form7" action="text.php" method="post" enctype="text/css"><div>
|
||
|
|
<textarea name="doc">body { padding: 0}</textarea>
|
||
|
|
</div></form>
|
||
|
|
|
||
|
|
<form id="form8" action="text.php" method="post"><div>
|
||
|
|
<textarea name="ta">blah</textarea>
|
||
|
|
<input type="submit" id="submitForm8" />
|
||
|
|
</div></form>
|
||
|
|
|
||
|
|
<form id="form9" action="text.php" method="post"><div>
|
||
|
|
<textarea name="ta">blah</textarea>
|
||
|
|
<input type="submit" id="submitForm9" />
|
||
|
|
</div></form>
|
||
|
|
|
||
|
|
<!-- pseudo-form -->
|
||
|
|
<div id="pseudo">
|
||
|
|
<input name="a" type="text" />
|
||
|
|
<input type="checkbox" name="Check" value="1" />
|
||
|
|
<input type="checkbox" name="Check" value="2" checked="checked" />
|
||
|
|
<select name="Select">
|
||
|
|
<option value="opt1" />
|
||
|
|
<option value="opt2" selected="selected" />
|
||
|
|
</select>
|
||
|
|
<input type="submit" value="button" />
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div id="targetDiv"></div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<!--
|
||
|
|
********************************************************************************
|
||
|
|
NOTE: The "fieldTest" form is intentionally placed outside of the "main" div
|
||
|
|
because reseting the test fixture causes the default value of the password
|
||
|
|
input to be lost in IE (which causes many test failures in the fieldValue
|
||
|
|
and fieldSerialize tests)
|
||
|
|
********************************************************************************
|
||
|
|
-->
|
||
|
|
|
||
|
|
<form style="display:none" id="fieldTest" action="text.php" method="post"><div>
|
||
|
|
<select name="A">
|
||
|
|
<option value="1" selected="selected">ONE</option>
|
||
|
|
<option value="2">TWO</option>
|
||
|
|
</select>
|
||
|
|
<select name="B" multiple="multiple">
|
||
|
|
<option value="3" selected="selected">ONE</option>
|
||
|
|
<option value="4" selected="selected">TWO</option>
|
||
|
|
<option value="4b">THREE</option>
|
||
|
|
</select>
|
||
|
|
<input name="C" type="hidden" value="5" />
|
||
|
|
<input name="D" type="text" value="6" />
|
||
|
|
<textarea name="E">7</textarea>
|
||
|
|
<input name="F" type="checkbox" value="8" checked="checked" />
|
||
|
|
<input name="F" type="checkbox" value="9" />
|
||
|
|
<input name="F" type="checkbox" value="10" checked="checked" />
|
||
|
|
<input name="G" type="radio" value="11" />
|
||
|
|
<input name="G" type="radio" value="12" checked="checked" />
|
||
|
|
<input name="G" type="radio" value="13" />
|
||
|
|
<input name="H" type="password" value="14" />
|
||
|
|
<input name="I" type="submit" value="15" />
|
||
|
|
<input name="J" type="reset" value="16" />
|
||
|
|
</div></form>
|
||
|
|
|
||
|
|
|
||
|
|
<ol id="tests"></ol>
|
||
|
|
</body>
|
||
|
|
</html>
|