Merge branch 'ss/abstract-issue-title' into 'master'

Move issuable title to component

See merge request gitlab-org/gitlab!42046

app/assets/javascripts/boards/components/issuable_title.vue

+<script>
+export default {
+  props: {
+    title: {
+      type: String,
+      required: true,
+    },
+    refPath: {
+      type: String,
+      required: true,
+    },
+  },
+};
+</script>
+
+<template>
+  <div data-testid="issue-title">
+    <p class="gl-font-weight-bold">{{ title }}</p>
+    <p class="gl-mb-0">{{ refPath }}</p>
+  </div>
+</template>

ee/app/assets/javascripts/boards/components/board_content_sidebar.vue

@@ -4,12 +4,14 @@ import { GlDrawer } from '@gitlab/ui';
 import { ISSUABLE } from '~/boards/constants';
 import { contentTop } from '~/lib/utils/common_utils';
 import IssuableAssignees from '~/sidebar/components/assignees/issuable_assignees.vue';
+import IssuableTitle from '~/boards/components/issuable_title.vue';
 
 export default {
   headerHeight: `${contentTop()}px`,
   components: {
     IssuableAssignees,
     GlDrawer,
+    IssuableTitle,
   },
   computed: {
     ...mapGetters(['isSidebarOpen', 'getActiveIssue']),
@@ -17,9 +19,6 @@ export default {
     showSidebar() {
       return this.sidebarType === ISSUABLE;
     },
-    issueTitle() {
-      return this.getActiveIssue.title;
-    },
   },
   methods: {
     ...mapActions(['unsetActiveId']),
@@ -35,10 +34,7 @@ export default {
     @close="unsetActiveId"
   >
     <template #header>
-      <div data-testid="issue-title">
-        <p class="gl-font-weight-bold">{{ issueTitle }}</p>
-        <p class="gl-mb-0">{{ getActiveIssue.referencePath }}</p>
-      </div>
+      <issuable-title :ref-path="getActiveIssue.referencePath" :title="getActiveIssue.title" />
     </template>
 
     <template>

ee/spec/frontend/boards/components/board_content_sidebar_spec.js

@@ -3,6 +3,7 @@ import { GlDrawer } from '@gitlab/ui';
 import waitForPromises from 'helpers/wait_for_promises';
 import BoardContentSidebar from 'ee_component/boards/components/board_content_sidebar.vue';
 import IssuableAssignees from '~/sidebar/components/assignees/issuable_assignees.vue';
+import IssuableTitle from '~/boards/components/issuable_title.vue';
 import { createStore } from '~/boards/stores';
 import { ISSUABLE } from '~/boards/constants';
 
@@ -22,7 +23,6 @@ describe('ee/BoardContentSidebar', () => {
   beforeEach(() => {
     store = createStore();
     store.state.sidebarType = ISSUABLE;
-    store.state.activeId = 1;
     store.state.issues = { '1': { title: 'One', referencePath: 'path', assignees: [] } };
     store.state.activeId = '1';
 
@@ -31,6 +31,7 @@ describe('ee/BoardContentSidebar', () => {
 
   afterEach(() => {
     wrapper.destroy();
+    wrapper = null;
   });
 
   it('confirms we render GlDrawer', () => {
@@ -41,12 +42,8 @@ describe('ee/BoardContentSidebar', () => {
     expect(wrapper.find(GlDrawer).props('open')).toBe(true);
   });
 
-  it('renders a title of an issue in the sidebar', () => {
-    expect(wrapper.find('[data-testid="issue-title"]').text()).toContain('One');
-  });
-
-  it('renders a referencePath of an issue in the sidebar', () => {
-    expect(wrapper.find('[data-testid="issue-title"]').text()).toContain('path');
+  it('finds IssuableTitle', () => {
+    expect(wrapper.find(IssuableTitle).text()).toContain('One');
   });
 
   it('renders IssuableAssignees', () => {

spec/frontend/boards/components/issuable_title_spec.js

+import { shallowMount } from '@vue/test-utils';
+import IssuableTitle from '~/boards/components/issuable_title.vue';
+
+describe('IssuableTitle', () => {
+  let wrapper;
+  const defaultProps = {
+    title: 'One',
+    refPath: 'path',
+  };
+  const createComponent = () => {
+    wrapper = shallowMount(IssuableTitle, {
+      propsData: { ...defaultProps },
+    });
+  };
+  const findIssueContent = () => wrapper.find('[data-testid="issue-title"]');
+
+  beforeEach(() => {
+    createComponent();
+  });
+
+  afterEach(() => {
+    wrapper.destroy();
+    wrapper = null;
+  });
+
+  it('renders a title of an issue in the sidebar', () => {
+    expect(findIssueContent().text()).toContain('One');
+  });
+
+  it('renders a referencePath of an issue in the sidebar', () => {
+    expect(findIssueContent().text()).toContain('path');
+  });
+});