Merge remote-tracking branch 'origin/master' into fix-realtime-edited-text-for-issues-9-3

8 files changed, 701 insertions, 1 deletions

diff --git a/spec/javascripts/issue_show/components/app_spec.js b/spec/javascripts/issue_show/components/app_spec.js
index 28c0ecc10a4..59c006aa0af 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) => {
@@ -26,14 +27,25 @@ describe('Issuable output', () => {
     const IssuableDescriptionComponent = Vue.extend(issuableApp);
     Vue.http.interceptors.push(issueShowInterceptor(issueShowData.initialRequest));
 
+    spyOn(eventHub, '$emit');
+
     vm = new IssuableDescriptionComponent({
       propsData: {
         canUpdate: true,
+        canDestroy: true,
+        canMove: true,
         endpoint: '/gitlab-org/gitlab-shell/issues/9/realtime_changes',
         issuableRef: '#1',
-        initialTitle: '',
+        initialTitleHtml: '',
+        initialTitleText: '',
         initialDescriptionHtml: '',
         initialDescriptionText: '',
+        markdownPreviewUrl: '/',
+        markdownDocs: '/',
+        projectsAutocompleteUrl: '/',
+        isConfidential: false,
+        projectNamespace: '/',
+        projectPath: '/',
       },
     }).$mount();
   });
@@ -70,4 +82,296 @@ describe('Issuable output', () => {
       });
     });
   });
