2 files changed, 98 insertions, 18 deletions

diff --git a/spec/features/uploads/user_uploads_file_to_note_spec.rb b/spec/features/uploads/user_uploads_file_to_note_spec.rb
index 0c160dd74b4..8f03024ea06 100644
--- a/spec/features/uploads/user_uploads_file_to_note_spec.rb
+++ b/spec/features/uploads/user_uploads_file_to_note_spec.rb
@@ -5,18 +5,78 @@ feature 'User uploads file to note', feature: true do
 
   let(:user) { create(:user) }
   let(:project) { create(:empty_project, creator: user, namespace: user.namespace) }
+  let(:issue) { create(:issue, project: project, author: user) }
 
-  scenario 'they see the attached file', js: true do
-    issue = create(:issue, project: project, author: user)
-
+  before do
     login_as(user)
     visit namespace_project_issue_path(project.namespace, project, issue)
+  end
+
+  context 'before uploading' do
+    it 'shows "Attach a file" button', js: true do
+      expect(page).to have_button('Attach a file')
+      expect(page).not_to have_selector('.uploading-progress-container', visible: true)
+    end
+  end
+
+  context 'uploading is in progress' do
+    it 'shows "Cancel" button on uploading', js: true do
+      dropzone_file([Rails.root.join('spec', 'fixtures', 'dk.png')], 0, false)
+
+      expect(page).to have_button('Cancel')
+    end
+
+    it 'cancels uploading on clicking to "Cancel" button', js: true do
+      dropzone_file([Rails.root.join('spec', 'fixtures', 'dk.png')], 0, false)
+
+      click_button 'Cancel'
+
+      expect(page).to have_button('Attach a file')
+      expect(page).not_to have_button('Cancel')
+      expect(page).not_to have_selector('.uploading-progress-container', visible: true)
+    end
+
+    it 'shows "Attaching a file" message on uploading 1 file', js: true do
+      dropzone_file([Rails.root.join('spec', 'fixtures', 'dk.png')], 0, false)
+
+      expect(page).to have_selector('.attaching-file-message', visible: true, text: 'Attaching a file -')
+    end
+
+    it 'shows "Attaching 2 files" message on uploading 2 file', js: true do
+      dropzone_file([Rails.root.join('spec', 'fixtures', 'video_sample.mp4'),
+                     Rails.root.join('spec', 'fixtures', 'dk.png')], 0, false)
+
+      expect(page).to have_selector('.attaching-file-message', visible: true, text: 'Attaching 2 files -')
+    end
+
+    it 'shows error message, "retry" and "attach a new file" link a if file is too big', js: true do
+      dropzone_file([Rails.root.join('spec', 'fixtures', 'video_sample.mp4')], 0.01)
+
+      error_text = 'File is too big (0.06MiB). Max filesize: 0.01MiB.'
+
+      expect(page).to have_selector('.uploading-error-message', visible: true, text: error_text)
+      expect(page).to have_selector('.retry-uploading-link', visible: true, text: 'Try again')
+      expect(page).to have_selector('.attach-new-file', visible: true, text: 'attach a new file')
+      expect(page).not_to have_button('Attach a file')
+    end
+  end
+
+  context 'uploading is complete' do
+    it 'shows "Attach a file" button on uploading complete', js: true do
+      dropzone_file([Rails.root.join('spec', 'fixtures', 'dk.png')])
+      wait_for_ajax
+
+      expect(page).to have_button('Attach a file')
+      expect(page).not_to have_selector('.uploading-progress-container', visible: true)
+    end
 
-    dropzone_file(Rails.root.join('spec', 'fixtures', 'dk.png'))
-    click_button 'Comment'
-    wait_for_ajax
+    scenario 'they see the attached file', js: true do
+      dropzone_file([Rails.root.join('spec', 'fixtures', 'dk.png')])
+      click_button 'Comment'
+      wait_for_ajax
 
-    expect(find('a.no-attachment-icon img[alt="dk"]')['src'])
-      .to match(%r{/#{project.full_path}/uploads/\h{32}/dk\.png$})
+      expect(find('a.no-attachment-icon img[alt="dk"]')['src'])
+        .to match(%r{/#{project.full_path}/uploads/\h{32}/dk\.png$})
+    end
   end
 end
diff --git a/spec/support/dropzone_helper.rb b/spec/support/dropzone_helper.rb
index 984ec7d2741..02fdeb08afe 100644
--- a/spec/support/dropzone_helper.rb
+++ b/spec/support/dropzone_helper.rb
@@ -6,32 +6,52 @@ module DropzoneHelper
   # Dropzone events to perform the actual upload.
   #
   # This method waits for the upload to complete before returning.
-  def dropzone_file(file_path)
+  # max_file_size is an optional parameter.
+  # If it's not 0, then it used in dropzone.maxFilesize parameter.
+  # wait_for_queuecomplete is an optional parameter.
+  # If it's 'false', then the helper will NOT wait for backend response
+  # It lets to test behaviors while AJAX is processing.
+  def dropzone_file(files, max_file_size = 0, wait_for_queuecomplete = true)
     # Generate a fake file input that Capybara can attach to
     page.execute_script <<-JS.strip_heredoc
+      $('#fakeFileInput').remove();
       var fakeFileInput = window.$('<input/>').attr(
-        {id: 'fakeFileInput', type: 'file'}
+        {id: 'fakeFileInput', type: 'file', multiple: true}
       ).appendTo('body');
 
       window._dropzoneComplete = false;
     JS
 
-    # Attach the file to the fake input selector with Capybara
-    attach_file('fakeFileInput', file_path)
+    # Attach files to the fake input selector with Capybara
+    attach_file('fakeFileInput', files)
 
     # Manually trigger a Dropzone "drop" event with the fake input's file list
     page.execute_script <<-JS.strip_heredoc
-      var fileList = [$('#fakeFileInput')[0].files[0]];
-      var e = jQuery.Event('drop', { dataTransfer : { files : fileList } });
-
       var dropzone = $('.div-dropzone')[0].dropzone;
+      dropzone.options.autoProcessQueue = false;
+
+      if (#{max_file_size} > 0) {
+        dropzone.options.maxFilesize = #{max_file_size};
+      }
+
       dropzone.on('queuecomplete', function() {
         window._dropzoneComplete = true;
       });
-      dropzone.listeners[0].events.drop(e);
+
+      var fileList = [$('#fakeFileInput')[0].files];
+
+      $.map(fileList, function(file){
+        var e = jQuery.Event('drop', { dataTransfer : { files : file } });
+
+        dropzone.listeners[0].events.drop(e);
+      });
+
+      dropzone.processQueue();
     JS
 
-    # Wait until Dropzone's fired `queuecomplete`
-    loop until page.evaluate_script('window._dropzoneComplete === true')
+    if wait_for_queuecomplete
+      # Wait until Dropzone's fired `queuecomplete`
+      loop until page.evaluate_script('window._dropzoneComplete === true')
+    end
   end
 end