Merge branch '30188-handle-remove-branch-failure' into 'master'

fix js error in MR remove branch failure handler

Closes #30188

See merge request !10304

3 files changed, 58 insertions, 5 deletions

diff --git a/app/assets/javascripts/merged_buttons.js b/app/assets/javascripts/merged_buttons.js
index 9548a98f499..7b0997c6520 100644
--- a/app/assets/javascripts/merged_buttons.js
+++ b/app/assets/javascripts/merged_buttons.js
@@ -1,11 +1,13 @@
 /* eslint-disable func-names, space-before-function-paren, no-var, prefer-rest-params, wrap-iife, max-len */
 
-(function() {
-  var bind = function(fn, me) { return function() { return fn.apply(me, arguments); }; };
+import '~/lib/utils/url_utility';
 
+(function() {
   this.MergedButtons = (function() {
     function MergedButtons() {
-      this.removeSourceBranch = bind(this.removeSourceBranch, this);
+      this.removeSourceBranch = this.removeSourceBranch.bind(this);
+      this.removeBranchSuccess = this.removeBranchSuccess.bind(this);
+      this.removeBranchError = this.removeBranchError.bind(this);
       this.$removeBranchWidget = $('.remove_source_branch_widget');
       this.$removeBranchProgress = $('.remove_source_branch_in_progress');
       this.$removeBranchFailed = $('.remove_source_branch_widget.failed');
@@ -22,7 +24,7 @@
     MergedButtons.prototype.initEventListeners = function() {
       $(document).on('click', '.remove_source_branch', this.removeSourceBranch);
       $(document).on('ajax:success', '.remove_source_branch', this.removeBranchSuccess);
-      return $(document).on('ajax:error', '.remove_source_branch', this.removeBranchError);
+      $(document).on('ajax:error', '.remove_source_branch', this.removeBranchError);
     };
 
     MergedButtons.prototype.removeSourceBranch = function() {
@@ -31,7 +33,7 @@
     };
 
     MergedButtons.prototype.removeBranchSuccess = function() {
-      return location.reload();
+      gl.utils.refreshCurrentPage();
     };
 
     MergedButtons.prototype.removeBranchError = function() {
diff --git a/spec/javascripts/fixtures/merge_requests.rb b/spec/javascripts/fixtures/merge_requests.rb
index fddeaaf504d..47d904b865b 100644
--- a/spec/javascripts/fixtures/merge_requests.rb
+++ b/spec/javascripts/fixtures/merge_requests.rb
@@ -7,6 +7,7 @@ describe Projects::MergeRequestsController, '(JavaScript fixtures)', type: :cont
   let(:namespace) { create(:namespace, name: 'frontend-fixtures' )}
   let(:project) { create(:project, namespace: namespace, path: 'merge-requests-project') }
   let(:merge_request) { create(:merge_request, :with_diffs, source_project: project, target_project: project, description: '- [ ] Task List Item') }
+  let(:merged_merge_request) { create(:merge_request, :merged, source_project: project, target_project: project) }
   let(:pipeline) do
     create(
       :ci_pipeline,
@@ -32,6 +33,12 @@ describe Projects::MergeRequestsController, '(JavaScript fixtures)', type: :cont
     render_merge_request(example.description, merge_request)
   end
 
+  it 'merge_requests/merged_merge_request.html.raw' do |example|
+    allow_any_instance_of(MergeRequest).to receive(:source_branch_exists?).and_return(true)
+    allow_any_instance_of(MergeRequest).to receive(:can_remove_source_branch?).and_return(true)
+    render_merge_request(example.description, merged_merge_request)
+  end
+
   private
 
   def render_merge_request(fixture_file_name, merge_request)
diff --git a/spec/javascripts/merged_buttons_spec.js b/spec/javascripts/merged_buttons_spec.js
new file mode 100644
index 00000000000..b5c5e60dd97
--- /dev/null
+++ b/spec/javascripts/merged_buttons_spec.js
@@ -0,0 +1,44 @@
+/* global MergedButtons */
+
+import '~/merged_buttons';
+
+describe('MergedButtons', () => {
+  const fixturesPath = 'merge_requests/merged_merge_request.html.raw';
+  preloadFixtures(fixturesPath);
+
+  beforeEach(() => {
+    loadFixtures(fixturesPath);
+    this.mergedButtons = new MergedButtons();
+    this.$removeBranchWidget = $('.remove_source_branch_widget:not(.failed)');
+    this.$removeBranchProgress = $('.remove_source_branch_in_progress');
+    this.$removeBranchFailed = $('.remove_source_branch_widget.failed');
+    this.$removeBranchButton = $('.remove_source_branch');
+  });
+
+  describe('removeSourceBranch', () => {
+    it('shows loader', () => {
+      $('.remove_source_branch').trigger('click');
+      expect(this.$removeBranchProgress).toBeVisible();
+      expect(this.$removeBranchWidget).not.toBeVisible();
+    });
+  });
+
+  describe('removeBranchSuccess', () => {
+    it('refreshes page when branch removed', () => {
+      spyOn(gl.utils, 'refreshCurrentPage').and.stub();
+      const response = { status: 200 };
+      this.$removeBranchButton.trigger('ajax:success', response, 'xhr');
+      expect(gl.utils.refreshCurrentPage).toHaveBeenCalled();
+    });
+  });
+
+  describe('removeBranchError', () => {
+    it('shows error message', () => {
+      const response = { status: 500 };
+      this.$removeBranchButton.trigger('ajax:error', response, 'xhr');
+      expect(this.$removeBranchFailed).toBeVisible();
+      expect(this.$removeBranchProgress).not.toBeVisible();
+      expect(this.$removeBranchWidget).not.toBeVisible();
+    });
+  });
+});