Merge branch 'issue-edit-inline' into issue-edit-inline-description-template

[ci skip]

5 files changed, 356 insertions, 6 deletions

diff --git a/spec/javascripts/issue_show/components/app_spec.js b/spec/javascripts/issue_show/components/app_spec.js
index 36cd174d341..91ae3cfd97c 100644
--- a/spec/javascripts/issue_show/components/app_spec.js
+++ b/spec/javascripts/issue_show/components/app_spec.js
@@ -29,12 +29,15 @@ describe('Issuable output', () => {
       propsData: {
         canUpdate: true,
         canDestroy: true,
+        canMove: true,
         endpoint: '/gitlab-org/gitlab-shell/issues/9/realtime_changes',
         issuableRef: '#1',
         initialTitle: '',
         initialDescriptionHtml: '',
         initialDescriptionText: '',
-        showForm: false,
+        markdownPreviewUrl: '/',
+        markdownDocs: '/',
+        projectsAutocompleteUrl: '/',
         isConfidential: false,
       },
     }).$mount();
@@ -89,7 +92,47 @@ describe('Issuable output', () => {
     });
   });
 
+  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('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,
+              path: 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();
@@ -109,13 +152,38 @@ describe('Issuable output', () => {
       });
     });
 
-    it('reloads the page if the confidential status has changed', (done) => {
-      spyOn(window.location, 'reload');
+    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 {
-              confidential: true,
+              path: 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 {
+              path: '/testing-issue-move',
+              confidential: vm.isConfidential,
             };
           },
         });
@@ -125,8 +193,8 @@ describe('Issuable output', () => {
 
       setTimeout(() => {
         expect(
-          window.location.reload,
-        ).toHaveBeenCalled();
+          gl.utils.visitUrl,
+        ).toHaveBeenCalledWith('/testing-issue-move');
 
         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/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/vue_shared/components/markdown/field_spec.js b/spec/javascripts/vue_shared/components/markdown/field_spec.js
new file mode 100644
index 00000000000..4bbaff561fc
--- /dev/null
+++ b/spec/javascripts/vue_shared/components/markdown/field_spec.js
@@ -0,0 +1,121 @@
+import Vue from 'vue';
+import fieldComponent from '~/vue_shared/components/markdown/field.vue';
+
+describe('Markdown field component', () => {
+  let vm;
+
+  beforeEach(() => {
+    vm = new Vue({
+      render(createElement) {
+        return createElement(
+          fieldComponent,
+          {
+            props: {
+              markdownPreviewUrl: '/preview',
+              markdownDocs: '/docs',
+            },
+          },
+          [
+            createElement('textarea', {
+              slot: 'textarea',
+            }),
+          ],
+        );
+      },
+    });
+  });
+
+  it('creates a new instance of GL form', (done) => {
+    spyOn(gl, 'GLForm');
+    vm.$mount();
+
+    Vue.nextTick(() => {
+      expect(
+        gl.GLForm,
+      ).toHaveBeenCalled();
+
+      done();
+    });
+  });
+
+  describe('mounted', () => {
+    beforeEach((done) => {
+      vm.$mount();
+
+      Vue.nextTick(done);
+    });
+
+    it('renders textarea inside backdrop', () => {
+      expect(
+        vm.$el.querySelector('.zen-backdrop textarea'),
+      ).not.toBeNull();
+    });
+
+    describe('markdown preview', () => {
+      let previewLink;
+
+      beforeEach(() => {
+        spyOn(Vue.http, 'post').and.callFake(() => new Promise((resolve) => {
+          resolve({
+            json() {
+              return {
+                body: '<p>markdown preview</p>',
+              };
+            },
+          });
+        }));
+
+        previewLink = vm.$el.querySelector('.nav-links li:nth-child(2) a');
+      });
+
+      it('sets preview link as active', (done) => {
+        previewLink.click();
+
+        Vue.nextTick(() => {
+          expect(
+            previewLink.parentNode.classList.contains('active'),
+          ).toBeTruthy();
+
+          done();
+        });
+      });
+
+      it('shows preview loading text', (done) => {
+        previewLink.click();
+
+        Vue.nextTick(() => {
+          expect(
+            vm.$el.querySelector('.md-preview').textContent.trim(),
+          ).toContain('Loading...');
+
+          done();
+        });
+      });
+
+      it('renders markdown preview', (done) => {
+        previewLink.click();
+
+        setTimeout(() => {
+          expect(
+            vm.$el.querySelector('.md-preview').innerHTML,
+          ).toContain('<p>markdown preview</p>');
+
+          done();
+        });
+      });
+
+      it('renders GFM with jQuery', (done) => {
+        spyOn($.fn, 'renderGFM');
+        previewLink.click();
+
+        setTimeout(() => {
+          expect(
+            $.fn.renderGFM,
+          ).toHaveBeenCalled();
+
+          done();
+        });
+      });
+    });
+  });
+});
diff --git a/spec/javascripts/vue_shared/components/markdown/header_spec.js b/spec/javascripts/vue_shared/components/markdown/header_spec.js
new file mode 100644
index 00000000000..7110ff36937
--- /dev/null
+++ b/spec/javascripts/vue_shared/components/markdown/header_spec.js
@@ -0,0 +1,67 @@
+import Vue from 'vue';
+import headerComponent from '~/vue_shared/components/markdown/header.vue';
+
+describe('Markdown field header component', () => {
+  let vm;
+
+  beforeEach((done) => {
+    const Component = Vue.extend(headerComponent);
+
+    vm = new Component({
+      propsData: {
+        previewMarkdown: false,
+      },
+    }).$mount();
+
+    Vue.nextTick(done);
+  });
+
+  it('renders markdown buttons', () => {
+    expect(
+      vm.$el.querySelectorAll('.js-md').length,
+    ).toBe(7);
+  });
+
+  it('renders `write` link as active when previewMarkdown is false', () => {
+    expect(
+      vm.$el.querySelector('li:nth-child(1)').classList.contains('active'),
+    ).toBeTruthy();
+  });
+
+  it('renders `preview` link as active when previewMarkdown is true', (done) => {
+    vm.previewMarkdown = true;
+
+    Vue.nextTick(() => {
+      expect(
+        vm.$el.querySelector('li:nth-child(2)').classList.contains('active'),
+      ).toBeTruthy();
+
+      done();
+    });
+  });
+
+  it('emits toggle markdown event when clicking preview', () => {
+    spyOn(vm, '$emit');
+
+    vm.$el.querySelector('li:nth-child(2) a').click();
+
+    expect(
+      vm.$emit,
+    ).toHaveBeenCalledWith('toggle-markdown');
+  });
+
+  it('blurs preview link after click', (done) => {
+    const link = vm.$el.querySelector('li:nth-child(2) a');
+    spyOn(HTMLElement.prototype, 'blur');
+
+    link.click();
+
+    setTimeout(() => {
+      expect(
+        link.blur,
+      ).toHaveBeenCalled();
+
+      done();
+    });
+  });
+});