JSFiddle - React, Tailwind, and code Playground

by gurkavcu

HTML

<ul id="results"/>

<button id="test">Click Me!</button>

CSS

#results li.pass { color: green; }
#results li.fail { color: red; }

JavaScript

function assert(value, desc) {
    var li = document.createElement("li");
    li.className = value ? "pass" : "fail";
    li.appendChild(document.createTextNode(desc));
    document.getElementById("results").appendChild(li);
}

(function() {
    var queue = [],
        paused = false;
    this.test = function(fn) {
        queue.push(fn);
        runTest();
    };
    this.pause = function() {
        paused = true;
    };
    this.resume = function() {
        paused = false;
        setTimeout(runTest, 1);
    };

    function runTest() {
        if (!paused && queue.length) {
            queue.shift()();
            if (!paused) {
                resume();
            }
        }
    }
})();


function bind(context, name){
return function(){
return context[name].apply(context, arguments);
};
}

var Button = {
    click: function() {    
        this.clicked = true;
        alert('AAAAA');
    }
};

Button["click"].apply(Button,arguments);


var elem = $("#test").get(0);
console.log(elem);
elem.addEventListener("click",Button.click, false);
$("#test").trigger("click");
assert(elem.clicked, "The clicked property was accidentally set on the element");