converted blob viewer to axios

app/assets/javascripts/blob/viewer/index.js

@@ -1,5 +1,6 @@
 import Flash from '../../flash';
 import { handleLocationHash } from '../../lib/utils/common_utils';
+import axios from '../../lib/utils/axios_utils';
 
 export default class BlobViewer {
   constructor() {
@@ -127,25 +128,18 @@ export default class BlobViewer {
     const viewer = viewerParam;
     const url = viewer.getAttribute('data-url');
 
-    return new Promise((resolve, reject) => {
-      if (!url || viewer.getAttribute('data-loaded') || viewer.getAttribute('data-loading')) {
-        resolve(viewer);
-        return;
-      }
+    if (!url || viewer.getAttribute('data-loaded') || viewer.getAttribute('data-loading')) {
+      return Promise.resolve(viewer);
+    }
 
-      viewer.setAttribute('data-loading', 'true');
+    viewer.setAttribute('data-loading', 'true');
 
-      $.ajax({
-        url,
-        dataType: 'JSON',
-      })
-      .fail(reject)
-      .done((data) => {
+    return axios.get(url)
+      .then(({ data }) => {
         viewer.innerHTML = data.html;
         viewer.setAttribute('data-loaded', 'true');
 
-        resolve(viewer);
+        return viewer;
       });
-    });
   }
 }

spec/javascripts/blob/viewer/index_spec.js

@@ -1,28 +1,35 @@
 /* eslint-disable no-new */
+import MockAdapter from 'axios-mock-adapter';
 import BlobViewer from '~/blob/viewer/index';
+import axios from '~/lib/utils/axios_utils';
 
 describe('Blob viewer', () => {
   let blob;
+  let mock;
+
   preloadFixtures('snippets/show.html.raw');
 
   beforeEach(() => {
+    mock = new MockAdapter(axios);
+
     loadFixtures('snippets/show.html.raw');
     $('#modal-upload-blob').remove();
 
     blob = new BlobViewer();
 
-    spyOn($, 'ajax').and.callFake(() => {
-      const d = $.Deferred();
-
-      d.resolve({
-        html: '<div>testing</div>',
-      });
-
-      return d.promise();
+    mock.onGet('http://test.host/snippets/1.json?viewer=rich').reply(200, {
+      html: '<div>testing</div>',
     });
+
+    mock.onGet('http://test.host/snippets/1.json?viewer=simple').reply(200, {
+      html: '<div>testing</div>',
+    });
+
+    spyOn(axios, 'get').and.callThrough();
   });
 
   afterEach(() => {
+    mock.restore();
     location.hash = '';
   });
 
@@ -30,7 +37,6 @@ describe('Blob viewer', () => {
     document.querySelector('.js-blob-viewer-switch-btn[data-viewer="simple"]').click();
 
     setTimeout(() => {
-      expect($.ajax).toHaveBeenCalled();
       expect(
         document.querySelector('.js-blob-viewer-switch-btn[data-viewer="simple"]')
           .classList.contains('hidden'),
@@ -46,7 +52,6 @@ describe('Blob viewer', () => {
     new BlobViewer();
 
     setTimeout(() => {
-      expect($.ajax).toHaveBeenCalled();
       expect(
         document.querySelector('.js-blob-viewer-switch-btn[data-viewer="simple"]')
           .classList.contains('hidden'),
@@ -64,12 +69,8 @@ describe('Blob viewer', () => {
     });
 
     asyncClick()
+      .then(() => asyncClick())
       .then(() => {
-        expect($.ajax).toHaveBeenCalled();
-        return asyncClick();
-      })
-      .then(() => {
-        expect($.ajax.calls.count()).toBe(1);
         expect(
           document.querySelector('.blob-viewer[data-type="simple"]').getAttribute('data-loaded'),
         ).toBe('true');
@@ -122,7 +123,6 @@ describe('Blob viewer', () => {
       document.querySelector('.js-blob-viewer-switch-btn[data-viewer="simple"]').click();
 
       setTimeout(() => {
-        expect($.ajax).toHaveBeenCalled();
         expect(
           copyButton.classList.contains('disabled'),
         ).toBeFalsy();
@@ -135,8 +135,6 @@ describe('Blob viewer', () => {
       document.querySelector('.js-blob-viewer-switch-btn[data-viewer="simple"]').click();
 
       setTimeout(() => {
-        expect($.ajax).toHaveBeenCalled();
-
         expect(
           copyButton.getAttribute('data-original-title'),
         ).toBe('Copy source to clipboard');
@@ -171,14 +169,14 @@ describe('Blob viewer', () => {
     it('sends AJAX request when switching to simple view', () => {
       blob.switchToViewer('simple');
 
-      expect($.ajax).toHaveBeenCalled();
+      expect(axios.get).toHaveBeenCalled();
     });
 
     it('does not send AJAX request when switching to rich view', () => {
       blob.switchToViewer('simple');
       blob.switchToViewer('rich');
 
-      expect($.ajax.calls.count()).toBe(1);
+      expect(axios.get.calls.count()).toBe(1);
     });
   });
 });