Converted mini_pipeline_graph_dropdown.js to axios

app/assets/javascripts/mini_pipeline_graph_dropdown.js

 /* eslint-disable no-new */
-import Flash from './flash';
+import flash from './flash';
+import axios from './lib/utils/axios_utils';
 
 /**
  * In each pipelines table we have a mini pipeline graph for each pipeline.
@@ -78,26 +79,21 @@ export default class MiniPipelineGraph {
     const button = e.relatedTarget;
     const endpoint = button.dataset.stageEndpoint;
 
-    return $.ajax({
-      dataType: 'json',
-      type: 'GET',
-      url: endpoint,
-      beforeSend: () => {
     this.renderBuildsList(button, '');
     this.toggleLoading(button);
-      },
-      success: (data) => {
+
+    axios.get(endpoint)
+      .then(({ data }) => {
         this.toggleLoading(button);
         this.renderBuildsList(button, data.html);
         this.stopDropdownClickPropagation();
-      },
-      error: () => {
+      })
+      .catch(() => {
         this.toggleLoading(button);
         if ($(button).parent().hasClass('open')) {
           $(button).dropdown('toggle');
         }
-        new Flash('An error occurred while fetching the builds.', 'alert');
-      },
+        flash('An error occurred while fetching the builds.', 'alert');
       });
   }
 

spec/javascripts/mini_pipeline_graph_dropdown_spec.js

 /* 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,17 +53,20 @@ 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({
+    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>
@@ -60,19 +75,24 @@ describe('Mini Pipeline Graph Dropdown', () => {
           <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();
 
+      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());
+      mock.onGet('foobar').networkError();
 
       new MiniPipelineGraph({ container: '.js-builds-dropdown-tests' }).bindEvents();
 
@@ -81,6 +101,7 @@ describe('Mini Pipeline Graph Dropdown', () => {
       setTimeout(() => {
         expect($('.js-builds-dropdown-tests .dropdown').hasClass('open')).toEqual(false);
         done();
-    }, 0);
+      });
+    });
   });
 });