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

Issuable Show: Add IssuableShowRoot component

See merge request gitlab-org/gitlab!44745

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

+<script>
+import IssuableSidebar from '~/issuable_sidebar/components/issuable_sidebar_root.vue';
+
+import IssuableHeader from './issuable_header.vue';
+import IssuableBody from './issuable_body.vue';
+
+export default {
+  components: {
+    IssuableSidebar,
+    IssuableHeader,
+    IssuableBody,
+  },
+  props: {
+    issuable: {
+      type: Object,
+      required: true,
+    },
+    statusBadgeClass: {
+      type: String,
+      required: false,
+      default: '',
+    },
+    statusIcon: {
+      type: String,
+      required: false,
+      default: '',
+    },
+    enableEdit: {
+      type: Boolean,
+      required: false,
+      default: false,
+    },
+    enableAutocomplete: {
+      type: Boolean,
+      required: false,
+      default: false,
+    },
+    editFormVisible: {
+      type: Boolean,
+      required: false,
+      default: false,
+    },
+    descriptionPreviewPath: {
+      type: String,
+      required: false,
+      default: '',
+    },
+    descriptionHelpPath: {
+      type: String,
+      required: false,
+      default: '',
+    },
+  },
+};
+</script>
+
+<template>
+  <div class="issuable-show-container">
+    <issuable-header
+      :status-badge-class="statusBadgeClass"
+      :status-icon="statusIcon"
+      :blocked="issuable.blocked"
+      :confidential="issuable.confidential"
+      :created-at="issuable.createdAt"
+      :author="issuable.author"
+    >
+      <template #status-badge>
+        <slot name="status-badge"></slot>
+      </template>
+      <template #header-actions>
+        <slot name="header-actions"></slot>
+      </template>
+    </issuable-header>
+    <issuable-body
+      :issuable="issuable"
+      :status-badge-class="statusBadgeClass"
+      :status-icon="statusIcon"
+      :enable-edit="enableEdit"
+      :enable-autocomplete="enableAutocomplete"
+      :edit-form-visible="editFormVisible"
+      :description-preview-path="descriptionPreviewPath"
+      :description-help-path="descriptionHelpPath"
+      @edit-issuable="$emit('edit-issuable', $event)"
+    >
+      <template #status-badge>
+        <slot name="status-badge"></slot>
+      </template>
+      <template #edit-form-actions="actionsProps">
+        <slot name="edit-form-actions" v-bind="actionsProps"></slot>
+      </template>
+    </issuable-body>
+    <issuable-sidebar @sidebar-toggle="$emit('sidebar-toggle', $event)">
+      <template #right-sidebar-items="sidebarProps">
+        <slot name="right-sidebar-items" v-bind="sidebarProps"></slot>
+      </template>
+    </issuable-sidebar>
+  </div>
+</template>

spec/frontend/issuable_show/components/issuable_show_root_spec.js

+import { shallowMount } from '@vue/test-utils';
+
+import IssuableShowRoot from '~/issuable_show/components/issuable_show_root.vue';
+
+import IssuableHeader from '~/issuable_show/components/issuable_header.vue';
+import IssuableBody from '~/issuable_show/components/issuable_body.vue';
+import IssuableSidebar from '~/issuable_sidebar/components/issuable_sidebar_root.vue';
+
+import { mockIssuableShowProps, mockIssuable } from '../mock_data';
+
+const createComponent = (propsData = mockIssuableShowProps) =>
+  shallowMount(IssuableShowRoot, {
+    propsData,
+    stubs: {
+      IssuableHeader,
+      IssuableBody,
+      IssuableSidebar,
+    },
+    slots: {
+      'status-badge': 'Open',
+      'header-actions': `
+        <button class="js-close">Close issuable</button>
+        <a class="js-new" href="/gitlab-org/gitlab-shell/-/issues/new">New issuable</a>
+      `,
+      'edit-form-actions': `
+        <button class="js-save">Save changes</button>
+        <button class="js-cancel">Cancel</button>
+      `,
+      'right-sidebar-items': `
+        <div class="js-todo">
+          To Do <button class="js-add-todo">Add a To Do</button>
+        </div>
+      `,
+    },
+  });
+
+describe('IssuableShowRoot', () => {
+  let wrapper;
+
+  beforeEach(() => {
+    wrapper = createComponent();
+  });
+
+  afterEach(() => {
+    wrapper.destroy();
+  });
+
+  describe('template', () => {
+    const {
+      statusBadgeClass,
+      statusIcon,
+      enableEdit,
+      enableAutocomplete,
+      editFormVisible,
+      descriptionPreviewPath,
+      descriptionHelpPath,
+    } = mockIssuableShowProps;
+    const { blocked, confidential, createdAt, author } = mockIssuable;
+
+    it('renders component container element with class `issuable-show-container`', () => {
+      expect(wrapper.classes()).toContain('issuable-show-container');
+    });
+
+    it('renders issuable-header component', () => {
+      const issuableHeader = wrapper.find(IssuableHeader);
+
+      expect(issuableHeader.exists()).toBe(true);
+      expect(issuableHeader.props()).toMatchObject({
+        statusBadgeClass,
+        statusIcon,
+        blocked,
+        confidential,
+        createdAt,
+        author,
+      });
+      expect(issuableHeader.find('.issuable-status-box').text()).toContain('Open');
+      expect(issuableHeader.find('.detail-page-header-actions button.js-close').exists()).toBe(
+        true,
+      );
+      expect(issuableHeader.find('.detail-page-header-actions a.js-new').exists()).toBe(true);
+    });
+
+    it('renders issuable-body component', () => {
+      const issuableBody = wrapper.find(IssuableBody);
+
+      expect(issuableBody.exists()).toBe(true);
+      expect(issuableBody.props()).toMatchObject({
+        issuable: mockIssuable,
+        statusBadgeClass,
+        statusIcon,
+        enableEdit,
+        enableAutocomplete,
+        editFormVisible,
+        descriptionPreviewPath,
+        descriptionHelpPath,
+      });
+    });
+
+    it('renders issuable-sidebar component', () => {
+      const issuableSidebar = wrapper.find(IssuableSidebar);
+
+      expect(issuableSidebar.exists()).toBe(true);
+    });
+
+    describe('events', () => {
+      it('component emits `edit-issuable` event bubbled via issuable-body', () => {
+        const issuableBody = wrapper.find(IssuableBody);
+
+        issuableBody.vm.$emit('edit-issuable');
+
+        expect(wrapper.emitted('edit-issuable')).toBeTruthy();
+      });
+
+      it('component emits `sidebar-toggle` event bubbled via issuable-sidebar', () => {
+        const issuableSidebar = wrapper.find(IssuableSidebar);
+
+        issuableSidebar.vm.$emit('sidebar-toggle', true);
+
+        expect(wrapper.emitted('sidebar-toggle')).toBeTruthy();
+      });
+    });
+  });
+});