js_upload/file-uploader/tests/test-upload-handlers.htm

   1 <!DOCTYPE HTML>
   2 <html>
   3 <head>
   4         <script src="jquery-1.4.2.min.js" type="text/javascript"></script>
   5
   6         <link href="qunit/qunit/qunit.css" rel="stylesheet" type="text/css" media="screen" />
   7         <script src="qunit/qunit/qunit.js" type="text/javascript"></script>
   8
   9         <script src="../client/fileuploader.js" type="text/javascript" ></script>
  10         <script>
  11
  12 jQuery(function(){
  13
  14     module('qq');
  15
  16     test("contains", function(){
  17         var el1 = document.createElement('div');
  18         var el2 = document.createElement('div');
  19         var el3 = document.createElement('div');
  20         el1.appendChild(el2);
  21         el2.appendChild(el3);
  22
  23         var el4 = document.createElement('div');
  24
  25         ok(qq.contains(el1,el1));
  26         ok(qq.contains(el1,el2));
  27         ok(qq.contains(el1,el3));
  28         ok(!qq.contains(el1,el4));
  29         ok(!qq.contains(el3,el2));
  30     });
  31
  32     test("hasClass, addClass, removeClass", function(){
  33         var element = document.createElement('div');
  34         qq.addClass(element, 'some-class');
  35         ok(!qq.hasClass(element, 'some'), 'dash in class name');
  36     });
  37
  38     test("children", function(){
  39         same(qq.children(document.createElement('div')), [], 'empty');
  40         var element = document.createElement('div');
  41         element.innerHTML = 'asdasd<div>text</div><span>asdas</span>asdasd';
  42         same(qq.children(element).length, 2);
  43     });
  44
  45     test("getByClass", function(){
  46         var element = document.createElement('div');
  47         element.style.display = 'none';
  48         element.innerHTML = '<div class="class"><div class="someclass class"></div></div><span></span><div class="test"></div><div class="class"></div>';
  49         document.body.appendChild(element);
  50
  51         var outside = document.createElement('div');
  52         outside.className = 'outside class';
  53         document.body.appendChild(outside);
  54
  55         same(qq.getByClass(document, 'class').length, 4, 'in document');
  56         same(qq.getByClass(element, 'class').length, 3, 'in test div');
  57
  58         qq.remove(element);
  59         qq.remove(outside);
  60     });
  61
  62     test("obj2url", function(){
  63         var tests = [
  64           {title:'empty',                   obj:{}, expect:''},
  65           {title:'general json',            obj:{a:'b',c:'d',e:'f'}, expect:'a=b&c=d&e=f'},
  66           {title:'general json',            obj:{a:1,b:2,c:3,d:4}, expect:'a=1&b=2&c=3&d=4'},
  67           {title:'general json array',      obj:{a:[1,2,3,4]}, expect:'a[0]=1&a[1]=2&a[2]=3&a[3]=4'},
  68           {title:'complex json',            obj:{a:'b',c:'d',e:['f',{g:'h',i:['j',{k:'l',m:'n'}],
  69                                                  o:undefined,p:true,q:false}]},
  70                                             expect:'a=b&c=d&'
  71                                                   +'e[0]=f&'
  72                                                   +'e[1][g]=h&'
  73                                                   +'e[1][i][0]=j&'
  74                                                   +'e[1][i][1][k]=l&'
  75                                                   +'e[1][i][1][m]=n&'
  76                                                   +'e[1][o]=undefined&'
  77                                                   +'e[1][p]=true&'
  78                                                   +'e[1][q]=false'},
  79           {title:'function',                obj:{a:function(){return 'b';}}, expect:'a=b'},
  80           {title:'function no return',      obj:{a:function(){},undefined:'b'}, expect:'a=undefined'},
  81           {title:'null',                    obj:{a:null}, expect:'a=null'},
  82           {title:'prevent double encoding', obj:{a:[1,2,3],'b[]':[4,5,6],'c[d]':[7,8,9]},
  83                                             expect:'a[0]=1&a[1]=2&a[2]=3&'
  84                                                   +'b[]=4&b[]=5&b[]=6&'
  85                                                   +'c[d][0]=7&c[d][1]=8&c[d][2]=9'},
  86           {title:'spaces',                  obj:{a:'All your base are belong to us'},
  87                                             expect:'a=All+your+base+are+belong+to+us'},
  88           {title:'undefined simple',        obj:{undefined:undefined}, expect:''},
  89           {title:'undefined complex',       obj:{undefined:undefined,
  90                                                  a:{undefined:undefined},
  91                                                  b:[{undefined:'c'},undefined,{d:'e'}]},
  92                                             expect:'b[1]=undefined&b[2][d]=e'},
  93           {title:'prefix url no params',    obj:{a:'b'},
  94                                             prefix:'http://any.url',
  95                                             expect:'http://any.url?a=b'},
  96           {title:'prefix url trailing ?',   obj:{a:'b'},
  97                                             prefix:'http://any.url?',
  98                                             expect:'http://any.url?a=b'},
  99           {title:'prefix url param',        obj:{a:'b'}, prefix:'http://any.url?foo',
 100                                             expect:'http://any.url?foo&a=b'},
 101           {title:'prefix url param=value',  obj:{a:'b'},
 102                                             prefix:'http://any.url?foo=bar',
 103                                             expect:'http://any.url?foo=bar&a=b'},
 104           {title:'prefix url multi param',  obj:{a:'b'},
 105                                             prefix:'http://any.url?foo=bar&bla=blub',
 106                                             expect:'http://any.url?foo=bar&bla=blub&a=b'},
 107           {title:'prefix url array param',  obj:{a:'b',c:'d'},
 108                                             prefix:'http://any.url?foo[0]=bla&foo[1]=blub',
 109                                             expect:'http://any.url?foo[0]=bla&foo[1]=blub&a=b&c=d'}
 110         ];
 111
 112         for (var i = 0, l = tests.length; i<l; i++) {
 113           //console.log('------------------ obj2url-test'+(i+1)+': '+tests[i].title);
 114           //console.log('object: '+tests[i].obj);
 115           //console.log('prefix: '+tests[i].prefix);
 116           var result = '';
 117           if (tests[i].prefix) {
 118             result = qq.obj2url(tests[i].obj, tests[i].prefix);
 119           } else {
 120             result = qq.obj2url(tests[i].obj);
 121           }
 122           //console.log('result: '+result);
 123           same(decodeURIComponent(result), tests[i].expect, tests[i].title);
 124         }
 125     });
 126
 127
 128         var uploadTimeout = 700,
 129                 loadTimeout = 300;
 130
 131     if (qq.UploadHandlerXhr.isSupported()){
 132         $('.handlerform').remove();
 133     } else {
 134         //
 135         module('qq.UploadHandlerForm');
 136         //
 137
 138         asyncTest("_getIframeContentJSON", function() {
 139                 expect(3);
 140                 setTimeout(start, loadTimeout);
 141
 142                 var exampleObject = {
 143                   "example" : "&amp;a&lt;computer networks&gt;, to download means to receive data to a local system from a remote system, or to initiate such a data transfer. Examples of a remote system from which a download might be performed include a webserver, FTP server, email server, or other similar systems. A download can mean either any file that is offered for downloading or that has been downloaded, or the process of receiving such a file.The inverse operation, uploading, can refer to the sending of data from a local system to a remote system such as a server or another client with the intent that the remote system should store a copy of the data being transferred, or the initiation of such a process. The words first came into popular usage among computer users with the increased popularity of Bulletin Board Systems (BBSs), facilitated by the widespread distribution and implementation of dial-up access the in the 1970s",
 144                   "sub" : {
 145                     "arr": [10,20,30],
 146                     "boo": false
 147                   }
 148                 };
 149
 150                 var testedFn = qq.UploadHandlerForm.prototype._getIframeContentJSON;
 151
 152                 // IE 7,8 doesn't support application-javascript, application-json, text-javascript, text-plain
 153                 // as a response type, it also doesn't file load event when iframe loads page with 404 header
 154                 createIframe('iframe-content-tests/somepage.php', function(iframe){
 155                         same(testedFn(iframe), {}, "Server didn't return valid JSON object");
 156                 });
 157                 createIframe('iframe-content-tests/text-html.php', function(iframe){
 158                         same(testedFn(iframe), exampleObject, "text-html");
 159                 });
 160
 161                 // test larger response (>4k)
 162                 //http://www.coderholic.com/firefox-4k-xml-node-limit/
 163             createIframe('iframe-content-tests/text-html-large.php', function(iframe){
 164                 same(testedFn(iframe).length, 5000, ">4k");
 165             });
 166
 167
 168                 function createIframe(src, onLoad){
 169                         var iframe = document.createElement('iframe');
 170                         qq.attach(iframe, 'load', function(){
 171                                 onLoad(iframe);
 172
 173                                 setTimeout(function(){
 174                                         qq.remove(iframe);
 175                                 }, 1);
 176                         });
 177                         iframe.src = src;
 178                         document.body.appendChild(iframe);
 179                 }
 180         });
 181
 182         test("upload, cancel with empty input", function(){
 183             expect(1);
 184
 185             var uploadHandlerForm = new qq.UploadHandlerForm({
 186                 action: 'action-slow-response.php',
 187                 onComplete: function(id, fileName, response){
 188                     ok(false, 'onComplete should not run, the request should be cancelled');
 189                 }
 190             });
 191
 192             var input = document.createElement('input');
 193             var id = uploadHandlerForm.add(input);
 194             uploadHandlerForm.cancel(id);
 195
 196             try {
 197                 // should fail
 198                 uploadHandlerForm.upload(id);
 199             } catch (err){
 200                 ok(true, "wasn't uploaded after cancelling")
 201             };
 202
 203         });
 204
 205         asyncTest("upload", function() {
 206                 expect(4);
 207
 208                 var data = {stringOne: 'rtdfghdfhfh',stringTwo: 'dfsgsdfgsdg',stringThree: 'dfsgfhdfhdg'};
 209                 var savedId;
 210
 211                 var uploadHandler = new qq.UploadHandlerForm({
 212                         action: 'action-handler-test.php',
 213                         onComplete: function(id, fileName, response){
 214                             ok(savedId == id, 'proper id in callback');
 215                             same(fileName, uploadHandler.getName(id), 'getName method');
 216
 217                             data.fileName = fileName;
 218                                 same(response, data, 'server received file and correct params, filenames match');
 219                         }
 220                 });
 221
 222                 var input = document.getElementById('testinput1');
 223                 qq.attach(input, 'change', function(){
 224                         setTimeout(start, uploadTimeout);
 225
 226                         savedId = uploadHandler.add(input);
 227                         ok(savedId != null, 'id returned by add');
 228
 229                         uploadHandler.upload(savedId, data);
 230                 });
 231         });
 232
 233         asyncTest("cancel", function() {
 234                 var uploadHandlerForm = new qq.UploadHandlerForm({
 235                         action: 'action-slow-response.php',
 236                         onComplete: function(id, fileName, response){
 237                                 ok(false, 'onComplete should not run, the request should be cancelled');
 238                         }
 239                 });
 240
 241                 var input = document.getElementById('testinput2');
 242                 qq.attach(input, 'change', function(){
 243                         var id = uploadHandlerForm.add(input);
 244                         uploadHandlerForm.upload(id);
 245                         uploadHandlerForm.cancel(id);
 246                         start();
 247                 });
 248         });
 249
 250         test("check that forms and iframes were removed after use", function(){
 251                 same($('form,iframe').length, 0, 'check that forms and iframes were removed after use');
 252         });
 253
 254         asyncTest('going back', function(){
 255             setTimeout(function(){
 256                 var goBack = confirm("checking that the history wasn't changed, the page will go back to previous now");
 257                 if (goBack){
 258                    window.history.back();
 259
 260                    start();
 261                    ok(false, "the page didn't change (fails in Opera)");
 262                 }
 263             }, 1000);
 264         });
 265
 266         }
 267
 268     if (!qq.UploadHandlerXhr.isSupported()){
 269         $('.handlerxhr').remove();
 270     } else {
 271         //
 272         module('qq.UploadHandlerXhr');
 273         //
 274
 275         asyncTest("upload", function() {
 276             expect(9);
 277
 278                 var data = {stringOne: 'rtdfghdfhfh',stringTwo: 'dfsgsdfgsdg',stringThree: 'dfsgfhdfhdg'};
 279                 var onProgressCalled = false;
 280                 var expectedId, expectedName;
 281
 282                 var uploadHandler = new qq.UploadHandlerXhr({
 283                         action: 'action-handler-test.php',
 284                         onProgress: function(id, fileName, loaded, total){
 285                                 if (!onProgressCalled) {
 286                                         onProgressCalled = true;
 287
 288                                         same(id, expectedId, 'progress event fired with correct id param');
 289                                         same(fileName, expectedName, 'progress event fired with correct fileName param')
 290                                         ok(loaded <= total && total > 0, 'progress event fired with possible loaded and total');
 291
 292                                         same(total, uploadHandler.getSize(id), 'getSize method');
 293                                 }
 294                         },
 295                         onComplete: function(id, fileName, response){
 296                     same(id, expectedId, 'progress event fired with correct id param');
 297                     same(fileName, expectedName, 'progress event fired with correct fileName param')
 298
 299                                 data.fileName = fileName;
 300                     data.qqfile = fileName;
 301
 302                                 same(response, data, 'server received passed params, filenames match');
 303
 304                                 same(fileName, uploadHandler.getName(id), 'getName method');
 305                         }
 306                 });
 307
 308                 var input = document.getElementById('handlerxhr1');
 309
 310                 qq.attach(input, 'change', function(){
 311                         setTimeout(start, uploadTimeout);
 312
 313                         var id = uploadHandler.add(input.files[0]);
 314                         ok(id != null, 'id returned by add');
 315
 316                         expectedId = id;
 317                         expectedName = input.files[0].name || input.files[0].fileName;
 318                         if (!expectedName){
 319                             ok(false, 'false value as a file name used');
 320                         }
 321
 322                         uploadHandler.upload(id, data);
 323
 324                         qq.remove(input);
 325                 });
 326         });
 327
 328         asyncTest("cancel", function() {
 329                 var uploadHandler = new qq.UploadHandlerXhr({
 330                         action: 'action-slow-response.php',
 331                         onComplete: function(id, fileName, response){
 332                                 ok(false, 'onComplete should not run, the request should be cancelled');
 333                         }
 334                 });
 335
 336                 var input = document.getElementById('handlerxhr2');
 337                 if (!input){
 338                         // input removed because uploading via XHR is not supported
 339                         return;
 340                 }
 341
 342                 qq.attach(input, 'change', function(){
 343                         var id = uploadHandler.add(input.files[0]);
 344                         uploadHandler.upload(id);
 345                         uploadHandler.cancel(id);
 346
 347                         start();
 348                         qq.remove(input);
 349                 });
 350         });
 351         }
 352 });
 353         </script>
 354 </head>
 355 <body>
 356         <h1 id="qunit-header">File uploader tests</h1>
 357         <h2 id="qunit-banner"></h2>
 358         <h2 id="qunit-userAgent"></h2>
 359         <ol id="qunit-tests"></ol>
 360
 361         <p>
 362             Open this page via https connection, and make sure that loading bar is not acting strange after all tests are run.
 363             Back button test fails in Opera.
 364         </p>
 365
 366         <p>Please select a file for each input below (in order)</p>
 367
 368     <p>qq.FileUploader</p>
 369     <div id="fileuploader1"></div>
 370
 371         <p>qq.UploadHandlerForm</p>
 372         <input class="handlerform" id="testinput1" type="file">
 373         <input class="handlerform" id="testinput2" type="file">
 374
 375         <p>qq.UploadHandlerXhr</p>
 376         <input class="handlerxhr" id="handlerxhr1" type="file">
 377         <input class="handlerxhr" id="handlerxhr2" type="file">
 378
 379 </body>
 380 </html>
 381
 382