Нет описания

wrap.js 14KB

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