Add latest changes from gitlab-org/gitlab@14-8-stable-eev14.8.0-rc42

14 files changed, 313 insertions, 387 deletions

diff --git a/spec/frontend/design_management/components/delete_button_spec.js b/spec/frontend/design_management/components/delete_button_spec.js
index f5a841d35b8..e3907fdbe15 100644
--- a/spec/frontend/design_management/components/delete_button_spec.js
+++ b/spec/frontend/design_management/components/delete_button_spec.js
@@ -1,5 +1,6 @@
 import { GlButton, GlModal, GlModalDirective } from '@gitlab/ui';
 import { shallowMount } from '@vue/test-utils';
+import { nextTick } from 'vue';
 import BatchDeleteButton from '~/design_management/components/delete_button.vue';
 
 describe('Batch delete button component', () => {
@@ -36,18 +37,15 @@ describe('Batch delete button component', () => {
     expect(findButton().attributes('disabled')).toBeTruthy();
   });
 
-  it('emits `delete-selected-designs` event on modal ok click', () => {
+  it('emits `delete-selected-designs` event on modal ok click', async () => {
     createComponent();
     findButton().vm.$emit('click');
-    return wrapper.vm
-      .$nextTick()
-      .then(() => {
-        findModal().vm.$emit('ok');
-        return wrapper.vm.$nextTick();
-      })
-      .then(() => {
-        expect(wrapper.emitted('delete-selected-designs')).toBeTruthy();
-      });
+
+    await nextTick();
+    findModal().vm.$emit('ok');
+
+    await nextTick();
+    expect(wrapper.emitted('delete-selected-designs')).toBeTruthy();
   });
 
   it('renders slot content', () => {
diff --git a/spec/frontend/design_management/components/design_notes/design_discussion_spec.js b/spec/frontend/design_management/components/design_notes/design_discussion_spec.js
index e816a05ba53..bbf2190ad47 100644
--- a/spec/frontend/design_management/components/design_notes/design_discussion_spec.js
+++ b/spec/frontend/design_management/components/design_notes/design_discussion_spec.js
@@ -1,6 +1,7 @@
 import { GlLoadingIcon } from '@gitlab/ui';
 import { mount } from '@vue/test-utils';
 import { ApolloMutation } from 'vue-apollo';
+import { nextTick } from 'vue';
 import DesignDiscussion from '~/design_management/components/design_notes/design_discussion.vue';
 import DesignNote from '~/design_management/components/design_notes/design_note.vue';
 import DesignNoteSignedOut from '~/design_management/components/design_notes/design_note_signed_out.vue';
@@ -119,12 +120,11 @@ describe('Design discussions component', () => {
       expect(findResolveIcon().exists()).toBe(false);
     });
 
-    it('does not render a checkbox in reply form', () => {
+    it('does not render a checkbox in reply form', async () => {
       findReplyPlaceholder().vm.$emit('focus');
 
-      return wrapper.vm.$nextTick().then(() => {
-        expect(findResolveCheckbox().exists()).toBe(false);
-      });
+      await nextTick();
+      expect(findResolveCheckbox().exists()).toBe(false);
     });
   });
 
@@ -150,13 +150,12 @@ describe('Design discussions component', () => {
       expect(findResolveIcon().props('name')).toBe('check-circle');
     });
 
-    it('renders a checkbox with Resolve thread text in reply form', () => {
+    it('renders a checkbox with Resolve thread text in reply form', async () => {
       findReplyPlaceholder().vm.$emit('focus');
       wrapper.setProps({ discussionWithOpenForm: defaultMockDiscussion.id });
 
-      return wrapper.vm.$nextTick().then(() => {
-        expect(findResolveCheckbox().text()).toBe('Resolve thread');
-      });
+      await nextTick();
+      expect(findResolveCheckbox().text()).toBe('Resolve thread');
     });
 
     it('does not render resolved message', () => {
@@ -216,7 +215,7 @@ describe('Design discussions component', () => {
       findReplyForm().vm.$emit('submitForm');
 
       await mutate();
-      await wrapper.vm.$nextTick();
+      await nextTick();
 
       const dispatchedEvent = dispatchEventSpy.mock.calls[0][0];
 
@@ -226,9 +225,9 @@ describe('Design discussions component', () => {
     });
 
     describe('when replies are expanded', () => {
-      beforeEach(() => {
+      beforeEach(async () => {
         findRepliesWidget().vm.$emit('toggle');
-        return wrapper.vm.$nextTick();
+        await nextTick();
       });
 
       it('renders replies widget with collapsed prop equal to false', () => {
@@ -243,26 +242,24 @@ describe('Design discussions component', () => {
         expect(findReplyPlaceholder().isVisible()).toBe(true);
       });
 
-      it('renders a checkbox with Unresolve thread text in reply form', () => {
+      it('renders a checkbox with Unresolve thread text in reply form', async () => {
         findReplyPlaceholder().vm.$emit('focus');
         wrapper.setProps({ discussionWithOpenForm: defaultMockDiscussion.id });
 
-        return wrapper.vm.$nextTick().then(() => {
-          expect(findResolveCheckbox().text()).toBe('Unresolve thread');
-        });
+        await nextTick();
+        expect(findResolveCheckbox().text()).toBe('Unresolve thread');
       });
     });
   });
 
-  it('hides reply placeholder and opens form on placeholder click', () => {
+  it('hides reply placeholder and opens form on placeholder click', async () => {
     createComponent();
     findReplyPlaceholder().vm.$emit('focus');
     wrapper.setProps({ discussionWithOpenForm: defaultMockDiscussion.id });
 
-    return wrapper.vm.$nextTick().then(() => {
-      expect(findReplyPlaceholder().exists()).toBe(false);
-      expect(findReplyForm().exists()).toBe(true);
-    });
+    await nextTick();
+    expect(findReplyPlaceholder().exists()).toBe(false);
+    expect(findReplyForm().exists()).toBe(true);
   });
 
   it('calls mutation on submitting form and closes the form', async () => {
@@ -275,28 +272,24 @@ describe('Design discussions component', () => {
     expect(mutate).toHaveBeenCalledWith(mutationVariables);
 
     await mutate();
-    await wrapper.vm.$nextTick();
+    await nextTick();
 
     expect(findReplyForm().exists()).toBe(false);
   });
 
-  it('clears the discussion comment on closing comment form', () => {
+  it('clears the discussion comment on closing comment form', async () => {
     createComponent(
       { discussionWithOpenForm: defaultMockDiscussion.id },
       { discussionComment: 'test', isFormRendered: true },
     );
 
-    return wrapper.vm
-      .$nextTick()
-      .then(() => {
-        findReplyForm().vm.$emit('cancel-form');
+    await nextTick();
+    findReplyForm().vm.$emit('cancel-form');
 
-        expect(wrapper.vm.discussionComment).toBe('');
-        return wrapper.vm.$nextTick();
-      })
-      .then(() => {
-        expect(findReplyForm().exists()).toBe(false);
-      });
+    expect(wrapper.vm.discussionComment).toBe('');
+
+    await nextTick();
+    expect(findReplyForm().exists()).toBe(false);
   });
 
   describe('when any note from a discussion is active', () => {
@@ -322,7 +315,7 @@ describe('Design discussions component', () => {
     );
   });
 
-  it('calls toggleResolveDiscussion mutation on resolve thread button click', () => {
+  it('calls toggleResolveDiscussion mutation on resolve thread button click', async () => {
     createComponent();
     findResolveButton().trigger('click');
     expect(mutate).toHaveBeenCalledWith({
@@ -332,9 +325,8 @@ describe('Design discussions component', () => {
         resolve: true,
       },
     });
-    return wrapper.vm.$nextTick(() => {
-      expect(findResolveLoadingIcon().exists()).toBe(true);
-    });
+    await nextTick();
+    expect(findResolveLoadingIcon().exists()).toBe(true);
   });
 
   it('calls toggleResolveDiscussion mutation after adding a note if checkbox was checked', () => {
diff --git a/spec/frontend/design_management/components/design_notes/design_note_spec.js b/spec/frontend/design_management/components/design_notes/design_note_spec.js
index 3f5f5bcdfa7..35fd1273270 100644
--- a/spec/frontend/design_management/components/design_notes/design_note_spec.js
+++ b/spec/frontend/design_management/components/design_notes/design_note_spec.js
@@ -1,5 +1,6 @@
 import { shallowMount } from '@vue/test-utils';
 import { ApolloMutation } from 'vue-apollo';
+import { nextTick } from 'vue';
 import DesignNote from '~/design_management/components/design_notes/design_note.vue';
 import DesignReplyForm from '~/design_management/components/design_notes/design_reply_form.vue';
 import TimeAgoTooltip from '~/vue_shared/components/time_ago_tooltip.vue';
@@ -96,7 +97,7 @@ describe('Design note component', () => {
   });
 
   describe('when user has a permission to edit note', () => {
-    it('should open an edit form on edit button click', () => {
+    it('should open an edit form on edit button click', async () => {
       createComponent({
         note: {
           ...note,
@@ -108,10 +109,9 @@ describe('Design note component', () => {
 
       findEditButton().trigger('click');
 
-      return wrapper.vm.$nextTick().then(() => {
-        expect(findReplyForm().exists()).toBe(true);
-        expect(findNoteContent().exists()).toBe(false);
-      });
+      await nextTick();
+      expect(findReplyForm().exists()).toBe(true);
+      expect(findNoteContent().exists()).toBe(false);
     });
 
     describe('when edit form is rendered', () => {
@@ -134,27 +134,22 @@ describe('Design note component', () => {
         expect(findReplyForm().exists()).toBe(true);
       });
 
-      it('hides the form on cancel-form event', () => {
+      it('hides the form on cancel-form event', async () => {
         findReplyForm().vm.$emit('cancel-form');
 
-        return wrapper.vm.$nextTick().then(() => {
-          expect(findReplyForm().exists()).toBe(false);
-          expect(findNoteContent().exists()).toBe(true);
-        });
+        await nextTick();
+        expect(findReplyForm().exists()).toBe(false);
+        expect(findNoteContent().exists()).toBe(true);
       });
 
-      it('calls a mutation on submit-form event and hides a form', () => {
+      it('calls a mutation on submit-form event and hides a form', async () => {
         findReplyForm().vm.$emit('submit-form');
         expect(mutate).toHaveBeenCalled();
 
-        return mutate()
-          .then(() => {
-            return wrapper.vm.$nextTick();
-          })
-          .then(() => {
-            expect(findReplyForm().exists()).toBe(false);
-            expect(findNoteContent().exists()).toBe(true);
-          });
+        await mutate();
+        await nextTick();
+        expect(findReplyForm().exists()).toBe(false);
+        expect(findNoteContent().exists()).toBe(true);
       });
     });
   });
diff --git a/spec/frontend/design_management/components/design_notes/design_reply_form_spec.js b/spec/frontend/design_management/components/design_notes/design_reply_form_spec.js
index a338a5ef200..0cef18c60de 100644
--- a/spec/frontend/design_management/components/design_notes/design_reply_form_spec.js
+++ b/spec/frontend/design_management/components/design_notes/design_reply_form_spec.js
@@ -1,4 +1,5 @@
 import { mount } from '@vue/test-utils';
+import { nextTick } from 'vue';
 import DesignReplyForm from '~/design_management/components/design_notes/design_reply_form.vue';
 
 const showModal = jest.fn();
@@ -30,6 +31,10 @@ describe('Design reply form component', () => {
     });
   }
 
+  beforeEach(() => {
+    gon.features = { markdownContinueLists: true };
+  });
+
   afterEach(() => {
     wrapper.destroy();
   });
@@ -64,24 +69,22 @@ describe('Design reply form component', () => {
       expect(findSubmitButton().attributes().disabled).toBeTruthy();
     });
 
-    it('does not emit submitForm event on textarea ctrl+enter keydown', () => {
+    it('does not emit submitForm event on textarea ctrl+enter keydown', async () => {
       findTextarea().trigger('keydown.enter', {
         ctrlKey: true,
       });
 
-      return wrapper.vm.$nextTick().then(() => {
-        expect(wrapper.emitted('submit-form')).toBeFalsy();
-      });
+      await nextTick();
+      expect(wrapper.emitted('submit-form')).toBeFalsy();
     });
 
-    it('does not emit submitForm event on textarea meta+enter keydown', () => {
+    it('does not emit submitForm event on textarea meta+enter keydown', async () => {
       findTextarea().trigger('keydown.enter', {
         metaKey: true,
       });
 
-      return wrapper.vm.$nextTick().then(() => {
-        expect(wrapper.emitted('submit-form')).toBeFalsy();
-      });
+      await nextTick();
+      expect(wrapper.emitted('submit-form')).toBeFalsy();
     });
 
     it('emits cancelForm event on pressing escape button on textarea', () => {
@@ -108,40 +111,36 @@ describe('Design reply form component', () => {
       expect(findSubmitButton().attributes().disabled).toBeFalsy();
     });
 
-    it('emits submitForm event on Comment button click', () => {
+    it('emits submitForm event on Comment button click', async () => {
       findSubmitButton().vm.$emit('click');
 
-      return wrapper.vm.$nextTick().then(() => {
-        expect(wrapper.emitted('submit-form')).toBeTruthy();
-      });
+      await nextTick();
+      expect(wrapper.emitted('submit-form')).toBeTruthy();
     });
 
-    it('emits submitForm event on textarea ctrl+enter keydown', () => {
+    it('emits submitForm event on textarea ctrl+enter keydown', async () => {
       findTextarea().trigger('keydown.enter', {
         ctrlKey: true,
       });
 
-      return wrapper.vm.$nextTick().then(() => {
-        expect(wrapper.emitted('submit-form')).toBeTruthy();
-      });
+      await nextTick();
+      expect(wrapper.emitted('submit-form')).toBeTruthy();
     });
 
-    it('emits submitForm event on textarea meta+enter keydown', () => {
+    it('emits submitForm event on textarea meta+enter keydown', async () => {
       findTextarea().trigger('keydown.enter', {
         metaKey: true,
       });
 
-      return wrapper.vm.$nextTick().then(() => {
-        expect(wrapper.emitted('submit-form')).toBeTruthy();
-      });
+      await nextTick();
+      expect(wrapper.emitted('submit-form')).toBeTruthy();
     });
 
-    it('emits input event on changing textarea content', () => {
+    it('emits input event on changing textarea content', async () => {
       findTextarea().setValue('test2');
 
-      return wrapper.vm.$nextTick().then(() => {
-        expect(wrapper.emitted('input')).toBeTruthy();
-      });
+      await nextTick();
+      expect(wrapper.emitted('input')).toBeTruthy();
     });
 
     it('emits cancelForm event on Escape key if text was not changed', () => {
@@ -150,13 +149,12 @@ describe('Design reply form component', () => {
       expect(wrapper.emitted('cancel-form')).toBeTruthy();
     });
 
-    it('opens confirmation modal on Escape key when text has changed', () => {
+    it('opens confirmation modal on Escape key when text has changed', async () => {
       wrapper.setProps({ value: 'test2' });
 
-      return wrapper.vm.$nextTick().then(() => {
-        findTextarea().trigger('keyup.esc');
-        expect(showModal).toHaveBeenCalled();
-      });
+      await nextTick();
+      findTextarea().trigger('keyup.esc');
+      expect(showModal).toHaveBeenCalled();
     });
 
     it('emits cancelForm event on Cancel button click if text was not changed', () => {
@@ -165,13 +163,12 @@ describe('Design reply form component', () => {
       expect(wrapper.emitted('cancel-form')).toBeTruthy();
     });
 
-    it('opens confirmation modal on Cancel button click when text has changed', () => {
+    it('opens confirmation modal on Cancel button click when text has changed', async () => {
       wrapper.setProps({ value: 'test2' });
 
-      return wrapper.vm.$nextTick().then(() => {
-        findCancelButton().trigger('click');
-        expect(showModal).toHaveBeenCalled();
-      });
+      await nextTick();
+      findCancelButton().trigger('click');
+      expect(showModal).toHaveBeenCalled();
     });
 
     it('emits cancelForm event on modal Ok button click', () => {
diff --git a/spec/frontend/design_management/components/design_overlay_spec.js b/spec/frontend/design_management/components/design_overlay_spec.js
index 4bda5054090..056959425a6 100644
--- a/spec/frontend/design_management/components/design_overlay_spec.js
+++ b/spec/frontend/design_management/components/design_overlay_spec.js
@@ -1,4 +1,5 @@
 import { mount } from '@vue/test-utils';
+import { nextTick } from 'vue';
 import DesignOverlay from '~/design_management/components/design_overlay.vue';
 import { ACTIVE_DISCUSSION_SOURCE_TYPES } from '~/design_management/constants';
 import updateActiveDiscussion from '~/design_management/graphql/mutations/update_active_discussion.mutation.graphql';
@@ -17,12 +18,11 @@ describe('Design overlay component', () => {
   const findFirstBadge = () => findBadgeAtIndex(0);
   const findSecondBadge = () => findBadgeAtIndex(1);
 
-  const clickAndDragBadge = (elem, fromPoint, toPoint) => {
+  const clickAndDragBadge = async (elem, fromPoint, toPoint) => {
     elem.trigger('mousedown', { clientX: fromPoint.x, clientY: fromPoint.y });
-    return wrapper.vm.$nextTick().then(() => {
-      elem.trigger('mousemove', { clientX: toPoint.x, clientY: toPoint.y });
-      return wrapper.vm.$nextTick();
-    });
+    await nextTick();
+    elem.trigger('mousemove', { clientX: toPoint.x, clientY: toPoint.y });
+    await nextTick();
   };
 
   function createComponent(props = {}, data = {}) {
@@ -59,7 +59,7 @@ describe('Design overlay component', () => {
     expect(wrapper.attributes().style).toBe('width: 100px; height: 100px; top: 0px; left: 0px;');
   });
 
-  it('should emit `openCommentForm` when clicking on overlay', () => {
+  it('should emit `openCommentForm` when clicking on overlay', async () => {
     createComponent();
     const newCoordinates = {
       x: 10,
@@ -69,11 +69,10 @@ describe('Design overlay component', () => {
     wrapper
       .find('[data-qa-selector="design_image_button"]')
       .trigger('mouseup', { offsetX: newCoordinates.x, offsetY: newCoordinates.y });
-    return wrapper.vm.$nextTick().then(() => {
-      expect(wrapper.emitted('openCommentForm')).toEqual([
-        [{ x: newCoordinates.x, y: newCoordinates.y }],
-      ]);
-    });
+    await nextTick();
+    expect(wrapper.emitted('openCommentForm')).toEqual([
+      [{ x: newCoordinates.x, y: newCoordinates.y }],
+    ]);
   });
 
   describe('with notes', () => {
@@ -116,7 +115,7 @@ describe('Design overlay component', () => {
       describe('when a discussion is active', () => {
         it.each([notes[0].discussion.notes.nodes[1], notes[0].discussion.notes.nodes[0]])(
           'should not apply inactive class to the pin for the active discussion',
-          (note) => {
+          async (note) => {
             // setData usage is discouraged. See https://gitlab.com/groups/gitlab-org/-/epics/7330 for details
             // eslint-disable-next-line no-restricted-syntax
             wrapper.setData({
@@ -126,13 +125,12 @@ describe('Design overlay component', () => {
               },
             });
 
-            return wrapper.vm.$nextTick().then(() => {
-              expect(findBadgeAtIndex(0).classes()).not.toContain('inactive');
-            });
+            await nextTick();
+            expect(findBadgeAtIndex(0).classes()).not.toContain('inactive');
           },
         );
 
-        it('should apply inactive class to all pins besides the active one', () => {
+        it('should apply inactive class to all pins besides the active one', async () => {
           // setData usage is discouraged. See https://gitlab.com/groups/gitlab-org/-/epics/7330 for details
           // eslint-disable-next-line no-restricted-syntax
           wrapper.setData({
@@ -142,15 +140,14 @@ describe('Design overlay component', () => {
             },
           });
 
-          return wrapper.vm.$nextTick().then(() => {
-            expect(findSecondBadge().classes()).toContain('inactive');
-            expect(findFirstBadge().classes()).not.toContain('inactive');
-          });
+          await nextTick();
+          expect(findSecondBadge().classes()).toContain('inactive');
+          expect(findFirstBadge().classes()).not.toContain('inactive');
         });
       });
     });
 
-    it('should recalculate badges positions on window resize', () => {
+    it('should recalculate badges positions on window resize', async () => {
       createComponent({
         notes,
         dimensions: {
@@ -168,12 +165,11 @@ describe('Design overlay component', () => {
         },
       });
 
-      return wrapper.vm.$nextTick().then(() => {
-        expect(findFirstBadge().attributes().style).toBe('left: 20px; top: 30px;');
-      });
+      await nextTick();
+      expect(findFirstBadge().attributes().style).toBe('left: 20px; top: 30px;');
     });
 
-    it('should call an update active discussion mutation when clicking a note without moving it', () => {
+    it('should call an update active discussion mutation when clicking a note without moving it', async () => {
       const note = notes[0];
       const { position } = note;
       const mutationVariables = {
@@ -186,31 +182,25 @@ describe('Design overlay component', () => {
 
       findFirstBadge().trigger('mousedown', { clientX: position.x, clientY: position.y });
 
-      return wrapper.vm.$nextTick().then(() => {
-        findFirstBadge().trigger('mouseup', { clientX: position.x, clientY: position.y });
-        expect(mutate).toHaveBeenCalledWith(mutationVariables);
-      });
+      await nextTick();
+      findFirstBadge().trigger('mouseup', { clientX: position.x, clientY: position.y });
+      expect(mutate).toHaveBeenCalledWith(mutationVariables);
     });
   });
 
   describe('when moving notes', () => {
-    it('should update badge style when note is being moved', () => {
+    it('should update badge style when note is being moved', async () => {
       createComponent({
         notes,
       });
 
       const { position } = notes[0];
 
-      return clickAndDragBadge(
-        findFirstBadge(),
-        { x: position.x, y: position.y },
-        { x: 20, y: 20 },
-      ).then(() => {
-        expect(findFirstBadge().attributes().style).toBe('left: 20px; top: 20px;');
-      });
+      await clickAndDragBadge(findFirstBadge(), { x: position.x, y: position.y }, { x: 20, y: 20 });
+      expect(findFirstBadge().attributes().style).toBe('left: 20px; top: 20px;');
     });
 
-    it('should emit `moveNote` event when note-moving action ends', () => {
+    it('should emit `moveNote` event when note-moving action ends', async () => {
       createComponent({ notes });
       const note = notes[0];
       const { position } = note;
@@ -231,22 +221,19 @@ describe('Design overlay component', () => {
       });
 
       const badge = findFirstBadge();
-      return clickAndDragBadge(badge, { x: position.x, y: position.y }, newCoordinates)
-        .then(() => {
-          badge.trigger('mouseup');
-          return wrapper.vm.$nextTick();
-        })
-        .then(() => {
-          expect(wrapper.emitted('moveNote')).toEqual([
-            [
-              {
-                noteId: notes[0].id,
-                discussionId: notes[0].discussion.id,
-                coordinates: newCoordinates,
-              },
-            ],
-          ]);
-        });
+      await clickAndDragBadge(badge, { x: position.x, y: position.y }, newCoordinates);
+      badge.trigger('mouseup');
+
+      await nextTick();
+      expect(wrapper.emitted('moveNote')).toEqual([
+        [
+          {
+            noteId: notes[0].id,
+            discussionId: notes[0].discussion.id,
+            coordinates: newCoordinates,
+          },
+        ],
+      ]);
     });
 
     describe('without [repositionNote] permission', () => {
@@ -262,19 +249,18 @@ describe('Design overlay component', () => {
         y: mockNoteNotAuthorised.position.y,
       };
 
-      it('should be unable to move a note', () => {
+      it('should be unable to move a note', async () => {
         createComponent({
           dimensions: mockDimensions,
           notes: [mockNoteNotAuthorised],
         });
 
         const badge = findAllNotes().at(0);
-        return clickAndDragBadge(badge, { ...mockNoteCoordinates }, { x: 20, y: 20 }).then(() => {
-          // note position should not change after a click-and-drag attempt
-          expect(findFirstBadge().attributes().style).toContain(
-            `left: ${mockNoteCoordinates.x}px; top: ${mockNoteCoordinates.y}px;`,
-          );
-        });
+        await clickAndDragBadge(badge, { ...mockNoteCoordinates }, { x: 20, y: 20 });
+        // note position should not change after a click-and-drag attempt
+        expect(findFirstBadge().attributes().style).toContain(
+          `left: ${mockNoteCoordinates.x}px; top: ${mockNoteCoordinates.y}px;`,
+        );
       });
     });
   });
@@ -292,7 +278,7 @@ describe('Design overlay component', () => {
     });
 
     describe('when moving the comment badge', () => {
-      it('should update badge style to reflect new position', () => {
+      it('should update badge style to reflect new position', async () => {
         const { position } = notes[0];
 
         createComponent({
@@ -301,16 +287,15 @@ describe('Design overlay component', () => {
           },
         });
 
-        return clickAndDragBadge(
+        await clickAndDragBadge(
           findCommentBadge(),
           { x: position.x, y: position.y },
           { x: 20, y: 20 },
-        ).then(() => {
-          expect(findCommentBadge().attributes().style).toBe('left: 20px; top: 20px;');
-        });
+        );
+        expect(findCommentBadge().attributes().style).toBe('left: 20px; top: 20px;');
       });
 
-      it('should update badge style when note-moving action ends', () => {
+      it('should update badge style when note-moving action ends', async () => {
         const { position } = notes[0];
         createComponent({
           currentCommentForm: {
@@ -321,19 +306,16 @@ describe('Design overlay component', () => {
         const commentBadge = findCommentBadge();
         const toPoint = { x: 20, y: 20 };
 
-        return clickAndDragBadge(commentBadge, { x: position.x, y: position.y }, toPoint)
-          .then(() => {
-            commentBadge.trigger('mouseup');
-            // simulates the currentCommentForm being updated in index.vue component, and
-            // propagated back down to this prop
-            wrapper.setProps({
-              currentCommentForm: { height: position.height, width: position.width, ...toPoint },
-            });
-            return wrapper.vm.$nextTick();
-          })
-          .then(() => {
-            expect(commentBadge.attributes().style).toBe('left: 20px; top: 20px;');
-          });
+        await clickAndDragBadge(commentBadge, { x: position.x, y: position.y }, toPoint);
+        commentBadge.trigger('mouseup');
+        // simulates the currentCommentForm being updated in index.vue component, and
+        // propagated back down to this prop
+        wrapper.setProps({
+          currentCommentForm: { height: position.height, width: position.width, ...toPoint },
+        });
+
+        await nextTick();
+        expect(commentBadge.attributes().style).toBe('left: 20px; top: 20px;');
       });
 
       it.each`
@@ -342,7 +324,7 @@ describe('Design overlay component', () => {
         ${'comment badge'} | ${findCommentBadge} | ${'mouseup'}
       `(
         'should emit `openCommentForm` event when $event fired on $element element',
-        ({ getElementFunc, event }) => {
+        async ({ getElementFunc, event }) => {
           createComponent({
             notes,
             currentCommentForm: {
@@ -364,9 +346,8 @@ describe('Design overlay component', () => {
           });
 
           getElementFunc().trigger(event);
-          return wrapper.vm.$nextTick().then(() => {
-            expect(wrapper.emitted('openCommentForm')).toEqual([[newCoordinates]]);
-          });
+          await nextTick();
+          expect(wrapper.emitted('openCommentForm')).toEqual([[newCoordinates]]);
         },
       );
     });
diff --git a/spec/frontend/design_management/components/design_presentation_spec.js b/spec/frontend/design_management/components/design_presentation_spec.js
index adec9ef469d..d79dde84d46 100644
--- a/spec/frontend/design_management/components/design_presentation_spec.js
+++ b/spec/frontend/design_management/components/design_presentation_spec.js
@@ -74,7 +74,7 @@ describe('Design management design presentation component', () => {
       .mockReturnValue((childDimensions.height - viewportDimensions.height) * scrollTopPerc);
   }
 
-  function clickDragExplore(startCoords, endCoords, { useTouchEvents, mouseup } = {}) {
+  async function clickDragExplore(startCoords, endCoords, { useTouchEvents, mouseup } = {}) {
     const event = useTouchEvents
       ? {
           mousedown: 'touchstart',
@@ -96,24 +96,17 @@ describe('Design management design presentation component', () => {
       clientX: startCoords.clientX,
       clientY: startCoords.clientY,
     });
-    return wrapper.vm
-      .$nextTick()
-      .then(() => {
-        addCommentOverlay.trigger(event.mousemove, {
-          clientX: endCoords.clientX,
-          clientY: endCoords.clientY,
-        });
-
-        return nextTick();
-      })
-      .then(() => {
-        if (mouseup) {
-          addCommentOverlay.trigger(event.mouseup);
-          return nextTick();
-        }
+    await nextTick();
+    addCommentOverlay.trigger(event.mousemove, {
+      clientX: endCoords.clientX,
+      clientY: endCoords.clientY,
+    });
 
-        return undefined;
-      });
+    await nextTick();
+    if (mouseup) {
+      addCommentOverlay.trigger(event.mouseup);
+      await nextTick();
+    }
   }
 
   beforeEach(() => {
@@ -125,7 +118,7 @@ describe('Design management design presentation component', () => {
     window.gon = originalGon;
   });
 
-  it('renders image and overlay when image provided', () => {
+  it('renders image and overlay when image provided', async () => {
     createComponent(
       {
         image: 'test.jpg',
@@ -134,20 +127,18 @@ describe('Design management design presentation component', () => {
       mockOverlayData,
     );
 
-    return nextTick().then(() => {
-      expect(wrapper.element).toMatchSnapshot();
-    });
+    await nextTick();
+    expect(wrapper.element).toMatchSnapshot();
   });
 
-  it('renders empty state when no image provided', () => {
+  it('renders empty state when no image provided', async () => {
     createComponent();
 
-    return nextTick().then(() => {
-      expect(wrapper.element).toMatchSnapshot();
-    });
+    await nextTick();
+    expect(wrapper.element).toMatchSnapshot();
   });
 
-  it('openCommentForm event emits correct data', () => {
+  it('openCommentForm event emits correct data', async () => {
     createComponent(
       {
         image: 'test.jpg',
@@ -158,15 +149,14 @@ describe('Design management design presentation component', () => {
 
     wrapper.vm.openCommentForm({ x: 1, y: 1 });
 
-    return nextTick().then(() => {
-      expect(wrapper.emitted('openCommentForm')).toEqual([
-        [{ ...mockOverlayData.overlayDimensions, x: 1, y: 1 }],
-      ]);
-    });
+    await nextTick();
+    expect(wrapper.emitted('openCommentForm')).toEqual([
+      [{ ...mockOverlayData.overlayDimensions, x: 1, y: 1 }],
+    ]);
   });
 
   describe('currentCommentForm', () => {
-    it('is null when isAnnotating is false', () => {
+    it('is null when isAnnotating is false', async () => {
       createComponent(
         {
           image: 'test.jpg',
@@ -175,13 +165,12 @@ describe('Design management design presentation component', () => {
         mockOverlayData,
       );
 
-      return nextTick().then(() => {
-        expect(wrapper.vm.currentCommentForm).toBeNull();
-        expect(wrapper.element).toMatchSnapshot();
-      });
+      await nextTick();
+      expect(wrapper.vm.currentCommentForm).toBeNull();
+      expect(wrapper.element).toMatchSnapshot();
     });
 
-    it('is null when isAnnotating is true but annotation position is falsey', () => {
+    it('is null when isAnnotating is true but annotation position is falsey', async () => {
       createComponent(
         {
           image: 'test.jpg',
@@ -191,13 +180,12 @@ describe('Design management design presentation component', () => {
         mockOverlayData,
       );
 
-      return nextTick().then(() => {
-        expect(wrapper.vm.currentCommentForm).toBeNull();
-        expect(wrapper.element).toMatchSnapshot();
-      });
+      await nextTick();
+      expect(wrapper.vm.currentCommentForm).toBeNull();
+      expect(wrapper.element).toMatchSnapshot();
     });
 
-    it('is equal to current annotation position when isAnnotating is true', () => {
+    it('is equal to current annotation position when isAnnotating is true', async () => {
       createComponent(
         {
           image: 'test.jpg',
@@ -215,15 +203,14 @@ describe('Design management design presentation component', () => {
         },
       );
 
-      return nextTick().then(() => {
-        expect(wrapper.vm.currentCommentForm).toEqual({
-          x: 1,
-          y: 1,
-          width: 100,
-          height: 100,
-        });
-        expect(wrapper.element).toMatchSnapshot();
+      await nextTick();
+      expect(wrapper.vm.currentCommentForm).toEqual({
+        x: 1,
+        y: 1,
+        width: 100,
+        height: 100,
       });
+      expect(wrapper.element).toMatchSnapshot();
     });
   });
 
@@ -388,7 +375,7 @@ describe('Design management design presentation component', () => {
   });
 
   describe('onImageResize', () => {
-    beforeEach(() => {
+    beforeEach(async () => {
       createComponent(
         {
           image: 'test.jpg',
@@ -401,7 +388,7 @@ describe('Design management design presentation component', () => {
       jest.spyOn(wrapper.vm, 'scaleZoomFocalPoint');
       jest.spyOn(wrapper.vm, 'scrollToFocalPoint');
       wrapper.vm.onImageResize({ width: 10, height: 10 });
-      return nextTick();
+      await nextTick();
     });
 
     it('sets zoom focal point on initial load', () => {
@@ -409,12 +396,11 @@ describe('Design management design presentation component', () => {
       expect(wrapper.vm.initialLoad).toBe(false);
     });
 
-    it('calls scaleZoomFocalPoint and scrollToFocalPoint after initial load', () => {
+    it('calls scaleZoomFocalPoint and scrollToFocalPoint after initial load', async () => {
       wrapper.vm.onImageResize({ width: 10, height: 10 });
-      return nextTick().then(() => {
-        expect(wrapper.vm.scaleZoomFocalPoint).toHaveBeenCalled();
-        expect(wrapper.vm.scrollToFocalPoint).toHaveBeenCalled();
-      });
+      await nextTick();
+      expect(wrapper.vm.scaleZoomFocalPoint).toHaveBeenCalled();
+      expect(wrapper.vm.scrollToFocalPoint).toHaveBeenCalled();
     });
   });
 
@@ -498,7 +484,7 @@ describe('Design management design presentation component', () => {
       );
     });
 
-    it('opens a comment form if design was not dragged', () => {
+    it('opens a comment form if design was not dragged', async () => {
       const addCommentOverlay = findOverlayCommentButton();
       const startCoords = {
         clientX: 1,
@@ -510,15 +496,10 @@ describe('Design management design presentation component', () => {
         clientY: startCoords.clientY,
       });
 
-      return wrapper.vm
-        .$nextTick()
-        .then(() => {
-          addCommentOverlay.trigger('mouseup');
-          return nextTick();
-        })
-        .then(() => {
-          expect(wrapper.emitted('openCommentForm')).toBeDefined();
-        });
+      await nextTick();
+      addCommentOverlay.trigger('mouseup');
+      await nextTick();
+      expect(wrapper.emitted('openCommentForm')).toBeDefined();
     });
 
     describe('when clicking and dragging', () => {
diff --git a/spec/frontend/design_management/components/design_scaler_spec.js b/spec/frontend/design_management/components/design_scaler_spec.js
index 095c070e5e8..a04e2ebda5b 100644
--- a/spec/frontend/design_management/components/design_scaler_spec.js
+++ b/spec/frontend/design_management/components/design_scaler_spec.js
@@ -1,5 +1,6 @@
 import { GlButton } from '@gitlab/ui';
 import { shallowMount } from '@vue/test-utils';
+import { nextTick } from 'vue';
 import DesignScaler from '~/design_management/components/design_scaler.vue';
 
 describe('Design management design scaler component', () => {
@@ -32,7 +33,7 @@ describe('Design management design scaler component', () => {
   describe('when `scale` value is greater than 1', () => {
     beforeEach(async () => {
       setScale(1.6);
-      await wrapper.vm.$nextTick();
+      await nextTick();
     });
 
     it('emits @scale event when "reset" button clicked', () => {
@@ -68,11 +69,11 @@ describe('Design management design scaler component', () => {
   it('computes & increments correct stepSize based on maxScale', async () => {
     wrapper.setProps({ maxScale: 11 });
 
-    await wrapper.vm.$nextTick();
+    await nextTick();
 
     getIncreaseScaleButton().vm.$emit('click');
 
-    await wrapper.vm.$nextTick();
+    await nextTick();
 
     expect(wrapper.emitted().scale[0][0]).toBe(3);
   });
@@ -96,7 +97,7 @@ describe('Design management design scaler component', () => {
   describe('when `scale` value is maximum', () => {
     beforeEach(async () => {
       setScale(2);
-      await wrapper.vm.$nextTick();
+      await nextTick();
     });
 
     it('disables the "increment" button', () => {
diff --git a/spec/frontend/design_management/components/design_sidebar_spec.js b/spec/frontend/design_management/components/design_sidebar_spec.js
index 4cd71bdb7f3..a818a86bef6 100644
--- a/spec/frontend/design_management/components/design_sidebar_spec.js
+++ b/spec/frontend/design_management/components/design_sidebar_spec.js
@@ -1,6 +1,7 @@
 import { GlCollapse, GlPopover } from '@gitlab/ui';
 import { shallowMount } from '@vue/test-utils';
 import Cookies from 'js-cookie';
+import { nextTick } from 'vue';
 import DesignDiscussion from '~/design_management/components/design_notes/design_discussion.vue';
 import DesignNoteSignedOut from '~/design_management/components/design_notes/design_note_signed_out.vue';
 import DesignSidebar from '~/design_management/components/design_sidebar.vue';
@@ -138,14 +139,13 @@ describe('Design management design sidebar component', () => {
       expect(wrapper.emitted('toggleResolvedComments')).toHaveLength(1);
     });
 
-    it('opens a collapsible when resolvedDiscussionsExpanded prop changes to true', () => {
+    it('opens a collapsible when resolvedDiscussionsExpanded prop changes to true', async () => {
       expect(findCollapsible().attributes('visible')).toBeUndefined();
       wrapper.setProps({
         resolvedDiscussionsExpanded: true,
       });
-      return wrapper.vm.$nextTick().then(() => {
-        expect(findCollapsible().attributes('visible')).toBe('true');
-      });
+      await nextTick();
+      expect(findCollapsible().attributes('visible')).toBe('true');
     });
 
     it('does not popover about resolved comments', () => {
@@ -182,12 +182,11 @@ describe('Design management design sidebar component', () => {
       expect(wrapper.emitted('resolveDiscussionError')).toEqual([['payload']]);
     });
 
-    it('changes prop correctly on opening discussion form', () => {
+    it('changes prop correctly on opening discussion form', async () => {
       findFirstDiscussion().vm.$emit('open-form', 'some-id');
 
-      return wrapper.vm.$nextTick().then(() => {
-        expect(findFirstDiscussion().props('discussionWithOpenForm')).toBe('some-id');
-      });
+      await nextTick();
+      expect(findFirstDiscussion().props('discussionWithOpenForm')).toBe('some-id');
     });
   });
 
@@ -246,17 +245,19 @@ describe('Design management design sidebar component', () => {
       expect(scrollIntoViewMock).toHaveBeenCalled();
     });
 
-    it('dismisses a popover on the outside click', () => {
+    it('dismisses a popover on the outside click', async () => {
       wrapper.trigger('click');
-      return wrapper.vm.$nextTick(() => {
-        expect(findPopover().exists()).toBe(false);
-      });
+      await nextTick();
+      expect(findPopover().exists()).toBe(false);
     });
 
     it(`sets a ${cookieKey} cookie on clicking outside the popover`, () => {
       jest.spyOn(Cookies, 'set');
       wrapper.trigger('click');
-      expect(Cookies.set).toHaveBeenCalledWith(cookieKey, 'true', { expires: 365 * 10 });
+      expect(Cookies.set).toHaveBeenCalledWith(cookieKey, 'true', {
+        expires: 365 * 10,
+        secure: false,
+      });
     });
   });
 
diff --git a/spec/frontend/design_management/components/design_todo_button_spec.js b/spec/frontend/design_management/components/design_todo_button_spec.js
index 757bf50c527..73661c9fcb0 100644
--- a/spec/frontend/design_management/components/design_todo_button_spec.js
+++ b/spec/frontend/design_management/components/design_todo_button_spec.js
@@ -1,4 +1,5 @@
 import { shallowMount, mount } from '@vue/test-utils';
+import { nextTick } from 'vue';
 import DesignTodoButton from '~/design_management/components/design_todo_button.vue';
 import createDesignTodoMutation from '~/design_management/graphql/mutations/create_design_todo.mutation.graphql';
 import todoMarkDoneMutation from '~/graphql_shared/mutations/todo_mark_done.mutation.graphql';
@@ -71,7 +72,7 @@ describe('Design management design todo button', () => {
     describe('when clicked', () => {
       let dispatchEventSpy;
 
-      beforeEach(() => {
+      beforeEach(async () => {
         dispatchEventSpy = jest.spyOn(document, 'dispatchEvent');
         jest.spyOn(document, 'querySelector').mockReturnValue({
           innerText: 2,
@@ -79,7 +80,7 @@ describe('Design management design todo button', () => {
 
         createComponent({ design: mockDesignWithPendingTodos }, { mountFn: mount });
         wrapper.trigger('click');
-        return wrapper.vm.$nextTick();
+        await nextTick();
       });
 
       it('calls `$apollo.mutate` with the `todoMarkDone` mutation and variables containing `id`', async () => {
@@ -117,7 +118,7 @@ describe('Design management design todo button', () => {
     describe('when clicked', () => {
       let dispatchEventSpy;
 
-      beforeEach(() => {
+      beforeEach(async () => {
         dispatchEventSpy = jest.spyOn(document, 'dispatchEvent');
         jest.spyOn(document, 'querySelector').mockReturnValue({
           innerText: 2,
@@ -125,7 +126,7 @@ describe('Design management design todo button', () => {
 
         createComponent({}, { mountFn: mount });
         wrapper.trigger('click');
-        return wrapper.vm.$nextTick();
+        await nextTick();
       });
 
       it('calls `$apollo.mutate` with the `createDesignTodoMutation` mutation and variables containing `issuable_id`, `issue_id`, & `projectPath`', async () => {
diff --git a/spec/frontend/design_management/components/image_spec.js b/spec/frontend/design_management/components/image_spec.js
index ac3afc73c86..e27b2bc9fa5 100644
--- a/spec/frontend/design_management/components/image_spec.js
+++ b/spec/frontend/design_management/components/image_spec.js
@@ -1,5 +1,6 @@
 import { GlIcon } from '@gitlab/ui';
 import { shallowMount } from '@vue/test-utils';
+import { nextTick } from 'vue';
 import DesignImage from '~/design_management/components/image.vue';
 
 describe('Design management large image component', () => {
@@ -36,7 +37,7 @@ describe('Design management large image component', () => {
     expect(wrapper.element).toMatchSnapshot();
   });
 
-  it('sets correct classes and styles if imageStyle is set', () => {
+  it('sets correct classes and styles if imageStyle is set', async () => {
     createComponent(
       {
         isLoading: false,
@@ -50,12 +51,11 @@ describe('Design management large image component', () => {
         },
       },
     );
-    return wrapper.vm.$nextTick().then(() => {
-      expect(wrapper.element).toMatchSnapshot();
-    });
+    await nextTick();
+    expect(wrapper.element).toMatchSnapshot();
   });
 
-  it('renders media broken icon on error', () => {
+  it('renders media broken icon on error', async () => {
     createComponent({
       isLoading: false,
       image: 'test.jpg',
@@ -64,10 +64,9 @@ describe('Design management large image component', () => {
 
     const image = wrapper.find('img');
     image.trigger('error');
-    return wrapper.vm.$nextTick().then(() => {
-      expect(image.isVisible()).toBe(false);
-      expect(wrapper.find(GlIcon).element).toMatchSnapshot();
-    });
+    await nextTick();
+    expect(image.isVisible()).toBe(false);
+    expect(wrapper.find(GlIcon).element).toMatchSnapshot();
   });
 
   describe('zoom', () => {
@@ -99,37 +98,34 @@ describe('Design management large image component', () => {
         .mockReturnValue(baseImageHeight);
     });
 
-    it('emits @resize event on zoom', () => {
+    it('emits @resize event on zoom', async () => {
       const zoomAmount = 2;
       wrapper.vm.zoom(zoomAmount);
 
-      return wrapper.vm.$nextTick().then(() => {
-        expect(wrapper.emitted('resize')).toEqual([
-          [{ width: baseImageWidth * zoomAmount, height: baseImageHeight * zoomAmount }],
-        ]);
-      });
+      await nextTick();
+      expect(wrapper.emitted('resize')).toEqual([
+        [{ width: baseImageWidth * zoomAmount, height: baseImageHeight * zoomAmount }],
+      ]);
     });
 
-    it('emits @resize event with base image size when scale=1', () => {
+    it('emits @resize event with base image size when scale=1', async () => {
       wrapper.vm.zoom(1);
 
-      return wrapper.vm.$nextTick().then(() => {
-        expect(wrapper.emitted('resize')).toEqual([
-          [{ width: baseImageWidth, height: baseImageHeight }],
-        ]);
-      });
+      await nextTick();
+      expect(wrapper.emitted('resize')).toEqual([
+        [{ width: baseImageWidth, height: baseImageHeight }],
+      ]);
     });
 
-    it('sets image style when zoomed', () => {
+    it('sets image style when zoomed', async () => {
       const zoomAmount = 2;
       wrapper.vm.zoom(zoomAmount);
       expect(wrapper.vm.imageStyle).toEqual({
         width: `${baseImageWidth * zoomAmount}px`,
         height: `${baseImageHeight * zoomAmount}px`,
       });
-      return wrapper.vm.$nextTick().then(() => {
-        expect(wrapper.element).toMatchSnapshot();
-      });
+      await nextTick();
+      expect(wrapper.element).toMatchSnapshot();
     });
   });
 });
diff --git a/spec/frontend/design_management/components/list/item_spec.js b/spec/frontend/design_management/components/list/item_spec.js
index ed105b112be..e00dda2015e 100644
--- a/spec/frontend/design_management/components/list/item_spec.js
+++ b/spec/frontend/design_management/components/list/item_spec.js
@@ -1,11 +1,11 @@
 import { GlIcon, GlLoadingIcon, GlIntersectionObserver } from '@gitlab/ui';
-import { createLocalVue, shallowMount } from '@vue/test-utils';
+import { shallowMount } from '@vue/test-utils';
+import Vue, { nextTick } from 'vue';
 import VueRouter from 'vue-router';
 import { extendedWrapper } from 'helpers/vue_test_utils_helper';
 import Item from '~/design_management/components/list/item.vue';
 
-const localVue = createLocalVue();
-localVue.use(VueRouter);
+Vue.use(VueRouter);
 const router = new VueRouter();
 
 // Referenced from: gitlab_schema.graphql:DesignVersionEvent
@@ -34,7 +34,6 @@ describe('Design management list item component', () => {
   } = {}) {
     wrapper = extendedWrapper(
       shallowMount(Item, {
-        localVue,
         router,
         propsData: {
           id: imgId,
@@ -72,13 +71,13 @@ describe('Design management list item component', () => {
     let image;
     let glIntersectionObserver;
 
-    beforeEach(() => {
+    beforeEach(async () => {
       createComponent();
       image = wrapper.find('img');
       glIntersectionObserver = wrapper.find(GlIntersectionObserver);
 
       glIntersectionObserver.vm.$emit('appear');
-      return wrapper.vm.$nextTick();
+      await nextTick();
     });
 
     it('renders a tooltip', () => {
@@ -92,9 +91,9 @@ describe('Design management list item component', () => {
     });
 
     describe('after image is loaded', () => {
-      beforeEach(() => {
+      beforeEach(async () => {
         image.trigger('load');
-        return wrapper.vm.$nextTick();
+        await nextTick();
       });
 
       it('renders an image', () => {
@@ -102,29 +101,27 @@ describe('Design management list item component', () => {
         expect(image.isVisible()).toBe(true);
       });
 
-      it('renders media broken icon when image onerror triggered', () => {
+      it('renders media broken icon when image onerror triggered', async () => {
         image.trigger('error');
-        return wrapper.vm.$nextTick().then(() => {
-          expect(image.isVisible()).toBe(false);
-          expect(wrapper.find(GlIcon).element).toMatchSnapshot();
-        });
+        await nextTick();
+        expect(image.isVisible()).toBe(false);
+        expect(wrapper.find(GlIcon).element).toMatchSnapshot();
       });
 
       describe('when imageV432x230 and image provided', () => {
-        it('renders imageV432x230 image', () => {
+        it('renders imageV432x230 image', async () => {
           const mockSrc = 'mock-imageV432x230-url';
           wrapper.setProps({ imageV432x230: mockSrc });
 
-          return wrapper.vm.$nextTick().then(() => {
-            expect(image.attributes('src')).toBe(mockSrc);
-          });
+          await nextTick();
+          expect(image.attributes('src')).toBe(mockSrc);
         });
       });
 
       describe('when image disappears from view and then reappears', () => {
-        beforeEach(() => {
+        beforeEach(async () => {
           glIntersectionObserver.vm.$emit('appear');
-          return wrapper.vm.$nextTick();
+          await nextTick();
         });
 
         it('renders an image', () => {
diff --git a/spec/frontend/design_management/components/toolbar/design_navigation_spec.js b/spec/frontend/design_management/components/toolbar/design_navigation_spec.js
index 6e0592984a2..38a7fadee79 100644
--- a/spec/frontend/design_management/components/toolbar/design_navigation_spec.js
+++ b/spec/frontend/design_management/components/toolbar/design_navigation_spec.js
@@ -1,6 +1,7 @@
 /* global Mousetrap */
 import 'mousetrap';
 import { shallowMount } from '@vue/test-utils';
+import { nextTick } from 'vue';
 import DesignNavigation from '~/design_management/components/toolbar/design_navigation.vue';
 import { DESIGN_ROUTE_NAME } from '~/design_management/router/constants';
 
@@ -41,16 +42,15 @@ describe('Design management pagination component', () => {
     expect(wrapper.element).toMatchSnapshot();
   });
 
-  it('renders navigation buttons', () => {
+  it('renders navigation buttons', async () => {
     // setData usage is discouraged. See https://gitlab.com/groups/gitlab-org/-/epics/7330 for details
     // eslint-disable-next-line no-restricted-syntax
     wrapper.setData({
       designCollection: { designs: [{ id: '1' }, { id: '2' }] },
     });
 
-    return wrapper.vm.$nextTick().then(() => {
-      expect(wrapper.element).toMatchSnapshot();
-    });
+    await nextTick();
+    expect(wrapper.element).toMatchSnapshot();
   });
 
   describe('keyboard buttons navigation', () => {
diff --git a/spec/frontend/design_management/components/toolbar/index_spec.js b/spec/frontend/design_management/components/toolbar/index_spec.js
index cf872046f53..412f3de911e 100644
--- a/spec/frontend/design_management/components/toolbar/index_spec.js
+++ b/spec/frontend/design_management/components/toolbar/index_spec.js
@@ -1,12 +1,12 @@
 import { GlButton } from '@gitlab/ui';
-import { createLocalVue, shallowMount } from '@vue/test-utils';
+import { shallowMount } from '@vue/test-utils';
+import Vue, { nextTick } from 'vue';
 import VueRouter from 'vue-router';
 import DeleteButton from '~/design_management/components/delete_button.vue';
 import Toolbar from '~/design_management/components/toolbar/index.vue';
 import { DESIGNS_ROUTE_NAME } from '~/design_management/router/constants';
 
-const localVue = createLocalVue();
-localVue.use(VueRouter);
+Vue.use(VueRouter);
 const router = new VueRouter();
 
 const RouterLinkStub = {
@@ -28,7 +28,6 @@ describe('Design management toolbar component', () => {
     updatedAt.setHours(updatedAt.getHours() - 1);
 
     wrapper = shallowMount(Toolbar, {
-      localVue,
       router,
       propsData: {
         id: '1',
@@ -61,60 +60,54 @@ describe('Design management toolbar component', () => {
     wrapper.destroy();
   });
 
-  it('renders design and updated data', () => {
+  it('renders design and updated data', async () => {
     createComponent();
 
-    return wrapper.vm.$nextTick().then(() => {
-      expect(wrapper.element).toMatchSnapshot();
-    });
+    await nextTick();
+    expect(wrapper.element).toMatchSnapshot();
   });
 
-  it('links back to designs list', () => {
+  it('links back to designs list', async () => {
     createComponent();
 
-    return wrapper.vm.$nextTick().then(() => {
-      const link = wrapper.find('a');
+    await nextTick();
+    const link = wrapper.find('a');
 
-      expect(link.props('to')).toEqual({
-        name: DESIGNS_ROUTE_NAME,
-        query: {
-          version: undefined,
-        },
-      });
+    expect(link.props('to')).toEqual({
+      name: DESIGNS_ROUTE_NAME,
+      query: {
+        version: undefined,
+      },
     });
   });
 
-  it('renders delete button on latest designs version with logged in user', () => {
+  it('renders delete button on latest designs version with logged in user', async () => {
     createComponent();
 
-    return wrapper.vm.$nextTick().then(() => {
-      expect(wrapper.find(DeleteButton).exists()).toBe(true);
-    });
+    await nextTick();
+    expect(wrapper.find(DeleteButton).exists()).toBe(true);
   });
 
-  it('does not render delete button on non-latest version', () => {
+  it('does not render delete button on non-latest version', async () => {
     createComponent(false, true, { isLatestVersion: false });
 
-    return wrapper.vm.$nextTick().then(() => {
-      expect(wrapper.find(DeleteButton).exists()).toBe(false);
-    });
+    await nextTick();
+    expect(wrapper.find(DeleteButton).exists()).toBe(false);
   });
 
-  it('does not render delete button when user is not logged in', () => {
+  it('does not render delete button when user is not logged in', async () => {
     createComponent(false, false);
 
-    return wrapper.vm.$nextTick().then(() => {
-      expect(wrapper.find(DeleteButton).exists()).toBe(false);
-    });
+    await nextTick();
+    expect(wrapper.find(DeleteButton).exists()).toBe(false);
   });
 
-  it('emits `delete` event on deleteButton `delete-selected-designs` event', () => {
+  it('emits `delete` event on deleteButton `delete-selected-designs` event', async () => {
     createComponent();
 
-    return wrapper.vm.$nextTick().then(() => {
-      wrapper.find(DeleteButton).vm.$emit('delete-selected-designs');
-      expect(wrapper.emitted().delete).toBeTruthy();
-    });
+    await nextTick();
+    wrapper.find(DeleteButton).vm.$emit('delete-selected-designs');
+    expect(wrapper.emitted().delete).toBeTruthy();
   });
 
   it('renders download button with correct link', () => {
diff --git a/spec/frontend/design_management/components/upload/design_version_dropdown_spec.js b/spec/frontend/design_management/components/upload/design_version_dropdown_spec.js
index a4fb671ae13..ec5db04bb80 100644
--- a/spec/frontend/design_management/components/upload/design_version_dropdown_spec.js
+++ b/spec/frontend/design_management/components/upload/design_version_dropdown_spec.js
@@ -1,5 +1,6 @@
 import { GlDropdown, GlDropdownItem, GlSprintf } from '@gitlab/ui';
 import { shallowMount } from '@vue/test-utils';
+import { nextTick } from 'vue';
 import DesignVersionDropdown from '~/design_management/components/upload/design_version_dropdown.vue';
 import TimeAgo from '~/vue_shared/components/time_ago_tooltip.vue';
 import mockAllVersions from './mock_data/all_versions';
@@ -47,77 +48,69 @@ describe('Design management design version dropdown component', () => {
 
   const findVersionLink = (index) => wrapper.findAll(GlDropdownItem).at(index);
 
-  it('renders design version dropdown button', () => {
+  it('renders design version dropdown button', async () => {
     createComponent();
 
-    return wrapper.vm.$nextTick().then(() => {
-      expect(wrapper.element).toMatchSnapshot();
-    });
+    await nextTick();
+    expect(wrapper.element).toMatchSnapshot();
   });
 
-  it('renders design version list', () => {
+  it('renders design version list', async () => {
     createComponent();
 
-    return wrapper.vm.$nextTick().then(() => {
-      expect(wrapper.element).toMatchSnapshot();
-    });
+    await nextTick();
+    expect(wrapper.element).toMatchSnapshot();
   });
 
   describe('selected version name', () => {
-    it('has "latest" on most recent version item', () => {
+    it('has "latest" on most recent version item', async () => {
       createComponent();
 
-      return wrapper.vm.$nextTick().then(() => {
-        expect(findVersionLink(0).text()).toContain('latest');
-      });
+      await nextTick();
+      expect(findVersionLink(0).text()).toContain('latest');
     });
   });
 
   describe('versions list', () => {
-    it('displays latest version text by default', () => {
+    it('displays latest version text by default', async () => {
       createComponent();
 
-      return wrapper.vm.$nextTick().then(() => {
-        expect(wrapper.find(GlDropdown).attributes('text')).toBe('Showing latest version');
-      });
+      await nextTick();
+      expect(wrapper.find(GlDropdown).attributes('text')).toBe('Showing latest version');
     });
 
-    it('displays latest version text when only 1 version is present', () => {
+    it('displays latest version text when only 1 version is present', async () => {
       createComponent({ maxVersions: 1 });
 
-      return wrapper.vm.$nextTick().then(() => {
-        expect(wrapper.find(GlDropdown).attributes('text')).toBe('Showing latest version');
-      });
+      await nextTick();
+      expect(wrapper.find(GlDropdown).attributes('text')).toBe('Showing latest version');
     });
 
-    it('displays version text when the current version is not the latest', () => {
+    it('displays version text when the current version is not the latest', async () => {
       createComponent({ $route: designRouteFactory(PREVIOUS_VERSION_ID) });
 
-      return wrapper.vm.$nextTick().then(() => {
-        expect(wrapper.find(GlDropdown).attributes('text')).toBe(`Showing version #1`);
-      });
+      await nextTick();
+      expect(wrapper.find(GlDropdown).attributes('text')).toBe(`Showing version #1`);
     });
 
-    it('displays latest version text when the current version is the latest', () => {
+    it('displays latest version text when the current version is the latest', async () => {
       createComponent({ $route: designRouteFactory(LATEST_VERSION_ID) });
 
-      return wrapper.vm.$nextTick().then(() => {
-        expect(wrapper.find(GlDropdown).attributes('text')).toBe('Showing latest version');
-      });
+      await nextTick();
+      expect(wrapper.find(GlDropdown).attributes('text')).toBe('Showing latest version');
     });
 
-    it('should have the same length as apollo query', () => {
+    it('should have the same length as apollo query', async () => {
       createComponent();
 
-      return wrapper.vm.$nextTick().then(() => {
-        expect(wrapper.findAll(GlDropdownItem)).toHaveLength(wrapper.vm.allVersions.length);
-      });
+      await nextTick();
+      expect(wrapper.findAll(GlDropdownItem)).toHaveLength(wrapper.vm.allVersions.length);
     });
 
     it('should render TimeAgo', async () => {
       createComponent();
 
-      await wrapper.vm.$nextTick();
+      await nextTick();
 
       expect(wrapper.findAllComponents(TimeAgo)).toHaveLength(wrapper.vm.allVersions.length);
     });