Add inline edit button to issue_show app

2 files changed, 47 insertions, 3 deletions

diff --git a/spec/javascripts/issue_show/components/app_spec.js b/spec/javascripts/issue_show/components/app_spec.js
index 583a3a74d77..2ea290108a4 100644
--- a/spec/javascripts/issue_show/components/app_spec.js
+++ b/spec/javascripts/issue_show/components/app_spec.js
@@ -332,4 +332,15 @@ describe('Issuable output', () => {
         .catch(done.fail);
     });
   });
+
+  describe('show inline edit button', () => {
+    it('should not render by default', () => {
+      expect(vm.$el.querySelector('.title-container .note-action-button')).toBeDefined();
+    });
+
+    it('should render if showInlineEditButton', () => {
+      vm.showInlineEditButton = true;
+      expect(vm.$el.querySelector('.title-container .note-action-button')).toBeDefined();
+    });
+  });
 });
diff --git a/spec/javascripts/issue_show/components/title_spec.js b/spec/javascripts/issue_show/components/title_spec.js
index a2d90a9b9f5..c1edc785d0f 100644
--- a/spec/javascripts/issue_show/components/title_spec.js
+++ b/spec/javascripts/issue_show/components/title_spec.js
@@ -1,6 +1,7 @@
 import Vue from 'vue';
 import Store from '~/issue_show/stores';
 import titleComponent from '~/issue_show/components/title.vue';
+import eventHub from '~/issue_show/event_hub';
 
 describe('Title component', () => {
   let vm;
@@ -25,7 +26,7 @@ describe('Title component', () => {
 
   it('renders title HTML', () => {
     expect(
-      vm.$el.innerHTML.trim(),
+      vm.$el.querySelector('.title').innerHTML.trim(),
     ).toBe('Testing <img>');
   });
 
@@ -47,12 +48,12 @@ describe('Title component', () => {
 
     Vue.nextTick(() => {
       expect(
-        vm.$el.classList.contains('issue-realtime-pre-pulse'),
+        vm.$el.querySelector('.title').classList.contains('issue-realtime-pre-pulse'),
       ).toBeTruthy();
 
       setTimeout(() => {
         expect(
-          vm.$el.classList.contains('issue-realtime-trigger-pulse'),
+          vm.$el.querySelector('.title').classList.contains('issue-realtime-trigger-pulse'),
         ).toBeTruthy();
 
         done();
@@ -72,4 +73,36 @@ describe('Title component', () => {
       done();
     });
   });
+
+  describe('inline edit button', () => {
+    beforeEach(() => {
+      spyOn(eventHub, '$emit');
+    });
+
+    it('should not show by default', () => {
+      expect(vm.$el.querySelector('.note-action-button')).toBeNull();
+    });
+
+    it('should not show if canUpdate is false', () => {
+      vm.showInlineEditButton = true;
+      vm.canUpdate = false;
+      expect(vm.$el.querySelector('.note-action-button')).toBeNull();
+    });
+
+    it('should show if showInlineEditButton and canUpdate', () => {
+      vm.showInlineEditButton = true;
+      vm.canUpdate = true;
+      expect(vm.$el.querySelector('.note-action-button')).toBeDefined();
+    });
+
+    it('should trigger open.form event when clicked', () => {
+      vm.showInlineEditButton = true;
+      vm.canUpdate = true;
+
+      Vue.nextTick(() => {
+        vm.$el.querySelector('.note-action-button').click();
+        expect(eventHub.$emit).toHaveBeenCalledWith('open.form');
+      });
+    });
+  });
 });