Merge branch 'master' into pawel/connect_to_prometheus_through_proxy-30480

* master: (242 commits)
  Validate user namespace before saving so that errors persist on model
  Reset Project's column information in spec/lib/gitlab/background_migration/populate_merge_request_metrics_with_events_data_spec.rb
  Explicitly set cwd in Sidekiq memory killer instead of depending on getcwd
  Downgrade google-protobuf
  Close low level rugged repository in project cache worker
  File upload UI obeys LFS filters
  Resolve "Add a link to documentation on how to get external ip in the Kubernetes cluster details page"
  Upgrade GitLab Workhorse to v3.6.0
  Add sorting options for /users API (admin only)
  improvements from feedback
  [ci-skip] add changelog
  remove file after `Upload#destroy`
  Fix a hardcoded pipeline ID in a spinach step
  Override group sidebar links
  Replace "cluster" with "Kubernetes cluster"
  Reorder async/sync tasks in BuildFinishedWorker to read traces efficiently
  Fix tests for Drop filename enforcement
  Revert using expand_fixture_path in factory
  Revert "Add FixtureHelpers for FactoryGirl"
  Refactor :trace to :trace_live in spec
  ...

30 files changed, 1850 insertions, 828 deletions

diff --git a/spec/javascripts/ci_variable_list/ci_variable_list_spec.js b/spec/javascripts/ci_variable_list/ci_variable_list_spec.js
new file mode 100644
index 00000000000..0170ab458d4
--- /dev/null
+++ b/spec/javascripts/ci_variable_list/ci_variable_list_spec.js
@@ -0,0 +1,163 @@
+import VariableList from '~/ci_variable_list/ci_variable_list';
+import getSetTimeoutPromise from '../helpers/set_timeout_promise_helper';
+
+describe('VariableList', () => {
+  preloadFixtures('pipeline_schedules/edit.html.raw');
+  preloadFixtures('pipeline_schedules/edit_with_variables.html.raw');
+
+  let $wrapper;
+  let variableList;
+
+  describe('with only key/value inputs', () => {
+    describe('with no variables', () => {
+      beforeEach(() => {
+        loadFixtures('pipeline_schedules/edit.html.raw');
+        $wrapper = $('.js-ci-variable-list-section');
+
+        variableList = new VariableList({
+          container: $wrapper,
+          formField: 'schedule',
+        });
+        variableList.init();
+      });
+
+      it('should remove the row when clicking the remove button', () => {
+        $wrapper.find('.js-row-remove-button').trigger('click');
+
+        expect($wrapper.find('.js-row').length).toBe(0);
+      });
+
+      it('should add another row when editing the last rows key input', () => {
+        const $row = $wrapper.find('.js-row');
+        $row.find('.js-ci-variable-input-key')
+          .val('foo')
+          .trigger('input');
+
+        expect($wrapper.find('.js-row').length).toBe(2);
+
+        // Check for the correct default in the new row
+        const $keyInput = $wrapper.find('.js-row:last-child').find('.js-ci-variable-input-key');
+        expect($keyInput.val()).toBe('');
+      });
+
+      it('should add another row when editing the last rows value textarea', () => {
+        const $row = $wrapper.find('.js-row');
+        $row.find('.js-ci-variable-input-value')
+          .val('foo')
+          .trigger('input');
+
+        expect($wrapper.find('.js-row').length).toBe(2);
+
+        // Check for the correct default in the new row
+        const $valueInput = $wrapper.find('.js-row:last-child').find('.js-ci-variable-input-key');
+        expect($valueInput.val()).toBe('');
+      });
+
+      it('should remove empty row after blurring', () => {
+        const $row = $wrapper.find('.js-row');
+        $row.find('.js-ci-variable-input-key')
+          .val('foo')
+          .trigger('input');
+
+        expect($wrapper.find('.js-row').length).toBe(2);
+
+        $row.find('.js-ci-variable-input-key')
+          .val('')
+          .trigger('input')
+          .trigger('blur');
+
+        expect($wrapper.find('.js-row').length).toBe(1);
+      });
+    });
+
+    describe('with persisted variables', () => {
+      beforeEach(() => {
+        loadFixtures('pipeline_schedules/edit_with_variables.html.raw');
+        $wrapper = $('.js-ci-variable-list-section');
+
+        variableList = new VariableList({
+          container: $wrapper,
+          formField: 'schedule',
+        });
+        variableList.init();
+      });
+
+      it('should have "Reveal values" button initially when there are already variables', () => {
+        expect($wrapper.find('.js-secret-value-reveal-button').text()).toBe('Reveal values');
+      });
+
+      it('should reveal hidden values', () => {
+        const $row = $wrapper.find('.js-row:first-child');
+        const $inputValue = $row.find('.js-ci-variable-input-value');
+        const $placeholder = $row.find('.js-secret-value-placeholder');
+
+        expect($placeholder.hasClass('hide')).toBe(false);
+        expect($inputValue.hasClass('hide')).toBe(true);
+
+        // Reveal values
+        $wrapper.find('.js-secret-value-reveal-button').click();
+
+        expect($placeholder.hasClass('hide')).toBe(true);
+        expect($inputValue.hasClass('hide')).toBe(false);
+      });
+    });
+  });
+
+  describe('with all inputs(key, value, protected)', () => {
+    beforeEach(() => {
+      // This markup will be replaced with a fixture when we can render the
+      // CI/CD settings page with the new dynamic variable list in https://gitlab.com/gitlab-org/gitlab-ee/merge_requests/4110
+      $wrapper = $(`<form class="js-variable-list">
+        <ul>
+          <li class="js-row">
+            <div class="ci-variable-body-item">
+              <input class="js-ci-variable-input-key" name="variables[variables_attributes][][key]">
+            </div>
+
+            <div class="ci-variable-body-item">
+              <textarea class="js-ci-variable-input-value" name="variables[variables_attributes][][value]"></textarea>
+            </div>
+
+            <div class="ci-variable-body-item ci-variable-protected-item">
+              <button type="button" class="js-project-feature-toggle project-feature-toggle">
+                <input
+                  type="hidden"
+                  class="js-ci-variable-input-protected js-project-feature-toggle-input"
+                  name="variables[variables_attributes][][protected]"
+                  value="true"
+                />
+              </button>
+            </div>
+
+            <button type="button" class="js-row-remove-button"></button>
+          </li>
+        </ul>
+        <button type="button" class="js-secret-value-reveal-button">
+          Reveal values
+        </button>
+      </form>`);
+
+      variableList = new VariableList({
+        container: $wrapper,
+        formField: 'variables',
+      });
+      variableList.init();
+    });
+
+    it('should add another row when editing the last rows protected checkbox', (done) => {
+      const $row = $wrapper.find('.js-row:last-child');
+      $row.find('.ci-variable-protected-item .js-project-feature-toggle').click();
+
+      getSetTimeoutPromise()
+        .then(() => {
+          expect($wrapper.find('.js-row').length).toBe(2);
+
+          // Check for the correct default in the new row
+          const $protectedInput = $wrapper.find('.js-row:last-child').find('.js-ci-variable-input-protected');
+          expect($protectedInput.val()).toBe('true');
+        })
+        .then(done)
+        .catch(done.fail);
+    });
+  });
+});
diff --git a/spec/javascripts/ci_variable_list/native_form_variable_list_spec.js b/spec/javascripts/ci_variable_list/native_form_variable_list_spec.js
new file mode 100644
index 00000000000..eb508a7f059
--- /dev/null
+++ b/spec/javascripts/ci_variable_list/native_form_variable_list_spec.js
@@ -0,0 +1,30 @@
+import setupNativeFormVariableList from '~/ci_variable_list/native_form_variable_list';
+
+describe('NativeFormVariableList', () => {
+  preloadFixtures('pipeline_schedules/edit.html.raw');
+
+  let $wrapper;
+
+  beforeEach(() => {
+    loadFixtures('pipeline_schedules/edit.html.raw');
+    $wrapper = $('.js-ci-variable-list-section');
+
+    setupNativeFormVariableList({
+      container: $wrapper,
+      formField: 'schedule',
+    });
+  });
+
+  describe('onFormSubmit', () => {
+    it('should clear out the `name` attribute on the inputs for the last empty row on form submission (avoid BE validation)', () => {
+      const $row = $wrapper.find('.js-row');
+      expect($row.find('.js-ci-variable-input-key').attr('name')).toBe('schedule[variables_attributes][][key]');
+      expect($row.find('.js-ci-variable-input-value').attr('name')).toBe('schedule[variables_attributes][][value]');
+
+      $wrapper.closest('form').trigger('trigger-submit');
+
+      expect($row.find('.js-ci-variable-input-key').attr('name')).toBe('');
+      expect($row.find('.js-ci-variable-input-value').attr('name')).toBe('');
+    });
+  });
+});
diff --git a/spec/javascripts/clusters/clusters_bundle_spec.js b/spec/javascripts/clusters/clusters_bundle_spec.js
index 7b38f6b7855..a9e244e523d 100644
--- a/spec/javascripts/clusters/clusters_bundle_spec.js
+++ b/spec/javascripts/clusters/clusters_bundle_spec.js
@@ -71,7 +71,8 @@ describe('Clusters', () => {
         helm: { status: APPLICATION_INSTALLABLE, title: 'Helm Tiller' },
       });
 
-      expect(document.querySelector('.js-cluster-application-notice .flash-text')).toBeNull();
+      const flashMessage = document.querySelector('.js-cluster-application-notice .flash-text');
+      expect(flashMessage).toBeNull();
     });
 
     it('shows an alert when something gets newly installed', () => {
@@ -83,8 +84,9 @@ describe('Clusters', () => {
         helm: { status: APPLICATION_INSTALLED, title: 'Helm Tiller' },
       });
 
-      expect(document.querySelector('.js-cluster-application-notice .flash-text')).toBeDefined();
-      expect(document.querySelector('.js-cluster-application-notice .flash-text').textContent.trim()).toEqual('Helm Tiller was successfully installed on your cluster');
+      const flashMessage = document.querySelector('.js-cluster-application-notice .flash-text');
+      expect(flashMessage).not.toBeNull();
+      expect(flashMessage.textContent.trim()).toEqual('Helm Tiller was successfully installed on your Kubernetes cluster');
     });
 
     it('shows an alert when multiple things gets newly installed', () => {
@@ -98,8 +100,9 @@ describe('Clusters', () => {
         ingress: { status: APPLICATION_INSTALLED, title: 'Ingress' },
       });
 
-      expect(document.querySelector('.js-cluster-application-notice .flash-text')).toBeDefined();
-      expect(document.querySelector('.js-cluster-application-notice .flash-text').textContent.trim()).toEqual('Helm Tiller, Ingress was successfully installed on your cluster');
+      const flashMessage = document.querySelector('.js-cluster-application-notice .flash-text');
+      expect(flashMessage).not.toBeNull();
+      expect(flashMessage.textContent.trim()).toEqual('Helm Tiller, Ingress was successfully installed on your Kubernetes cluster');
     });
   });
 
