Merge branch 'kp-add-issuable-show-app-description' into 'master'

Issuable Show: Add IssuableDescription component

See merge request gitlab-org/gitlab!44735

app/assets/javascripts/issuable_show/components/issuable_description.vue

+<script>
+import $ from 'jquery';
+import { GlSafeHtmlDirective as SafeHtml } from '@gitlab/ui';
+import '~/behaviors/markdown/render_gfm';
+
+export default {
+  directives: {
+    SafeHtml,
+  },
+  props: {
+    issuable: {
+      type: Object,
+      required: true,
+    },
+  },
+  mounted() {
+    this.renderGFM();
+  },
+  methods: {
+    renderGFM() {
+      $(this.$refs.gfmContainer).renderGFM();
+    },
+  },
+};
+</script>
+
+<template>
+  <div class="description">
+    <div ref="gfmContainer" v-safe-html="issuable.descriptionHtml" class="md"></div>
+  </div>
+</template>

spec/frontend/issuable_show/components/issuable_description_spec.js

+import $ from 'jquery';
+import { shallowMount } from '@vue/test-utils';
+
+import IssuableDescription from '~/issuable_show/components/issuable_description.vue';
+
+import { mockIssuable } from '../mock_data';
+
+const createComponent = (issuable = mockIssuable) =>
+  shallowMount(IssuableDescription, {
+    propsData: { issuable },
+  });
+
+describe('IssuableDescription', () => {
+  let renderGFMSpy;
+  let wrapper;
+
+  beforeEach(() => {
+    renderGFMSpy = jest.spyOn($.fn, 'renderGFM');
+    wrapper = createComponent();
+  });
+
+  afterEach(() => {
+    wrapper.destroy();
+  });
+
+  describe('mounted', () => {
+    it('calls `renderGFM`', () => {
+      expect(renderGFMSpy).toHaveBeenCalledTimes(1);
+    });
+  });
+
+  describe('methods', () => {
+    describe('renderGFM', () => {
+      it('calls `renderGFM` on container element', () => {
+        wrapper.vm.renderGFM();
+
+        expect(renderGFMSpy).toHaveBeenCalled();
+      });
+    });
+  });
+});