Fixed issue_spec and merge_request_spec for report toggle changes

app/assets/javascripts/issue.js

@@ -43,9 +43,6 @@ class Issue {
 
   initIssueBtnEventListeners() {
     const issueFailMessage = 'Unable to update this issue at this time.';
-    const isClosedBadge = $('div.status-box-closed');
-    const isOpenBadge = $('div.status-box-open');
-    const projectIssuesCounter = $('.issue_counter');
 
     return $(document).on('click', 'a.btn-close, a.btn-reopen', (e) => {
       var $button, shouldSubmit, url;
@@ -66,6 +63,10 @@ class Issue {
       })
       .fail(() => new Flash(issueFailMessage))
       .done((data) => {
+        const isClosedBadge = $('div.status-box-closed');
+        const isOpenBadge = $('div.status-box-open');
+        const projectIssuesCounter = $('.issue_counter');
+
         if ('id' in data) {
           $(document).trigger('issuable:change');
 
@@ -91,7 +92,8 @@ class Issue {
         } else {
           new Flash(issueFailMessage);
         }
-
+      })
+      .then(() => {
         this.disableCloseReopenButton($button, false);
       });
     });

spec/javascripts/issue_spec.js

@@ -4,7 +4,7 @@ import CloseReopenReportToggle from '~/close_reopen_report_toggle';
 import '~/lib/utils/text_utility';
 
 describe('Issue', function() {
-  let $boxClosed, $boxOpen, $btnClose, $btnReopen;
+  let $boxClosed, $boxOpen, $btn;
 
   preloadFixtures('issues/closed-issue.html.raw');
   preloadFixtures('issues/issue-with-task-list.html.raw');
@@ -20,9 +20,7 @@ describe('Issue', function() {
   function expectIssueState(isIssueOpen) {
     expectVisibility($boxClosed, !isIssueOpen);
     expectVisibility($boxOpen, isIssueOpen);
-
-    expectVisibility($btnClose, isIssueOpen);
-    expectVisibility($btnReopen, !isIssueOpen);
+    expect($btn).toHaveText(isIssueOpen ? 'Close issue' : 'Reopen issue');
   }
 
   function expectNewBranchButtonState(isPending, canCreate) {
@@ -57,7 +55,7 @@ describe('Issue', function() {
     }
   }
 
-  function findElements() {
+  function findElements(isIssueInitiallyOpen) {
     $boxClosed = $('div.status-box-closed');
     expect($boxClosed).toExist();
     expect($boxClosed).toHaveText('Closed');
@@ -66,13 +64,9 @@ describe('Issue', function() {
     expect($boxOpen).toExist();
     expect($boxOpen).toHaveText('Open');
 
-    $btnClose = $('.btn-close.btn-grouped');
-    expect($btnClose).toExist();
-    expect($btnClose).toHaveText('Close issue');
-
-    $btnReopen = $('.btn-reopen.btn-grouped');
-    expect($btnReopen).toExist();
-    expect($btnReopen).toHaveText('Reopen issue');
+    $btn = $('.js-issuable-close-button');
+    expect($btn).toExist();
+    expect($btn).toHaveText(isIssueInitiallyOpen ? 'Close issue' : 'Reopen issue');
   }
 
   describe('task lists', function() {
@@ -99,7 +93,6 @@ describe('Issue', function() {
       function ajaxSpy(req) {
         if (req.url === this.$triggeredButton.attr('href')) {
           expect(req.type).toBe('PUT');
-          expect(this.$triggeredButton).toHaveProp('disabled', true);
           expectNewBranchButtonState(true, false);
           return this.issueStateDeferred;
         } else if (req.url === Issue.createMrDropdownWrap.dataset.canCreatePath) {
@@ -119,10 +112,11 @@ describe('Issue', function() {
           loadFixtures('issues/closed-issue.html.raw');
         }
 
-        findElements();
+        findElements(isIssueInitiallyOpen);
         this.issue = new Issue();
         expectIssueState(isIssueInitiallyOpen);
-        this.$triggeredButton = isIssueInitiallyOpen ? $btnClose : $btnReopen;
+
+        this.$triggeredButton = $btn;
 
         this.$projectIssuesCounter = $('.issue_counter');
         this.$projectIssuesCounter.text('1,001');
@@ -143,7 +137,7 @@ describe('Issue', function() {
         });
 
         expectIssueState(!isIssueInitiallyOpen);
-        expect(this.$triggeredButton).toHaveProp('disabled', false);
+        expect(this.$triggeredButton.get(0).getAttribute('disabled')).toBeNull();
         expect(this.$projectIssuesCounter.text()).toBe(isIssueInitiallyOpen ? '1,000' : '1,002');
         expectNewBranchButtonState(false, !isIssueInitiallyOpen);
       });
@@ -158,7 +152,7 @@ describe('Issue', function() {
         });
 
         expectIssueState(isIssueInitiallyOpen);
-        expect(this.$triggeredButton).toHaveProp('disabled', false);
+        expect(this.$triggeredButton.get(0).getAttribute('disabled')).toBeNull();
         expectErrorMessage();
         expect(this.$projectIssuesCounter.text()).toBe('1,001');
         expectNewBranchButtonState(false, isIssueInitiallyOpen);
@@ -172,7 +166,7 @@ describe('Issue', function() {
         });
 
         expectIssueState(isIssueInitiallyOpen);
-        expect(this.$triggeredButton).toHaveProp('disabled', true);
+        expect(this.$triggeredButton.get(0).getAttribute('disabled')).toBeNull();
         expectErrorMessage();
         expect(this.$projectIssuesCounter.text()).toBe('1,001');
         expectNewBranchButtonState(false, isIssueInitiallyOpen);

spec/javascripts/merge_request_spec.js

@@ -31,11 +31,11 @@ import CloseReopenReportToggle from '~/close_reopen_report_toggle';
 
     describe('class constructor', () => {
       it('calls .initCloseReopenReport', () => {
-        spyOn(MergeRequest, 'initCloseReopenReport');
+        spyOn(MergeRequest.prototype, 'initCloseReopenReport');
 
-        new MergeRequest(); // eslint-disable-line no-new
+        const mergeRequest = new MergeRequest();
 
-        expect(MergeRequest.initCloseReopenReport).toHaveBeenCalled();
+        expect(mergeRequest.initCloseReopenReport).toHaveBeenCalled();
       });
     });
 
@@ -46,11 +46,13 @@ import CloseReopenReportToggle from '~/close_reopen_report_toggle';
         const dropdownList = {};
         const button = {};
 
+        const mergeRequest = new MergeRequest();
+
         spyOn(CloseReopenReportToggle.prototype, 'initDroplab');
         spyOn(document, 'querySelector').and.returnValue(container);
         container.querySelector.and.returnValues(dropdownTrigger, dropdownList, button);
 
-        MergeRequest.initCloseReopenReport();
+        mergeRequest.initCloseReopenReport();
 
         expect(document.querySelector).toHaveBeenCalledWith('.js-issuable-close-dropdown');
         expect(container.querySelector).toHaveBeenCalledWith('.js-issuable-close-toggle');