Merge branch 'winh-note-actions-vue-test-utils' into 'master'

Convert note_actions_spec.js to Vue test utils

See merge request gitlab-org/gitlab-ce!24665

2 files changed, 43 insertions, 19 deletions

diff --git a/spec/javascripts/notes/components/note_actions_spec.js b/spec/javascripts/notes/components/note_actions_spec.js
index f6c854e6def..b102b7aecf7 100644
--- a/spec/javascripts/notes/components/note_actions_spec.js
+++ b/spec/javascripts/notes/components/note_actions_spec.js
@@ -1,20 +1,19 @@
 import Vue from 'vue';
+import { shallowMount, createLocalVue } from '@vue/test-utils';
 import createStore from '~/notes/stores';
 import noteActions from '~/notes/components/note_actions.vue';
 import { userDataMock } from '../mock_data';
 
-describe('issue_note_actions component', () => {
-  let vm;
+describe('noteActions', () => {
+  let wrapper;
   let store;
-  let Component;
 
   beforeEach(() => {
-    Component = Vue.extend(noteActions);
     store = createStore();
   });
 
   afterEach(() => {
-    vm.$destroy();
+    wrapper.destroy();
   });
 
   describe('user is logged in', () => {
@@ -36,45 +35,57 @@ describe('issue_note_actions component', () => {
 
       store.dispatch('setUserData', userDataMock);
 
-      vm = new Component({
+      const localVue = createLocalVue();
+      wrapper = shallowMount(noteActions, {
         store,
         propsData: props,
-      }).$mount();
+        localVue,
+        sync: false,
+      });
     });
 
     it('should render access level badge', () => {
-      expect(vm.$el.querySelector('.note-role').textContent.trim()).toEqual(props.accessLevel);
+      expect(
+        wrapper
+          .find('.note-role')
+          .text()
+          .trim(),
+      ).toEqual(props.accessLevel);
     });
 
     it('should render emoji link', () => {
-      expect(vm.$el.querySelector('.js-add-award')).toBeDefined();
+      expect(wrapper.find('.js-add-award').exists()).toBe(true);
     });
 
     describe('actions dropdown', () => {
       it('should be possible to edit the comment', () => {
-        expect(vm.$el.querySelector('.js-note-edit')).toBeDefined();
+        expect(wrapper.find('.js-note-edit').exists()).toBe(true);
       });
 
       it('should be possible to report abuse to GitLab', () => {
-        expect(vm.$el.querySelector(`a[href="${props.reportAbusePath}"]`)).toBeDefined();
+        expect(wrapper.find(`a[href="${props.reportAbusePath}"]`).exists()).toBe(true);
       });
 
       it('should be possible to copy link to a note', () => {
-        expect(vm.$el.querySelector('.js-btn-copy-note-link')).not.toBeNull();
+        expect(wrapper.find('.js-btn-copy-note-link').exists()).toBe(true);
       });
 
       it('should not show copy link action when `noteUrl` prop is empty', done => {
-        vm.noteUrl = '';
+        wrapper.setProps({
+          ...props,
+          noteUrl: '',
+        });
+
         Vue.nextTick()
           .then(() => {
-            expect(vm.$el.querySelector('.js-btn-copy-note-link')).toBeNull();
+            expect(wrapper.find('.js-btn-copy-note-link').exists()).toBe(false);
           })
           .then(done)
           .catch(done.fail);
       });
 
       it('should be possible to delete comment', () => {
-        expect(vm.$el.querySelector('.js-note-delete')).toBeDefined();
+        expect(wrapper.find('.js-note-delete').exists()).toBe(true);
       });
     });
   });
@@ -96,18 +107,21 @@ describe('issue_note_actions component', () => {
         reportAbusePath:
           '/abuse_reports/new?ref_url=http%3A%2F%2Flocalhost%3A3000%2Fgitlab-org%2Fgitlab-ce%2Fissues%2F7%23note_539&user_id=26',
       };
-      vm = new Component({
+      const localVue = createLocalVue();
+      wrapper = shallowMount(noteActions, {
         store,
         propsData: props,
-      }).$mount();
+        localVue,
+        sync: false,
+      });
     });
 
     it('should not render emoji link', () => {
-      expect(vm.$el.querySelector('.js-add-award')).toEqual(null);
+      expect(wrapper.find('.js-add-award').exists()).toBe(false);
     });
 
     it('should not render actions dropdown', () => {
-      expect(vm.$el.querySelector('.more-actions')).toEqual(null);
+      expect(wrapper.find('.more-actions').exists()).toBe(false);
     });
   });
 });
diff --git a/spec/javascripts/test_bundle.js b/spec/javascripts/test_bundle.js
index 547379dabed..b2b0a50911d 100644
--- a/spec/javascripts/test_bundle.js
+++ b/spec/javascripts/test_bundle.js
@@ -21,6 +21,16 @@ Vue.config.productionTip = false;
 
 let hasVueWarnings = false;
 Vue.config.warnHandler = (msg, vm, trace) => {
+  // The following workaround is necessary, so we are able to use setProps from Vue test utils
+  // see https://github.com/vuejs/vue-test-utils/issues/631#issuecomment-421108344
+  const currentStack = new Error().stack;
+  const isInVueTestUtils = currentStack
+    .split('\n')
+    .some(line => line.startsWith('    at VueWrapper.setProps ('));
+  if (isInVueTestUtils) {
+    return;
+  }
+
   hasVueWarnings = true;
   fail(`${msg}${trace}`);
 };