1 files changed, 112 insertions, 0 deletions
diff --git a/spec/javascripts/notes/components/note_form_spec.js b/spec/javascripts/notes/components/note_form_spec.js
new file mode 100644
index 00000000000..86e9e2a32a9
--- /dev/null
+++ b/spec/javascripts/notes/components/note_form_spec.js
@@ -0,0 +1,112 @@
+import Vue from 'vue';
+import store from '~/notes/stores';
+import issueNoteForm from '~/notes/components/note_form.vue';
+import { noteableDataMock, notesDataMock } from '../mock_data';
+import { keyboardDownEvent } from '../../issue_show/helpers';
+
+describe('issue_note_form component', () => {
+  let vm;
+  let props;
+
+  beforeEach(() => {
+    const Component = Vue.extend(issueNoteForm);
+
+    store.dispatch('setNoteableData', noteableDataMock);
+    store.dispatch('setNotesData', notesDataMock);
+
+    props = {
+      isEditing: false,
+      noteBody: 'Magni suscipit eius consectetur enim et ex et commodi.',
+      noteId: 545,
+    };
+
+    vm = new Component({
+      store,
+      propsData: props,
+    }).$mount();
+  });
+
+  afterEach(() => {
+    vm.$destroy();
+  });
+
+  describe('conflicts editing', () => {
+    it('should show conflict message if note changes outside the component', (done) => {
+      vm.isEditing = true;
+      vm.noteBody = 'Foo';
+      const message = 'This comment has changed since you started editing, please review the updated comment to ensure information is not lost.';
+
+      Vue.nextTick(() => {
+        expect(
+          vm.$el.querySelector('.js-conflict-edit-warning').textContent.replace(/\s+/g, ' ').trim(),
+        ).toEqual(message);
+        done();
+      });
+    });
+  });
+
+  describe('form', () => {
+    it('should render text area with placeholder', () => {
+      expect(
+        vm.$el.querySelector('textarea').getAttribute('placeholder'),
+      ).toEqual('Write a comment or drag your files here...');
+    });
+
+    it('should link to markdown docs', () => {
+      const { markdownDocsPath } = notesDataMock;
+      expect(vm.$el.querySelector(`a[href="${markdownDocsPath}"]`).textContent.trim()).toEqual('Markdown');
+    });
+
+    describe('keyboard events', () => {
+      describe('up', () => {
+        it('should ender edit mode', () => {
+          spyOn(vm, 'editMyLastNote').and.callThrough();
+          vm.$el.querySelector('textarea').value = 'Foo';
+          vm.$el.querySelector('textarea').dispatchEvent(keyboardDownEvent(38, true));
+
+          expect(vm.editMyLastNote).toHaveBeenCalled();
+        });
+      });
+
+      describe('enter', () => {
+        it('should submit note', () => {
+          spyOn(vm, 'handleUpdate').and.callThrough();
+          vm.$el.querySelector('textarea').value = 'Foo';
+          vm.$el.querySelector('textarea').dispatchEvent(keyboardDownEvent(13, true));
+
+          expect(vm.handleUpdate).toHaveBeenCalled();
+        });
+      });
+    });
+
+    describe('actions', () => {
+      it('should be possible to cancel', (done) => {
+        spyOn(vm, 'cancelHandler').and.callThrough();
+        vm.isEditing = true;
+
+        Vue.nextTick(() => {
+          vm.$el.querySelector('.note-edit-cancel').click();
+
+          Vue.nextTick(() => {
+            expect(vm.cancelHandler).toHaveBeenCalled();
+            done();
+          });
+        });
+      });
+
+      it('should be possible to update the note', (done) => {
+        vm.isEditing = true;
+
+        Vue.nextTick(() => {
+          vm.$el.querySelector('textarea').value = 'Foo';
+          vm.$el.querySelector('.js-vue-issue-save').click();
+
+          Vue.nextTick(() => {
+            expect(vm.isSubmitting).toEqual(true);
+            done();
+          });
+        });
+      });
+    });
+  });
+});