+
+  it('shows actions if permissions are correct', (done) => {
+    vm.showForm = true;
+
+    Vue.nextTick(() => {
+      expect(
+        vm.$el.querySelector('.btn'),
+      ).not.toBeNull();
+
+      done();
+    });
+  });
+
+  it('does not show actions if permissions are incorrect', (done) => {
+    vm.showForm = true;
+    vm.canUpdate = false;
+
+    Vue.nextTick(() => {
+      expect(
+        vm.$el.querySelector('.btn'),
+      ).toBeNull();
+
+      done();
+    });
+  });
+
+  it('does not update formState if form is already open', (done) => {
+    vm.openForm();
+
+    vm.state.titleText = 'testing 123';
+
+    vm.openForm();
+
+    Vue.nextTick(() => {
+      expect(
+        vm.store.formState.title,
+      ).not.toBe('testing 123');
+
+      done();
+    });
+  });
+
+  describe('updateIssuable', () => {
+    it('fetches new data after update', (done) => {
+      spyOn(vm.service, 'getData');
+      spyOn(vm.service, 'updateIssuable').and.callFake(() => new Promise((resolve) => {
+        resolve({
+          json() {
+            return {
+              confidential: false,
+              web_url: location.pathname,
+            };
+          },
+        });
+      }));
+
+      vm.updateIssuable();
+
+      setTimeout(() => {
+        expect(
+          vm.service.getData,
+        ).toHaveBeenCalled();
+
+        done();
+      });
+    });
+
+    it('reloads the page if the confidential status has changed', (done) => {
+      spyOn(gl.utils, 'visitUrl');
+      spyOn(vm.service, 'updateIssuable').and.callFake(() => new Promise((resolve) => {
+        resolve({
+          json() {
+            return {
+              confidential: true,
+              web_url: location.pathname,
+            };
+          },
+        });
+      }));
+
+      vm.updateIssuable();
+
+      setTimeout(() => {
+        expect(
+          gl.utils.visitUrl,
+        ).toHaveBeenCalledWith(location.pathname);
+
+        done();
+      });
+    });
+
+    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('does not redirect if issue has not moved', (done) => {
+      spyOn(gl.utils, 'visitUrl');
+      spyOn(vm.service, 'updateIssuable').and.callFake(() => new Promise((resolve) => {
+        resolve({
+          json() {
+            return {
+              web_url: location.pathname,
+              confidential: vm.isConfidential,
+            };
+          },
+        });
+      }));
+
+      vm.updateIssuable();
+
+      setTimeout(() => {
+        expect(
+          gl.utils.visitUrl,
+        ).not.toHaveBeenCalled();
+
+        done();
+      });
+    });
+
+    it('redirects if issue is moved', (done) => {
+      spyOn(gl.utils, 'visitUrl');
+      spyOn(vm.service, 'updateIssuable').and.callFake(() => new Promise((resolve) => {
+        resolve({
+          json() {
+            return {
+              web_url: '/testing-issue-move',
+              confidential: vm.isConfidential,
+            };
+          },
+        });
+      }));
+
+      vm.updateIssuable();
+
+      setTimeout(() => {
+        expect(
+          gl.utils.visitUrl,
+        ).toHaveBeenCalledWith('/testing-issue-move');
+
+        done();
+      });
+    });
+
+    it('does not update issuable if project move confirm is false', (done) => {
+      spyOn(window, 'confirm').and.returnValue(false);
+      spyOn(vm.service, 'updateIssuable');
+
+      vm.store.formState.move_to_project_id = 1;
+
+      vm.updateIssuable();
+
+      setTimeout(() => {
+        expect(
+          vm.service.updateIssuable,
+        ).not.toHaveBeenCalled();
+
+        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({
+          json() {
+            return { web_url: '/test' };
+          },
+        });
+      }));
+
+      vm.deleteIssuable();
+
+      setTimeout(() => {
+        expect(
+          gl.utils.visitUrl,
+        ).toHaveBeenCalledWith('/test');
+
+        done();
+      });
+    });
+
+    it('stops polling when deleting', (done) => {
+      spyOn(gl.utils, 'visitUrl');
+      spyOn(vm.poll, 'stop');
+      spyOn(vm.service, 'deleteIssuable').and.callFake(() => new Promise((resolve) => {
+        resolve({
+          json() {
+            return { web_url: '/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();
+      });
+    });
+  });
+
+  describe('open form', () => {
+    it('shows locked warning if form is open & data is different', (done) => {
+      Vue.http.interceptors.push(issueShowInterceptor(issueShowData.initialRequest));
+
+      Vue.nextTick()
+        .then(() => new Promise((resolve) => {
+          setTimeout(resolve);
+        }))
+        .then(() => {
+          vm.openForm();
+
+          Vue.http.interceptors.push(issueShowInterceptor(issueShowData.secondRequest));
+
+          return new Promise((resolve) => {
+            setTimeout(resolve);
+          });
+        })
+        .then(() => {
+          expect(
+            vm.formState.lockedWarningVisible,
+          ).toBeTruthy();
+
+          expect(
+            vm.$el.querySelector('.alert'),
+          ).not.toBeNull();
+
+          done();
+        })
+        .catch(done.fail);
+    });
+  });
 });
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..f6625b748b6
--- /dev/null
+++ b/spec/javascripts/issue_show/components/edit_actions_spec.js
@@ -0,0 +1,147 @@
+import Vue from 'vue';
+import editActions from '~/issue_show/components/edit_actions.vue';
+import eventHub from '~/issue_show/event_hub';
+import Store from '~/issue_show/stores';
+
+describe('Edit Actions components', () => {
+  let vm;
+
+  beforeEach((done) => {
+    const Component = Vue.extend(editActions);
+    const store = new Store({
+      titleHtml: '',
+      descriptionHtml: '',
+      issuableRef: '',
+    });
+    store.formState.title = 'test';
+
+    spyOn(eventHub, '$emit');
+
+    vm = new Component({
+      propsData: {
+        canDestroy: true,
+        formState: store.formState,
+      },
+    }).$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);
+  });
+
+  it('does not render delete button if canUpdate is false', (done) => {
+    vm.canDestroy = false;
+
+    Vue.nextTick(() => {
+      expect(
+        vm.$el.querySelector('.btn-danger'),
+      ).toBeNull();
+
+      done();
+    });
+  });
+
+  it('disables submit button when title is blank', (done) => {
+    vm.formState.title = '';
+
+    Vue.nextTick(() => {
+      expect(
+        vm.$el.querySelector('.btn-save').getAttribute('disabled'),
+      ).toBe('disabled');
+
+      done();
+    });
+  });
+
+  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();
+      });
+    });
+  });
+});
diff --git a/spec/javascripts/issue_show/components/fields/description_spec.js b/spec/javascripts/issue_show/components/fields/description_spec.js
new file mode 100644
index 00000000000..f5b35b1e8b0
--- /dev/null
+++ b/spec/javascripts/issue_show/components/fields/description_spec.js
@@ -0,0 +1,56 @@
+import Vue from 'vue';
+import Store from '~/issue_show/stores';
+import descriptionField from '~/issue_show/components/fields/description.vue';
+
+describe('Description field component', () => {
+  let vm;
+  let store;
+
+  beforeEach((done) => {
+    const Component = Vue.extend(descriptionField);
+    const el = document.createElement('div');
+    store = new Store({
+      titleHtml: '',
+      descriptionHtml: '',
+      issuableRef: '',
+    });
+    store.formState.description = 'test';
+
+    document.body.appendChild(el);
+
+    vm = new Component({
+      el,
+      propsData: {
+        markdownPreviewUrl: '/',
+        markdownDocs: '/',
+        formState: store.formState,
+      },
+    }).$mount();
+
+    Vue.nextTick(done);
+  });
+
+  it('renders markdown field with description', () => {
+    expect(
+      vm.$el.querySelector('.md-area textarea').value,
+    ).toBe('test');
+  });
+
+  it('renders markdown field with a markdown description', (done) => {
+    store.formState.description = '**test**';
+
+    Vue.nextTick(() => {
+      expect(
+        vm.$el.querySelector('.md-area textarea').value,
+      ).toBe('**test**');
+
+      done();
+    });
+  });
+
+  it('focuses field when mounted', () => {
+    expect(
+      document.activeElement,
+    ).toBe(vm.$refs.textarea);
+  });
+});
diff --git a/spec/javascripts/issue_show/components/fields/description_template_spec.js b/spec/javascripts/issue_show/components/fields/description_template_spec.js
new file mode 100644
index 00000000000..2b7ee65094b
--- /dev/null
+++ b/spec/javascripts/issue_show/components/fields/description_template_spec.js
@@ -0,0 +1,49 @@
+import Vue from 'vue';
+import descriptionTemplate from '~/issue_show/components/fields/description_template.vue';
+import '~/templates/issuable_template_selector';
+import '~/templates/issuable_template_selectors';
+
+describe('Issue description template component', () => {
+  let vm;
+  let formState;
+
+  beforeEach((done) => {
+    const Component = Vue.extend(descriptionTemplate);
+    formState = {
+      description: 'test',
+    };
+
+    vm = new Component({
+      propsData: {
+        formState,
+        issuableTemplates: [{ name: 'test' }],
+        projectPath: '/',
+        projectNamespace: '/',
+      },
+    }).$mount();
+
+    Vue.nextTick(done);
+  });
+
+  it('renders templates as JSON array in data attribute', () => {
+    expect(
+      vm.$el.querySelector('.js-issuable-selector').getAttribute('data-data'),
+    ).toBe('[{"name":"test"}]');
+  });
+
+  it('updates formState when changing template', () => {
+    vm.issuableTemplate.editor.setValue('test new template');
+
+    expect(
+      formState.description,
+    ).toBe('test new template');
+  });
+
+  it('returns formState description with editor getValue', () => {
+    formState.description = 'testing new template';
+
+    expect(
+      vm.issuableTemplate.editor.getValue(),
+    ).toBe('testing new template');
+  });
+});
diff --git a/spec/javascripts/issue_show/components/fields/project_move_spec.js b/spec/javascripts/issue_show/components/fields/project_move_spec.js
new file mode 100644
index 00000000000..86d35c33ff4
--- /dev/null
+++ b/spec/javascripts/issue_show/components/fields/project_move_spec.js
@@ -0,0 +1,38 @@
+import Vue from 'vue';
+import projectMove from '~/issue_show/components/fields/project_move.vue';
+
+describe('Project move field component', () => {
+  let vm;
+  let formState;
+
+  beforeEach((done) => {
+    const Component = Vue.extend(projectMove);
+
+    formState = {
+      move_to_project_id: 0,
+    };
+
+    vm = new Component({
+      propsData: {
+        formState,
+        projectsAutocompleteUrl: '/autocomplete',
+      },
+    }).$mount();
+
+    Vue.nextTick(done);
+  });
+
+  it('mounts select2 element', () => {
+    expect(
+      vm.$el.querySelector('.select2-container'),
+    ).not.toBeNull();
+  });
+
+  it('updates formState on change', () => {
+    $(vm.$refs['move-dropdown']).val(2).trigger('change');
+
+    expect(
+      formState.move_to_project_id,
+    ).toBe(2);
+  });
+});
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..53ae038a6a2
--- /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: {
+        formState: store.formState,
+      },
+    }).$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/form_spec.js b/spec/javascripts/issue_show/components/form_spec.js
new file mode 100644
index 00000000000..9a85223208c
--- /dev/null
+++ b/spec/javascripts/issue_show/components/form_spec.js
@@ -0,0 +1,68 @@
+import Vue from 'vue';
+import formComponent from '~/issue_show/components/form.vue';
+import '~/templates/issuable_template_selector';
+import '~/templates/issuable_template_selectors';
+
+describe('Inline edit form component', () => {
+  let vm;
+
+  beforeEach((done) => {
+    const Component = Vue.extend(formComponent);
+
+    vm = new Component({
+      propsData: {
+        canDestroy: true,
+        canMove: true,
+        formState: {
+          title: 'b',
+          description: 'a',
+          lockedWarningVisible: false,
+        },
+        markdownPreviewUrl: '/',
+        markdownDocs: '/',
+        projectsAutocompleteUrl: '/',
+        projectPath: '/',
+        projectNamespace: '/',
+      },
+    }).$mount();
+
+    Vue.nextTick(done);
+  });
+
+  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();
+    });
+  });
+
+  it('hides locked warning by default', () => {
+    expect(
+      vm.$el.querySelector('.alert'),
+    ).toBeNull();
+  });
+
+  it('shows locked warning if formState is different', (done) => {
+    vm.formState.lockedWarningVisible = true;
+
+    Vue.nextTick(() => {
+      expect(
+        vm.$el.querySelector('.alert'),
+      ).not.toBeNull();
+
+      done();
+    });
+  });
+});
diff --git a/spec/javascripts/issue_show/components/title_spec.js b/spec/javascripts/issue_show/components/title_spec.js
index 2f953e7e92e..a2d90a9b9f5 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', () => {
@@ -6,11 +7,18 @@ describe('Title component', () => {
 
   beforeEach(() => {
     const Component = Vue.extend(titleComponent);
+    const store = new Store({
+      titleHtml: '',
+      descriptionHtml: '',
+      issuableRef: '',
+    });
     vm = new Component({
       propsData: {
         issuableRef: '#1',
         titleHtml: 'Testing <img />',
         titleText: 'Testing',
+        showForm: false,
+        formState: store.formState,
       },
     }).$mount();
   });