diff --git a/spec/javascripts/clusters/stores/clusters_store_spec.js b/spec/javascripts/clusters/stores/clusters_store_spec.js
index ec2889355e6..726a4ed30de 100644
--- a/spec/javascripts/clusters/stores/clusters_store_spec.js
+++ b/spec/javascripts/clusters/stores/clusters_store_spec.js
@@ -58,6 +58,7 @@ describe('Clusters Store', () => {
 
       expect(store.state).toEqual({
         helpPath: null,
+        ingressHelpPath: null,
         status: mockResponseData.status,
         statusReason: mockResponseData.status_reason,
         applications: {
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/commit/commit_pipeline_status_component_spec.js b/spec/javascripts/commit/commit_pipeline_status_component_spec.js
new file mode 100644
index 00000000000..90f290e845e
--- /dev/null
+++ b/spec/javascripts/commit/commit_pipeline_status_component_spec.js
@@ -0,0 +1,104 @@
+import Vue from 'vue';
+import MockAdapter from 'axios-mock-adapter';
+import axios from '~/lib/utils/axios_utils';
+import commitPipelineStatus from '~/projects/tree/components/commit_pipeline_status_component.vue';
+import mountComponent from '../helpers/vue_mount_component_helper';
+
+describe('Commit pipeline status component', () => {
+  let vm;
+  let Component;
+  let mock;
+  const mockCiStatus = {
+    details_path: '/root/hello-world/pipelines/1',
+    favicon: 'canceled.ico',
+    group: 'canceled',
+    has_details: true,
+    icon: 'status_canceled',
+    label: 'canceled',
+    text: 'canceled',
+  };
+
+  beforeEach(() => {
+    Component = Vue.extend(commitPipelineStatus);
+  });
+
+  describe('While polling pipeline data succesfully', () => {
+    beforeEach(() => {
+      mock = new MockAdapter(axios);
+      mock.onGet('/dummy/endpoint').reply(() => {
+        const res = Promise.resolve([200, {
+          pipelines: [
+            {
+              details: {
+                status: mockCiStatus,
+              },
+            },
+          ],
+        }]);
+        return res;
+      });
+      vm = mountComponent(Component, {
+        endpoint: '/dummy/endpoint',
+      });
+    });
+
+    afterEach(() => {
+      vm.poll.stop();
+      vm.$destroy();
+      mock.restore();
+    });
+
+    it('shows the loading icon when polling is starting', (done) => {
+      expect(vm.$el.querySelector('.loading-container')).not.toBe(null);
+      setTimeout(() => {
+        expect(vm.$el.querySelector('.loading-container')).toBe(null);
+        done();
+      });
+    });
+
+    it('contains a ciStatus when the polling is succesful ', (done) => {
+      setTimeout(() => {
+        expect(vm.ciStatus).toEqual(mockCiStatus);
+        done();
+      });
+    });
+
+    it('contains a ci-status icon when polling is succesful', (done) => {
+      setTimeout(() => {
+        expect(vm.$el.querySelector('.ci-status-icon')).not.toBe(null);
+        expect(vm.$el.querySelector('.ci-status-icon').classList).toContain(`ci-status-icon-${mockCiStatus.group}`);
+        done();
+      });
+    });
+  });
+
+  describe('When polling data was not succesful', () => {
+    beforeEach(() => {
+      mock = new MockAdapter(axios);
+      mock.onGet('/dummy/endpoint').reply(() => {
+        const res = Promise.reject([502, { }]);
+        return res;
+      });
+      vm = new Component({
+        props: {
+          endpoint: '/dummy/endpoint',
+        },
+      });
+    });
+
+    afterEach(() => {
+      vm.poll.stop();
+      vm.$destroy();
+      mock.restore();
+    });
+
+    it('calls an errorCallback', (done) => {
+      spyOn(vm, 'errorCallback').and.callThrough();
+      vm.$mount();
+      setTimeout(() => {
+        expect(vm.errorCallback.calls.count()).toEqual(1);
+        done();
+      });
+    });
+  });
+});
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/fixtures/jobs.rb b/spec/javascripts/fixtures/jobs.rb
index 87d131dfe28..6d5c6d5334f 100644
--- a/spec/javascripts/fixtures/jobs.rb
+++ b/spec/javascripts/fixtures/jobs.rb
@@ -7,7 +7,7 @@ describe Projects::JobsController, '(JavaScript fixtures)', type: :controller do
   let(:namespace) { create(:namespace, name: 'frontend-fixtures' )}
   let(:project) { create(:project_empty_repo, namespace: namespace, path: 'builds-project') }
   let(:pipeline) { create(:ci_empty_pipeline, project: project) }
-  let!(:build_with_artifacts) { create(:ci_build, :success, :artifacts, :trace, pipeline: pipeline, stage: 'test', artifacts_expire_at: Time.now + 18.months) }
+  let!(:build_with_artifacts) { create(:ci_build, :success, :artifacts, :trace_artifact, pipeline: pipeline, stage: 'test', artifacts_expire_at: Time.now + 18.months) }
   let!(:failed_build) { create(:ci_build, :failed, pipeline: pipeline, stage: 'build') }
   let!(:pending_build) { create(:ci_build, :pending, pipeline: pipeline, stage: 'deploy') }
 
diff --git a/spec/javascripts/fixtures/pipeline_schedules.rb b/spec/javascripts/fixtures/pipeline_schedules.rb
new file mode 100644
index 00000000000..56f27ea7df1
--- /dev/null
+++ b/spec/javascripts/fixtures/pipeline_schedules.rb
@@ -0,0 +1,43 @@
+require 'spec_helper'
+
+describe Projects::PipelineSchedulesController, '(JavaScript fixtures)', type: :controller do
+  include JavaScriptFixturesHelpers
+
+  let(:admin) { create(:admin) }
+  let(:namespace) { create(:namespace, name: 'frontend-fixtures' )}
+  let(:project) { create(:project, :public, :repository) }
+  let!(:pipeline_schedule) { create(:ci_pipeline_schedule, project: project, owner: admin) }
+  let!(:pipeline_schedule_populated) { create(:ci_pipeline_schedule, project: project, owner: admin) }
+  let!(:pipeline_schedule_variable1) { create(:ci_pipeline_schedule_variable, key: 'foo', value: 'foovalue', pipeline_schedule: pipeline_schedule_populated) }
+  let!(:pipeline_schedule_variable2) { create(:ci_pipeline_schedule_variable, key: 'bar', value: 'barvalue', pipeline_schedule: pipeline_schedule_populated) }
+
+  render_views
+
+  before(:all) do
+    clean_frontend_fixtures('pipeline_schedules/')
+  end
+
+  before do
+    sign_in(admin)
+  end
+
+  it 'pipeline_schedules/edit.html.raw' do |example|
+    get :edit,
+      namespace_id: project.namespace.to_param,
+      project_id: project,
+      id: pipeline_schedule.id
+
+    expect(response).to be_success
+    store_frontend_fixture(response, example.description)
+  end
+
+  it 'pipeline_schedules/edit_with_variables.html.raw' do |example|
+    get :edit,
+      namespace_id: project.namespace.to_param,
+      project_id: project,
+      id: pipeline_schedule_populated.id
+
+    expect(response).to be_success
+    store_frontend_fixture(response, example.description)
+  end
+end
diff --git a/spec/javascripts/gfm_auto_complete_spec.js b/spec/javascripts/gfm_auto_complete_spec.js
index 6f357306ec7..50a587ef351 100644
--- a/spec/javascripts/gfm_auto_complete_spec.js
+++ b/spec/javascripts/gfm_auto_complete_spec.js
@@ -130,16 +130,25 @@ describe('GfmAutoComplete', function () {
     });
 
     describe('should not match special sequences', () => {
-      const ShouldNotBeFollowedBy = flags.concat(['\x00', '\x10', '\x3f', '\n', ' ']);
+      const shouldNotBeFollowedBy = flags.concat(['\x00', '\x10', '\x3f', '\n', ' ']);
+      const shouldNotBePrependedBy = ['`'];
 
       flagsUseDefaultMatcher.forEach((atSign) => {
-        ShouldNotBeFollowedBy.forEach((followedSymbol) => {
+        shouldNotBeFollowedBy.forEach((followedSymbol) => {
           const seq = atSign + followedSymbol;
 
           it(`should not match "${seq}"`, () => {
             expect(defaultMatcher(atwhoInstance, atSign, seq)).toBe(null);
           });
         });
+
+        shouldNotBePrependedBy.forEach((prependedSymbol) => {
+          const seq = prependedSymbol + atSign;
+
+          it(`should not match "${seq}"`, () => {
+            expect(defaultMatcher(atwhoInstance, atSign, seq)).toBe(null);
+          });
+        });
       });
     });
   });
diff --git a/spec/javascripts/issue_spec.js b/spec/javascripts/issue_spec.js
index 2cd2e63b15d..177962ecf82 100644
--- a/spec/javascripts/issue_spec.js
+++ b/spec/javascripts/issue_spec.js
@@ -1,4 +1,6 @@
 /* eslint-disable space-before-function-paren, one-var, one-var-declaration-per-line, no-use-before-define, comma-dangle, max-len */
+import MockAdapter from 'axios-mock-adapter';
+import axios from '~/lib/utils/axios_utils';
 import Issue from '~/issue';
 import '~/lib/utils/text_utility';
 
@@ -68,40 +70,27 @@ 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';
+      let mock;
 
-      function ajaxSpy(req) {
-        if (req.url === this.$triggeredButton.attr('href')) {
-          expect(req.type).toBe('PUT');
-          expectNewBranchButtonState(true, false);
-          return this.issueStateDeferred;
-        } else if (req.url === Issue.createMrDropdownWrap.dataset.canCreatePath) {
-          expect(req.type).toBe('GET');
+      function mockCloseButtonResponseSuccess(url, response) {
+        mock.onPut(url).reply(() => {
           expectNewBranchButtonState(true, false);
-          return this.canCreateBranchDeferred;
-        }
 
-        expect(req.url).toBe('unexpected');
-        return null;
+          return [200, response];
+        });
+      }
+
+      function mockCloseButtonResponseError(url) {
+        mock.onPut(url).networkError();
+      }
+
+      function mockCanCreateBranch(canCreateBranch) {
+        mock.onGet(/(.*)\/can_create_branch$/).reply(200, {
+          can_create_branch: canCreateBranch,
+        });
       }
 
       beforeEach(function() {
@@ -111,6 +100,11 @@ describe('Issue', function() {
           loadFixtures('issues/closed-issue.html.raw');
         }
 
+        mock = new MockAdapter(axios);
+
+        mock.onGet(/(.*)\/related_branches$/).reply(200, {});
+        mock.onGet(/(.*)\/referenced_merge_requests$/).reply(200, {});
+
         findElements(isIssueInitiallyOpen);
         this.issue = new Issue();
         expectIssueState(isIssueInitiallyOpen);
@@ -120,71 +114,89 @@ describe('Issue', function() {
         this.$projectIssuesCounter = $('.issue_counter').first();
         this.$projectIssuesCounter.text('1,001');
 
-        this.issueStateDeferred = new jQuery.Deferred();
-        this.canCreateBranchDeferred = new jQuery.Deferred();
+        spyOn(axios, 'get').and.callThrough();
+      });
 
-        spyOn(jQuery, 'ajax').and.callFake(ajaxSpy.bind(this));
+      afterEach(() => {
+        mock.restore();
+        $('div.flash-alert').remove();
       });
 
-      it(`${action}s the issue`, function() {
-        this.$triggeredButton.trigger('click');
-        this.issueStateDeferred.resolve({
+      it(`${action}s the issue`, function(done) {
+        mockCloseButtonResponseSuccess(this.$triggeredButton.attr('href'), {
           id: 34
         });
-        this.canCreateBranchDeferred.resolve({
-          can_create_branch: !isIssueInitiallyOpen
-        });
+        mockCanCreateBranch(!isIssueInitiallyOpen);
 
-        expectIssueState(!isIssueInitiallyOpen);
-        expect(this.$triggeredButton.get(0).getAttribute('disabled')).toBeNull();
-        expect(this.$projectIssuesCounter.text()).toBe(isIssueInitiallyOpen ? '1,000' : '1,002');
-        expectNewBranchButtonState(false, !isIssueInitiallyOpen);
+        this.$triggeredButton.trigger('click');
+
+        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.canCreateBranchDeferred.resolve({
-          can_create_branch: isIssueInitiallyOpen
-        });
+        mockCanCreateBranch(isIssueInitiallyOpen);
 
-        expectIssueState(isIssueInitiallyOpen);
-        expect(this.$triggeredButton.get(0).getAttribute('disabled')).toBeNull();
-        expectErrorMessage();
-        expect(this.$projectIssuesCounter.text()).toBe('1,001');
-        expectNewBranchButtonState(false, isIssueInitiallyOpen);
+        this.$triggeredButton.trigger('click');
+
+        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'));
+        mockCanCreateBranch(isIssueInitiallyOpen);
+
         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'));
+        mock.onGet(/(.*)\/can_create_branch$/).networkError();
+
         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() {
+      it('does not trigger Ajax call if new branch button is missing', function(done) {
+        mockCloseButtonResponseError(this.$triggeredButton.attr('href'));
         Issue.$btnNewBranch = $();
         this.canCreateBranchDeferred = null;
 
         this.$triggeredButton.trigger('click');
-        this.issueStateDeferred.reject();
+
+        setTimeout(() => {
+          expect(axios.get).not.toHaveBeenCalled();
+
+          done();
+        });
       });
     });
   });
diff --git a/spec/javascripts/job_spec.js b/spec/javascripts/job_spec.js
index 0452934ea9e..03b58e9c1d0 100644
--- a/spec/javascripts/job_spec.js
+++ b/spec/javascripts/job_spec.js
@@ -1,3 +1,5 @@
+import MockAdapter from 'axios-mock-adapter';
+import axios from '~/lib/utils/axios_utils';
 import { numberToHumanSize } from '~/lib/utils/number_utils';
 import * as urlUtils from '~/lib/utils/url_utility';
 import '~/lib/utils/datetime_utility';
@@ -6,11 +8,29 @@ import '~/breakpoints';
 
 describe('Job', () => {
   const JOB_URL = `${gl.TEST_HOST}/frontend-fixtures/builds-project/-/jobs/1`;
+  let mock;
+  let response;
+
+  function waitForPromise() {
+    return new Promise(resolve => requestAnimationFrame(resolve));
+  }
 
   preloadFixtures('builds/build-with-artifacts.html.raw');
 
   beforeEach(() => {
     loadFixtures('builds/build-with-artifacts.html.raw');
+
+    spyOn(urlUtils, 'visitUrl');
+
+    mock = new MockAdapter(axios);
+
+    mock.onGet(new RegExp(`${JOB_URL}/trace.json?(.*)`)).reply(() => [200, response]);
+  });
+
+  afterEach(() => {
+    mock.restore();
+
+    response = {};
   });
 
   describe('class constructor', () => {
@@ -55,161 +75,159 @@ describe('Job', () => {
     });
 
     describe('running build', () => {
-      it('updates the build trace on an interval', function () {
-        const deferred1 = $.Deferred();
-        const deferred2 = $.Deferred();
-        spyOn($, 'ajax').and.returnValues(deferred1.promise(), deferred2.promise());
-        spyOn(urlUtils, 'visitUrl');
-
-        deferred1.resolve({
+      it('updates the build trace on an interval', function (done) {
+        response = {
           html: '<span>Update<span>',
           status: 'running',
           state: 'newstate',
           append: true,
           complete: false,
-        });
-
-        deferred2.resolve({
-          html: '<span>More</span>',
-          status: 'running',
-          state: 'finalstate',
-          append: true,
-          complete: true,
-        });
+        };
 
         this.job = new Job();
 
-        expect($('#build-trace .js-build-output').text()).toMatch(/Update/);
-        expect(this.job.state).toBe('newstate');
-
-        jasmine.clock().tick(4001);
-
-        expect($('#build-trace .js-build-output').text()).toMatch(/UpdateMore/);
-        expect(this.job.state).toBe('finalstate');
+        waitForPromise()
+          .then(() => {
+            expect($('#build-trace .js-build-output').text()).toMatch(/Update/);
+            expect(this.job.state).toBe('newstate');
+
+            response = {
+              html: '<span>More</span>',
+              status: 'running',
+              state: 'finalstate',
+              append: true,
+              complete: true,
+            };
+          })
+          .then(() => jasmine.clock().tick(4001))
+          .then(waitForPromise)
+          .then(() => {
+            expect($('#build-trace .js-build-output').text()).toMatch(/UpdateMore/);
+            expect(this.job.state).toBe('finalstate');
+          })
+          .then(done)
+          .catch(done.fail);
       });
 
-      it('replaces the entire build trace', () => {
-        const deferred1 = $.Deferred();
-        const deferred2 = $.Deferred();
-
-        spyOn($, 'ajax').and.returnValues(deferred1.promise(), deferred2.promise());
-
-        spyOn(urlUtils, 'visitUrl');
-
-        deferred1.resolve({
+      it('replaces the entire build trace', (done) => {
+        response = {
           html: '<span>Update<span>',
           status: 'running',
           append: false,
           complete: false,
-        });
-
-        deferred2.resolve({
-          html: '<span>Different</span>',
-          status: 'running',
-          append: false,
-        });
+        };
 
         this.job = new Job();
 
-        expect($('#build-trace .js-build-output').text()).toMatch(/Update/);
-
-        jasmine.clock().tick(4001);
-
-        expect($('#build-trace .js-build-output').text()).not.toMatch(/Update/);
-        expect($('#build-trace .js-build-output').text()).toMatch(/Different/);
+        waitForPromise()
+          .then(() => {
+            expect($('#build-trace .js-build-output').text()).toMatch(/Update/);
+
+            response = {
+              html: '<span>Different</span>',
+              status: 'running',
+              append: false,
+            };
+          })
+          .then(() => jasmine.clock().tick(4001))
+          .then(waitForPromise)
+          .then(() => {
+            expect($('#build-trace .js-build-output').text()).not.toMatch(/Update/);
+            expect($('#build-trace .js-build-output').text()).toMatch(/Different/);
+          })
+          .then(done)
+          .catch(done.fail);
       });
     });
 
     describe('truncated information', () => {
       describe('when size is less than total', () => {
-        it('shows information about truncated log', () => {
-          spyOn(urlUtils, 'visitUrl');
-          const deferred = $.Deferred();
-          spyOn($, 'ajax').and.returnValue(deferred.promise());
-
-          deferred.resolve({
+        it('shows information about truncated log', (done) => {
+          response = {
             html: '<span>Update</span>',
             status: 'success',
             append: false,
             size: 50,
             total: 100,
-          });
+          };
 
           this.job = new Job();
 
-          expect(document.querySelector('.js-truncated-info').classList).not.toContain('hidden');
+          waitForPromise()
+            .then(() => {
+              expect(document.querySelector('.js-truncated-info').classList).not.toContain('hidden');
+            })
+            .then(done)
+            .catch(done.fail);
         });
 
-        it('shows the size in KiB', () => {
+        it('shows the size in KiB', (done) => {
           const size = 50;
-          spyOn(urlUtils, 'visitUrl');
-          const deferred = $.Deferred();
 
-          spyOn($, 'ajax').and.returnValue(deferred.promise());
-          deferred.resolve({
+          response = {
             html: '<span>Update</span>',
             status: 'success',
             append: false,
             size,
             total: 100,
-          });
+          };
 
           this.job = new Job();
 
-          expect(
-            document.querySelector('.js-truncated-info-size').textContent.trim(),
-          ).toEqual(`${numberToHumanSize(size)}`);
+          waitForPromise()
+            .then(() => {
+              expect(
+                document.querySelector('.js-truncated-info-size').textContent.trim(),
+              ).toEqual(`${numberToHumanSize(size)}`);
+            })
+            .then(done)
+            .catch(done.fail);
         });
 
-        it('shows incremented size', () => {
-          const deferred1 = $.Deferred();
-          const deferred2 = $.Deferred();
-
-          spyOn($, 'ajax').and.returnValues(deferred1.promise(), deferred2.promise());
-
-          spyOn(urlUtils, 'visitUrl');
-
-          deferred1.resolve({
+        it('shows incremented size', (done) => {
+          response = {
             html: '<span>Update</span>',
             status: 'success',
             append: false,
             size: 50,
             total: 100,
-          });
+          };
 
           this.job = new Job();
 
-          expect(
-            document.querySelector('.js-truncated-info-size').textContent.trim(),
-          ).toEqual(`${numberToHumanSize(50)}`);
-
-          jasmine.clock().tick(4001);
-
-          deferred2.resolve({
-            html: '<span>Update</span>',
-            status: 'success',
-            append: true,
-            size: 10,
-            total: 100,
-          });
-
-          expect(
-            document.querySelector('.js-truncated-info-size').textContent.trim(),
-          ).toEqual(`${numberToHumanSize(60)}`);
+          waitForPromise()
+            .then(() => {
+              expect(
+                document.querySelector('.js-truncated-info-size').textContent.trim(),
+              ).toEqual(`${numberToHumanSize(50)}`);
+
+              response = {
+                html: '<span>Update</span>',
+                status: 'success',
+                append: true,
+                size: 10,
+                total: 100,
+              };
+            })
+            .then(() => jasmine.clock().tick(4001))
+            .then(waitForPromise)
+            .then(() => {
+              expect(
+                document.querySelector('.js-truncated-info-size').textContent.trim(),
+              ).toEqual(`${numberToHumanSize(60)}`);
+            })
+            .then(done)
+            .catch(done.fail);
         });
 
         it('renders the raw link', () => {
-          const deferred = $.Deferred();
-          spyOn(urlUtils, 'visitUrl');
-
-          spyOn($, 'ajax').and.returnValue(deferred.promise());
-          deferred.resolve({
+          response = {
             html: '<span>Update</span>',
             status: 'success',
             append: false,
             size: 50,
             total: 100,
-          });
+          };
 
           this.job = new Job();
 
@@ -220,50 +238,50 @@ describe('Job', () => {
       });
 
       describe('when size is equal than total', () => {
-        it('does not show the trunctated information', () => {
-          const deferred = $.Deferred();
-          spyOn(urlUtils, 'visitUrl');
-
-          spyOn($, 'ajax').and.returnValue(deferred.promise());
-          deferred.resolve({
+        it('does not show the trunctated information', (done) => {
+          response = {
             html: '<span>Update</span>',
             status: 'success',
             append: false,
             size: 100,
             total: 100,
-          });
+          };
 
           this.job = new Job();
 
-          expect(document.querySelector('.js-truncated-info').classList).toContain('hidden');
+          waitForPromise()
+            .then(() => {
+              expect(document.querySelector('.js-truncated-info').classList).toContain('hidden');
+            })
+            .then(done)
+            .catch(done.fail);
         });
       });
     });
 
     describe('output trace', () => {
-      beforeEach(() => {
-        const deferred = $.Deferred();
-        spyOn(urlUtils, 'visitUrl');
-
-        spyOn($, 'ajax').and.returnValue(deferred.promise());
-        deferred.resolve({
+      beforeEach((done) => {
+        response = {
           html: '<span>Update</span>',
           status: 'success',
           append: false,
           size: 50,
           total: 100,
-        });
+        };
 
         this.job = new Job();
+
+        waitForPromise()
+          .then(done)
+          .catch(done.fail);
       });
 
       it('should render trace controls', () => {
         const controllers = document.querySelector('.controllers');
 
-        expect(controllers.querySelector('.js-raw-link-controller')).toBeDefined();
-        expect(controllers.querySelector('.js-erase-link')).toBeDefined();
-        expect(controllers.querySelector('.js-scroll-up')).toBeDefined();
-        expect(controllers.querySelector('.js-scroll-down')).toBeDefined();
+        expect(controllers.querySelector('.js-raw-link-controller')).not.toBeNull();
+        expect(controllers.querySelector('.js-scroll-up')).not.toBeNull();
+        expect(controllers.querySelector('.js-scroll-down')).not.toBeNull();
       });
 
       it('should render received output', () => {
@@ -276,13 +294,13 @@ describe('Job', () => {
 
   describe('getBuildTrace', () => {
     it('should request build trace with state parameter', (done) => {
-      spyOn(jQuery, 'ajax').and.callThrough();
+      spyOn(axios, 'get').and.callThrough();
       // eslint-disable-next-line no-new
       new Job();
 
       setTimeout(() => {
-        expect(jQuery.ajax).toHaveBeenCalledWith(
-          { url: `${JOB_URL}/trace.json`, data: { state: '' } },
+        expect(axios.get).toHaveBeenCalledWith(
+          `${JOB_URL}/trace.json`, { params: { state: '' } },
         );
         done();
       }, 0);
diff --git a/spec/javascripts/labels_issue_sidebar_spec.js b/spec/javascripts/labels_issue_sidebar_spec.js
index a197b35f6fb..7d992f62f64 100644
--- a/spec/javascripts/labels_issue_sidebar_spec.js
+++ b/spec/javascripts/labels_issue_sidebar_spec.js
@@ -1,4 +1,6 @@
 /* eslint-disable no-new */
+import MockAdapter from 'axios-mock-adapter';
+import axios from '~/lib/utils/axios_utils';
 import IssuableContext from '~/issuable_context';
 import LabelsSelect from '~/labels_select';
 
@@ -10,35 +12,44 @@ import '~/users_select';
 
 (() => {
   let saveLabelCount = 0;
+  let mock;
+
   describe('Issue dropdown sidebar', () => {
     preloadFixtures('static/issue_sidebar_label.html.raw');
 
     beforeEach(() => {
       loadFixtures('static/issue_sidebar_label.html.raw');
+
+      mock = new MockAdapter(axios);
+
       new IssuableContext('{"id":1,"name":"Administrator","username":"root"}');
       new LabelsSelect();
 
-      spyOn(jQuery, 'ajax').and.callFake((req) => {
-        const d = $.Deferred();
-        let LABELS_DATA = [];
+      mock.onGet('/root/test/labels.json').reply(() => {
+        const labels = Array(10).fill().map((_, i) => ({
+          id: i,
+          title: `test ${i}`,
+          color: '#5CB85C',
+        }));
 
-        if (req.url === '/root/test/labels.json') {
-          for (let i = 0; i < 10; i += 1) {
-            LABELS_DATA.push({ id: i, title: `test ${i}`, color: '#5CB85C' });
-          }
-        } else if (req.url === '/root/test/issues/2.json') {
-          const tmp = [];
-          for (let i = 0; i < saveLabelCount; i += 1) {
-            tmp.push({ id: i, title: `test ${i}`, color: '#5CB85C' });
-          }
-          LABELS_DATA = { labels: tmp };
-        }
+        return [200, labels];
+      });
+
+      mock.onPut('/root/test/issues/2.json').reply(() => {
+        const labels = Array(saveLabelCount).fill().map((_, i) => ({
+          id: i,
+          title: `test ${i}`,
+          color: '#5CB85C',
+        }));
 
-        d.resolve(LABELS_DATA);
-        return d.promise();
+        return [200, { labels }];
       });
     });
 
+    afterEach(() => {
+      mock.restore();
+    });
+
     it('changes collapsed tooltip when changing labels when less than 5', (done) => {
       saveLabelCount = 5;
       $('.edit-link').get(0).click();
diff --git a/spec/javascripts/lib/utils/ajax_cache_spec.js b/spec/javascripts/lib/utils/ajax_cache_spec.js
index 49971bd91e2..7603400b55e 100644
--- a/spec/javascripts/lib/utils/ajax_cache_spec.js
+++ b/spec/javascripts/lib/utils/ajax_cache_spec.js
@@ -1,3 +1,5 @@
+import MockAdapter from 'axios-mock-adapter';
+import axios from '~/lib/utils/axios_utils';
 import AjaxCache from '~/lib/utils/ajax_cache';
 
 describe('AjaxCache', () => {
@@ -87,66 +89,53 @@ describe('AjaxCache', () => {
   });
 
   describe('retrieve', () => {
-    let ajaxSpy;
+    let mock;
 
     beforeEach(() => {
-      spyOn(jQuery, 'ajax').and.callFake(url => ajaxSpy(url));
+      mock = new MockAdapter(axios);
+
+      spyOn(axios, 'get').and.callThrough();
+    });
+
+    afterEach(() => {
+      mock.restore();
     });
 
     it('stores and returns data from Ajax call if cache is empty', (done) => {
-      ajaxSpy = (url) => {
-        expect(url).toBe(dummyEndpoint);
-        const deferred = $.Deferred();
-        deferred.resolve(dummyResponse);
-        return deferred.promise();
-      };
+      mock.onGet(dummyEndpoint).reply(200, dummyResponse);
 
       AjaxCache.retrieve(dummyEndpoint)
       .then((data) => {
-        expect(data).toBe(dummyResponse);
-        expect(AjaxCache.internalStorage[dummyEndpoint]).toBe(dummyResponse);
+        expect(data).toEqual(dummyResponse);
+        expect(AjaxCache.internalStorage[dummyEndpoint]).toEqual(dummyResponse);
       })
       .then(done)
       .catch(fail);
     });
 
-    it('makes no Ajax call if request is pending', () => {
-      const responseDeferred = $.Deferred();
-
-      ajaxSpy = (url) => {
-        expect(url).toBe(dummyEndpoint);
-        // neither reject nor resolve to keep request pending
-        return responseDeferred.promise();
-      };
-
-      const unexpectedResponse = data => fail(`Did not expect response: ${data}`);
+    it('makes no Ajax call if request is pending', (done) => {
+      mock.onGet(dummyEndpoint).reply(200, dummyResponse);
 
       AjaxCache.retrieve(dummyEndpoint)
-      .then(unexpectedResponse)
+      .then(done)
       .catch(fail);
 
       AjaxCache.retrieve(dummyEndpoint)
-      .then(unexpectedResponse)
+      .then(done)
       .catch(fail);
 
-      expect($.ajax.calls.count()).toBe(1);
+      expect(axios.get.calls.count()).toBe(1);
     });
 
     it('returns undefined if Ajax call fails and cache is empty', (done) => {
-      const dummyStatusText = 'exploded';
-      const dummyErrorMessage = 'server exploded';
-      ajaxSpy = (url) => {
-        expect(url).toBe(dummyEndpoint);
-        const deferred = $.Deferred();
-        deferred.reject(null, dummyStatusText, dummyErrorMessage);
-        return deferred.promise();
-      };
+      const errorMessage = 'Network Error';
+      mock.onGet(dummyEndpoint).networkError();
 
       AjaxCache.retrieve(dummyEndpoint)
       .then(data => fail(`Received unexpected data: ${JSON.stringify(data)}`))
       .catch((error) => {
-        expect(error.message).toBe(`${dummyEndpoint}: ${dummyErrorMessage}`);
-        expect(error.textStatus).toBe(dummyStatusText);
+        expect(error.message).toBe(`${dummyEndpoint}: ${errorMessage}`);
+        expect(error.textStatus).toBe(errorMessage);
         done();
       })
       .catch(fail);
@@ -154,7 +143,9 @@ describe('AjaxCache', () => {
 
     it('makes no Ajax call if matching data exists', (done) => {
       AjaxCache.internalStorage[dummyEndpoint] = dummyResponse;
-      ajaxSpy = () => fail(new Error('expected no Ajax call!'));
+      mock.onGet(dummyEndpoint).reply(() => {
+        fail(new Error('expected no Ajax call!'));
+      });
 
       AjaxCache.retrieve(dummyEndpoint)
       .then((data) => {
@@ -171,12 +162,7 @@ describe('AjaxCache', () => {
 
       AjaxCache.internalStorage[dummyEndpoint] = oldDummyResponse;
 
-      ajaxSpy = (url) => {
-        expect(url).toBe(dummyEndpoint);
-        const deferred = $.Deferred();
-        deferred.resolve(dummyResponse);
-        return deferred.promise();
-      };
+      mock.onGet(dummyEndpoint).reply(200, dummyResponse);
 
       // Call without forceRetrieve param
       AjaxCache.retrieve(dummyEndpoint)
@@ -189,7 +175,7 @@ describe('AjaxCache', () => {
       // Call with forceRetrieve param
       AjaxCache.retrieve(dummyEndpoint, true)
         .then((data) => {
-          expect(data).toBe(dummyResponse);
+          expect(data).toEqual(dummyResponse);
         })
         .then(done)
         .catch(fail);
diff --git a/spec/javascripts/lib/utils/common_utils_spec.js b/spec/javascripts/lib/utils/common_utils_spec.js
index 1052b4e7c20..80430011aed 100644
--- a/spec/javascripts/lib/utils/common_utils_spec.js
+++ b/spec/javascripts/lib/utils/common_utils_spec.js
@@ -1,7 +1,6 @@
 /* eslint-disable promise/catch-or-return */
-
-import * as commonUtils from '~/lib/utils/common_utils';
 import axios from '~/lib/utils/axios_utils';
+import * as commonUtils from '~/lib/utils/common_utils';
 import MockAdapter from 'axios-mock-adapter';
 
 describe('common_utils', () => {
@@ -460,17 +459,6 @@ describe('common_utils', () => {
     });
   });
 
-  describe('ajaxPost', () => {
-    it('should perform `$.ajax` call and do `POST` request', () => {
-      const requestURL = '/some/random/api';
-      const data = { keyname: 'value' };
-      const ajaxSpy = spyOn($, 'ajax').and.callFake(() => {});
-
-      commonUtils.ajaxPost(requestURL, data);
-      expect(ajaxSpy.calls.allArgs()[0][0].type).toEqual('POST');
-    });
-  });
-
   describe('spriteIcon', () => {
     let beforeGon;
 
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/merge_request_tabs_spec.js b/spec/javascripts/merge_request_tabs_spec.js
index a6be474805b..fda24db98b4 100644
--- a/spec/javascripts/merge_request_tabs_spec.js
+++ b/spec/javascripts/merge_request_tabs_spec.js
@@ -1,5 +1,6 @@
 /* eslint-disable no-var, comma-dangle, object-shorthand */
-
+import MockAdapter from 'axios-mock-adapter';
+import axios from '~/lib/utils/axios_utils';
 import * as urlUtils from '~/lib/utils/url_utility';
 import MergeRequestTabs from '~/merge_request_tabs';
 import '~/commit/pipelines/pipelines_bundle';
@@ -46,7 +47,7 @@ import 'vendor/jquery.scrollTo';
 
     describe('activateTab', function () {
       beforeEach(function () {
-        spyOn($, 'ajax').and.callFake(function () {});
+        spyOn(axios, 'get').and.returnValue(Promise.resolve({ data: {} }));
         loadFixtures('merge_requests/merge_request_with_task_list.html.raw');
         this.subject = this.class.activateTab;
       });
@@ -148,7 +149,7 @@ import 'vendor/jquery.scrollTo';
 
     describe('setCurrentAction', function () {
       beforeEach(function () {
-        spyOn($, 'ajax').and.callFake(function () {});
+        spyOn(axios, 'get').and.returnValue(Promise.resolve({ data: {} }));
         this.subject = this.class.setCurrentAction;
       });
 
@@ -214,13 +215,21 @@ import 'vendor/jquery.scrollTo';
     });
 
     describe('tabShown', () => {
+      let mock;
+
       beforeEach(function () {
-        spyOn($, 'ajax').and.callFake(function (options) {
-          options.success({ html: '' });
+        mock = new MockAdapter(axios);
+        mock.onGet(/(.*)\/diffs\.json/).reply(200, {
+          data: { html: '' },
         });
+
         loadFixtures('merge_requests/merge_request_with_task_list.html.raw');
       });
 
+      afterEach(() => {
+        mock.restore();
+      });
+
       describe('with "Side-by-side"/parallel diff view', () => {
         beforeEach(function () {
           this.class.diffViewType = () => 'parallel';
@@ -292,16 +301,20 @@ import 'vendor/jquery.scrollTo';
 
       it('triggers Ajax request to JSON endpoint', function (done) {
         const url = '/foo/bar/merge_requests/1/diffs';
-        spyOn(this.class, 'ajaxGet').and.callFake((options) => {
-          expect(options.url).toEqual(`${url}.json`);
+
+        spyOn(axios, 'get').and.callFake((reqUrl) => {
+          expect(reqUrl).toBe(`${url}.json`);
+
           done();
+
+          return Promise.resolve({ data: {} });
         });
 
         this.class.loadDiff(url);
       });
 
       it('triggers scroll event when diff already loaded', function (done) {
-        spyOn(this.class, 'ajaxGet').and.callFake(() => done.fail());
+        spyOn(axios, 'get').and.callFake(done.fail);
         spyOn(document, 'dispatchEvent');
 
         this.class.diffsLoaded = true;
@@ -316,6 +329,7 @@ import 'vendor/jquery.scrollTo';
       describe('with inline diff', () => {
         let noteId;
         let noteLineNumId;
+        let mock;
 
         beforeEach(() => {
           const diffsResponse = getJSONFixture(inlineChangesTabJsonFixture);
@@ -330,29 +344,40 @@ import 'vendor/jquery.scrollTo';
             .attr('href')
             .replace('#', '');
 
-          spyOn($, 'ajax').and.callFake(function (options) {
-            options.success(diffsResponse);
-          });
+          mock = new MockAdapter(axios);
+          mock.onGet(/(.*)\/diffs\.json/).reply(200, diffsResponse);
+        });
+
+        afterEach(() => {
+          mock.restore();
         });
 
         describe('with note fragment hash', () => {
-          it('should expand and scroll to linked fragment hash #note_xxx', function () {
+          it('should expand and scroll to linked fragment hash #note_xxx', function (done) {
             spyOn(urlUtils, 'getLocationHash').and.returnValue(noteId);
             this.class.loadDiff('/foo/bar/merge_requests/1/diffs');
 
-            expect(noteId.length).toBeGreaterThan(0);
-            expect(Notes.instance.toggleDiffNote).toHaveBeenCalledWith({
-              target: jasmine.any(Object),
-              lineType: 'old',
-              forceShow: true,
+            setTimeout(() => {
+              expect(noteId.length).toBeGreaterThan(0);
+              expect(Notes.instance.toggleDiffNote).toHaveBeenCalledWith({
+                target: jasmine.any(Object),
+                lineType: 'old',
+                forceShow: true,
+              });
+
+              done();
             });
           });
 
-          it('should gracefully ignore non-existant fragment hash', function () {
+          it('should gracefully ignore non-existant fragment hash', function (done) {
             spyOn(urlUtils, 'getLocationHash').and.returnValue('note_something-that-does-not-exist');
             this.class.loadDiff('/foo/bar/merge_requests/1/diffs');
 
-            expect(Notes.instance.toggleDiffNote).not.toHaveBeenCalled();
+            setTimeout(() => {
+              expect(Notes.instance.toggleDiffNote).not.toHaveBeenCalled();
+
+              done();
+            });
           });
         });
 
@@ -370,6 +395,7 @@ import 'vendor/jquery.scrollTo';
       describe('with parallel diff', () => {
         let noteId;
         let noteLineNumId;
+        let mock;
 
         beforeEach(() => {
           const diffsResponse = getJSONFixture(parallelChangesTabJsonFixture);
@@ -384,30 +410,40 @@ import 'vendor/jquery.scrollTo';
             .attr('href')
             .replace('#', '');
 
-          spyOn($, 'ajax').and.callFake(function (options) {
-            options.success(diffsResponse);
-          });
+          mock = new MockAdapter(axios);
+          mock.onGet(/(.*)\/diffs\.json/).reply(200, diffsResponse);
+        });
+
+        afterEach(() => {
+          mock.restore();
         });
 
         describe('with note fragment hash', () => {
-          it('should expand and scroll to linked fragment hash #note_xxx', function () {
+          it('should expand and scroll to linked fragment hash #note_xxx', function (done) {
             spyOn(urlUtils, 'getLocationHash').and.returnValue(noteId);
 
             this.class.loadDiff('/foo/bar/merge_requests/1/diffs');
 
-            expect(noteId.length).toBeGreaterThan(0);
-            expect(Notes.instance.toggleDiffNote).toHaveBeenCalledWith({
-              target: jasmine.any(Object),
-              lineType: 'new',
-              forceShow: true,
+            setTimeout(() => {
+              expect(noteId.length).toBeGreaterThan(0);
+              expect(Notes.instance.toggleDiffNote).toHaveBeenCalledWith({
+                target: jasmine.any(Object),
+                lineType: 'new',
+                forceShow: true,
+              });
+
+              done();
             });
           });
 
-          it('should gracefully ignore non-existant fragment hash', function () {
+          it('should gracefully ignore non-existant fragment hash', function (done) {
             spyOn(urlUtils, 'getLocationHash').and.returnValue('note_something-that-does-not-exist');
             this.class.loadDiff('/foo/bar/merge_requests/1/diffs');
 
-            expect(Notes.instance.toggleDiffNote).not.toHaveBeenCalled();
+            setTimeout(() => {
+              expect(Notes.instance.toggleDiffNote).not.toHaveBeenCalled();
+              done();
+            });
           });
         });
 
diff --git a/spec/javascripts/mini_pipeline_graph_dropdown_spec.js b/spec/javascripts/mini_pipeline_graph_dropdown_spec.js
index 481b46c3ac6..6fa6f44f953 100644
--- a/spec/javascripts/mini_pipeline_graph_dropdown_spec.js
+++ b/spec/javascripts/mini_pipeline_graph_dropdown_spec.js
@@ -1,7 +1,9 @@
 /* eslint-disable no-new */
 
+import MockAdapter from 'axios-mock-adapter';
+import axios from '~/lib/utils/axios_utils';
 import MiniPipelineGraph from '~/mini_pipeline_graph_dropdown';
-import '~/flash';
+import timeoutPromise from './helpers/set_timeout_promise_helper';
 
 describe('Mini Pipeline Graph Dropdown', () => {
   preloadFixtures('static/mini_dropdown_graph.html.raw');
@@ -27,6 +29,16 @@ describe('Mini Pipeline Graph Dropdown', () => {
   });
 
   describe('When dropdown is clicked', () => {
+    let mock;
+
+    beforeEach(() => {
+      mock = new MockAdapter(axios);
+    });
+
+    afterEach(() => {
+      mock.restore();
+    });
+
     it('should call getBuildsList', () => {
       const getBuildsListSpy = spyOn(
         MiniPipelineGraph.prototype,
@@ -41,46 +53,55 @@ describe('Mini Pipeline Graph Dropdown', () => {
     });
 
     it('should make a request to the endpoint provided in the html', () => {
-      const ajaxSpy = spyOn($, 'ajax').and.callFake(function () {});
+      const ajaxSpy = spyOn(axios, 'get').and.callThrough();
+
+      mock.onGet('foobar').reply(200, {
+        html: '',
+      });
 
       new MiniPipelineGraph({ container: '.js-builds-dropdown-tests' }).bindEvents();
 
       document.querySelector('.js-builds-dropdown-button').click();
-      expect(ajaxSpy.calls.allArgs()[0][0].url).toEqual('foobar');
+      expect(ajaxSpy.calls.allArgs()[0][0]).toEqual('foobar');
     });
 
-    it('should not close when user uses cmd/ctrl + click', () => {
-      spyOn($, 'ajax').and.callFake(function (params) {
-        params.success({
-          html: `<li>
-            <a class="mini-pipeline-graph-dropdown-item" href="#">
-              <span class="ci-status-icon ci-status-icon-failed"></span>
-              <span class="ci-build-text">build</span>
-            </a>
-            <a class="ci-action-icon-wrapper js-ci-action-icon" href="#"></a>
-          </li>`,
-        });
+    it('should not close when user uses cmd/ctrl + click', (done) => {
+      mock.onGet('foobar').reply(200, {
+        html: `<li>
+          <a class="mini-pipeline-graph-dropdown-item" href="#">
+            <span class="ci-status-icon ci-status-icon-failed"></span>
+            <span class="ci-build-text">build</span>
+          </a>
+          <a class="ci-action-icon-wrapper js-ci-action-icon" href="#"></a>
+        </li>`,
       });
       new MiniPipelineGraph({ container: '.js-builds-dropdown-tests' }).bindEvents();
 
       document.querySelector('.js-builds-dropdown-button').click();
 
-      document.querySelector('a.mini-pipeline-graph-dropdown-item').click();
-
-      expect($('.js-builds-dropdown-list').is(':visible')).toEqual(true);
+      timeoutPromise()
+        .then(() => {
+          document.querySelector('a.mini-pipeline-graph-dropdown-item').click();
+        })
+        .then(timeoutPromise)
+        .then(() => {
+          expect($('.js-builds-dropdown-list').is(':visible')).toEqual(true);
+        })
+        .then(done)
+        .catch(done.fail);
     });
-  });
 
-  it('should close the dropdown when request returns an error', (done) => {
-    spyOn($, 'ajax').and.callFake(options => options.error());
+    it('should close the dropdown when request returns an error', (done) => {
+      mock.onGet('foobar').networkError();
 
-    new MiniPipelineGraph({ container: '.js-builds-dropdown-tests' }).bindEvents();
+      new MiniPipelineGraph({ container: '.js-builds-dropdown-tests' }).bindEvents();
 
-    document.querySelector('.js-builds-dropdown-button').click();
+      document.querySelector('.js-builds-dropdown-button').click();
 
-    setTimeout(() => {
-      expect($('.js-builds-dropdown-tests .dropdown').hasClass('open')).toEqual(false);
-      done();
-    }, 0);
+      setTimeout(() => {
+        expect($('.js-builds-dropdown-tests .dropdown').hasClass('open')).toEqual(false);
+        done();
+      });
+    });
   });
 });
diff --git a/spec/javascripts/notes_spec.js b/spec/javascripts/notes_spec.js
index a40821a5693..274d7591c71 100644
--- a/spec/javascripts/notes_spec.js
+++ b/spec/javascripts/notes_spec.js
@@ -1,11 +1,14 @@
 /* eslint-disable space-before-function-paren, no-unused-expressions, no-var, object-shorthand, comma-dangle, max-len */
 import _ from 'underscore';
+import MockAdapter from 'axios-mock-adapter';
+import axios from '~/lib/utils/axios_utils';
 import * as urlUtils from '~/lib/utils/url_utility';
 import 'autosize';
 import '~/gl_form';
 import '~/lib/utils/text_utility';
 import '~/render_gfm';
 import Notes from '~/notes';
+import timeoutPromise from './helpers/set_timeout_promise_helper';
 
 (function() {
   window.gon || (window.gon = {});
@@ -47,13 +50,24 @@ import Notes from '~/notes';
     });
 
     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);
@@ -62,14 +76,15 @@ import Notes from '~/notes';
         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();
+        });
       });
     });
 
@@ -119,6 +134,7 @@ import Notes from '~/notes';
       let noteEntity;
       let $form;
       let $notesContainer;
+      let mock;
 
       beforeEach(() => {
         this.notes = new Notes('', []);
@@ -136,24 +152,32 @@ import Notes from '~/notes';
         $form = $('form.js-main-target-form');
         $notesContainer = $('ul.main-notes-list');
         $form.find('textarea.js-note-text').val(sampleComment);
+
+        mock = new MockAdapter(axios);
+        mock.onPost(/(.*)\/notes$/).reply(200, noteEntity);
       });
 
-      it('updates note and resets edit form', () => {
-        const deferred = $.Deferred();
-        spyOn($, 'ajax').and.returnValue(deferred.promise());
+      afterEach(() => {
+        mock.restore();
+      });
+
+      it('updates note and resets edit form', (done) => {
         spyOn(this.notes, 'revertNoteEditForm');
         spyOn(this.notes, 'setupNewNote');
 
         $('.js-comment-button').click();
-        deferred.resolve(noteEntity);
 
-        const $targetNote = $notesContainer.find(`#note_${noteEntity.id}`);
-        const updatedNote = Object.assign({}, noteEntity);
-        updatedNote.note = 'bar';
-        this.notes.updateNote(updatedNote, $targetNote);
+        setTimeout(() => {
+          const $targetNote = $notesContainer.find(`#note_${noteEntity.id}`);
+          const updatedNote = Object.assign({}, noteEntity);
+          updatedNote.note = 'bar';
+          this.notes.updateNote(updatedNote, $targetNote);
+
+          expect(this.notes.revertNoteEditForm).toHaveBeenCalledWith($targetNote);
+          expect(this.notes.setupNewNote).toHaveBeenCalled();
 
-        expect(this.notes.revertNoteEditForm).toHaveBeenCalledWith($targetNote);
-        expect(this.notes.setupNewNote).toHaveBeenCalled();
+          done();
+        });
       });
     });
 
@@ -479,8 +503,19 @@ import Notes from '~/notes';
       };
       let $form;
       let $notesContainer;
+      let mock;
+
+      function mockNotesPost() {
+        mock.onPost(/(.*)\/notes$/).reply(200, note);
+      }
+
+      function mockNotesPostError() {
+        mock.onPost(/(.*)\/notes$/).networkError();
+      }
 
       beforeEach(() => {
+        mock = new MockAdapter(axios);
+
         this.notes = new Notes('', []);
         window.gon.current_username = 'root';
         window.gon.current_user_fullname = 'Administrator';
@@ -489,63 +524,92 @@ import Notes from '~/notes';
         $form.find('textarea.js-note-text').val(sampleComment);
       });
 
+      afterEach(() => {
+        mock.restore();
+      });
+
       it('should show placeholder note while new comment is being posted', () => {
+        mockNotesPost();
+
         $('.js-comment-button').click();
         expect($notesContainer.find('.note.being-posted').length > 0).toEqual(true);
       });
 
-      it('should remove placeholder note when new comment is done posting', () => {
-        const deferred = $.Deferred();
-        spyOn($, 'ajax').and.returnValue(deferred.promise());
+      it('should remove placeholder note when new comment is done posting', (done) => {
+        mockNotesPost();
+
         $('.js-comment-button').click();
 
-        deferred.resolve(note);
-        expect($notesContainer.find('.note.being-posted').length).toEqual(0);
+        setTimeout(() => {
+          expect($notesContainer.find('.note.being-posted').length).toEqual(0);
+
+          done();
+        });
       });
 
-      it('should show actual note element when new comment is done posting', () => {
-        const deferred = $.Deferred();
-        spyOn($, 'ajax').and.returnValue(deferred.promise());
+      it('should show actual note element when new comment is done posting', (done) => {
+        mockNotesPost();
+
         $('.js-comment-button').click();
 
-        deferred.resolve(note);
-        expect($notesContainer.find(`#note_${note.id}`).length > 0).toEqual(true);
+        setTimeout(() => {
+          expect($notesContainer.find(`#note_${note.id}`).length > 0).toEqual(true);
+
+          done();
+        });
       });
 
-      it('should reset Form when new comment is done posting', () => {
-        const deferred = $.Deferred();
-        spyOn($, 'ajax').and.returnValue(deferred.promise());
+      it('should reset Form when new comment is done posting', (done) => {
+        mockNotesPost();
+
         $('.js-comment-button').click();
 
-        deferred.resolve(note);
-        expect($form.find('textarea.js-note-text').val()).toEqual('');
+        setTimeout(() => {
+          expect($form.find('textarea.js-note-text').val()).toEqual('');
+
+          done();
+        });
       });
 
-      it('should show flash error message when new comment failed to be posted', () => {
-        const deferred = $.Deferred();
-        spyOn($, 'ajax').and.returnValue(deferred.promise());
+      it('should show flash error message when new comment failed to be posted', (done) => {
+        mockNotesPostError();
+
         $('.js-comment-button').click();
 
-        deferred.reject();
-        expect($notesContainer.parent().find('.flash-container .flash-text').is(':visible')).toEqual(true);
+        setTimeout(() => {
+          expect($notesContainer.parent().find('.flash-container .flash-text').is(':visible')).toEqual(true);
+
+          done();
+        });
       });
 
-      it('should show flash error message when comment failed to be updated', () => {
-        const deferred = $.Deferred();
-        spyOn($, 'ajax').and.returnValue(deferred.promise());
+      it('should show flash error message when comment failed to be updated', (done) => {
+        mockNotesPost();
+
         $('.js-comment-button').click();
 
-        deferred.resolve(note);
-        const $noteEl = $notesContainer.find(`#note_${note.id}`);
-        $noteEl.find('.js-note-edit').click();
-        $noteEl.find('textarea.js-note-text').val(updatedComment);
-        $noteEl.find('.js-comment-save-button').click();
+        timeoutPromise()
+          .then(() => {
+            const $noteEl = $notesContainer.find(`#note_${note.id}`);
+            $noteEl.find('.js-note-edit').click();
+            $noteEl.find('textarea.js-note-text').val(updatedComment);
 
-        deferred.reject();
-        const $updatedNoteEl = $notesContainer.find(`#note_${note.id}`);
-        expect($updatedNoteEl.hasClass('.being-posted')).toEqual(false); // Remove being-posted visuals
-        expect($updatedNoteEl.find('.note-text').text().trim()).toEqual(sampleComment); // See if comment reverted back to original
-        expect($('.flash-container').is(':visible')).toEqual(true); // Flash error message shown
+            mock.restore();
+
+            mockNotesPostError();
+
+            $noteEl.find('.js-comment-save-button').click();
+          })
+          .then(timeoutPromise)
+          .then(() => {
+            const $updatedNoteEl = $notesContainer.find(`#note_${note.id}`);
+            expect($updatedNoteEl.hasClass('.being-posted')).toEqual(false); // Remove being-posted visuals
+            expect($updatedNoteEl.find('.note-text').text().trim()).toEqual(sampleComment); // See if comment reverted back to original
+            expect($('.flash-container').is(':visible')).toEqual(true); // Flash error message shown
+
+            done();
+          })
+          .catch(done.fail);
       });
     });
 
@@ -563,8 +627,12 @@ import Notes from '~/notes';
       };
       let $form;
       let $notesContainer;
+      let mock;
 
       beforeEach(() => {
+        mock = new MockAdapter(axios);
+        mock.onPost(/(.*)\/notes$/).reply(200, note);
+
         this.notes = new Notes('', []);
         window.gon.current_username = 'root';
         window.gon.current_user_fullname = 'Administrator';
@@ -582,15 +650,20 @@ import Notes from '~/notes';
         $form.find('textarea.js-note-text').val(sampleComment);
       });
 
-      it('should remove slash command placeholder when comment with slash commands is done posting', () => {
-        const deferred = $.Deferred();
-        spyOn($, 'ajax').and.returnValue(deferred.promise());
+      afterEach(() => {
+        mock.restore();
+      });
+
+      it('should remove slash command placeholder when comment with slash commands is done posting', (done) => {
         spyOn(gl.awardsHandler, 'addAwardToEmojiBar').and.callThrough();
         $('.js-comment-button').click();
 
         expect($notesContainer.find('.system-note.being-posted').length).toEqual(1); // Placeholder shown
-        deferred.resolve(note);
-        expect($notesContainer.find('.system-note.being-posted').length).toEqual(0); // Placeholder removed
+
+        setTimeout(() => {
+          expect($notesContainer.find('.system-note.being-posted').length).toEqual(0); // Placeholder removed
+          done();
+        });
       });
     });
 
@@ -607,8 +680,12 @@ import Notes from '~/notes';
       };
       let $form;
       let $notesContainer;
+      let mock;
 
       beforeEach(() => {
+        mock = new MockAdapter(axios);
+        mock.onPost(/(.*)\/notes$/).reply(200, note);
+
         this.notes = new Notes('', []);
         window.gon.current_username = 'root';
         window.gon.current_user_fullname = 'Administrator';
@@ -617,19 +694,24 @@ import Notes from '~/notes';
         $form.find('textarea.js-note-text').html(sampleComment);
       });
 
-      it('should not render a script tag', () => {
-        const deferred = $.Deferred();
-        spyOn($, 'ajax').and.returnValue(deferred.promise());
+      afterEach(() => {
+        mock.restore();
+      });
+
+      it('should not render a script tag', (done) => {
         $('.js-comment-button').click();
 
-        deferred.resolve(note);
-        const $noteEl = $notesContainer.find(`#note_${note.id}`);
-        $noteEl.find('.js-note-edit').click();
-        $noteEl.find('textarea.js-note-text').html(updatedComment);
-        $noteEl.find('.js-comment-save-button').click();
+        setTimeout(() => {
+          const $noteEl = $notesContainer.find(`#note_${note.id}`);
+          $noteEl.find('.js-note-edit').click();
+          $noteEl.find('textarea.js-note-text').html(updatedComment);
+          $noteEl.find('.js-comment-save-button').click();
+
+          const $updatedNoteEl = $notesContainer.find(`#note_${note.id}`).find('.js-task-list-container');
+          expect($updatedNoteEl.find('.note-text').text().trim()).toEqual('');
 
-        const $updatedNoteEl = $notesContainer.find(`#note_${note.id}`).find('.js-task-list-container');
-        expect($updatedNoteEl.find('.note-text').text().trim()).toEqual('');
+          done();
+        });
       });
     });
 
diff --git a/spec/javascripts/pager_spec.js b/spec/javascripts/pager_spec.js
index 2fd87754238..b09494f0b77 100644
--- a/spec/javascripts/pager_spec.js
+++ b/spec/javascripts/pager_spec.js
@@ -1,5 +1,6 @@
 /* global fixture */
-
+import MockAdapter from 'axios-mock-adapter';
+import axios from '~/lib/utils/axios_utils';
 import * as utils from '~/lib/utils/url_utility';
 import Pager from '~/pager';
 
@@ -9,7 +10,6 @@ describe('pager', () => {
 
     beforeEach(() => {
       setFixtures('<div class="content_list"></div><div class="loading"></div>');
-      spyOn($, 'ajax');
     });
 
     afterEach(() => {
@@ -47,39 +47,90 @@ describe('pager', () => {
   });
 
   describe('getOld', () => {
+    const urlRegex = /(.*)some_list(.*)$/;
+    let mock;
+
+    function mockSuccess() {
+      mock.onGet(urlRegex).reply(200, {
+        count: 0,
+        html: '',
+      });
+    }
+
+    function mockError() {
+      mock.onGet(urlRegex).networkError();
+    }
+
     beforeEach(() => {
       setFixtures('<div class="content_list" data-href="/some_list"></div><div class="loading"></div>');
+      spyOn(axios, 'get').and.callThrough();
+
+      mock = new MockAdapter(axios);
+
       Pager.init();
     });
 
-    it('shows loader while loading next page', () => {
+    afterEach(() => {
+      mock.restore();
+    });
+
+    it('shows loader while loading next page', (done) => {
+      mockSuccess();
+
       spyOn(Pager.loading, 'show');
       Pager.getOld();
-      expect(Pager.loading.show).toHaveBeenCalled();
+
+      setTimeout(() => {
+        expect(Pager.loading.show).toHaveBeenCalled();
+
+        done();
+      });
     });
 
-    it('hides loader on success', () => {
-      spyOn($, 'ajax').and.callFake(options => options.success({}));
+    it('hides loader on success', (done) => {
+      mockSuccess();
+
       spyOn(Pager.loading, 'hide');
       Pager.getOld();
-      expect(Pager.loading.hide).toHaveBeenCalled();
+
+      setTimeout(() => {
+        expect(Pager.loading.hide).toHaveBeenCalled();
+
+        done();
+      });
     });
 
-    it('hides loader on error', () => {
-      spyOn($, 'ajax').and.callFake(options => options.error());
+    it('hides loader on error', (done) => {
+      mockError();
+
       spyOn(Pager.loading, 'hide');
       Pager.getOld();
-      expect(Pager.loading.hide).toHaveBeenCalled();
+
+      setTimeout(() => {
+        expect(Pager.loading.hide).toHaveBeenCalled();
+
+        done();
+      });
     });
 
-    it('sends request to url with offset and limit params', () => {
-      spyOn($, 'ajax');
+    it('sends request to url with offset and limit params', (done) => {
       Pager.offset = 100;
       Pager.limit = 20;
       Pager.getOld();
-      const [{ data, url }] = $.ajax.calls.argsFor(0);
-      expect(data).toBe('limit=20&offset=100');
-      expect(url).toBe('/some_list');
+
+      setTimeout(() => {
+        const [url, params] = axios.get.calls.argsFor(0);
+
+        expect(params).toEqual({
+          params: {
+            limit: 20,
+            offset: 100,
+          },
+        });
+        expect(url).toBe('/some_list');
+
+        done();
+      });
     });
   });
 });
diff --git a/spec/javascripts/pipeline_schedules/setup_pipeline_variable_list_spec.js b/spec/javascripts/pipeline_schedules/setup_pipeline_variable_list_spec.js
deleted file mode 100644
index 5b316b319a5..00000000000
--- a/spec/javascripts/pipeline_schedules/setup_pipeline_variable_list_spec.js
+++ /dev/null
@@ -1,145 +0,0 @@
-import {
-  setupPipelineVariableList,
-  insertRow,
-  removeRow,
-} from '~/pipeline_schedules/setup_pipeline_variable_list';
-
-describe('Pipeline Variable List', () => {
-  let $markup;
-
-  describe('insertRow', () => {
-    it('should insert another row', () => {
-      $markup = $(`<div>
-        <li class="js-row">
-          <input>
-          <textarea></textarea>
-        </li>
-      </div>`);
-
-      insertRow($markup.find('.js-row'));
-
-      expect($markup.find('.js-row').length).toBe(2);
-    });
-
-    it('should clear `data-is-persisted` on cloned row', () => {
-      $markup = $(`<div>
-        <li class="js-row" data-is-persisted="true"></li>
-      </div>`);
-
-      insertRow($markup.find('.js-row'));
-
-      const $lastRow = $markup.find('.js-row').last();
-      expect($lastRow.attr('data-is-persisted')).toBe(undefined);
-    });
-
-    it('should clear inputs on cloned row', () => {
-      $markup = $(`<div>
-        <li class="js-row">
-          <input value="foo">
-          <textarea>bar</textarea>
-        </li>
-      </div>`);
-
-      insertRow($markup.find('.js-row'));
-
-      const $lastRow = $markup.find('.js-row').last();
-      expect($lastRow.find('input').val()).toBe('');
-      expect($lastRow.find('textarea').val()).toBe('');
-    });
-  });
-
-  describe('removeRow', () => {
-    it('should remove dynamic row', () => {
-      $markup = $(`<div>
-        <li class="js-row">
-          <input>
-          <textarea></textarea>
-        </li>
-      </div>`);
-
-      removeRow($markup.find('.js-row'));
-
-      expect($markup.find('.js-row').length).toBe(0);
-    });
-
-    it('should hide and mark to destroy with already persisted rows', () => {
-      $markup = $(`<div>
-        <li class="js-row" data-is-persisted="true">
-          <input class="js-destroy-input">
-        </li>
-      </div>`);
-
-      const $row = $markup.find('.js-row');
-      removeRow($row);
-
-      expect($row.find('.js-destroy-input').val()).toBe('1');
-      expect($markup.find('.js-row').length).toBe(1);
-    });
-  });
-
-  describe('setupPipelineVariableList', () => {
-    beforeEach(() => {
-      $markup = $(`<form>
-        <li class="js-row">
-          <input class="js-user-input" name="schedule[variables_attributes][][key]">
-          <textarea class="js-user-input" name="schedule[variables_attributes][][value]"></textarea>
-          <button class="js-row-remove-button"></button>
-          <button class="js-row-add-button"></button>
-        </li>
-      </form>`);
-
-      setupPipelineVariableList($markup);
-    });
-
-    it('should remove the row when clicking the remove button', () => {
-      $markup.find('.js-row-remove-button').trigger('click');
-
-      expect($markup.find('.js-row').length).toBe(0);
-    });
-
-    it('should add another row when editing the last rows key input', () => {
-      const $row = $markup.find('.js-row');
-      $row.find('input.js-user-input')
-        .val('foo')
-        .trigger('input');
-
-      expect($markup.find('.js-row').length).toBe(2);
-    });
-
-    it('should add another row when editing the last rows value textarea', () => {
-      const $row = $markup.find('.js-row');
-      $row.find('textarea.js-user-input')
-        .val('foo')
-        .trigger('input');
-
-      expect($markup.find('.js-row').length).toBe(2);
-    });
-
-    it('should remove empty row after blurring', () => {
-      const $row = $markup.find('.js-row');
-      $row.find('input.js-user-input')
-        .val('foo')
-        .trigger('input');
-
-      expect($markup.find('.js-row').length).toBe(2);
-
-      $row.find('input.js-user-input')
-        .val('')
-        .trigger('input')
-        .trigger('blur');
-
-      expect($markup.find('.js-row').length).toBe(1);
-    });
-
-    it('should clear out the `name` attribute on the inputs for the last empty row on form submission (avoid BE validation)', () => {
-      const $row = $markup.find('.js-row');
-      expect($row.find('input').attr('name')).toBe('schedule[variables_attributes][][key]');
-      expect($row.find('textarea').attr('name')).toBe('schedule[variables_attributes][][value]');
-
-      $markup.filter('form').submit();
-
-      expect($row.find('input').attr('name')).toBe('');
-      expect($row.find('textarea').attr('name')).toBe('');
-    });
-  });
-});
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', () => {
diff --git a/spec/javascripts/vue_mr_widget/components/mr_widget_author_spec.js b/spec/javascripts/vue_mr_widget/components/mr_widget_author_spec.js
index a750bc78f36..f14d5f6f76c 100644
--- a/spec/javascripts/vue_mr_widget/components/mr_widget_author_spec.js
+++ b/spec/javascripts/vue_mr_widget/components/mr_widget_author_spec.js
@@ -1,39 +1,39 @@
 import Vue from 'vue';
-import authorComponent from '~/vue_merge_request_widget/components/mr_widget_author';
-
-const author = {
-  webUrl: 'http://foo.bar',
-  avatarUrl: 'http://gravatar.com/foo',
-  name: 'fatihacet',
-};
-const createComponent = () => {
-  const Component = Vue.extend(authorComponent);
-
-  return new Component({
-    el: document.createElement('div'),
-    propsData: { author },
-  });
-};
+import authorComponent from '~/vue_merge_request_widget/components/mr_widget_author.vue';
+import mountComponent from '../../helpers/vue_mount_component_helper';
 
 describe('MRWidgetAuthor', () => {
-  describe('props', () => {
-    it('should have props', () => {
-      const authorProp = authorComponent.props.author;
+  let vm;
+
+  beforeEach(() => {
+    const Component = Vue.extend(authorComponent);
+
+    vm = mountComponent(Component, {
+      author: {
+        name: 'Administrator',
+        username: 'root',
+        webUrl: 'http://localhost:3000/root',
+        avatarUrl: 'http://www.gravatar.com/avatar/e64c7d89f26bd1972efa854d13d7dd61?s=80&d=identicon',
+      },
 
-      expect(authorProp).toBeDefined();
-      expect(authorProp.type instanceof Object).toBeTruthy();
-      expect(authorProp.required).toBeTruthy();
     });
   });
 
-  describe('template', () => {
-    it('should have correct elements', () => {
-      const el = createComponent().$el;
+  afterEach(() => {
+    vm.$destroy();
+  });
 
-      expect(el.tagName).toEqual('A');
-      expect(el.getAttribute('href')).toEqual(author.webUrl);
-      expect(el.querySelector('img').getAttribute('src')).toEqual(author.avatarUrl);
-      expect(el.querySelector('.author').innerText.trim()).toEqual(author.name);
-    });
+  it('renders link with the author web url', () => {
+    expect(vm.$el.getAttribute('href')).toEqual('http://localhost:3000/root');
+  });
+
+  it('renders image with avatar url', () => {
+    expect(
+      vm.$el.querySelector('img').getAttribute('src'),
+    ).toEqual('http://www.gravatar.com/avatar/e64c7d89f26bd1972efa854d13d7dd61?s=80&d=identicon');
+  });
+
+  it('renders author name', () => {
+    expect(vm.$el.textContent.trim()).toEqual('Administrator');
   });
 });
diff --git a/spec/javascripts/vue_mr_widget/components/mr_widget_author_time_spec.js b/spec/javascripts/vue_mr_widget/components/mr_widget_author_time_spec.js
index 515ddcbb875..8c55622b15e 100644
--- a/spec/javascripts/vue_mr_widget/components/mr_widget_author_time_spec.js
+++ b/spec/javascripts/vue_mr_widget/components/mr_widget_author_time_spec.js
@@ -1,61 +1,40 @@
 import Vue from 'vue';
-import authorTimeComponent from '~/vue_merge_request_widget/components/mr_widget_author_time';
-
-const props = {
-  actionText: 'Merged by',
-  author: {
-    webUrl: 'http://foo.bar',
-    avatarUrl: 'http://gravatar.com/foo',
-    name: 'fatihacet',
-  },
-  dateTitle: '2017-03-23T23:02:00.807Z',
-  dateReadable: '12 hours ago',
-};
-const createComponent = () => {
-  const Component = Vue.extend(authorTimeComponent);
-
-  return new Component({
-    el: document.createElement('div'),
-    propsData: props,
-  });
-};
+import authorTimeComponent from '~/vue_merge_request_widget/components/mr_widget_author_time.vue';
+import mountComponent from '../../helpers/vue_mount_component_helper';
 
 describe('MRWidgetAuthorTime', () => {
-  describe('props', () => {
-    it('should have props', () => {
-      const { actionText, author, dateTitle, dateReadable } = authorTimeComponent.props;
-      const ActionTextClass = actionText.type;
-      const DateTitleClass = dateTitle.type;
-      const DateReadableClass = dateReadable.type;
-
-      expect(new ActionTextClass() instanceof String).toBeTruthy();
-      expect(actionText.required).toBeTruthy();
-
-      expect(author.type instanceof Object).toBeTruthy();
-      expect(author.required).toBeTruthy();
-
-      expect(new DateTitleClass() instanceof String).toBeTruthy();
-      expect(dateTitle.required).toBeTruthy();
-
-      expect(new DateReadableClass() instanceof String).toBeTruthy();
-      expect(dateReadable.required).toBeTruthy();
+  let vm;
+
+  beforeEach(() => {
+    const Component = Vue.extend(authorTimeComponent);
+
+    vm = mountComponent(Component, {
+      actionText: 'Merged by',
+      author: {
+        name: 'Administrator',
+        username: 'root',
+        webUrl: 'http://localhost:3000/root',
+        avatarUrl: 'http://www.gravatar.com/avatar/e64c7d89f26bd1972efa854d13d7dd61?s=80&d=identicon',
+      },
+      dateTitle: '2017-03-23T23:02:00.807Z',
+      dateReadable: '12 hours ago',
     });
   });
 
-  describe('components', () => {
-    it('should have components', () => {
-      expect(authorTimeComponent.components['mr-widget-author']).toBeDefined();
-    });
+  afterEach(() => {
+    vm.$destroy();
+  });
+
+  it('renders provided action text', () => {
+    expect(vm.$el.textContent).toContain('Merged by');
   });
 
-  describe('template', () => {
-    it('should have correct elements', () => {
-      const el = createComponent().$el;
+  it('renders author', () => {
+    expect(vm.$el.textContent).toContain('Administrator');
+  });
 
-      expect(el.tagName).toEqual('H4');
-      expect(el.querySelector('a').getAttribute('href')).toEqual(props.author.webUrl);
-      expect(el.querySelector('time').innerText).toContain(props.dateReadable);
-      expect(el.querySelector('time').getAttribute('title')).toEqual(props.dateTitle);
-    });
+  it('renders provided time', () => {
+    expect(vm.$el.querySelector('time').getAttribute('title')).toEqual('2017-03-23T23:02:00.807Z');
+    expect(vm.$el.querySelector('time').textContent.trim()).toEqual('12 hours ago');
   });
 });
diff --git a/spec/javascripts/vue_mr_widget/components/mr_widget_header_spec.js b/spec/javascripts/vue_mr_widget/components/mr_widget_header_spec.js
index 93bb83ca8bd..13e5595bbfc 100644
--- a/spec/javascripts/vue_mr_widget/components/mr_widget_header_spec.js
+++ b/spec/javascripts/vue_mr_widget/components/mr_widget_header_spec.js
@@ -1,121 +1,220 @@
 import Vue from 'vue';
-import headerComponent from '~/vue_merge_request_widget/components/mr_widget_header';
-
-const createComponent = (mr) => {
-  const Component = Vue.extend(headerComponent);
-  return new Component({
-    el: document.createElement('div'),
-    propsData: { mr },
-  });
-};
+import headerComponent from '~/vue_merge_request_widget/components/mr_widget_header.vue';
+import mountComponent from '../../helpers/vue_mount_component_helper';
 
 describe('MRWidgetHeader', () => {
-  describe('props', () => {
-    it('should have props', () => {
-      const { mr } = headerComponent.props;
+  let vm;
+  let Component;
 
-      expect(mr.type instanceof Object).toBeTruthy();
-      expect(mr.required).toBeTruthy();
-    });
+  beforeEach(() => {
+    Component = Vue.extend(headerComponent);
+  });
+
+  afterEach(() => {
+    vm.$destroy();
   });
 
   describe('computed', () => {
-    let vm;
-    beforeEach(() => {
-      vm = createComponent({
-        divergedCommitsCount: 12,
-        sourceBranch: 'mr-widget-refactor',
-        sourceBranchLink: '/foo/bar/mr-widget-refactor',
-        targetBranch: 'master',
+    describe('shouldShowCommitsBehindText', () => {
+      it('return true when there are divergedCommitsCount', () => {
+        vm = mountComponent(Component, { mr: {
+          divergedCommitsCount: 12,
+          sourceBranch: 'mr-widget-refactor',
+          sourceBranchLink: '<a href="/foo/bar/mr-widget-refactor">Link</a>',
+          targetBranch: 'master',
+        } });
+
+        expect(vm.shouldShowCommitsBehindText).toEqual(true);
+      });
+
+      it('returns false where there are no divergedComits count', () => {
+        vm = mountComponent(Component, { mr: {
+          divergedCommitsCount: 0,
+          sourceBranch: 'mr-widget-refactor',
+          sourceBranchLink: '<a href="/foo/bar/mr-widget-refactor">Link</a>',
+          targetBranch: 'master',
+        } });
+        expect(vm.shouldShowCommitsBehindText).toEqual(false);
       });
     });
 
-    it('shouldShowCommitsBehindText', () => {
-      expect(vm.shouldShowCommitsBehindText).toBeTruthy();
+    describe('commitsText', () => {
+      it('returns singular when there is one commit', () => {
+        vm = mountComponent(Component, { mr: {
+          divergedCommitsCount: 1,
+          sourceBranch: 'mr-widget-refactor',
+          sourceBranchLink: '<a href="/foo/bar/mr-widget-refactor">Link</a>',
+          targetBranch: 'master',
+        } });
 
-      vm.mr.divergedCommitsCount = 0;
-      expect(vm.shouldShowCommitsBehindText).toBeFalsy();
-    });
+        expect(vm.commitsText).toEqual('1 commit behind');
+      });
 
-    it('commitsText', () => {
-      expect(vm.commitsText).toEqual('commits');
+      it('returns plural when there is more than one commit', () => {
+        vm = mountComponent(Component, { mr: {
+          divergedCommitsCount: 2,
+          sourceBranch: 'mr-widget-refactor',
+          sourceBranchLink: '<a href="/foo/bar/mr-widget-refactor">Link</a>',
+          targetBranch: 'master',
+        } });
 
-      vm.mr.divergedCommitsCount = 1;
-      expect(vm.commitsText).toEqual('commit');
+        expect(vm.commitsText).toEqual('2 commits behind');
+      });
     });
   });
 
   describe('template', () => {
-    let vm;
-    let el;
-    let mr;
-    const sourceBranchPath = '/foo/bar/mr-widget-refactor';
-
-    beforeEach(() => {
-      mr = {
-        divergedCommitsCount: 12,
-        sourceBranch: 'mr-widget-refactor',
-        sourceBranchLink: `<a href="${sourceBranchPath}">mr-widget-refactor</a>`,
-        sourceBranchRemoved: false,
-        targetBranchPath: 'foo/bar/commits-path',
-        targetBranchTreePath: 'foo/bar/tree/path',
-        targetBranch: 'master',
-        isOpen: true,
-        emailPatchesPath: '/mr/email-patches',
-        plainDiffPath: '/mr/plainDiffPath',
-      };
-
-      vm = createComponent(mr);
-      el = vm.$el;
+    describe('common elements', () => {
+      beforeEach(() => {
+        vm = mountComponent(Component, { mr: {
+          divergedCommitsCount: 12,
+          sourceBranch: 'mr-widget-refactor',
+          sourceBranchLink: '<a href="/foo/bar/mr-widget-refactor">mr-widget-refactor</a>',
+          sourceBranchRemoved: false,
+          targetBranchPath: 'foo/bar/commits-path',
+          targetBranchTreePath: 'foo/bar/tree/path',
+          targetBranch: 'master',
+          isOpen: true,
+          emailPatchesPath: '/mr/email-patches',
+          plainDiffPath: '/mr/plainDiffPath',
+        } });
+      });
+
+      it('renders source branch link', () => {
+        expect(
+          vm.$el.querySelector('.js-source-branch').innerHTML,
+        ).toEqual('<a href="/foo/bar/mr-widget-refactor">mr-widget-refactor</a>');
+      });
+
+      it('renders clipboard button', () => {
+        expect(vm.$el.querySelector('.btn-clipboard')).not.toEqual(null);
+      });
+
+      it('renders target branch', () => {
+        expect(vm.$el.querySelector('.js-target-branch').textContent.trim()).toEqual('master');
+      });
     });
 
-    it('should render template elements correctly', () => {
-      expect(el.classList.contains('mr-source-target')).toBeTruthy();
-      const sourceBranchLink = el.querySelectorAll('.label-branch')[0];
-      const targetBranchLink = el.querySelectorAll('.label-branch')[1];
-      const commitsCount = el.querySelector('.diverged-commits-count');
+    describe('with an open merge request', () => {
+      afterEach(() => {
+        vm.$destroy();
+      });
 
-      expect(sourceBranchLink.textContent).toContain(mr.sourceBranch);
-      expect(targetBranchLink.textContent).toContain(mr.targetBranch);
-      expect(sourceBranchLink.querySelector('a').getAttribute('href')).toEqual(sourceBranchPath);
-      expect(targetBranchLink.querySelector('a').getAttribute('href')).toEqual(mr.targetBranchTreePath);
-      expect(commitsCount.textContent).toContain('12 commits behind');
-      expect(commitsCount.querySelector('a').getAttribute('href')).toEqual(mr.targetBranchPath);
+      beforeEach(() => {
+        vm = mountComponent(Component, { mr: {
+          divergedCommitsCount: 12,
+          sourceBranch: 'mr-widget-refactor',
+          sourceBranchLink: '<a href="/foo/bar/mr-widget-refactor">mr-widget-refactor</a>',
+          sourceBranchRemoved: false,
+          targetBranchPath: 'foo/bar/commits-path',
+          targetBranchTreePath: 'foo/bar/tree/path',
+          targetBranch: 'master',
+          isOpen: true,
+          emailPatchesPath: '/mr/email-patches',
+          plainDiffPath: '/mr/plainDiffPath',
+        } });
+      });
+
+      it('renders checkout branch button with modal trigger', () => {
+        const button = vm.$el.querySelector('.js-check-out-branch');
+
+        expect(button.textContent.trim()).toEqual('Check out branch');
+        expect(button.getAttribute('data-target')).toEqual('#modal_merge_info');
+        expect(button.getAttribute('data-toggle')).toEqual('modal');
+      });
+
+      it('renders download dropdown with links', () => {
+        expect(
+          vm.$el.querySelector('.js-download-email-patches').textContent.trim(),
+        ).toEqual('Email patches');
 
-      expect(el.textContent).toContain('Check out branch');
-      expect(el.querySelectorAll('.dropdown li a')[0].getAttribute('href')).toEqual(mr.emailPatchesPath);
-      expect(el.querySelectorAll('.dropdown li a')[1].getAttribute('href')).toEqual(mr.plainDiffPath);
+        expect(
+          vm.$el.querySelector('.js-download-email-patches').getAttribute('href'),
+        ).toEqual('/mr/email-patches');
 
-      expect(el.querySelector('a[href="#modal_merge_info"]').getAttribute('disabled')).toBeNull();
+        expect(
+          vm.$el.querySelector('.js-download-plain-diff').textContent.trim(),
+        ).toEqual('Plain diff');
+
+        expect(
+          vm.$el.querySelector('.js-download-plain-diff').getAttribute('href'),
+        ).toEqual('/mr/plainDiffPath');
+      });
     });
 
-    it('should not have right action links if the MR state is not open', (done) => {
-      vm.mr.isOpen = false;
-      Vue.nextTick(() => {
-        expect(el.textContent).not.toContain('Check out branch');
-        expect(el.querySelectorAll('.dropdown li a').length).toEqual(0);
-        done();
+    describe('with a closed merge request', () => {
+      beforeEach(() => {
+        vm = mountComponent(Component, { mr: {
+          divergedCommitsCount: 12,
+          sourceBranch: 'mr-widget-refactor',
+          sourceBranchLink: '<a href="/foo/bar/mr-widget-refactor">mr-widget-refactor</a>',
+          sourceBranchRemoved: false,
+          targetBranchPath: 'foo/bar/commits-path',
+          targetBranchTreePath: 'foo/bar/tree/path',
+          targetBranch: 'master',
+          isOpen: false,
+          emailPatchesPath: '/mr/email-patches',
+          plainDiffPath: '/mr/plainDiffPath',
+        } });
+      });
+
+      it('does not render checkout branch button with modal trigger', () => {
+        const button = vm.$el.querySelector('.js-check-out-branch');
+
+        expect(button).toEqual(null);
+      });
+
+      it('does not render download dropdown with links', () => {
+        expect(
+          vm.$el.querySelector('.js-download-email-patches'),
+        ).toEqual(null);
+
+        expect(
+          vm.$el.querySelector('.js-download-plain-diff'),
+        ).toEqual(null);
       });
     });
 
-    it('should not render diverged commits count if the MR has no diverged commits', (done) => {
-      vm.mr.divergedCommitsCount = null;
-      Vue.nextTick(() => {
-        expect(el.textContent).not.toContain('commits behind');
-        expect(el.querySelectorAll('.diverged-commits-count').length).toEqual(0);
-        done();
+    describe('without diverged commits', () => {
+      beforeEach(() => {
+        vm = mountComponent(Component, { mr: {
+          divergedCommitsCount: 0,
+          sourceBranch: 'mr-widget-refactor',
+          sourceBranchLink: '<a href="/foo/bar/mr-widget-refactor">mr-widget-refactor</a>',
+          sourceBranchRemoved: false,
+          targetBranchPath: 'foo/bar/commits-path',
+          targetBranchTreePath: 'foo/bar/tree/path',
+          targetBranch: 'master',
+          isOpen: true,
+          emailPatchesPath: '/mr/email-patches',
+          plainDiffPath: '/mr/plainDiffPath',
+        } });
+      });
+
+      it('does not render diverged commits info', () => {
+        expect(vm.$el.querySelector('.diverged-commits-count')).toEqual(null);
       });
     });
 
-    it('should disable check out branch button if source branch has been removed', (done) => {
-      vm.mr.sourceBranchRemoved = true;
+    describe('with diverged commits', () => {
+      beforeEach(() => {
+        vm = mountComponent(Component, { mr: {
+          divergedCommitsCount: 12,
+          sourceBranch: 'mr-widget-refactor',
+          sourceBranchLink: '<a href="/foo/bar/mr-widget-refactor">mr-widget-refactor</a>',
+          sourceBranchRemoved: false,
+          targetBranchPath: 'foo/bar/commits-path',
+          targetBranchTreePath: 'foo/bar/tree/path',
+          targetBranch: 'master',
+          isOpen: true,
+          emailPatchesPath: '/mr/email-patches',
+          plainDiffPath: '/mr/plainDiffPath',
+        } });
+      });
 
-      Vue.nextTick()
-        .then(() => {
-          expect(el.querySelector('a[href="#modal_merge_info"]').getAttribute('disabled')).toBe('disabled');
-          done();
-        })
-        .catch(done.fail);
+      it('renders diverged commits info', () => {
+        expect(vm.$el.querySelector('.diverged-commits-count').textContent.trim()).toEqual('(12 commits behind)');
+      });
     });
   });
 });
diff --git a/spec/javascripts/vue_mr_widget/components/mr_widget_merge_help_spec.js b/spec/javascripts/vue_mr_widget/components/mr_widget_merge_help_spec.js
index 4da4fc82c26..cc43639f576 100644
--- a/spec/javascripts/vue_mr_widget/components/mr_widget_merge_help_spec.js
+++ b/spec/javascripts/vue_mr_widget/components/mr_widget_merge_help_spec.js
@@ -1,51 +1,56 @@
 import Vue from 'vue';
-import mergeHelpComponent from '~/vue_merge_request_widget/components/mr_widget_merge_help';
-
-const props = {
-  missingBranch: 'this-is-not-the-branch-you-are-looking-for',
-};
-const text = `If the ${props.missingBranch} branch exists in your local repository`;
-
-const createComponent = () => {
-  const Component = Vue.extend(mergeHelpComponent);
-  return new Component({
-    el: document.createElement('div'),
-    propsData: props,
-  });
-};
+import mergeHelpComponent from '~/vue_merge_request_widget/components/mr_widget_merge_help.vue';
+import mountComponent from '../../helpers/vue_mount_component_helper';
 
 describe('MRWidgetMergeHelp', () => {
-  describe('props', () => {
-    it('should have props', () => {
-      const { missingBranch } = mergeHelpComponent.props;
-      const MissingBranchTypeClass = missingBranch.type;
-
-      expect(new MissingBranchTypeClass() instanceof String).toBeTruthy();
-      expect(missingBranch.required).toBeFalsy();
-      expect(missingBranch.default).toEqual('');
-    });
+  let vm;
+  let Component;
+
+  beforeEach(() => {
+    Component = Vue.extend(mergeHelpComponent);
   });
 
-  describe('template', () => {
-    let vm;
-    let el;
+  afterEach(() => {
+    vm.$destroy();
+  });
 
+  describe('with missing branch', () => {
     beforeEach(() => {
-      vm = createComponent();
-      el = vm.$el;
+      vm = mountComponent(Component, {
+        missingBranch: 'this-is-not-the-branch-you-are-looking-for',
+      });
     });
 
-    it('should have the correct elements', () => {
-      expect(el.classList.contains('mr-widget-help')).toBeTruthy();
-      expect(el.textContent).toContain(text);
+    it('renders missing branch information', () => {
+      expect(
+        vm.$el.textContent.trim().replace(/[\r\n]+/g, ' ').replace(/\s\s+/g, ' '),
+      ).toEqual(
+        'If the this-is-not-the-branch-you-are-looking-for branch exists in your local repository, you can merge this merge request manually using the command line',
+      );
     });
 
-    it('should not show missing branch name if missingBranch props is not provided', (done) => {
-      vm.missingBranch = null;
-      Vue.nextTick(() => {
-        expect(el.textContent).not.toContain(text);
-        done();
-      });
+    it('renders button to open help modal', () => {
+      expect(vm.$el.querySelector('.js-open-modal-help').getAttribute('data-target')).toEqual('#modal_merge_info');
+      expect(vm.$el.querySelector('.js-open-modal-help').getAttribute('data-toggle')).toEqual('modal');
+    });
+  });
+
+  describe('without missing branch', () => {
+    beforeEach(() => {
+      vm = mountComponent(Component);
+    });
+
+    it('renders information about how to merge manually', () => {
+      expect(
+        vm.$el.textContent.trim().replace(/[\r\n]+/g, ' ').replace(/\s\s+/g, ' '),
+      ).toEqual(
+        'You can merge this merge request manually using the command line',
+      );
+    });
+
+    it('renders element to open a modal', () => {
+      expect(vm.$el.querySelector('.js-open-modal-help').getAttribute('data-target')).toEqual('#modal_merge_info');
+      expect(vm.$el.querySelector('.js-open-modal-help').getAttribute('data-toggle')).toEqual('modal');
     });
   });
 });
diff --git a/spec/javascripts/vue_shared/components/confirmation_input_spec.js b/spec/javascripts/vue_shared/components/confirmation_input_spec.js
new file mode 100644
index 00000000000..a6a12614e77
--- /dev/null
+++ b/spec/javascripts/vue_shared/components/confirmation_input_spec.js
@@ -0,0 +1,63 @@
+import Vue from 'vue';
+import confirmationInput from '~/vue_shared/components/confirmation_input.vue';
+import mountComponent from '../../helpers/vue_mount_component_helper';
+
+describe('Confirmation input component', () => {
+  const Component = Vue.extend(confirmationInput);
+  const props = {
+    inputId: 'dummy-id',
+    confirmationKey: 'confirmation-key',
+    confirmationValue: 'confirmation-value',
+  };
+  let vm;
+
+  afterEach(() => {
+    vm.$destroy();
+  });
+
+  describe('props', () => {
+    beforeEach(() => {
+      vm = mountComponent(Component, props);
+    });
+
+    it('sets id of the input field to inputId', () => {
+      expect(vm.$refs.enteredValue.id).toBe(props.inputId);
+    });
+
+    it('sets name of the input field to confirmationKey', () => {
+      expect(vm.$refs.enteredValue.name).toBe(props.confirmationKey);
+    });
+  });
+
+  describe('computed', () => {
+    describe('inputLabel', () => {
+      it('escapes confirmationValue by default', () => {
+        vm = mountComponent(Component, { ...props, confirmationValue: 'n<e></e>ds escap"ng' });
+        expect(vm.inputLabel).toBe('Type <code>n&lt;e&gt;&lt;/e&gt;ds escap&quot;ng</code> to confirm:');
+      });
+
+      it('does not escape confirmationValue if escapeValue is false', () => {
+        vm = mountComponent(Component, { ...props, confirmationValue: 'n<e></e>ds escap"ng', shouldEscapeConfirmationValue: false });
+        expect(vm.inputLabel).toBe('Type <code>n<e></e>ds escap"ng</code> to confirm:');
+      });
+    });
+  });
+
+  describe('methods', () => {
+    describe('hasCorrectValue', () => {
+      beforeEach(() => {
+        vm = mountComponent(Component, props);
+      });
+
+      it('returns false if entered value is incorrect', () => {
+        vm.$refs.enteredValue.value = 'incorrect';
+        expect(vm.hasCorrectValue()).toBe(false);
+      });
+
+      it('returns true if entered value is correct', () => {
+        vm.$refs.enteredValue.value = props.confirmationValue;
+        expect(vm.hasCorrectValue()).toBe(true);
+      });
+    });
+  });
+});