Converted right_sidebar.js to use axios

2 files changed, 24 insertions, 29 deletions

diff --git a/app/assets/javascripts/right_sidebar.js b/app/assets/javascripts/right_sidebar.js
index b830fcf7e80..36658516228 100644
--- a/app/assets/javascripts/right_sidebar.js
+++ b/app/assets/javascripts/right_sidebar.js
@@ -2,6 +2,8 @@
 
 import _ from 'underscore';
 import Cookies from 'js-cookie';
+import flash from './flash';
+import axios from './lib/utils/axios_utils';
 
 function Sidebar(currentUser) {
   this.toggleTodo = this.toggleTodo.bind(this);
@@ -62,7 +64,7 @@ Sidebar.prototype.sidebarToggleClicked = function (e, triggered) {
 Sidebar.prototype.toggleTodo = function(e) {
   var $btnText, $this, $todoLoading, ajaxType, url;
   $this = $(e.currentTarget);
-  ajaxType = $this.attr('data-delete-path') ? 'DELETE' : 'POST';
+  ajaxType = $this.attr('data-delete-path') ? 'delete' : 'post';
   if ($this.attr('data-delete-path')) {
     url = "" + ($this.attr('data-delete-path'));
   } else {
@@ -71,25 +73,14 @@ Sidebar.prototype.toggleTodo = function(e) {
 
   $this.tooltip('hide');
 
-  return $.ajax({
-    url: url,
-    type: ajaxType,
-    dataType: 'json',
-    data: {
-      issuable_id: $this.data('issuable-id'),
-      issuable_type: $this.data('issuable-type')
-    },
-    beforeSend: (function(_this) {
-      return function() {
-        $('.js-issuable-todo').disable()
-          .addClass('is-loading');
-      };
-    })(this)
-  }).done((function(_this) {
-    return function(data) {
-      return _this.todoUpdateDone(data);
-    };
-  })(this));
+  $('.js-issuable-todo').disable().addClass('is-loading');
+
+  return axios[ajaxType](url, {
+    issuable_id: $this.data('issuable-id'),
+    issuable_type: $this.data('issuable-type'),
+  }).then(({ data }) => {
+    this.todoUpdateDone(data);
+  });
 };
 
 Sidebar.prototype.todoUpdateDone = function(data) {
diff --git a/spec/javascripts/right_sidebar_spec.js b/spec/javascripts/right_sidebar_spec.js
index 3267e29585b..84659ee91b3 100644
--- a/spec/javascripts/right_sidebar_spec.js
+++ b/spec/javascripts/right_sidebar_spec.js
@@ -1,6 +1,8 @@
 /* eslint-disable space-before-function-paren, no-var, one-var, one-var-declaration-per-line, new-parens, no-return-assign, new-cap, vars-on-top, max-len */
 
+import MockAdapter from 'axios-mock-adapter';
 import '~/commons/bootstrap';
+import axios from '~/lib/utils/axios_utils';
 import Sidebar from '~/right_sidebar';
 
 (function() {
@@ -35,10 +37,12 @@ import Sidebar from '~/right_sidebar';
       var fixtureName = 'issues/open-issue.html.raw';
       preloadFixtures(fixtureName);
       loadJSONFixtures('todos/todos.json');
+      let mock;
 
       beforeEach(function() {
         loadFixtures(fixtureName);
-        this.sidebar = new Sidebar;
+        mock = new MockAdapter(axios);
+        this.sidebar = new Sidebar();
         $aside = $('.right-sidebar');
         $page = $('.layout-page');
         $icon = $aside.find('i');
@@ -63,20 +67,20 @@ import Sidebar from '~/right_sidebar';
         return assertSidebarState('collapsed');
       });
 
-      it('should broadcast todo:toggle event when add todo clicked', function() {
+      it('should broadcast todo:toggle event when add todo clicked', function(done) {
         var todos = getJSONFixture('todos/todos.json');
-        spyOn(jQuery, 'ajax').and.callFake(function() {
-          var d = $.Deferred();
-          var response = todos;
-          d.resolve(response);
-          return d.promise();
-        });
+        spyOn(axios, 'get').and.callThrough();
+        mock.onAny(`${gl.TEST_HOST}/frontend-fixtures/issues-project/todos`).reply(200, todos);
 
         var todoToggleSpy = spyOnEvent(document, 'todo:toggle');
 
         $('.issuable-sidebar-header .js-issuable-todo').click();
 
-        expect(todoToggleSpy.calls.count()).toEqual(1);
+        setTimeout(() => {
+          expect(todoToggleSpy.calls.count()).toEqual(1);
+
+          done();
+        });
       });
 
       it('should not hide collapsed icons', () => {