JSFiddle - React, Tailwind, and code Playground
HTML
<script src="http://code.jquery.com/qunit/qunit-1.9.0.js"></script>
<link rel="stylesheet" href="http://code.jquery.com/qunit/qunit-1.9.0.css">
<script src="http://sinonjs.org/releases/sinon-1.4.2.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.22/jquery-ui.min.js"></script>
<link rel="stylesheet" href="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.8.20/themes/base/jquery-ui.css">
<script src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.9/jquery.validate.js"></script>
<script src="https://raw.github.com/appendto/jquery-mockjax/master/jquery.mockjax.js"></script>
<div id="qunit"></div>
<button id="button-status" style="display:none"></button>
<div id="progress-content" style="display:none">
<div id="spinner" style="display:none"></div>
</div>
<div id="errordialog-content" style="display:none"></div>
JavaScript
var statusmod = (function() {
var spinner = $("#spinner");
var init = function(id) {
var progressDialog = $("#progressdialog-content").dialog({
autoOpen: false,
title: "Launching Status Page"
});
var errorDialog = $("#errordialog-content").dialog({
autoOpen: false,
modal: true,
buttons: {
"OK": function() {
$(this).dialog("close");
}
}
});
var btn = $("#button-status");
btn.button().click(function() {
spinner.show();
progressDialog.dialog("open");
var url = $.validator.format("/api/binid/?id={0}", id);
// Call Web service to get binary ID
$.ajax({
url: url,
dataType: "json"
}).done(function(data) {
window.open($.validator.format("http://status/?Page=Status&Id={0}", data.Id), target = "_newtab");
}).fail(function(jqXHR, msg, errorThrown) {
errorDialog.dialog("open");
}).always(function() {
progressDialog.dialog("close");
});
return false;
});
};
return {
init: init,
_spinner: spinner
};
}());
// QUnit tests
var dialogSpy = null;
var windowSpy = null;
var id = "srcId";
var binId = "binId";
var url = $.validator.format("/api/binid/?id={0}", id);
var btnId = "#button-status";
module("Open status page", {
setup: function() {
$.ajaxSetup({
async: false
});
windowSpy = sinon.spy(window, "open");
dialogSpy = sinon.spy();
sinon.stub($.fn, "dialog", function() {
return {
"dialog": dialogSpy
};
});
statusmod.init(id);
},
teardown: function() {
windowSpy.restore();
$.fn.dialog.restore();
$.mockjaxClear();
//...