Changeset 463

Timestamp:

10/23/06 23:30:23 (2 years ago)

Author:

malsup

Message:

Updated test suite to support change to options args.

Files:

• plugins/form/test/index.html (modified) (9 diffs)

plugins/form/test/index.html

@@ -18 +18 @@
 h2 { padding: 10px; background-color: #eee; color: black; margin: 0; font-size: small; font-weight: normal }
 
-.pass { color: green; } 
-.fail { color: red; } 
+.pass { color: green; }
+.fail { color: red; }
 #tests ol { display: none; }
 </style>
@@ -29 +29 @@
     $('#userAgent').html(navigator.userAgent);
 
+    // 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()", function() {
+    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 string serialization
-    test("serialize()", function() {
-        var s = $("#form1").serialize();
-        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("pseudo form", function() {
-        var s = $("#pseudo").serialize();
-        ok( s.constructor == String, "type check");
-        ok( s.split('&').length == 3, "string array length");
-    });
-    
-    // test form with inputs named 'action' and 'method'
-    test("form attrs", function() {
-        var f = $("#form1");
-        ok( f.attr('action').match('text.php'), "form 'action'");
-        ok( f.attr('method') == 'post', "form 'method'");
-    });
-    
-    // test ajaxSubmit semantic support
-    test("semantic test", function() {
+    // test formToArray semantic support
+    test("formToArray: semantic test", function() {
         var formData = $("#form2").formToArray(true);
         var testData = ['a','b','c','d','e','f'];
@@ -69 +61 @@
     });
 
+    // test string serialization
+    test("serialize: param count", function() {
+        var s = $("#form1").serialize();
+        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").serialize();
+        ok( s.constructor == String, "type check");
+        ok( s.split('&').length == 3, "string array length");
+    });
+
     // test ajaxSubmit target update
-    test("ajaxSubmit1", function() {
-        $('#targetDiv').html("");
-        stop();
-        $('#form3').ajaxSubmit('#targetDiv', function() { // post-callback
-            ok( true, 'post-callback');
-            ok( $('#targetDiv').text().match("Lorem ipsum"), "targetDiv updated");
-            start();
-        });
-    });
+    test("ajaxSubmit: target == String", function() {
+        $('#targetDiv').empty();
+        stop();
+
+        var opts = {
+            target: '#targetDiv',
+            after: function() { // post-callback
+                ok( true, 'post-callback');
+                ok( $('#targetDiv').text().match("Lorem ipsum"), "targetDiv updated");
+                start();
+            }
+        };
+        $('#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,
+            after: function(responseText) { // post-callback
+                ok( true, 'post-callback');
+                ok( $('#targetDiv').text().match("Lorem ipsum"), "targetDiv updated");
+                start();
+            }
+        };
+
+        $("#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,
+            after: function(responseText) { // post-callback
+                ok( true, 'post-callback');
+                ok( $('#targetDiv').text().match("Lorem ipsum"), "targetDiv updated");
+                start();
+            }
+        };
+
+        $("#form2").ajaxSubmit(opts);
+    });
+
+
 
     // test ajaxSubmit pre-submit callback
-    test("ajaxSubmit2", function() {
-        $('#form3').ajaxSubmit('#targetDiv', null, function(a, jq) { // pre-callback
-            ok( true, 'pre-callback');
-            ok( jq.attr('action').match('text.php'), "form 'action'");
-            ok( jq.attr('method') == 'get', "form 'method'");
-            ok( a.constructor == Array, "type check array");
-            ok( jq.jquery, "type check jQuery");
-            ok( jq[0].tagName.toLowerCase() == 'form', "jQuery arg == 'form'");
-        });
+    test("ajaxSubmit: pre-submit callback", function() {
+        var opts = {
+            before: 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'");
+            }
+        };
+
+        $('#form3').ajaxSubmit(opts);
     });
 
     // test ajaxSubmit post-submit callback for response and status text
-    test("ajaxSubmit3", function() {
-        stop();
-        $('#form3').ajaxSubmit(function(responseText, statusText) { // post-callback
-            ok( true, 'post-callback');
-            ok( responseText.match("Lorem ipsum"), "responseText");
-            ok( statusText == "success", "statusText");
-            start();
-        });
-    });
-
-    // test semantic support and url (action) override. passing no target and
-    // no callback will cause the response string to be evaluated.
-    // if the override of the form's action from text.php to json.php does
-    // not work then the response from text.php will be evaled and that will
-    // generate an error.
-    test("ajaxSubmit4", function() {
+    test("ajaxSubmit: post-submit callback", function() {
+        stop();
+
+        var opts = {
+            after: function(responseText, statusText) { // post-submit callback
+                ok( true, 'post-submit callback');
+                ok( responseText.match("Lorem ipsum"), "responseText");
+                ok( statusText == "success", "statusText");
+                start();
+            }
+        };
+
+        $('#form3').ajaxSubmit(opts);
+    });
+
+    // test semantic support via ajaxSubmit's pre-submit callback
+    test("ajaxSubmit: semantic test", function() {
         var testData = ['a','b','c','d','e','f'];
 
-        $('#form2').ajaxSubmit(null, null, function(a, jq) { // pre-callback
-            ok( true, 'pre-callback');
-            ok( jq.attr('action').match('text.php'), "form 'action'");
-            ok( jq.attr('method') == 'post', "form 'method'");
-            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);
-            }
-        },
-        'json.php',null,true); // semantic flag ==  true
+        var opts = {
+            semantic: true,
+            before: 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);
+                }
+            }
+        };
+
+        $('#form2').ajaxSubmit(opts);
+    });
+
+    // test json datatype
+    test("ajaxSubmit: dataType == json", function() {
+        stop();
+
+        var opts = {
+            url: 'json.txt',
+            dataType: 'json',
+            after: 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();
+            }
+        };
+
+        $('#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',
+            after: function(responseText, statusText) { // post-submit callback
+                ok( typeof formScriptTest == 'function', 'script evaluated');
+                ok( responseText.match('formScriptTest'), 'script returned');
+                start();
+            }
+        };
+
+        $('#form2').ajaxSubmit(opts);
+    });
+
+    // test xml datatype
+    test("ajaxSubmit: dataType == xml", function() {
+        stop();
+
+        var opts = {
+            url: 'test.xml',
+            dataType: 'xml',
+            after: function(responseXML, statusText) { // post-submit callback
+                ok( typeof responseXML == 'object', 'data type xml');
+                ok( $('test', responseXML).size() == 3, 'xml data query');
+                start();
+            }
+        };
+
+        $('#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 = {
+            after: function() { // post-submit callback
+                ok( true, 'post callback');
+                start();
+            }
+        };
+
+        $('#form5').ajaxSubmit(opts);
     });
 
     // test ajaxSubmit using pre-submit callback to cancel submit
-    test("ajaxSubmit5", function() {
-        $('#form3').ajaxSubmit('#targetDiv', function() { // post-callback
-            ok( false, "should not hit this post-callback");
-        },
-        function(a, jq) { // pre-callback
-            ok( true, 'pre-callback');
-            ok( a.constructor == Array, "type check");
-            ok( jq.jquery, "type check jQuery");
-            return false;  // return false to abort submit
-        });
+    test("ajaxSubmit: cancel submit", function() {
+
+        var opts = {
+            before: 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
+            },
+            after: function() { // post-submit callback
+                ok( false, "should not hit this post-submit callback");
+            }
+        };
+
+        $('#form3').ajaxSubmit(opts);
     });
 
     // test submitting a pseudo-form
-    test("ajaxSubmit6", function() {
-        stop();
-        $("#pseudo").ajaxSubmit('#targetDiv', function() { // post-callback
-            ok( true, 'post-callback');
-            start();
-        },
-        function(a, jq) { // pre-callback
-            ok( true, 'pre-callback');
-            ok( a.constructor == Array, "type check");
-            ok( jq.jquery, "type check jQuery");
-            ok( jq[0].tagName.toLowerCase() == 'div', "jQuery arg == 'div'");
-        },
-        'text.php', 'post');
+    test("ajaxSubmit: pseudo-form", function() {
+        stop();
+
+        var opts = {
+            before: 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'");
+            },
+            after: 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',
+            method: 'post'
+        };
+
+        $("#pseudo").ajaxSubmit(opts);
     });
 
     // test eval of json response
-    test("ajaxSubmit7", function() {
-        stop();
-        
-        $("#form2").ajaxSubmit(null, function(responseText) { // post-callback
-            ok( true, 'post-callback');
-            var data = eval.call(window, '('+responseText+')');
-            ok( data.name == 'jquery-test', 'evaled respone');
-            start();
-        },
-        null, 'json.php');
-    });
-
-    // test passing jQuery object as the target
-    test("ajaxSubmit8", function() {
-        stop();
-        var target = $('#targetDiv');
-        target.html("");
-        
-        $("#form2").ajaxSubmit(target, function(responseText) { // post-callback
-            ok( true, 'post-callback');
-            ok( $('#targetDiv').text().match("Lorem ipsum"), "targetDiv updated");
-            start();
-        });
-    });
-
-    // test passing DOM element as the target
-    test("ajaxSubmit9", function() {
-        stop();
-        var target = $('#targetDiv');
-        target.html("");
-        
-        $("#form2").ajaxSubmit(target[0], function(responseText) { // post-callback
-            ok( true, 'post-callback');
-            ok( $('#targetDiv').text().match("Lorem ipsum"), "targetDiv updated");
-            start();
-        });
+    test("ajaxSubmit: evaluate response", function() {
+        stop();
+
+        var opts = {
+            after: function(responseText) { // post-callback
+                ok( true, 'post-callback');
+                var data = eval.call(window, '('+responseText+')');
+                ok( data.name == 'jquery-test', 'evaled respone');
+                start();
+            },
+            url: 'json.txt'
+        };
+
+        $("#form2").ajaxSubmit(opts);
     });
 
     // test pre and post callbacks for ajaxForm
-    test("ajaxForm1", function() {
-        stop();
-        $("#form4").ajaxForm('#targetDiv', function() {
-            ok( true, 'post-callback');
-            start();
-        },
-        function(a, jq) {
-            ok( true, 'pre-callback');
-            ok( a.constructor == Array, "type check");
-            ok( jq.jquery, "type check jQuery");
-        });
-        $('#doSubmit')[0].click();
+    test("ajaxForm: pre and post callbacks", function() {
+        stop();
+
+        var opts = {
+            before: function(a, jq) { // pre-submit callback
+                ok( true, 'pre-submit callback');
+                ok( a.constructor == Array, "type check");
+                ok( jq.jquery, "type check jQuery");
+            },
+            after: function() { // post-submit callback
+                ok( true, 'post-submit callback');
+                start();
+            }
+        };
+
+        $("#form4").ajaxForm(opts);
+        $('#submitForm4')[0].click();  // trigger the submit button
     });
 
     // test that the value of the submit button is captured
-    test("ajaxForm2", function() {
-        $("#form4").ajaxForm(null, null, function(a, jq) {
-            ok( true, 'pre-callback');
-            ok( a.constructor == Array, "type check");
-            ok( jq.jquery, "type check jQuery");
-            ok( arrayValue(a, 'myName') != null, "submit button");
-        });
-        $('#mySubmit')[0].click();
-    });
-    
+    test("ajaxForm: capture submit element", function() {
+
+        var opts = {
+            before: 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");
+            }
+        };
+
+        $("#form4").ajaxForm(opts);
+        $('#submitForm4withName')[0].click();
+    });
+
     // test image submit support
-    test("ajaxForm3", function() {
-        $("#form4").ajaxForm('#targetDiv', null, 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");
-        });
-        $('#imageSubmit')[0].click();
+    test("ajaxForm: capture submit image coordinates", function() {
+
+        var opts = {
+            before: 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");
+            }
+        };
+
+        $("#form4").ajaxForm(opts);
+        $('#form4imageSubmit')[0].click();
     });
 
     // test that the targetDiv gets updated
-    test("ajaxForm4", function() {
-        $('#targetDiv').html("");
-        stop();
-        $("#form4").ajaxForm('#targetDiv', function() {
-            ok( true, 'post-callback');
-            ok( $('#targetDiv').text().match("Lorem ipsum"), "targetDiv updated");
-            start();
-        },
-        function(a, jq) {
-            ok( true, 'pre-callback');
-            ok( a.constructor == Array, "type check");
-            ok( jq.jquery, "type check jQuery");
-        });
-        $('#doSubmit')[0].click();
+    test("ajaxForm: update target div", function() {
+        $('#targetDiv').empty();
+        stop();
+
+        var opts = {
+            target: '#targetDiv',
+            before: function(a, jq) { // pre-callback
+                ok( true, 'pre-callback');
+                ok( a.constructor == Array, "type check");
+                ok( jq.jquery, "type check jQuery");
+            },
+            after: function() {
+                ok( true, 'post-callback');
+                ok( $('#targetDiv').text().match("Lorem ipsum"), "targetDiv updated");
+                start();
+            }
+        };
+
+        $("#form4").ajaxForm(opts);
+        $('#submitForm4')[0].click();
     });
 
 })});
 
-// helper method   
+// helper method
 function arrayCount(arr, key) {
     var count=0;
     for (var i=0; i < arr.length; i++) {
-        if (arr[i].name == key) 
+        if (arr[i].name == key)
             count++;
     }
@@ -259 +392 @@
 }
 
-// helper method   
+// helper method
 function arrayValue(arr, key) {
     for (var i=0; i < arr.length; i++) {
@@ -271 +404 @@
     <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="post"><div>
+        <form id="form1" action="text.php" method="get"><div>
                 <input type="hidden" name="Hidden" value="hiddenValue" />
                 <input name="Name" type="text" value="MyName1" />
@@ -326 +459 @@
 
         <!-- form2 -->
-        <form id="form2" action="text.php" method="post"><div>
+        <form id="form2" action="text.php" method="get"><div>
             <input    name="a" type="text" />
             <textarea name="b" rows="1" cols="1"></textarea>
@@ -337 +470 @@
 
         <!-- form3 -->
-        <form id="form3" action="text.php" method="get"><div>
+        <form id="form3" action="text.php" method="post"><div>
             <input name="a" type="text" />
         </div></form>
@@ -344 +477 @@
         <form id="form4" action="text.php" method="get"><div>
             <input name="a" type="text" />
-            <input type="submit" id="doSubmit" />
-            <input type="submit" id="mySubmit" name="myName" />
-            <input type="image"  id="imageSubmit" name="myImage" src="submit.gif" />
+            <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" id="submitForm4" />
+            <input type="submit" id="submitForm4withName" name="form4inputName" />
+            <input type="image"  id="form4imageSubmit" name="myImage" src="submit.gif" />
         </div></form>
 
@@ -363 +504 @@
         <div id="targetDiv"></div>
     </div>
-    
+
     <ol id="tests"></ol>
 </body>