Fixes markdown preview not working on comment templates

#410197

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

@@ -344,7 +344,7 @@ export default {
       }
 
       this.markdownPreviewLoading = false;
-      this.markdownPreview = data.body || __('Nothing to preview.');
+      this.markdownPreview = data.body || data.html || __('Nothing to preview.');
 
       this.$nextTick()
         .then(() => {

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

@@ -165,75 +165,83 @@ describe('Markdown field component', () => {
     });
 
     describe('markdown preview', () => {
-      beforeEach(() => {
-        axiosMock.onPost(markdownPreviewPath).reply(HTTP_STATUS_OK, { body: previewHTML });
-      });
-
-      it('sets preview toggle as active', async () => {
-        previewToggle = getPreviewToggle();
+      describe.each`
+        data
+        ${{ body: previewHTML }}
+        ${{ html: previewHTML }}
+      `('when api returns $data', ({ data }) => {
+        beforeEach(() => {
+          axiosMock.onPost(markdownPreviewPath).reply(HTTP_STATUS_OK, data);
+        });
 
-        expect(previewToggle.text()).toBe('Preview');
+        it('sets preview toggle as active', async () => {
+          previewToggle = getPreviewToggle();
 
-        previewToggle.vm.$emit('click', true);
+          expect(previewToggle.text()).toBe('Preview');
 
-        await nextTick();
-        expect(previewToggle.text()).toBe('Continue editing');
-      });
+          previewToggle.vm.$emit('click', true);
 
-      it('shows preview loading text', async () => {
-        previewToggle = getPreviewToggle();
-        previewToggle.vm.$emit('click', true);
+          await nextTick();
+          expect(previewToggle.text()).toBe('Continue editing');
+        });
 
-        await nextTick();
-        expect(subject.find('.md-preview-holder').element.textContent.trim()).toContain('Loading…');
-      });
+        it('shows preview loading text', async () => {
+          previewToggle = getPreviewToggle();
+          previewToggle.vm.$emit('click', true);
 
-      it('renders markdown preview and GFM', async () => {
-        previewToggle = getPreviewToggle();
+          await nextTick();
+          expect(subject.find('.md-preview-holder').element.textContent.trim()).toContain(
+            'Loading…',
+          );
+        });
 
-        previewToggle.vm.$emit('click', true);
+        it('renders markdown preview and GFM', async () => {
+          previewToggle = getPreviewToggle();
 
-        await axios.waitFor(markdownPreviewPath);
-        expect(subject.find('.md-preview-holder').element.innerHTML).toContain(previewHTML);
-        expect(renderGFM).toHaveBeenCalled();
-      });
+          previewToggle.vm.$emit('click', true);
 
-      it('calls video.pause() on comment input when isSubmitting is changed to true', async () => {
-        previewToggle = getPreviewToggle();
-        previewToggle.vm.$emit('click', true);
+          await axios.waitFor(markdownPreviewPath);
+          expect(subject.find('.md-preview-holder').element.innerHTML).toContain(previewHTML);
+          expect(renderGFM).toHaveBeenCalled();
+        });
 
-        await axios.waitFor(markdownPreviewPath);
-        const video = getVideo();
-        const callPause = jest.spyOn(video.element, 'pause').mockImplementation(() => true);
+        it('calls video.pause() on comment input when isSubmitting is changed to true', async () => {
+          previewToggle = getPreviewToggle();
+          previewToggle.vm.$emit('click', true);
 
-        subject.setProps({ isSubmitting: true });
+          await axios.waitFor(markdownPreviewPath);
+          const video = getVideo();
+          const callPause = jest.spyOn(video.element, 'pause').mockImplementation(() => true);
 
-        await nextTick();
-        expect(callPause).toHaveBeenCalled();
-      });
+          subject.setProps({ isSubmitting: true });
 
-      it('switches between preview/write on toggle', async () => {
-        previewToggle = getPreviewToggle();
+          await nextTick();
+          expect(callPause).toHaveBeenCalled();
+        });
 
-        previewToggle.vm.$emit('click', true);
-        await nextTick();
-        expect(subject.find('.md-preview-holder').element.style.display).toBe(''); // visible
+        it('switches between preview/write on toggle', async () => {
+          previewToggle = getPreviewToggle();
 
-        previewToggle.vm.$emit('click', false);
-        await nextTick();
-        expect(subject.find('.md-preview-holder').element.style.display).toBe('none');
-      });
+          previewToggle.vm.$emit('click', true);
+          await nextTick();
+          expect(subject.find('.md-preview-holder').element.style.display).toBe(''); // visible
 
-      it('passes correct props to MarkdownHeader and MarkdownToolbar', () => {
-        expect(findMarkdownToolbar().props()).toEqual({
-          canAttachFile: true,
-          markdownDocsPath,
-          showCommentToolBar: true,
-          showContentEditorSwitcher: false,
+          previewToggle.vm.$emit('click', false);
+          await nextTick();
+          expect(subject.find('.md-preview-holder').element.style.display).toBe('none');
         });
 
-        expect(findMarkdownHeader().props()).toMatchObject({
-          supportsQuickActions: true,
+        it('passes correct props to MarkdownHeader and MarkdownToolbar', () => {
+          expect(findMarkdownToolbar().props()).toEqual({
+            canAttachFile: true,
+            markdownDocsPath,
+            showCommentToolBar: true,
+            showContentEditorSwitcher: false,
+          });
+
+          expect(findMarkdownHeader().props()).toMatchObject({
+            supportsQuickActions: true,
+          });
         });
       });
     });