Repository: jquery/jquery
File: test/unit/traversing.js (JavaScript)

Code before:
	assert.equal( jQuery( "span", ibody ).text(), "span text", "Find span in IFrame and check its text" );

	jQuery( ibody ).append( "<div>init text</div>" );
	assert.equal( jQuery( "div", ibody ).length, 2, "Check the original div and the new div are in IFrame" );

	assert.equal( jQuery( "div", ibody ).last().text(), "init text", "Add text to div in IFrame" );

	jQuery( "div", ibody ).last().text( "div text" );
	assert.equal( jQuery( "div", ibody ).last().text(), "div text", "Add text to div in IFrame" );

	jQuery( "div", ibody ).last().remove();
	assert.equal( jQuery( "div", ibody ).length, 1, "Delete the div and check only one div left in IFrame" );

	assert.equal( jQuery( "div", ibody ).text(), "span text", "Make sure the correct div is still left after deletion in IFrame" );

	jQuery( "<table/>", ibody ).append( "<tr><td>cell</td></tr>" ).appendTo( ibody );
	jQuery( "table", ibody ).remove();
	assert.equal( jQuery( "div", ibody ).length, 1, "Check for JS error on add and delete of a table in IFrame" );

	// using contents will get comments regular, text, and comment nodes
	c = jQuery( "#nonnodes" ).contents().contents();
	assert.equal( c.length, 1, "Check node,textnode,comment contents is just one" );
	assert.equal( c[ 0 ].nodeValue, "hi", "Check node,textnode,comment contents is just the one from span" );
} );

QUnit.test( "contents() for <template />", function( assert ) {
	assert.expect( 4 );

    jQuery( "#qunit-fixture" ).append(
        "<template id='template'>" +
        "    <div id='template-div0'>" +
        "        <span>Hello, Web Component!</span>" +
        "    </div>" +
        "    <div id='template-div1'></div>" +
        "    <div id='template-div2'></div>" +
        "</template>"
    );

    var contents = jQuery( "#template" ).contents();
    assert.equal( contents.length, 6, "Check template element contents" );

    assert.equal( contents.find( "span" ).text(), "Hello, Web Component!", "Find span in template and check its text" );

    jQuery( "<div id='templateTest' />" ).append(
        jQuery( jQuery.map( contents, function( node ) {
            return document.importNode( node, true );
        } ) )
    ).appendTo( "#qunit-fixture" );

    contents = jQuery( "#templateTest" ).contents();
    assert.equal( contents.length, 6, "Check cloned nodes of template element contents" );

Review comment (suggestion):
Pasting from https://github.com/jquery/jquery/issues/3436#issuecomment-268031156:

Note that we have to be careful to not make the contents stop being inert once running `.contents()` on a template element wrapped in jQuery so we'll need a test that ensures this does not happen. For example, you could create a test with a `<template>` tag containing a script and `<img>` with an onload handler and make sure none of them fires.

Code after:
	assert.equal( jQuery( "span", ibody ).text(), "span text", "Find span in IFrame and check its text" );

	jQuery( ibody ).append( "<div>init text</div>" );
	assert.equal( jQuery( "div", ibody ).length, 2, "Check the original div and the new div are in IFrame" );

	assert.equal( jQuery( "div", ibody ).last().text(), "init text", "Add text to div in IFrame" );

	jQuery( "div", ibody ).last().text( "div text" );
	assert.equal( jQuery( "div", ibody ).last().text(), "div text", "Add text to div in IFrame" );

	jQuery( "div", ibody ).last().remove();
	assert.equal( jQuery( "div", ibody ).length, 1, "Delete the div and check only one div left in IFrame" );

	assert.equal( jQuery( "div", ibody ).text(), "span text", "Make sure the correct div is still left after deletion in IFrame" );

	jQuery( "<table/>", ibody ).append( "<tr><td>cell</td></tr>" ).appendTo( ibody );
	jQuery( "table", ibody ).remove();
	assert.equal( jQuery( "div", ibody ).length, 1, "Check for JS error on add and delete of a table in IFrame" );

	// using contents will get comments regular, text, and comment nodes
	c = jQuery( "#nonnodes" ).contents().contents();
	assert.equal( c.length, 1, "Check node,textnode,comment contents is just one" );
	assert.equal( c[ 0 ].nodeValue, "hi", "Check node,textnode,comment contents is just the one from span" );
} );

QUnit.test( "contents() for <template />", function( assert ) {
    assert.expect( 4 );

    jQuery( "#qunit-fixture" ).append(
        "<template id='template'>" +
        "    <div id='template-div0'>" +
        "        <span>Hello, Web Component!</span>" +
        "    </div>" +
        "    <div id='template-div1'></div>" +
        "    <div id='template-div2'></div>" +
        "</template>"
    );

    var contents = jQuery( "#template" ).contents();
    assert.equal( contents.length, 6, "Check template element contents" );

    assert.equal( contents.find( "span" ).text(), "Hello, Web Component!", "Find span in template and check its text" );

    jQuery( "<div id='templateTest' />" ).append(
        jQuery( jQuery.map( contents, function( node ) {
            return document.importNode( node, true );
        } ) )
    ).appendTo( "#qunit-fixture" );

    contents = jQuery( "#templateTest" ).contents();
    assert.equal( contents.length, 6, "Check cloned nodes of template element contents" );