Replace $.post in edit blob with axios

2 files changed, 29 insertions, 8 deletions

diff --git a/app/assets/javascripts/blob_edit/edit_blob.js b/app/assets/javascripts/blob_edit/edit_blob.js
index b37988a674d..a25f7fb3dcd 100644
--- a/app/assets/javascripts/blob_edit/edit_blob.js
+++ b/app/assets/javascripts/blob_edit/edit_blob.js
@@ -1,5 +1,8 @@
 /* global ace */
 
+import axios from '~/lib/utils/axios_utils';
+import createFlash from '~/flash';
+import { __ } from '~/locale';
 import TemplateSelectorMediator from '../blob/file_template_mediator';
 
 export default class EditBlob {
@@ -56,12 +59,14 @@ export default class EditBlob {
 
     if (paneId === '#preview') {
       this.$toggleButton.hide();
-      return $.post(currentLink.data('preview-url'), {
+      axios.post(currentLink.data('preview-url'), {
         content: this.editor.getValue(),
-      }, (response) => {
-        currentPane.empty().append(response);
-        return currentPane.renderGFM();
-      });
+      })
+      .then(({ data }) => {
+        currentPane.empty().append(data);
+        currentPane.renderGFM();
+      })
+      .catch(() => createFlash(__('An error occurred previewing the blob')));
     }
 
     this.$toggleButton.show();
diff --git a/spec/features/projects/blobs/edit_spec.rb b/spec/features/projects/blobs/edit_spec.rb
index 69e4c9f04a1..89d3bd24b89 100644
--- a/spec/features/projects/blobs/edit_spec.rb
+++ b/spec/features/projects/blobs/edit_spec.rb
@@ -17,12 +17,15 @@ feature 'Editing file blob', :js do
       sign_in(user)
     end
 
-    def edit_and_commit
+    def edit_and_commit(commit_changes: true)
       wait_for_requests
       find('.js-edit-blob').click
       find('#editor')
       execute_script('ace.edit("editor").setValue("class NextFeature\nend\n")')
-      click_button 'Commit changes'
+
+      if commit_changes
+        click_button 'Commit changes'
+      end
     end
 
     context 'from MR diff' do
@@ -39,13 +42,26 @@ feature 'Editing file blob', :js do
     context 'from blob file path' do
       before do
         visit project_blob_path(project, tree_join(branch, file_path))
-        edit_and_commit
       end
 
       it 'updates content' do
+        edit_and_commit
+
         expect(page).to have_content 'successfully committed'
         expect(page).to have_content 'NextFeature'
       end
+
+      it 'previews content' do
+        edit_and_commit(commit_changes: false)
+        click_link 'Preview changes'
+        wait_for_requests
+
+        old_line_count = page.all('.line_holder.old').size
+        new_line_count = page.all('.line_holder.new').size
+
+        expect(old_line_count).to be > 0
+        expect(new_line_count).to be > 0
+      end
     end
   end