Merge branch 'axios-importer-get' into 'master'

Replace $.get with axios in importerStatus

See merge request gitlab-org/gitlab-ce!17122

app/assets/javascripts/importer_status.js

@@ -59,29 +59,36 @@ class ImporterStatus {
     .catch(() => flash(__('An error occurred while importing project')));
   }
 
-  setAutoUpdate() {
-    return setInterval(() => $.get(this.jobsUrl, data => $.each(data, (i, job) => {
-      const jobItem = $(`#project_${job.id}`);
-      const statusField = jobItem.find('.job-status');
+  autoUpdate() {
+    return axios.get(this.jobsUrl)
+      .then(({ data = [] }) => {
+        data.forEach((job) => {
+          const jobItem = $(`#project_${job.id}`);
+          const statusField = jobItem.find('.job-status');
+
+          const spinner = '<i class="fa fa-spinner fa-spin"></i>';
 
-      const spinner = '<i class="fa fa-spinner fa-spin"></i>';
+          switch (job.import_status) {
+            case 'finished':
+              jobItem.removeClass('active').addClass('success');
+              statusField.html('<span><i class="fa fa-check"></i> done</span>');
+              break;
+            case 'scheduled':
+              statusField.html(`${spinner} scheduled`);
+              break;
+            case 'started':
+              statusField.html(`${spinner} started`);
+              break;
+            default:
+              statusField.html(job.import_status);
+              break;
+          }
+        });
+      });
+  }
 
-      switch (job.import_status) {
-        case 'finished':
-          jobItem.removeClass('active').addClass('success');
-          statusField.html('<span><i class="fa fa-check"></i> done</span>');
-          break;
-        case 'scheduled':
-          statusField.html(`${spinner} scheduled`);
-          break;
-        case 'started':
-          statusField.html(`${spinner} started`);
-          break;
-        default:
-          statusField.html(job.import_status);
-          break;
-      }
-    })), 4000);
+  setAutoUpdate() {
+    setInterval(this.autoUpdate.bind(this), 4000);
   }
 }
 

spec/javascripts/importer_status_spec.js

@@ -3,9 +3,18 @@ import axios from '~/lib/utils/axios_utils';
 import MockAdapter from 'axios-mock-adapter';
 
 describe('Importer Status', () => {
+  let instance;
+  let mock;
+
+  beforeEach(() => {
+    mock = new MockAdapter(axios);
+  });
+
+  afterEach(() => {
+    mock.restore();
+  });
+
   describe('addToImport', () => {
-    let instance;
-    let mock;
     const importUrl = '/import_url';
 
     beforeEach(() => {
@@ -21,11 +30,6 @@ describe('Importer Status', () => {
       spyOn(ImporterStatus.prototype, 'initStatusPage').and.callFake(() => {});
       spyOn(ImporterStatus.prototype, 'setAutoUpdate').and.callFake(() => {});
       instance = new ImporterStatus('', importUrl);
-      mock = new MockAdapter(axios);
-    });
-
-    afterEach(() => {
-      mock.restore();
     });
 
     it('sets table row to active after post request', (done) => {
@@ -44,4 +48,60 @@ describe('Importer Status', () => {
       .catch(done.fail);
     });
   });
+
+  describe('autoUpdate', () => {
+    const jobsUrl = '/jobs_url';
+
+    beforeEach(() => {
+      const div = document.createElement('div');
+      div.innerHTML = `
+        <div id="project_1">
+          <div class="job-status">
+          </div>
+        </div>
+      `;
+
+      document.body.appendChild(div);
+
+      spyOn(ImporterStatus.prototype, 'initStatusPage').and.callFake(() => {});
+      spyOn(ImporterStatus.prototype, 'setAutoUpdate').and.callFake(() => {});
+      instance = new ImporterStatus(jobsUrl);
+    });
+
+    function setupMock(importStatus) {
+      mock.onGet(jobsUrl).reply(200, [{
+        id: 1,
+        import_status: importStatus,
+      }]);
+    }
+
+    function expectJobStatus(done, status) {
+      instance.autoUpdate()
+        .then(() => {
+          expect(document.querySelector('#project_1').innerText.trim()).toEqual(status);
+          done();
+        })
+        .catch(done.fail);
+    }
+
+    it('sets the job status to done', (done) => {
+      setupMock('finished');
+      expectJobStatus(done, 'done');
+    });
+
+    it('sets the job status to scheduled', (done) => {
+      setupMock('scheduled');
+      expectJobStatus(done, 'scheduled');
+    });
+
+    it('sets the job status to started', (done) => {
+      setupMock('started');
+      expectJobStatus(done, 'started');
+    });
+
+    it('sets the job status to custom status', (done) => {
+      setupMock('custom status');
+      expectJobStatus(done, 'custom status');
+    });
+  });
 });