Added spec for rendering the selector

[ci skip]

3 files changed, 35 insertions, 3 deletions

diff --git a/app/assets/javascripts/issue_show/components/app.vue b/app/assets/javascripts/issue_show/components/app.vue
index e5dd9a747de..e76464b2d21 100644
--- a/app/assets/javascripts/issue_show/components/app.vue
+++ b/app/assets/javascripts/issue_show/components/app.vue
@@ -149,7 +149,8 @@ export default {
     <form-component
       v-if="canUpdate && showForm"
       :form-state="formState"
-      :can-destroy="canDestroy" />
+      :can-destroy="canDestroy"
+      :issuable-templates="issuableTemplates" />
     <div v-else>
       <title-component
         :issuable-ref="issuableRef"
diff --git a/app/assets/javascripts/issue_show/components/fields/title.vue b/app/assets/javascripts/issue_show/components/fields/title.vue
index f55a7c34f4e..aea30bc76b1 100644
--- a/app/assets/javascripts/issue_show/components/fields/title.vue
+++ b/app/assets/javascripts/issue_show/components/fields/title.vue
@@ -16,16 +16,27 @@
     components: {
       descriptionTemplate,
     },
+    computed: {
+      hasIssuableTemplates() {
+        return this.issuableTemplates.length !== 0;
+      },
+    },
   };
 </script>
 
 <template>
   <fieldset class="row">
-    <div class="col-sm-4 col-lg-3">
+    <div
+      class="col-sm-4 col-lg-3"
+      v-if="hasIssuableTemplates">
       <description-template
         :issuable-templates="issuableTemplates" />
     </div>
-    <div class="col-sm-8 col-lg-9">
+    <div
+      :class="{
+        'col-sm-8 col-lg-9': hasIssuableTemplates,
+        'col-xs-12': !hasIssuableTemplates,
+      }">
       <label
         class="sr-only"
         for="issue-title">
diff --git a/spec/javascripts/issue_show/components/fields/title_spec.js b/spec/javascripts/issue_show/components/fields/title_spec.js
index 53ae038a6a2..91a2ada8d9b 100644
--- a/spec/javascripts/issue_show/components/fields/title_spec.js
+++ b/spec/javascripts/issue_show/components/fields/title_spec.js
@@ -1,6 +1,7 @@
 import Vue from 'vue';
 import Store from '~/issue_show/stores';
 import titleField from '~/issue_show/components/fields/title.vue';
+import '~/templates/issuable_template_selectors';
 
 describe('Title field component', () => {
   let vm;
@@ -27,4 +28,23 @@ describe('Title field component', () => {
       vm.$el.querySelector('.form-control').value,
     ).toBe('test');
   });
+
+  it('does not render template selector if no templates exist', () => {
+    expect(
+      vm.$el.querySelector('.js-issuable-selector-wrap'),
+    ).toBeNull();
+  });
+
+  it('renders template selector when templates exists', (done) => {
+    spyOn(gl, 'IssuableTemplateSelectors');
+    vm.issuableTemplates = ['test'];
+
+    Vue.nextTick(() => {
+      expect(
+        vm.$el.querySelector('.js-issuable-selector-wrap'),
+      ).not.toBeNull();
+
+      done();
+    });
+  });
 });