fixed failing karma specs caused by TaskList

6 files changed, 113 insertions, 80 deletions

diff --git a/app/assets/javascripts/task_list.js b/app/assets/javascripts/task_list.js
index c35a702ecfc..129a551cbcd 100644
--- a/app/assets/javascripts/task_list.js
+++ b/app/assets/javascripts/task_list.js
@@ -8,11 +8,11 @@ export default class TaskList {
     this.dataType = options.dataType;
     this.fieldName = options.fieldName;
     this.onSuccess = options.onSuccess || (() => {});
-    this.onError = function showFlash(response) {
+    this.onError = function showFlash(e) {
       let errorMessages = '';
 
-      if (response.responseJSON) {
-        errorMessages = response.responseJSON.errors.join(' ');
+      if (e.response.data && typeof e.response.data === 'object') {
+        errorMessages = e.response.data.errors.join(' ');
       }
 
       return new Flash(errorMessages || 'Update failed', 'alert');
@@ -42,6 +42,6 @@ export default class TaskList {
 
     return axios.patch($target.data('update-url') || $('form.js-issuable-update').attr('action'), patchData)
       .then(({ data }) => this.onSuccess(data))
-      .catch(() => this.onError());
+      .catch(err => this.onError(err));
   }
 }
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);
   });
 });
diff --git a/spec/javascripts/issue_spec.js b/spec/javascripts/issue_spec.js
index 5245bf6455c..177962ecf82 100644
--- a/spec/javascripts/issue_spec.js
+++ b/spec/javascripts/issue_spec.js
@@ -70,23 +70,6 @@ describe('Issue', function() {
     expect($btn).toHaveText(isIssueInitiallyOpen ? 'Close issue' : 'Reopen issue');
   }
 
-  describe('task lists', function() {
-    beforeEach(function() {
-      loadFixtures('issues/issue-with-task-list.html.raw');
-      this.issue = new Issue();
-    });
-
-    it('submits an ajax request on tasklist:changed', function() {
-      spyOn(jQuery, 'ajax').and.callFake(function(req) {
-        expect(req.type).toBe('PATCH');
-        expect(req.url).toBe(gl.TEST_HOST + '/frontend-fixtures/issues-project/issues/1.json'); // eslint-disable-line prefer-template
-        expect(req.data.issue.description).not.toBe(null);
-      });
-
-      $('.js-task-list-field').trigger('tasklist:changed');
-    });
-  });
-
   [true, false].forEach((isIssueInitiallyOpen) => {
     describe(`with ${isIssueInitiallyOpen ? 'open' : 'closed'} issue`, function() {
       const action = isIssueInitiallyOpen ? 'close' : 'reopen';
diff --git a/spec/javascripts/merge_request_spec.js b/spec/javascripts/merge_request_spec.js
index bae3219b043..a51b90c3aac 100644
--- a/spec/javascripts/merge_request_spec.js
+++ b/spec/javascripts/merge_request_spec.js
@@ -1,5 +1,6 @@
 /* eslint-disable space-before-function-paren, no-return-assign */
 
+import axios from '~/lib/utils/axios_utils';
 import MergeRequest from '~/merge_request';
 import CloseReopenReportToggle from '~/close_reopen_report_toggle';
 import IssuablesHelper from '~/helpers/issuables_helper';
@@ -21,11 +22,12 @@ import IssuablesHelper from '~/helpers/issuables_helper';
       });
 
       it('submits an ajax request on tasklist:changed', (done) => {
-        spyOn(jQuery, 'ajax').and.callFake((req) => {
-          expect(req.type).toBe('PATCH');
-          expect(req.url).toBe(`${gl.TEST_HOST}/frontend-fixtures/merge-requests-project/merge_requests/1.json`);
-          expect(req.data.merge_request.description).not.toBe(null);
+        spyOn(axios, 'patch').and.callFake((url, data) => {
+          expect(url).toBe(`${gl.TEST_HOST}/frontend-fixtures/merge-requests-project/merge_requests/1.json`);
+          expect(data.merge_request.description).not.toBe(null);
           done();
+
+          return Promise.resolve({ data: {} });
         });
 
         $('.js-task-list-field').trigger('tasklist:changed');
diff --git a/spec/javascripts/notes_spec.js b/spec/javascripts/notes_spec.js
index 2fb385bd79f..c156b9c3650 100644
--- a/spec/javascripts/notes_spec.js
+++ b/spec/javascripts/notes_spec.js
@@ -65,14 +65,16 @@ import timeoutPromise from './helpers/set_timeout_promise_helper';
         expect($('.js-task-list-field.original-task-list').val()).toBe('- [x] Task List Item');
       });
 
-      it('submits an ajax request on tasklist:changed', function() {
-        spyOn(jQuery, 'ajax').and.callFake(function(req) {
-          expect(req.type).toBe('PATCH');
-          expect(req.url).toBe('http://test.host/frontend-fixtures/merge-requests-project/merge_requests/1.json');
-          return expect(req.data.note).not.toBe(null);
+      it('submits an ajax request on tasklist:changed', function(done) {
+        spyOn(axios, 'patch').and.callFake((url, data) => {
+          expect(url).toBe(`${gl.TEST_HOST}/frontend-fixtures/merge-requests-project/merge_requests/1.json`);
+          expect(data.note.note).not.toBe(null);
+          done();
+
+          return Promise.resolve({ data: {} });
         });
 
-        $('.js-task-list-field.js-note-text').trigger('tasklist:changed');
+        $('.js-task-list-container').trigger('tasklist:changed');
       });
     });
 
diff --git a/spec/javascripts/right_sidebar_spec.js b/spec/javascripts/right_sidebar_spec.js
index 84659ee91b3..05a958f754b 100644
--- a/spec/javascripts/right_sidebar_spec.js
+++ b/spec/javascripts/right_sidebar_spec.js
@@ -49,6 +49,11 @@ import Sidebar from '~/right_sidebar';
         $toggle = $aside.find('.js-sidebar-toggle');
         return $labelsIcon = $aside.find('.sidebar-collapsed-icon');
       });
+
+      afterEach(() => {
+        mock.restore();
+      });
+
       it('should expand/collapse the sidebar when arrow is clicked', function() {
         assertSidebarState('expanded');
         $toggle.click();