1 files changed, 12 insertions, 23 deletions

diff --git a/spec/frontend/design_management/pages/index_spec.js b/spec/frontend/design_management/pages/index_spec.js
index dd0f7972553..a240a41959f 100644
--- a/spec/frontend/design_management/pages/index_spec.js
+++ b/spec/frontend/design_management/pages/index_spec.js
@@ -1,10 +1,12 @@
 import { GlEmptyState } from '@gitlab/ui';
-import { createLocalVue, shallowMount } from '@vue/test-utils';
-import { nextTick } from 'vue';
+import { shallowMount } from '@vue/test-utils';
+import Vue, { nextTick } from 'vue';
+
 import VueApollo, { ApolloMutation } from 'vue-apollo';
 import VueRouter from 'vue-router';
 import VueDraggable from 'vuedraggable';
 import createMockApollo from 'helpers/mock_apollo_helper';
+import waitForPromises from 'helpers/wait_for_promises';
 import { mockTracking, unmockTracking } from 'helpers/tracking_helper';
 import permissionsQuery from 'shared_queries/design_management/design_permissions.query.graphql';
 import getDesignListQuery from 'shared_queries/design_management/get_design_list.query.graphql';
@@ -48,9 +50,8 @@ jest.spyOn(utils, 'getPageLayoutElement').mockReturnValue(mockPageEl);
 const scrollIntoViewMock = jest.fn();
 HTMLElement.prototype.scrollIntoView = scrollIntoViewMock;
 
-const localVue = createLocalVue();
 const router = createRouter();
-localVue.use(VueRouter);
+Vue.use(VueRouter);
 
 const mockDesigns = [
   {
@@ -115,8 +116,7 @@ describe('Design management index page', () => {
   const findDesignToolbarWrapper = () => wrapper.find('[data-testid="design-toolbar-wrapper"]');
 
   async function moveDesigns(localWrapper) {
-    await jest.runOnlyPendingTimers();
-    await nextTick();
+    await waitForPromises();
 
     localWrapper.find(VueDraggable).vm.$emit('input', reorderedDesigns);
     localWrapper.find(VueDraggable).vm.$emit('change', {
@@ -159,7 +159,6 @@ describe('Design management index page', () => {
         };
       },
       mocks: { $apollo },
-      localVue,
       router,
       stubs: { DesignDestroyer, ApolloMutation, VueDraggable, ...stubs },
       attachTo: document.body,
@@ -175,7 +174,7 @@ describe('Design management index page', () => {
   function createComponentWithApollo({
     moveHandler = jest.fn().mockResolvedValue(moveDesignMutationResponse),
   }) {
-    localVue.use(VueApollo);
+    Vue.use(VueApollo);
     moveDesignHandler = moveHandler;
 
     const requestHandlers = [
@@ -186,7 +185,6 @@ describe('Design management index page', () => {
 
     fakeApollo = createMockApollo(requestHandlers);
     wrapper = shallowMount(Index, {
-      localVue,
       apolloProvider: fakeApollo,
       router,
       stubs: { VueDraggable },
@@ -746,9 +744,7 @@ describe('Design management index page', () => {
   describe('with mocked Apollo client', () => {
     it('has a design with id 1 as a first one', async () => {
       createComponentWithApollo({});
-
-      await jest.runOnlyPendingTimers();
-      await nextTick();
+      await waitForPromises();
 
       expect(findDesigns()).toHaveLength(3);
       expect(findDesigns().at(0).props('id')).toBe('1');
@@ -761,21 +757,18 @@ describe('Design management index page', () => {
 
       expect(moveDesignHandler).toHaveBeenCalled();
 
-      await nextTick();
+      await waitForPromises();
 
       expect(findDesigns().at(0).props('id')).toBe('2');
     });
 
     it('prevents reordering when reorderDesigns mutation is in progress', async () => {
       createComponentWithApollo({});
-
       await moveDesigns(wrapper);
 
       expect(draggableAttributes().disabled).toBe(true);
 
-      await jest.runOnlyPendingTimers(); // kick off the mocked GQL stuff (promises)
-      await nextTick(); // kick off the DOM update
-      await nextTick(); // kick off the DOM update for finally block
+      await waitForPromises();
 
       expect(draggableAttributes().disabled).toBe(false);
     });
@@ -786,8 +779,7 @@ describe('Design management index page', () => {
       });
 
       await moveDesigns(wrapper);
-
-      await nextTick();
+      await waitForPromises();
 
       expect(createFlash).toHaveBeenCalledWith({ message: 'Houston, we have a problem' });
     });
@@ -798,10 +790,7 @@ describe('Design management index page', () => {
       });
 
       await moveDesigns(wrapper);
-
-      await nextTick(); // kick off the DOM update
-      await jest.runOnlyPendingTimers(); // kick off the mocked GQL stuff (promises)
-      await nextTick(); // kick off the DOM update for flash
+      await waitForPromises();
 
       expect(createFlash).toHaveBeenCalledWith({
         message: 'Something went wrong when reordering designs. Please try again',