changed commits.js to axios

app/assets/javascripts/commits.js

@@ -5,6 +5,7 @@
 import { pluralize } from './lib/utils/text_utility';
 import { localTimeAgo } from './lib/utils/datetime_utility';
 import Pager from './pager';
+import axios from './lib/utils/axios_utils';
 
 export default (function () {
   const CommitsList = {};
@@ -43,29 +44,30 @@ export default (function () {
   CommitsList.filterResults = function () {
     const form = $('.commits-search-form');
     const search = CommitsList.searchField.val();
-    if (search === CommitsList.lastSearch) return;
+    if (search === CommitsList.lastSearch) return Promise.resolve();
     const commitsUrl = form.attr('action') + '?' + form.serialize();
     CommitsList.content.fadeTo('fast', 0.5);
-    return $.ajax({
-      type: 'GET',
-      url: form.attr('action'),
-      data: form.serialize(),
-      complete: function () {
-        return CommitsList.content.fadeTo('fast', 1.0);
-      },
-      success: function (data) {
+    const params = form.serializeArray().reduce((acc, obj) => Object.assign(acc, {
+      [obj.name]: obj.value,
+    }), {});
+
+    return axios.get(form.attr('action'), {
+      params,
+    })
+      .then(({ data }) => {
         CommitsList.lastSearch = search;
         CommitsList.content.html(data.html);
-        return history.replaceState({
-          page: commitsUrl,
+        CommitsList.content.fadeTo('fast', 1.0);
+
         // Change url so if user reload a page - search results are saved
+        history.replaceState({
+          page: commitsUrl,
         }, document.title, commitsUrl);
-      },
-      error: function () {
+      })
+      .catch(() => {
+        CommitsList.content.fadeTo('fast', 1.0);
         CommitsList.lastSearch = null;
-      },
-      dataType: 'json',
-    });
+      });
   };
 
   // Prepare loaded data.

spec/javascripts/commits_spec.js

 import 'vendor/jquery.endless-scroll';
+import MockAdapter from 'axios-mock-adapter';
+import axios from '~/lib/utils/axios_utils';
 import CommitsList from '~/commits';
 
 describe('Commits List', () => {
@@ -43,30 +45,47 @@ describe('Commits List', () => {
 
   describe('on entering input', () => {
     let ajaxSpy;
+    let mock;
 
     beforeEach(() => {
       CommitsList.init(25);
       CommitsList.searchField.val('');
 
       spyOn(history, 'replaceState').and.stub();
-      ajaxSpy = spyOn(jQuery, 'ajax').and.callFake((req) => {
-        req.success({
-          data: '<li>Result</li>',
-        });
+      mock = new MockAdapter(axios);
+
+      mock.onGet('/h5bp/html5-boilerplate/commits/master').reply(200, {
+        html: '<li>Result</li>',
       });
+
+      ajaxSpy = spyOn(axios, 'get').and.callThrough();
+    });
+
+    afterEach(() => {
+      mock.restore();
     });
 
-    it('should save the last search string', () => {
+    it('should save the last search string', (done) => {
       CommitsList.searchField.val('GitLab');
-      CommitsList.filterResults();
-      expect(ajaxSpy).toHaveBeenCalled();
-      expect(CommitsList.lastSearch).toEqual('GitLab');
+      CommitsList.filterResults()
+        .then(() => {
+          expect(ajaxSpy).toHaveBeenCalled();
+          expect(CommitsList.lastSearch).toEqual('GitLab');
+
+          done();
+        })
+        .catch(done.fail);
     });
 
-    it('should not make ajax call if the input does not change', () => {
-      CommitsList.filterResults();
-      expect(ajaxSpy).not.toHaveBeenCalled();
-      expect(CommitsList.lastSearch).toEqual('');
+    it('should not make ajax call if the input does not change', (done) => {
+      CommitsList.filterResults()
+        .then(() => {
+          expect(ajaxSpy).not.toHaveBeenCalled();
+          expect(CommitsList.lastSearch).toEqual('');
+
+          done();
+        })
+        .catch(done.fail);
     });
   });
 });