JSFiddle - React, Tailwind, and code Playground

by ozzymcduff

HTML

<script src="http://code.jquery.com/qunit/qunit-git.js"></script>
<link rel="stylesheet" href="http://code.jquery.com/qunit/git/qunit.css">
  <h1 id="qunit-header">QUnit example</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">test markup, will be hidden</div>

JavaScript

var ex = {};

function removeStartMsg(target) {
    $(target).removeClass('ajaxLoad');
}

function displayStartMsg(target) {
    $(target).empty().addClass('ajaxLoad').append(" One moment while your data is being retrieved...");
}

function createAddressHtml(data) {
    var items = [];
    $.each(data, function(key, val) {
        items.push('<li id="' + key + '">' + val + '</li>');
    });
    return $('<ul>'+items.join('')+'</ul>')
}

function displayAddress(data, target) {
    target.empty().html(createAddressHtml(data));
}

function getAddress(id, target) {
    var complete = function(data) {
        removeStartMsg(target);
        $(target).removeClass('ajaxLoad');
    };

    var success = function(data) {
        displayAddress(data, target)
    };

    var error = function(error) {
        $(target).empty().append("An error was encountered...");
    }
    displayStartMsg(target);
    ex.getData(id, "data/data.json", success, error, complete);
}
ex.getData = function(id, source, successCallBack, errorCallBack, completeCallBack) {
    $.getJSON(source, {
        id: id
    }, function(data) {}).success(function(data) {
        successCallBack(data)
    }).error(function(error) {
        errorCallBack(error)
    }).complete(function(data) {
        completeCallBack(data)
    });
}

function testfixture() {

    module("When retrieving address data");
    //Arrange
    var html = $('<div id="target"></div>');
    ex.getData = function(id, source, successCallBack, errorCallBack, completeCallBack) {
        console.log('called');
        var data = {
            company: 'Microsoft Corporation',
            Address: 'One Microsoft Way',
            City: 'Redmond',
            State: 'WA',
            Zip: '98052'
        };
        completeCallBack(data);

        successCallBack(data);

    };
    //Act
    getAddress(0, html);
    //stop(2); // allow async processes to run
    test("Given that the data has \
    been applied to a pre-defined div", function()...