intercooler
Version:
Making AJAX as easy as anchor tags
734 lines (671 loc) • 22.1 kB
HTML
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<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="">
<link rel="shortcut icon" href="./img/icon.png">
<title>Intercooler.JS - The Javascript-optional AJAX library</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.12.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.3.2.js"></script>
<link rel="stylesheet" href="http://code.jquery.com/qunit/qunit-1.12.0.css">
<script>
$(function () {
Intercooler.defaultTransition('none');
});
</script>
</head>
<body>
<div class="container">
<h1>IntercoolerJS Test Suite</h1>
<p>Below are all the tests for the IntercoolerJS library. New tests should follow the existing templates</p>
</div>
<div class="container">
<div id="qunit"></div>
<div id="qunit-fixture"></div>
</div>
<div class="container">
<div class="row">
<div class="col-md-12">
<h2>Core Tests</h2>
</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>
test("IC attributes are set on elements", function () {
ok($('#ic-src-div1').attr('ic-id') != null, "Has ID");
ok($('#ic-src-div1').attr('ic-fingerprint') != null, "Has Fingerprint");
ok($('#ic-src-div1').attr('ic-last-refresh') != null, "Has Last Refresh");
ok($('#ic-post-to-div1').attr('ic-id') != null, "Has ID");
ok($('#ic-post-to-div1').attr('ic-fingerprint') != null, "Has Fingerprint");
ok($('#ic-post-to-div1').attr('ic-last-refresh') != null, "Has Last Refresh");
ok($('#ic-append-from-div1').attr('ic-id') != null, "Has ID");
ok($('#ic-append-from-div1').attr('ic-fingerprint') != null, "Has Fingerprint");
ok($('#ic-append-from-div1').attr('ic-last-refresh') != null, "Has Last Refresh");
ok($('#ic-prepend-from-div1').attr('ic-id') != null, "Has ID");
ok($('#ic-prepend-from-div1').attr('ic-fingerprint') != null, "Has Fingerprint");
ok($('#ic-prepend-from-div1').attr('ic-last-refresh') != null, "Has Last Refresh");
ok($('#ic-style-src-div1').attr('ic-id') != null, "Has ID");
ok($('#ic-style-src-div1').attr('ic-fingerprint') != null, "Has Fingerprint");
ok($('#ic-style-src-div1').attr('ic-last-refresh') != null, "Has Last Refresh");
ok($('#ic-attr-src-div1').attr('ic-id') != null, "Has ID");
ok($('#ic-attr-src-div1').attr('ic-fingerprint') != null, "Has Fingerprint");
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>
test("Simple update", function () {
Intercooler.addURLHandler({
"url": "/basic_update",
"get": function (url, params) {
return '<div id="ic-src-div2" ic-src="/basic_update">Bar</div>'
}
});
equal($('#ic-src-div2').text(), "Foo", "Updated");
Intercooler.refresh($("#ic-src-div2"));
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>
test("Dependency update w/ POST", function () {
var text = "Foo";
Intercooler.addURLHandler({
"url": "/deps_test1",
"get": function (url, params) {
return '<div id="ic-src-div3" ic-src="/deps_test1">' + text + '</div>';
},
"post": function (url, params) {
text = "Bar"
}
});
equal($('#ic-src-div3').text(), "Foo", "Updated");
$("#ic-post-to-btn1").click();
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>
test("Dependency update w/ PUT", function () {
var text = "Foo";
Intercooler.addURLHandler({
"url": "/deps_put_test1",
"get": function (url, params) {
return '<div id="ic-src-div6" ic-src="/deps_put_test1">' + text + '</div>';
},
"put": function (url, params) {
equal(params['_method'], "PUT");
text = "Bar";
}
});
equal($('#ic-src-div6').text(), "Foo", "Updated");
$("#ic-put-to-btn1").click();
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>
test("Dependency update w/ DELETE", function () {
var text = "Foo";
Intercooler.addURLHandler({
"url": "/deps_delete_test1",
"get": function (url, params) {
return '<div id="ic-src-div7" ic-src="/deps_delete_test1">' + text + '</div>';
},
"delete": function (url, params) {
equal(params['_method'], "DELETE");
text = "Bar";
}
});
equal($('#ic-src-div7').text(), "Foo", "Updated");
$("#ic-delete-from-btn1").click();
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>
test("ic-get-from test", function () {
var text = "Foo";
Intercooler.addURLHandler({
"url": "/get_from_test",
"get": function () {
return "foo";
}
});
equal($('#get-from-target').text(), "", "Pre");
$("#ic-get-from-btn1").click();
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>
test("DELETE with removal", function () {
Intercooler.addURLHandler({
"url": "/deps_delete_test2",
"delete": function (url, params) {
return {
'headers': {
'X-IC-Remove': true
},
'body': ""
}
}
});
$("#ic-delete-from-btn2").click();
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>
test("Dependency on updated superpath", function () {
var text = "Foo";
Intercooler.addURLHandler({
"url": "/deps_test2",
"get": function (url, params) {
return '<div id="ic-src-div4" ic-src="/deps_test2">' + text + '</div>';
},
"post": function (url, params) {
text = "Bar"
}
});
equal($('#ic-src-div4').text(), "Foo", "Updated");
$("#ic-post-to-btn2").click();
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>
test("Dependency on updated subpath", function () {
var text = "Foo";
Intercooler.addURLHandler({
"url": "/deps_test3",
"get": function (url, params) {
return '<div id="ic-src-div5" ic-src="/deps_test3/sub">' + text + '</div>';
},
"post": function (url, params) {
text = "Bar"
}
});
equal($('#ic-src-div5').text(), "Foo", "Updated");
$("#ic-post-to-btn3").click();
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>
test("Explicit dependency works", function () {
var text = "Foo";
Intercooler.addURLHandler({
"url": "/deps_test4",
"get": function (url, params) {
return '<div id="ic-deps-div1" ic-src="/deps_test4" ic-deps="/deps_test5">' + text + '</div>';
}
});
Intercooler.addURLHandler({
"url": "/deps_test5",
"post": function (url, params) {
text = "Bar";
}
});
equal($('#ic-deps-div1').text(), "Foo", "Updated");
$("#ic-deps-btn1").click();
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>
test("Explicit dependency works 2", function () {
var text = "Foo";
Intercooler.addURLHandler({
"url": "/prepend_from1",
"get": function (url, params) {
return "<li>foo</li>";
}
});
equal($('#ic-prepend-from-div2').text().replace(/[ \n]/g, ''), "bar", "Pre-update");
$("#ic-prepend-from-btn1").click();
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>
test("Explicit dependency works 2", function () {
var text = "Foo";
Intercooler.addURLHandler({
"url": "/append_from1",
"get": function (url, params) {
return "<li>foo</li>";
}
});
equal($('#ic-append-from-div2').text().replace(/[ \n]/g, ''), "bar", "Pre-update");
$("#ic-append-from-btn1").click();
equal($('#ic-append-from-div2').text().replace(/[ \n]/g, ''), "barfoo", "Updated");
});
</script>
<button id="eval-btn" ic-post-to="/frontmatter_eval">Eval</button>
<script>
test("Eval works", function () {
Intercooler.addURLHandler({
"url": "/frontmatter_eval",
"post": function () {
return {
"headers": {
"X-IC-Script": "window.eval_test_var2 = 10;"
},
body: ""
};
}
});
$("#eval-btn").click();
equal(window.eval_test_var2, 10);
});
</script>
<form ic-post-to="/form_target">
<button id="form-btn">Submit</button>
</form>
<script>
test("Form submission works", function () {
Intercooler.addURLHandler({
"url": "/form_target",
"post": function () {
return {
body: "<span id='form-after-submit'></span>"
};
}
});
$("#form-btn").click();
equal($("#form-after-submit").length, 1);
});
</script>
<div id="fp-test" ic-post-to="/fp_test"><span>Foo</span></div>
<script>
test("Fingerprint is stable between requests", function () {
Intercooler.addURLHandler({
"url": "/fp_test",
"post": function () {
return {
body: '<span>Foo</span>'
};
}
});
var originalFp = $("#fp-test").attr('ic-fingerprint');
var t1 = $("#fp-test").html();
$("#fp-test").click();
var t2 = $("#fp-test").html();
var finalFp = $("#fp-test").attr('ic-fingerprint');
equal(t1, t2);
equal(originalFp, finalFp);
});
</script>
<div id="fp-test-2" ic-post-to="/2fp_test"><span>Foo</span></div>
<script>
test("Fingerprint changes with new content", function () {
Intercooler.addURLHandler({
"url": "/2fp_test",
"post": function () {
return {
body: '<span>Bar</span>'
};
}
});
var originalFp = $("#fp-test-2").attr('ic-fingerprint');
var t1 = $("#fp-test-2").html();
$("#fp-test-2").click();
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>
test("Intercooler.refresh() with element works", function () {
Intercooler.addURLHandler({
"url": "/refresh-api-test",
"get": function () {
return {
body: 'Bar'
};
}
});
Intercooler.refresh($('#refresh-api-test'));
equal('Bar', $('#refresh-api-test').text());
});
</script>
<div id="refresh-api-test-2" ic-src="/2refresh-api-test">Foo</div>
<script>
test("Intercooler.refresh() with path works", function () {
Intercooler.addURLHandler({
"url": "/2refresh-api-test",
"get": function () {
return {
body: 'Bar'
};
}
});
Intercooler.refresh('/2refresh-api-test');
equal('Bar', $('#refresh-api-test-2').text());
});
</script>
<div id="define-transition-1" ic-src="/define-transition-test" ic-transition="custom">Foo</div>
<script>
test("Custom transitions work", function () {
var counter = 0;
Intercooler.defineTransition('custom', {
newContent : function(parent, content, reverse, after) {
counter++;
parent.html(content);
after();
}
});
Intercooler.addURLHandler({
"url": "/define-transition-test",
"get": function () {
return {
body: 'Bar'
};
}
});
Intercooler.refresh('/define-transition-test');
equal('Bar', $('#define-transition-1').text());
equal(1, counter);
});
</script>
<div id="define-transition-2" ic-src="/2define-transition-test">Foo</div>
<script>
test("Default transitions work", function () {
var counter = 0;
Intercooler.defineTransition('custom', {
newContent : function(parent, content, reverse, after) {
counter++;
parent.html(content);
after();
}
});
Intercooler.defaultTransition('custom');
Intercooler.addURLHandler({
"url": "/2define-transition-test",
"get": function () {
return {
body: 'Bar'
};
}
});
Intercooler.refresh('/2define-transition-test');
equal('Bar', $('#define-transition-2').text());
equal(1, counter);
Intercooler.defaultTransition('none');
});
</script>
<div id="indicator-test" ic-post-to="/indicator"><strong id="indicator1" class="ic-indicator">loading...</strong> Foo</div>
<script>
test("Test indicator as class", function () {
Intercooler.addURLHandler({
"url": "/indicator",
"post": function () {
return {
body: ''
};
}
});
$("#indicator-test").click();
equal('none', $('#indicator1').css('display'));
});
</script>
<strong id="indicator2">loading...</strong>
<div id="indicator-test-2" ic-post-to="/2indicator" ic-indicator="#indicator2"> Foo</div>
<script>
test("Test indicator as an attribute", function () {
Intercooler.addURLHandler({
"url": "/2indicator",
"post": function () {
return {
body: ''
};
}
});
$("#indicator-test-2").click();
equal('none', $('#indicator2').css('display'));
});
</script>
<strong id="indicator3">loading...</strong>
<div ic-indicator="#indicator3">
<div id="indicator-test-3" ic-post-to="/3indicator"> Foo</div>
</div>
<script>
test("Test indicator as an attribute", function () {
Intercooler.addURLHandler({
"url": "/3indicator",
"post": function () {
return {
body: ''
};
}
});
$("#indicator-test-3").click();
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>
test("Target attribute works", function () {
Intercooler.addURLHandler({
"url": "/target_test",
"post": function () {
return 'foo';
}
});
$("#target-test").click();
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>
test("Target attribute works with append", function () {
Intercooler.addURLHandler({
"url": "/append_target_test",
"post": function () {
return '<li>foo</li>';
}
});
$("#target-test-append").click();
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>
test("Target attribute works with prepend", function () {
Intercooler.addURLHandler({
"url": "/prepend_target_test",
"post": function () {
return '<li>foo</li>';
}
});
$("#target-test-prepend").click();
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>
test("ic-limit-children works with prepend", function () {
var i = 0;
Intercooler.addURLHandler({
"url": "/prepend_limit",
"post": function () {
i++;
return '<li>' + i + '</li>';
}
});
$("#prepend-btn").click().click().click().click().click().click();
equal('654', $('#prepend-limit').text().replace(/[ \n]/g,''));
});
</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>
test("ic-limit-children works with append", function () {
var i = 0;
Intercooler.addURLHandler({
"url": "/append_limit",
"post": function () {
i++;
return '<li>' + i + '</li>';
}
});
$("#append-btn").click().click().click().click().click().click();
equal('456', $('#append-limit').text().replace(/[ \n]/g,''));
});
</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>
test("ic-include works", function () {
Intercooler.addURLHandler({
"url": "/include_works",
"post": function (url, params) {
return params['hidden'];
}
});
equal('foo', $("#include-works").click().text());
});
</script>
<input id="trigger-on-works" ic-src="/trigger_test" ic-verb="POST" ic-trigger-on="focus"/>
<script>
test("ic-trigger-on works", function () {
Intercooler.addURLHandler({
"url": "/trigger_test",
"post": function (url, params) {
return "foo";
}
});
equal('foo', $("#trigger-on-works").focus().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>
test("ic-verb works", function () {
Intercooler.addURLHandler({
"url": "/verb_test",
"post": function (url, params) {
return "post";
},
"put": function (url, params) {
return "put";
}
});
equal('put', $("#ic-verb-btn1").click().text());
equal('post', $("#ic-verb-btn2").click().text());
});
</script>
<span id="poll-span" ic-src="/poll_test" ic-poll='300ms'></span>
<script>
asyncTest("ic-poll updates content", function () {
Intercooler.addURLHandler({
"url": "/poll_test",
"get": function () {
return "updated";
}
});
equal("", $("#poll-span").text());
setTimeout(function () {
equal("updated", $("#poll-span").text());
start();
}, 500);
});
</script>
<span id="style-src" ic-style-src="font-style:/style_test" ic-trigger-on="click">Foo</span>
<script>
test("ic-style-src updates style", function () {
Intercooler.addURLHandler({
"url": "/style_test",
"get": function () {
return "italic";
}
});
equal("italic", $("#style-src").click().css('font-style'));
});
</script>
<span id="attr-src" ic-attr-src="foo:/attr_test" ic-trigger-on="click">Foo</span>
<script>
test("ic-attr-src updates attr", function () {
Intercooler.addURLHandler({
"url": "/attr_test",
"get": function () {
return "bar";
}
});
equal("bar", $("#attr-src").click().attr('foo'));
});
</script>
<span id="log-test" ic-post-to="/log_test">Foo</span>
<script>
test("Log event happens properly", function () {
var logged = false;
$('#log-test').on('log.ic', function(e, msg){
logged = true;
});
Intercooler.addURLHandler({
"url": "/log_test",
"post": function () {
return "";
}
});
$("#log-test").click();
equal(true, logged);
});
</script>
</div>
</body>
</html>