| 1 | <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" |
|---|
| 2 | "http://www.w3.org/TR/html4/strict.dtd"> |
|---|
| 3 | <html> |
|---|
| 4 | <head> |
|---|
| 5 | <title>dojox.rails test</title> |
|---|
| 6 | <style type="text/css"> |
|---|
| 7 | body { |
|---|
| 8 | font-family: helvetica; |
|---|
| 9 | } |
|---|
| 10 | |
|---|
| 11 | .test-container { |
|---|
| 12 | width: 800px; |
|---|
| 13 | margin-bottom: 20px; |
|---|
| 14 | } |
|---|
| 15 | |
|---|
| 16 | .test-container:after { |
|---|
| 17 | clear: both; |
|---|
| 18 | } |
|---|
| 19 | |
|---|
| 20 | .test-container div { |
|---|
| 21 | float: left; |
|---|
| 22 | margin-right: 20px; |
|---|
| 23 | } |
|---|
| 24 | |
|---|
| 25 | .description { |
|---|
| 26 | width: 400px; |
|---|
| 27 | border: 1px solid #ccc; |
|---|
| 28 | -moz-border-radius: 5px; |
|---|
| 29 | -webkit-border-radius: 5px; |
|---|
| 30 | padding: 10px; |
|---|
| 31 | } |
|---|
| 32 | |
|---|
| 33 | span.clb { |
|---|
| 34 | display: block; |
|---|
| 35 | clear: both; |
|---|
| 36 | } |
|---|
| 37 | </style> |
|---|
| 38 | |
|---|
| 39 | <script src="../../../dojo/dojo.js" data-dojo-config="isDebug:true, parseOnLoad:true"></script> |
|---|
| 40 | <script type="text/javascript"> |
|---|
| 41 | // dojo.registerModulePath('dojox.rails.tests.plugd', '../dojox/rails/tests/plugd'); |
|---|
| 42 | dojo.require('doh.runner'); |
|---|
| 43 | dojo.require('dojox.rails'); |
|---|
| 44 | dojo.require('dojox.rails.tests.plugd.trigger'); |
|---|
| 45 | dojo.require('dojo.NodeList-manipulate'); |
|---|
| 46 | |
|---|
| 47 | var subscriptions = []; |
|---|
| 48 | |
|---|
| 49 | function createDom(){ |
|---|
| 50 | var q = dojo.query; |
|---|
| 51 | q('#data-confirm-link-container').append('<a href="/foo/url" data-confirm="Are you sure?">click me!</a>'); |
|---|
| 52 | q('#data-confirm-input-container').append('<input data-confirm="Are you sure?" name="commit" type="submit" value="Post" />'); |
|---|
| 53 | q('#data-remote-success-link-container').append('<a href="success_response.html" data-type="text" data-remote="true">click me to load!</a>'); |
|---|
| 54 | q('#data-remote-failure-link-container').append('<a href="failure_response.html" data-remote="true">click me to fail!</a>'); |
|---|
| 55 | } |
|---|
| 56 | |
|---|
| 57 | function listenForEvents(expectedNode, events){ |
|---|
| 58 | for (var k in events){ |
|---|
| 59 | var s = dojo.subscribe(k, (function(k){ |
|---|
| 60 | return function(el, response, ioArgs){ |
|---|
| 61 | if (el == expectedNode){ events[k] = true; } |
|---|
| 62 | }; |
|---|
| 63 | })(k)); |
|---|
| 64 | subscriptions.push(s); |
|---|
| 65 | } |
|---|
| 66 | } |
|---|
| 67 | |
|---|
| 68 | function assertEvents(deferred, timeout, events){ |
|---|
| 69 | setTimeout(function(){ |
|---|
| 70 | for (var k in events){ |
|---|
| 71 | console.debug("assertEvents: ", k, events[k]); |
|---|
| 72 | if (!events[k]){ |
|---|
| 73 | deferred.errback(new Error(k + ' event was not dispatched')); |
|---|
| 74 | return; |
|---|
| 75 | } |
|---|
| 76 | } |
|---|
| 77 | deferred.callback(true); |
|---|
| 78 | }, timeout); |
|---|
| 79 | } |
|---|
| 80 | |
|---|
| 81 | function unsubscribe(){ |
|---|
| 82 | dojo.forEach(subscriptions, function(s){ |
|---|
| 83 | dojo.unsubscribe(s); |
|---|
| 84 | }); |
|---|
| 85 | } |
|---|
| 86 | |
|---|
| 87 | dojo.addOnLoad(function(){ |
|---|
| 88 | createDom(); |
|---|
| 89 | doh.register('data-remote', [ |
|---|
| 90 | { |
|---|
| 91 | name: 'success events', |
|---|
| 92 | timeout: 3000, |
|---|
| 93 | tearDown: unsubscribe, |
|---|
| 94 | runTest: function() { |
|---|
| 95 | var d = new doh.Deferred(); |
|---|
| 96 | var snl = dojo.query('#data-remote-success-link-container a'); |
|---|
| 97 | var successEvents = { 'ajax:success': false, 'ajax:complete': false, 'ajax:after': false }; |
|---|
| 98 | listenForEvents(snl[0], successEvents); |
|---|
| 99 | snl.trigger('click'); |
|---|
| 100 | assertEvents(d, 300, successEvents); |
|---|
| 101 | return d; |
|---|
| 102 | } |
|---|
| 103 | }, |
|---|
| 104 | { |
|---|
| 105 | name: 'failure events', |
|---|
| 106 | timeout: 3000, |
|---|
| 107 | tearDown: unsubscribe, |
|---|
| 108 | runTest: function() { |
|---|
| 109 | var d = new doh.Deferred(); |
|---|
| 110 | var fnl = dojo.query('#data-remote-failure-link-container a'); |
|---|
| 111 | var failureEvents = { 'ajax:failure': false, 'ajax:complete': false, 'ajax:after': false }; |
|---|
| 112 | listenForEvents(fnl[0], failureEvents); |
|---|
| 113 | fnl.trigger('click'); |
|---|
| 114 | assertEvents(d, 300, failureEvents); |
|---|
| 115 | return d; |
|---|
| 116 | } |
|---|
| 117 | }, |
|---|
| 118 | { |
|---|
| 119 | name: 'forms', |
|---|
| 120 | runTest: function(t) { |
|---|
| 121 | var method, ioArgs; |
|---|
| 122 | var xhr = dojo.xhr; |
|---|
| 123 | dojo.xhr = function(m, io){ |
|---|
| 124 | method = m; |
|---|
| 125 | ioArgs = io; |
|---|
| 126 | } |
|---|
| 127 | |
|---|
| 128 | dojo.query('#data-remote-get-form-container form').trigger('submit'); |
|---|
| 129 | |
|---|
| 130 | t.assertEqual('get', method); |
|---|
| 131 | |
|---|
| 132 | var expectedArgs = { |
|---|
| 133 | url: '/posts', |
|---|
| 134 | content: { |
|---|
| 135 | 'post[title]': 'Some title', |
|---|
| 136 | 'post[body]': 'Some body' |
|---|
| 137 | } |
|---|
| 138 | } |
|---|
| 139 | |
|---|
| 140 | t.is(expectedArgs.url, ioArgs.url); |
|---|
| 141 | t.is(expectedArgs.content['post[title]'], ioArgs.content['post[title]']); |
|---|
| 142 | t.is(expectedArgs.content['post[body]'], ioArgs.content['post[body]']); |
|---|
| 143 | |
|---|
| 144 | dojo.xhr = xhr; |
|---|
| 145 | } |
|---|
| 146 | } |
|---|
| 147 | ]); |
|---|
| 148 | |
|---|
| 149 | doh.register("data-disable-with", [ |
|---|
| 150 | { |
|---|
| 151 | name: 'disabling form elements on submit', |
|---|
| 152 | runTest: function(t){ |
|---|
| 153 | // var container = dojo.query('#data-disable-with-on-parent-container'); |
|---|
| 154 | // var button = container.query('button'); |
|---|
| 155 | // var input = container.query('input'); |
|---|
| 156 | // var form = container.query('form'); |
|---|
| 157 | |
|---|
| 158 | // t.is('My Button', button.html()); |
|---|
| 159 | // t.is('My Submit', input.val()); |
|---|
| 160 | // |
|---|
| 161 | // input.trigger('submit'); |
|---|
| 162 | |
|---|
| 163 | // t.is('Disable button...', button.html()); |
|---|
| 164 | // t.is('Please wait...', input.val()); |
|---|
| 165 | |
|---|
| 166 | // t.t(button.attr('disabled')); |
|---|
| 167 | // t.t(input.attr('disabled')); |
|---|
| 168 | } |
|---|
| 169 | }, |
|---|
| 170 | { |
|---|
| 171 | name: 're-enabling an element after an ajax event has completed', |
|---|
| 172 | tearDown: unsubscribe, |
|---|
| 173 | runTest: function(t){ |
|---|
| 174 | var container = dojo.query('#data-disable-with-on-ajax-container'); |
|---|
| 175 | var button = container.query('button'); |
|---|
| 176 | var input = container.query('input'); |
|---|
| 177 | var form = container.query('form'); |
|---|
| 178 | |
|---|
| 179 | t.is('My Button', button.html()); |
|---|
| 180 | t.is('My Submit', input.val()); |
|---|
| 181 | |
|---|
| 182 | var d = new doh.Deferred(); |
|---|
| 183 | var failureHandlerCalled = false; |
|---|
| 184 | |
|---|
| 185 | var s1 = dojo.subscribe("ajax:failure", function(){ |
|---|
| 186 | failureHandlerCalled = true; |
|---|
| 187 | t.is('Disable button...', button.html()); |
|---|
| 188 | t.is('Please wait...', input.val()); |
|---|
| 189 | t.t(button.attr('disabled')); |
|---|
| 190 | t.t(input.attr('disabled')); |
|---|
| 191 | }); |
|---|
| 192 | |
|---|
| 193 | var s2 = dojo.subscribe("ajax:complete", function(){ |
|---|
| 194 | console.debug("-----------> ajax:complete: "); |
|---|
| 195 | t.is('My Button', button.html()); |
|---|
| 196 | t.is('My Submit', input.val()); |
|---|
| 197 | t.f(button.attr('disabled')[0]); |
|---|
| 198 | t.f(input.attr('disabled')[0]); |
|---|
| 199 | |
|---|
| 200 | if (failureHandlerCalled){ |
|---|
| 201 | d.callback(true); |
|---|
| 202 | }else{ |
|---|
| 203 | d.errback("failureHandler was never called"); |
|---|
| 204 | } |
|---|
| 205 | d.callback(true); |
|---|
| 206 | }); |
|---|
| 207 | |
|---|
| 208 | subscriptions.push(s1); |
|---|
| 209 | subscriptions.push(s2); |
|---|
| 210 | |
|---|
| 211 | form.trigger('submit'); |
|---|
| 212 | return d; |
|---|
| 213 | } |
|---|
| 214 | } |
|---|
| 215 | ]); |
|---|
| 216 | |
|---|
| 217 | doh.run(); |
|---|
| 218 | }); |
|---|
| 219 | </script> |
|---|
| 220 | </head> |
|---|
| 221 | <body class='tundra'> |
|---|
| 222 | |
|---|
| 223 | <h1>Manual Tests</h1> |
|---|
| 224 | |
|---|
| 225 | <h3>Confirm</h3> |
|---|
| 226 | |
|---|
| 227 | <div class="test-container"> |
|---|
| 228 | <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> |
|---|
| 229 | <div id="data-confirm-link-container"></div> |
|---|
| 230 | <span class="clb"></div> |
|---|
| 231 | </div> |
|---|
| 232 | |
|---|
| 233 | <div class="test-container"> |
|---|
| 234 | <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> |
|---|
| 235 | <div id="data-confirm-input-container"> |
|---|
| 236 | <form action="/posts" id="data-confirm-input-container" method="post"><input name="authenticity_token" type="hidden" value="Hfm4VBZJeCde+5evpma9Rq4eGtCq+/n7fZr0XVDalLw=" /> |
|---|
| 237 | Title: <input id="post_title" name="post[title]" value="Some title" type="text" /><br /> |
|---|
| 238 | Body: <input id="post_body" name="post[body]" value="Some body" type="text" /> |
|---|
| 239 | <!-- submit button is created dynamically --> |
|---|
| 240 | </form> |
|---|
| 241 | </div> |
|---|
| 242 | <span class="clb"></div> |
|---|
| 243 | </div> |
|---|
| 244 | |
|---|
| 245 | |
|---|
| 246 | <h1>Automated Tests</h1> |
|---|
| 247 | |
|---|
| 248 | <h3>Remote</h3> |
|---|
| 249 | <div class="test-container"> |
|---|
| 250 | <div class="description">This is a dynamically created <em>link</em>. When the link is clicked it should successfully make an ajax request.</div> |
|---|
| 251 | <div id="data-remote-success-link-container"></div> |
|---|
| 252 | <span class="clb"></div> |
|---|
| 253 | </div> |
|---|
| 254 | |
|---|
| 255 | <div class="test-container"> |
|---|
| 256 | <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> |
|---|
| 257 | <div id="data-remote-failure-link-container"></div> |
|---|
| 258 | <span class="clb"></div> |
|---|
| 259 | </div> |
|---|
| 260 | |
|---|
| 261 | <div class="test-container"> |
|---|
| 262 | <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> |
|---|
| 263 | <div id="data-remote-get-form-container"> |
|---|
| 264 | <form action="/posts" data-remote="true" method="get"> |
|---|
| 265 | Title: <input id="post_title" name="post[title]" value="Some title" type="text" /><br /> |
|---|
| 266 | Body: <input id="post_body" name="post[body]" value="Some body" type="text" /> |
|---|
| 267 | <input type="submit" value="submit" /> |
|---|
| 268 | <input name="authenticity_token" type="hidden" value="Hfm4VBZJeCde+5evpma9Rq4eGtCq+/n7fZr0XVDalLw=" /> |
|---|
| 269 | </form> |
|---|
| 270 | </div> |
|---|
| 271 | <span class="clb"></div> |
|---|
| 272 | </div> |
|---|
| 273 | |
|---|
| 274 | |
|---|
| 275 | |
|---|
| 276 | <h3>Disable With</h3> |
|---|
| 277 | <div class="test-container"> |
|---|
| 278 | <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> |
|---|
| 279 | <div id="data-disable-with-on-parent-container"> |
|---|
| 280 | <form action="fail.html"> |
|---|
| 281 | <button data-disable-with="Disable button..." name="cmd" type="button" value="value">My Button</button> |
|---|
| 282 | <input data-disable-with="Please wait..." name="commit" type="submit" value="My Submit" /> |
|---|
| 283 | </form> |
|---|
| 284 | </div> |
|---|
| 285 | <span class="clb"></div> |
|---|
| 286 | </div> |
|---|
| 287 | |
|---|
| 288 | <div class="test-container"> |
|---|
| 289 | <div class="description">This is a ajax form that should have it's <em>elements reenabled</em> when the ajax request has completed.</div> |
|---|
| 290 | <div id="data-disable-with-on-ajax-container"> |
|---|
| 291 | <form action="failure-url.html" data-remote="true" > |
|---|
| 292 | <button data-disable-with="Disable button..." name="cmd" type="button" value="value">My Button</button> |
|---|
| 293 | <input data-disable-with="Please wait..." name="commit" type="submit" value="My Submit" /> |
|---|
| 294 | </form> |
|---|
| 295 | </div> |
|---|
| 296 | <span class="clb"></div> |
|---|
| 297 | </div> |
|---|
| 298 | |
|---|
| 299 | |
|---|
| 300 | <p> |
|---|
| 301 | 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=" /> |
|---|
| 302 | Title: <input id="post_title" name="post[title]" type="text" /><br /> |
|---|
| 303 | Body: <input id="post_body" name="post[body]" type="text" /> |
|---|
| 304 | <input data-disable-with="Please wait..." name="commit" type="submit" value="Post" /> |
|---|
| 305 | </form> |
|---|
| 306 | </p> |
|---|
| 307 | |
|---|
| 308 | <p> |
|---|
| 309 | Form (Normal):<br/> |
|---|
| 310 | <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> |
|---|
| 311 | Title: <input id="post_title" name="post[title]" size="30" type="text" /><br /> |
|---|
| 312 | Body: <input id="post_body" name="post[body]" size="30" type="text" /> |
|---|
| 313 | <input data-disable-with="Please wait..." name="commit" type="submit" value="Post" /> |
|---|
| 314 | </form> |
|---|
| 315 | </p> |
|---|
| 316 | |
|---|
| 317 | |
|---|
| 318 | |
|---|
| 319 | </body> |
|---|
| 320 | </html> |
|---|
