diff options
author | Mike Greiling <mike@pixelcog.com> | 2019-09-11 16:45:41 +0000 |
---|---|---|
committer | Mike Greiling <mike@pixelcog.com> | 2019-09-11 16:45:41 +0000 |
commit | c256adb74e9933ca7e05febadc198b7ac6f96bed (patch) | |
tree | f61c7f2eeb24a0f662d87a1ca77078dc9645dd3c | |
parent | 1a5c262a742c0a077036c6cff2b6078fae5093c9 (diff) | |
parent | d956f68a392e2fe0b3a2b162382ad13bdf37b347 (diff) | |
download | gitlab-ce-c256adb74e9933ca7e05febadc198b7ac6f96bed.tar.gz |
Merge branch 'winh-vue-resource-markdown-field' into 'master'
Replacing vue-resource with axios in Markdown field
Closes #61385
See merge request gitlab-org/gitlab-ce!32742
3 files changed, 26 insertions, 22 deletions
diff --git a/app/assets/javascripts/vue_shared/components/markdown/field.vue b/app/assets/javascripts/vue_shared/components/markdown/field.vue index b520d302407..a32ed529342 100644 --- a/app/assets/javascripts/vue_shared/components/markdown/field.vue +++ b/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(); diff --git a/changelogs/unreleased/61385-replace-vue-resource.yml b/changelogs/unreleased/61385-replace-vue-resource.yml new file mode 100644 index 00000000000..787581b3f81 --- /dev/null +++ b/changelogs/unreleased/61385-replace-vue-resource.yml @@ -0,0 +1,5 @@ +--- +title: Replaced vue resource to axios in the Markdown field preview component +merge_request: 32742 +author: Prakash Chokalingam @prakash_Chokalingam +type: fixed diff --git a/spec/javascripts/vue_shared/components/markdown/field_spec.js b/spec/javascripts/vue_shared/components/markdown/field_spec.js index 02d73e1849a..da984175f9f 100644 --- a/spec/javascripts/vue_shared/components/markdown/field_spec.js +++ b/spec/javascripts/vue_shared/components/markdown/field_spec.js @@ -1,6 +1,10 @@ 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(); }); |