Merge branch 'issue-edit-inline' into 'master'

Issue inline editing

Closes #24873

See merge request !11322

13 files changed, 910 insertions, 14 deletions

diff --git a/spec/javascripts/issue_show/components/app_spec.js b/spec/javascripts/issue_show/components/app_spec.js
index ee456869c53..0030a953119 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,14 +23,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();
   });
@@ -57,4 +69,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();
   });
diff --git a/spec/javascripts/pipelines/graph/action_component_spec.js b/spec/javascripts/pipelines/graph/action_component_spec.js
index f033956c071..85bd87318db 100644
--- a/spec/javascripts/pipelines/graph/action_component_spec.js
+++ b/spec/javascripts/pipelines/graph/action_component_spec.js
@@ -4,7 +4,7 @@ import actionComponent from '~/pipelines/components/graph/action_component.vue';
 describe('pipeline graph action component', () => {
   let component;
 
-  beforeEach(() => {
+  beforeEach((done) => {
     const ActionComponent = Vue.extend(actionComponent);
     component = new ActionComponent({
       propsData: {
@@ -14,6 +14,8 @@ describe('pipeline graph action component', () => {
         actionIcon: 'icon_action_cancel',
       },
     }).$mount();
+
+    Vue.nextTick(done);
   });
 
   it('should render a link', () => {
@@ -27,7 +29,7 @@ describe('pipeline graph action component', () => {
   it('should update bootstrap tooltip when title changes', (done) => {
     component.tooltipText = 'changed';
 
-    Vue.nextTick(() => {
+    setTimeout(() => {
       expect(component.$el.getAttribute('data-original-title')).toBe('changed');
       done();
     });
diff --git a/spec/javascripts/pipelines/graph/dropdown_action_component_spec.js b/spec/javascripts/pipelines/graph/dropdown_action_component_spec.js
index 14ff1b0d25c..25fd18b197e 100644
--- a/spec/javascripts/pipelines/graph/dropdown_action_component_spec.js
+++ b/spec/javascripts/pipelines/graph/dropdown_action_component_spec.js
@@ -4,7 +4,7 @@ import dropdownActionComponent from '~/pipelines/components/graph/dropdown_actio
 describe('action component', () => {
   let component;
 
-  beforeEach(() => {
+  beforeEach((done) => {
     const DropdownActionComponent = Vue.extend(dropdownActionComponent);
     component = new DropdownActionComponent({
       propsData: {
@@ -14,6 +14,8 @@ describe('action component', () => {
         actionIcon: 'icon_action_cancel',
       },
     }).$mount();
+
+    Vue.nextTick(done);
   });
 
   it('should render a link', () => {
diff --git a/spec/javascripts/pipelines/graph/job_component_spec.js b/spec/javascripts/pipelines/graph/job_component_spec.js
index 63986b6c0db..e90593e0f40 100644
--- a/spec/javascripts/pipelines/graph/job_component_spec.js
+++ b/spec/javascripts/pipelines/graph/job_component_spec.js
@@ -27,26 +27,30 @@ describe('pipeline graph job component', () => {
   });
 
   describe('name with link', () => {
-    it('should render the job name and status with a link', () => {
+    it('should render the job name and status with a link', (done) => {
       const component = new JobComponent({
         propsData: {
           job: mockJob,
         },
       }).$mount();
 
-      const link = component.$el.querySelector('a');
+      Vue.nextTick(() => {
+        const link = component.$el.querySelector('a');
 
-      expect(link.getAttribute('href')).toEqual(mockJob.status.details_path);
+        expect(link.getAttribute('href')).toEqual(mockJob.status.details_path);
 
-      expect(
-        link.getAttribute('data-original-title'),
-      ).toEqual(`${mockJob.name} - ${mockJob.status.label}`);
+        expect(
+          link.getAttribute('data-original-title'),
+        ).toEqual(`${mockJob.name} - ${mockJob.status.label}`);
 
-      expect(component.$el.querySelector('.js-status-icon-success')).toBeDefined();
+        expect(component.$el.querySelector('.js-status-icon-success')).toBeDefined();
 
-      expect(
-        component.$el.querySelector('.ci-status-text').textContent.trim(),
-      ).toEqual(mockJob.name);
+        expect(
+          component.$el.querySelector('.ci-status-text').textContent.trim(),
+        ).toEqual(mockJob.name);
+
+        done();
+      });
     });
   });
 
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();
+    });
+  });
+});