Added inline issue edit form actions

[ci skip]

2 files changed, 217 insertions, 0 deletions

diff --git a/spec/javascripts/issue_show/components/app_spec.js b/spec/javascripts/issue_show/components/app_spec.js
index 09bca2c3680..9c066a5908b 100644
--- a/spec/javascripts/issue_show/components/app_spec.js
+++ b/spec/javascripts/issue_show/components/app_spec.js
@@ -2,6 +2,7 @@ import Vue from 'vue';
 import '~/render_math';
 import '~/render_gfm';
 import issuableApp from '~/issue_show/components/app.vue';
+import eventHub from '~/issue_show/event_hub';
 import issueShowData from '../mock_data';
 
 const issueShowInterceptor = data => (request, next) => {
@@ -22,6 +23,8 @@ describe('Issuable output', () => {
     const IssuableDescriptionComponent = Vue.extend(issuableApp);
     Vue.http.interceptors.push(issueShowInterceptor(issueShowData.initialRequest));
 
+    spyOn(eventHub, '$emit');
+
     vm = new IssuableDescriptionComponent({
       propsData: {
         canUpdate: true,
@@ -30,6 +33,7 @@ describe('Issuable output', () => {
         initialTitle: '',
         initialDescriptionHtml: '',
         initialDescriptionText: '',
+        showForm: true,
       },
     }).$mount();
   });
@@ -57,4 +61,106 @@ describe('Issuable output', () => {
       });
     });
   });
+
+  describe('updateIssuable', () => {
+    it('correctly updates issuable data', (done) => {
+      spyOn(vm.service, 'updateIssuable').and.callFake(() => new Promise((resolve) => {
+        resolve();
+      }));
+
+      vm.updateIssuable();
+
+      setTimeout(() => {
+        expect(
+          vm.service.updateIssuable,
+        ).toHaveBeenCalledWith(vm.formState);
+        expect(
+          eventHub.$emit,
+        ).toHaveBeenCalledWith('close.form');
+
+        done();
+      });
+    });
+
+    it('closes form on error', (done) => {
+      spyOn(window, 'Flash').and.callThrough();
+      spyOn(vm.service, 'updateIssuable').and.callFake(() => new Promise((resolve, reject) => {
+        reject();
+      }));
+
+      vm.updateIssuable();
+
+      setTimeout(() => {
+        expect(
+          eventHub.$emit,
+        ).toHaveBeenCalledWith('close.form');
+        expect(
+          window.Flash,
+        ).toHaveBeenCalledWith('Error updating issue');
+
+        done();
+      });
+    });
+  });
+
+  describe('deleteIssuable', () => {
+    it('changes URL when deleted', (done) => {
+      spyOn(gl.utils, 'visitUrl');
+      spyOn(vm.service, 'deleteIssuable').and.callFake(() => new Promise((resolve) => {
+        resolve({
+          path: '/test',
+        });
+      }));
+
+      vm.deleteIssuable();
+
+      setTimeout(() => {
+        expect(
+          gl.utils.visitUrl,
+        ).toHaveBeenCalledWith('/test');
+
+        done();
+      });
+    });
+
+    it('stops polling when deleteing', (done) => {
+      spyOn(gl.utils, 'visitUrl');
+      spyOn(vm.poll, 'stop');
+      spyOn(vm.service, 'deleteIssuable').and.callFake(() => new Promise((resolve) => {
+        resolve({
+          path: '/test',
+        });
+      }));
+
+      vm.deleteIssuable();
+
+      setTimeout(() => {
+        expect(
+          vm.poll.stop,
+        ).toHaveBeenCalledWith();
+
+        done();
+      });
+    });
+
+    it('closes form on error', (done) => {
+      spyOn(window, 'Flash').and.callThrough();
+      spyOn(vm.service, 'deleteIssuable').and.callFake(() => new Promise((resolve, reject) => {
+        reject();
+      }));
+
+      vm.deleteIssuable();
+
+      setTimeout(() => {
+        expect(
+          eventHub.$emit,
+        ).toHaveBeenCalledWith('close.form');
+        expect(
+          window.Flash,
+        ).toHaveBeenCalledWith('Error deleting issue');
+
+        done();
+      });
+    });
+  });
 });
diff --git a/spec/javascripts/issue_show/components/edit_actions_spec.js b/spec/javascripts/issue_show/components/edit_actions_spec.js
new file mode 100644
index 00000000000..a0fccccc961
--- /dev/null
+++ b/spec/javascripts/issue_show/components/edit_actions_spec.js
@@ -0,0 +1,111 @@
+import Vue from 'vue';
+import editActions from '~/issue_show/components/edit_actions.vue';
+import eventHub from '~/issue_show/event_hub';
+
+describe('Edit Actions components', () => {
+  let vm;
+
+  beforeEach((done) => {
+    const Component = Vue.extend(editActions);
+
+    spyOn(eventHub, '$emit');
+
+    vm = new Component().$mount();
+
+    Vue.nextTick(done);
+  });
+
+  it('renders all buttons as enabled', () => {
+    expect(
+      vm.$el.querySelectorAll('.disabled').length,
+    ).toBe(0);
+
+    expect(
+      vm.$el.querySelectorAll('[disabled]').length,
+    ).toBe(0);
+  });
+
+  describe('updateIssuable', () => {
+    it('sends update.issauble event when clicking save button', () => {
+      vm.$el.querySelector('.btn-save').click();
+
+      expect(
+        eventHub.$emit,
+      ).toHaveBeenCalledWith('update.issuable');
+    });
+
+    it('shows loading icon after clicking save button', (done) => {
+      vm.$el.querySelector('.btn-save').click();
+
+      Vue.nextTick(() => {
+        expect(
+          vm.$el.querySelector('.btn-save .fa'),
+        ).not.toBeNull();
+
+        done();
+      });
+    });
+
+    it('disabled button after clicking save button', (done) => {
+      vm.$el.querySelector('.btn-save').click();
+
+      Vue.nextTick(() => {
+        expect(
+          vm.$el.querySelector('.btn-save').getAttribute('disabled'),
+        ).toBe('disabled');
+
+        done();
+      });
+    });
+  });
+
+  describe('closeForm', () => {
+    it('emits close.form when clicking cancel', () => {
+      vm.$el.querySelector('.btn-default').click();
+
+      expect(
+        eventHub.$emit,
+      ).toHaveBeenCalledWith('close.form');
+    });
+  });
+
+  describe('deleteIssuable', () => {
+    it('sends delete.issuable event when clicking save button', () => {
+      spyOn(window, 'confirm').and.returnValue(true);
+      vm.$el.querySelector('.btn-danger').click();
+
+      expect(
+        eventHub.$emit,
+      ).toHaveBeenCalledWith('delete.issuable');
+    });
+
+    it('shows loading icon after clicking delete button', (done) => {
+      spyOn(window, 'confirm').and.returnValue(true);
+      vm.$el.querySelector('.btn-danger').click();
+
+      Vue.nextTick(() => {
+        expect(
+          vm.$el.querySelector('.btn-danger .fa'),
+        ).not.toBeNull();
+
+        done();
+      });
+    });
+
+    it('does no actions when confirm is false', (done) => {
+      spyOn(window, 'confirm').and.returnValue(false);
+      vm.$el.querySelector('.btn-danger').click();
+
+      Vue.nextTick(() => {
+        expect(
+          eventHub.$emit,
+        ).not.toHaveBeenCalledWith('delete.issuable');
+        expect(
+          vm.$el.querySelector('.btn-danger .fa'),
+        ).toBeNull();
+
+        done();
+      });
+    });
+  });
+});