Merge branch 'xanf-v1-set-methods-rip' into 'master'

Upgrading VTU to v1: Remove deprecated `setMethods` calls

See merge request gitlab-org/gitlab!50592

spec/frontend/design_management/components/design_presentation_spec.js

+import { nextTick } from 'vue';
 import { shallowMount } from '@vue/test-utils';
 import DesignPresentation from '~/design_management/components/design_presentation.vue';
 import DesignOverlay from '~/design_management/components/design_overlay.vue';
@@ -100,12 +101,12 @@ describe('Design management design presentation component', () => {
           clientY: endCoords.clientY,
         });
 
-        return wrapper.vm.$nextTick();
+        return nextTick();
       })
       .then(() => {
         if (mouseup) {
           addCommentOverlay.trigger(event.mouseup);
-          return wrapper.vm.$nextTick();
+          return nextTick();
         }
 
         return undefined;
@@ -125,7 +126,7 @@ describe('Design management design presentation component', () => {
       mockOverlayData,
     );
 
-    return wrapper.vm.$nextTick().then(() => {
+    return nextTick().then(() => {
       expect(wrapper.element).toMatchSnapshot();
     });
   });
@@ -133,7 +134,7 @@ describe('Design management design presentation component', () => {
   it('renders empty state when no image provided', () => {
     createComponent();
 
-    return wrapper.vm.$nextTick().then(() => {
+    return nextTick().then(() => {
       expect(wrapper.element).toMatchSnapshot();
     });
   });
@@ -149,7 +150,7 @@ describe('Design management design presentation component', () => {
 
     wrapper.vm.openCommentForm({ x: 1, y: 1 });
 
-    return wrapper.vm.$nextTick().then(() => {
+    return nextTick().then(() => {
       expect(wrapper.emitted('openCommentForm')).toEqual([
         [{ ...mockOverlayData.overlayDimensions, x: 1, y: 1 }],
       ]);
@@ -166,7 +167,7 @@ describe('Design management design presentation component', () => {
         mockOverlayData,
       );
 
-      return wrapper.vm.$nextTick().then(() => {
+      return nextTick().then(() => {
         expect(wrapper.vm.currentCommentForm).toBeNull();
         expect(wrapper.element).toMatchSnapshot();
       });
@@ -182,7 +183,7 @@ describe('Design management design presentation component', () => {
         mockOverlayData,
       );
 
-      return wrapper.vm.$nextTick().then(() => {
+      return nextTick().then(() => {
         expect(wrapper.vm.currentCommentForm).toBeNull();
         expect(wrapper.element).toMatchSnapshot();
       });
@@ -206,7 +207,7 @@ describe('Design management design presentation component', () => {
         },
       );
 
-      return wrapper.vm.$nextTick().then(() => {
+      return nextTick().then(() => {
         expect(wrapper.vm.currentCommentForm).toEqual({
           x: 1,
           y: 1,
@@ -379,7 +380,7 @@ describe('Design management design presentation component', () => {
   });
 
   describe('onImageResize', () => {
-    it('sets zoom focal point on initial load', () => {
+    beforeEach(() => {
       createComponent(
         {
           image: 'test.jpg',
@@ -388,22 +389,21 @@ describe('Design management design presentation component', () => {
         mockOverlayData,
       );
 
-      wrapper.setMethods({
-        shiftZoomFocalPoint: jest.fn(),
-        scaleZoomFocalPoint: jest.fn(),
-        scrollToFocalPoint: jest.fn(),
-      });
-
+      jest.spyOn(wrapper.vm, 'shiftZoomFocalPoint');
+      jest.spyOn(wrapper.vm, 'scaleZoomFocalPoint');
+      jest.spyOn(wrapper.vm, 'scrollToFocalPoint');
       wrapper.vm.onImageResize({ width: 10, height: 10 });
-      return wrapper.vm.$nextTick().then(() => {
-        expect(wrapper.vm.shiftZoomFocalPoint).toHaveBeenCalled();
-        expect(wrapper.vm.initialLoad).toBe(false);
-      });
+      return nextTick();
+    });
+
+    it('sets zoom focal point on initial load', () => {
+      expect(wrapper.vm.shiftZoomFocalPoint).toHaveBeenCalled();
+      expect(wrapper.vm.initialLoad).toBe(false);
     });
 
     it('calls scaleZoomFocalPoint and scrollToFocalPoint after initial load', () => {
       wrapper.vm.onImageResize({ width: 10, height: 10 });
-      return wrapper.vm.$nextTick().then(() => {
+      return nextTick().then(() => {
         expect(wrapper.vm.scaleZoomFocalPoint).toHaveBeenCalled();
         expect(wrapper.vm.scrollToFocalPoint).toHaveBeenCalled();
       });
@@ -506,7 +506,7 @@ describe('Design management design presentation component', () => {
         .$nextTick()
         .then(() => {
           addCommentOverlay.trigger('mouseup');
-          return wrapper.vm.$nextTick();
+          return nextTick();
         })
         .then(() => {
           expect(wrapper.emitted('openCommentForm')).toBeDefined();

spec/frontend/diffs/components/app_spec.js

-import { nextTick } from 'vue';
+import Vue, { nextTick } from 'vue';
 import Vuex from 'vuex';
-import { shallowMount, createLocalVue } from '@vue/test-utils';
+import { shallowMount } from '@vue/test-utils';
 import { GlLoadingIcon, GlPagination } from '@gitlab/ui';
 import MockAdapter from 'axios-mock-adapter';
 import { TEST_HOST } from 'spec/test_constants';
@@ -27,6 +27,8 @@ const TEST_ENDPOINT = `${TEST_HOST}/diff/endpoint`;
 const COMMIT_URL = `${TEST_HOST}/COMMIT/OLD`;
 const UPDATED_COMMIT_URL = `${TEST_HOST}/COMMIT/NEW`;
 
+Vue.use(Vuex);
+
 function getCollapsedFilesWarning(wrapper) {
   return wrapper.find(CollapsedFilesWarning);
 }
@@ -38,7 +40,6 @@ describe('diffs/components/app', () => {
   let mock;
 
   function createComponent(props = {}, extendStore = () => {}, provisions = {}) {
-    const localVue = createLocalVue();
     const provide = {
       ...provisions,
       glFeatures: {
@@ -46,8 +47,6 @@ describe('diffs/components/app', () => {
       },
     };
 
-    localVue.use(Vuex);
-
     store = createDiffsStore();
     store.state.diffs.isLoading = false;
     store.state.diffs.isTreeLoaded = true;
@@ -55,7 +54,6 @@ describe('diffs/components/app', () => {
     extendStore(store);
 
     wrapper = shallowMount(App, {
-      localVue,
       propsData: {
         endpoint: TEST_ENDPOINT,
         endpointMetadata: `${TEST_HOST}/diff/endpointMetadata`,
@@ -262,7 +260,7 @@ describe('diffs/components/app', () => {
       shouldShow: true,
     });
 
-    // Component uses $nextTick so we wait until that has finished
+    // Component uses nextTick so we wait until that has finished
     await nextTick();
 
     expect(store.state.diffs.currentDiffFileId).toBe('ABC');
@@ -298,8 +296,8 @@ describe('diffs/components/app', () => {
 
   describe('keyboard shortcut navigation', () => {
     let spies = [];
-    let jumpSpy;
     let moveSpy;
+    let jumpSpy;
 
     function setup(componentProps, featureFlags) {
       createComponent(
@@ -311,11 +309,8 @@ describe('diffs/components/app', () => {
       );
 
       moveSpy = jest.spyOn(wrapper.vm, 'moveToNeighboringCommit').mockImplementation(() => {});
-      jumpSpy = jest.fn();
+      jumpSpy = jest.spyOn(wrapper.vm, 'jumpToFile').mockImplementation(() => {});
       spies = [jumpSpy, moveSpy];
-      wrapper.setMethods({
-        jumpToFile: jumpSpy,
-      });
     }
 
     describe('visible app', () => {
@@ -404,8 +399,6 @@ describe('diffs/components/app', () => {
     let spy;
 
     beforeEach(() => {
-      spy = jest.fn();
-
       createComponent({}, () => {
         store.state.diffs.diffFiles = [
           { file_hash: '111', file_path: '111.js' },
@@ -413,10 +406,7 @@ describe('diffs/components/app', () => {
           { file_hash: '333', file_path: '333.js' },
         ];
       });
-
-      wrapper.setMethods({
-        scrollToFile: spy,
-      });
+      spy = jest.spyOn(store, 'dispatch');
     });
 
     afterEach(() => {
@@ -428,15 +418,15 @@ describe('diffs/components/app', () => {
 
       wrapper.vm.jumpToFile(+1);
 
-      expect(spy.mock.calls[spy.mock.calls.length - 1]).toEqual(['222.js']);
+      expect(spy.mock.calls[spy.mock.calls.length - 1]).toEqual(['diffs/scrollToFile', '222.js']);
       store.state.diffs.currentDiffFileId = '222';
       wrapper.vm.jumpToFile(+1);
 
-      expect(spy.mock.calls[spy.mock.calls.length - 1]).toEqual(['333.js']);
+      expect(spy.mock.calls[spy.mock.calls.length - 1]).toEqual(['diffs/scrollToFile', '333.js']);
       store.state.diffs.currentDiffFileId = '333';
       wrapper.vm.jumpToFile(-1);
 
-      expect(spy.mock.calls[spy.mock.calls.length - 1]).toEqual(['222.js']);
+      expect(spy.mock.calls[spy.mock.calls.length - 1]).toEqual(['diffs/scrollToFile', '222.js']);
     });
 
     it('does not jump to previous file from the first one', async () => {
@@ -611,12 +601,6 @@ describe('diffs/components/app', () => {
   });
 
   describe('setTreeDisplay', () => {
-    let setShowTreeList;
-
-    beforeEach(() => {
-      setShowTreeList = jest.fn();
-    });
-
     afterEach(() => {
       localStorage.removeItem('mr_tree_show');
     });
@@ -625,14 +609,13 @@ describe('diffs/components/app', () => {
       createComponent({}, ({ state }) => {
         state.diffs.diffFiles.push({ sha: '123' });
       });
-
-      wrapper.setMethods({
-        setShowTreeList,
-      });
-
+      jest.spyOn(store, 'dispatch');
       wrapper.vm.setTreeDisplay();
 
-      expect(setShowTreeList).toHaveBeenCalledWith({ showTreeList: false, saving: false });
+      expect(store.dispatch).toHaveBeenCalledWith('diffs/setShowTreeList', {
+        showTreeList: false,
+        saving: false,
+      });
     });
 
     it('calls setShowTreeList with true when more than 1 file is in diffs array', () => {
@@ -640,14 +623,14 @@ describe('diffs/components/app', () => {
         state.diffs.diffFiles.push({ sha: '123' });
         state.diffs.diffFiles.push({ sha: '124' });
       });
-
-      wrapper.setMethods({
-        setShowTreeList,
-      });
+      jest.spyOn(store, 'dispatch');
 
       wrapper.vm.setTreeDisplay();
 
-      expect(setShowTreeList).toHaveBeenCalledWith({ showTreeList: true, saving: false });
+      expect(store.dispatch).toHaveBeenCalledWith('diffs/setShowTreeList', {
+        showTreeList: true,
+        saving: false,
+      });
     });
 
     it.each`
@@ -660,14 +643,14 @@ describe('diffs/components/app', () => {
       createComponent({}, ({ state }) => {
         state.diffs.diffFiles.push({ sha: '123' });
       });
-
-      wrapper.setMethods({
-        setShowTreeList,
-      });
+      jest.spyOn(store, 'dispatch');
 
       wrapper.vm.setTreeDisplay();
 
-      expect(setShowTreeList).toHaveBeenCalledWith({ showTreeList, saving: false });
+      expect(store.dispatch).toHaveBeenCalledWith('diffs/setShowTreeList', {
+        showTreeList,
+        saving: false,
+      });
     });
   });
 

spec/frontend/ide/components/terminal/terminal_spec.js

-import { createLocalVue, shallowMount } from '@vue/test-utils';
+import Vue, { nextTick } from 'vue';
+import { shallowMount } from '@vue/test-utils';
 import Vuex from 'vuex';
 import { GlLoadingIcon } from '@gitlab/ui';
 import Terminal from '~/ide/components/terminal/terminal.vue';
@@ -14,17 +15,18 @@ import GLTerminal from '~/terminal/terminal';
 
 const TEST_TERMINAL_PATH = 'terminal/path';
 
-const localVue = createLocalVue();
-localVue.use(Vuex);
+Vue.use(Vuex);
 
 jest.mock('~/terminal/terminal', () =>
-  jest.fn().mockImplementation(() => ({
-    dispose: jest.fn(),
-    disable: jest.fn(),
-    addScrollListener: jest.fn(),
-    scrollToTop: jest.fn(),
-    scrollToBottom: jest.fn(),
-  })),
+  jest.fn().mockImplementation(function FakeTerminal() {
+    Object.assign(this, {
+      dispose: jest.fn(),
+      disable: jest.fn(),
+      addScrollListener: jest.fn(),
+      scrollToTop: jest.fn(),
+      scrollToBottom: jest.fn(),
+    });
+  }),
 );
 
 describe('IDE Terminal', () => {
@@ -41,13 +43,12 @@ describe('IDE Terminal', () => {
       },
     });
 
-    wrapper = shallowMount(localVue.extend(Terminal), {
+    wrapper = shallowMount(Terminal, {
       propsData: {
         status: RUNNING,
         terminalPath: TEST_TERMINAL_PATH,
         ...propsData,
       },
-      localVue,
       store,
     });
   };
@@ -102,7 +103,7 @@ describe('IDE Terminal', () => {
       factory();
       wrapper.vm.createTerminal();
 
-      return localVue.nextTick();
+      return nextTick();
     });
 
     it('is visible if terminal is created', () => {
@@ -129,7 +130,7 @@ describe('IDE Terminal', () => {
 
       wrapper.setData({ canScrollUp: true, canScrollDown: true });
 
-      return localVue.nextTick().then(() => {
+      return nextTick().then(() => {
         expect(wrapper.find(TerminalControls).props()).toEqual({
           canScrollUp: true,
           canScrollDown: true,
@@ -139,30 +140,24 @@ describe('IDE Terminal', () => {
   });
 
   describe('refresh', () => {
-    let createTerminal;
-    let stopTerminal;
-
-    beforeEach(() => {
-      createTerminal = jest.fn().mockName('createTerminal');
-      stopTerminal = jest.fn().mockName('stopTerminal');
-    });
-
     it('creates the terminal if running', () => {
       factory({ status: RUNNING, terminalPath: TEST_TERMINAL_PATH });
 
-      wrapper.setMethods({ createTerminal });
       wrapper.vm.refresh();
 
-      expect(createTerminal).toHaveBeenCalled();
+      expect(GLTerminal.mock.instances).toHaveLength(1);
     });
 
-    it('stops the terminal if stopping', () => {
-      factory({ status: STOPPING });
+    it('stops the terminal if stopping', async () => {
+      factory({ status: RUNNING, terminalPath: TEST_TERMINAL_PATH });
 
-      wrapper.setMethods({ stopTerminal });
       wrapper.vm.refresh();
 
-      expect(stopTerminal).toHaveBeenCalled();
+      const terminal = GLTerminal.mock.instances[0];
+      wrapper.setProps({ status: STOPPING });
+      await nextTick();
+
+      expect(terminal.disable).toHaveBeenCalled();
     });
   });
 

spec/frontend/notes/components/discussion_jump_to_next_button_spec.js

@@ -13,7 +13,8 @@ describe('JumpToNextDiscussionButton', () => {
     wrapper = shallowMount(JumpToNextDiscussionButton, {
       propsData: { fromDiscussionId },
     });
-    wrapper.setMethods({ jumpToNextRelativeDiscussion: jumpFn });
+
+    jest.spyOn(wrapper.vm, 'jumpToNextRelativeDiscussion').mockImplementation(jumpFn);
 
     trackingSpy = mockTracking('_category_', wrapper.element, jest.spyOn);
   });

spec/frontend/notes/components/note_form_spec.js

-import { shallowMount, createLocalVue } from '@vue/test-utils';
+import { nextTick } from 'vue';
+import { shallowMount } from '@vue/test-utils';
 import createStore from '~/notes/stores';
 import NoteForm from '~/notes/components/note_form.vue';
 import batchComments from '~/batch_comments/stores/modules/batch_comments';
@@ -18,12 +19,9 @@ describe('issue_note_form component', () => {
   let props;
 
   const createComponentWrapper = () => {
-    const localVue = createLocalVue();
-    return shallowMount(localVue.extend(NoteForm), {
+    return shallowMount(NoteForm, {
       store,
       propsData: props,
-      // see https://gitlab.com/gitlab-org/gitlab-foss/issues/56317 for the following
-      localVue,
     });
   };
 
@@ -60,15 +58,14 @@ describe('issue_note_form component', () => {
       expect(wrapper.vm.noteHash).toBe(`#note_${props.noteId}`);
     });
 
-    it('return note hash as `#` when `noteId` is empty', () => {
+    it('return note hash as `#` when `noteId` is empty', async () => {
       wrapper.setProps({
         ...props,
         noteId: '',
       });
+      await nextTick();
 
-      return wrapper.vm.$nextTick().then(() => {
-        expect(wrapper.vm.noteHash).toBe('#');
-      });
+      expect(wrapper.vm.noteHash).toBe('#');
     });
   });
 
@@ -77,7 +74,7 @@ describe('issue_note_form component', () => {
       wrapper = createComponentWrapper();
     });
 
-    it('should show conflict message if note changes outside the component', () => {
+    it('should show conflict message if note changes outside the component', async () => {
       wrapper.setProps({
         ...props,
         isEditing: true,
@@ -87,12 +84,12 @@ describe('issue_note_form component', () => {
       const message =
         'This comment has changed since you started editing, please review the updated comment to ensure information is not lost.';
 
-      return wrapper.vm.$nextTick().then(() => {
-        const conflictWarning = wrapper.find('.js-conflict-edit-warning');
+      await nextTick();
 
-        expect(conflictWarning.exists()).toBe(true);
-        expect(conflictWarning.text().replace(/\s+/g, ' ').trim()).toBe(message);
-      });
+      const conflictWarning = wrapper.find('.js-conflict-edit-warning');
+
+      expect(conflictWarning.exists()).toBe(true);
+      expect(conflictWarning.text().replace(/\s+/g, ' ').trim()).toBe(message);
     });
   });
 
@@ -156,36 +153,33 @@ describe('issue_note_form component', () => {
     });
 
     describe('actions', () => {
-      it('should be possible to cancel', () => {
-        const cancelHandler = jest.fn();
+      it('should be possible to cancel', async () => {
         wrapper.setProps({
           ...props,
           isEditing: true,
         });
-        wrapper.setMethods({ cancelHandler });
+        await nextTick();
 
-        return wrapper.vm.$nextTick().then(() => {
-          const cancelButton = wrapper.find('[data-testid="cancel"]');
-          cancelButton.trigger('click');
+        const cancelButton = wrapper.find('[data-testid="cancel"]');
+        cancelButton.trigger('click');
+        await nextTick();
 
-          expect(cancelHandler).toHaveBeenCalledWith(true);
-        });
+        expect(wrapper.emitted().cancelForm).toHaveLength(1);
       });
 
-      it('should be possible to update the note', () => {
+      it('should be possible to update the note', async () => {
         wrapper.setProps({
           ...props,
           isEditing: true,
         });
+        await nextTick();
 
-        return wrapper.vm.$nextTick().then(() => {
-          const textarea = wrapper.find('textarea');
-          textarea.setValue('Foo');
-          const saveButton = wrapper.find('.js-vue-issue-save');
-          saveButton.trigger('click');
+        const textarea = wrapper.find('textarea');
+        textarea.setValue('Foo');
+        const saveButton = wrapper.find('.js-vue-issue-save');
+        saveButton.trigger('click');
 
-          expect(wrapper.vm.isSubmitting).toBe(true);
-        });
+        expect(wrapper.vm.isSubmitting).toBe(true);
       });
     });
   });
@@ -199,7 +193,7 @@ describe('issue_note_form component', () => {
         });
         wrapper = createComponentWrapper();
 
-        return wrapper.vm.$nextTick();
+        return nextTick();
       });
 
       it('displays the draft in textarea', () => {
@@ -217,7 +211,7 @@ describe('issue_note_form component', () => {
         });
         wrapper = createComponentWrapper();
 
-        return wrapper.vm.$nextTick();
+        return nextTick();
       });
 
       it('leaves the textarea empty', () => {
@@ -273,15 +267,14 @@ describe('issue_note_form component', () => {
       });
     });
 
-    it('should be possible to cancel', () => {
+    it('should be possible to cancel', async () => {
       jest.spyOn(wrapper.vm, 'cancelHandler');
 
-      return wrapper.vm.$nextTick().then(() => {
-        const cancelButton = wrapper.find('[data-testid="cancelBatchCommentsEnabled"]');
-        cancelButton.trigger('click');
+      await nextTick();
+      const cancelButton = wrapper.find('[data-testid="cancelBatchCommentsEnabled"]');
+      cancelButton.trigger('click');
 
-        expect(wrapper.vm.cancelHandler).toHaveBeenCalledWith(true);
-      });
+      expect(wrapper.vm.cancelHandler).toHaveBeenCalledWith(true);
     });
 
     it('shows resolve checkbox', () => {
@@ -304,7 +297,7 @@ describe('issue_note_form component', () => {
         },
       });
 
-      await wrapper.vm.$nextTick();
+      await nextTick();
 
       expect(wrapper.find('.js-resolve-checkbox').exists()).toBe(false);
     });
@@ -312,7 +305,7 @@ describe('issue_note_form component', () => {
     it('hides actions for commits', () => {
       wrapper.setProps({ discussion: { for_commit: true } });
 
-      return wrapper.vm.$nextTick(() => {
+      return nextTick(() => {
         expect(wrapper.find('.note-form-actions').text()).not.toContain('Start a review');
       });
     });
@@ -326,7 +319,7 @@ describe('issue_note_form component', () => {
         textarea.setValue('Foo');
         textarea.trigger('keydown.enter', { metaKey: true });
 
-        return wrapper.vm.$nextTick(() => {
+        return nextTick(() => {
           expect(wrapper.vm.handleAddToReview).toHaveBeenCalled();
         });
       });

spec/frontend/notes/components/noteable_discussion_spec.js

-import { mount, createLocalVue } from '@vue/test-utils';
+import { nextTick } from 'vue';
+import { mount } from '@vue/test-utils';
 import mockDiffFile from 'jest/diffs/mock_data/diff_file';
 import { trimText } from 'helpers/text_helper';
 import createStore from '~/notes/stores';
-import noteableDiscussion from '~/notes/components/noteable_discussion.vue';
+import NoteableDiscussion from '~/notes/components/noteable_discussion.vue';
+import DiscussionNotes from '~/notes/components/discussion_notes.vue';
 import ReplyPlaceholder from '~/notes/components/discussion_reply_placeholder.vue';
 import ResolveWithIssueButton from '~/notes/components/discussion_resolve_with_issue_button.vue';
 import NoteForm from '~/notes/components/note_form.vue';
@@ -17,8 +19,6 @@ import {
 
 const discussionWithTwoUnresolvedNotes = 'merge_requests/resolved_diff_discussion.json';
 
-const localVue = createLocalVue();
-
 describe('noteable_discussion component', () => {
   let store;
   let wrapper;
@@ -32,10 +32,9 @@ describe('noteable_discussion component', () => {
     store.dispatch('setNoteableData', noteableDataMock);
     store.dispatch('setNotesData', notesDataMock);
 
-    wrapper = mount(localVue.extend(noteableDiscussion), {
+    wrapper = mount(NoteableDiscussion, {
       store,
       propsData: { discussion: discussionMock },
-      localVue,
     });
   });
 
@@ -47,63 +46,58 @@ describe('noteable_discussion component', () => {
     expect(wrapper.find('.discussion-header').exists()).toBe(false);
   });
 
-  it('should render thread header', () => {
+  it('should render thread header', async () => {
     const discussion = { ...discussionMock };
     discussion.diff_file = mockDiffFile;
     discussion.diff_discussion = true;
     discussion.expanded = false;
 
     wrapper.setProps({ discussion });
+    await nextTick();
 
-    return wrapper.vm.$nextTick().then(() => {
-      expect(wrapper.find('.discussion-header').exists()).toBe(true);
-    });
+    expect(wrapper.find('.discussion-header').exists()).toBe(true);
   });
 
   describe('actions', () => {
-    it('should toggle reply form', () => {
-      const replyPlaceholder = wrapper.find(ReplyPlaceholder);
+    it('should toggle reply form', async () => {
+      await nextTick();
 
-      return wrapper.vm
-        .$nextTick()
-        .then(() => {
-          expect(wrapper.vm.isReplying).toEqual(false);
+      expect(wrapper.vm.isReplying).toEqual(false);
 
-          replyPlaceholder.vm.$emit('onClick');
-        })
-        .then(() => wrapper.vm.$nextTick())
-        .then(() => {
-          expect(wrapper.vm.isReplying).toEqual(true);
+      const replyPlaceholder = wrapper.find(ReplyPlaceholder);
+      replyPlaceholder.vm.$emit('onClick');
+      await nextTick();
 
-          const noteForm = wrapper.find(NoteForm);
+      expect(wrapper.vm.isReplying).toEqual(true);
 
-          expect(noteForm.exists()).toBe(true);
+      const noteForm = wrapper.find(NoteForm);
 
-          const noteFormProps = noteForm.props();
+      expect(noteForm.exists()).toBe(true);
 
-          expect(noteFormProps.discussion).toBe(discussionMock);
-          expect(noteFormProps.isEditing).toBe(false);
-          expect(noteFormProps.line).toBe(null);
-          expect(noteFormProps.saveButtonTitle).toBe('Comment');
-          expect(noteFormProps.autosaveKey).toBe(`Note/Issue/${discussionMock.id}/Reply`);
-        });
+      const noteFormProps = noteForm.props();
+
+      expect(noteFormProps.discussion).toBe(discussionMock);
+      expect(noteFormProps.isEditing).toBe(false);
+      expect(noteFormProps.line).toBe(null);
+      expect(noteFormProps.saveButtonTitle).toBe('Comment');
+      expect(noteFormProps.autosaveKey).toBe(`Note/Issue/${discussionMock.id}/Reply`);
     });
 
     it('should expand discussion', async () => {
-      const expandDiscussion = jest.fn();
-      const discussion = { ...discussionMock };
-      discussion.expanded = false;
+      const discussion = { ...discussionMock, expanded: false };
 
       wrapper.setProps({ discussion });
-      wrapper.setMethods({ expandDiscussion });
+      store.dispatch = jest.fn();
 
-      await wrapper.vm.$nextTick();
+      await nextTick();
 
-      wrapper.vm.showReplyForm();
+      wrapper.find(DiscussionNotes).vm.$emit('startReplying');
 
-      await wrapper.vm.$nextTick();
+      await nextTick();
 
-      expect(expandDiscussion).toHaveBeenCalledWith({ discussionId: discussion.id });
+      expect(store.dispatch).toHaveBeenCalledWith('expandDiscussion', {
+        discussionId: discussion.id,
+      });
     });
 
     it('does not render jump to thread button', () => {
@@ -143,7 +137,7 @@ describe('noteable_discussion component', () => {
 
       wrapper.setProps({ discussion });
 
-      return wrapper.vm.$nextTick();
+      return nextTick();
     });
 
     it('displays a button to resolve with issue', () => {
@@ -169,10 +163,9 @@ describe('noteable_discussion component', () => {
         window.gon.current_user_id = userDataMock.id;
         store.dispatch('setUserData', userDataMock);
 
-        wrapper = mount(localVue.extend(noteableDiscussion), {
+        wrapper = mount(NoteableDiscussion, {
           store,
           propsData: { discussion: discussionMock },
-          localVue,
         });
       });
 
@@ -188,10 +181,9 @@ describe('noteable_discussion component', () => {
         store.dispatch('setNoteableData', loggedOutnoteableData);
         store.dispatch('setNotesData', notesDataMock);
 
-        wrapper = mount(localVue.extend(noteableDiscussion), {
+        wrapper = mount(NoteableDiscussion, {
           store,
           propsData: { discussion: discussionMock },
-          localVue,
         });
       });
 

spec/frontend/pipelines/graph/graph_component_legacy_spec.js

-import Vue from 'vue';
+import { nextTick } from 'vue';
 import { mount } from '@vue/test-utils';
 import { GlLoadingIcon } from '@gitlab/ui';
 import { setHTMLFixture } from 'helpers/fixtures';
@@ -153,21 +153,20 @@ describe('graph component', () => {
 
       describe('triggered by', () => {
         describe('on click', () => {
-          it('should emit `onClickUpstreamPipeline` when triggered by linked pipeline is clicked', () => {
+          it('should emit `onClickUpstreamPipeline` when triggered by linked pipeline is clicked', async () => {
             const btnWrapper = findExpandPipelineBtn();
 
             btnWrapper.trigger('click');
 
-            btnWrapper.vm.$nextTick(() => {
-              expect(wrapper.emitted().onClickUpstreamPipeline).toEqual([
-                store.state.pipeline.triggered_by,
-              ]);
-            });
+            await nextTick();
+            expect(wrapper.emitted().onClickUpstreamPipeline).toEqual([
+              store.state.pipeline.triggered_by,
+            ]);
           });
         });
 
         describe('with expanded pipeline', () => {
-          it('should render expanded pipeline', (done) => {
+          it('should render expanded pipeline', async () => {
             // expand the pipeline
             store.state.pipeline.triggered_by[0].isExpanded = true;
 
@@ -179,40 +178,46 @@ describe('graph component', () => {
               },
             });
 
-            Vue.nextTick()
-              .then(() => {
-                expect(wrapper.find('.js-upstream-pipeline-12').exists()).toBe(true);
-              })
-              .then(done)
-              .catch(done.fail);
+            await nextTick();
+            expect(wrapper.find('.js-upstream-pipeline-12').exists()).toBe(true);
           });
         });
       });
 
       describe('triggered', () => {
         describe('on click', () => {
-          it('should emit `onClickTriggered`', () => {
-            // We have to mock this method since we do both style change and
-            // emit and event, not mocking returns an error.
-            wrapper.setMethods({
-              handleClickedDownstream: jest.fn(() =>
-                wrapper.vm.$emit('onClickTriggered', ...store.state.pipeline.triggered),
-              ),
+          // We have to mock this property of HTMLElement since component relies on it
+          let offsetParentDescriptor;
+          beforeAll(() => {
+            offsetParentDescriptor = Object.getOwnPropertyDescriptor(
+              HTMLElement.prototype,
+              'offsetParent',
+            );
+            Object.defineProperty(HTMLElement.prototype, 'offsetParent', {
+              get() {
+                return this.parentNode;
+              },
             });
+          });
+          afterAll(() => {
+            Object.defineProperty(HTMLElement.prototype, offsetParentDescriptor);
+          });
 
+          it('should emit `onClickDownstreamPipeline`', async () => {
             const btnWrappers = findAllExpandPipelineBtns();
             const downstreamBtnWrapper = btnWrappers.at(btnWrappers.length - 1);
 
             downstreamBtnWrapper.trigger('click');
 
-            downstreamBtnWrapper.vm.$nextTick(() => {
-              expect(wrapper.emitted().onClickTriggered).toEqual([store.state.pipeline.triggered]);
-            });
+            await nextTick();
+            expect(wrapper.emitted().onClickDownstreamPipeline).toEqual([
+              [store.state.pipeline.triggered[1]],
+            ]);
           });
         });
 
         describe('with expanded pipeline', () => {
-          it('should render expanded pipeline', (done) => {
+          it('should render expanded pipeline', async () => {
             // expand the pipeline
             store.state.pipeline.triggered[0].isExpanded = true;
 
@@ -224,12 +229,8 @@ describe('graph component', () => {
               },
             });
 
-            Vue.nextTick()
-              .then(() => {
-                expect(wrapper.find('.js-downstream-pipeline-34993051')).not.toBeNull();
-              })
-              .then(done)
-              .catch(done.fail);
+            await nextTick();
+            expect(wrapper.find('.js-downstream-pipeline-34993051')).not.toBeNull();
           });
         });
 

spec/frontend/pipelines/stage_spec.js

+import 'bootstrap/js/dist/dropdown';
 import { mount } from '@vue/test-utils';
 import MockAdapter from 'axios-mock-adapter';
-import waitForPromises from 'helpers/wait_for_promises';
 import axios from '~/lib/utils/axios_utils';
 import StageComponent from '~/pipelines/components/pipelines_list/stage.vue';
 import eventHub from '~/pipelines/event_hub';
@@ -22,8 +22,11 @@ describe('Pipelines stage component', () => {
     updateDropdown: false,
   };
 
+  const isDropdownOpen = () => wrapper.classes('show');
+
   const createComponent = (props = {}) => {
     wrapper = mount(StageComponent, {
+      attachToDocument: true,
       propsData: {
         ...defaultProps,
         ...props,
@@ -60,38 +63,29 @@ describe('Pipelines stage component', () => {
       createComponent();
     });
 
-    it('should render the received data and emit `clickedDropdown` event', () => {
+    it('should render the received data and emit `clickedDropdown` event', async () => {
       jest.spyOn(eventHub, '$emit');
       wrapper.find('button').trigger('click');
 
-      return waitForPromises().then(() => {
-        expect(wrapper.find('.js-builds-dropdown-container ul').text()).toContain(
-          stageReply.latest_statuses[0].name,
-        );
+      await axios.waitForAll();
+      expect(wrapper.find('.js-builds-dropdown-container ul').text()).toContain(
+        stageReply.latest_statuses[0].name,
+      );
 
-        expect(eventHub.$emit).toHaveBeenCalledWith('clickedDropdown');
-      });
+      expect(eventHub.$emit).toHaveBeenCalledWith('clickedDropdown');
     });
   });
 
-  describe('when request fails', () => {
-    beforeEach(() => {
-      mock.onGet('path.json').reply(500);
-      createComponent();
-    });
+  it('when request fails should close the dropdown', async () => {
+    mock.onGet('path.json').reply(500);
+    createComponent();
+    wrapper.find({ ref: 'dropdown' }).trigger('click');
+    expect(isDropdownOpen()).toBe(true);
 
-    it('should close the dropdown', () => {
-      wrapper.setMethods({
-        closeDropdown: jest.fn(),
-        isDropdownOpen: jest.fn().mockReturnValue(false),
-      });
+    wrapper.find('button').trigger('click');
+    await axios.waitForAll();
 
-      wrapper.find('button').trigger('click');
-
-      return waitForPromises().then(() => {
-        expect(wrapper.vm.closeDropdown).toHaveBeenCalled();
-      });
-    });
+    expect(isDropdownOpen()).toBe(false);
   });
 
   describe('update endpoint correctly', () => {
@@ -109,47 +103,38 @@ describe('Pipelines stage component', () => {
           dropdown_path: 'bar.json',
         },
       });
+      return axios.waitForAll();
     });
 
-    it('should update the stage to request the new endpoint provided', () => {
-      return wrapper.vm
-        .$nextTick()
-        .then(() => {
-          wrapper.find('button').trigger('click');
-          return waitForPromises();
-        })
-        .then(() => {
-          expect(wrapper.find('.js-builds-dropdown-container ul').text()).toContain(
-            'this is the updated content',
-          );
-        });
+    it('should update the stage to request the new endpoint provided', async () => {
+      wrapper.find('button').trigger('click');
+      await axios.waitForAll();
+
+      expect(wrapper.find('.js-builds-dropdown-container ul').text()).toContain(
+        'this is the updated content',
+      );
     });
   });
 
   describe('pipelineActionRequestComplete', () => {
     beforeEach(() => {
       mock.onGet('path.json').reply(200, stageReply);
-
       mock.onPost(`${stageReply.latest_statuses[0].status.action.path}.json`).reply(200);
 
       createComponent({ type: 'PIPELINES_TABLE' });
     });
 
     describe('within pipeline table', () => {
-      it('emits `refreshPipelinesTable` event when `pipelineActionRequestComplete` is triggered', () => {
+      it('emits `refreshPipelinesTable` event when `pipelineActionRequestComplete` is triggered', async () => {
         jest.spyOn(eventHub, '$emit');
 
         wrapper.find('button').trigger('click');
+        await axios.waitForAll();
 
-        return waitForPromises()
-          .then(() => {
-            wrapper.find('.js-ci-action').trigger('click');
+        wrapper.find('.js-ci-action').trigger('click');
+        await axios.waitForAll();
 
-            return waitForPromises();
-          })
-          .then(() => {
-            expect(eventHub.$emit).toHaveBeenCalledWith('refreshPipelinesTable');
-          });
+        expect(eventHub.$emit).toHaveBeenCalledWith('refreshPipelinesTable');
       });
     });
   });

spec/frontend/static_site_editor/components/edit_area_spec.js

+import { nextTick } from 'vue';
 import { shallowMount } from '@vue/test-utils';
+import { stubComponent } from 'helpers/stub_component';
 
 import RichContentEditor from '~/vue_shared/components/rich_content_editor/rich_content_editor.vue';
 import { EDITOR_TYPES } from '~/vue_shared/components/rich_content_editor/constants';
@@ -30,6 +32,12 @@ describe('~/static_site_editor/components/edit_area.vue', () => {
   const savingChanges = true;
   const newBody = `new ${body}`;
 
+  const RichContentEditorStub = stubComponent(RichContentEditor, {
+    methods: {
+      resetInitialValue: jest.fn(),
+    },
+  });
+
   const buildWrapper = (propsData = {}) => {
     wrapper = shallowMount(EditArea, {
       propsData: {
@@ -44,6 +52,7 @@ describe('~/static_site_editor/components/edit_area.vue', () => {
         savingChanges,
         ...propsData,
       },
+      stubs: { RichContentEditor: RichContentEditorStub },
     });
   };
 
@@ -94,7 +103,7 @@ describe('~/static_site_editor/components/edit_area.vue', () => {
     beforeEach(() => {
       findRichContentEditor().vm.$emit('input', newBody);
 
-      return wrapper.vm.$nextTick();
+      return nextTick();
     });
 
     it('updates parsedSource with new content', () => {
@@ -114,30 +123,21 @@ describe('~/static_site_editor/components/edit_area.vue', () => {
       expect(findUnsavedChangesConfirmDialog().props('modified')).toBe(true);
     });
 
-    it('sets publish toolbar as not saveable when content changes are rollback', () => {
+    it('sets publish toolbar as not saveable when content changes are rollback', async () => {
       findRichContentEditor().vm.$emit('input', formattedBody);
 
-      return wrapper.vm.$nextTick().then(() => {
-        expect(findPublishToolbar().props('saveable')).toBe(false);
-      });
+      await nextTick();
+      expect(findPublishToolbar().props('saveable')).toBe(false);
     });
   });
 
   describe('when the mode changes', () => {
-    let resetInitialValue;
-
     const setInitialMode = (mode) => {
       wrapper.setData({ editorMode: mode });
     };
 
-    const buildResetInitialValue = () => {
-      resetInitialValue = jest.fn();
-      findRichContentEditor().setMethods({ resetInitialValue });
-    };
-
     afterEach(() => {
       setInitialMode(EDITOR_TYPES.wysiwyg);
-      resetInitialValue = null;
     });
 
     it.each`
@@ -148,21 +148,20 @@ describe('~/static_site_editor/components/edit_area.vue', () => {
       'sets editorMode from $initialMode to $targetMode',
       ({ initialMode, targetMode, resetValue }) => {
         setInitialMode(initialMode);
-        buildResetInitialValue();
 
         findRichContentEditor().vm.$emit('modeChange', targetMode);
 
-        expect(resetInitialValue).toHaveBeenCalledWith(resetValue);
+        expect(RichContentEditorStub.methods.resetInitialValue).toHaveBeenCalledWith(resetValue);
         expect(wrapper.vm.editorMode).toBe(targetMode);
       },
     );
 
     it('should format the content', () => {
-      buildResetInitialValue();
-
       findRichContentEditor().vm.$emit('modeChange', EDITOR_TYPES.markdown);
 
-      expect(resetInitialValue).toHaveBeenCalledWith(`${content} format-pass format-pass`);
+      expect(RichContentEditorStub.methods.resetInitialValue).toHaveBeenCalledWith(
+        `${content} format-pass format-pass`,
+      );
     });
   });
 
@@ -172,30 +171,27 @@ describe('~/static_site_editor/components/edit_area.vue', () => {
       expect(findEditDrawer().props('isOpen')).toBe(false);
     });
 
-    it('opens the edit drawer', () => {
+    it('opens the edit drawer', async () => {
       findPublishToolbar().vm.$emit('editSettings');
 
-      return wrapper.vm.$nextTick().then(() => {
-        expect(findEditDrawer().props('isOpen')).toBe(true);
-      });
+      await nextTick();
+      expect(findEditDrawer().props('isOpen')).toBe(true);
     });
 
-    it('closes the edit drawer', () => {
+    it('closes the edit drawer', async () => {
       findEditDrawer().vm.$emit('close');
 
-      return wrapper.vm.$nextTick().then(() => {
-        expect(findEditDrawer().props('isOpen')).toBe(false);
-      });
+      await nextTick();
+      expect(findEditDrawer().props('isOpen')).toBe(false);
     });
 
-    it('forwards the matter settings when the drawer is open', () => {
+    it('forwards the matter settings when the drawer is open', async () => {
       findPublishToolbar().vm.$emit('editSettings');
 
       jest.spyOn(wrapper.vm.parsedSource, 'matter').mockReturnValueOnce(headerSettings);
 
-      return wrapper.vm.$nextTick().then(() => {
-        expect(findEditDrawer().props('settings')).toEqual(headerSettings);
-      });
+      await nextTick();
+      expect(findEditDrawer().props('settings')).toEqual(headerSettings);
     });
 
     it('enables toolbar submit button', () => {
@@ -211,16 +207,15 @@ describe('~/static_site_editor/components/edit_area.vue', () => {
       expect(spySyncParsedSource).toHaveBeenCalledWith(newSettings);
     });
 
-    it('syncs matter changes to content in markdown mode', () => {
+    it('syncs matter changes to content in markdown mode', async () => {
       wrapper.setData({ editorMode: EDITOR_TYPES.markdown });
 
       const newSettings = { title: 'test' };
 
       findEditDrawer().vm.$emit('updateSettings', newSettings);
 
-      return wrapper.vm.$nextTick().then(() => {
-        expect(findRichContentEditor().props('content')).toContain('title: test');
-      });
+      await nextTick();
+      expect(findRichContentEditor().props('content')).toContain('title: test');
     });
   });
 

spec/frontend/vue_shared/components/rich_content_editor/rich_content_editor_spec.js

 import { shallowMount } from '@vue/test-utils';
-import { mockEditorApi } from '@toast-ui/vue-editor';
+import { Editor, mockEditorApi } from '@toast-ui/vue-editor';
 import RichContentEditor from '~/vue_shared/components/rich_content_editor/rich_content_editor.vue';
 import AddImageModal from '~/vue_shared/components/rich_content_editor/modals/add_image/add_image_modal.vue';
 import InsertVideoModal from '~/vue_shared/components/rich_content_editor/modals/insert_video_modal.vue';
@@ -17,16 +17,17 @@ import {
   insertVideo,
   registerHTMLToMarkdownRenderer,
   getEditorOptions,
+  getMarkdown,
 } from '~/vue_shared/components/rich_content_editor/services/editor_service';
 
 jest.mock('~/vue_shared/components/rich_content_editor/services/editor_service', () => ({
-  ...jest.requireActual('~/vue_shared/components/rich_content_editor/services/editor_service'),
   addCustomEventListener: jest.fn(),
   removeCustomEventListener: jest.fn(),
   addImage: jest.fn(),
   insertVideo: jest.fn(),
   registerHTMLToMarkdownRenderer: jest.fn(),
   getEditorOptions: jest.fn(),
+  getMarkdown: jest.fn(),
 }));
 
 describe('Rich Content Editor', () => {
@@ -38,9 +39,12 @@ describe('Rich Content Editor', () => {
   const findAddImageModal = () => wrapper.find(AddImageModal);
   const findInsertVideoModal = () => wrapper.find(InsertVideoModal);
 
-  const buildWrapper = () => {
+  const buildWrapper = async () => {
     wrapper = shallowMount(RichContentEditor, {
       propsData: { content, imageRoot },
+      stubs: {
+        ToastEditor: Editor,
+      },
     });
   };
 
@@ -89,9 +93,8 @@ describe('Rich Content Editor', () => {
 
     it('emits an input event with the changed content', () => {
       const changedMarkdown = '## Changed Markdown';
-      const getMarkdownMock = jest.fn().mockReturnValueOnce(changedMarkdown);
+      getMarkdown.mockReturnValueOnce(changedMarkdown);
 
-      findEditor().setMethods({ invoke: getMarkdownMock });
       findEditor().vm.$emit('change');
 
       expect(wrapper.emitted().input[0][0]).toBe(changedMarkdown);
@@ -147,6 +150,7 @@ describe('Rich Content Editor', () => {
     });
 
     it('emits load event with the markdown formatted by Toast UI', () => {
+      mockEditorApi.getMarkdown.mockReturnValueOnce(formattedMarkdown);
       expect(mockEditorApi.getMarkdown).toHaveBeenCalled();
       expect(wrapper.emitted('load')[0]).toEqual([{ formattedMarkdown }]);
     });