Converting mixin to a component

As siggested by maintainer, converted mixin into a component to avoid
technical debt

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

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

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

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

app/assets/javascripts/vue_shared/mixins/markdown_field_mixin.js → app/assets/javascripts/vue_shared/components/markdown/field_view.vue

+<script>
 import $ from 'jquery';
 import '~/behaviors/markdown/render_gfm';
 
@@ -11,3 +12,8 @@ export default {
     },
   },
 };
+</script>
+
+<template>
+  <div><slot></slot></div>
+</template>

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
+<markdown-field-view-stub
   class="snippet-description"
   data-qa-selector="snippet_description_field"
 >
@@ -12,5 +12,5 @@ exports[`Snippet Description component matches the snapshot 1`] = `
       The property of Thor
     </h2>
   </div>
-</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';
-import $ from 'jquery';
 
 describe('Snippet Description component', () => {
   let wrapper;
   const description = '<h2>The property of Thor</h2>';
-  let renderGFMSpy;
 
   function createComponent() {
     wrapper = shallowMount(SnippetDescription, {
@@ -16,7 +14,6 @@ describe('Snippet Description component', () => {
   }
 
   beforeEach(() => {
-    renderGFMSpy = jest.spyOn($.fn, 'renderGFM');
     createComponent();
   });
 
@@ -27,8 +24,4 @@ describe('Snippet Description component', () => {
   it('matches the snapshot', () => {
     expect(wrapper.element).toMatchSnapshot();
   });
-
-  it('processes rendering with GFM', () => {
-    expect(renderGFMSpy).toHaveBeenCalled();
-  });
 });

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';
-import $ from 'jquery';
 
 jest.mock('~/blob/viewer');
 
@@ -10,8 +10,6 @@ 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: {
@@ -22,7 +20,6 @@ describe('Blob Rich Viewer component', () => {
   }
 
   beforeEach(() => {
-    renderGFMSpy = jest.spyOn($.fn, 'renderGFM');
     createComponent();
   });
 
@@ -38,7 +35,7 @@ describe('Blob Rich Viewer component', () => {
     expect(handleBlobRichViewer).toHaveBeenCalledWith(expect.anything(), defaultType);
   });
 
-  it('processes rendering with GFM', () => {
-    expect(renderGFMSpy).toHaveBeenCalled();
+  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);
+  });
+});