You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
320 lines
11 KiB
320 lines
11 KiB
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" |
|
"http://www.w3.org/TR/html4/strict.dtd"> |
|
<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>
|
|
|