Replacing vue-resource with axios in Markdown field

(cherry picked from commit 1dd7adc634e214208b0502f47116d6559dc471b0)

app/assets/javascripts/vue_shared/components/markdown/field.vue

@@ -9,6 +9,7 @@ import markdownHeader from './header.vue';
 import markdownToolbar from './toolbar.vue';
 import icon from '../icon.vue';
 import Suggestions from '~/vue_shared/components/markdown/suggestions.vue';
+import axios from '~/lib/utils/axios_utils';
 
 export default {
   components: {
@@ -167,10 +168,9 @@ export default {
       if (text) {
         this.markdownPreviewLoading = true;
         this.markdownPreview = __('Loading…');
-        this.$http
+        axios
           .post(this.markdownPreviewPath, { text })
-          .then(resp => resp.json())
-          .then(data => this.renderMarkdown(data))
+          .then(response => this.renderMarkdown(response.data))
           .catch(() => new Flash(__('Error loading markdown preview')));
       } else {
         this.renderMarkdown();

changelogs/unreleased/61385-replace-vue-resource.yml

+---
+title: Replaced vue resource to axios in the  Markdown field preview component
+merge_request: 32386
+author: Prakash Chokalingam @prakash_Chokalingam
+type: fixed

spec/javascripts/vue_shared/components/markdown/field_spec.js

 import $ from 'jquery';
+import '~/behaviors/markdown/render_gfm';
 import Vue from 'vue';
+import AxiosMockAdapter from 'axios-mock-adapter';
+import axios from '~/lib/utils/axios_utils';
 import fieldComponent from '~/vue_shared/components/markdown/field.vue';
+import { TEST_HOST } from 'spec/test_constants';
 
 function assertMarkdownTabs(isWrite, writeLink, previewLink, vm) {
   expect(writeLink.parentNode.classList.contains('active')).toEqual(isWrite);
@@ -9,9 +13,13 @@ function assertMarkdownTabs(isWrite, writeLink, previewLink, vm) {
 }
 
 describe('Markdown field component', () => {
+  const markdownPreviewPath = `${TEST_HOST}/preview`;
+  const markdownDocsPath = `${TEST_HOST}/docs`;
+  let axiosMock;
   let vm;
 
   beforeEach(done => {
+    axiosMock = new AxiosMockAdapter(axios);
     vm = new Vue({
       components: {
         fieldComponent,
@@ -23,8 +31,8 @@ describe('Markdown field component', () => {
       },
       template: `
         <field-component
-          markdown-preview-path="/preview"
-          markdown-docs-path="/docs"
+          markdown-preview-path="${markdownPreviewPath}"
+          markdown-docs-path="${markdownDocsPath}"
         >
           <textarea
             slot="textarea"
@@ -37,7 +45,13 @@ describe('Markdown field component', () => {
     Vue.nextTick(done);
   });
 
+  afterEach(() => {
+    axiosMock.restore();
+  });
+
   describe('mounted', () => {
+    const previewHTML = '<p>markdown preview</p>';
+
     it('renders textarea inside backdrop', () => {
       expect(vm.$el.querySelector('.zen-backdrop textarea')).not.toBeNull();
     });
@@ -47,20 +61,7 @@ describe('Markdown field component', () => {
       let writeLink;
 
       beforeEach(() => {
-        spyOn(Vue.http, 'post').and.callFake(
-          () =>
-            new Promise(resolve => {
-              setTimeout(() => {
-                resolve({
-                  json() {
-                    return {
-                      body: '<p>markdown preview</p>',
-                    };
-                  },
-                });
-              });
-            }),
-        );
+        axiosMock.onPost(markdownPreviewPath).replyOnce(200, { body: previewHTML });
 
         previewLink = vm.$el.querySelector('.nav-links .js-preview-link');
         writeLink = vm.$el.querySelector('.nav-links .js-write-link');
@@ -92,9 +93,7 @@ describe('Markdown field component', () => {
         previewLink.click();
 
         setTimeout(() => {
-          expect(vm.$el.querySelector('.md-preview-holder').innerHTML).toContain(
-            '<p>markdown preview</p>',
-          );
+          expect(vm.$el.querySelector('.md-preview-holder').innerHTML).toContain(previewHTML);
 
           done();
         });