Fixed merge request status badge not updating after merging

d53aea6b · Phil Hughes · 5c51cbca · d53aea6b · d53aea6b · d53aea6b
--- a/app/assets/javascripts/merge_request.js
+++ b/app/assets/javascripts/merge_request.js
@@ -110,7 +110,7 @@ MergeRequest.prototype.initCommitMessageListeners = function() {
  });
 };

-MergeRequest.prototype.updateStatusText = function(classToRemove, classToAdd, newStatusText) {
+MergeRequest.updateStatusText = function(classToRemove, classToAdd, newStatusText) {
  $('.detail-page-header .status-box')
    .removeClass(classToRemove)
    .addClass(classToAdd)
@@ -118,14 +118,14 @@ MergeRequest.prototype.updateStatusText = function(classToRemove, classToAdd, ne
    .text(newStatusText);
 };

-MergeRequest.prototype.decreaseCounter = function(by = 1) {
-  const $el = $('.nav-links .js-merge-counter');
+MergeRequest.decreaseCounter = function(by = 1) {
+  const $el = $('.js-merge-counter');
  const count = Math.max((parseInt($el.text().replace(/[^\d]/, ''), 10) - by), 0);

  $el.text(addDelimiter(count));
 };

-MergeRequest.prototype.hideCloseButton = function() {
+MergeRequest.hideCloseButton = function() {
  const el = document.querySelector('.merge-request .js-issuable-actions');
  const closeDropdownItem = el.querySelector('li.close-item');
  if (closeDropdownItem) {

--- a/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_ready_to_merge.js
+++ b/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_ready_to_merge.js
 import successSvg from 'icons/_icon_status_success.svg';
 import warningSvg from 'icons/_icon_status_warning.svg';
 import simplePoll from '~/lib/utils/simple_poll';
+import MergeRequest from '../../../merge_request';
 import Flash from '../../../flash';
 import statusIcon from '../mr_widget_status_icon';
 import eventHub from '../../event_hub';
@@ -165,11 +166,9 @@ export default {
            // If state is merged we should update the widget and stop the polling
            eventHub.$emit('MRWidgetUpdateRequested');
            eventHub.$emit('FetchActionsContent');
-            if (window.mergeRequest) {
-              window.mergeRequest.updateStatusText('status-box-open', 'status-box-merged', 'Merged');
-              window.mergeRequest.hideCloseButton();
-              window.mergeRequest.decreaseCounter();
-            }
+            MergeRequest.updateStatusText('status-box-open', 'status-box-merged', 'Merged');
+            MergeRequest.hideCloseButton();
+            MergeRequest.decreaseCounter();
            stopPolling();

            // If user checked remove source branch and we didn't remove the branch yet

--- a/changelogs/unreleased/mr-status-box-update.yml
+++ b/changelogs/unreleased/mr-status-box-update.yml
+---
+title: Fixed merge request status badge not updating after merging
+merge_request:
+author:
+type: fixed
--- a/spec/javascripts/merge_request_spec.js
+++ b/spec/javascripts/merge_request_spec.js
@@ -70,8 +70,7 @@ import IssuablesHelper from '~/helpers/issuables_helper';
        beforeEach(() => {
          loadFixtures('merge_requests/merge_request_with_task_list.html.raw');
          this.el = document.querySelector('.js-issuable-actions');
-          const merge = new MergeRequest();
-          merge.hideCloseButton();
+          MergeRequest.hideCloseButton();
        });

        it('hides the dropdown close item and selects the next item', () => {

--- a/spec/javascripts/vue_mr_widget/components/states/mr_widget_ready_to_merge_spec.js
+++ b/spec/javascripts/vue_mr_widget/components/states/mr_widget_ready_to_merge_spec.js
@@ -371,6 +371,10 @@ describe('MRWidgetReadyToMerge', () => {
        });
      });

+      beforeEach(() => {
+        loadFixtures('merge_requests/merge_request_of_current_user.html.raw');
+      });
+
      it('should call start and stop polling when MR merged', (done) => {
        spyOn(eventHub, '$emit');
        spyOn(vm.service, 'poll').and.returnValue(returnPromise('merged'));
@@ -392,6 +396,47 @@ describe('MRWidgetReadyToMerge', () => {
        }, 333);
      });

+      it('updates status box', (done) => {
+        spyOn(vm.service, 'poll').and.returnValue(returnPromise('merged'));
+        spyOn(vm, 'initiateRemoveSourceBranchPolling');
+
+        vm.handleMergePolling(() => {}, () => {});
+
+        setTimeout(() => {
+          const statusBox = document.querySelector('.status-box');
+          expect(statusBox.classList.contains('status-box-merged')).toBeTruthy();
+          expect(statusBox.textContent).toContain('Merged');
+
+          done();
+        });
+      });
+
+      it('hides close button', (done) => {
+        spyOn(vm.service, 'poll').and.returnValue(returnPromise('merged'));
+        spyOn(vm, 'initiateRemoveSourceBranchPolling');
+
+        vm.handleMergePolling(() => {}, () => {});
+
+        setTimeout(() => {
+          expect(document.querySelector('.btn-close').classList.contains('hidden')).toBeTruthy();
+
+          done();
+        });
+      });
+
+      it('updates merge request count badge', (done) => {
+        spyOn(vm.service, 'poll').and.returnValue(returnPromise('merged'));
+        spyOn(vm, 'initiateRemoveSourceBranchPolling');
+
+        vm.handleMergePolling(() => {}, () => {});
+
+        setTimeout(() => {
+          expect(document.querySelector('.js-merge-counter').textContent).toBe('0');
+
+          done();
+        });
+      });
+
      it('should continue polling until MR is merged', (done) => {
        spyOn(vm.service, 'poll').and.returnValue(returnPromise('some_other_state'));
        spyOn(vm, 'initiateRemoveSourceBranchPolling');