1 files changed, 90 insertions, 49 deletions
diff --git a/spec/javascripts/collapsed_sidebar_todo_spec.js b/spec/javascripts/collapsed_sidebar_todo_spec.js
index 5026eaafaca..2abf52a1676 100644
--- a/spec/javascripts/collapsed_sidebar_todo_spec.js
+++ b/spec/javascripts/collapsed_sidebar_todo_spec.js
@@ -1,10 +1,14 @@
 /* eslint-disable no-new */
 import _ from 'underscore';
+import MockAdapter from 'axios-mock-adapter';
+import axios from '~/lib/utils/axios_utils';
 import Sidebar from '~/right_sidebar';
+import timeoutPromise from './helpers/set_timeout_promise_helper';
 
 describe('Issuable right sidebar collapsed todo toggle', () => {
   const fixtureName = 'issues/open-issue.html.raw';
   const jsonFixtureName = 'todos/todos.json';
+  let mock;
 
   preloadFixtures(fixtureName);
   preloadFixtures(jsonFixtureName);
@@ -19,19 +23,26 @@ describe('Issuable right sidebar collapsed todo toggle', () => {
     document.querySelector('.js-right-sidebar')
       .classList.toggle('right-sidebar-collapsed');
 
-    spyOn(jQuery, 'ajax').and.callFake((res) => {
-      const d = $.Deferred();
+    mock = new MockAdapter(axios);
+
+    mock.onPost(`${gl.TEST_HOST}/frontend-fixtures/issues-project/todos`).reply(() => {
       const response = _.clone(todoData);
 
-      if (res.type === 'DELETE') {
-        delete response.delete_path;
-      }
+      return [200, response];
+    });
 
-      d.resolve(response);
-      return d.promise();
+    mock.onDelete(/(.*)\/dashboard\/todos\/\d+$/).reply(() => {
+      const response = _.clone(todoData);
+      delete response.delete_path;
+
+      return [200, response];
     });
   });
 
+  afterEach(() => {
+    mock.restore();
+  });
+
   it('shows add todo button', () => {
     expect(
       document.querySelector('.js-issuable-todo.sidebar-collapsed-icon'),
@@ -52,71 +63,101 @@ describe('Issuable right sidebar collapsed todo toggle', () => {
     ).toBe('Add todo');
   });
 
-  it('toggle todo state', () => {
+  it('toggle todo state', (done) => {
     document.querySelector('.js-issuable-todo.sidebar-collapsed-icon').click();
 
-    expect(
-      document.querySelector('.js-issuable-todo.sidebar-collapsed-icon .todo-undone'),
-    ).not.toBeNull();
+    setTimeout(() => {
+      expect(
+        document.querySelector('.js-issuable-todo.sidebar-collapsed-icon .todo-undone'),
+      ).not.toBeNull();
 
-    expect(
-      document.querySelector('.js-issuable-todo.sidebar-collapsed-icon .fa-check-square'),
-    ).not.toBeNull();
-  });
+      expect(
+        document.querySelector('.js-issuable-todo.sidebar-collapsed-icon .fa-check-square'),
+      ).not.toBeNull();
 
-  it('toggle todo state of expanded todo toggle', () => {
-    document.querySelector('.js-issuable-todo.sidebar-collapsed-icon').click();
-
-    expect(
-      document.querySelector('.issuable-sidebar-header .js-issuable-todo').textContent.trim(),
-    ).toBe('Mark done');
+      done();
+    });
   });
 
-  it('toggles todo button tooltip', () => {
+  it('toggle todo state of expanded todo toggle', (done) => {
     document.querySelector('.js-issuable-todo.sidebar-collapsed-icon').click();
 
-    expect(
-      document.querySelector('.js-issuable-todo.sidebar-collapsed-icon').getAttribute('data-original-title'),
-    ).toBe('Mark done');
-  });
-
-  it('marks todo as done', () => {
-    document.querySelector('.js-issuable-todo.sidebar-collapsed-icon').click();
+    setTimeout(() => {
+      expect(
+        document.querySelector('.issuable-sidebar-header .js-issuable-todo').textContent.trim(),
+      ).toBe('Mark done');
 
-    expect(
-      document.querySelector('.js-issuable-todo.sidebar-collapsed-icon .todo-undone'),
-    ).not.toBeNull();
+      done();
+    });
+  });
 
+  it('toggles todo button tooltip', (done) => {
     document.querySelector('.js-issuable-todo.sidebar-collapsed-icon').click();
 
-    expect(
-      document.querySelector('.js-issuable-todo.sidebar-collapsed-icon .todo-undone'),
-    ).toBeNull();
+    setTimeout(() => {
+      expect(
+        document.querySelector('.js-issuable-todo.sidebar-collapsed-icon').getAttribute('data-original-title'),
+      ).toBe('Mark done');
 
-    expect(
-      document.querySelector('.issuable-sidebar-header .js-issuable-todo').textContent.trim(),
-    ).toBe('Add todo');
+      done();
+    });
   });
 
-  it('updates aria-label to mark done', () => {
+  it('marks todo as done', (done) => {
     document.querySelector('.js-issuable-todo.sidebar-collapsed-icon').click();
 
-    expect(
-      document.querySelector('.js-issuable-todo.sidebar-collapsed-icon').getAttribute('aria-label'),
-    ).toBe('Mark done');
+    timeoutPromise()
+      .then(() => {
+        expect(
+          document.querySelector('.js-issuable-todo.sidebar-collapsed-icon .todo-undone'),
+        ).not.toBeNull();
+
+        document.querySelector('.js-issuable-todo.sidebar-collapsed-icon').click();
+      })
+      .then(timeoutPromise)
+      .then(() => {
+        expect(
+          document.querySelector('.js-issuable-todo.sidebar-collapsed-icon .todo-undone'),
+        ).toBeNull();
+
+        expect(
+          document.querySelector('.issuable-sidebar-header .js-issuable-todo').textContent.trim(),
+        ).toBe('Add todo');
+      })
+      .then(done)
+      .catch(done.fail);
   });
 
-  it('updates aria-label to add todo', () => {
+  it('updates aria-label to mark done', (done) => {
     document.querySelector('.js-issuable-todo.sidebar-collapsed-icon').click();
 
-    expect(
-      document.querySelector('.js-issuable-todo.sidebar-collapsed-icon').getAttribute('aria-label'),
-    ).toBe('Mark done');
+    setTimeout(() => {
+      expect(
+        document.querySelector('.js-issuable-todo.sidebar-collapsed-icon').getAttribute('aria-label'),
+      ).toBe('Mark done');
 
+      done();
+    });
+  });
+
+  it('updates aria-label to add todo', (done) => {
     document.querySelector('.js-issuable-todo.sidebar-collapsed-icon').click();
 
-    expect(
-      document.querySelector('.js-issuable-todo.sidebar-collapsed-icon').getAttribute('aria-label'),
-    ).toBe('Add todo');
+    timeoutPromise()
+      .then(() => {
+        expect(
+          document.querySelector('.js-issuable-todo.sidebar-collapsed-icon').getAttribute('aria-label'),
+        ).toBe('Mark done');
+
+        document.querySelector('.js-issuable-todo.sidebar-collapsed-icon').click();
+      })
+      .then(timeoutPromise)
+      .then(() => {
+        expect(
+          document.querySelector('.js-issuable-todo.sidebar-collapsed-icon').getAttribute('aria-label'),
+        ).toBe('Add todo');
+      })
+      .then(done)
+      .catch(done.fail);
   });
 });