JSFiddle - React, Tailwind, and code Playground

by Ben Alman

HTML

<script src="http://code.jquery.com/qunit/git/qunit.js"></script>
<link rel="stylesheet" href="http://code.jquery.com/qunit/git/qunit.css">
<script src="https://gist.github.com/raw/938767/ba-detach.js"></script>
<p><a href="https://gist.github.com/938767">See the source / gist</a></p>

<h1 id="qunit-header">
    
    JavaScript detach
    
</h1>
<h2 id="qunit-banner"></h2>
<div id="qunit-testrunner-toolbar"></div>
<h2 id="qunit-userAgent"></h2>
<ol id="qunit-tests"></ol>
<div id="qunit-fixture">
    
    <div id="a">
        <p id="a1">1</p>
        <p id="a2">2</p>
        <p id="a3">3</p>
    </div>
    <div id="b">
        <p id="b1">1</p>
    </div>
    
</div>

JavaScript

var setup = function() {
    this.elems = {
        a: document.getElementById('a'),
        a1: document.getElementById('a1'),
        a2: document.getElementById('a2'),
        a3: document.getElementById('a3'),
        b: document.getElementById('b'),
        b1: document.getElementById('b1')
    };
};
var testConfig = {
    setup: setup,
    teardown: function() {
        function getText(node) {
            return node.innerText.replace(/\s/g, '');
        }
        equals(getText(this.elems.a), '123', 'reattached in-order');
        equals(getText(this.elems.b), '1', 'reattached in-order');
    }
};

// SYNCHRONOUS TESTS
module('detach, reattach sync', testConfig);

function makeSyncTest(parentName, elemName, async) {
    return function() {
        var parent = this.elems[parentName];
        var elem = this.elems[elemName];
        if ( arguments.length == 3 ) {
            detach(elem, async, function() {
                equals(this.parentNode, null, 'detached');
            });
        } else {
            detach(elem, function() {
                equals(this.parentNode, null, 'detached');
            });
        }
        equals(elem.parentNode, parent, 'reattached');
    };
}

test('first child (multiple children)', 4, makeSyncTest('a', 'a1'));
test('middle child (multiple children)', 4, makeSyncTest('a', 'a2', null));
test('last child (multiple children)', 4, makeSyncTest('a', 'a3', false));
test('only child', 4, makeSyncTest('b', 'b1'));

// ASYNCHRONOUS TESTS
module('detach, reattach async', testConfig);

function makeAsyncTest(parentName, elemName) {
    return function() {
        var parent = this.elems[parentName];
        var elem = this.elems[elemName];
        var done;
        detach(elem, true, function(reattach) {
            done = reattach;
            equals(this.parentNode, null, 'detached');
        });
        equals(elem.parentNode, null, 'still detached');
        done();
        equals(elem.parentNode, parent, 'reattached');
   ...