Merge branch 'master' into sh-add-ldap-qa

9 files changed, 565 insertions, 107 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);
   });
 });
diff --git a/spec/javascripts/feature_highlight/feature_highlight_helper_spec.js b/spec/javascripts/feature_highlight/feature_highlight_helper_spec.js
new file mode 100644
index 00000000000..34ffc7b1016
--- /dev/null
+++ b/spec/javascripts/feature_highlight/feature_highlight_helper_spec.js
@@ -0,0 +1,231 @@
+import MockAdapter from 'axios-mock-adapter';
+import axios from '~/lib/utils/axios_utils';
+import {
+  getSelector,
+  togglePopover,
+  dismiss,
+  mouseleave,
+  mouseenter,
+  inserted,
+} from '~/feature_highlight/feature_highlight_helper';
+import getSetTimeoutPromise from '../helpers/set_timeout_promise_helper';
+
+describe('feature highlight helper', () => {
+  describe('getSelector', () => {
+    it('returns js-feature-highlight selector', () => {
+      const highlightId = 'highlightId';
+      expect(getSelector(highlightId)).toEqual(`.js-feature-highlight[data-highlight=${highlightId}]`);
+    });
+  });
+
+  describe('togglePopover', () => {
+    describe('togglePopover(true)', () => {
+      it('returns true when popover is shown', () => {
+        const context = {
+          hasClass: () => false,
+          popover: () => {},
+          toggleClass: () => {},
+        };
+
+        expect(togglePopover.call(context, true)).toEqual(true);
+      });
+
+      it('returns false when popover is already shown', () => {
+        const context = {
+          hasClass: () => true,
+        };
+
+        expect(togglePopover.call(context, true)).toEqual(false);
+      });
+
+      it('shows popover', (done) => {
+        const context = {
+          hasClass: () => false,
+          popover: () => {},
+          toggleClass: () => {},
+        };
+
+        spyOn(context, 'popover').and.callFake((method) => {
+          expect(method).toEqual('show');
+          done();
+        });
+
+        togglePopover.call(context, true);
+      });
+
+      it('adds disable-animation and js-popover-show class', (done) => {
+        const context = {
+          hasClass: () => false,
+          popover: () => {},
+          toggleClass: () => {},
+        };
+
+        spyOn(context, 'toggleClass').and.callFake((classNames, show) => {
+          expect(classNames).toEqual('disable-animation js-popover-show');
+          expect(show).toEqual(true);
+          done();
+        });
+
+        togglePopover.call(context, true);
+      });
+    });
+
+    describe('togglePopover(false)', () => {
+      it('returns true when popover is hidden', () => {
+        const context = {
+          hasClass: () => true,
+          popover: () => {},
+          toggleClass: () => {},
+        };
+
+        expect(togglePopover.call(context, false)).toEqual(true);
+      });
+
+      it('returns false when popover is already hidden', () => {
+        const context = {
+          hasClass: () => false,
+        };
+
+        expect(togglePopover.call(context, false)).toEqual(false);
+      });
+
+      it('hides popover', (done) => {
+        const context = {
+          hasClass: () => true,
+          popover: () => {},
+          toggleClass: () => {},
+        };
+
+        spyOn(context, 'popover').and.callFake((method) => {
+          expect(method).toEqual('hide');
+          done();
+        });
+
+        togglePopover.call(context, false);
+      });
+
+      it('removes disable-animation and js-popover-show class', (done) => {
+        const context = {
+          hasClass: () => true,
+          popover: () => {},
+          toggleClass: () => {},
+        };
+
+        spyOn(context, 'toggleClass').and.callFake((classNames, show) => {
+          expect(classNames).toEqual('disable-animation js-popover-show');
+          expect(show).toEqual(false);
+          done();
+        });
+
+        togglePopover.call(context, false);
+      });
+    });
+  });
+
+  describe('dismiss', () => {
+    let mock;
+    const context = {
+      hide: () => {},
+      attr: () => '/-/callouts/dismiss',
+    };
+
+    beforeEach(() => {
+      mock = new MockAdapter(axios);
+
+      spyOn(togglePopover, 'call').and.callFake(() => {});
+      spyOn(context, 'hide').and.callFake(() => {});
+      dismiss.call(context);
+    });
+
+    afterEach(() => {
+      mock.restore();
+    });
+
+    it('calls persistent dismissal endpoint', (done) => {
+      const spy = jasmine.createSpy('dismiss-endpoint-hit');
+      mock.onPost('/-/callouts/dismiss').reply(spy);
+
+      getSetTimeoutPromise()
+        .then(() => {
+          expect(spy).toHaveBeenCalled();
+        })
+        .then(done)
+        .catch(done.fail);
+    });
+
+    it('calls hide popover', () => {
+      expect(togglePopover.call).toHaveBeenCalledWith(context, false);
+    });
+
+    it('calls hide', () => {
+      expect(context.hide).toHaveBeenCalled();
+    });
+  });
+
+  describe('mouseleave', () => {
+    it('calls hide popover if .popover:hover is false', () => {
+      const fakeJquery = {
+        length: 0,
+      };
+
+      spyOn($.fn, 'init').and.callFake(selector => (selector === '.popover:hover' ? fakeJquery : $.fn));
+      spyOn(togglePopover, 'call');
+      mouseleave();
+      expect(togglePopover.call).toHaveBeenCalledWith(jasmine.any(Object), false);
+    });
+
+    it('does not call hide popover if .popover:hover is true', () => {
+      const fakeJquery = {
+        length: 1,
+      };
+
+      spyOn($.fn, 'init').and.callFake(selector => (selector === '.popover:hover' ? fakeJquery : $.fn));
+      spyOn(togglePopover, 'call');
+      mouseleave();
+      expect(togglePopover.call).not.toHaveBeenCalledWith(false);
+    });
+  });
+
+  describe('mouseenter', () => {
+    const context = {};
+
+    it('shows popover', () => {
+      spyOn(togglePopover, 'call').and.returnValue(false);
+      mouseenter.call(context);
+      expect(togglePopover.call).toHaveBeenCalledWith(jasmine.any(Object), true);
+    });
+
+    it('registers mouseleave event if popover is showed', (done) => {
+      spyOn(togglePopover, 'call').and.returnValue(true);
+      spyOn($.fn, 'on').and.callFake((eventName) => {
+        expect(eventName).toEqual('mouseleave');
+        done();
+      });
+      mouseenter.call(context);
+    });
+
+    it('does not register mouseleave event if popover is not showed', () => {
+      spyOn(togglePopover, 'call').and.returnValue(false);
+      const spy = spyOn($.fn, 'on').and.callFake(() => {});
+      mouseenter.call(context);
+      expect(spy).not.toHaveBeenCalled();
+    });
+  });
+
+  describe('inserted', () => {
+    it('registers click event callback', (done) => {
+      const context = {
+        getAttribute: () => 'popoverId',
+        dataset: {
+          highlight: 'some-feature',
+        },
+      };
+
+      spyOn($.fn, 'on').and.callFake((event) => {
+        expect(event).toEqual('click');
+        done();
+      });
+      inserted.call(context);
+    });
+  });
+});
diff --git a/spec/javascripts/feature_highlight/feature_highlight_options_spec.js b/spec/javascripts/feature_highlight/feature_highlight_options_spec.js
new file mode 100644
index 00000000000..7f9425d8abe
--- /dev/null
+++ b/spec/javascripts/feature_highlight/feature_highlight_options_spec.js
@@ -0,0 +1,30 @@
+import domContentLoaded from '~/feature_highlight/feature_highlight_options';
+import bp from '~/breakpoints';
+
+describe('feature highlight options', () => {
+  describe('domContentLoaded', () => {
+    it('should not call highlightFeatures when breakpoint is xs', () => {
+      spyOn(bp, 'getBreakpointSize').and.returnValue('xs');
+
+      expect(domContentLoaded()).toBe(false);
+    });
+
+    it('should not call highlightFeatures when breakpoint is sm', () => {
+      spyOn(bp, 'getBreakpointSize').and.returnValue('sm');
+
+      expect(domContentLoaded()).toBe(false);
+    });
+
+    it('should not call highlightFeatures when breakpoint is md', () => {
+      spyOn(bp, 'getBreakpointSize').and.returnValue('md');
+
+      expect(domContentLoaded()).toBe(false);
+    });
+
+    it('should call highlightFeatures when breakpoint is lg', () => {
+      spyOn(bp, 'getBreakpointSize').and.returnValue('lg');
+
+      expect(domContentLoaded()).toBe(true);
+    });
+  });
+});
diff --git a/spec/javascripts/feature_highlight/feature_highlight_spec.js b/spec/javascripts/feature_highlight/feature_highlight_spec.js
new file mode 100644
index 00000000000..6e1b0429ab7
--- /dev/null
+++ b/spec/javascripts/feature_highlight/feature_highlight_spec.js
@@ -0,0 +1,131 @@
+import * as featureHighlightHelper from '~/feature_highlight/feature_highlight_helper';
+import * as featureHighlight from '~/feature_highlight/feature_highlight';
+
+describe('feature highlight', () => {
+  beforeEach(() => {
+    setFixtures(`
+      <div>
+        <div class="js-feature-highlight" data-highlight="test" data-highlight-priority="10" disabled>
+          Trigger
+        </div>
+      </div>
+      <div class="feature-highlight-popover-content">
+        Content
+        <div class="dismiss-feature-highlight">
+          Dismiss
+        </div>
+      </div>
+    `);
+  });
+
+  describe('setupFeatureHighlightPopover', () => {
+    const selector = '.js-feature-highlight[data-highlight=test]';
+    beforeEach(() => {
+      spyOn(window, 'addEventListener');
+      spyOn(window, 'removeEventListener');
+      featureHighlight.setupFeatureHighlightPopover('test', 0);
+    });
+
+    it('setup popover content', () => {
+      const $popoverContent = $('.feature-highlight-popover-content');
+      const outerHTML = $popoverContent.prop('outerHTML');
+
+      expect($(selector).data('content')).toEqual(outerHTML);
+    });
+
+    it('setup mouseenter', () => {
+      const toggleSpy = spyOn(featureHighlightHelper.togglePopover, 'call');
+      $(selector).trigger('mouseenter');
+
+      expect(toggleSpy).toHaveBeenCalledWith(jasmine.any(Object), true);
+    });
+
+    it('setup debounced mouseleave', (done) => {
+      const toggleSpy = spyOn(featureHighlightHelper.togglePopover, 'call');
+      $(selector).trigger('mouseleave');
+
+      // Even though we've set the debounce to 0ms, setTimeout is needed for the debounce
+      setTimeout(() => {
+        expect(toggleSpy).toHaveBeenCalledWith(jasmine.any(Object), false);
+        done();
+      }, 0);
+    });
+
+    it('setup inserted.bs.popover', () => {
+      $(selector).trigger('mouseenter');
+      const popoverId = $(selector).attr('aria-describedby');
+      const spyEvent = spyOnEvent(`#${popoverId} .dismiss-feature-highlight`, 'click');
+
+      $(`#${popoverId} .dismiss-feature-highlight`).click();
+      expect(spyEvent).toHaveBeenTriggered();
+    });
+
+    it('setup show.bs.popover', () => {
+      $(selector).trigger('show.bs.popover');
+      expect(window.addEventListener).toHaveBeenCalledWith('scroll', jasmine.any(Function));
+    });
+
+    it('setup hide.bs.popover', () => {
+      $(selector).trigger('hide.bs.popover');
+      expect(window.removeEventListener).toHaveBeenCalledWith('scroll', jasmine.any(Function));
+    });
+
+    it('removes disabled attribute', () => {
+      expect($('.js-feature-highlight').is(':disabled')).toEqual(false);
+    });
+
+    it('displays popover', () => {
+      expect($(selector).attr('aria-describedby')).toBeFalsy();
+      $(selector).trigger('mouseenter');
+      expect($(selector).attr('aria-describedby')).toBeTruthy();
+    });
+  });
+
+  describe('findHighestPriorityFeature', () => {
+    beforeEach(() => {
+      setFixtures(`
+        <div class="js-feature-highlight" data-highlight="test" data-highlight-priority="10" disabled></div>
+        <div class="js-feature-highlight" data-highlight="test-high-priority" data-highlight-priority="20" disabled></div>
+        <div class="js-feature-highlight" data-highlight="test-low-priority" data-highlight-priority="0" disabled></div>
+      `);
+    });
+
+    it('should pick the highest priority feature highlight', () => {
+      setFixtures(`
+        <div class="js-feature-highlight" data-highlight="test" data-highlight-priority="10" disabled></div>
+        <div class="js-feature-highlight" data-highlight="test-high-priority" data-highlight-priority="20" disabled></div>
+        <div class="js-feature-highlight" data-highlight="test-low-priority" data-highlight-priority="0" disabled></div>
+      `);
+
+      expect($('.js-feature-highlight').length).toBeGreaterThan(1);
+      expect(featureHighlight.findHighestPriorityFeature()).toEqual('test-high-priority');
+    });
+
+    it('should work when no priority is set', () => {
+      setFixtures(`
+        <div class="js-feature-highlight" data-highlight="test" disabled></div>
+      `);
+
+      expect(featureHighlight.findHighestPriorityFeature()).toEqual('test');
+    });
+
+    it('should pick the highest priority feature highlight when some have no priority set', () => {
+      setFixtures(`
+        <div class="js-feature-highlight" data-highlight="test-no-priority1" disabled></div>
+        <div class="js-feature-highlight" data-highlight="test" data-highlight-priority="10" disabled></div>
+        <div class="js-feature-highlight" data-highlight="test-no-priority2" disabled></div>
+        <div class="js-feature-highlight" data-highlight="test-high-priority" data-highlight-priority="20" disabled></div>
+        <div class="js-feature-highlight" data-highlight="test-low-priority" data-highlight-priority="0" disabled></div>
+      `);
+
+      expect($('.js-feature-highlight').length).toBeGreaterThan(1);
+      expect(featureHighlight.findHighestPriorityFeature()).toEqual('test-high-priority');
+    });
+  });
+
+  describe('highlightFeatures', () => {
+    it('calls setupFeatureHighlightPopover', () => {
+      expect(featureHighlight.highlightFeatures()).toEqual('test');
+    });
+  });
+});
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..bdfd16ac995 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 MockAdapter from 'axios-mock-adapter';
+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';
@@ -7,11 +8,24 @@ import IssuablesHelper from '~/helpers/issuables_helper';
 (function() {
   describe('MergeRequest', function() {
     describe('task lists', function() {
+      let mock;
+
       preloadFixtures('merge_requests/merge_request_with_task_list.html.raw');
       beforeEach(function() {
         loadFixtures('merge_requests/merge_request_with_task_list.html.raw');
+
+        spyOn(axios, 'patch').and.callThrough();
+        mock = new MockAdapter(axios);
+
+        mock.onPatch(`${gl.TEST_HOST}/frontend-fixtures/merge-requests-project/merge_requests/1.json`).reply(200, {});
+
         return this.merge = new MergeRequest();
       });
+
+      afterEach(() => {
+        mock.restore();
+      });
+
       it('modifies the Markdown field', function() {
         spyOn(jQuery, 'ajax').and.stub();
         const changeEvent = document.createEvent('HTMLEvents');
@@ -21,14 +35,14 @@ 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);
+        $('.js-task-list-field').trigger('tasklist:changed');
+
+        setTimeout(() => {
+          expect(axios.patch).toHaveBeenCalledWith(`${gl.TEST_HOST}/frontend-fixtures/merge-requests-project/merge_requests/1.json`, {
+            merge_request: { description: '- [ ] Task List Item' },
+          });
           done();
         });
-
-        $('.js-task-list-field').trigger('tasklist:changed');
       });
     });
 
diff --git a/spec/javascripts/notes_spec.js b/spec/javascripts/notes_spec.js
index 2fb385bd79f..274d7591c71 100644
--- a/spec/javascripts/notes_spec.js
+++ b/spec/javascripts/notes_spec.js
@@ -50,13 +50,24 @@ import timeoutPromise from './helpers/set_timeout_promise_helper';
     });
 
     describe('task lists', function() {
+      let mock;
+
       beforeEach(function() {
+        spyOn(axios, 'patch').and.callThrough();
+        mock = new MockAdapter(axios);
+
+        mock.onPatch(`${gl.TEST_HOST}/frontend-fixtures/merge-requests-project/merge_requests/1.json`).reply(200, {});
+
         $('.js-comment-button').on('click', function(e) {
           e.preventDefault();
         });
         this.notes = new Notes('', []);
       });
 
+      afterEach(() => {
+        mock.restore();
+      });
+
       it('modifies the Markdown field', function() {
         const changeEvent = document.createEvent('HTMLEvents');
         changeEvent.initEvent('change', true, true);
@@ -65,14 +76,15 @@ 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) {
+        $('.js-task-list-container').trigger('tasklist:changed');
 
-        $('.js-task-list-field.js-note-text').trigger('tasklist:changed');
+        setTimeout(() => {
+          expect(axios.patch).toHaveBeenCalledWith(`${gl.TEST_HOST}/frontend-fixtures/merge-requests-project/merge_requests/1.json`, {
+            note: { note: '' },
+          });
+          done();
+        });
       });
     });
 
diff --git a/spec/javascripts/prometheus_metrics/prometheus_metrics_spec.js b/spec/javascripts/prometheus_metrics/prometheus_metrics_spec.js
index b24567ffc0c..f6c0f51cf62 100644
--- a/spec/javascripts/prometheus_metrics/prometheus_metrics_spec.js
+++ b/spec/javascripts/prometheus_metrics/prometheus_metrics_spec.js
@@ -1,3 +1,5 @@
+import MockAdapter from 'axios-mock-adapter';
+import axios from '~/lib/utils/axios_utils';
 import PrometheusMetrics from '~/prometheus_metrics/prometheus_metrics';
 import PANEL_STATE from '~/prometheus_metrics/constants';
 import { metrics, missingVarMetrics } from './mock_data';
@@ -102,25 +104,38 @@ describe('PrometheusMetrics', () => {
 
   describe('loadActiveMetrics', () => {
     let prometheusMetrics;
+    let mock;
+
+    function mockSuccess() {
+      mock.onGet(prometheusMetrics.activeMetricsEndpoint).reply(200, {
+        data: metrics,
+        success: true,
+      });
+    }
+
+    function mockError() {
+      mock.onGet(prometheusMetrics.activeMetricsEndpoint).networkError();
+    }
 
     beforeEach(() => {
+      spyOn(axios, 'get').and.callThrough();
+
       prometheusMetrics = new PrometheusMetrics('.js-prometheus-metrics-monitoring');
+
+      mock = new MockAdapter(axios);
+    });
+
+    afterEach(() => {
+      mock.restore();
     });
 
     it('should show loader animation while response is being loaded and hide it when request is complete', (done) => {
-      const deferred = $.Deferred();
-      spyOn($, 'ajax').and.returnValue(deferred.promise());
+      mockSuccess();
 
       prometheusMetrics.loadActiveMetrics();
 
       expect(prometheusMetrics.$monitoredMetricsLoading.hasClass('hidden')).toBeFalsy();
-      expect($.ajax).toHaveBeenCalledWith({
-        url: prometheusMetrics.activeMetricsEndpoint,
-        dataType: 'json',
-        global: false,
-      });
-
-      deferred.resolve({ data: metrics, success: true });
+      expect(axios.get).toHaveBeenCalledWith(prometheusMetrics.activeMetricsEndpoint);
 
       setTimeout(() => {
         expect(prometheusMetrics.$monitoredMetricsLoading.hasClass('hidden')).toBeTruthy();
@@ -129,14 +144,10 @@ describe('PrometheusMetrics', () => {
     });
 
     it('should show empty state if response failed to load', (done) => {
-      const deferred = $.Deferred();
-      spyOn($, 'ajax').and.returnValue(deferred.promise());
-      spyOn(prometheusMetrics, 'populateActiveMetrics');
+      mockError();
 
       prometheusMetrics.loadActiveMetrics();
 
-      deferred.reject();
-
       setTimeout(() => {
         expect(prometheusMetrics.$monitoredMetricsLoading.hasClass('hidden')).toBeTruthy();
         expect(prometheusMetrics.$monitoredMetricsEmpty.hasClass('hidden')).toBeFalsy();
@@ -145,14 +156,11 @@ describe('PrometheusMetrics', () => {
     });
 
     it('should populate metrics list once response is loaded', (done) => {
-      const deferred = $.Deferred();
-      spyOn($, 'ajax').and.returnValue(deferred.promise());
       spyOn(prometheusMetrics, 'populateActiveMetrics');
+      mockSuccess();
 
       prometheusMetrics.loadActiveMetrics();
 
-      deferred.resolve({ data: metrics, success: true });
-
       setTimeout(() => {
         expect(prometheusMetrics.populateActiveMetrics).toHaveBeenCalledWith(metrics);
         done();
diff --git a/spec/javascripts/right_sidebar_spec.js b/spec/javascripts/right_sidebar_spec.js
index 3267e29585b..35bb630bf5d 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,16 +37,23 @@ 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');
         $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();
@@ -63,20 +72,19 @@ 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();
-        });
+        mock.onPost(/(.*)\/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', () => {