From 542b3958580ea77879d8c941a167af75972fa60c Mon Sep 17 00:00:00 2001 From: Vincent Petry Date: Wed, 21 May 2014 15:55:29 +0200 Subject: Fixed drag and drop from external files, added tests - Fixed detection whether the drop zone is inside the currently visible table - Now dragging outside the table does nothing instead of uploading, because the user might drop on the sidebar - Added unit tests for the drop handler --- apps/files/tests/js/filelistSpec.js | 131 ++++++++++++++++++++++++++++++++++++ 1 file changed, 131 insertions(+) (limited to 'apps/files/tests') diff --git a/apps/files/tests/js/filelistSpec.js b/apps/files/tests/js/filelistSpec.js index a3dc5b255a1..e5bbf0f0fb8 100644 --- a/apps/files/tests/js/filelistSpec.js +++ b/apps/files/tests/js/filelistSpec.js @@ -65,6 +65,8 @@ describe('OCA.Files.FileList tests', function() { '
' + '
' + '' + + // uploader + '' + // dummy table // TODO: at some point this will be rendered by the fileList class itself! '' + @@ -1651,4 +1653,133 @@ describe('OCA.Files.FileList tests', function() { expect(fileList.findFileEl('Three.pdf').index()).toEqual(0); }); }); + /** + * Test upload mostly by testing the code inside the event handlers + * that were registered on the magic upload object + */ + describe('file upload', function() { + var $uploader; + + beforeEach(function() { + // note: this isn't the real blueimp file uploader from jquery.fileupload + // but it makes it possible to simulate the event triggering to + // test the response of the handlers + $uploader = $('#file_upload_start'); + fileList.setupUploadEvents(); + fileList.setFiles(testFiles); + }); + + afterEach(function() { + $uploader = null; + }); + + describe('dropping external files', function() { + var uploadData; + + /** + * Simulate drop event on the given target + * + * @param $target target element to drop on + * @return event object including the result + */ + function dropOn($target, data) { + var eventData = { + originalEvent: { + target: $target + } + }; + var ev = new $.Event('fileuploaddrop', eventData); + // using triggerHandler instead of trigger so we can pass + // extra data + $uploader.triggerHandler(ev, data || {}); + return ev; + } + + /** + * Convert form data to a flat list + * + * @param formData form data array as used by jquery.upload + * @return map based on the array's key values + */ + function decodeFormData(data) { + var map = {}; + _.each(data.formData(), function(entry) { + map[entry.name] = entry.value; + }); + return map; + } + + beforeEach(function() { + // simulate data structure from jquery.upload + uploadData = { + files: [{ + relativePath: 'fileToUpload.txt' + }] + }; + }); + afterEach(function() { + uploadData = null; + }); + it('drop on a tr or crumb outside file list does not trigger upload', function() { + var $anotherTable = $('
outside
crumb
'); + var ev; + $('#testArea').append($anotherTable); + ev = dropOn($anotherTable.find('tr'), uploadData); + expect(ev.result).toEqual(false); + + ev = dropOn($anotherTable.find('.crumb')); + expect(ev.result).toEqual(false); + }); + it('drop on an element outside file list does not trigger upload', function() { + var $anotherEl = $('
outside
'); + var ev; + $('#testArea').append($anotherEl); + ev = dropOn($anotherEl); + + expect(ev.result).toEqual(false); + }); + it('drop on an element inside the table triggers upload', function() { + var ev; + ev = dropOn(fileList.$fileList.find('th:first'), uploadData); + + expect(ev.result).not.toEqual(false); + }); + it('drop on an element inside the table does not trigger upload if no upload permission', function() { + $('#permissions').val(0); + var ev; + ev = dropOn(fileList.$fileList.find('th:first')); + + expect(ev.result).toEqual(false); + }); + it('drop on a file row inside the table triggers upload to current folder', function() { + var ev; + ev = dropOn(fileList.findFileEl('One.txt').find('td:first'), uploadData); + + expect(ev.result).not.toEqual(false); + }); + it('drop on a folder row inside the table triggers upload to target folder', function() { + var ev, formData; + ev = dropOn(fileList.findFileEl('somedir').find('td:eq(2)'), uploadData); + + expect(ev.result).not.toEqual(false); + expect(uploadData.formData).toBeDefined(); + formData = decodeFormData(uploadData); + expect(formData.dir).toEqual('/subdir/somedir'); + expect(formData.file_directory).toEqual('fileToUpload.txt'); + expect(formData.requesttoken).toBeDefined(); + }); + it('drop on a breadcrumb inside the table triggers upload to target folder', function() { + var ev, formData; + fileList.changeDirectory('a/b/c/d'); + ev = dropOn(fileList.$el.find('.crumb:eq(2)'), uploadData); + + expect(ev.result).not.toEqual(false); + expect(uploadData.formData).toBeDefined(); + formData = decodeFormData(uploadData); + expect(formData.dir).toEqual('/a/b'); + expect(formData.file_directory).toEqual('fileToUpload.txt'); + expect(formData.requesttoken).toBeDefined(); + }); + }); + }); }); -- cgit v1.2.3 From d6e1643a0e448c45f35311c3635125a2c0f39a45 Mon Sep 17 00:00:00 2001 From: Vincent Petry Date: Thu, 22 May 2014 11:16:42 +0200 Subject: Fix dropping files below the table --- apps/files/css/files.css | 5 +++++ apps/files/js/filelist.js | 5 ++--- apps/files/templates/index.php | 2 +- apps/files/tests/js/filelistSpec.js | 8 +++++++- 4 files changed, 15 insertions(+), 5 deletions(-) (limited to 'apps/files/tests') diff --git a/apps/files/css/files.css b/apps/files/css/files.css index 009cb355ba7..e397d27e83b 100644 --- a/apps/files/css/files.css +++ b/apps/files/css/files.css @@ -91,6 +91,11 @@ position: relative; } +/* fit app list view heights */ +.app-files #app-content>.viewcontainer { + height: 100%; +} + /** * Override global #controls styles * to be more flexible / relative diff --git a/apps/files/js/filelist.js b/apps/files/js/filelist.js index 3d107c7ca7a..9f6840eab13 100644 --- a/apps/files/js/filelist.js +++ b/apps/files/js/filelist.js @@ -1517,10 +1517,9 @@ fileUploadStart.on('fileuploaddrop', function(e, data) { OC.Upload.log('filelist handle fileuploaddrop', e, data); - var dropTarget = $(e.originalEvent.target); - // check if dropped inside this list and not another one - if (dropTarget.length && !self.$el.has(dropTarget).length) { + // check if dropped inside this container and not another one + if (dropTarget.length && !self.$el.is(dropTarget) && !self.$el.has(dropTarget).length) { return false; } diff --git a/apps/files/templates/index.php b/apps/files/templates/index.php index 8cab4ce220b..b52effb1e78 100644 --- a/apps/files/templates/index.php +++ b/apps/files/templates/index.php @@ -2,7 +2,7 @@ printPage(); ?>
-