mochikit_v14/tests/test_MochiKit-DOM.html

   1 <html>
   2 <head>
   3     <script type="text/javascript" src="../MochiKit/MockDOM.js"></script>
   4     <script type="text/javascript" src="../MochiKit/Base.js"></script>
   5     <script type="text/javascript" src="../MochiKit/Iter.js"></script>
   6     <script type="text/javascript" src="../MochiKit/DOM.js"></script>
   7     <script type="text/javascript" src="../MochiKit/Style.js"></script>
   8     <script type="text/javascript" src="SimpleTest/SimpleTest.js"></script>
   9     <link rel="stylesheet" type="text/css" href="SimpleTest/test.css">
  10 </head>
  11 <body>
  12
  13 <div style="display: none;">
  14     <form id="form_test">
  15         <select name="select">
  16             <option value="foo" selected="selected">foo</option>
  17             <option value="bar">bar</option>
  18             <option value="baz">baz</option>
  19         </select>
  20         <select name="selmultiple" multiple="multiple">
  21             <option value="bar" selected="selected">bar</option>
  22             <option value="baz" selected="selected">baz</option>
  23             <option value="foo">foo</option>
  24         </select>
  25         <input type="hidden" name="hidden" value="test" />
  26         <input type="radio" name="radio_off" value="1" />
  27         <input type="radio" name="radio_off" value="2" />
  28         <input type="radio" name="radio_off" value="3" />
  29         <input type="radio" name="radio_on" value="1" />
  30         <input type="radio" name="radio_on" value="2" checked="checked" />
  31         <input type="radio" name="radio_on" value="3" />
  32     </form>
  33     <form id="form_test2">
  34         <select name="selempty">
  35             <option value="" selected="selected">foo</option>
  36         </select>
  37         <select name="selempty2">
  38             <option selected="selected">foo</option>
  39         </select>
  40     </form>
  41     <div id="parentTwo" class="two">
  42         <div id="parentOne" class="one">
  43             <div id="parentZero" class="zero">
  44                 <span id="child">child</span>
  45             </div>
  46         </div>
  47     </div>
  48 </div>
  49
  50 <pre id="test">
  51 <script type="text/javascript">
  52 try {
  53
  54     lst = [];
  55     o = {"blah": function () { lst.push("original"); }};
  56     addToCallStack(o, "blah", function () { lst.push("new"); }, true);
  57     addToCallStack(o, "blah", function () { lst.push("stuff"); }, true);
  58     is( typeof(o.blah), 'function', 'addToCallStack has a function' );
  59     is( o.blah.callStack.length, 3, 'callStack length 3' );
  60     o.blah();
  61     is( lst.join(" "), "original new stuff", "callStack in correct order" );
  62     is( o.blah, null, "set to null" );
  63     lst = [];
  64     o = {"blah": function () { lst.push("original"); }};
  65     addToCallStack(o, "blah",
  66         function () { lst.push("new"); return false;}, false);
  67     addToCallStack(o, "blah", function () { lst.push("stuff"); }, false);
  68     o.blah();
  69     is( lst.join(" "), "original new", "callStack in correct order (abort)" );
  70     o.blah();
  71     is( lst.join(" "), "original new original new", "callStack in correct order (again)" );
  72
  73
  74     is( escapeHTML("<>\"&bar"), "&lt;&gt;&quot;&amp;bar", "escapeHTML" ); // for emacs highlighting: "
  75
  76     var isDOM = function (value, expected, message) {
  77         is( escapeHTML(toHTML(value)), escapeHTML(expected), message );
  78     };
  79
  80     var d = document.createElement('span');
  81     updateNodeAttributes(d, {"foo": "bar", "baz": "wibble"});
  82     isDOM( d, '<span baz="wibble" foo="bar"/>', "updateNodeAttributes" );
  83
  84     var d = document.createElement('span');
  85     appendChildNodes(d, 'word up', [document.createElement('span')]);
  86     isDOM( d, '<span>word up<span/></span>', 'appendChildNodes' );
  87
  88     replaceChildNodes(d, 'Think Different');
  89     isDOM( d, '<span>Think Different</span>', 'replaceChildNodes' );
  90
  91
  92     insertSiblingNodesBefore(d.childNodes[0], 'word up', document.createElement('span'));
  93     isDOM( d, '<span>word up<span/>Think Different</span>', 'insertSiblingNodesBefore' );
  94
  95     insertSiblingNodesAfter(d.childNodes[0], 'purple monkey', document.createElement('span'));
  96     isDOM( d, '<span>word uppurple monkey<span/><span/>Think Different</span>', 'insertSiblingNodesAfter' );
  97
  98     d = createDOM("span");
  99     isDOM( d, "<span/>", "createDOM empty" );
 100
 101
 102     d = createDOM("span", {"foo": "bar", "baz": "wibble"});
 103     isDOM( d, '<span baz="wibble" foo="bar"/>', "createDOM attributes" );
 104
 105     d = createDOM("span", {"foo": "bar", "baz": "wibble", "spam": "egg"}, "one", "two", "three");
 106     is( getNodeAttribute(d, 'foo'), "bar", "createDOM attribute" );
 107     is( getNodeAttribute(d, 'baz'), "wibble", "createDOM attribute" );
 108     removeNodeAttribute(d, "spam");
 109     is( scrapeText(d), "onetwothree", "createDOM contents" );
 110
 111     isDOM( d, '<span baz="wibble" foo="bar">onetwothree</span>', "createDOM contents" );
 112
 113     d = createDOM("span", null, function (f) {
 114             return this.nodeName.toLowerCase() + "hi" + f.nodeName.toLowerCase();});
 115     isDOM( d, '<span>spanhispan</span>', 'createDOM function call' );
 116
 117     d = createDOM("span", null, {msg: "hi", dom: function (f) {
 118             return f.nodeName.toLowerCase() + this.msg; }});
 119     isDOM( d, '<span>spanhi</span>', 'createDOM this.dom() call' );
 120
 121     d = createDOM("span", null, {msg: "hi", __dom__: function (f) {
 122             return f.nodeName.toLowerCase() + this.msg; }});
 123     isDOM( d, '<span>spanhi</span>', 'createDOM this.__dom__() call' );
 124
 125     d = createDOM("span", null, range(4));
 126     isDOM( d, '<span>0123</span>', 'createDOM iterable' );
 127
 128
 129     var d = {"taco": "pork"};
 130     registerDOMConverter("taco",
 131         function (o) { return !isUndefinedOrNull(o.taco); },
 132         function (o) { return "Goddamn, I like " + o.taco + " tacos"; }
 133     );
 134     d = createDOM("span", null, d);
 135     // not yet public API
 136     domConverters.unregister("taco");
 137
 138     isDOM( d, "<span>Goddamn, I like pork tacos</span>", "createDOM with custom converter" );
 139
 140     is(
 141         escapeHTML(toHTML(SPAN(null))),
 142         escapeHTML(toHTML(createDOM("span", null))),
 143         "createDOMFunc vs createDOM"
 144     );
 145
 146     is( scrapeText(d), "Goddamn, I like pork tacos", "scrape OK" );
 147     is( scrapeText(d, true).join(""), "Goddamn, I like pork tacos", "scrape Array OK" );
 148
 149     var st = DIV(null, STRONG(null, "d"), "oor ", STRONG(null, "f", SPAN(null, "r"), "a"), "me");
 150     is( scrapeText(st), "door frame", "scrape in-order" );
 151
 152
 153     ok( !isUndefinedOrNull(getElement("test")), "getElement might work" );
 154     ok( !isUndefinedOrNull($("test")), "$alias$$ CASH MONEY alias might work" );
 155
 156     d = createDOM("span", null, "one", "two");
 157     swapDOM(d.childNodes[0], document.createTextNode("uno"));
 158     isDOM( d, "<span>unotwo</span>", "swapDOM" );
 159
 160     is( scrapeText(d, true).join(" "), "uno two", "multi-node scrapeText" );
 161     /*
 162
 163         TODO:
 164             addLoadEvent (async test?)
 165
 166     */
 167
 168     d = createDOM("span", {"class": "foo"});
 169     setElementClass(d, "bar baz");
 170     ok( d.className == "bar baz", "setElementClass");
 171     toggleElementClass("bar", d);
 172     ok( d.className == "baz", "toggleElementClass: " + d.className);
 173     toggleElementClass("bar", d);
 174     ok( hasElementClass(d, "baz", "bar"),
 175         "toggleElementClass 2: " + d.className);
 176     addElementClass(d, "bar");
 177     ok( hasElementClass(d, "baz", "bar"),
 178         "toggleElementClass 3: " + d.className);
 179     ok( addElementClass(d, "blah"), "addElementClass return");
 180     ok( hasElementClass(d, "baz", "bar", "blah"), "addElementClass action");
 181     ok( !hasElementClass(d, "not"), "hasElementClass single");
 182     ok( !hasElementClass(d, "baz", "not"), "hasElementClass multiple");
 183     ok( removeElementClass(d, "blah"), "removeElementClass" );
 184     ok( !removeElementClass(d, "blah"), "removeElementClass again" );
 185     ok( !hasElementClass(d, "blah"), "removeElementClass again (hasElement)" );
 186     removeElementClass(d, "baz");
 187     ok( !swapElementClass(d, "blah", "baz"), "false swapElementClass" );
 188     ok( !hasElementClass(d, "baz"), "false swapElementClass from" );
 189     ok( !hasElementClass(d, "blah"), "false swapElementClass to" );
 190     addElementClass(d, "blah");
 191     ok( swapElementClass(d, "blah", "baz"), "swapElementClass" );
 192     ok( hasElementClass(d, "baz"), "swapElementClass has toClass" );
 193     ok( !hasElementClass(d, "blah"), "swapElementClass !has fromClass" );
 194     ok( !swapElementClass(d, "blah", "baz"), "swapElementClass twice" );
 195     ok( hasElementClass(d, "baz"), "swapElementClass has toClass" );
 196     ok( !hasElementClass(d, "blah"), "swapElementClass !has fromClass" );
 197
 198     TABLE;
 199     TBODY;
 200     TR;
 201     var t = TABLE(null,
 202         TBODY({"class": "foo bar", "id":"tbody0"},
 203             TR({"class": "foo", "id":"tr0"}),
 204             TR({"class": "bar", "id":"tr1"})
 205         )
 206     );
 207
 208     var matchElements = getElementsByTagAndClassName;
 209     is(
 210         map(itemgetter("id"), matchElements(null, "foo", t)).join(" "),
 211         "tbody0 tr0",
 212         "getElementsByTagAndClassName found all tags with foo class"
 213     );
 214     is(
 215         map(itemgetter("id"), matchElements("tr", "foo", t)).join(" "),
 216         "tr0",
 217         "getElementsByTagAndClassName found all tr tags with foo class"
 218     );
 219     is(
 220         map(itemgetter("id"), matchElements("tr", null, t)).join(" "),
 221         "tr0 tr1",
 222         "getElementsByTagAndClassName found all tr tags"
 223     );
 224
 225     var oldDoc = document;
 226     var doc = MochiKit.MockDOM.createDocument();
 227     is( currentDocument(), document, "currentDocument() correct" );
 228     withDocument(doc, function () {
 229         ok( document != doc, "global doc unchanged" );
 230         is( currentDocument(), doc, "currentDocument() correct" );
 231         var h1 = H1();
 232         var span = SPAN(null, "foo", h1);
 233         appendChildNodes(currentDocument().body, span);
 234     });
 235     is( document, oldDoc, "doc restored" );
 236     is( doc.childNodes.length, 1, "doc has one child" );
 237     is( doc.body.childNodes.length, 1, "body has one child" );
 238     var sp = doc.body.childNodes[0];
 239     is( sp.nodeName, "SPAN", "only child is SPAN" );
 240     is( sp.childNodes.length, 2, "SPAN has two childNodes" );
 241     is( sp.childNodes[0].nodeValue, "foo", "first node is text" );
 242     is( sp.childNodes[1].nodeName, "H1", "second child is H1" );
 243
 244     is( currentDocument(), document, "currentDocument() correct" );
 245     try {
 246         withDocument(doc, function () {
 247             ok( document != doc, "global doc unchanged" );
 248             is( currentDocument(), doc, "currentDocument() correct" );
 249             throw new Error("foo");
 250         });
 251         ok( false, "didn't throw" );
 252     } catch (e) {
 253         ok( true, "threw" );
 254     }
 255
 256     var mockWindow = {"foo": "bar"};
 257     is (currentWindow(), window, "currentWindow ok");
 258     withWindow(mockWindow, function () {
 259         is(currentWindow(), mockWindow, "withWindow ok");
 260     });
 261     is (currentWindow(), window, "currentWindow ok");
 262
 263     doc = MochiKit.MockDOM.createDocument();
 264     var frm;
 265     withDocument(doc, function () {
 266         frm = FORM({name: "ignore"},
 267             INPUT({name:"foo", value:"bar"}),
 268             INPUT({name:"foo", value:"bar"}),
 269             INPUT({name:"baz", value:"bar"})
 270         );
 271     });
 272     var kv = formContents(frm);
 273     is( kv[0].join(","), "foo,foo,baz", "mock formContents names" );
 274     is( kv[1].join(","), "bar,bar,bar", "mock formContents values" );
 275     is( queryString(frm), "foo=bar&foo=bar&baz=bar", "mock queryString hook" );
 276
 277     var kv = formContents("form_test");
 278     is( kv[0].join(","), "select,selmultiple,selmultiple,hidden,radio_on", "formContents names" );
 279     is( kv[1].join(","), "foo,bar,baz,test,2", "formContents values" );
 280     is( queryString("form_test"), "select=foo&selmultiple=bar&selmultiple=baz&hidden=test&radio_on=2", "queryString hook" );
 281     kv = formContents("form_test2");
 282     is( kv[0].join(","), "selempty,selempty2", "formContents names empty option values" );
 283     is( kv[1].join(","), ",foo", "formContents empty option values" );
 284     is( queryString("form_test2"), "selempty=&selempty2=foo", "queryString empty option values" );
 285
 286     var d = DIV(null, SPAN(), " \n\t", SPAN(), "foo", SPAN(), " ");
 287     is( d.childNodes.length, 6, "removeEmptyNodes test conditions correct" );
 288     removeEmptyTextNodes(d);
 289     is( d.childNodes.length, 4, "removeEmptyNodes" );
 290
 291     is( getFirstParentByTagAndClassName('child', 'div', 'two'), getElement("parentTwo"), "getFirstParentByTagAndClassName found parent" );
 292     is( getFirstParentByTagAndClassName('child', 'div'), getElement("parentZero"), "getFirstParentByTagAndClassName found parent (any class)" );
 293     is( getFirstParentByTagAndClassName('child', '*', 'two'), getElement("parentTwo"), "getFirstParentByTagAndClassName found parent (any tag)" );
 294
 295     ok( true, "test suite finished!");
 296
 297
 298 } catch (err) {
 299
 300     var s = "test suite failure!\n";
 301     var o = {};
 302     var k = null;
 303     for (k in err) {
 304         // ensure unique keys?!
 305         if (!o[k]) {
 306             s +=  k + ": " + err[k] + "\n";
 307             o[k] = err[k];
 308         }
 309     }
 310     ok ( false, s );
 311
 312 }
 313 </script>
 314 </pre>
 315 </body>
 316 </html>