Issue inline edit title field

[ci skip]

3 files changed, 52 insertions, 3 deletions

diff --git a/spec/javascripts/issue_show/components/app_spec.js b/spec/javascripts/issue_show/components/app_spec.js
index 1f46d836e1e..1c47ba49b18 100644
--- a/spec/javascripts/issue_show/components/app_spec.js
+++ b/spec/javascripts/issue_show/components/app_spec.js
@@ -75,6 +75,18 @@ describe('Issuable output', () => {
     });
   });
 
+  it('changes element to `form` when open', (done) => {
+    vm.showForm = true;
+
+    Vue.nextTick(() => {
+      expect(
+        vm.$el.tagName,
+      ).toBe('FORM');
+
+      done();
+    });
+  });
+
   it('does not show actions if permissions are incorrect', (done) => {
     vm.showForm = true;
     vm.canUpdate = false;
diff --git a/spec/javascripts/issue_show/components/fields/title_spec.js b/spec/javascripts/issue_show/components/fields/title_spec.js
new file mode 100644
index 00000000000..69afcd24df9
--- /dev/null
+++ b/spec/javascripts/issue_show/components/fields/title_spec.js
@@ -0,0 +1,30 @@
+import Vue from 'vue';
+import Store from '~/issue_show/stores';
+import titleField from '~/issue_show/components/fields/title.vue';
+
+describe('Title field component', () => {
+  let vm;
+  let store;
+
+  beforeEach(() => {
+    const Component = Vue.extend(titleField);
+    store = new Store({
+      titleHtml: '',
+      descriptionHtml: '',
+      issuableRef: '',
+    });
+    store.formState.title = 'test';
+
+    vm = new Component({
+      propsData: {
+        store,
+      },
+    }).$mount();
+  });
+
+  it('renders form control with formState title', () => {
+    expect(
+      vm.$el.querySelector('.form-control').value,
+    ).toBe('test');
+  });
+});
diff --git a/spec/javascripts/issue_show/components/title_spec.js b/spec/javascripts/issue_show/components/title_spec.js
index 2f953e7e92e..45ec8718eb6 100644
--- a/spec/javascripts/issue_show/components/title_spec.js
+++ b/spec/javascripts/issue_show/components/title_spec.js
@@ -1,4 +1,5 @@
 import Vue from 'vue';
+import Store from '~/issue_show/stores';
 import titleComponent from '~/issue_show/components/title.vue';
 
 describe('Title component', () => {
@@ -11,13 +12,19 @@ describe('Title component', () => {
         issuableRef: '#1',
         titleHtml: 'Testing <img />',
         titleText: 'Testing',
+        showForm: false,
+        store: new Store({
+          titleHtml: '',
+          descriptionHtml: '',
+          issuableRef: '',
+        }),
       },
     }).$mount();
   });
 
   it('renders title HTML', () => {
     expect(
-      vm.$el.innerHTML.trim(),
+      vm.$el.querySelector('h2').innerHTML.trim(),
     ).toBe('Testing <img>');
   });
 
@@ -39,12 +46,12 @@ describe('Title component', () => {
 
     Vue.nextTick(() => {
       expect(
-        vm.$el.classList.contains('issue-realtime-pre-pulse'),
+        vm.$el.querySelector('h2').classList.contains('issue-realtime-pre-pulse'),
       ).toBeTruthy();
 
       setTimeout(() => {
         expect(
-          vm.$el.classList.contains('issue-realtime-trigger-pulse'),
+          vm.$el.querySelector('h2').classList.contains('issue-realtime-trigger-pulse'),
         ).toBeTruthy();
 
         done();