Convert noteable_discussion_spec.js to Vue test utils

spec/javascripts/notes/components/noteable_discussion_spec.js

-import Vue from 'vue';
+import { shallowMount, createLocalVue } from '@vue/test-utils';
 import createStore from '~/notes/stores';
 import noteableDiscussion from '~/notes/components/noteable_discussion.vue';
 import '~/behaviors/markdown/render_gfm';
@@ -8,9 +8,8 @@ import mockDiffFile from '../../diffs/mock_data/diff_file';
 const discussionWithTwoUnresolvedNotes = 'merge_requests/resolved_diff_discussion.json';
 
 describe('noteable_discussion component', () => {
-  const Component = Vue.extend(noteableDiscussion);
   let store;
-  let vm;
+  let wrapper;
 
   preloadFixtures(discussionWithTwoUnresolvedNotes);
 
@@ -20,54 +19,62 @@ describe('noteable_discussion component', () => {
     store.dispatch('setNoteableData', noteableDataMock);
     store.dispatch('setNotesData', notesDataMock);
 
-    vm = new Component({
+    const localVue = createLocalVue();
+    wrapper = shallowMount(noteableDiscussion, {
       store,
       propsData: { discussion: discussionMock },
-    }).$mount();
+      localVue,
+      sync: false,
+    });
   });
 
   afterEach(() => {
-    vm.$destroy();
+    wrapper.destroy();
   });
 
   it('should render user avatar', () => {
-    expect(vm.$el.querySelector('.user-avatar-link')).not.toBeNull();
+    expect(wrapper.find('.user-avatar-link').exists()).toBe(true);
   });
 
   it('should not render discussion header for non diff discussions', () => {
-    expect(vm.$el.querySelector('.discussion-header')).toBeNull();
+    expect(wrapper.find('.discussion-header').exists()).toBe(false);
   });
 
-  it('should render discussion header', () => {
+  it('should render discussion header', done => {
     const discussion = { ...discussionMock };
     discussion.diff_file = mockDiffFile;
     discussion.diff_discussion = true;
 
-    vm.$destroy();
-    vm = new Component({
-      store,
-      propsData: { discussion },
-    }).$mount();
+    wrapper.setProps({ discussion });
 
-    expect(vm.$el.querySelector('.discussion-header')).not.toBeNull();
+    wrapper.vm
+      .$nextTick()
+      .then(() => {
+        expect(wrapper.find('.discussion-header').exists()).toBe(true);
+      })
+      .then(done)
+      .catch(done.fail);
   });
 
   describe('actions', () => {
     it('should render reply button', () => {
-      expect(vm.$el.querySelector('.js-vue-discussion-reply').textContent.trim()).toEqual(
-        'Reply...',
-      );
+      expect(
+        wrapper
+          .find('.js-vue-discussion-reply')
+          .text()
+          .trim(),
+      ).toEqual('Reply...');
     });
 
     it('should toggle reply form', done => {
-      vm.$el.querySelector('.js-vue-discussion-reply').click();
+      wrapper.find('.js-vue-discussion-reply').trigger('click');
 
-      Vue.nextTick(() => {
-        expect(vm.isReplying).toEqual(true);
+      wrapper.vm.$nextTick(() => {
+        expect(wrapper.vm.isReplying).toEqual(true);
 
         // There is a watcher for `isReplying` which will init autosave in the next tick
-        Vue.nextTick(() => {
-          expect(vm.$refs.noteForm).not.toBeNull();
+        wrapper.vm.$nextTick(() => {
+          expect(wrapper.vm.$refs.noteForm).not.toBeNull();
           done();
         });
       });
@@ -75,8 +82,8 @@ describe('noteable_discussion component', () => {
 
     it('does not render jump to discussion button', () => {
       expect(
-        vm.$el.querySelector('*[data-original-title="Jump to next unresolved discussion"]'),
-      ).toBeNull();
+        wrapper.find('*[data-original-title="Jump to next unresolved discussion"]').exists(),
+      ).toBe(false);
     });
   });
 
@@ -87,12 +94,13 @@ describe('noteable_discussion component', () => {
         discussion2.resolved = false;
         discussion2.active = true;
         discussion2.id = 'next'; // prepare this for being identified as next one (to be jumped to)
-        vm.$store.dispatch('setInitialNotes', [discussionMock, discussion2]);
+        store.dispatch('setInitialNotes', [discussionMock, discussion2]);
         window.mrTabs.currentAction = 'show';
 
-        Vue.nextTick()
+        wrapper.vm
+          .$nextTick()
           .then(() => {
-            spyOn(vm, 'expandDiscussion').and.stub();
+            spyOn(wrapper.vm, 'expandDiscussion').and.stub();
 
             const nextDiscussionId = discussion2.id;
 
@@ -100,9 +108,11 @@ describe('noteable_discussion component', () => {
               <div class="discussion" data-discussion-id="${nextDiscussionId}"></div>
             `);
 
-            vm.jumpToNextDiscussion();
+            wrapper.vm.jumpToNextDiscussion();
 
-            expect(vm.expandDiscussion).toHaveBeenCalledWith({ discussionId: nextDiscussionId });
+            expect(wrapper.vm.expandDiscussion).toHaveBeenCalledWith({
+              discussionId: nextDiscussionId,
+            });
           })
           .then(done)
           .catch(done.fail);
@@ -117,7 +127,7 @@ describe('noteable_discussion component', () => {
         notes: [{ body: 'hello world!' }],
       };
 
-      const note = vm.componentData(data);
+      const note = wrapper.vm.componentData(data);
 
       expect(note).toEqual(data.notes[0]);
     });
@@ -127,7 +137,7 @@ describe('noteable_discussion component', () => {
         notes: [{ id: 12 }],
       };
 
-      const note = vm.componentData(data);
+      const note = wrapper.vm.componentData(data);
 
       expect(note).toEqual(data);
     });
@@ -138,46 +148,48 @@ describe('noteable_discussion component', () => {
     const truncatedCommitId = commitId.substr(0, 8);
     let commitElement;
 
-    beforeEach(() => {
-      vm.$destroy();
-
+    beforeEach(done => {
       store.state.diffs = {
         projectPath: 'something',
       };
 
-      vm = new Component({
-        propsData: {
-          discussion: {
-            ...discussionMock,
-            for_commit: true,
-            commit_id: commitId,
-            diff_discussion: true,
-            diff_file: {
-              ...mockDiffFile,
-            },
+      wrapper.setProps({
+        discussion: {
+          ...discussionMock,
+          for_commit: true,
+          commit_id: commitId,
+          diff_discussion: true,
+          diff_file: {
+            ...mockDiffFile,
           },
-          renderDiffFile: true,
         },
-        store,
-      }).$mount();
+        renderDiffFile: true,
+      });
 
-      commitElement = vm.$el.querySelector('.commit-sha');
+      wrapper.vm
+        .$nextTick()
+        .then(() => {
+          commitElement = wrapper.find('.commit-sha');
+        })
+        .then(done)
+        .catch(done.fail);
     });
 
     describe('for commit discussions', () => {
       it('should display a monospace started a discussion on commit', () => {
-        expect(vm.$el).toContainText(`started a discussion on commit ${truncatedCommitId}`);
-        expect(commitElement).not.toBe(null);
-        expect(commitElement).toHaveText(truncatedCommitId);
+        expect(wrapper.text()).toContain(`started a discussion on commit ${truncatedCommitId}`);
+        expect(commitElement.exists()).toBe(true);
+        expect(commitElement.text()).toContain(truncatedCommitId);
       });
     });
 
     describe('for diff discussion with a commit id', () => {
       it('should display started discussion on commit header', done => {
-        vm.discussion.for_commit = false;
+        wrapper.vm.discussion.for_commit = false;
+
+        wrapper.vm.$nextTick(() => {
+          expect(wrapper.text()).toContain(`started a discussion on commit ${truncatedCommitId}`);
 
-        vm.$nextTick(() => {
-          expect(vm.$el).toContainText(`started a discussion on commit ${truncatedCommitId}`);
           expect(commitElement).not.toBe(null);
 
           done();
@@ -185,11 +197,11 @@ describe('noteable_discussion component', () => {
       });
 
       it('should display outdated change on commit header', done => {
-        vm.discussion.for_commit = false;
-        vm.discussion.active = false;
+        wrapper.vm.discussion.for_commit = false;
+        wrapper.vm.discussion.active = false;
 
-        vm.$nextTick(() => {
-          expect(vm.$el).toContainText(
+        wrapper.vm.$nextTick(() => {
+          expect(wrapper.text()).toContain(
             `started a discussion on an outdated change in commit ${truncatedCommitId}`,
           );
 
@@ -202,27 +214,27 @@ describe('noteable_discussion component', () => {
 
     describe('for diff discussions without a commit id', () => {
       it('should show started a discussion on the diff text', done => {
-        Object.assign(vm.discussion, {
+        Object.assign(wrapper.vm.discussion, {
           for_commit: false,
           commit_id: null,
         });
 
-        vm.$nextTick(() => {
-          expect(vm.$el).toContainText('started a discussion on the diff');
+        wrapper.vm.$nextTick(() => {
+          expect(wrapper.text()).toContain('started a discussion on the diff');
 
           done();
         });
       });
 
       it('should show discussion on older version text', done => {
-        Object.assign(vm.discussion, {
+        Object.assign(wrapper.vm.discussion, {
           for_commit: false,
           commit_id: null,
           active: false,
         });
 
-        vm.$nextTick(() => {
-          expect(vm.$el).toContainText('started a discussion on an old version of the diff');
+        wrapper.vm.$nextTick(() => {
+          expect(wrapper.text()).toContain('started a discussion on an old version of the diff');
 
           done();
         });