383 lines
15 KiB
HTML
383 lines
15 KiB
HTML
|
<!DOCTYPE HTML>
|
||
|
|
<html>
|
||
|
|
<head>
|
||
|
|
<script src="jquery-1.4.2.min.js" type="text/javascript"></script>
|
||
|
|
|
||
|
|
<link href="qunit/qunit/qunit.css" rel="stylesheet" type="text/css" media="screen" />
|
||
|
|
<script src="qunit/qunit/qunit.js" type="text/javascript"></script>
|
||
|
|
|
||
|
|
<script src="../client/fileuploader.js" type="text/javascript" ></script>
|
||
|
|
<script>
|
||
|
|
|
||
|
|
jQuery(function(){
|
||
|
|
|
||
|
|
module('qq');
|
||
|
|
|
||
|
|
test("contains", function(){
|
||
|
|
var el1 = document.createElement('div');
|
||
|
|
var el2 = document.createElement('div');
|
||
|
|
var el3 = document.createElement('div');
|
||
|
|
el1.appendChild(el2);
|
||
|
|
el2.appendChild(el3);
|
||
|
|
|
||
|
|
var el4 = document.createElement('div');
|
||
|
|
|
||
|
|
ok(qq.contains(el1,el1));
|
||
|
|
ok(qq.contains(el1,el2));
|
||
|
|
ok(qq.contains(el1,el3));
|
||
|
|
ok(!qq.contains(el1,el4));
|
||
|
|
ok(!qq.contains(el3,el2));
|
||
|
|
});
|
||
|
|
|
||
|
|
test("hasClass, addClass, removeClass", function(){
|
||
|
|
var element = document.createElement('div');
|
||
|
|
qq.addClass(element, 'some-class');
|
||
|
|
ok(!qq.hasClass(element, 'some'), 'dash in class name');
|
||
|
|
});
|
||
|
|
|
||
|
|
test("children", function(){
|
||
|
|
same(qq.children(document.createElement('div')), [], 'empty');
|
||
|
|
var element = document.createElement('div');
|
||
|
|
element.innerHTML = 'asdasd<div>text</div><span>asdas</span>asdasd';
|
||
|
|
same(qq.children(element).length, 2);
|
||
|
|
});
|
||
|
|
|
||
|
|
test("getByClass", function(){
|
||
|
|
var element = document.createElement('div');
|
||
|
|
element.style.display = 'none';
|
||
|
|
element.innerHTML = '<div class="class"><div class="someclass class"></div></div><span></span><div class="test"></div><div class="class"></div>';
|
||
|
|
document.body.appendChild(element);
|
||
|
|
|
||
|
|
var outside = document.createElement('div');
|
||
|
|
outside.className = 'outside class';
|
||
|
|
document.body.appendChild(outside);
|
||
|
|
|
||
|
|
same(qq.getByClass(document, 'class').length, 4, 'in document');
|
||
|
|
same(qq.getByClass(element, 'class').length, 3, 'in test div');
|
||
|
|
|
||
|
|
qq.remove(element);
|
||
|
|
qq.remove(outside);
|
||
|
|
});
|
||
|
|
|
||
|
|
test("obj2url", function(){
|
||
|
|
var tests = [
|
||
|
|
{title:'empty', obj:{}, expect:''},
|
||
|
|
{title:'general json', obj:{a:'b',c:'d',e:'f'}, expect:'a=b&c=d&e=f'},
|
||
|
|
{title:'general json', obj:{a:1,b:2,c:3,d:4}, expect:'a=1&b=2&c=3&d=4'},
|
||
|
|
{title:'general json array', obj:{a:[1,2,3,4]}, expect:'a[0]=1&a[1]=2&a[2]=3&a[3]=4'},
|
||
|
|
{title:'complex json', obj:{a:'b',c:'d',e:['f',{g:'h',i:['j',{k:'l',m:'n'}],
|
||
|
|
o:undefined,p:true,q:false}]},
|
||
|
|
expect:'a=b&c=d&'
|
||
|
|
+'e[0]=f&'
|
||
|
|
+'e[1][g]=h&'
|
||
|
|
+'e[1][i][0]=j&'
|
||
|
|
+'e[1][i][1][k]=l&'
|
||
|
|
+'e[1][i][1][m]=n&'
|
||
|
|
+'e[1][o]=undefined&'
|
||
|
|
+'e[1][p]=true&'
|
||
|
|
+'e[1][q]=false'},
|
||
|
|
{title:'function', obj:{a:function(){return 'b';}}, expect:'a=b'},
|
||
|
|
{title:'function no return', obj:{a:function(){},undefined:'b'}, expect:'a=undefined'},
|
||
|
|
{title:'null', obj:{a:null}, expect:'a=null'},
|
||
|
|
{title:'prevent double encoding', obj:{a:[1,2,3],'b[]':[4,5,6],'c[d]':[7,8,9]},
|
||
|
|
expect:'a[0]=1&a[1]=2&a[2]=3&'
|
||
|
|
+'b[]=4&b[]=5&b[]=6&'
|
||
|
|
+'c[d][0]=7&c[d][1]=8&c[d][2]=9'},
|
||
|
|
{title:'spaces', obj:{a:'All your base are belong to us'},
|
||
|
|
expect:'a=All+your+base+are+belong+to+us'},
|
||
|
|
{title:'undefined simple', obj:{undefined:undefined}, expect:''},
|
||
|
|
{title:'undefined complex', obj:{undefined:undefined,
|
||
|
|
a:{undefined:undefined},
|
||
|
|
b:[{undefined:'c'},undefined,{d:'e'}]},
|
||
|
|
expect:'b[1]=undefined&b[2][d]=e'},
|
||
|
|
{title:'prefix url no params', obj:{a:'b'},
|
||
|
|
prefix:'http://any.url',
|
||
|
|
expect:'http://any.url?a=b'},
|
||
|
|
{title:'prefix url trailing ?', obj:{a:'b'},
|
||
|
|
prefix:'http://any.url?',
|
||
|
|
expect:'http://any.url?a=b'},
|
||
|
|
{title:'prefix url param', obj:{a:'b'}, prefix:'http://any.url?foo',
|
||
|
|
expect:'http://any.url?foo&a=b'},
|
||
|
|
{title:'prefix url param=value', obj:{a:'b'},
|
||
|
|
prefix:'http://any.url?foo=bar',
|
||
|
|
expect:'http://any.url?foo=bar&a=b'},
|
||
|
|
{title:'prefix url multi param', obj:{a:'b'},
|
||
|
|
prefix:'http://any.url?foo=bar&bla=blub',
|
||
|
|
expect:'http://any.url?foo=bar&bla=blub&a=b'},
|
||
|
|
{title:'prefix url array param', obj:{a:'b',c:'d'},
|
||
|
|
prefix:'http://any.url?foo[0]=bla&foo[1]=blub',
|
||
|
|
expect:'http://any.url?foo[0]=bla&foo[1]=blub&a=b&c=d'}
|
||
|
|
];
|
||
|
|
|
||
|
|
for (var i = 0, l = tests.length; i<l; i++) {
|
||
|
|
//console.log('------------------ obj2url-test'+(i+1)+': '+tests[i].title);
|
||
|
|
//console.log('object: '+tests[i].obj);
|
||
|
|
//console.log('prefix: '+tests[i].prefix);
|
||
|
|
var result = '';
|
||
|
|
if (tests[i].prefix) {
|
||
|
|
result = qq.obj2url(tests[i].obj, tests[i].prefix);
|
||
|
|
} else {
|
||
|
|
result = qq.obj2url(tests[i].obj);
|
||
|
|
}
|
||
|
|
//console.log('result: '+result);
|
||
|
|
same(decodeURIComponent(result), tests[i].expect, tests[i].title);
|
||
|
|
}
|
||
|
|
});
|
||
|
|
|
||
|
|
|
||
|
|
var uploadTimeout = 700,
|
||
|
|
loadTimeout = 300;
|
||
|
|
|
||
|
|
if (qq.UploadHandlerXhr.isSupported()){
|
||
|
|
$('.handlerform').remove();
|
||
|
|
} else {
|
||
|
|
//
|
||
|
|
module('qq.UploadHandlerForm');
|
||
|
|
//
|
||
|
|
|
||
|
|
asyncTest("_getIframeContentJSON", function() {
|
||
|
|
expect(3);
|
||
|
|
setTimeout(start, loadTimeout);
|
||
|
|
|
||
|
|
var exampleObject = {
|
||
|
|
"example" : "&a<computer networks>, 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",
|
||
|
|
"sub" : {
|
||
|
|
"arr": [10,20,30],
|
||
|
|
"boo": false
|
||
|
|
}
|
||
|
|
};
|
||
|
|
|
||
|
|
var testedFn = qq.UploadHandlerForm.prototype._getIframeContentJSON;
|
||
|
|
|
||
|
|
// IE 7,8 doesn't support application-javascript, application-json, text-javascript, text-plain
|
||
|
|
// as a response type, it also doesn't file load event when iframe loads page with 404 header
|
||
|
|
createIframe('iframe-content-tests/somepage.php', function(iframe){
|
||
|
|
same(testedFn(iframe), {}, "Server didn't return valid JSON object");
|
||
|
|
});
|
||
|
|
createIframe('iframe-content-tests/text-html.php', function(iframe){
|
||
|
|
same(testedFn(iframe), exampleObject, "text-html");
|
||
|
|
});
|
||
|
|
|
||
|
|
// test larger response (>4k)
|
||
|
|
//http://www.coderholic.com/firefox-4k-xml-node-limit/
|
||
|
|
createIframe('iframe-content-tests/text-html-large.php', function(iframe){
|
||
|
|
same(testedFn(iframe).length, 5000, ">4k");
|
||
|
|
});
|
||
|
|
|
||
|
|
|
||
|
|
function createIframe(src, onLoad){
|
||
|
|
var iframe = document.createElement('iframe');
|
||
|
|
qq.attach(iframe, 'load', function(){
|
||
|
|
onLoad(iframe);
|
||
|
|
|
||
|
|
setTimeout(function(){
|
||
|
|
qq.remove(iframe);
|
||
|
|
}, 1);
|
||
|
|
});
|
||
|
|
iframe.src = src;
|
||
|
|
document.body.appendChild(iframe);
|
||
|
|
}
|
||
|
|
});
|
||
|
|
|
||
|
|
test("upload, cancel with empty input", function(){
|
||
|
|
expect(1);
|
||
|
|
|
||
|
|
var uploadHandlerForm = new qq.UploadHandlerForm({
|
||
|
|
action: 'action-slow-response.php',
|
||
|
|
onComplete: function(id, fileName, response){
|
||
|
|
ok(false, 'onComplete should not run, the request should be cancelled');
|
||
|
|
}
|
||
|
|
});
|
||
|
|
|
||
|
|
var input = document.createElement('input');
|
||
|
|
var id = uploadHandlerForm.add(input);
|
||
|
|
uploadHandlerForm.cancel(id);
|
||
|
|
|
||
|
|
try {
|
||
|
|
// should fail
|
||
|
|
uploadHandlerForm.upload(id);
|
||
|
|
} catch (err){
|
||
|
|
ok(true, "wasn't uploaded after cancelling")
|
||
|
|
};
|
||
|
|
|
||
|
|
});
|
||
|
|
|
||
|
|
asyncTest("upload", function() {
|
||
|
|
expect(4);
|
||
|
|
|
||
|
|
var data = {stringOne: 'rtdfghdfhfh',stringTwo: 'dfsgsdfgsdg',stringThree: 'dfsgfhdfhdg'};
|
||
|
|
var savedId;
|
||
|
|
|
||
|
|
var uploadHandler = new qq.UploadHandlerForm({
|
||
|
|
action: 'action-handler-test.php',
|
||
|
|
onComplete: function(id, fileName, response){
|
||
|
|
ok(savedId == id, 'proper id in callback');
|
||
|
|
same(fileName, uploadHandler.getName(id), 'getName method');
|
||
|
|
|
||
|
|
data.fileName = fileName;
|
||
|
|
same(response, data, 'server received file and correct params, filenames match');
|
||
|
|
}
|
||
|
|
});
|
||
|
|
|
||
|
|
var input = document.getElementById('testinput1');
|
||
|
|
qq.attach(input, 'change', function(){
|
||
|
|
setTimeout(start, uploadTimeout);
|
||
|
|
|
||
|
|
savedId = uploadHandler.add(input);
|
||
|
|
ok(savedId != null, 'id returned by add');
|
||
|
|
|
||
|
|
uploadHandler.upload(savedId, data);
|
||
|
|
});
|
||
|
|
});
|
||
|
|
|
||
|
|
asyncTest("cancel", function() {
|
||
|
|
var uploadHandlerForm = new qq.UploadHandlerForm({
|
||
|
|
action: 'action-slow-response.php',
|
||
|
|
onComplete: function(id, fileName, response){
|
||
|
|
ok(false, 'onComplete should not run, the request should be cancelled');
|
||
|
|
}
|
||
|
|
});
|
||
|
|
|
||
|
|
var input = document.getElementById('testinput2');
|
||
|
|
qq.attach(input, 'change', function(){
|
||
|
|
var id = uploadHandlerForm.add(input);
|
||
|
|
uploadHandlerForm.upload(id);
|
||
|
|
uploadHandlerForm.cancel(id);
|
||
|
|
start();
|
||
|
|
});
|
||
|
|
});
|
||
|
|
|
||
|
|
test("check that forms and iframes were removed after use", function(){
|
||
|
|
same($('form,iframe').length, 0, 'check that forms and iframes were removed after use');
|
||
|
|
});
|
||
|
|
|
||
|
|
asyncTest('going back', function(){
|
||
|
|
setTimeout(function(){
|
||
|
|
var goBack = confirm("checking that the history wasn't changed, the page will go back to previous now");
|
||
|
|
if (goBack){
|
||
|
|
window.history.back();
|
||
|
|
|
||
|
|
start();
|
||
|
|
ok(false, "the page didn't change (fails in Opera)");
|
||
|
|
}
|
||
|
|
}, 1000);
|
||
|
|
});
|
||
|
|
|
||
|
|
}
|
||
|
|
|
||
|
|
if (!qq.UploadHandlerXhr.isSupported()){
|
||
|
|
$('.handlerxhr').remove();
|
||
|
|
} else {
|
||
|
|
//
|
||
|
|
module('qq.UploadHandlerXhr');
|
||
|
|
//
|
||
|
|
|
||
|
|
asyncTest("upload", function() {
|
||
|
|
expect(9);
|
||
|
|
|
||
|
|
var data = {stringOne: 'rtdfghdfhfh',stringTwo: 'dfsgsdfgsdg',stringThree: 'dfsgfhdfhdg'};
|
||
|
|
var onProgressCalled = false;
|
||
|
|
var expectedId, expectedName;
|
||
|
|
|
||
|
|
var uploadHandler = new qq.UploadHandlerXhr({
|
||
|
|
action: 'action-handler-test.php',
|
||
|
|
onProgress: function(id, fileName, loaded, total){
|
||
|
|
if (!onProgressCalled) {
|
||
|
|
onProgressCalled = true;
|
||
|
|
|
||
|
|
same(id, expectedId, 'progress event fired with correct id param');
|
||
|
|
same(fileName, expectedName, 'progress event fired with correct fileName param')
|
||
|
|
ok(loaded <= total && total > 0, 'progress event fired with possible loaded and total');
|
||
|
|
|
||
|
|
same(total, uploadHandler.getSize(id), 'getSize method');
|
||
|
|
}
|
||
|
|
},
|
||
|
|
onComplete: function(id, fileName, response){
|
||
|
|
same(id, expectedId, 'progress event fired with correct id param');
|
||
|
|
same(fileName, expectedName, 'progress event fired with correct fileName param')
|
||
|
|
|
||
|
|
data.fileName = fileName;
|
||
|
|
data.qqfile = fileName;
|
||
|
|
|
||
|
|
same(response, data, 'server received passed params, filenames match');
|
||
|
|
|
||
|
|
same(fileName, uploadHandler.getName(id), 'getName method');
|
||
|
|
}
|
||
|
|
});
|
||
|
|
|
||
|
|
var input = document.getElementById('handlerxhr1');
|
||
|
|
|
||
|
|
qq.attach(input, 'change', function(){
|
||
|
|
setTimeout(start, uploadTimeout);
|
||
|
|
|
||
|
|
var id = uploadHandler.add(input.files[0]);
|
||
|
|
ok(id != null, 'id returned by add');
|
||
|
|
|
||
|
|
expectedId = id;
|
||
|
|
expectedName = input.files[0].name || input.files[0].fileName;
|
||
|
|
if (!expectedName){
|
||
|
|
ok(false, 'false value as a file name used');
|
||
|
|
}
|
||
|
|
|
||
|
|
uploadHandler.upload(id, data);
|
||
|
|
|
||
|
|
qq.remove(input);
|
||
|
|
});
|
||
|
|
});
|
||
|
|
|
||
|
|
asyncTest("cancel", function() {
|
||
|
|
var uploadHandler = new qq.UploadHandlerXhr({
|
||
|
|
action: 'action-slow-response.php',
|
||
|
|
onComplete: function(id, fileName, response){
|
||
|
|
ok(false, 'onComplete should not run, the request should be cancelled');
|
||
|
|
}
|
||
|
|
});
|
||
|
|
|
||
|
|
var input = document.getElementById('handlerxhr2');
|
||
|
|
if (!input){
|
||
|
|
// input removed because uploading via XHR is not supported
|
||
|
|
return;
|
||
|
|
}
|
||
|
|
|
||
|
|
qq.attach(input, 'change', function(){
|
||
|
|
var id = uploadHandler.add(input.files[0]);
|
||
|
|
uploadHandler.upload(id);
|
||
|
|
uploadHandler.cancel(id);
|
||
|
|
|
||
|
|
start();
|
||
|
|
qq.remove(input);
|
||
|
|
});
|
||
|
|
});
|
||
|
|
}
|
||
|
|
});
|
||
|
|
</script>
|
||
|
|
</head>
|
||
|
|
<body>
|
||
|
|
<h1 id="qunit-header">File uploader tests</h1>
|
||
|
|
<h2 id="qunit-banner"></h2>
|
||
|
|
<h2 id="qunit-userAgent"></h2>
|
||
|
|
<ol id="qunit-tests"></ol>
|
||
|
|
|
||
|
|
<p>
|
||
|
|
Open this page via https connection, and make sure that loading bar is not acting strange after all tests are run.
|
||
|
|
Back button test fails in Opera.
|
||
|
|
</p>
|
||
|
|
|
||
|
|
<p>Please select a file for each input below (in order)</p>
|
||
|
|
|
||
|
|
<p>qq.FileUploader</p>
|
||
|
|
<div id="fileuploader1"></div>
|
||
|
|
|
||
|
|
<p>qq.UploadHandlerForm</p>
|
||
|
|
<input class="handlerform" id="testinput1" type="file">
|
||
|
|
<input class="handlerform" id="testinput2" type="file">
|
||
|
|
|
||
|
|
<p>qq.UploadHandlerXhr</p>
|
||
|
|
<input class="handlerxhr" id="handlerxhr1" type="file">
|
||
|
|
<input class="handlerxhr" id="handlerxhr2" type="file">
|
||
|
|
|
||
|
|
</body>
|
||
|
|
</html>
|
||
|
|
|
||
|
|
|