321 lines
11 KiB
HTML
321 lines
11 KiB
HTML
<!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' djConfig='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"></div>
|
|
</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"></div>
|
|
</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"></div>
|
|
</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"></div>
|
|
</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"></div>
|
|
</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"></div>
|
|
</div>
|
|
|
|
|
|
<p>
|
|
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>
|
|
</p>
|
|
|
|
<p>
|
|
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>
|
|
</p>
|
|
|
|
|
|
|
|
</body>
|
|
</html>
|