Converted issue.js to axios

app/assets/javascripts/issue.js

 /* eslint-disable func-names, space-before-function-paren, no-var, prefer-rest-params, wrap-iife, one-var, no-underscore-dangle, one-var-declaration-per-line, object-shorthand, no-unused-vars, no-new, comma-dangle, consistent-return, quotes, dot-notation, quote-props, prefer-arrow-callback, max-len */
 import 'vendor/jquery.waitforimages';
+import axios from './lib/utils/axios_utils';
 import { addDelimiter } from './lib/utils/text_utility';
-import Flash from './flash';
+import flash from './flash';
 import TaskList from './task_list';
 import CreateMergeRequestDropdown from './create_merge_request_dropdown';
 import IssuablesHelper from './helpers/issuables_helper';
@@ -42,12 +43,8 @@ export default class Issue {
       this.disableCloseReopenButton($button);
 
       url = $button.attr('href');
-      return $.ajax({
-        type: 'PUT',
-        url: url
-      })
-      .fail(() => new Flash(issueFailMessage))
-      .done((data) => {
+      return axios.put(url)
+      .then(({ data }) => {
         const isClosedBadge = $('div.status-box-issue-closed');
         const isOpenBadge = $('div.status-box-open');
         const projectIssuesCounter = $('.issue_counter');
@@ -74,9 +71,10 @@ export default class Issue {
             }
           }
         } else {
-          new Flash(issueFailMessage);
+          flash(issueFailMessage);
         }
       })
+      .catch(() => flash(issueFailMessage))
       .then(() => {
         this.disableCloseReopenButton($button, false);
       });
@@ -115,24 +113,22 @@ export default class Issue {
   static initMergeRequests() {
     var $container;
     $container = $('#merge-requests');
-    return $.getJSON($container.data('url')).fail(function() {
-      return new Flash('Failed to load referenced merge requests');
-    }).done(function(data) {
-      if ('html' in data) {
-        return $container.html(data.html);
-      }
-    });
+    return axios.get($container.data('url'))
+      .then(({ data }) => {
+        if ('html' in data) {
+          $container.html(data.html);
+        }
+      }).catch(() => flash('Failed to load referenced merge requests'));
   }
 
   static initRelatedBranches() {
     var $container;
     $container = $('#related-branches');
-    return $.getJSON($container.data('url')).fail(function() {
-      return new Flash('Failed to load related branches');
-    }).done(function(data) {
-      if ('html' in data) {
-        return $container.html(data.html);
-      }
-    });
+    return axios.get($container.data('url'))
+      .then(({ data }) => {
+        if ('html' in data) {
+          $container.html(data.html);
+        }
+      }).catch(() => flash('Failed to load related branches'));
   }
 }

spec/javascripts/issue_spec.js

 /* eslint-disable space-before-function-paren, one-var, one-var-declaration-per-line, no-use-before-define, comma-dangle, max-len */
+import MockAdaptor from 'axios-mock-adapter';
+import axios from '~/lib/utils/axios_utils';
 import Issue from '~/issue';
 import '~/lib/utils/text_utility';
 
@@ -88,6 +90,7 @@ describe('Issue', function() {
   [true, false].forEach((isIssueInitiallyOpen) => {
     describe(`with ${isIssueInitiallyOpen ? 'open' : 'closed'} issue`, function() {
       const action = isIssueInitiallyOpen ? 'close' : 'reopen';
+      let mock;
 
       function ajaxSpy(req) {
         if (req.url === this.$triggeredButton.attr('href')) {
@@ -104,6 +107,18 @@ describe('Issue', function() {
         return null;
       }
 
+      function mockCloseButtonResponseSuccess(url, response) {
+        mock.onPut(url).reply(() => {
+          expectNewBranchButtonState(true, false);
+
+          return [200, response];
+        });
+      }
+
+      function mockCloseButtonResponseError(url) {
+        mock.onPut(url).networkError();
+      }
+
       beforeEach(function() {
         if (isIssueInitiallyOpen) {
           loadFixtures('issues/open-issue.html.raw');
@@ -123,68 +138,87 @@ describe('Issue', function() {
         this.issueStateDeferred = new jQuery.Deferred();
         this.canCreateBranchDeferred = new jQuery.Deferred();
 
+        mock = new MockAdaptor(axios);
+
         spyOn(jQuery, 'ajax').and.callFake(ajaxSpy.bind(this));
       });
 
-      it(`${action}s the issue`, function() {
-        this.$triggeredButton.trigger('click');
-        this.issueStateDeferred.resolve({
+      afterEach(() => {
+        mock.restore();
+      });
+
+      it(`${action}s the issue`, function(done) {
+        mockCloseButtonResponseSuccess(this.$triggeredButton.attr('href'), {
           id: 34
         });
+
+        this.$triggeredButton.trigger('click');
         this.canCreateBranchDeferred.resolve({
           can_create_branch: !isIssueInitiallyOpen
         });
 
-        expectIssueState(!isIssueInitiallyOpen);
-        expect(this.$triggeredButton.get(0).getAttribute('disabled')).toBeNull();
-        expect(this.$projectIssuesCounter.text()).toBe(isIssueInitiallyOpen ? '1,000' : '1,002');
-        expectNewBranchButtonState(false, !isIssueInitiallyOpen);
+        setTimeout(() => {
+          expectIssueState(!isIssueInitiallyOpen);
+          expect(this.$triggeredButton.get(0).getAttribute('disabled')).toBeNull();
+          expect(this.$projectIssuesCounter.text()).toBe(isIssueInitiallyOpen ? '1,000' : '1,002');
+          expectNewBranchButtonState(false, !isIssueInitiallyOpen);
+
+          done();
+        });
       });
 
-      it(`fails to ${action} the issue if saved:false`, function() {
-        this.$triggeredButton.trigger('click');
-        this.issueStateDeferred.resolve({
+      it(`fails to ${action} the issue if saved:false`, function(done) {
+        mockCloseButtonResponseSuccess(this.$triggeredButton.attr('href'), {
           saved: false
         });
+        this.$triggeredButton.trigger('click');
         this.canCreateBranchDeferred.resolve({
           can_create_branch: isIssueInitiallyOpen
         });
 
-        expectIssueState(isIssueInitiallyOpen);
-        expect(this.$triggeredButton.get(0).getAttribute('disabled')).toBeNull();
-        expectErrorMessage();
-        expect(this.$projectIssuesCounter.text()).toBe('1,001');
-        expectNewBranchButtonState(false, isIssueInitiallyOpen);
+        setTimeout(() => {
+          expectIssueState(isIssueInitiallyOpen);
+          expect(this.$triggeredButton.get(0).getAttribute('disabled')).toBeNull();
+          expectErrorMessage();
+          expect(this.$projectIssuesCounter.text()).toBe('1,001');
+          expectNewBranchButtonState(false, isIssueInitiallyOpen);
+
+          done();
+        });
       });
 
-      it(`fails to ${action} the issue if HTTP error occurs`, function() {
+      it(`fails to ${action} the issue if HTTP error occurs`, function(done) {
+        mockCloseButtonResponseError(this.$triggeredButton.attr('href'));
         this.$triggeredButton.trigger('click');
-        this.issueStateDeferred.reject();
         this.canCreateBranchDeferred.resolve({
           can_create_branch: isIssueInitiallyOpen
         });
 
-        expectIssueState(isIssueInitiallyOpen);
-        expect(this.$triggeredButton.get(0).getAttribute('disabled')).toBeNull();
-        expectErrorMessage();
-        expect(this.$projectIssuesCounter.text()).toBe('1,001');
-        expectNewBranchButtonState(false, isIssueInitiallyOpen);
+        setTimeout(() => {
+          expectIssueState(isIssueInitiallyOpen);
+          expect(this.$triggeredButton.get(0).getAttribute('disabled')).toBeNull();
+          expectErrorMessage();
+          expect(this.$projectIssuesCounter.text()).toBe('1,001');
+          expectNewBranchButtonState(false, isIssueInitiallyOpen);
+
+          done();
+        });
       });
 
       it('disables the new branch button if Ajax call fails', function() {
+        mockCloseButtonResponseError(this.$triggeredButton.attr('href'));
         this.$triggeredButton.trigger('click');
-        this.issueStateDeferred.reject();
         this.canCreateBranchDeferred.reject();
 
         expectNewBranchButtonState(false, false);
       });
 
       it('does not trigger Ajax call if new branch button is missing', function() {
+        mockCloseButtonResponseError(this.$triggeredButton.attr('href'));
         Issue.$btnNewBranch = $();
         this.canCreateBranchDeferred = null;
 
         this.$triggeredButton.trigger('click');
-        this.issueStateDeferred.reject();
       });
     });
   });