Specs/Element/Element.js

   1 /*
   2 Script: Element.js
   3         Specs for Element.js
   4
   5 License:
   6         MIT-style license.
   7 */
   8
   9 describe('Element constructor', {
  10
  11         "should return an 'element' Element": function(){
  12                 var type = $type(new Element('div'));
  13                 value_of(type).should_be('element');
  14         },
  15
  16         'should return an Element with the correct tag': function(){
  17                 var myElement = new Element('div');
  18                 value_of(myElement.tagName.toLowerCase()).should_be('div');
  19         },
  20
  21         'should return an Element with for attribute': function(){
  22                 var label = new Element('label', { 'for': 'myId' });
  23                 value_of(label.htmlFor).should_be('myId');
  24         },
  25
  26         'should return an Element with all class attributes': function(){
  27                 var div1 = new Element('div', { 'class': 'myClass' });
  28                 value_of(div1.className).should_be('myClass');
  29
  30                 var div2 = new Element('div', { 'class': 'myClass myOtherClass' });
  31                 value_of(div2.className).should_be('myClass myOtherClass');
  32         },
  33
  34         'should return an Element with various attributes': function(){
  35                 var element1 = new Element('div', { 'id': 'myDiv', 'title': 'myDiv' });
  36                 value_of(element1.id).should_be('myDiv');
  37                 value_of(element1.title).should_be('myDiv');
  38         },
  39
  40         'should return Element inputs with and type attributes': function(){
  41                 var username = new Element('input', { type: 'text', name: 'username', value: 'username' });
  42                 value_of(username.type).should_be('text');
  43                 value_of(username.name).should_be('username');
  44                 value_of(username.value).should_be('username');
  45
  46                 var password = new Element('input', { type: 'password', name: 'password', value: 'password' });
  47                 value_of(password.type).should_be('password');
  48                 value_of(password.name).should_be('password');
  49                 value_of(password.value).should_be('password');
  50         },
  51
  52         'should return an Element with Element prototypes': function(){
  53                 var div = new Element('div');
  54                 value_of($defined(div.addEvent)).should_be_true();
  55         }
  56
  57 });
  58
  59 describe('TextNode.constructor', {
  60
  61         'should return a new textnode element': function(){
  62                 var text = document.newTextNode('yo');
  63                 value_of($type(text)).should_be('textnode');
  64         }
  65
  66 });
  67
  68 describe('IFrame constructor', {
  69
  70         'should return a new iframe': function(){
  71                 var diframe = document.createElement('iframe');
  72                 var miframe = new IFrame();
  73                 value_of(miframe.tagName).should_be(diframe.tagName);
  74         },
  75
  76         'should return the same iframe if passed': function(){
  77                 var diframe = document.createElement('iframe');
  78                 var miframe = new IFrame(diframe);
  79                 value_of(miframe).should_be(diframe);
  80         },
  81
  82         'should call onload once the iframe loads': function(){
  83
  84         },
  85
  86         "should extend the iframe's window and document with the same domain": function(){
  87
  88         }
  89
  90 });
  91
  92 var myElements = new Elements([
  93         new Element('div'),
  94         document.createElement('a'),
  95         new Element('div', {id: 'el-' + $time()})
  96 ]);
  97
  98 describe('Elements constructor', {
  99
 100         'should return an array type': function(){
 101                 value_of(Array.type(myElements)).should_be_true();
 102         },
 103
 104         'should return an array of Elements': function(){
 105                 value_of(myElements.every(Element.type)).should_be_true();
 106         },
 107
 108         'should apply Element prototypes to the returned array': function(){
 109                 value_of($defined(myElements.addEvent)).should_be_true();
 110         }
 111
 112 });
 113
 114 describe('Elements.filter', {
 115
 116         'should return all Elements that match the string matcher': function(){
 117                 value_of(myElements.filter('div')).should_be([myElements[0], myElements[2]]);
 118         },
 119
 120         'should return all Elements that match the comparator': function(){
 121                 var elements = myElements.filter(function(element){
 122                         return element.match('a');
 123                 });
 124                 value_of(elements).should_be([myElements[1]]);
 125         }
 126
 127 });
 128
 129 describe('$', {
 130
 131         'before all': function(){
 132                 Container = document.createElement('div');
 133                 Container.innerHTML = '<div id="dollar"></div>';
 134                 document.body.appendChild(Container);
 135         },
 136
 137         'after all': function(){
 138                 document.body.removeChild(Container);
 139                 Container = null;
 140         },
 141
 142         'should return the element by the string id': function(){
 143                 var dt = document.getElementById('dollar');
 144                 value_of($('dollar')).should_be(dt);
 145         },
 146
 147         'should return an extended element': function(){
 148                 var defined = $defined($('dollar').clone);
 149                 value_of(defined).should_be_true();
 150         },
 151
 152         'should return the window element if passed': function(){
 153                 value_of($(window)).should_be(window);
 154         },
 155
 156         'should return the document element if passed': function(){
 157                 value_of($(document)).should_be(document);
 158         },
 159
 160         'should return null if string not found or type mismatch': function(){
 161                 value_of($(1)).should_be_null();
 162                 value_of($('nonexistant')).should_be_null();
 163         }
 164
 165 });
 166
 167 describe('$$', {
 168
 169         'should return all Elements of a specific tag': function(){
 170                 var divs1 = $$('div');
 171                 var divs2 = Array.flatten(document.getElementsByTagName('div'));
 172                 value_of(divs1).should_be(divs2);
 173         },
 174
 175         'should return multiple Elements for each specific tag': function(){
 176                 var headers = $$('h3', 'h4');
 177                 var headers2 = Array.flatten([document.getElementsByTagName('h3'), document.getElementsByTagName('h4')]);
 178                 value_of(headers).should_be(headers2);
 179         },
 180
 181         'should return an empty array if not is found': function(){
 182                 value_of($$('not_found')).should_be([]);
 183         }
 184
 185 });
 186
 187 describe('Native:getDocument', {
 188
 189         'should return the owner document for elements': function(){
 190                 var doc = document.newElement('div').getDocument();
 191                 value_of(doc).should_be(document);
 192         },
 193
 194         'should return the owned document for window': function(){
 195                 var doc = window.getDocument();
 196                 value_of(doc).should_be(document);
 197         },
 198
 199         'should return self for document': function(){
 200                 var doc = document.getDocument();
 201                 value_of(doc).should_be(document);
 202         }
 203
 204 });
 205
 206 describe('Native:getWindow', {
 207
 208         'should return the owner window for elements': function(){
 209                 var win = document.newElement('div').getWindow();
 210                 value_of(win).should_be(window);
 211         },
 212
 213         'should return the owner window for document': function(){
 214                 var win = document.getWindow();
 215                 value_of(win).should_be(window);
 216         },
 217
 218         'should return self for window': function(){
 219                 var win = window.getWindow();
 220                 value_of(win).should_be(window);
 221         }
 222
 223 });
 224
 225 describe('Element.getElement', {
 226
 227         'before all': function(){
 228                 Container = new Element('div');
 229                 Container.innerHTML = '<div id="first"></div><div id="second"></div><p></p><a></a>';
 230         },
 231
 232         'after all': function(){
 233                 Container = null;
 234         },
 235
 236         'should return the first Element to match the tag, otherwise null': function(){
 237                 var child = Container.getElement('div');
 238                 value_of(child.id).should_be('first');
 239                 value_of(Container.getElement('iframe')).should_be_null();
 240         }
 241
 242 });
 243
 244 describe('Element.getElements', {
 245
 246         'before all': function(){
 247                 Container = new Element('div');
 248                 Container.innerHTML = '<div id="first"></div><div id="second"></div><p></p><a></a>';
 249         },
 250
 251         'after all': function(){
 252                 Container = null;
 253         },
 254
 255         'should return all the elements that match the tag': function(){
 256                 var children = Container.getElements('div');
 257                 value_of(children).should_have(2, 'items');
 258         },
 259
 260         'should return all the elements that match the tags': function(){
 261                 var children = Container.getElements('div,a');
 262                 value_of(children).should_have(3, 'items');
 263                 value_of(children[2].tagName.toLowerCase()).should_be('a');
 264         }
 265
 266 });
 267
 268 describe('Document.getElement', {
 269
 270         'should return the first Element to match the tag, otherwise null': function(){
 271                 var div = document.getElement('div');
 272                 var ndiv = document.getElementsByTagName('div')[0];
 273                 value_of(div).should_be(ndiv);
 274
 275                 var notfound = document.getElement('canvas');
 276                 value_of(notfound).should_be_null();
 277         }
 278
 279 });
 280
 281 describe('Document.getElements', {
 282
 283         'should return all the elements that match the tag': function(){
 284                 var divs = document.getElements('div');
 285                 var ndivs = $A(document.getElementsByTagName('div'));
 286                 value_of(divs).should_be(ndivs);
 287         },
 288
 289         'should return all the elements that match the tags': function(){
 290                 var headers = document.getElements('h3,h4');
 291                 var headers2 = Array.flatten([document.getElementsByTagName('h3'), document.getElementsByTagName('h4')]);
 292                 value_of(headers.length).should_be(headers2.length);
 293         }
 294
 295 });
 296
 297 describe('Element.getElementById', {
 298
 299         'before all': function(){
 300                 Container = new Element('div');
 301                 Container.innerHTML = '<div id="first"></div><div id="second"></div><p></p><a></a>';
 302                 document.body.appendChild(Container);
 303         },
 304
 305         'after all': function(){
 306                 document.body.removeChild(Container);
 307                 Container = null;
 308         },
 309
 310         'should `getElementById` that matches the id, otherwise null': function(){
 311                 value_of(Container.getElementById('first')).should_be(Container.childNodes[0]);
 312                 value_of(Container.getElementById('not_found')).should_be_null();
 313         }
 314
 315 });
 316
 317 describe('Element.set `style`', {
 318
 319         'should set the cssText of an Element': function(){
 320                 var style = 'font-size:12px;line-height:23px;';
 321                 var myElement = new Element('div').set('style', style);
 322                 value_of(myElement.style.lineHeight).should_be('23px');
 323                 value_of(myElement.style.fontSize).should_be('12px');
 324         }
 325
 326 });
 327
 328 describe('Element.set `html`', {
 329
 330         'should set the innerHTML of an Element': function(){
 331                 var html = '<a href="http://mootools.net/">Link</a>';
 332                 var parent = new Element('div').set('html', html);
 333                 value_of(parent.innerHTML.toLowerCase()).should_be(html.toLowerCase()); // ignore uppercase tags in presto
 334         },
 335
 336         'should set the innerHTML of an Element with multiple arguments': function(){
 337                 var html = ['<p>Paragraph</p>', '<a href="http://mootools.net/">Link</a>'];
 338                 var parent = new Element('div').set('html', html);
 339                 value_of(parent.innerHTML.toLowerCase()).should_be(html.join('').toLowerCase()); // ignore uppercase tags in presto
 340         }
 341
 342 });
 343
 344 describe('Element.set', {
 345
 346         "should `set` an Element's property": function(){
 347                 var myElement = new Element('a').set('id', 'test').set('title', 'testing');
 348                 value_of(myElement.id).should_be('test');
 349                 value_of(myElement.title).should_be('testing');
 350         },
 351
 352         "should `set` an Element's properties": function(){
 353                 var myElement = new Element('script').set({ type: 'text/javascript', defer: 'defer' });
 354                 value_of(myElement.type).should_be('text/javascript');
 355                 value_of(myElement.defer).should_be_true();
 356         }
 357
 358 });
 359
 360 describe('Element.get `style`', {
 361
 362         "should return a CSS string representing the Element's styles": function(){
 363                 var style = 'font-size:12px;color:rgb(255,255,255)';
 364                 var myElement = new Element('div').set('style', style);
 365                 value_of(myElement.get('style').toLowerCase().replace(/\s/g, '').replace(/;$/, '')).should_be(style);
 366                 //I'm replacing these characters (space and the last semicolon) as they are not vital to the style, and browsers sometimes include them, sometimes not.
 367         }
 368
 369 });
 370
 371 describe('Element.get `tag`', {
 372
 373         "should return the Element's tag": function(){
 374                 var myElement = new Element('div');
 375                 value_of(myElement.get('tag')).should_be('div');
 376         }
 377
 378 });
 379
 380 describe('Element.get', {
 381
 382         "should `get` an Element's property, otherwise null": function(){
 383                 var myElement = new Element('a', {href: 'http://mootools.net/', title: 'mootools!'});
 384                 value_of(myElement.get('href')).should_be('http://mootools.net/');
 385                 value_of(myElement.get('title')).should_be('mootools!');
 386                 value_of(myElement.get('rel')).should_be_null();
 387         }
 388
 389 });
 390
 391 describe('Element.erase `style`', {
 392
 393         "should remove all of the Element's styles": function(){
 394                 var style = "color:rgb(255, 255, 255); font-size:12px;";
 395                 var myElement = new Element('div', {style: style});
 396
 397                 myElement.erase('style');
 398
 399                 value_of(myElement.get('style')).should_not_be(style);
 400                 value_of(myElement.get('style')).should_be('');
 401         }
 402
 403 });
 404
 405 describe('Element.erase', {
 406
 407         "should erase an Element's property": function(){
 408                 var myElement = new Element('a', {href: 'http://mootools.net/', title: 'mootools!'});
 409                 myElement.erase('title');
 410                 value_of(myElement.get('title')).should_not_be('mootools!');
 411                 value_of(myElement.get('title')).should_be_null();
 412         }
 413
 414 });
 415
 416 describe('Element.match', {
 417
 418         'before all': function(){
 419                 Container = new Element('div');
 420                 Container.innerHTML = '<div id="first"></div><div id="second"></div><p></p><a></a>';
 421         },
 422
 423         'after all': function(){
 424                 Container.set('html', '');
 425                 Container = null;
 426         },
 427
 428         'should return true if tag is not provided': function(){
 429                 value_of(Container.match()).should_be_true();
 430         },
 431
 432         "should return true if the Element's tag matches, otherwise false": function(){
 433                 value_of(Container.match('div')).should_be_true();
 434                 value_of(Container.match('canvas')).should_be_false();
 435         }
 436
 437 });
 438
 439 describe('Element.inject', {
 440
 441         'before all': function(){
 442                 var html = [
 443                         '<div id="first"></div>',
 444                         '<div id="second">',
 445                                 '<div id="first-child"></div>',
 446                                 '<div id="second-child"></div>',
 447                         '</div>'
 448                 ].join('');
 449                 Container = new Element('div', {style: 'position:absolute;top:0;left:0;visibility:hidden;', html: html});
 450                 document.body.appendChild(Container);
 451
 452                 test = new Element('div', {id:'inject-test'});
 453         },
 454
 455         'after all': function(){
 456                 document.body.removeChild(Container);
 457                 Container.set('html', '');
 458                 Container = null;
 459                 test = null;
 460         },
 461
 462         'should `inject` the Element before an Element': function(){
 463                 test.inject($('first'), 'before');
 464                 value_of(Container.childNodes[0]).should_be(test);
 465
 466                 test.inject($('second-child'), 'before');
 467                 value_of(Container.childNodes[1].childNodes[1]).should_be(test);
 468         },
 469
 470         'should `inject` the Element after an Element': function(){
 471                 test.inject($('first'), 'after');
 472                 value_of(Container.childNodes[1]).should_be(test);
 473
 474                 test.inject($('first-child'), 'after');
 475                 value_of(Container.childNodes[1].childNodes[1]).should_be(test);
 476         },
 477
 478         'should `inject` the Element at bottom of an Element': function(){
 479                 var first = $('first');
 480                 test.inject(first, 'bottom');
 481                 value_of(first.childNodes[0]).should_be(test);
 482
 483                 var second = $('second');
 484                 test.inject(second, 'bottom');
 485                 value_of(second.childNodes[2]).should_be(test);
 486
 487                 test.inject(Container, 'bottom');
 488                 value_of(Container.childNodes[2]).should_be(test);
 489         },
 490
 491         'should `inject` the Element inside an Element': function(){
 492                 var first = $('first');
 493                 test.inject(first, 'inside');
 494                 value_of(first.childNodes[0]).should_be(test);
 495
 496                 var second = $('second');
 497                 test.inject(second, 'inside');
 498                 value_of(second.childNodes[2]).should_be(test);
 499
 500                 test.inject(Container, 'inside');
 501                 value_of(Container.childNodes[2]).should_be(test);
 502         },
 503
 504         'should `inject` the Element at the top of an Element': function(){
 505                 test.inject(Container, 'top');
 506                 value_of(Container.childNodes[0]).should_be(test);
 507
 508                 var second = $('second');
 509                 test.inject(second, 'top');
 510                 value_of(second.childNodes[0]).should_be(test);
 511         },
 512
 513         'should inject the Element in an Element': function(){
 514                 var first = $('first');
 515                 test.inject(first);
 516                 value_of(first.childNodes[0]).should_be(test);
 517
 518                 var second = $('second');
 519                 test.inject(second);
 520                 value_of(second.childNodes[2]).should_be(test);
 521
 522                 test.inject(Container);
 523                 value_of(Container.childNodes[2]).should_be(test);
 524         }
 525
 526 });
 527
 528 describe('Element.replaces', {
 529
 530         'should replace an Element with the Element': function(){
 531                 var parent = new Element('div');
 532                 var div = new Element('div', {id: 'original'}).inject(parent);
 533                 var el = new Element('div', {id: 'replaced'});
 534                 el.replaces(div);
 535                 value_of(parent.childNodes[0]).should_be(el);
 536         }
 537
 538 });
 539
 540 describe('Element.grab', {
 541
 542         'before all': function(){
 543                 var html = [
 544                         '<div id="first"></div>',
 545                         '<div id="second">',
 546                                 '<div id="first-child"></div>',
 547                                 '<div id="second-child"></div>',
 548                         '</div>'
 549                 ].join('');
 550                 Container = new Element('div', {style: 'position:absolute;top:0;left:0;visibility:hidden;', html: html}).inject(document.body);
 551
 552                 test = new Element('div', {id:'grab-test'});
 553         },
 554
 555         'after all': function(){
 556                 document.body.removeChild(Container);
 557                 Container.set('html', '');
 558                 Container = null;
 559                 test = null;
 560         },
 561
 562         'should `grab` the Element before this Element': function(){
 563                 $('first').grab(test, 'before');
 564                 value_of(Container.childNodes[0]).should_be(test);
 565
 566                 $('second-child').grab(test, 'before');
 567                 value_of(Container.childNodes[1].childNodes[1]).should_be(test);
 568         },
 569
 570         'should `grab` the Element after this Element': function(){
 571                 $('first').grab(test, 'after');
 572                 value_of(Container.childNodes[1]).should_be(test);
 573
 574                 $('first-child').grab(test, 'after');
 575                 value_of(Container.childNodes[1].childNodes[1]).should_be(test);
 576         },
 577
 578         'should `grab` the Element at the bottom of this Element': function(){
 579                 var first = $('first');
 580                 first.grab(test, 'bottom');
 581                 value_of(first.childNodes[0]).should_be(test);
 582
 583                 var second = $('second');
 584                 second.grab(test, 'bottom');
 585                 value_of(second.childNodes[2]).should_be(test);
 586
 587                 Container.grab(test, 'bottom');
 588                 value_of(Container.childNodes[2]).should_be(test);
 589         },
 590
 591         'should `grab` the Element inside this Element': function(){
 592                 var first = $('first');
 593                 first.grab(test, 'inside');
 594                 value_of(first.childNodes[0]).should_be(test);
 595
 596                 var second = $('second');
 597                 second.grab(test, 'inside');
 598                 value_of(second.childNodes[2]).should_be(test);
 599
 600                 Container.grab(test, 'inside');
 601                 value_of(Container.childNodes[2]).should_be(test);
 602         },
 603
 604         'should `grab` the Element at the top of this Element': function(){
 605                 Container.grab(test, 'top');
 606                 value_of(Container.childNodes[0]).should_be(test);
 607
 608                 var second = $('second');
 609                 second.grab(test, 'top');
 610                 value_of(second.childNodes[0]).should_be(test);
 611         },
 612
 613         'should grab an Element in the Element': function(){
 614                 var first = $('first').grab(test);
 615                 value_of(first.childNodes[0]).should_be(test);
 616
 617                 var second = $('second').grab(test);
 618                 value_of(second.childNodes[2]).should_be(test);
 619
 620                 Container.grab(test);
 621                 value_of(Container.childNodes[2]).should_be(test);
 622         }
 623
 624 });
 625
 626 describe('Element.wraps', {
 627
 628         'should replace and adopt the Element': function(){
 629                 var div = new Element('div');
 630                 var child = new Element('p').inject(div);
 631
 632                 var wrapper = new Element('div', {id: 'wrapper'}).wraps(div.childNodes[0]);
 633                 value_of(div.childNodes[0]).should_be(wrapper);
 634                 value_of(wrapper.childNodes[0]).should_be(child);
 635         }
 636
 637 });
 638
 639 describe('Element.appendText', {
 640
 641         'before all': function(){
 642                 Container = new Element('div', {style: 'position:absolute;top:0;left:0;visibility:hidden;'}).inject(document.body);
 643         },
 644
 645         'before each': function(){
 646                 var html = [
 647                         '<div id="first"></div>',
 648                         '<div id="second">',
 649                                 '<div id="first-child"></div>',
 650                                 '<div id="second-child"></div>',
 651                         '</div>'
 652                 ].join('');
 653                 Container.set('html', html);
 654         },
 655
 656         'after all': function(){
 657                 document.body.removeChild(Container);
 658                 Container.set('html', '');
 659                 Container = null;
 660                 test = null;
 661         },
 662
 663         'should append a TextNode before this Element': function(){
 664                 $('first').appendText('test', 'before');
 665                 value_of(Container.childNodes[0].nodeValue).should_be('test');
 666
 667                 $('second-child').appendText('test', 'before');
 668                 value_of(Container.childNodes[2].childNodes[1].nodeValue).should_be('test');
 669         },
 670
 671         'should append a TextNode the Element after this Element': function(){
 672                 $('first').appendText('test', 'after');
 673                 value_of(Container.childNodes[1].nodeValue).should_be('test');
 674
 675                 $('first-child').appendText('test', 'after');
 676                 value_of(Container.childNodes[2].childNodes[1].nodeValue).should_be('test');
 677         },
 678
 679         'should append a TextNode the Element at the bottom of this Element': function(){
 680                 var first = $('first');
 681                 first.appendText('test', 'bottom');
 682                 value_of(first.childNodes[0].nodeValue).should_be('test');
 683
 684                 var second = $('second');
 685                 second.appendText('test', 'bottom');
 686                 value_of(second.childNodes[2].nodeValue).should_be('test');
 687
 688                 Container.appendText('test', 'bottom');
 689                 value_of(Container.childNodes[2].nodeValue).should_be('test');
 690         },
 691
 692         'should append a TextNode the Element inside this Element': function(){
 693                 var first = $('first');
 694                 first.appendText('test', 'inside');
 695                 value_of(first.childNodes[0].nodeValue).should_be('test');
 696
 697                 var second = $('second');
 698                 second.appendText('test', 'inside');
 699                 value_of(second.childNodes[2].nodeValue).should_be('test');
 700
 701                 Container.appendText('test', 'inside');
 702                 value_of(Container.childNodes[2].nodeValue).should_be('test');
 703         },
 704
 705         'should append a TextNode the Element at the top of this Element': function(){
 706                 Container.appendText('test', 'top');
 707                 value_of(Container.childNodes[0].nodeValue).should_be('test');
 708
 709                 var second = $('second');
 710                 second.appendText('test', 'top');
 711                 value_of(second.childNodes[0].nodeValue).should_be('test');
 712         },
 713
 714         'should append a TextNode an Element in the Element': function(){
 715                 var first = $('first').appendText('test');
 716                 value_of(first.childNodes[0].nodeValue).should_be('test');
 717
 718                 var second = $('second').appendText('test');
 719                 value_of(second.childNodes[2].nodeValue).should_be('test');
 720
 721                 Container.appendText('test');
 722                 value_of(Container.childNodes[2].nodeValue).should_be('test');
 723         }
 724
 725 });
 726
 727 describe('Element.adopt', {
 728
 729         'before all': function(){
 730                 Container = new Element('div').inject(document.body);
 731         },
 732
 733         'after all': function(){
 734                 document.body.removeChild(Container);
 735                 Container.set('html', '');
 736                 Container = null;
 737         },
 738
 739         'before each': function(){
 740                 Container.empty();
 741         },
 742
 743         'should `adopt` an Element by its id': function(){
 744                 var child = new Element('div', {id: 'adopt-me'});
 745                 document.body.appendChild(child);
 746                 Container.adopt('adopt-me');
 747                 value_of(Container.childNodes[0]).should_be(child);
 748         },
 749
 750         'should `adopt` an Element': function(){
 751                 var child = new Element('p');
 752                 Container.adopt(child);
 753                 value_of(Container.childNodes[0]).should_be(child);
 754         },
 755
 756         'should `adopt` any number of Elements or ids': function(){
 757                 var children = [];
 758                 (4).times(function(i){ children[i] = new Element('span', {id: 'child-' + i}); });
 759                 Container.adopt(children);
 760                 value_of(Container.childNodes).should_have(4, 'items');
 761                 value_of(Container.childNodes[3]).should_be(children[3]);
 762         }
 763
 764 });
 765
 766 describe('Element.dispose | Element.remove', {
 767
 768         'before all': function(){
 769                 Container = new Element('div').inject(document.body);
 770         },
 771
 772         'after all': function(){
 773                 document.body.removeChild(Container);
 774                 Container.set('html', '');
 775                 Container = null;
 776         },
 777
 778         'should `dispose` the Element from the DOM': function(){
 779                 var child = new Element('div').inject(Container);
 780                 child.dispose();
 781                 value_of(Container.childNodes.length).should_be(0);
 782         }
 783
 784 });
 785
 786 describe('Element.clone', {
 787
 788         'should return a clone': function(){
 789                 var div = new Element('div');
 790                 var clone = div.clone();
 791                 value_of(div).should_not_be(clone);
 792         },
 793
 794         'should remove all IDs': function(){
 795                 var div = new Element('div', {id: 'div-id'});
 796                 var clone = div.clone();
 797                 value_of(clone.id).should_be('');
 798         },
 799
 800         'should remove all custom attributes': function(){
 801                 var div = new Element('div', {custom: ['attribute']});
 802                 var clone  = div.clone();
 803                 var custom = clone.custom;
 804                 value_of(custom).should_be_undefined();
 805         }
 806
 807 });
 808
 809 describe('Element.hasClass', {
 810
 811         'should return true if the Element has the given class, otherwise false': function(){
 812                 var div = new Element('div', {'class': 'header bold'});
 813                 value_of(div.hasClass('header')).should_be_true();
 814                 value_of(div.hasClass('bold')).should_be_true();
 815                 value_of(div.hasClass('random')).should_be_false();
 816         }
 817
 818 });
 819
 820 describe('Element.addClass', {
 821
 822         'should add the class to the Element': function(){
 823                 var div = new Element('div');
 824                 div.addClass('myclass');
 825                 value_of(div.hasClass('myclass')).should_be_true();
 826         },
 827
 828         'should append classes to the Element': function(){
 829                 var div = new Element('div', {'class': 'myclass'});
 830                 div.addClass('aclass');
 831                 value_of(div.hasClass('aclass')).should_be_true();
 832         }
 833
 834 });
 835
 836 describe('Element.removeClass', {
 837
 838         'should remove the class in the Element': function(){
 839                 var div = new Element('div', {'class': 'myclass'});
 840                 div.removeClass('myclass');
 841                 value_of(div.hasClass('myclass')).should_be_false();
 842         },
 843
 844         'should only remove the specific class': function(){
 845                 var div = new Element('div', {'class': 'myclass aclass'});
 846                 div.removeClass('myclass');
 847                 value_of(div.hasClass('myclass')).should_be_false();
 848         },
 849
 850         'should not remove any class if the class is not found': function(){
 851                 var div = new Element('div', {'class': 'myclass'});
 852                 div.removeClass('extra');
 853                 value_of(div.hasClass('myclass')).should_be_true();
 854         }
 855
 856 });
 857
 858 describe('Element.toggleClass', {
 859
 860         'should add the class if the Element does not have the class': function(){
 861                 var div = new Element('div');
 862                 div.toggleClass('myclass');
 863                 value_of(div.hasClass('myclass')).should_be_true();
 864         },
 865
 866         'should remove the class if the Element does have the class': function(){
 867                 var div = new Element('div', {'class': 'myclass'});
 868                 div.toggleClass('myclass');
 869                 value_of(div.hasClass('myclass')).should_be_false();
 870         }
 871
 872 });
 873
 874 describe('Element.empty', {
 875
 876         'should remove all children': function(){
 877                 var children = [];
 878                 (5).times(function(i){ children[i] = new Element('p'); });
 879                 var div = new Element('div').adopt(children);
 880                 div.empty();
 881                 value_of(div.get('html')).should_be('');
 882         }
 883
 884 });
 885
 886 describe('Element.destroy', {
 887
 888         'should obliterate the Element from the universe': function(){
 889                 var div = new Element('div', {id: 'destroy-test'}).inject(document.body);
 890                 var result = div.destroy();
 891                 value_of(result).should_be_null();
 892                 value_of($('destroy-test')).should_be_null();
 893         }
 894
 895 });
 896
 897 describe('Element.toQueryString', {
 898
 899         'should return an empty string for an Element that does not have form Elements': function(){
 900                 var div = new Element('div');
 901                 value_of(div.toQueryString()).should_be('');
 902         },
 903
 904         'should ignore any form Elements that do not have a name, disabled, or whose value is false': function(){
 905                 var form = new Element('form').adopt(
 906                         new Element('input', {name: 'input', disabled: true, type: 'checkbox', checked: true, value: 'checked'}),
 907                         new Element('select').adopt(
 908                                 new Element('option', {name: 'volvo', value: false, html: 'Volvo'}),
 909                                 new Element('option', {value: 'saab', html: 'Saab', selected: true})
 910                         ),
 911                         new Element('textarea', {name: 'textarea', disabled: true, value: 'textarea-value'})
 912                 );
 913                 value_of(form.toQueryString()).should_be('');
 914         },
 915
 916         "should return a query string from the Element's form Elements": function(){
 917                 var form = new Element('form').adopt(
 918                         new Element('input', {name: 'input', type: 'checkbox', checked: true, value: 'checked'}),
 919                         new Element('select', {name: 'select[]', multiple: true}).adopt(
 920                                 new Element('option', {name: 'volvo', value: 'volvo', html: 'Volvo'}),
 921                                 new Element('option', {name: 'saab', value: 'saab', html: 'Saab', selected: true}),
 922                                 new Element('option', {name: 'opel', value: 'opel', html: 'Opel', selected: true}),
 923                                 new Element('option', {name: 'bmw', value: 'bmw', html: 'BMW'})
 924                         ),
 925                         new Element('textarea', {name: 'textarea', value: 'textarea-value'})
 926                 );
 927                 value_of(form.toQueryString()).should_be('input=checked&select[]=saab&select[]=opel&textarea=textarea-value');
 928         }
 929
 930 });
 931
 932 describe('Element.getProperty', {
 933
 934         'should `getProperty` from an Element': function(){
 935                 var anchor1 = new Element('a');
 936                 anchor1.href = 'http://mootools.net';
 937                 value_of(anchor1.getProperty('href')).should_be('http://mootools.net');
 938
 939                 var anchor2 = new Element('a');
 940                 anchor2.href = '#someLink';
 941                 value_of(anchor2.getProperty('href')).should_be('#someLink');
 942         },
 943
 944         'should `getProperty` type of an input Element': function(){
 945                 var input1 = new Element('input');
 946                 input1.type = 'text';
 947                 value_of(input1.getProperty('type')).should_be('text');
 948
 949                 var input2 = new Element('input');
 950                 input2.type = 'checkbox';
 951                 value_of(input2.getProperty('type')).should_be('checkbox');
 952         },
 953
 954         'should `getPropety` checked from an input Element': function(){
 955                 var checked1 = new Element('input', { type: 'checkbox' });
 956                 checked1.checked = 'checked';
 957                 value_of(checked1.getProperty('checked')).should_be_true();
 958
 959                 var checked2 = new Element('input', { type: 'checkbox' });
 960                 checked2.checked = true;
 961                 value_of(checked2.getProperty('checked')).should_be_true();
 962
 963                 var checked3 = new Element('input', { type: 'checkbox' });
 964                 checked3.checked = false;
 965                 value_of(checked3.getProperty('checked')).should_be_false();
 966         },
 967
 968         'should `getProperty` disabled from an input Element': function(){
 969                 var disabled1 = new Element('input', { type: 'text' });
 970                 disabled1.disabled = 'disabled';
 971                 value_of(disabled1.getProperty('disabled')).should_be_true();
 972
 973                 var disabled2 = new Element('input', { type: 'text' });
 974                 disabled2.disabled = true;
 975                 value_of(disabled2.getProperty('disabled')).should_be_true();
 976
 977                 var disabled3 = new Element('input', { type: 'text' });
 978                 disabled3.disabled = false;
 979                 value_of(disabled3.getProperty('disabled')).should_be_false();
 980         },
 981
 982         'should `getProperty` readonly from an input Element': function(){
 983                 var readonly1 = new Element('input', { type: 'text' });
 984                 readonly1.readOnly = 'readonly';
 985                 value_of(readonly1.getProperty('readonly')).should_be_true();
 986
 987                 var readonly2 = new Element('input', { type: 'text' });
 988                 readonly2.readOnly = true;
 989                 value_of(readonly2.getProperty('readonly')).should_be_true();
 990
 991                 var readonly3 = new Element('input', { type: 'text' });
 992                 readonly3.readOnly = false;
 993                 value_of(readonly3.getProperty('readonly')).should_be_false();
 994         }
 995
 996 });
 997
 998 describe('Element.setProperty', {
 999
1000         'should `setProperty` from an Element': function(){
1001                 var anchor1 = new Element('a').setProperty('href', 'http://mootools.net/');
1002                 value_of(anchor1.getProperty('href')).should_be('http://mootools.net/');
1003
1004                 var anchor2 = new Element('a').setProperty('href', '#someLink');
1005                 value_of(anchor2.getProperty('href')).should_be('#someLink');
1006         },
1007
1008         'should `setProperty` type of an input Element': function(){
1009                 var input1 = new Element('input').setProperty('type', 'text');
1010                 value_of(input1.getProperty('type')).should_be('text');
1011
1012                 var input2 = new Element('input').setProperty('type', 'checkbox');
1013                 value_of(input2.getProperty('type')).should_be('checkbox');
1014         },
1015
1016         'should `setProperty` checked from an input Element': function(){
1017                 var checked1 = new Element('input', { type: 'checkbox' }).setProperty('checked', 'checked');
1018                 value_of(checked1.getProperty('checked')).should_be_true();
1019
1020                 var checked2 = new Element('input', { type: 'checkbox' }).setProperty('checked', true);
1021                 value_of(checked2.getProperty('checked')).should_be_true();
1022
1023                 var checked3 = new Element('input', { type: 'checkbox' }).setProperty('checked', false);
1024                 value_of(checked3.getProperty('checked')).should_be_false();
1025         },
1026
1027         'should `setProperty` disabled of an input Element': function(){
1028                 var disabled1 = new Element('input', { type: 'text' }).setProperty('disabled', 'disabled');
1029                 value_of(disabled1.getProperty('disabled')).should_be_true();
1030
1031                 var disabled2 = new Element('input', { type: 'text' }).setProperty('disabled', true);
1032                 value_of(disabled2.getProperty('disabled')).should_be_true();
1033
1034                 var disabled3 = new Element('input', { type: 'text' }).setProperty('disabled', false);
1035                 value_of(disabled3.getProperty('disabled')).should_be_false();
1036         },
1037
1038         'should `setProperty` readonly of an input Element': function(){
1039                 var readonly1 = new Element('input', { type: 'text' }).setProperty('readonly', 'readonly');
1040                 value_of(readonly1.getProperty('readonly')).should_be_true();
1041
1042                 var readonly2 = new Element('input', { type: 'text' }).setProperty('readonly', true);
1043                 value_of(readonly2.getProperty('readonly')).should_be_true();
1044
1045                 var readonly3 = new Element('input', { type: 'text' }).setProperty('readonly', false);
1046                 value_of(readonly3.getProperty('readonly')).should_be_false();
1047         }
1048
1049 });
1050
1051 describe('Element.getProperties', {
1052
1053         'should return an object associate with the properties passed': function(){
1054                 var readonly = new Element('input', { type: 'text', readonly: 'readonly' });
1055                 var props = readonly.getProperties('type', 'readonly');
1056                 value_of(props).should_be({ type: 'text', readonly: true });
1057         }
1058
1059 });
1060
1061 describe('Element.setProperties', {
1062
1063         'should set each property to the Element': function(){
1064                 var readonly = new Element('input').setProperties({ type: 'text', readonly: 'readonly' });
1065                 var props = readonly.getProperties('type', 'readonly');
1066                 value_of(props).should_be({ type: 'text', readonly: true });
1067         }
1068
1069 });
1070
1071 describe('Element.removeProperty', {
1072
1073         'should `removeProperty` from an Element': function () {
1074                 var readonly = new Element('input', { type: 'text', readonly: 'readonly' });
1075                 readonly.removeProperty('readonly');
1076                 var props = readonly.getProperties('type', 'readonly');
1077                 value_of(props).should_be({ type: 'text', readonly: false });
1078         }
1079
1080 });
1081
1082 describe('Element.removeProperties', {
1083
1084         'should remove each property from the Element': function(){
1085                 var anchor = new Element('a', {href: '#', title: 'title', rel: 'left'});
1086                 anchor.removeProperties('title', 'rel');
1087                 value_of(anchor.getProperties('href', 'title', 'rel')).should_be({ href: '#' });
1088         }
1089
1090 });
1091
1092 describe('Element.getPrevious', {
1093
1094         'should return the previous Element, otherwise null': function(){
1095                 var container = new Element('div');
1096                 var children = [new Element('div'), new Element('div'), new Element('div')];
1097                 container.adopt(children);
1098                 value_of(children[1].getPrevious()).should_be(children[0]);
1099                 value_of(children[0].getPrevious()).should_be_null();
1100         },
1101
1102         'should return the previous Element that matches, otherwise null': function(){
1103                 var container = new Element('div');
1104                 var children = [new Element('a'), new Element('div'), new Element('div'), new Element('div')];
1105                 container.adopt(children);
1106                 value_of(children[1].getPrevious('a')).should_be(children[0]);
1107                 value_of(children[1].getPrevious('span')).should_be_null();
1108         }
1109
1110 });
1111
1112 describe('Element.getAllPrevious', {
1113
1114         'should return all the previous Elements, otherwise an empty array': function(){
1115                 var container = new Element('div');
1116                 var children = [new Element('div'), new Element('div'), new Element('div')];
1117                 container.adopt(children);
1118                 value_of(children[2].getAllPrevious()).should_be([children[1], children[0]]);
1119                 value_of(children[0].getAllPrevious()).should_be([]);
1120         },
1121
1122         'should return all the previous Elements that match, otherwise an empty array': function(){
1123                 var container = new Element('div');
1124                 var children = [new Element('a'), new Element('div'), new Element('a'), new Element('div')];
1125                 container.adopt(children);
1126                 value_of(children[3].getAllPrevious('a')).should_be([children[2], children[0]]);
1127                 value_of(children[1].getAllPrevious('span')).should_be([]);
1128         }
1129
1130 });
1131
1132 describe('Element.getNext', {
1133
1134         'should return the next Element, otherwise null': function(){
1135                 var container = new Element('div');
1136                 var children = [new Element('div'), new Element('div'), new Element('div')];
1137                 container.adopt(children);
1138                 value_of(children[1].getNext()).should_be(children[2]);
1139                 value_of(children[2].getNext()).should_be_null();
1140         },
1141
1142         'should return the previous Element that matches, otherwise null': function(){
1143                 var container = new Element('div');
1144                 var children = [new Element('div'), new Element('div'), new Element('div'), new Element('a')];
1145                 container.adopt(children);
1146                 value_of(children[1].getNext('a')).should_be(children[3]);
1147                 value_of(children[1].getNext('span')).should_be_null();
1148         }
1149
1150 });
1151
1152 describe('Element.getAllNext', {
1153
1154         'should return all the next Elements, otherwise an empty array': function(){
1155                 var container = new Element('div');
1156                 var children = [new Element('div'), new Element('div'), new Element('div')];
1157                 container.adopt(children);
1158                 value_of(children[0].getAllNext()).should_be(children.slice(1));
1159                 value_of(children[2].getAllNext()).should_be([]);
1160         },
1161
1162         'should return all the next Elements that match, otherwise an empty array': function(){
1163                 var container = new Element('div');
1164                 var children = [new Element('div'), new Element('a'), new Element('div'), new Element('a')];
1165                 container.adopt(children);
1166                 value_of(children[0].getAllNext('a')).should_be([children[1], children[3]]);
1167                 value_of(children[0].getAllNext('span')).should_be([]);
1168         }
1169
1170 });
1171
1172 describe('Element.getFirst', {
1173
1174         'should return the first Element in the Element, otherwise null': function(){
1175                 var container = new Element('div');
1176                 var children = [new Element('div'), new Element('a'), new Element('div')];
1177                 container.adopt(children);
1178                 value_of(container.getFirst()).should_be(children[0]);
1179                 value_of(children[0].getFirst()).should_be_null();
1180         },
1181
1182         'should return the first Element in the Element that matches, otherwise null': function(){
1183                 var container = new Element('div');
1184                 var children = [new Element('div'), new Element('a'), new Element('div')];
1185                 container.adopt(children);
1186                 value_of(container.getFirst('a')).should_be(children[1]);
1187                 value_of(container.getFirst('span')).should_be_null();
1188         }
1189
1190 });
1191
1192 describe('Element.getLast | Element.getLastChild', {
1193
1194         'should return the last Element in the Element, otherwise null': function(){
1195                 var container = new Element('div');
1196                 var children = [new Element('div'), new Element('a'), new Element('div')];
1197                 container.adopt(children);
1198                 value_of(container.getLast()).should_be(children[2]);
1199                 value_of(children[0].getLast()).should_be_null();
1200         },
1201
1202         'should return the last Element in the Element that matches, otherwise null': function(){
1203                 var container = new Element('div');
1204                 var children = [new Element('div'), new Element('a'), new Element('div'), new Element('a')];
1205                 container.adopt(children);
1206                 value_of(container.getLast('a')).should_be(children[3]);
1207                 value_of(container.getLast('span')).should_be_null();
1208         }
1209
1210 });
1211
1212 describe('Element.getParent', {
1213
1214         'should return the parent of the Element, otherwise null': function(){
1215                 var container = new Element('p');
1216                 var children = [new Element('div'), new Element('div'), new Element('div')];
1217                 container.adopt(children);
1218                 value_of(children[1].getParent()).should_be(container);
1219                 value_of(container.getParent()).should_be_null();
1220         },
1221
1222         'should return the parent of the Element that matches, otherwise null': function(){
1223                 var container = new Element('p');
1224                 var children = [new Element('div'), new Element('div'), new Element('div')];
1225                 container.adopt(new Element('div').adopt(children));
1226                 value_of(children[1].getParent('p')).should_be(container);
1227                 value_of(children[1].getParent('table')).should_be_null();
1228         }
1229
1230 });
1231
1232 describe('Element.getParents', {
1233
1234         'should return the parents of the Element, otherwise returns an empty array': function(){
1235                 var container = new Element('p');
1236                 var children = [new Element('div'), new Element('div'), new Element('div')];
1237                 container.adopt(new Element('div').adopt(new Element('div').adopt(children)));
1238                 value_of(children[1].getParents()).should_be([container.getFirst().getFirst(), container.getFirst(), container]);
1239                 value_of(container.getParents()).should_be([]);
1240         },
1241
1242         'should return the parents of the Element that match, otherwise returns an empty array': function(){
1243                 var container = new Element('p');
1244                 var children = [new Element('div'), new Element('div'), new Element('div')];
1245                 container.adopt(new Element('div').adopt(new Element('div').adopt(children)));
1246                 value_of(children[1].getParents('div')).should_be([container.getFirst().getFirst(), container.getFirst()]);
1247                 value_of(children[1].getParents('table')).should_be([]);
1248         }
1249
1250 });
1251
1252 describe('Element.getChildren', {
1253
1254         "should return the Element's children, otherwise returns an empty array": function(){
1255                 var container = new Element('div');
1256                 var children = [new Element('div'), new Element('div'), new Element('div')];
1257                 container.adopt(children);
1258                 value_of(container.getChildren()).should_be(children);
1259                 value_of(children[0].getChildren()).should_be([]);
1260         },
1261
1262         "should return the Element's children that match, otherwise returns an empty array": function(){
1263                 var container = new Element('div');
1264                 var children = [new Element('div'), new Element('a'), new Element('a')];
1265                 container.adopt(children);
1266                 value_of(container.getChildren('a')).should_be([children[1], children[2]]);
1267                 value_of(container.getChildren('span')).should_be([]);
1268         }
1269
1270 });
1271
1272 describe('Element.hasChild', {
1273
1274         'should return true if the Element has the child, otherwise false': function(){
1275                 var container = new Element('div');
1276                 var children = [new Element('div'), new Element('div'), new Element('div')];
1277                 container.adopt(children);
1278                 value_of(container.hasChild(children[0])).should_be_true();
1279                 value_of(container.hasChild('span')).should_be_false();
1280         }
1281
1282 });