Merge branch 'kp-replace-xmlhttprequest-with-axios' into 'master'

Replace `XMLHttpRequest` with `axios` to fetch Balsamiq mockups

See merge request gitlab-org/gitlab!17241

app/assets/javascripts/blob/balsamiq/balsamiq_viewer.js

 import sqljs from 'sql.js';
 import { template as _template } from 'underscore';
+import axios from '~/lib/utils/axios_utils';
+import { successCodes } from '~/lib/utils/http_status';
 
 const PREVIEW_TEMPLATE = _template(`
   <div class="card">
@@ -16,30 +18,25 @@ class BalsamiqViewer {
   }
 
   loadFile(endpoint) {
-    return new Promise((resolve, reject) => {
-      const xhr = new XMLHttpRequest();
-
-      xhr.open('GET', endpoint, true);
-      xhr.responseType = 'arraybuffer';
-      xhr.onload = loadEvent => this.fileLoaded(loadEvent, resolve, reject);
-      xhr.onerror = reject;
-
-      xhr.send();
+    return axios
+      .get(endpoint, {
+        responseType: 'arraybuffer',
+        validateStatus(status) {
+          return status !== successCodes.OK;
+        },
+      })
+      .then(({ data }) => {
+        this.renderFile(data);
+      })
+      .catch(e => {
+        throw new Error(e);
       });
   }
 
-  fileLoaded(loadEvent, resolve, reject) {
-    if (loadEvent.target.status !== 200) return reject();
-
-    this.renderFile(loadEvent);
-
-    return resolve();
-  }
-
-  renderFile(loadEvent) {
+  renderFile(fileBuffer) {
     const container = document.createElement('ul');
 
-    this.initDatabase(loadEvent.target.response);
+    this.initDatabase(fileBuffer);
 
     const previews = this.getPreviews();
     previews.forEach(preview => {

spec/javascripts/blob/balsamiq/balsamiq_viewer_spec.js

 import sqljs from 'sql.js';
+import axios from '~/lib/utils/axios_utils';
 import BalsamiqViewer from '~/blob/balsamiq/balsamiq_viewer';
 import ClassSpecHelper from '../../helpers/class_spec_helper';
 
 describe('BalsamiqViewer', () => {
+  const mockArrayBuffer = new ArrayBuffer(10);
   let balsamiqViewer;
   let viewer;
 
@@ -19,44 +21,65 @@ describe('BalsamiqViewer', () => {
   });
 
   describe('loadFile', () => {
-    let xhr;
-    let loadFile;
+    let bv;
     const endpoint = 'endpoint';
+    const requestSuccess = Promise.resolve({
+      data: mockArrayBuffer,
+      status: 200,
+    });
 
     beforeEach(() => {
-      xhr = jasmine.createSpyObj('xhr', ['open', 'send']);
+      viewer = {};
+      bv = new BalsamiqViewer(viewer);
+    });
 
-      balsamiqViewer = jasmine.createSpyObj('balsamiqViewer', ['renderFile']);
+    it('should call `axios.get` on `endpoint` param with responseType set to `arraybuffer', () => {
+      spyOn(axios, 'get').and.returnValue(requestSuccess);
+      spyOn(bv, 'renderFile').and.stub();
 
-      spyOn(window, 'XMLHttpRequest').and.returnValue(xhr);
+      bv.loadFile(endpoint);
 
-      loadFile = BalsamiqViewer.prototype.loadFile.call(balsamiqViewer, endpoint);
+      expect(axios.get).toHaveBeenCalledWith(
+        endpoint,
+        jasmine.objectContaining({
+          responseType: 'arraybuffer',
+        }),
+      );
     });
 
-    it('should call .open', () => {
-      expect(xhr.open).toHaveBeenCalledWith('GET', endpoint, true);
-    });
+    it('should call `renderFile` on request success', done => {
+      spyOn(axios, 'get').and.returnValue(requestSuccess);
+      spyOn(bv, 'renderFile').and.callFake(() => {});
 
-    it('should set .responseType', () => {
-      expect(xhr.responseType).toBe('arraybuffer');
+      bv.loadFile(endpoint)
+        .then(() => {
+          expect(bv.renderFile).toHaveBeenCalledWith(mockArrayBuffer);
+        })
+        .then(done)
+        .catch(done.fail);
     });
 
-    it('should call .send', () => {
-      expect(xhr.send).toHaveBeenCalled();
-    });
+    it('should not call `renderFile` on request failure', done => {
+      spyOn(axios, 'get').and.returnValue(Promise.reject());
+      spyOn(bv, 'renderFile');
 
-    it('should return a promise', () => {
-      expect(loadFile).toEqual(jasmine.any(Promise));
+      bv.loadFile(endpoint)
+        .then(() => {
+          done.fail('Expected loadFile to throw error!');
+        })
+        .catch(() => {
+          expect(bv.renderFile).not.toHaveBeenCalled();
+        })
+        .then(done)
+        .catch(done.fail);
     });
   });
 
   describe('renderFile', () => {
     let container;
-    let loadEvent;
     let previews;
 
     beforeEach(() => {
-      loadEvent = { target: { response: {} } };
       viewer = jasmine.createSpyObj('viewer', ['appendChild']);
       previews = [document.createElement('ul'), document.createElement('ul')];
 
@@ -73,11 +96,11 @@ describe('BalsamiqViewer', () => {
         container = containerElement;
       });
 
-      BalsamiqViewer.prototype.renderFile.call(balsamiqViewer, loadEvent);
+      BalsamiqViewer.prototype.renderFile.call(balsamiqViewer, mockArrayBuffer);
     });
 
     it('should call .initDatabase', () => {
-      expect(balsamiqViewer.initDatabase).toHaveBeenCalledWith(loadEvent.target.response);
+      expect(balsamiqViewer.initDatabase).toHaveBeenCalledWith(mockArrayBuffer);
     });
 
     it('should call .getPreviews', () => {