Merge branch '216381-gfm-rendering-snippet' into 'master'

Enable GFM for snippet's blob and desc rendering

See merge request gitlab-org/gitlab!31031

app/assets/javascripts/snippets/components/snippet_description_view.vue

+<script>
+import MarkdownFieldView from '~/vue_shared/components/markdown/field_view.vue';
+
+export default {
+  components: {
+    MarkdownFieldView,
+  },
+  props: {
+    description: {
+      type: String,
+      required: false,
+      default: '',
+    },
+  },
+};
+</script>
+<template>
+  <markdown-field-view class="snippet-description" data-qa-selector="snippet_description_field">
+    <div class="md js-snippet-description" v-html="description"></div>
+  </markdown-field-view>
+</template>

app/assets/javascripts/snippets/components/snippet_title.vue

 <script>
-import TimeAgoTooltip from '~/vue_shared/components/time_ago_tooltip.vue';
 import { GlSprintf } from '@gitlab/ui';
 
+import TimeAgoTooltip from '~/vue_shared/components/time_ago_tooltip.vue';
+import SnippetDescription from './snippet_description_view.vue';
+
 export default {
   components: {
     TimeAgoTooltip,
     GlSprintf,
+    SnippetDescription,
   },
   props: {
     snippet: {
@@ -20,13 +23,8 @@ export default {
     <h2 class="snippet-title prepend-top-0 mb-3" data-qa-selector="snippet_title">
       {{ snippet.title }}
     </h2>
-    <div
-      v-if="snippet.description"
-      class="description"
-      data-qa-selector="snippet_description_field"
-    >
-      <div class="md js-snippet-description" v-html="snippet.descriptionHtml"></div>
-    </div>
+
+    <snippet-description v-if="snippet.description" :description="snippet.descriptionHtml" />
 
     <small v-if="snippet.updatedAt !== snippet.createdAt" class="edited-text">
       <gl-sprintf :message="__('Edited %{timeago}')">

app/assets/javascripts/vue_shared/components/blob_viewers/rich_viewer.vue

 <script>
+import MarkdownFieldView from '~/vue_shared/components/markdown/field_view.vue';
 import ViewerMixin from './mixins';
 import { handleBlobRichViewer } from '~/blob/viewer';
 
 export default {
+  components: {
+    MarkdownFieldView,
+  },
   mixins: [ViewerMixin],
   mounted() {
     handleBlobRichViewer(this.$refs.content, this.type);
@@ -10,5 +14,5 @@ export default {
 };
 </script>
 <template>
-  <div ref="content" v-html="content"></div>
+  <markdown-field-view ref="content" v-html="content" />
 </template>

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

+<script>
+import $ from 'jquery';
+import '~/behaviors/markdown/render_gfm';
+
+export default {
+  mounted() {
+    this.renderGFM();
+  },
+  methods: {
+    renderGFM() {
+      $(this.$el).renderGFM();
+    },
+  },
+};
+</script>
+
+<template>
+  <div><slot></slot></div>
+</template>

qa/qa/page/dashboard/snippet/show.rb

@@ -5,8 +5,8 @@ module QA
     module Dashboard
       module Snippet
         class Show < Page::Base
-          view 'app/assets/javascripts/snippets/components/snippet_description_edit.vue' do
-            element :snippet_description_field, required: true
+          view 'app/assets/javascripts/snippets/components/snippet_description_view.vue' do
+            element :snippet_description_field
           end
 
           view 'app/assets/javascripts/snippets/components/snippet_title.vue' do

spec/frontend/snippets/components/__snapshots__/snippet_description_view_spec.js.snap

+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Snippet Description component matches the snapshot 1`] = `
+<markdown-field-view-stub
+  class="snippet-description"
+  data-qa-selector="snippet_description_field"
+>
+  <div
+    class="md js-snippet-description"
+  >
+    <h2>
+      The property of Thor
+    </h2>
+  </div>
+</markdown-field-view-stub>
+`;

spec/frontend/snippets/components/snippet_description_view_spec.js

+import SnippetDescription from '~/snippets/components/snippet_description_view.vue';
+import { shallowMount } from '@vue/test-utils';
+
+describe('Snippet Description component', () => {
+  let wrapper;
+  const description = '<h2>The property of Thor</h2>';
+
+  function createComponent() {
+    wrapper = shallowMount(SnippetDescription, {
+      propsData: {
+        description,
+      },
+    });
+  }
+
+  beforeEach(() => {
+    createComponent();
+  });
+
+  afterEach(() => {
+    wrapper.destroy();
+  });
+
+  it('matches the snapshot', () => {
+    expect(wrapper.element).toMatchSnapshot();
+  });
+});

spec/frontend/snippets/components/snippet_title_spec.js

 import SnippetTitle from '~/snippets/components/snippet_title.vue';
+import SnippetDescription from '~/snippets/components/snippet_description_view.vue';
 import { GlSprintf } from '@gitlab/ui';
 import { shallowMount } from '@vue/test-utils';
 
@@ -36,8 +37,9 @@ describe('Snippet header component', () => {
 
   it('renders snippets title and description', () => {
     createComponent();
+
     expect(wrapper.text().trim()).toContain(title);
-    expect(wrapper.find('.js-snippet-description').element.innerHTML).toBe(descriptionHtml);
+    expect(wrapper.find(SnippetDescription).props('description')).toBe(descriptionHtml);
   });
 
   it('does not render recent changes time stamp if there were no updates', () => {

spec/frontend/vue_shared/components/blob_viewers/rich_viewer_spec.js

 import { shallowMount } from '@vue/test-utils';
 import RichViewer from '~/vue_shared/components/blob_viewers/rich_viewer.vue';
+import MarkdownFieldView from '~/vue_shared/components/markdown/field_view.vue';
 import { handleBlobRichViewer } from '~/blob/viewer';
 
 jest.mock('~/blob/viewer');
@@ -33,4 +34,8 @@ describe('Blob Rich Viewer component', () => {
   it('queries for advanced viewer', () => {
     expect(handleBlobRichViewer).toHaveBeenCalledWith(expect.anything(), defaultType);
   });
+
+  it('is using Markdown View Field', () => {
+    expect(wrapper.contains(MarkdownFieldView)).toBe(true);
+  });
 });

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

+import $ from 'jquery';
+import { shallowMount } from '@vue/test-utils';
+
+import MarkdownFieldView from '~/vue_shared/components/markdown/field_view.vue';
+
+describe('Markdown Field View component', () => {
+  let renderGFMSpy;
+  let wrapper;
+
+  function createComponent() {
+    wrapper = shallowMount(MarkdownFieldView);
+  }
+
+  beforeEach(() => {
+    renderGFMSpy = jest.spyOn($.fn, 'renderGFM');
+    createComponent();
+  });
+
+  afterEach(() => {
+    wrapper.destroy();
+  });
+
+  it('processes rendering with GFM', () => {
+    expect(renderGFMSpy).toHaveBeenCalledTimes(1);
+  });
+});