Enable GFM for snippet's blob and desc rendering

Both Description and Blob content fields in Snippet Vue view can have
special markup (like mermaid chart, KaTeX formulas, etc.) that we
should process. This has been lost during refactoring to Vue.

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

+<script>
+import MarkdownFieldMixin from '~/vue_shared/mixins/markdown_field_mixin';
+
+export default {
+  mixins: [MarkdownFieldMixin],
+  props: {
+    description: {
+      type: String,
+      required: false,
+      default: '',
+    },
+  },
+};
+</script>
+<template>
+  <div class="snippet-description" data-qa-selector="snippet_description_field">
+    <div class="md js-snippet-description" v-html="description"></div>
+  </div>
+</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 MarkdownFieldMixin from '~/vue_shared/mixins/markdown_field_mixin';
 import ViewerMixin from './mixins';
 import { handleBlobRichViewer } from '~/blob/viewer';
 
 export default {
-  mixins: [ViewerMixin],
+  mixins: [ViewerMixin, MarkdownFieldMixin],
   mounted() {
     handleBlobRichViewer(this.$refs.content, this.type);
   },

app/assets/javascripts/vue_shared/mixins/markdown_field_mixin.js

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

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`] = `
+<div
+  class="snippet-description"
+  data-qa-selector="snippet_description_field"
+>
+  <div
+    class="md js-snippet-description"
+  >
+    <h2>
+      The property of Thor
+    </h2>
+  </div>
+</div>
+`;

spec/frontend/snippets/components/snippet_description_view_spec.js

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

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 { handleBlobRichViewer } from '~/blob/viewer';
+import $ from 'jquery';
 
 jest.mock('~/blob/viewer');
 
@@ -9,6 +10,8 @@ describe('Blob Rich Viewer component', () => {
   const content = '<h1 id="markdown">Foo Bar</h1>';
   const defaultType = 'markdown';
 
+  let renderGFMSpy;
+
   function createComponent(type = defaultType) {
     wrapper = shallowMount(RichViewer, {
       propsData: {
@@ -19,6 +22,7 @@ describe('Blob Rich Viewer component', () => {
   }
 
   beforeEach(() => {
+    renderGFMSpy = jest.spyOn($.fn, 'renderGFM');
     createComponent();
   });
 
@@ -33,4 +37,8 @@ describe('Blob Rich Viewer component', () => {
   it('queries for advanced viewer', () => {
     expect(handleBlobRichViewer).toHaveBeenCalledWith(expect.anything(), defaultType);
   });
+
+  it('processes rendering with GFM', () => {
+    expect(renderGFMSpy).toHaveBeenCalled();
+  });
 });