test/unit/wrap.js

   1 (function() {
   2
   3 if ( !jQuery.fn.wrap ) { // no wrap module
   4         return;
   5 }
   6
   7 module( "wrap", {
   8         teardown: 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 ) {
  23
  24         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         equal( defaultText, result, "Check for wrapping of on-the-fly html" );
  32         ok( jQuery("#first").parent().parent().is(".red"), "Check if wrapper has class 'red'" );
  33
  34         result = jQuery("#first").wrap( val(document.getElementById("empty")) ).parent();
  35         ok( result.is("ol"), "Check for element wrapping" );
  36         equal( result.text(), defaultText, "Check for element wrapping" );
  37
  38         jQuery("#check1").on( "click", function() {
  39                 var checkbox = this;
  40
  41                 ok( checkbox.checked, "Checkbox's state is erased after wrap() action, see #769" );
  42                 jQuery( checkbox ).wrap( val("<div id='c1' style='display:none;'></div>") );
  43                 ok( checkbox.checked, "Checkbox's state is erased after wrap() action, see #769" );
  44         }).prop( "checked", false )[ 0 ].click();
  45
  46         // using contents will get comments regular, text, and comment nodes
  47         j = jQuery("#nonnodes").contents();
  48         j.wrap( val("<i></i>") );
  49
  50         equal( jQuery("#nonnodes > i").length, jQuery("#nonnodes")[ 0 ].childNodes.length, "Check node,textnode,comment wraps ok" );
  51         equal( jQuery("#nonnodes > i").text(), j.text(), "Check node,textnode,comment wraps doesn't hurt text" );
  52
  53         // Try wrapping a disconnected node
  54         cacheLength = 0;
  55         for ( i in jQuery.cache ) {
  56                 cacheLength++;
  57         }
  58
  59         j = jQuery("<label/>").wrap( val("<li/>") );
  60         equal( j[ 0 ] .nodeName.toUpperCase(), "LABEL", "Element is a label" );
  61         equal( j[ 0 ].parentNode.nodeName.toUpperCase(), "LI", "Element has been wrapped" );
  62
  63         for ( i in jQuery.cache ) {
  64                 cacheLength--;
  65         }
  66         equal( cacheLength, 0, "No memory leak in jQuery.cache (bug #7165)" );
  67
  68         // Wrap an element containing a text node
  69         j = jQuery("<span/>").wrap("<div>test</div>");
  70         equal( j[ 0 ].previousSibling.nodeType, 3, "Make sure the previous node is a text element" );
  71         equal( j[ 0 ].parentNode.nodeName.toUpperCase(), "DIV", "And that we're in the div element." );
  72
  73         // Try to wrap an element with multiple elements (should fail)
  74         j = jQuery("<div><span></span></div>").children().wrap("<p></p><div></div>");
  75         equal( j[ 0 ].parentNode.parentNode.childNodes.length, 1, "There should only be one element wrapping." );
  76         equal( j.length, 1, "There should only be one element (no cloning)." );
  77         equal( j[ 0 ].parentNode.nodeName.toUpperCase(), "P", "The span should be in the paragraph." );
  78
  79         // Wrap an element with a jQuery set
  80         j = jQuery("<span/>").wrap( jQuery("<div></div>") );
  81         equal( j[ 0 ].parentNode.nodeName.toLowerCase(), "div", "Wrapping works." );
  82
  83         // Wrap an element with a jQuery set and event
  84         result = jQuery("<div></div>").on( "click", function() {
  85                 ok( true, "Event triggered." );
  86
  87                 // Remove handlers on detached elements
  88                 result.off();
  89                 jQuery(this).off();
  90         });
  91
  92         j = jQuery("<span/>").wrap( result );
  93         equal( j[ 0 ].parentNode.nodeName.toLowerCase(), "div", "Wrapping works." );
  94
  95         j.parent().trigger("click");
  96 }
  97
  98 test( "wrap(String|Element)", function() {
  99         testWrap( manipulationBareObj );
 100 });
 101
 102 test( "wrap(Function)", function() {
 103         testWrap( manipulationFunctionReturningObj );
 104 });
 105
 106 test( "wrap(Function) with index (#10177)", function() {
 107         var expectedIndex = 0,
 108                 targets = jQuery("#qunit-fixture p");
 109
 110         expect( targets.length );
 111         targets.wrap(function(i) {
 112                 equal( i, expectedIndex, "Check if the provided index (" + i + ") is as expected (" + expectedIndex + ")" );
 113                 expectedIndex++;
 114
 115                 return "<div id='wrap_index_'" + i + "'></div>";
 116         });
 117 });
 118
 119 test( "wrap(String) consecutive elements (#10177)", function() {
 120         var targets = jQuery("#qunit-fixture p");
 121
 122         expect( targets.length * 2 );
 123         targets.wrap("<div class='wrapper'></div>");
 124
 125         targets.each(function() {
 126                 var $this = jQuery(this);
 127
 128                 ok( $this.parent().is(".wrapper"), "Check each elements parent is correct (.wrapper)" );
 129                 equal( $this.siblings().length, 0, "Each element should be wrapped individually" );
 130         });
 131 });
 132
 133 test( "wrapAll(String)", function() {
 134
 135         expect( 5 );
 136
 137         var prev, p, result;
 138
 139         prev = jQuery("#firstp")[ 0 ].previousSibling;
 140         p = jQuery("#firstp,#first")[ 0 ].parentNode;
 141         result = jQuery("#firstp,#first").wrapAll( "<div class='red'><div class='tmp'></div></div>" );
 142
 143         equal( result.parent().length, 1, "Check for wrapping of on-the-fly html" );
 144         ok( jQuery("#first").parent().parent().is(".red"), "Check if wrapper has class 'red'" );
 145         ok( jQuery("#firstp").parent().parent().is(".red"), "Check if wrapper has class 'red'" );
 146         equal( jQuery("#first").parent().parent()[ 0 ].previousSibling, prev, "Correct Previous Sibling" );
 147         equal( jQuery("#first").parent().parent()[ 0 ].parentNode, p, "Correct Parent" );
 148
 149 });
 150
 151 test( "wrapAll(Function)", 5, function() {
 152         var prev = jQuery( "#firstp" )[ 0 ].previousSibling,
 153                 p = jQuery( "#firstp,#first" )[ 0 ].parentNode,
 154                 result = jQuery( "#firstp,#first" ).wrapAll(function() {
 155                         return "<div class='red'><div class='tmp'></div></div>";
 156                 });
 157
 158         equal( result.parent().length, 1, "Check for wrapping of on-the-fly html" );
 159         ok( jQuery( "#first" ).parent().parent().is( ".red" ), "Check if wrapper has class 'red'" );
 160         ok( jQuery( "#firstp" ).parent().parent().is( ".red" ), "Check if wrapper has class 'red'" );
 161         ok( jQuery( "#first" ).parent().parent().parent().is( p ), "Correct Parent" );
 162         strictEqual( jQuery( "#first" ).parent().parent()[ 0 ].previousSibling, prev, "Correct Previous Sibling" );
 163 });
 164
 165 test( "wrapAll(Function) check execution characteristics", 3, function() {
 166         var i = 0;
 167
 168         jQuery( "non-existent" ).wrapAll(function() {
 169                 i++;
 170                 return "";
 171         });
 172
 173         ok( !i, "should not execute function argument if target element does not exist" );
 174
 175         jQuery( "#firstp" ).wrapAll(function( index ) {
 176                 strictEqual( this, jQuery( "#firstp" )[ 0 ], "context must be the first found element" );
 177                 strictEqual( index, undefined, "index argument should not be included in function execution" );
 178         });
 179 });
 180
 181 test( "wrapAll(Element)", function() {
 182
 183   expect( 3 );
 184
 185   var prev, p;
 186         prev = jQuery("#firstp")[ 0 ].previousSibling;
 187         p = jQuery("#first")[ 0 ].parentNode;
 188         jQuery("#firstp,#first").wrapAll( document.getElementById("empty") );
 189
 190         equal( jQuery("#first").parent()[ 0 ], jQuery("#firstp").parent()[ 0 ], "Same Parent" );
 191         equal( jQuery("#first").parent()[ 0 ].previousSibling, prev, "Correct Previous Sibling" );
 192         equal( jQuery("#first").parent()[ 0 ].parentNode, p, "Correct Parent" );
 193 });
 194
 195 test( "wrapInner(String)", function() {
 196
 197         expect( 6 );
 198
 199         var num;
 200
 201         num = jQuery("#first").children().length;
 202         jQuery("#first").wrapInner( "<div class='red'><div id='tmp'></div></div>" );
 203
 204         equal( jQuery("#first").children().length, 1, "Only one child" );
 205         ok( jQuery("#first").children().is(".red"), "Verify Right Element" );
 206         equal( jQuery("#first").children().children().children().length, num, "Verify Elements Intact" );
 207
 208         num = jQuery("#first").html("foo<div>test</div><div>test2</div>").children().length;
 209         jQuery("#first").wrapInner( "<div class='red'><div id='tmp'></div></div>" );
 210         equal( jQuery("#first").children().length, 1, "Only one child" );
 211         ok( jQuery("#first").children().is(".red"), "Verify Right Element" );
 212         equal( jQuery("#first").children().children().children().length, num, "Verify Elements Intact" );
 213 });
 214
 215 test( "wrapInner(Element)", function() {
 216
 217         expect( 5 );
 218
 219         var num,
 220                 div = jQuery("<div/>");
 221
 222         num = jQuery("#first").children().length;
 223         jQuery("#first").wrapInner( document.getElementById("empty") );
 224         equal( jQuery("#first").children().length, 1, "Only one child" );
 225         ok( jQuery("#first").children().is("#empty"), "Verify Right Element" );
 226         equal( jQuery("#first").children().children().length, num, "Verify Elements Intact" );
 227
 228         div.wrapInner( "<span></span>" );
 229         equal( div.children().length, 1, "The contents were wrapped." );
 230         equal( div.children()[ 0 ].nodeName.toLowerCase(), "span", "A span was inserted." );
 231 });
 232
 233 test( "wrapInner(Function) returns String", function() {
 234
 235         expect( 6 );
 236
 237         var num,
 238     val = manipulationFunctionReturningObj;
 239
 240         num = jQuery("#first").children().length;
 241         jQuery("#first").wrapInner( val("<div class='red'><div id='tmp'></div></div>") );
 242
 243         equal( jQuery("#first").children().length, 1, "Only one child" );
 244         ok( jQuery("#first").children().is(".red"), "Verify Right Element" );
 245         equal( jQuery("#first").children().children().children().length, num, "Verify Elements Intact" );
 246
 247         num = jQuery("#first").html("foo<div>test</div><div>test2</div>").children().length;
 248         jQuery("#first").wrapInner( val("<div class='red'><div id='tmp'></div></div>") );
 249         equal( jQuery("#first").children().length, 1, "Only one child" );
 250         ok( jQuery("#first").children().is(".red"), "Verify Right Element" );
 251         equal( jQuery("#first").children().children().children().length, num, "Verify Elements Intact" );
 252 });
 253
 254 test( "wrapInner(Function) returns Element", function() {
 255
 256         expect( 5 );
 257
 258         var num,
 259     val = manipulationFunctionReturningObj,
 260                 div = jQuery("<div/>");
 261
 262         num = jQuery("#first").children().length;
 263         jQuery("#first").wrapInner( val(document.getElementById("empty")) );
 264         equal( jQuery("#first").children().length, 1, "Only one child" );
 265         ok( jQuery("#first").children().is("#empty"), "Verify Right Element" );
 266         equal( jQuery("#first").children().children().length, num, "Verify Elements Intact" );
 267
 268         div.wrapInner( val("<span></span>") );
 269         equal( div.children().length, 1, "The contents were wrapped." );
 270         equal( div.children()[ 0 ].nodeName.toLowerCase(), "span", "A span was inserted." );
 271 });
 272
 273 test( "unwrap()", function() {
 274
 275         expect( 9 );
 276
 277         jQuery("body").append("  <div id='unwrap' style='display: none;'> <div id='unwrap1'> <span class='unwrap'>a</span> <span class='unwrap'>b</span> </div> <div id='unwrap2'> <span class='unwrap'>c</span> <span class='unwrap'>d</span> </div> <div id='unwrap3'> <b><span class='unwrap unwrap3'>e</span></b> <b><span class='unwrap unwrap3'>f</span></b> </div> </div>");
 278
 279         var abcd = jQuery("#unwrap1 > span, #unwrap2 > span").get(),
 280                 abcdef = jQuery("#unwrap span").get();
 281
 282         equal( jQuery("#unwrap1 span").add("#unwrap2 span:first-child").unwrap().length, 3, "make #unwrap1 and #unwrap2 go away" );
 283         deepEqual( jQuery("#unwrap > span").get(), abcd, "all four spans should still exist" );
 284
 285         deepEqual( jQuery("#unwrap3 span").unwrap().get(), jQuery("#unwrap3 > span").get(), "make all b in #unwrap3 go away" );
 286
 287         deepEqual( jQuery("#unwrap3 span").unwrap().get(), jQuery("#unwrap > span.unwrap3").get(), "make #unwrap3 go away" );
 288
 289         deepEqual( jQuery("#unwrap").children().get(), abcdef, "#unwrap only contains 6 child spans" );
 290
 291         deepEqual( jQuery("#unwrap > span").unwrap().get(), jQuery("body > span.unwrap").get(), "make the 6 spans become children of body" );
 292
 293         deepEqual( jQuery("body > span.unwrap").unwrap().get(), jQuery("body > span.unwrap").get(), "can't unwrap children of body" );
 294         deepEqual( jQuery("body > span.unwrap").unwrap().get(), abcdef, "can't unwrap children of body" );
 295
 296         deepEqual( jQuery("body > span.unwrap").get(), abcdef, "body contains 6 .unwrap child spans" );
 297
 298         jQuery("body > span.unwrap").remove();
 299 });
 300
 301 test( "unwrap( selector )", function() {
 302
 303         expect( 5 );
 304
 305         jQuery( "body" ).append( "  <div id='unwrap' style='display: none;'> <div id='unwrap1'> <span class='unwrap'>a</span> <span class='unwrap'>b</span> </div> <div id='unwrap2'> <span class='unwrap'>c</span> <span class='unwrap'>d</span> </div> </div>" );
 306
 307         // Shouldn't unwrap, no match
 308         jQuery( "#unwrap1 span" ) .unwrap( "#unwrap2" );
 309         equal( jQuery("#unwrap1").length, 1, "still wrapped" );
 310
 311          // Shouldn't unwrap, no match
 312         jQuery( "#unwrap1 span" ) .unwrap( "span" );
 313         equal( jQuery("#unwrap1").length, 1, "still wrapped" );
 314
 315         // Unwraps
 316         jQuery( "#unwrap1 span" ) .unwrap( "#unwrap1" );
 317         equal( jQuery("#unwrap1").length, 0, "unwrapped match" );
 318
 319         // Check return values
 320         deepEqual( jQuery( "#unwrap2 span" ).get(), jQuery( "#unwrap2 span" ).unwrap( "quote" ).get(), "return on unmatched unwrap" );
 321         deepEqual( jQuery( "#unwrap2 span" ).get(), jQuery( "#unwrap2 span" ).unwrap( "#unwrap2" ).get(), "return on matched unwrap" );
 322
 323         jQuery("body > span.unwrap").remove();
 324 });
 325
 326 test( "jQuery(<tag>) & wrap[Inner/All]() handle unknown elems (#10667)", function() {
 327
 328         expect( 2 );
 329
 330         var $wraptarget = jQuery( "<div id='wrap-target'>Target</div>" ).appendTo( "#qunit-fixture" ),
 331                 $section = jQuery( "<section>" ).appendTo( "#qunit-fixture" );
 332
 333         $wraptarget.wrapAll("<aside style='background-color:green'></aside>");
 334
 335         notEqual( $wraptarget.parent("aside").get( 0 ).style.backgroundColor, "transparent", "HTML5 elements created with wrapAll inherit styles" );
 336         notEqual( $section.get( 0 ).style.backgroundColor, "transparent", "HTML5 elements create with jQuery( string ) inherit styles" );
 337 });
 338
 339 test( "wrapping scripts (#10470)", function() {
 340
 341         expect( 2 );
 342
 343         var script = document.createElement("script");
 344         script.text = script.textContent = "ok( !document.eval10470, 'script evaluated once' ); document.eval10470 = true;";
 345
 346         document.eval10470 = false;
 347         jQuery("#qunit-fixture").empty()[0].appendChild( script );
 348         jQuery("#qunit-fixture script").wrap("<b></b>");
 349         strictEqual( script.parentNode, jQuery("#qunit-fixture > b")[ 0 ], "correctly wrapped" );
 350         jQuery( script ).remove();
 351 });
 352
 353 })();