From 41c0880a9d733f65332947c8a2d78dae3ca217a9 Mon Sep 17 00:00:00 2001 From: Florian Staudacher Date: Mon, 2 Sep 2013 17:57:13 +0200 Subject: [PATCH] add jasmine specs for uploader, minor changes --- ...ct_selector.js => aspect_selector_view.js} | 0 ...ing_started.js => getting_started_view.js} | 0 .../{services.js => services_view.js} | 0 .../{uploader.js => uploader_view.js} | 12 +- .../javascripts/app/views/publisher_view.js | 9 +- app/views/shared/_publisher.html.haml | 1 - .../app/views/publisher_view_spec.js | 130 ++++++++++++++++++ 7 files changed, 141 insertions(+), 11 deletions(-) rename app/assets/javascripts/app/views/publisher/{aspect_selector.js => aspect_selector_view.js} (100%) rename app/assets/javascripts/app/views/publisher/{getting_started.js => getting_started_view.js} (100%) rename app/assets/javascripts/app/views/publisher/{services.js => services_view.js} (100%) rename app/assets/javascripts/app/views/publisher/{uploader.js => uploader_view.js} (90%) diff --git a/app/assets/javascripts/app/views/publisher/aspect_selector.js b/app/assets/javascripts/app/views/publisher/aspect_selector_view.js similarity index 100% rename from app/assets/javascripts/app/views/publisher/aspect_selector.js rename to app/assets/javascripts/app/views/publisher/aspect_selector_view.js diff --git a/app/assets/javascripts/app/views/publisher/getting_started.js b/app/assets/javascripts/app/views/publisher/getting_started_view.js similarity index 100% rename from app/assets/javascripts/app/views/publisher/getting_started.js rename to app/assets/javascripts/app/views/publisher/getting_started_view.js diff --git a/app/assets/javascripts/app/views/publisher/services.js b/app/assets/javascripts/app/views/publisher/services_view.js similarity index 100% rename from app/assets/javascripts/app/views/publisher/services.js rename to app/assets/javascripts/app/views/publisher/services_view.js diff --git a/app/assets/javascripts/app/views/publisher/uploader.js b/app/assets/javascripts/app/views/publisher/uploader_view.js similarity index 90% rename from app/assets/javascripts/app/views/publisher/uploader.js rename to app/assets/javascripts/app/views/publisher/uploader_view.js index ef221a802..b41475de6 100644 --- a/app/assets/javascripts/app/views/publisher/uploader.js +++ b/app/assets/javascripts/app/views/publisher/uploader_view.js @@ -30,12 +30,15 @@ app.views.PublisherUploader = Backbone.View.extend({ }); + this.el_info = $('
'); + this.options.publisher.el_wrapper.before(this.el_info); + this.options.publisher.el_photozone.on('click', '.x', _.bind(this._removePhoto, this)); }, progressHandler: function(id, fileName, loaded, total) { var progress = Math.round(loaded / total * 100); - this.options.el_info.text(fileName + ' ' + progress + '%').fadeTo(200, 1); + this.el_info.text(fileName + ' ' + progress + '%').fadeTo(200, 1); }, submitHandler: function(id, fileName) { @@ -46,8 +49,7 @@ app.views.PublisherUploader = Backbone.View.extend({ // add photo placeholders to the publisher to indicate an upload in progress _addPhotoPlaceholder: function() { var publisher = this.options.publisher; - publisher.el_submit.attr('disabled', 'disabled'); - publisher.el_preview.attr('disabled', 'disabled'); + publisher.setButtonsEnabled(false); publisher.el_wrapper.addClass('with_attachments'); publisher.el_photozone.append( @@ -58,7 +60,7 @@ app.views.PublisherUploader = Backbone.View.extend({ }, uploadCompleteHandler: function(id, fileName, response) { - this.options.el_info.text(Diaspora.I18n.t('photo_uploader.completed', {file: fileName})).fadeTo(2000, 0); + this.el_info.text(Diaspora.I18n.t('photo_uploader.completed', {file: fileName})).fadeTo(2000, 0); var id = response.data.photo.id, url = response.data.photo.unprocessed_image.url; @@ -105,7 +107,7 @@ app.views.PublisherUploader = Backbone.View.extend({ dataType: 'json', type: 'DELETE', success: function() { - photo.fadeOut(400, function(){ + $.when(photo.fadeOut(400)).then(function(){ photo.remove(); if( self.options.publisher.$('.publisher_photo').length == 0 ) { diff --git a/app/assets/javascripts/app/views/publisher_view.js b/app/assets/javascripts/app/views/publisher_view.js index 39212d244..e0f24dbca 100644 --- a/app/assets/javascripts/app/views/publisher_view.js +++ b/app/assets/javascripts/app/views/publisher_view.js @@ -3,10 +3,10 @@ * the COPYRIGHT file. */ -//= require ./publisher/services -//= require ./publisher/aspect_selector -//= require ./publisher/getting_started -//= require ./publisher/uploader +//= require ./publisher/services_view +//= require ./publisher/aspect_selector_view +//= require ./publisher/getting_started_view +//= require ./publisher/uploader_view //= require jquery.textchange app.views.Publisher = Backbone.View.extend({ @@ -91,7 +91,6 @@ app.views.Publisher = Backbone.View.extend({ this.view_uploader = new app.views.PublisherUploader({ el: this.$('#file-upload'), - el_info: this.$('#fileInfo'), publisher: this }); diff --git a/app/views/shared/_publisher.html.haml b/app/views/shared/_publisher.html.haml index f892b4e44..0180a8108 100644 --- a/app/views/shared/_publisher.html.haml +++ b/app/views/shared/_publisher.html.haml @@ -14,7 +14,6 @@ = status.error_messages %div %params - #fileInfo #publisher_textarea_wrapper = link_to(content_tag(:div, nil, :class => 'icons-deletelabel'), "#", :id => "hide_publisher", :title => t('.discard_post')) %ul#photodropzone diff --git a/spec/javascripts/app/views/publisher_view_spec.js b/spec/javascripts/app/views/publisher_view_spec.js index 229fc35e3..a6a7135b3 100644 --- a/spec/javascripts/app/views/publisher_view_spec.js +++ b/spec/javascripts/app/views/publisher_view_spec.js @@ -320,5 +320,135 @@ describe("app.views.Publisher", function() { }); }); + context('uploader', function() { + beforeEach(function() { + jQuery.fx.off = true; + setFixtures( + '
'+ + '
'+ + '
'+ + '
'+ + ' '+ + '
'+ + '
' + ); + }); + + it('initializes the file uploader plugin', function() { + spyOn(qq, 'FileUploaderBasic'); + var publisher = new app.views.Publisher(); + + expect(qq.FileUploaderBasic).toHaveBeenCalled(); + }); + + context('event handlers', function() { + beforeEach(function() { + this.view = new app.views.Publisher(); + + // replace the uploader plugin with a dummy object + var upload_view = this.view.view_uploader; + this.uploader = { + onProgress: _.bind(upload_view.progressHandler, upload_view), + onSubmit: _.bind(upload_view.submitHandler, upload_view), + onComplete: _.bind(upload_view.uploadCompleteHandler, upload_view) + }; + upload_view.uploader = this.uploader; + }); + + context('progress', function() { + it('shows progress in percent', function() { + this.uploader.onProgress(null, 'test.jpg', 20, 100); + + var info = this.view.view_uploader.el_info; + expect(info.text()).toContain('test.jpg'); + expect(info.text()).toContain('20%'); + }); + }); + + context('submitting', function() { + beforeEach(function() { + this.uploader.onSubmit(null, 'test.jpg'); + }); + + it('adds a placeholder', function() { + expect(this.view.el_wrapper.attr('class')).toContain('with_attachments'); + expect(this.view.el_photozone.find('li').length).toBe(1); + }); + + it('disables the publisher buttons', function() { + expect(this.view.el_submit.prop('disabled')).toBeTruthy(); + expect(this.view.el_preview.prop('disabled')).toBeTruthy(); + }); + }); + + context('completion', function() { + beforeEach(function() { + Diaspora.I18n.loadLocale({ photo_uploader: { completed: '<%= file %> completed' }}); + $('#photodropzone').html('
    • '); + + this.uploader.onComplete(null, 'test.jpg', { data: { photo: { + id: '987', + unprocessed_image: { url: 'test.jpg' } + }}}); + }); + + it('shows it in text form', function() { + var info = this.view.view_uploader.el_info; + expect(info.text()).toBe(Diaspora.I18n.t('photo_uploader.completed', {file: 'test.jpg'})) + }); + + it('adds a hidden input to the publisher', function() { + var input = this.view.$('input[type="hidden"][value="987"][name="photos[]"]'); + expect(input.length).toBe(1); + }); + + it('replaces the placeholder', function() { + var li = this.view.el_photozone.find('li'); + var img = li.find('img'); + + expect(li.attr('class')).not.toContain('loading'); + expect(img.attr('src')).toBe('test.jpg'); + expect(img.attr('data-id')).toBe('987'); + }); + + it('re-enables the buttons', function() { + expect(this.view.el_submit.prop('disabled')).toBeFalsy(); + expect(this.view.el_preview.prop('disabled')).toBeFalsy(); + }); + }); + }); + + context('photo removal', function() { + beforeEach(function() { + this.view = new app.views.Publisher(); + this.view.el_wrapper.addClass('with_attachments'); + this.view.el_photozone.html( + '
  • .'+ + ' '+ + '
    X
    '+ + '
    '+ + '
    • ' + ); + + spyOn(jQuery, 'ajax').andCallFake(function(opts) { opts.success(); }); + this.view.el_photozone.find('.x').click(); + }); + + it('removes the element', function() { + var photo = this.view.el_photozone.find('li.publisher_photo'); + expect(photo.length).toBe(0); + }); + + it('sends an ajax request', function() { + expect($.ajax).toHaveBeenCalled(); + }); + + it('removes class on wrapper element', function() { + expect(this.view.el_wrapper.attr('class')).not.toContain('with_attachments'); + }); + }); + }); + });