Merge branch '13020-extract-api-calls-to-use-axios' into 'master'

Refactor Jira connect API calls to use axios

See merge request gitlab-org/gitlab!50746

app/assets/javascripts/jira_connect/api.js

+import axios from 'axios';
+
+const getJwt = async () => {
+  return AP.context.getToken();
+};
+
+export const addSubscription = async (addPath, namespace) => {
+  const jwt = await getJwt();
+
+  return axios.post(addPath, {
+    jwt,
+    namespace_path: namespace,
+  });
+};
+
+export const removeSubscription = async (removePath) => {
+  const jwt = await getJwt();
+
+  return axios.delete(removePath, {
+    params: {
+      jwt,
+    },
+  });
+};

app/assets/javascripts/jira_connect/index.js

 import Vue from 'vue';
 import $ from 'jquery';
 import App from './components/app.vue';
+import { addSubscription, removeSubscription } from '~/jira_connect/api';
 
 const store = {
   state: {
@@ -35,38 +36,25 @@ const initJiraFormHandlers = () => {
   });
 
   $('#add-subscription-form').on('submit', function onAddSubscriptionForm(e) {
-    const actionUrl = $(this).attr('action');
+    const addPath = $(this).attr('action');
+    const namespace = $('#namespace-input').val();
+
     e.preventDefault();
 
-    AP.context.getToken((token) => {
-      // eslint-disable-next-line no-jquery/no-ajax
-      $.post(actionUrl, {
-        jwt: token,
-        namespace_path: $('#namespace-input').val(),
-        format: 'json',
-      })
-        .done(reqComplete)
-        .fail((err) => reqFailed(err, 'Failed to add namespace. Please try again.'));
-    });
+    addSubscription(addPath, namespace)
+      .then(reqComplete)
+      .catch((err) => reqFailed(err.response.data, 'Failed to add namespace. Please try again.'));
   });
 
   $('.remove-subscription').on('click', function onRemoveSubscriptionClick(e) {
-    const href = $(this).attr('href');
+    const removePath = $(this).attr('href');
     e.preventDefault();
 
-    AP.context.getToken((token) => {
-      // eslint-disable-next-line no-jquery/no-ajax
-      $.ajax({
-        url: href,
-        method: 'DELETE',
-        data: {
-          jwt: token,
-          format: 'json',
-        },
-      })
-        .done(reqComplete)
-        .fail((err) => reqFailed(err, 'Failed to remove namespace. Please try again.'));
-    });
+    removeSubscription(removePath)
+      .then(reqComplete)
+      .catch((err) =>
+        reqFailed(err.response.data, 'Failed to remove namespace. Please try again.'),
+      );
   });
 };
 

spec/frontend/jira_connect/api_spec.js

+import MockAdapter from 'axios-mock-adapter';
+import axios from '~/lib/utils/axios_utils';
+import httpStatus from '~/lib/utils/http_status';
+
+import { addSubscription, removeSubscription } from '~/jira_connect/api';
+
+describe('JiraConnect API', () => {
+  let mock;
+  let response;
+
+  const mockAddPath = 'addPath';
+  const mockRemovePath = 'removePath';
+  const mockNamespace = 'namespace';
+  const mockJwt = 'jwt';
+  const mockResponse = { success: true };
+
+  const tokenSpy = jest.fn().mockReturnValue(mockJwt);
+
+  window.AP = {
+    context: {
+      getToken: tokenSpy,
+    },
+  };
+
+  beforeEach(() => {
+    mock = new MockAdapter(axios);
+  });
+
+  afterEach(() => {
+    mock.restore();
+    response = null;
+  });
+
+  describe('addSubscription', () => {
+    const makeRequest = () => addSubscription(mockAddPath, mockNamespace);
+
+    it('returns success response', async () => {
+      jest.spyOn(axios, 'post');
+      mock
+        .onPost(mockAddPath, {
+          jwt: mockJwt,
+          namespace_path: mockNamespace,
+        })
+        .replyOnce(httpStatus.OK, mockResponse);
+
+      response = await makeRequest();
+
+      expect(tokenSpy).toHaveBeenCalled();
+      expect(axios.post).toHaveBeenCalledWith(mockAddPath, {
+        jwt: mockJwt,
+        namespace_path: mockNamespace,
+      });
+      expect(response.data).toEqual(mockResponse);
+    });
+  });
+
+  describe('removeSubscription', () => {
+    const makeRequest = () => removeSubscription(mockRemovePath);
+
+    it('returns success response', async () => {
+      jest.spyOn(axios, 'delete');
+      mock.onDelete(mockRemovePath).replyOnce(httpStatus.OK, mockResponse);
+
+      response = await makeRequest();
+
+      expect(tokenSpy).toHaveBeenCalled();
+      expect(axios.delete).toHaveBeenCalledWith(mockRemovePath, {
+        params: {
+          jwt: mockJwt,
+        },
+      });
+      expect(response.data).toEqual(mockResponse);
+    });
+  });
+});