intercooler
Version:
Making AJAX as easy as anchor tags
1,158 lines (1,057 loc) • 34.2 kB
HTML
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="A Javascript-optional AJAX library featuring declarative, REST-ful bindings">
<meta name="author" content="">
<title>Intercooler.js</title>
<!-- Bootstrap core CSS -->
<link href="https://netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css" rel="stylesheet">
<link href="https://netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.min.css" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Crete+Round:400italic,400" rel="stylesheet" type="text/css">
<link href="https://fonts.googleapis.com/css?family=Open+Sans:300italic,300,400italic,400,600italic,600,700italic,700,800italic,800"
rel="stylesheet" type="text/css">
<!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>
<![endif]-->
<script src="https://code.jquery.com/jquery-1.10.2.min.js"></script>
<script src="https://code.jquery.com/qunit/qunit-1.16.0.js"></script>
<script src="https://netdna.bootstrapcdn.com/bootstrap/3.0.3/js/bootstrap.min.js"></script>
<script type="text/javascript" src="./intercooler-0.4.7.js"></script>
<script type="text/javascript" src="jquery.mockjax.js"></script>
<link rel="stylesheet" href="http://code.jquery.com/qunit/qunit-1.16.0.css">
<script>
// Helper function for async QUnit tests
function intercoolerTest(name, beforeRequest, afterRequest, timeout) {
QUnit.test(name, function (assert) {
var done = assert.async();
beforeRequest(assert);
var delay = timeout || 50;
setTimeout(function () {
afterRequest(assert);
done();
}, delay);
});
}
// Taken from https://gist.github.com/kares/956897
function parseParams(str) {
var re = /([^&=]+)=?([^&]*)/g;
var decode = function (str) {
return decodeURIComponent(str.replace(/\+/g, ' '));
};
var params = {}, e;
if (str) {
if (str.substr(0, 1) == '?') {
str = str.substr(1);
}
while (e = re.exec(str)) {
var k = decode(e[1]);
var v = decode(e[2]);
if (params[k] !== undefined) {
if (!$.isArray(params[k])) {
params[k] = [params[k]];
}
params[k].push(v);
} else {
params[k] = v;
}
}
}
return params;
}
// no transition and fast response time from mockjax
$(function () {
Intercooler.defaultTransition('none');
$.mockjaxSettings['responseTime'] = 1;
});
</script>
</head>
<body>
<div class="container">
<h2>Intercooler.js Test Suite</h2>
<p>This is the test suite for the Intercooler.js library. Simply loading this page in a browser will run all the
tests</p>
<p>New tests should follow the existing test templates, using
the <code>intercoolerTest()</code> helper and <a href="https://github.com/jakerella/jquery-mockjax">mockjax</a> for
mocking out AJAX requests.</p>
</div>
<hr/>
<div class="container">
<h3>Test Results</h3>
<div id="qunit"></div>
<div id="qunit-fixture"></div>
</div>
<div class="container">
<div class="row">
<div class="col-md-12">
<h4>Test HTML</h4>
</div>
</div>
<div class="row">
<div class="col-md-12">
<hr/>
<div id="ic-src-div1" ic-src="/attr-test-1"></div>
<div id="ic-post-to-div1" ic-post-to="/attr-test-1"></div>
<div id="ic-append-from-div1" ic-append-from="/attr-test-1"></div>
<div id="ic-prepend-from-div1" ic-prepend-from="/attr-test-1"></div>
<div id="ic-style-src-div1" ic-style-src="color:/attr-test-1"></div>
<div id="ic-attr-src-div1" ic-attr-src="style:/attr-test-1"></div>
<script>
QUnit.test("IC attributes are set on elements", function (assert) {
assert.ok($('#ic-src-div1').attr('ic-id') != null, "Has ID");
assert.ok($('#ic-src-div1').attr('ic-fingerprint') != null, "Has Fingerprint");
assert.ok($('#ic-src-div1').attr('ic-last-refresh') != null, "Has Last Refresh");
assert.ok($('#ic-post-to-div1').attr('ic-id') != null, "Has ID");
assert.ok($('#ic-post-to-div1').attr('ic-fingerprint') != null, "Has Fingerprint");
assert.ok($('#ic-post-to-div1').attr('ic-last-refresh') != null, "Has Last Refresh");
assert.ok($('#ic-append-from-div1').attr('ic-id') != null, "Has ID");
assert.ok($('#ic-append-from-div1').attr('ic-fingerprint') != null, "Has Fingerprint");
assert.ok($('#ic-append-from-div1').attr('ic-last-refresh') != null, "Has Last Refresh");
assert.ok($('#ic-prepend-from-div1').attr('ic-id') != null, "Has ID");
assert.ok($('#ic-prepend-from-div1').attr('ic-fingerprint') != null, "Has Fingerprint");
assert.ok($('#ic-prepend-from-div1').attr('ic-last-refresh') != null, "Has Last Refresh");
assert.ok($('#ic-style-src-div1').attr('ic-id') != null, "Has ID");
assert.ok($('#ic-style-src-div1').attr('ic-fingerprint') != null, "Has Fingerprint");
assert.ok($('#ic-style-src-div1').attr('ic-last-refresh') != null, "Has Last Refresh");
assert.ok($('#ic-attr-src-div1').attr('ic-id') != null, "Has ID");
assert.ok($('#ic-attr-src-div1').attr('ic-fingerprint') != null, "Has Fingerprint");
assert.ok($('#ic-attr-src-div1').attr('ic-last-refresh') != null, "Has Last Refresh");
});
</script>
</div>
</div>
<div id="ic-src-div2" ic-src="/basic_update">Foo</div>
<script>
intercoolerTest("Simple Update",
function (assert) {
$.mockjax({
url: "/basic_update",
responseText: 'Bar'
});
assert.equal($('#ic-src-div2').text(), "Foo", "Updated");
Intercooler.refresh($("#ic-src-div2"));
},
function (assert) {
assert.equal($('#ic-src-div2').text(), "Bar", "Updated");
});
</script>
<div id="ic-src-div3" ic-src="/deps_test1">Foo</div>
<button id="ic-post-to-btn1" ic-post-to="/deps_test1">Click</button>
<script>
intercoolerTest("Dependency update w/ POST",
function (assert) {
var text = "Foo";
$.mockjax({
url: "/deps_test1",
response: function (settings) {
if (settings['type'] == 'POST') {
text = "Bar";
}
this.responseText = text;
}
});
assert.equal($('#ic-src-div3').text(), "Foo", "Updated");
$("#ic-post-to-btn1").click();
},
function (assert) {
assert.equal($('#ic-src-div3').text(), "Bar", "Updated");
});
</script>
<div id="ic-src-div6" ic-src="/deps_put_test1">Foo</div>
<button id="ic-put-to-btn1" ic-put-to="/deps_put_test1">Click</button>
<script>
intercoolerTest("Dependency update w/ PUT",
function (assert) {
var text = "Foo";
$.mockjax({
url: "/deps_put_test1",
response: function (settings) {
if (settings['type'] == 'PUT') {
text = "Bar";
}
this.responseText = text;
}
});
assert.equal($('#ic-src-div6').text(), "Foo", "Updated");
$("#ic-put-to-btn1").click();
},
function (assert) {
assert.equal($('#ic-src-div6').text(), "Bar", "Updated");
});
</script>
<div id="ic-src-div7" ic-src="/deps_delete_test1">Foo</div>
<button id="ic-delete-from-btn1" ic-delete-from="/deps_delete_test1">Click</button>
<script>
intercoolerTest("Dependency update w/ DELETE",
function (assert) {
var text = "Foo";
$.mockjax({
url: "/deps_delete_test1",
response: function (settings) {
if (settings['type'] == 'DELETE') {
text = "Bar";
}
this.responseText = text;
}
});
assert.equal($('#ic-src-div7').text(), "Foo", "Updated");
$("#ic-delete-from-btn1").click();
},
function (assert) {
assert.equal($('#ic-src-div7').text(), "Bar", "Updated");
});
</script>
<span id="get-from-target"></span>
<button id="ic-get-from-btn1" ic-get-from="/get_from_test" ic-target="#get-from-target">Click</button>
<script>
intercoolerTest("ic-get-from test",
function (assert) {
$.mockjax({
url: "/get_from_test",
responseText: "foo"
});
assert.equal($('#get-from-target').text(), "", "Pre");
$("#ic-get-from-btn1").click();
},
function (assert) {
assert.equal($('#get-from-target').text(), "foo", "Updated");
});
</script>
<div id="ic-src-div8">Foo</div>
<button id="ic-delete-from-btn2" ic-delete-from="/deps_delete_test2" ic-target="#ic-src-div8">Click</button>
<script>
intercoolerTest("DELETE with removal",
function (assert) {
$.mockjax({
url: "/deps_delete_test2",
headers: {
'X-IC-Remove': true
}
});
$("#ic-delete-from-btn2").click();
},
function (assert) {
assert.equal($('#ic-src-div8').length, 0);
});
</script>
<div id="ic-src-div4" ic-src="/deps_test2">Foo</div>
<button id="ic-post-to-btn2" ic-post-to="/deps_test2/super">Clicked</button>
<script>
intercoolerTest("Dependency on updated superpath",
function (assert) {
var text = "Foo";
$.mockjax({
url: /\/deps_test2.*/,
response: function (settings) {
if (settings['type'] == 'POST') {
text = "Bar";
}
this.responseText = text;
}
});
assert.equal($('#ic-src-div4').text(), "Foo", "Updated");
$("#ic-post-to-btn2").click();
},
function (assert) {
assert.equal($('#ic-src-div4').text(), "Bar", "Updated");
});
</script>
<div id="ic-src-div5" ic-src="/deps_test3/sub">Foo</div>
<button id="ic-post-to-btn3" ic-post-to="/deps_test3">Clicked</button>
<script>
intercoolerTest("Dependency on updated subpath", function (assert) {
var text = "Foo";
$.mockjax({
url: /deps_test3.*/,
response : function(settings) {
if(settings['type'] == "POST"){
text = "Bar"
}
this.responseText = text
}
});
assert.equal($('#ic-src-div5').text(), "Foo", "Updated");
$("#ic-post-to-btn3").click();
}, function (assert) {
assert.equal($('#ic-src-div5').text(), "Bar", "Updated");
});
</script>
<div id="ic-deps-div1" ic-src="/deps_test4" ic-deps="/deps_test5">Foo</div>
<button id="ic-deps-btn1" ic-post-to="/deps_test5">Clicked</button>
<script>
intercoolerTest("Explicit dependency works", function (assert) {
var text = "Foo";
$.mockjax({
url: "/deps_test4",
response: function (settings) {
this.responseText = text;
}
});
$.mockjax({
url: "/deps_test5",
response: function (settings) {
text = "Bar";
}
});
assert.equal($('#ic-deps-div1').text(), "Foo", "Updated");
$("#ic-deps-btn1").click();
},
function (assert) {
assert.equal($('#ic-deps-div1').text(), "Bar", "Updated");
});
</script>
<ul id="ic-prepend-from-div2" ic-prepend-from="/prepend_from1">
<li>bar</li>
</ul>
<button id="ic-prepend-from-btn1" ic-post-to="/prepend_from1">Clicked</button>
<script>
intercoolerTest("Prepend works properly",
function (assert) {
$.mockjax({
url: "/prepend_from1",
responseText :"<li>foo</li>"
});
assert.equal($('#ic-prepend-from-div2').text().replace(/[ \n]/g, ''), "bar", "Pre-update");
$("#ic-prepend-from-btn1").click();
},
function (assert) {
assert.equal($('#ic-prepend-from-div2').text().replace(/[ \n]/g, ''), "foobar", "Updated");
});
</script>
<ul id="ic-append-from-div2" ic-append-from="/append_from1">
<li>bar</li>
</ul>
<button id="ic-append-from-btn1" ic-post-to="/append_from1">Clicked</button>
<script>
intercoolerTest("Append works properly",
function (assert) {
$.mockjax({
url: "/append_from1",
responseText: "<li>foo</li>"
});
assert.equal($('#ic-append-from-div2').text().replace(/[ \n]/g, ''), "bar", "Pre-update");
$("#ic-append-from-btn1").click();
},
function (assert) {
assert.equal($('#ic-append-from-div2').text().replace(/[ \n]/g, ''), "barfoo", "Updated");
});
</script>
<button id="eval-btn" ic-post-to="/frontmatter_eval">Eval</button>
<script>
intercoolerTest("Eval header works",
function () {
$.mockjax({
url: "/frontmatter_eval",
headers: {
"X-IC-Script": "window.eval_test_var2 = 10;"
}
});
$("#eval-btn").click();
},
function (assert) {
assert.equal(window.eval_test_var2, 10);
});
</script>
<form ic-post-to="/form_target">
<button id="form-btn">Submit</button>
</form>
<script>
intercoolerTest("Form submission works",
function (assert) {
$.mockjax({
url: "/form_target",
responseText : "<span id='form-after-submit'></span>"
});
$("#form-btn").click();
},
function (assert) {
assert.equal($("#form-after-submit").length, 1);
});
</script>
<form ic-post-to="/form_target2">
<input id="form_target2_btn" type="submit" ic-post-to="somewhere" value="Submit" />
</form>
<script>
intercoolerTest("Form submission with submit button works",
function (assert) {
$.mockjax({
url: "/form_target2",
responseText : "<span id='form-after-submit2'></span>"
});
$("#form_target2_btn").click();
},
function (assert) {
assert.equal($("#form-after-submit2").length, 1);
});
</script>
<form id="form_target3_form" ic-post-to="/form_target3">
</form>
<script>
intercoolerTest("Form submission works on direct form submission",
function (assert) {
$.mockjax({
url: "/form_target3",
responseText : "<span id='form-after-submit3'></span>"
});
$("#form_target3_form").submit();
},
function (assert) {
assert.equal($("#form-after-submit3").length, 1);
});
</script>
<div id="fp-test" ic-post-to="/fp_test"><span>Foo</span></div>
<script>
(function(){
var originalFp;
var t1;
intercoolerTest("Fingerprint is stable between requests",
function () {
$.mockjax({
url: "/fp_test",
responseText: '<span>Foo</span>'
});
originalFp = $("#fp-test").attr('ic-fingerprint');
t1 = $("#fp-test").html();
$("#fp-test").click();
},
function (assert) {
var t2 = $("#fp-test").html();
var finalFp = $("#fp-test").attr('ic-fingerprint');
assert.equal(t1, t2);
assert.equal(originalFp, finalFp);
});
})();
</script>
<div id="fp-test-2" ic-post-to="/2fp_test"><span>Foo</span></div>
<script>
(function () {
var originalFp;
var t1;
intercoolerTest("Fingerprint changes with new content",
function () {
$.mockjax({
url: "/2fp_test",
responseText: '<span>Bar</span>'
});
originalFp = $("#fp-test-2").attr('ic-fingerprint');
t1 = $("#fp-test-2").html();
$("#fp-test-2").click();
},
function () {
var t2 = $("#fp-test-2").html();
notEqual(t1, t2);
var finalFp = $("#fp-test-2").attr('ic-fingerprint');
notEqual(originalFp, finalFp);
});
})();
</script>
<div id="refresh-api-test" ic-src="/refresh-api-test">Foo</div>
<script>
intercoolerTest("Intercooler.refresh() with element works",
function () {
$.mockjax({
url: "/refresh-api-test",
responseText: 'Bar'
});
Intercooler.refresh($('#refresh-api-test'));
},
function (assert) {
assert.equal('Bar', $('#refresh-api-test').text());
});
</script>
<div id="refresh-api-test-2" ic-src="/2refresh-api-test">Foo</div>
<script>
intercoolerTest("Intercooler.refresh() with path works",
function () {
$.mockjax({
url: "/2refresh-api-test",
responseText: 'Bar'
});
Intercooler.refresh('/2refresh-api-test');
},
function (assert) {
assert.equal('Bar', $('#refresh-api-test-2').text());
});
</script>
<div id="define-transition-1" ic-src="/define-transition-test" ic-transition="custom">Foo</div>
<script>
(function () {
var counter = 0;
intercoolerTest("Custom transitions work",
function () {
Intercooler.defineTransition('custom', {
newContent: function (parent, content, reverse, replaceParent, after) {
counter++;
parent.html(content);
after();
}
});
$.mockjax({
url: "/define-transition-test",
responseText: 'Bar'
});
Intercooler.refresh('/define-transition-test');
},
function (assert) {
assert.equal('Bar', $('#define-transition-1').text());
assert.equal(1, counter);
});
})()
</script>
<div id="indicator-test" ic-post-to="/indicator"><strong id="indicator1" class="ic-indicator" style="display:none">loading...</strong> Foo
</div>
<script>
intercoolerTest("Test indicator as class",
function (assert) {
$.mockjax({ url: "/indicator" });
$("#indicator-test").click();
assert.equal('inline', $('#indicator1').css('display'));
},
function (assert) {
assert.equal('none', $('#indicator1').css('display'));
});
</script>
<strong id="indicator2">loading...</strong>
<div id="indicator-test-2" ic-post-to="/indicator2" ic-indicator="#indicator2"> Foo</div>
<script>
intercoolerTest("Test indicator as an attribute",
function (assert) {
$.mockjax({ url: "/indicator2" });
$("#indicator-test-2").click();
},
function (assert) {
assert.equal('none', $('#indicator2').css('display'));
});
</script>
<strong id="indicator3">loading...</strong>
<div ic-indicator="#indicator3">
<div id="indicator-test-3" ic-post-to="/indicator3"> Foo</div>
</div>
<script>
intercoolerTest("Test indicator as an attribute on a parent",
function () {
$.mockjax({ url: "/indicator3" });
$("#indicator-test-3").click();
}, function (assert) {
assert.equal('none', $('#indicator3').css('display'));
});
</script>
<div id="target-target"></div>
<div id="target-test" ic-post-to="/target_test" ic-target="#target-target"></div>
<script>
intercoolerTest("Target attribute works", function () {
$.mockjax({
url: "/target_test",
responseText: "foo"
});
$("#target-test").click();
},
function (assert) {
assert.equal('foo', $('#target-target').text());
});
</script>
<ul id="target-target-append">
<li>bar</li>
</ul>
<div id="target-test-append" ic-post-to="/append_target_test" ic-transition='append'
ic-target="#target-target-append"></div>
<script>
intercoolerTest("Target attribute works with append", function () {
$.mockjax({
url: "/append_target_test",
responseText: "<li>foo</li>"
});
$("#target-test-append").click();
},
function (assert) {
assert.equal('barfoo', $('#target-target-append').text().replace(/[ \n]/g, ''));
});
</script>
<ul id="target-target-prepend">
<li>bar</li>
</ul>
<div id="target-test-prepend" ic-post-to="/prepend_target_test" ic-transition='prepend'
ic-target="#target-target-prepend"></div>
<script>
intercoolerTest("Target attribute works with prepend",
function () {
$.mockjax({
url: "/prepend_target_test",
responseText: '<li>foo</li>'
});
$("#target-test-prepend").click();
},
function (assert) {
assert.equal('foobar', $('#target-target-prepend').text().replace(/[ \n]/g, ''));
});
</script>
<ul id="prepend-limit" ic-limit-children="3">
</ul>
<div id="prepend-btn" ic-post-to="/prepend_limit" ic-transition='prepend' ic-target="#prepend-limit"></div>
<script>
intercoolerTest("ic-limit-children works with prepend",
function () {
var i = 0;
$.mockjax({
url: "/prepend_limit",
response: function () {
i++;
this.responseText = '<li>' + i + '</li>';
}
});
$("#prepend-btn").click();
setTimeout(function(){ $("#prepend-btn").click(); }, 100);
setTimeout(function(){ $("#prepend-btn").click(); }, 200);
setTimeout(function(){ $("#prepend-btn").click(); }, 300);
setTimeout(function(){ $("#prepend-btn").click(); }, 400);
setTimeout(function(){ $("#prepend-btn").click(); }, 500);
},
function (assert) {
assert.equal('654', $('#prepend-limit').text().replace(/[ \n]/g, ''));
}, 600);
</script>
<ul id="append-limit" ic-limit-children="3">
</ul>
<div id="append-btn" ic-post-to="/append_limit" ic-transition='append' ic-target="#append-limit"></div>
<script>
intercoolerTest("ic-limit-children works with append and target",
function () {
var i = 0;
$.mockjax({
url: "/append_limit",
response: function () {
i++;
this.responseText = '<li>' + i + '</li>';
}
});
$("#append-btn").click();
setTimeout(function(){ $("#append-btn").click(); }, 100);
setTimeout(function(){ $("#append-btn").click(); }, 200);
setTimeout(function(){ $("#append-btn").click(); }, 300);
setTimeout(function(){ $("#append-btn").click(); }, 400);
setTimeout(function(){ $("#append-btn").click(); }, 500);
},
function (assert) {
assert.equal('456', $('#append-limit').text().replace(/[ \n]/g, ''));
}, 600);
</script>
<input id="hidden-input" type="hidden" name="hidden" value="foo">
<div id="include-works" ic-post-to="/include_works" ic-include="#hidden-input"></div>
<script>
intercoolerTest("ic-include works",
function (assert) {
$.mockjax({
url: "/include_works",
response: function (settings) {
var params = parseParams(settings.data);
this.responseText = params['hidden'];
}
});
$("#include-works").click();
},
function (assert) {
assert.equal('foo', $("#include-works").text());
});
</script>
<input id="trigger-on-works" ic-src="/trigger_test" ic-verb="POST" ic-trigger-on="focus"/>
<script>
intercoolerTest("ic-trigger-on works",
function (assert) {
$.mockjax({
url: "/trigger_test",
responseText: "foo"
});
$("#trigger-on-works").focus();
},
function (assert) {
assert.equal('foo', $("#trigger-on-works").text());
});
</script>
<span id="ic-verb-btn1" ic-src="/verb_test" ic-verb="PUT" ic-trigger-on="click"></span>
<span id="ic-verb-btn2" ic-src="/verb_test" ic-verb="POST" ic-trigger-on="click"></span>
<script>
intercoolerTest("ic-verb works", function () {
$.mockjax({
url: "/verb_test",
response: function (settings) {
this.responseText = settings.type;
}
});
$("#ic-verb-btn1").click();
$("#ic-verb-btn2").click();
},
function (assert) {
assert.equal('PUT', $("#ic-verb-btn1").text());
assert.equal('POST', $("#ic-verb-btn2").text());
});
</script>
<!--TODO cgross: how to test polling? -->
<!--<span id="poll-span" ic-src="/poll_test" ic-poll='1s'></span>-->
<!--<script>-->
<!--intercoolerTest("ic-poll updates content",-->
<!--function (assert) {-->
<!--$.mockjax({-->
<!--url: "/poll_test",-->
<!--responseText: "updated",-->
<!--headers: {'X-IC-CancelPolling': true}-->
<!--});-->
<!--assert.equal("", $("#poll-span").text());-->
<!--},-->
<!--function (assert) {-->
<!--equal("updated", $("#poll-span").text());-->
<!--}, 2000);-->
<!--</script>-->
<span id="style-src" ic-style-src="font-style:/style_test" ic-trigger-on="click">Foo</span>
<script>
intercoolerTest("ic-style-src updates style",
function () {
$.mockjax({
url: "/style_test",
responseText: "italic"
});
$("#style-src").click();
},
function (assert) {
assert.equal("italic", $("#style-src").css('font-style'));
});
</script>
<span id="attr-src" ic-attr-src="foo:/attr_test" ic-trigger-on="click">Foo</span>
<script>
intercoolerTest("ic-attr-src updates attr", function () {
$.mockjax({
url: "/attr_test",
responseText: "bar"
});
$("#attr-src").click();
},
function (assert) {
assert.equal("bar", $("#attr-src").attr('foo'));
});
</script>
<span id="log-test" ic-post-to="/log_test">Foo</span>
<script>
(function () {
var logged = false;
intercoolerTest("Log event happens properly",
function () {
$('#log-test').on('log.ic', function (e, msg) {
logged = true;
});
$.mockjax({url: "/log_test"});
$("#log-test").click();
},
function (assert) {
assert.equal(true, logged);
});
})()
</script>
<span id="header_1" ic-post-to="/ic_header_1"></span>
<script>
(function () {
var called = false;
intercoolerTest("IC-Trigger Header", function (assert) {
$('body').on('trigger_test_1', function () {
called = true;
});
$.mockjax({
url: "/ic_header_1",
'headers': {
'X-IC-Trigger': 'trigger_test_1'
}
});
assert.equal(false, called);
$("#header_1").click();
},
function (assert) {
assert.equal(true, called);
});
})();
</script>
<span id="header_2" ic-post-to="/ic_header_2"></span>
<script>
(function () {
var obj = null;
intercoolerTest("IC-Trigger Header With Single Arg",
function () {
$('body').on('trigger_test_2', function (e, data) {
obj = data;
});
$.mockjax({
url: "/ic_header_2",
headers: {
'X-IC-Trigger': 'trigger_test_2',
'X-IC-Trigger-Data': '{"foo" : "bar"}'
}
});
$("#header_2").click();
},
function (assert) {
assert.equal("bar", obj.foo);
});
})()
</script>
<span id="header_3" ic-post-to="/ic_header_3"></span>
<script>
(function () {
var obj = null;
intercoolerTest("IC-Trigger Header With Array Args",
function () {
$('body').on('trigger_test_2', function (e, a1, a2, a3) {
obj = a3;
});
$.mockjax({
url: "/ic_header_3",
'headers': {
'X-IC-Trigger': 'trigger_test_2',
'X-IC-Trigger-Data': '[1, 2, 3]'
}
});
$("#header_3").click();
},
function (assert) {
assert.equal(3, obj);
});
})();
</script>
<span id="double_request_test" ic-post-to="/double_req_test">Text</span>
<script>
intercoolerTest("No double-wiring of events after a refresh",
function () {
var count = 0;
$.mockjax({
url: "/double_req_test",
response: function () {
count += 1;
this.responseText = "" + count;
}
});
$("#double_request_test").click();
$("#double_request_test").click();
},
function (assert) {
assert.equal("2", $("#double_request_test").text());
});
</script>
<span id="child_wiring_test" ic-post-to="/child_wiring_test" ic-trigger-on='focus'></span>
<script>
intercoolerTest("Children are wired in properly",
function () {
$.mockjax({
url: "/child_wiring_test",
responseText: "<span id='child_wiring_test2' ic-post-to='/new_child_wiring_test'></span>"
});
$.mockjax({
url: "/new_child_wiring_test",
responseText: "Updated"
});
Intercooler.refresh($("#child_wiring_test"));
setTimeout(function () {
$("#child_wiring_test2").click();
}, 50);
},
function (assert) {
assert.equal("Updated", $("#child_wiring_test2").text());
},
100);
</script>
<span id="double_eval_of_scripts" ic-post-to="/double_eval"></span>
<script>
intercoolerTest("Scripts are evaluated once", function () {
$.mockjax({
url: "/double_eval",
responseText: "New Content.. <scrip" + "t>window.double_eval = window.double_eval + 1;" + "</s" + "cript>"
});
window.double_eval = 0;
$("#double_eval_of_scripts").click();
},
function (assert) {
assert.equal(window.double_eval, 1);
});
</script>
<span id="ic_on_event_test" ic-on-beforeSend="icOnBeforeSend++" ic-post-to="/before_send"></span>
<script>
var icOnBeforeSend = 0;
intercoolerTest("ic-on-beforeSend is invoked",
function (assert) {
$.mockjax({
url: '/before_send'
});
$("#ic_on_event_test").click();
},
function(assert) {
equal(icOnBeforeSend, 1);
});
</script>
<span ic-on-beforeSend="picOnBeforeSend++">
<span id="parent_ic_on_event_test" ic-post-to="/parent_before_send"></span>
</span>
<script>
var picOnBeforeSend = 0;
intercoolerTest("ic-on-beforeSend is invoked on parent",
function (assert) {
$.mockjax({
url: '/parent_before_send'
});
$("#parent_ic_on_event_test").click();
},
function(assert) {
equal(picOnBeforeSend, 1);
});
</script>
<span id="ic_replace_target_test" ic-post-to="/ic_replace_target_test" ic-replace-target="true"></span>
<script>
intercoolerTest("ic-replace-target replaces itself", function (assert) {
$.mockjax({
url: "/ic_replace_target_test",
responseText: "<span>asdf</span>"
});
assert.equal($("#ic_replace_target_test").click().length, 1);
},
function (assert) {
assert.equal($("#ic_replace_target_test").length, 0);
});
</script>
<div>
<span id="closest-test"></span>
<span id="closest-test-btn" ic-post-to="/closest_target_test" ic-target="closest div"></span>
</div>
<script>
intercoolerTest("ic-target with a closest expression works", function (assert) {
$.mockjax({
url: "/closest_target_test",
responseText: "<span>asdf</span>"
});
assert.equal($("#closest-test").length, 1);
$("#closest-test-btn").click();
},
function (assert) {
assert.equal($("#closest-test").length, 0);
});
</script>
<div>
<span id="delay-test1" ic-post-to="/ic_delay_test1" ic-trigger-delay="500ms">0</span>
</div>
<script>
QUnit.test("ic-trigger with a delay clause fires after delay", function (assert) {
var done = assert.async();
var calls = 0;
$.mockjax({
url: "/ic_delay_test1",
response: function() {
calls++;
this.responseText = "" + calls;
}
});
assert.equal($("#delay-test1").html(), "0");
$("#delay-test1").click();
assert.equal($("#delay-test1").html(), "0");
setTimeout(function () {
assert.equal($("#delay-test1").html(), "0"); // Should not have fired yet
}, 200);
setTimeout(function () {
assert.equal($("#delay-test1").html(), "1"); // Should have fired by now
done();
}, 800);
});
</script>
<div>
<span id="delay-test2" ic-post-to="/ic_delay_test2" ic-trigger-delay="500ms">0</span>
</div>
<script>
QUnit.test("ic-trigger with a delay does not cause multiple calls to issue", function (assert) {
var done = assert.async();
var calls = 0;
$.mockjax({
url: "/ic_delay_test2",
response: function() {
calls++;
this.responseText = "" + calls;
}
});
assert.equal($("#delay-test2").html(), "0");
$("#delay-test2").click();
assert.equal($("#delay-test2").html(), "0");
setTimeout(function(){
$("#delay-test2").click();
assert.equal($("#delay-test2").html(), "0");
}, 50);
setTimeout(function () {
assert.equal($("#delay-test2").html(), "0"); // Should not have fired yet
}, 200);
setTimeout(function () {
assert.equal($("#delay-test2").html(), "1"); // Should have fired by now, but only once
done();
}, 800);
});
</script>
<div>
<span id="double-click-span" ic-post-to="/double_click">0</span>
</div>
<script>
intercoolerTest("trigger during request on element is caught and deferred", function (assert) {
var calls = 0;
$.mockjax({
url: "/double_click",
response: function() {
calls++;
this.responseText = "" + calls;
}
});
assert.equal($("#double-click-span").text(), "0");
$("#double-click-span").click().click();
assert.equal($("#double-click-span").text(), "0");
},
function (assert) {
assert.equal($("#double-click-span").text(), "2");
});
</script>
<div>
<span id="triple-click-span" ic-post-to="/triple_click">0</span>
</div>
<script>
intercoolerTest("only one deferred trigger is fired", function (assert) {
var calls = 0;
$.mockjax({
url: "/triple_click",
response: function() {
calls++;
this.responseText = "" + calls;
}
});
assert.equal($("#triple-click-span").text(), "0");
$("#triple-click-span").click().click().click();
assert.equal($("#triple-click-span").text(), "0");
},
function (assert) {
assert.equal($("#triple-click-span").text(), "2");
});
</script>
<div>
<form ic-post-to="/child_trigger">
<input id="child-trigger-input" name="child-trigger-input" type="text" ic-trigger-on="keyup"/>
</form>
</div>
<script>
intercoolerTest("Child trigger works", function (assert) {
$.mockjax({
url: "/child_trigger",
response: function(settings) {
var params = parseParams(settings.data);
assert.equal(params['ic-trigger-id'], "child-trigger-input");
assert.equal(params['ic-trigger-name'], "child-trigger-input");
this.responseText = "<!-- nothing -->";
}
});
assert.equal($("#child-trigger-input").length, 1);
$("#child-trigger-input").keyup();
},
function (assert) {
assert.equal($("#child-trigger-input").length, 0);
});
</script>
</div>
</body>
</html>