test/unit/wrap.js

   1 ( function() {
   2
   3 if ( !jQuery.fn.wrap ) { // no wrap module
   4         return;
   5 }
   6
   7 QUnit.module( "wrap", {
   8         afterEach: moduleTeardown
   9 } );
  10
  11 // See test/unit/manipulation.js for explanation about these 2 functions
  12 function manipulationBareObj( value ) {
  13         return value;
  14 }
  15
  16 function manipulationFunctionReturningObj( value ) {
  17         return function() {
  18                 return value;
  19         };
  20 }
  21
  22 function testWrap( val, assert ) {
  23
  24         assert.expect( 19 );
  25
  26         var defaultText, result, j, i, cacheLength;
  27
  28         defaultText = "Try them out:";
  29         result = jQuery( "#first" ).wrap( val( "<div class='red'><span></span></div>" ) ).text();
  30
  31         assert.equal(
  32                 defaultText, result, "Check for wrapping of on-the-fly html"
  33         );
  34         assert.ok(
  35                 jQuery( "#first" ).parent().parent().is( ".red" ), "Check if wrapper has class 'red'"
  36         );
  37
  38         result = jQuery( "#first" ).wrap( val( document.getElementById( "empty" ) ) ).parent();
  39         assert.ok(
  40                 result.is( "ol" ), "Check for element wrapping"
  41         );
  42         assert.equal(
  43                 result.text(), defaultText, "Check for element wrapping"
  44         );
  45
  46         jQuery( "#check1" ).on( "click", function() {
  47                 var checkbox = this;
  48
  49                 assert.ok(
  50                 checkbox.checked, "Checkbox's state is erased after wrap() action, see #769"
  51         );
  52                 jQuery( checkbox ).wrap( val( "<div id='c1' style='display:none;'></div>" ) );
  53                 assert.ok(
  54                 checkbox.checked, "Checkbox's state is erased after wrap() action, see #769"
  55         );
  56         } ).prop( "checked", false )[ 0 ].click();
  57
  58         // using contents will get comments regular, text, and comment nodes
  59         j = jQuery( "#nonnodes" ).contents();
  60         j.wrap( val( "<i></i>" ) );
  61
  62         assert.equal(
  63                 jQuery( "#nonnodes > i" ).length, 3,
  64                 "Check node,textnode,comment wraps ok"
  65         );
  66         assert.equal(
  67                 jQuery( "#nonnodes > i" ).text(), j.text(),
  68                 "Check node,textnode,comment wraps doesn't hurt text"
  69         );
  70
  71         // Try wrapping a disconnected node
  72         cacheLength = 0;
  73         for ( i in jQuery.cache ) {
  74                 cacheLength++;
  75         }
  76
  77         j = jQuery( "<label/>" ).wrap( val( "<li/>" ) );
  78         assert.equal(
  79                 j[ 0 ] .nodeName.toUpperCase(), "LABEL", "Element is a label"
  80         );
  81         assert.equal(
  82                 j[ 0 ].parentNode.nodeName.toUpperCase(), "LI", "Element has been wrapped"
  83         );
  84
  85         for ( i in jQuery.cache ) {
  86                 cacheLength--;
  87         }
  88         assert.equal(
  89                 cacheLength, 0, "No memory leak in jQuery.cache (bug #7165)"
  90         );
  91
  92         // Wrap an element containing a text node
  93         j = jQuery( "<span/>" ).wrap( "<div>test</div>" );
  94         assert.equal(
  95                 j[ 0 ].previousSibling.nodeType, 3, "Make sure the previous node is a text element"
  96         );
  97         assert.equal(
  98                 j[ 0 ].parentNode.nodeName.toUpperCase(), "DIV", "And that we're in the div element."
  99         );
 100
 101         // Try to wrap an element with multiple elements (should fail)
 102         j = jQuery( "<div><span></span></div>" ).children().wrap( "<p></p><div></div>" );
 103         assert.equal(
 104                 j[ 0 ].parentNode.parentNode.childNodes.length, 1,
 105                 "There should only be one element wrapping."
 106         );
 107         assert.equal(
 108                 j.length, 1, "There should only be one element (no cloning)."
 109         );
 110         assert.equal(
 111                 j[ 0 ].parentNode.nodeName.toUpperCase(), "P", "The span should be in the paragraph."
 112         );
 113
 114         // Wrap an element with a jQuery set
 115         j = jQuery( "<span/>" ).wrap( jQuery( "<div></div>" ) );
 116         assert.equal(
 117                 j[ 0 ].parentNode.nodeName.toLowerCase(), "div", "Wrapping works."
 118         );
 119
 120         // Wrap an element with a jQuery set and event
 121         result = jQuery( "<div></div>" ).on( "click", function() {
 122                 assert.ok(
 123                 true, "Event triggered."
 124         );
 125
 126                 // Remove handlers on detached elements
 127                 result.off();
 128                 jQuery( this ).off();
 129         } );
 130
 131         j = jQuery( "<span/>" ).wrap( result );
 132         assert.equal(
 133                 j[ 0 ].parentNode.nodeName.toLowerCase(), "div", "Wrapping works."
 134         );
 135
 136         j.parent().trigger( "click" );
 137 }
 138
 139 QUnit.test( "wrap(String|Element)", function( assert ) {
 140         testWrap( manipulationBareObj, assert );
 141 } );
 142
 143 QUnit.test( "wrap(Function)", function( assert ) {
 144         testWrap( manipulationFunctionReturningObj, assert );
 145 } );
 146
 147 QUnit.test( "wrap(Function) with index (#10177)", function( assert ) {
 148         var expectedIndex = 0,
 149                 targets = jQuery( "#qunit-fixture p" );
 150
 151         assert.expect( targets.length );
 152         targets.wrap( function( i ) {
 153                 assert.equal(
 154                 i, expectedIndex,
 155                 "Check if the provided index (" + i + ") is as expected (" + expectedIndex + ")"
 156         );
 157                 expectedIndex++;
 158
 159                 return "<div id='wrap_index_'" + i + "'></div>";
 160         } );
 161 } );
 162
 163 QUnit.test( "wrap(String) consecutive elements (#10177)", function( assert ) {
 164         var targets = jQuery( "#qunit-fixture p" );
 165
 166         assert.expect( targets.length * 2 );
 167         targets.wrap( "<div class='wrapper'></div>" );
 168
 169         targets.each( function() {
 170                 var $this = jQuery( this );
 171
 172                 assert.ok(
 173                 $this.parent().is( ".wrapper" ), "Check each elements parent is correct (.wrapper)"
 174         );
 175                 assert.equal(
 176                 $this.siblings().length, 0, "Each element should be wrapped individually"
 177         );
 178         } );
 179 } );
 180
 181 QUnit.test( "wrapAll(String)", function( assert ) {
 182
 183         assert.expect( 5 );
 184
 185         var prev, p, result;
 186
 187         prev = jQuery( "#firstp" )[ 0 ].previousSibling;
 188         p = jQuery( "#firstp,#first" )[ 0 ].parentNode;
 189         result = jQuery( "#firstp,#first" ).wrapAll( "<div class='red'><div class='tmp'></div></div>" );
 190
 191         assert.equal(
 192                 result.parent().length, 1, "Check for wrapping of on-the-fly html"
 193         );
 194         assert.ok(
 195                 jQuery( "#first" ).parent().parent().is( ".red" ), "Check if wrapper has class 'red'"
 196         );
 197         assert.ok(
 198                 jQuery( "#firstp" ).parent().parent().is( ".red" ), "Check if wrapper has class 'red'"
 199         );
 200         assert.equal(
 201                 jQuery( "#first" ).parent().parent()[ 0 ].previousSibling, prev, "Correct Previous Sibling"
 202         );
 203         assert.equal(
 204                 jQuery( "#first" ).parent().parent()[ 0 ].parentNode, p, "Correct Parent"
 205         );
 206
 207 } );
 208
 209 QUnit.test( "wrapAll(Function)", function( assert ) {
 210         assert.expect( 5 );
 211
 212         var prev = jQuery( "#firstp" )[ 0 ].previousSibling,
 213                 p = jQuery( "#firstp,#first" )[ 0 ].parentNode,
 214                 result = jQuery( "#firstp,#first" ).wrapAll( function() {
 215                         return "<div class='red'><div class='tmp'></div></div>";
 216                 } );
 217
 218         assert.equal(
 219                 result.parent().length, 1, "Check for wrapping of on-the-fly html"
 220         );
 221         assert.ok(
 222                 jQuery( "#first" ).parent().parent().is( ".red" ), "Check if wrapper has class 'red'"
 223         );
 224         assert.ok(
 225                 jQuery( "#firstp" ).parent().parent().is( ".red" ), "Check if wrapper has class 'red'"
 226         );
 227         assert.ok(
 228                 jQuery( "#first" ).parent().parent().parent().is( p ), "Correct Parent"
 229         );
 230         assert.strictEqual(
 231                 jQuery( "#first" ).parent().parent()[ 0 ].previousSibling, prev, "Correct Previous Sibling"
 232         );
 233 } );
 234
 235 QUnit.test( "wrapAll(Function) check execution characteristics", function( assert ) {
 236         assert.expect( 3 );
 237
 238         var i = 0;
 239
 240         jQuery( "non-existent" ).wrapAll( function() {
 241                 i++;
 242                 return "";
 243         } );
 244
 245         assert.ok(
 246                 !i, "should not execute function argument if target element does not exist"
 247         );
 248
 249         jQuery( "#firstp" ).wrapAll( function( index ) {
 250                 assert.strictEqual(
 251                 this, jQuery( "#firstp" )[ 0 ], "context must be the first found element"
 252         );
 253                 assert.strictEqual(
 254                 index, undefined, "index argument should not be included in function execution"
 255         );
 256         } );
 257 } );
 258
 259 QUnit.test( "wrapAll(Element)", function( assert ) {
 260
 261   assert.expect( 3 );
 262
 263   var prev, p;
 264         prev = jQuery( "#firstp" )[ 0 ].previousSibling;
 265         p = jQuery( "#first" )[ 0 ].parentNode;
 266         jQuery( "#firstp,#first" ).wrapAll( document.getElementById( "empty" ) );
 267
 268         assert.equal(
 269                 jQuery( "#first" ).parent()[ 0 ], jQuery( "#firstp" ).parent()[ 0 ], "Same Parent"
 270         );
 271         assert.equal(
 272                 jQuery( "#first" ).parent()[ 0 ].previousSibling, prev, "Correct Previous Sibling"
 273         );
 274         assert.equal(
 275                 jQuery( "#first" ).parent()[ 0 ].parentNode, p, "Correct Parent"
 276         );
 277 } );
 278
 279 QUnit.test( "wrapInner(String)", function( assert ) {
 280
 281         assert.expect( 6 );
 282
 283         var num;
 284
 285         num = jQuery( "#first" ).children().length;
 286         jQuery( "#first" ).wrapInner( "<div class='red'><div id='tmp'></div></div>" );
 287
 288         assert.equal(
 289                 jQuery( "#first" ).children().length, 1, "Only one child"
 290         );
 291         assert.ok(
 292                 jQuery( "#first" ).children().is( ".red" ), "Verify Right Element"
 293         );
 294         assert.equal(
 295                 jQuery( "#first" ).children().children().children().length, num, "Verify Elements Intact"
 296         );
 297
 298         num = jQuery( "#first" ).html( "foo<div>test</div><div>test2</div>" ).children().length;
 299         jQuery( "#first" ).wrapInner( "<div class='red'><div id='tmp'></div></div>" );
 300         assert.equal(
 301                 jQuery( "#first" ).children().length, 1, "Only one child"
 302         );
 303         assert.ok(
 304                 jQuery( "#first" ).children().is( ".red" ), "Verify Right Element"
 305         );
 306         assert.equal(
 307                 jQuery( "#first" ).children().children().children().length, num, "Verify Elements Intact"
 308         );
 309 } );
 310
 311 QUnit.test( "wrapInner(Element)", function( assert ) {
 312
 313         assert.expect( 5 );
 314
 315         var num,
 316                 div = jQuery( "<div/>" );
 317
 318         num = jQuery( "#first" ).children().length;
 319         jQuery( "#first" ).wrapInner( document.getElementById( "empty" ) );
 320         assert.equal(
 321                 jQuery( "#first" ).children().length, 1, "Only one child"
 322         );
 323         assert.ok(
 324                 jQuery( "#first" ).children().is( "#empty" ), "Verify Right Element"
 325         );
 326         assert.equal(
 327                 jQuery( "#first" ).children().children().length, num, "Verify Elements Intact"
 328         );
 329
 330         div.wrapInner( "<span></span>" );
 331         assert.equal(
 332                 div.children().length, 1, "The contents were wrapped."
 333         );
 334         assert.equal(
 335                 div.children()[ 0 ].nodeName.toLowerCase(), "span", "A span was inserted."
 336         );
 337 } );
 338
 339 QUnit.test( "wrapInner(Function) returns String", function( assert ) {
 340
 341         assert.expect( 6 );
 342
 343         var num,
 344     val = manipulationFunctionReturningObj;
 345
 346         num = jQuery( "#first" ).children().length;
 347         jQuery( "#first" ).wrapInner( val( "<div class='red'><div id='tmp'></div></div>" ) );
 348
 349         assert.equal(
 350                 jQuery( "#first" ).children().length, 1, "Only one child"
 351         );
 352         assert.ok(
 353                 jQuery( "#first" ).children().is( ".red" ), "Verify Right Element"
 354         );
 355         assert.equal(
 356                 jQuery( "#first" ).children().children().children().length, num, "Verify Elements Intact"
 357         );
 358
 359         num = jQuery( "#first" ).html( "foo<div>test</div><div>test2</div>" ).children().length;
 360         jQuery( "#first" ).wrapInner( val( "<div class='red'><div id='tmp'></div></div>" ) );
 361         assert.equal(
 362                 jQuery( "#first" ).children().length, 1, "Only one child"
 363         );
 364         assert.ok(
 365                 jQuery( "#first" ).children().is( ".red" ), "Verify Right Element"
 366         );
 367         assert.equal(
 368                 jQuery( "#first" ).children().children().children().length, num, "Verify Elements Intact"
 369         );
 370 } );
 371
 372 QUnit.test( "wrapInner(Function) returns Element", function( assert ) {
 373
 374         assert.expect( 5 );
 375
 376         var num,
 377     val = manipulationFunctionReturningObj,
 378                 div = jQuery( "<div/>" );
 379
 380         num = jQuery( "#first" ).children().length;
 381         jQuery( "#first" ).wrapInner( val( document.getElementById( "empty" ) ) );
 382         assert.equal(
 383                 jQuery( "#first" ).children().length, 1, "Only one child"
 384         );
 385         assert.ok(
 386                 jQuery( "#first" ).children().is( "#empty" ), "Verify Right Element"
 387         );
 388         assert.equal(
 389                 jQuery( "#first" ).children().children().length, num, "Verify Elements Intact"
 390         );
 391
 392         div.wrapInner( val( "<span></span>" ) );
 393         assert.equal(
 394                 div.children().length, 1, "The contents were wrapped."
 395         );
 396         assert.equal(
 397                 div.children()[ 0 ].nodeName.toLowerCase(), "span", "A span was inserted."
 398         );
 399 } );
 400
 401 QUnit.test( "unwrap()", function( assert ) {
 402
 403         assert.expect( 9 );
 404
 405         jQuery( "body" ).append(
 406                 "  <div id='unwrap' style='display: none;'> <div id='unwrap1'>" +
 407                 " <span class='unwrap'>a</span> <span class='unwrap'>b</span> </div> <div id='unwrap2'>" +
 408                 " <span class='unwrap'>c</span> <span class='unwrap'>d</span> </div> <div id='unwrap3'>" +
 409                 " <b><span class='unwrap unwrap3'>e</span></b>" +
 410                 " <b><span class='unwrap unwrap3'>f</span></b> </div> </div>"
 411         );
 412
 413         var abcd = jQuery( "#unwrap1 > span, #unwrap2 > span" ).get(),
 414                 abcdef = jQuery( "#unwrap span" ).get();
 415
 416         assert.equal(
 417                 jQuery( "#unwrap1 span" ).add( "#unwrap2 span:first-child" ).unwrap().length, 3,
 418                 "make #unwrap1 and #unwrap2 go away"
 419         );
 420         assert.deepEqual(
 421                 jQuery( "#unwrap > span" ).get(), abcd, "all four spans should still exist"
 422         );
 423
 424         assert.deepEqual(
 425                 jQuery( "#unwrap3 span" ).unwrap().get(), jQuery( "#unwrap3 > span" ).get(),
 426                 "make all b in #unwrap3 go away"
 427         );
 428
 429         assert.deepEqual(
 430                 jQuery( "#unwrap3 span" ).unwrap().get(), jQuery( "#unwrap > span.unwrap3" ).get(),
 431                 "make #unwrap3 go away"
 432         );
 433
 434         assert.deepEqual(
 435                 jQuery( "#unwrap" ).children().get(), abcdef, "#unwrap only contains 6 child spans"
 436         );
 437
 438         assert.deepEqual(
 439                 jQuery( "#unwrap > span" ).unwrap().get(), jQuery( "body > span.unwrap" ).get(),
 440                 "make the 6 spans become children of body"
 441         );
 442
 443         assert.deepEqual(
 444                 jQuery( "body > span.unwrap" ).unwrap().get(), jQuery( "body > span.unwrap" ).get(),
 445                 "can't unwrap children of body"
 446         );
 447         assert.deepEqual(
 448                 jQuery( "body > span.unwrap" ).unwrap().get(), abcdef, "can't unwrap children of body"
 449         );
 450
 451         assert.deepEqual(
 452                 jQuery( "body > span.unwrap" ).get(), abcdef, "body contains 6 .unwrap child spans"
 453         );
 454
 455         jQuery( "body > span.unwrap" ).remove();
 456 } );
 457
 458 QUnit.test( "unwrap( selector )", function( assert ) {
 459
 460         assert.expect( 5 );
 461
 462         jQuery( "body" ).append(
 463                 "  <div id='unwrap' style='display: none;'> <div id='unwrap1'>" +
 464                 "<span class='unwrap'>a</span> <span class='unwrap'>b</span> </div>" +
 465                 " <div id='unwrap2'> <span class='unwrap'>c</span> <span class='unwrap'>d</span>" +
 466                 " </div> </div>"
 467         );
 468
 469         // Shouldn't unwrap, no match
 470         jQuery( "#unwrap1 span" ) .unwrap( "#unwrap2" );
 471         assert.equal(
 472                 jQuery( "#unwrap1" ).length, 1, "still wrapped"
 473         );
 474
 475         // Shouldn't unwrap, no match
 476         jQuery( "#unwrap1 span" ) .unwrap( "span" );
 477         assert.equal(
 478                 jQuery( "#unwrap1" ).length, 1, "still wrapped"
 479         );
 480
 481         // Unwraps
 482         jQuery( "#unwrap1 span" ) .unwrap( "#unwrap1" );
 483         assert.equal(
 484                 jQuery( "#unwrap1" ).length, 0, "unwrapped match"
 485         );
 486
 487         // Check return values
 488         assert.deepEqual(
 489                 jQuery( "#unwrap2 span" ).get(), jQuery( "#unwrap2 span" ).unwrap( "quote" ).get(),
 490                 "return on unmatched unwrap"
 491         );
 492         assert.deepEqual(
 493                 jQuery( "#unwrap2 span" ).get(), jQuery( "#unwrap2 span" ).unwrap( "#unwrap2" ).get(),
 494                 "return on matched unwrap"
 495         );
 496
 497         jQuery( "body > span.unwrap" ).remove();
 498 } );
 499
 500 QUnit.test( "jQuery(<tag>) & wrap[Inner/All]() handle unknown elems (#10667)", function( assert ) {
 501
 502         assert.expect( 2 );
 503
 504         var $wraptarget = jQuery( "<div id='wrap-target'>Target</div>" ).appendTo( "#qunit-fixture" ),
 505                 $section = jQuery( "<section>" ).appendTo( "#qunit-fixture" );
 506
 507         $wraptarget.wrapAll( "<aside style='background-color:green'></aside>" );
 508
 509         assert.notEqual(
 510                 $wraptarget.parent( "aside" ).get( 0 ).style.backgroundColor, "transparent",
 511                 "HTML5 elements created with wrapAll inherit styles"
 512         );
 513         assert.notEqual(
 514                 $section.get( 0 ).style.backgroundColor, "transparent",
 515                 "HTML5 elements create with jQuery( string ) inherit styles"
 516         );
 517 } );
 518
 519 QUnit.test( "wrapping scripts (#10470)", function( assert ) {
 520
 521         assert.expect( 2 );
 522
 523         var script = document.createElement( "script" );
 524         script.text = script.textContent =
 525                 "QUnit.assert.ok( !document.eval10470, 'script evaluated once' ); document.eval10470 = true;";
 526
 527         document.eval10470 = false;
 528         jQuery( "#qunit-fixture" ).empty()[ 0 ].appendChild( script );
 529         jQuery( "#qunit-fixture script" ).wrap( "<b></b>" );
 530         assert.strictEqual(
 531                 script.parentNode, jQuery( "#qunit-fixture > b" )[ 0 ], "correctly wrapped"
 532         );
 533         jQuery( script ).remove();
 534 } );
 535
 536 } )();