Refactor note_form_spec.js to use Vue test utils

spec/javascripts/notes/components/note_form_spec.js

-import Vue from 'vue';
+import { shallowMount, createLocalVue } from '@vue/test-utils';
 import createStore from '~/notes/stores';
-import issueNoteForm from '~/notes/components/note_form.vue';
+import NoteForm from '~/notes/components/note_form.vue';
+import MarkdownField from '~/vue_shared/components/markdown/field.vue';
 import { noteableDataMock, notesDataMock } from '../mock_data';
-import { keyboardDownEvent } from '../../issue_show/helpers';
 
 describe('issue_note_form component', () => {
   let store;
-  let vm;
+  let wrapper;
   let props;
 
   beforeEach(() => {
-    const Component = Vue.extend(issueNoteForm);
-
     store = createStore();
     store.dispatch('setNoteableData', noteableDataMock);
     store.dispatch('setNotesData', notesDataMock);
@@ -22,26 +20,35 @@ describe('issue_note_form component', () => {
       noteId: '545',
     };
 
-    vm = new Component({
+    const localVue = createLocalVue();
+    wrapper = shallowMount(NoteForm, {
       store,
       propsData: props,
-    }).$mount();
+      // see https://gitlab.com/gitlab-org/gitlab-ce/issues/56317 for the following
+      localVue,
+      sync: false,
+    });
   });
 
   afterEach(() => {
-    vm.$destroy();
+    wrapper.destroy();
   });
 
   describe('noteHash', () => {
     it('returns note hash string based on `noteId`', () => {
-      expect(vm.noteHash).toBe(`#note_${props.noteId}`);
+      expect(wrapper.vm.noteHash).toBe(`#note_${props.noteId}`);
     });
 
     it('return note hash as `#` when `noteId` is empty', done => {
-      vm.noteId = '';
-      Vue.nextTick()
+      wrapper.setProps({
+        ...props,
+        noteId: '',
+      });
+
+      wrapper.vm
+        .$nextTick()
         .then(() => {
-          expect(vm.noteHash).toBe('#');
+          expect(wrapper.vm.noteHash).toBe('#');
         })
         .then(done)
         .catch(done.fail);
@@ -50,95 +57,127 @@ describe('issue_note_form component', () => {
 
   describe('conflicts editing', () => {
     it('should show conflict message if note changes outside the component', done => {
-      vm.isEditing = true;
-      vm.noteBody = 'Foo';
+      wrapper.setProps({
+        ...props,
+        isEditing: true,
+        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(() => {
+      wrapper.vm
+        .$nextTick()
+        .then(() => {
+          const conflictWarning = wrapper.find('.js-conflict-edit-warning');
+
+          expect(conflictWarning.exists()).toBe(true);
           expect(
-          vm.$el
-            .querySelector('.js-conflict-edit-warning')
-            .textContent.replace(/\s+/g, ' ')
+            conflictWarning
+              .text()
+              .replace(/\s+/g, ' ')
               .trim(),
-        ).toEqual(message);
-        done();
-      });
+          ).toBe(message);
+        })
+        .then(done)
+        .catch(done.fail);
     });
   });
 
   describe('form', () => {
     it('should render text area with placeholder', () => {
-      expect(vm.$el.querySelector('textarea').getAttribute('placeholder')).toEqual(
+      const textarea = wrapper.find('textarea');
+
+      expect(textarea.attributes('placeholder')).toEqual(
         'Write a comment or drag your files here…',
       );
     });
 
     it('should link to markdown docs', () => {
       const { markdownDocsPath } = notesDataMock;
+      const markdownField = wrapper.find(MarkdownField);
+      const markdownFieldProps = markdownField.props();
 
-      expect(vm.$el.querySelector(`a[href="${markdownDocsPath}"]`).textContent.trim()).toEqual(
-        'Markdown',
-      );
+      expect(markdownFieldProps.markdownDocsPath).toBe(markdownDocsPath);
     });
 
     describe('keyboard events', () => {
+      let textarea;
+
+      beforeEach(() => {
+        textarea = wrapper.find('textarea');
+        textarea.setValue('Foo');
+      });
+
       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));
+          // TODO: do not spy on vm
+          spyOn(wrapper.vm, 'editMyLastNote').and.callThrough();
 
-          expect(vm.editMyLastNote).toHaveBeenCalled();
+          textarea.trigger('keydown.up');
+
+          expect(wrapper.vm.editMyLastNote).toHaveBeenCalled();
         });
       });
 
       describe('enter', () => {
         it('should save note when cmd+enter is pressed', () => {
-          spyOn(vm, 'handleUpdate').and.callThrough();
-          vm.$el.querySelector('textarea').value = 'Foo';
-          vm.$el.querySelector('textarea').dispatchEvent(keyboardDownEvent(13, true));
+          textarea.trigger('keydown.enter', { metaKey: true });
+
+          const { handleFormUpdate } = wrapper.emitted();
 
-          expect(vm.handleUpdate).toHaveBeenCalled();
+          expect(handleFormUpdate.length).toBe(1);
         });
 
         it('should save note when ctrl+enter is pressed', () => {
-          spyOn(vm, 'handleUpdate').and.callThrough();
-          vm.$el.querySelector('textarea').value = 'Foo';
-          vm.$el.querySelector('textarea').dispatchEvent(keyboardDownEvent(13, false, true));
+          textarea.trigger('keydown.enter', { ctrlKey: true });
+
+          const { handleFormUpdate } = wrapper.emitted();
 
-          expect(vm.handleUpdate).toHaveBeenCalled();
+          expect(handleFormUpdate.length).toBe(1);
         });
       });
     });
 
     describe('actions', () => {
       it('should be possible to cancel', done => {
-        spyOn(vm, 'cancelHandler').and.callThrough();
-        vm.isEditing = true;
+        // TODO: do not spy on vm
+        spyOn(wrapper.vm, 'cancelHandler').and.callThrough();
+        wrapper.setProps({
+          ...props,
+          isEditing: true,
+        });
 
-        Vue.nextTick(() => {
-          vm.$el.querySelector('.note-edit-cancel').click();
+        wrapper.vm
+          .$nextTick()
+          .then(() => {
+            const cancelButton = wrapper.find('.note-edit-cancel');
+            cancelButton.trigger('click');
 
-          Vue.nextTick(() => {
-            expect(vm.cancelHandler).toHaveBeenCalled();
-            done();
-          });
-        });
+            expect(wrapper.vm.cancelHandler).toHaveBeenCalled();
+          })
+          .then(done)
+          .catch(done.fail);
       });
 
       it('should be possible to update the note', done => {
-        vm.isEditing = true;
+        wrapper.setProps({
+          ...props,
+          isEditing: true,
+        });
 
-        Vue.nextTick(() => {
-          vm.$el.querySelector('textarea').value = 'Foo';
-          vm.$el.querySelector('.js-vue-issue-save').click();
+        wrapper.vm
+          .$nextTick()
+          .then(() => {
+            const textarea = wrapper.find('textarea');
+            textarea.setValue('Foo');
+            const saveButton = wrapper.find('.js-vue-issue-save');
+            saveButton.trigger('click');
 
-          Vue.nextTick(() => {
-            expect(vm.isSubmitting).toEqual(true);
-            done();
-          });
-        });
+            expect(wrapper.vm.isSubmitting).toEqual(true);
+          })
+          .then(done)
+          .catch(done.fail);
       });
     });
   });