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

Code before:
	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( 6 );

    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>" +
        "<form id=\"test_contents\">" +
        "    <input type=\"text\" name=\"contentDocument\" />" +
        "    <input type=\"text\" name=\"content\" />" +
        "</form>"
    );

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

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

    jQuery( "<div id=\"templateTest\" />" ).append(
        jQuery( jQuery.map( c, function( node ) {
            return document.importNode( node, true );
        } ) )
    ).appendTo( document.body );

    c = jQuery( "#templateTest" ).contents();

Review comment (suggestion):
Sounds easier to create node, assign, append and use through the tests?

Like so –
```js
var template = jQuery("<template id='template'>...")
```

Note the single quotes inside the string

Code after:
	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" );

    assert.equal( contents.filter( "div" ).length, 3, "Count cloned elements from template" );
} );