dojox
Version:
Dojo eXtensions, a rollup of many useful sub-projects and varying states of maturity – from very stable and robust, to alpha and experimental. See individual projects contain README files for details.
321 lines (272 loc) • 11.2 kB
HTML
<html>
<head>
<title>dojox.rails test</title>
<style type="text/css">
body {
font-family: helvetica;
}
.test-container {
width: 800px;
margin-bottom: 20px;
}
.test-container:after {
clear: both;
}
.test-container div {
float: left;
margin-right: 20px;
}
.description {
width: 400px;
border: 1px solid #ccc;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
padding: 10px;
}
span.clb {
display: block;
clear: both;
}
</style>
<script src="../../../dojo/dojo.js" data-dojo-config="isDebug:true, parseOnLoad:true"></script>
<script type="text/javascript">
// dojo.registerModulePath('dojox.rails.tests.plugd', '../dojox/rails/tests/plugd');
dojo.require('doh.runner');
dojo.require('dojox.rails');
dojo.require('dojox.rails.tests.plugd.trigger');
dojo.require('dojo.NodeList-manipulate');
var subscriptions = [];
function createDom(){
var q = dojo.query;
q('#data-confirm-link-container').append('<a href="/foo/url" data-confirm="Are you sure?">click me!</a>');
q('#data-confirm-input-container').append('<input data-confirm="Are you sure?" name="commit" type="submit" value="Post" />');
q('#data-remote-success-link-container').append('<a href="success_response.html" data-type="text" data-remote="true">click me to load!</a>');
q('#data-remote-failure-link-container').append('<a href="failure_response.html" data-remote="true">click me to fail!</a>');
}
function listenForEvents(expectedNode, events){
for (var k in events){
var s = dojo.subscribe(k, (function(k){
return function(el, response, ioArgs){
if (el == expectedNode){ events[k] = true; }
};
})(k));
subscriptions.push(s);
}
}
function assertEvents(deferred, timeout, events){
setTimeout(function(){
for (var k in events){
console.debug("assertEvents: ", k, events[k]);
if (!events[k]){
deferred.errback(new Error(k + ' event was not dispatched'));
return;
}
}
deferred.callback(true);
}, timeout);
}
function unsubscribe(){
dojo.forEach(subscriptions, function(s){
dojo.unsubscribe(s);
});
}
dojo.addOnLoad(function(){
createDom();
doh.register('data-remote', [
{
name: 'success events',
timeout: 3000,
tearDown: unsubscribe,
runTest: function() {
var d = new doh.Deferred();
var snl = dojo.query('#data-remote-success-link-container a');
var successEvents = { 'ajax:success': false, 'ajax:complete': false, 'ajax:after': false };
listenForEvents(snl[0], successEvents);
snl.trigger('click');
assertEvents(d, 300, successEvents);
return d;
}
},
{
name: 'failure events',
timeout: 3000,
tearDown: unsubscribe,
runTest: function() {
var d = new doh.Deferred();
var fnl = dojo.query('#data-remote-failure-link-container a');
var failureEvents = { 'ajax:failure': false, 'ajax:complete': false, 'ajax:after': false };
listenForEvents(fnl[0], failureEvents);
fnl.trigger('click');
assertEvents(d, 300, failureEvents);
return d;
}
},
{
name: 'forms',
runTest: function(t) {
var method, ioArgs;
var xhr = dojo.xhr;
dojo.xhr = function(m, io){
method = m;
ioArgs = io;
}
dojo.query('#data-remote-get-form-container form').trigger('submit');
t.assertEqual('get', method);
var expectedArgs = {
url: '/posts',
content: {
'post[title]': 'Some title',
'post[body]': 'Some body'
}
}
t.is(expectedArgs.url, ioArgs.url);
t.is(expectedArgs.content['post[title]'], ioArgs.content['post[title]']);
t.is(expectedArgs.content['post[body]'], ioArgs.content['post[body]']);
dojo.xhr = xhr;
}
}
]);
doh.register("data-disable-with", [
{
name: 'disabling form elements on submit',
runTest: function(t){
// var container = dojo.query('#data-disable-with-on-parent-container');
// var button = container.query('button');
// var input = container.query('input');
// var form = container.query('form');
// t.is('My Button', button.html());
// t.is('My Submit', input.val());
//
// input.trigger('submit');
// t.is('Disable button...', button.html());
// t.is('Please wait...', input.val());
// t.t(button.attr('disabled'));
// t.t(input.attr('disabled'));
}
},
{
name: 're-enabling an element after an ajax event has completed',
tearDown: unsubscribe,
runTest: function(t){
var container = dojo.query('#data-disable-with-on-ajax-container');
var button = container.query('button');
var input = container.query('input');
var form = container.query('form');
t.is('My Button', button.html());
t.is('My Submit', input.val());
var d = new doh.Deferred();
var failureHandlerCalled = false;
var s1 = dojo.subscribe("ajax:failure", function(){
failureHandlerCalled = true;
t.is('Disable button...', button.html());
t.is('Please wait...', input.val());
t.t(button.attr('disabled'));
t.t(input.attr('disabled'));
});
var s2 = dojo.subscribe("ajax:complete", function(){
console.debug("-----------> ajax:complete: ");
t.is('My Button', button.html());
t.is('My Submit', input.val());
t.f(button.attr('disabled')[0]);
t.f(input.attr('disabled')[0]);
if (failureHandlerCalled){
d.callback(true);
}else{
d.errback("failureHandler was never called");
}
d.callback(true);
});
subscriptions.push(s1);
subscriptions.push(s2);
form.trigger('submit');
return d;
}
}
]);
doh.run();
});
</script>
</head>
<body class='tundra'>
<h1>Manual Tests</h1>
<h3>Confirm</h3>
<div class="test-container">
<div class="description">This is a dynamically created <em>link</em>. When the confirm dialog is cancelled, it should stop processing. When the confirm dialog is confirmed, it should proceed to the href url.</div>
<div id="data-confirm-link-container"></div>
<span class="clb"></span>
</div>
<div class="test-container">
<div class="description">This is a dynamically created <em>submit button</em>. When the confirm dialog is cancelled, it should stop processing. When the confirm dialog is confirmed, it should proceed to the form action url.</div>
<div id="data-confirm-input-container">
<form action="/posts" id="data-confirm-input-container" method="post"><input name="authenticity_token" type="hidden" value="Hfm4VBZJeCde+5evpma9Rq4eGtCq+/n7fZr0XVDalLw=" />
Title: <input id="post_title" name="post[title]" value="Some title" type="text" /><br />
Body: <input id="post_body" name="post[body]" value="Some body" type="text" />
<!-- submit button is created dynamically -->
</form>
</div>
<span class="clb"></span>
</div>
<h1>Automated Tests</h1>
<h3>Remote</h3>
<div class="test-container">
<div class="description">This is a dynamically created <em>link</em>. When the link is clicked it should successfully make an ajax request.</div>
<div id="data-remote-success-link-container"></div>
<span class="clb"></span>
</div>
<div class="test-container">
<div class="description">This is a dynamically created <em>link</em>. When the link is clicked it should fail when making an ajax request.</div>
<div id="data-remote-failure-link-container"></div>
<span class="clb"></span>
</div>
<div class="test-container">
<div class="description">This is a form created with markup. When submit is clicked it should send a get request to <em>/posts</em></div>
<div id="data-remote-get-form-container">
<form action="/posts" data-remote="true" method="get">
Title: <input id="post_title" name="post[title]" value="Some title" type="text" /><br />
Body: <input id="post_body" name="post[body]" value="Some body" type="text" />
<input type="submit" value="submit" />
<input name="authenticity_token" type="hidden" value="Hfm4VBZJeCde+5evpma9Rq4eGtCq+/n7fZr0XVDalLw=" />
</form>
</div>
<span class="clb"></span>
</div>
<h3>Disable With</h3>
<div class="test-container">
<div class="description">This is a regular form with <em>child elements</em> to disable. All disable-with elements should be disabled when the form is submitted.</div>
<div id="data-disable-with-on-parent-container">
<form action="fail.html">
<button data-disable-with="Disable button..." name="cmd" type="button" value="value">My Button</button>
<input data-disable-with="Please wait..." name="commit" type="submit" value="My Submit" />
</form>
</div>
<span class="clb"></div>
</div>
<div class="test-container">
<div class="description">This is a ajax form that should have it's <em>elements reenabled</em> when the ajax request has completed.</div>
<div id="data-disable-with-on-ajax-container">
<form action="failure-url.html" data-remote="true" >
<button data-disable-with="Disable button..." name="cmd" type="button" value="value">My Button</button>
<input data-disable-with="Please wait..." name="commit" type="submit" value="My Submit" />
</form>
</div>
<span class="clb"></span>
</div>
<div>
Form (Ajaxy)<form action="/posts" class="new_post" data-remote="true" id="new_post" method="post"><input name="authenticity_token" type="hidden" value="Hfm4VBZJeCde+5evpma9Rq4eGtCq+/n7fZr0XVDalLw=" />
Title: <input id="post_title" name="post[title]" type="text" /><br />
Body: <input id="post_body" name="post[body]" type="text" />
<input data-disable-with="Please wait..." name="commit" type="submit" value="Post" />
</form>
</div>
<div>
Form (Normal):<br/>
<form action="/posts" class="new_post" id="new_post" method="post"><div style="margin:0;padding:0;display:inline"><input name="authenticity_token" type="hidden" value="Hfm4VBZJeCde+5evpma9Rq4eGtCq+/n7fZr0XVDalLw=" /></div>
Title: <input id="post_title" name="post[title]" size="30" type="text" /><br />
Body: <input id="post_body" name="post[body]" size="30" type="text" />
<input data-disable-with="Please wait..." name="commit" type="submit" value="Post" />
</form>
</div>
</body>
</html>