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

20 files changed, 153 insertions, 147 deletions

diff --git a/spec/frontend/sidebar/assignees_realtime_spec.js b/spec/frontend/sidebar/assignees_realtime_spec.js
index ecf33d6de37..2249a1c08b8 100644
--- a/spec/frontend/sidebar/assignees_realtime_spec.js
+++ b/spec/frontend/sidebar/assignees_realtime_spec.js
@@ -1,4 +1,5 @@
-import { shallowMount, createLocalVue } from '@vue/test-utils';
+import { shallowMount } from '@vue/test-utils';
+import Vue from 'vue';
 import VueApollo from 'vue-apollo';
 import createMockApollo from 'helpers/mock_apollo_helper';
 import AssigneesRealtime from '~/sidebar/components/assignees/assignees_realtime.vue';
@@ -7,8 +8,7 @@ import SidebarMediator from '~/sidebar/sidebar_mediator';
 import getIssueAssigneesQuery from '~/vue_shared/components/sidebar/queries/get_issue_assignees.query.graphql';
 import Mock, { issuableQueryResponse, subscriptionNullResponse } from './mock_data';
 
-const localVue = createLocalVue();
-localVue.use(VueApollo);
+Vue.use(VueApollo);
 
 describe('Assignees Realtime', () => {
   let wrapper;
@@ -38,7 +38,6 @@ describe('Assignees Realtime', () => {
         mediator,
       },
       apolloProvider: fakeApollo,
-      localVue,
     });
   };
 
diff --git a/spec/frontend/sidebar/assignees_spec.js b/spec/frontend/sidebar/assignees_spec.js
index b3a67f18f82..a4474ead956 100644
--- a/spec/frontend/sidebar/assignees_spec.js
+++ b/spec/frontend/sidebar/assignees_spec.js
@@ -1,5 +1,6 @@
 import { GlIcon } from '@gitlab/ui';
 import { mount } from '@vue/test-utils';
+import { nextTick } from 'vue';
 import { trimText } from 'helpers/text_helper';
 import UsersMockHelper from 'helpers/user_mock_data_helper';
 import Assignee from '~/sidebar/components/assignees/assignees.vue';
@@ -59,7 +60,7 @@ describe('Assignee component', () => {
       expect(componentTextNoUsers).toContain('assign yourself');
     });
 
-    it('emits the assign-self event when "assign yourself" is clicked', () => {
+    it('emits the assign-self event when "assign yourself" is clicked', async () => {
       createWrapper({
         ...getDefaultProps(),
         editable: true,
@@ -68,9 +69,8 @@ describe('Assignee component', () => {
       jest.spyOn(wrapper.vm, '$emit');
       wrapper.find('[data-testid="assign-yourself"]').trigger('click');
 
-      return wrapper.vm.$nextTick().then(() => {
-        expect(wrapper.emitted('assign-self')).toBeTruthy();
-      });
+      await nextTick();
+      expect(wrapper.emitted('assign-self')).toBeTruthy();
     });
   });
 
diff --git a/spec/frontend/sidebar/components/assignees/sidebar_assignees_widget_spec.js b/spec/frontend/sidebar/components/assignees/sidebar_assignees_widget_spec.js
index 07da4acef8c..def46255994 100644
--- a/spec/frontend/sidebar/components/assignees/sidebar_assignees_widget_spec.js
+++ b/spec/frontend/sidebar/components/assignees/sidebar_assignees_widget_spec.js
@@ -1,6 +1,7 @@
 import { GlSearchBoxByType, GlDropdown } from '@gitlab/ui';
-import { shallowMount, createLocalVue } from '@vue/test-utils';
-import { nextTick } from 'vue';
+import { shallowMount } from '@vue/test-utils';
+import Vue, { nextTick } from 'vue';
+
 import VueApollo from 'vue-apollo';
 import createMockApollo from 'helpers/mock_apollo_helper';
 import waitForPromises from 'helpers/wait_for_promises';
@@ -23,8 +24,7 @@ const updateIssueAssigneesMutationSuccess = jest
   .mockResolvedValue(updateIssueAssigneesMutationResponse);
 const mockError = jest.fn().mockRejectedValue('Error!');
 
-const localVue = createLocalVue();
-localVue.use(VueApollo);
+Vue.use(VueApollo);
 
 const initialAssignees = [
   {
@@ -59,7 +59,6 @@ describe('Sidebar assignees widget', () => {
       [updateIssueAssigneesMutation, updateIssueAssigneesMutationHandler],
     ]);
     wrapper = shallowMount(SidebarAssigneesWidget, {
-      localVue,
       apolloProvider: fakeApollo,
       propsData: {
         iid: '1',
@@ -138,9 +137,17 @@ describe('Sidebar assignees widget', () => {
       createComponent();
       await waitForPromises();
 
-      expect(findAssignees().props('users')).toEqual(
-        issuableQueryResponse.data.workspace.issuable.assignees.nodes,
-      );
+      expect(findAssignees().props('users')).toEqual([
+        {
+          id: 'gid://gitlab/User/2',
+          avatarUrl:
+            'https://www.gravatar.com/avatar/a95e5b71488f4b9d69ce5ff58bfd28d6?s=80\u0026d=identicon',
+          name: 'Jacki Kub',
+          username: 'francina.skiles',
+          webUrl: '/franc',
+          status: null,
+        },
+      ]);
     });
 
     it('renders an error when issuable query is rejected', async () => {
@@ -196,7 +203,7 @@ describe('Sidebar assignees widget', () => {
           {
             assignees: [
               {
-                __typename: 'User',
+                __typename: 'UserCore',
                 avatarUrl:
                   'https://www.gravatar.com/avatar/e64c7d89f26bd1972efa854d13d7dd61?s=80&d=identicon',
                 id: 'gid://gitlab/User/1',
@@ -322,9 +329,10 @@ describe('Sidebar assignees widget', () => {
   });
 
   describe('when user is not signed in', () => {
-    beforeEach(() => {
+    beforeEach(async () => {
       gon.current_username = undefined;
       createComponent();
+      await waitForPromises();
     });
 
     it('passes signedIn prop as false to IssuableAssignees', () => {
@@ -353,6 +361,7 @@ describe('Sidebar assignees widget', () => {
   describe('when making changes to participants list', () => {
     beforeEach(async () => {
       createComponent();
+      await waitForPromises();
     });
 
     it('passes falsy `isDirty` prop to editable item if no changes to selected users were made', () => {
diff --git a/spec/frontend/sidebar/components/assignees/sidebar_editable_item_spec.js b/spec/frontend/sidebar/components/assignees/sidebar_editable_item_spec.js
index 84b192aaf41..c870bbecd76 100644
--- a/spec/frontend/sidebar/components/assignees/sidebar_editable_item_spec.js
+++ b/spec/frontend/sidebar/components/assignees/sidebar_editable_item_spec.js
@@ -1,5 +1,6 @@
 import { GlLoadingIcon } from '@gitlab/ui';
 import { shallowMount } from '@vue/test-utils';
+import { nextTick } from 'vue';
 import SidebarEditableItem from '~/sidebar/components/sidebar_editable_item.vue';
 
 describe('boards sidebar remove issue', () => {
@@ -71,7 +72,7 @@ describe('boards sidebar remove issue', () => {
       createComponent({ canUpdate: true, slots });
       findEditButton().vm.$emit('click');
 
-      await wrapper.vm.$nextTick;
+      await nextTick;
 
       expect(findCollapsed().isVisible()).toBe(false);
       expect(findExpanded().isVisible()).toBe(true);
@@ -82,14 +83,14 @@ describe('boards sidebar remove issue', () => {
     beforeEach(async () => {
       createComponent({ canUpdate: true });
       findEditButton().vm.$emit('click');
-      await wrapper.vm.$nextTick();
+      await nextTick();
     });
 
     it('hides expanded section and displays collapsed section', async () => {
       expect(findExpanded().isVisible()).toBe(true);
       document.body.click();
 
-      await wrapper.vm.$nextTick();
+      await nextTick();
 
       expect(findCollapsed().isVisible()).toBe(true);
       expect(findExpanded().isVisible()).toBe(false);
@@ -101,7 +102,7 @@ describe('boards sidebar remove issue', () => {
 
     findEditButton().vm.$emit('click');
 
-    await wrapper.vm.$nextTick();
+    await nextTick();
 
     expect(wrapper.emitted().open.length).toBe(1);
   });
@@ -111,7 +112,7 @@ describe('boards sidebar remove issue', () => {
 
     findEditButton().vm.$emit('click');
 
-    await wrapper.vm.$nextTick();
+    await nextTick();
 
     wrapper.vm.collapse({ emitEvent: false });
 
diff --git a/spec/frontend/sidebar/components/assignees/uncollapsed_assignee_list_spec.js b/spec/frontend/sidebar/components/assignees/uncollapsed_assignee_list_spec.js
index c72c23a3a60..90aae85e1ca 100644
--- a/spec/frontend/sidebar/components/assignees/uncollapsed_assignee_list_spec.js
+++ b/spec/frontend/sidebar/components/assignees/uncollapsed_assignee_list_spec.js
@@ -1,4 +1,5 @@
 import { mount } from '@vue/test-utils';
+import { nextTick } from 'vue';
 import { TEST_HOST } from 'helpers/test_constants';
 import UsersMockHelper from 'helpers/user_mock_data_helper';
 import AssigneeAvatarLink from '~/sidebar/components/assignees/assignee_avatar_link.vue';
@@ -84,10 +85,10 @@ describe('UncollapsedAssigneeList component', () => {
       });
 
       describe('when more button is clicked', () => {
-        beforeEach(() => {
+        beforeEach(async () => {
           findMoreButton().trigger('click');
 
-          return wrapper.vm.$nextTick();
+          await nextTick();
         });
 
         it('shows "show less" label', () => {
diff --git a/spec/frontend/sidebar/components/confidential/sidebar_confidentiality_widget_spec.js b/spec/frontend/sidebar/components/confidential/sidebar_confidentiality_widget_spec.js
index 707215d0739..1de71e52264 100644
--- a/spec/frontend/sidebar/components/confidential/sidebar_confidentiality_widget_spec.js
+++ b/spec/frontend/sidebar/components/confidential/sidebar_confidentiality_widget_spec.js
@@ -1,5 +1,6 @@
-import { shallowMount, createLocalVue } from '@vue/test-utils';
-import { nextTick } from 'vue';
+import { shallowMount } from '@vue/test-utils';
+import Vue, { nextTick } from 'vue';
+
 import VueApollo from 'vue-apollo';
 import createMockApollo from 'helpers/mock_apollo_helper';
 import waitForPromises from 'helpers/wait_for_promises';
@@ -15,8 +16,7 @@ import { issueConfidentialityResponse } from '../../mock_data';
 
 jest.mock('~/flash');
 
-const localVue = createLocalVue();
-localVue.use(VueApollo);
+Vue.use(VueApollo);
 
 describe('Sidebar Confidentiality Widget', () => {
   let wrapper;
@@ -32,7 +32,6 @@ describe('Sidebar Confidentiality Widget', () => {
     fakeApollo = createMockApollo([[issueConfidentialQuery, confidentialQueryHandler]]);
 
     wrapper = shallowMount(SidebarConfidentialityWidget, {
-      localVue,
       apolloProvider: fakeApollo,
       provide: {
         canUpdate: true,
diff --git a/spec/frontend/sidebar/components/mock_data.js b/spec/frontend/sidebar/components/mock_data.js
index 70c3f8a3012..a9a00b3cfdf 100644
--- a/spec/frontend/sidebar/components/mock_data.js
+++ b/spec/frontend/sidebar/components/mock_data.js
@@ -1,6 +1,7 @@
 export const getIssueCrmContactsQueryResponse = {
   data: {
     issue: {
+      __typename: 'Issue',
       id: 'gid://gitlab/Issue/123',
       customerRelationsContacts: {
         nodes: [
@@ -37,6 +38,7 @@ export const issueCrmContactsUpdateNullResponse = {
 export const issueCrmContactsUpdateResponse = {
   data: {
     issueCrmContactsUpdated: {
+      __typename: 'Issue',
       id: 'gid://gitlab/Issue/123',
       customerRelationsContacts: {
         nodes: [
diff --git a/spec/frontend/sidebar/components/participants/sidebar_participants_widget_spec.js b/spec/frontend/sidebar/components/participants/sidebar_participants_widget_spec.js
index 859e63b3df6..338ecf944f3 100644
--- a/spec/frontend/sidebar/components/participants/sidebar_participants_widget_spec.js
+++ b/spec/frontend/sidebar/components/participants/sidebar_participants_widget_spec.js
@@ -1,6 +1,7 @@
 import { shallowMount } from '@vue/test-utils';
 import Vue, { nextTick } from 'vue';
 import VueApollo from 'vue-apollo';
+import { stripTypenames } from 'helpers/graphql_helpers';
 import createMockApollo from 'helpers/mock_apollo_helper';
 import waitForPromises from 'helpers/wait_for_promises';
 import Participants from '~/sidebar/components/participants/participants.vue';
@@ -66,9 +67,11 @@ describe('Sidebar Participants Widget', () => {
     });
 
     it('passes participants to child component', () => {
-      expect(findParticipants().props('participants')).toEqual(
+      const participantsWithoutTypename = stripTypenames(
         epicParticipantsResponse().data.workspace.issuable.participants.nodes,
       );
+
+      expect(findParticipants().props('participants')).toEqual(participantsWithoutTypename);
     });
   });
 
diff --git a/spec/frontend/sidebar/components/severity/sidebar_severity_spec.js b/spec/frontend/sidebar/components/severity/sidebar_severity_spec.js
index 6116bc68927..5d80a221d8e 100644
--- a/spec/frontend/sidebar/components/severity/sidebar_severity_spec.js
+++ b/spec/frontend/sidebar/components/severity/sidebar_severity_spec.js
@@ -97,14 +97,14 @@ describe('SidebarSeverity', () => {
       });
     });
 
-    it('shows error alert when severity update fails ', () => {
+    it('shows error alert when severity update fails ', async () => {
       const errorMsg = 'Something went wrong';
       jest.spyOn(wrapper.vm.$apollo, 'mutate').mockRejectedValueOnce(errorMsg);
       findCriticalSeverityDropdownItem().vm.$emit('click');
 
-      setImmediate(() => {
-        expect(createFlash).toHaveBeenCalled();
-      });
+      await waitForPromises();
+
+      expect(createFlash).toHaveBeenCalled();
     });
 
     it('shows loading icon while updating', async () => {
diff --git a/spec/frontend/sidebar/components/sidebar_dropdown_widget_spec.js b/spec/frontend/sidebar/components/sidebar_dropdown_widget_spec.js
index d7471d99477..3ddd41c0bd4 100644
--- a/spec/frontend/sidebar/components/sidebar_dropdown_widget_spec.js
+++ b/spec/frontend/sidebar/components/sidebar_dropdown_widget_spec.js
@@ -8,9 +8,9 @@ import {
   GlLoadingIcon,
 } from '@gitlab/ui';
 import * as Sentry from '@sentry/browser';
-import { createLocalVue, shallowMount, mount } from '@vue/test-utils';
+import { shallowMount, mount } from '@vue/test-utils';
+import Vue, { nextTick } from 'vue';
 import VueApollo from 'vue-apollo';
-
 import createMockApollo from 'helpers/mock_apollo_helper';
 import { createMockDirective, getBinding } from 'helpers/vue_mock_directive';
 import { extendedWrapper } from 'helpers/vue_test_utils_helper';
@@ -37,8 +37,6 @@ import {
 
 jest.mock('~/flash');
 
-const localVue = createLocalVue();
-
 describe('SidebarDropdownWidget', () => {
   let wrapper;
   let mockApollo;
@@ -78,7 +76,7 @@ describe('SidebarDropdownWidget', () => {
     // It then emits `shown` event in a watcher for `visible`
     // Hence we need both of these:
     await waitForPromises();
-    await wrapper.vm.$nextTick();
+    await nextTick();
   };
 
   const waitForApollo = async () => {
@@ -108,7 +106,7 @@ describe('SidebarDropdownWidget', () => {
     projectMilestonesSpy = jest.fn().mockResolvedValue(mockProjectMilestonesResponse),
     currentMilestoneSpy = jest.fn().mockResolvedValue(noCurrentMilestoneResponse),
   } = {}) => {
-    localVue.use(VueApollo);
+    Vue.use(VueApollo);
     mockApollo = createMockApollo([
       [projectMilestonesQuery, projectMilestonesSpy],
       [projectIssueMilestoneQuery, currentMilestoneSpy],
@@ -117,7 +115,6 @@ describe('SidebarDropdownWidget', () => {
 
     wrapper = extendedWrapper(
       mount(SidebarDropdownWidget, {
-        localVue,
         provide: { canUpdate: true },
         apolloProvider: mockApollo,
         propsData: {
@@ -354,7 +351,7 @@ describe('SidebarDropdownWidget', () => {
                 });
 
                 it(`calls createFlash with "${expectedMsg}"`, async () => {
-                  await wrapper.vm.$nextTick();
+                  await nextTick();
                   expect(createFlash).toHaveBeenCalledWith({
                     message: expectedMsg,
                     captureError: true,
@@ -377,7 +374,7 @@ describe('SidebarDropdownWidget', () => {
 
               findSearchBox().vm.$emit('input', 'non existing milestones');
 
-              await wrapper.vm.$nextTick();
+              await nextTick();
 
               expect(findDropdownText().text()).toBe('No milestone found');
             });
@@ -482,7 +479,7 @@ describe('SidebarDropdownWidget', () => {
 
             it('sends a projectMilestones query with the entered search term "foo"', async () => {
               findSearchBox().vm.$emit('input', mockSearchTerm);
-              await wrapper.vm.$nextTick();
+              await nextTick();
 
               // Account for debouncing
               jest.runAllTimers();
diff --git a/spec/frontend/sidebar/components/time_tracking/report_spec.js b/spec/frontend/sidebar/components/time_tracking/report_spec.js
index 64d143615a0..2b17e6dd6c3 100644
--- a/spec/frontend/sidebar/components/time_tracking/report_spec.js
+++ b/spec/frontend/sidebar/components/time_tracking/report_spec.js
@@ -1,6 +1,7 @@
 import { GlLoadingIcon } from '@gitlab/ui';
 import { getAllByRole, getByRole } from '@testing-library/dom';
-import { shallowMount, createLocalVue, mount } from '@vue/test-utils';
+import { shallowMount, mount } from '@vue/test-utils';
+import Vue from 'vue';
 import VueApollo from 'vue-apollo';
 import createMockApollo from 'helpers/mock_apollo_helper';
 import waitForPromises from 'helpers/wait_for_promises';
@@ -13,8 +14,7 @@ import { getIssueTimelogsQueryResponse, getMrTimelogsQueryResponse } from './moc
 jest.mock('~/flash');
 
 describe('Issuable Time Tracking Report', () => {
-  const localVue = createLocalVue();
-  localVue.use(VueApollo);
+  Vue.use(VueApollo);
   let wrapper;
   let fakeApollo;
   const findLoadingIcon = () => wrapper.findComponent(GlLoadingIcon);
@@ -37,7 +37,6 @@ describe('Issuable Time Tracking Report', () => {
         issuableType,
       },
       propsData: { limitToHours, issuableId: '1' },
-      localVue,
       apolloProvider: fakeApollo,
     });
   };
diff --git a/spec/frontend/sidebar/components/time_tracking/time_tracker_spec.js b/spec/frontend/sidebar/components/time_tracking/time_tracker_spec.js
index eb202a8cfcc..835e700e63c 100644
--- a/spec/frontend/sidebar/components/time_tracking/time_tracker_spec.js
+++ b/spec/frontend/sidebar/components/time_tracking/time_tracker_spec.js
@@ -1,5 +1,6 @@
 import { mount } from '@vue/test-utils';
 
+import { nextTick } from 'vue';
 import { stubTransition } from 'helpers/stub_transition';
 import { createMockDirective } from 'helpers/vue_mock_directive';
 import TimeTracker from '~/sidebar/components/time_tracking/time_tracker.vue';
@@ -161,7 +162,7 @@ describe('Issuable Time Tracker', () => {
 
       it('should show the correct tooltip text', async () => {
         expect(findByTestId('timeTrackingComparisonPane').exists()).toBe(true);
-        await wrapper.vm.$nextTick();
+        await nextTick();
 
         expect(findComparisonMeter()).toBe('Time remaining: 26h 23m');
       });
@@ -179,7 +180,7 @@ describe('Issuable Time Tracker', () => {
             },
           },
         });
-        await wrapper.vm.$nextTick();
+        await nextTick();
       });
 
       it('should display the human readable version of time estimated', () => {
@@ -282,7 +283,7 @@ describe('Issuable Time Tracker', () => {
             },
           },
         });
-        await wrapper.vm.$nextTick();
+        await nextTick();
       });
 
       it('should not show the "Help" pane by default', () => {
@@ -292,19 +293,19 @@ describe('Issuable Time Tracker', () => {
       it('should show the "Help" pane when help button is clicked', async () => {
         findHelpButton().trigger('click');
 
-        await wrapper.vm.$nextTick();
+        await nextTick();
 
         expect(findByTestId('helpPane').exists()).toBe(true);
       });
 
       it('should not show the "Help" pane when help button is clicked and then closed', async () => {
         findHelpButton().trigger('click');
-        await wrapper.vm.$nextTick();
+        await nextTick();
 
         expect(findByTestId('helpPane').exists()).toBe(true);
 
         findCloseHelpButton().trigger('click');
-        await wrapper.vm.$nextTick();
+        await nextTick();
 
         expect(findByTestId('helpPane').exists()).toBe(false);
       });
@@ -315,7 +316,7 @@ describe('Issuable Time Tracker', () => {
     it('refetches issuableTimeTracking query when eventHub emits `timeTracker:refresh` event', async () => {
       SidebarEventHub.$emit('timeTracker:refresh');
 
-      await wrapper.vm.$nextTick();
+      await nextTick();
 
       expect(issuableTimeTrackingRefetchSpy).toHaveBeenCalled();
     });
diff --git a/spec/frontend/sidebar/components/todo_toggle/sidebar_todo_widget_spec.js b/spec/frontend/sidebar/components/todo_toggle/sidebar_todo_widget_spec.js
index 23f1753c4bf..ea931782d1e 100644
--- a/spec/frontend/sidebar/components/todo_toggle/sidebar_todo_widget_spec.js
+++ b/spec/frontend/sidebar/components/todo_toggle/sidebar_todo_widget_spec.js
@@ -1,6 +1,6 @@
-import { GlIcon } from '@gitlab/ui';
+import { GlIcon, GlButton } from '@gitlab/ui';
 import { shallowMount } from '@vue/test-utils';
-import Vue from 'vue';
+import Vue, { nextTick } from 'vue';
 import VueApollo from 'vue-apollo';
 import createMockApollo from 'helpers/mock_apollo_helper';
 import waitForPromises from 'helpers/wait_for_promises';
@@ -103,7 +103,7 @@ describe('Sidebar Todo Widget', () => {
     });
 
     it('sets default tooltip title', () => {
-      expect(wrapper.find(GlIcon).attributes('title')).toBe('Add a to do');
+      expect(wrapper.find(GlButton).attributes('title')).toBe('Add a to do');
     });
 
     it('when user has a to do', async () => {
@@ -113,13 +113,13 @@ describe('Sidebar Todo Widget', () => {
 
       await waitForPromises();
       expect(wrapper.find(GlIcon).props('name')).toBe('todo-done');
-      expect(wrapper.find(GlIcon).attributes('title')).toBe('Mark as done');
+      expect(wrapper.find(GlButton).attributes('title')).toBe('Mark as done');
     });
 
     it('emits `todoUpdated` event on click on icon', async () => {
       wrapper.find(GlIcon).vm.$emit('click', event);
 
-      await wrapper.vm.$nextTick();
+      await nextTick();
       expect(wrapper.emitted('todoUpdated')).toEqual([[false]]);
     });
   });
diff --git a/spec/frontend/sidebar/lock/edit_form_buttons_spec.js b/spec/frontend/sidebar/lock/edit_form_buttons_spec.js
index 1673425947e..971744edb0f 100644
--- a/spec/frontend/sidebar/lock/edit_form_buttons_spec.js
+++ b/spec/frontend/sidebar/lock/edit_form_buttons_spec.js
@@ -1,4 +1,5 @@
 import { mount } from '@vue/test-utils';
+import { nextTick } from 'vue';
 import createFlash from '~/flash';
 import { createStore as createMrStore } from '~/mr_notes/stores';
 import createStore from '~/notes/stores';
@@ -118,15 +119,13 @@ describe('EditFormButtons', () => {
           });
 
           it('resets loading', async () => {
-            await wrapper.vm.$nextTick().then(() => {
-              expect(findLockToggle().props('loading')).toBe(false);
-            });
+            await nextTick();
+            expect(findLockToggle().props('loading')).toBe(false);
           });
 
-          it('emits close form', () => {
-            return wrapper.vm.$nextTick().then(() => {
-              expect(eventHub.$emit).toHaveBeenCalledWith('closeLockForm');
-            });
+          it('emits close form', async () => {
+            await nextTick();
+            expect(eventHub.$emit).toHaveBeenCalledWith('closeLockForm');
           });
 
           it('does not flash an error message', () => {
@@ -153,15 +152,13 @@ describe('EditFormButtons', () => {
           });
 
           it('resets loading', async () => {
-            await wrapper.vm.$nextTick().then(() => {
-              expect(findLockToggle().props('loading')).toBe(false);
-            });
+            await nextTick();
+            expect(findLockToggle().props('loading')).toBe(false);
           });
 
-          it('emits close form', () => {
-            return wrapper.vm.$nextTick().then(() => {
-              expect(eventHub.$emit).toHaveBeenCalledWith('closeLockForm');
-            });
+          it('emits close form', async () => {
+            await nextTick();
+            expect(eventHub.$emit).toHaveBeenCalledWith('closeLockForm');
           });
 
           it('calls flash with the correct message', () => {
diff --git a/spec/frontend/sidebar/lock/issuable_lock_form_spec.js b/spec/frontend/sidebar/lock/issuable_lock_form_spec.js
index 1743e114bb0..7bf7e563a01 100644
--- a/spec/frontend/sidebar/lock/issuable_lock_form_spec.js
+++ b/spec/frontend/sidebar/lock/issuable_lock_form_spec.js
@@ -1,4 +1,5 @@
 import { shallowMount } from '@vue/test-utils';
+import { nextTick } from 'vue';
 import { mockTracking, triggerEvent } from 'helpers/tracking_helper';
 import { createMockDirective, getBinding } from 'helpers/vue_mock_directive';
 import { createStore as createMrStore } from '~/mr_notes/stores';
@@ -80,13 +81,12 @@ describe('IssuableLockForm', () => {
         });
 
         describe('when not editable', () => {
-          it('does not display the edit form when opened if not editable', () => {
+          it('does not display the edit form when opened if not editable', async () => {
             expect(findEditForm().exists()).toBe(false);
             findSidebarCollapseIcon().trigger('click');
 
-            return wrapper.vm.$nextTick().then(() => {
-              expect(findEditForm().exists()).toBe(false);
-            });
+            await nextTick();
+            expect(findEditForm().exists()).toBe(false);
           });
         });
 
@@ -102,13 +102,12 @@ describe('IssuableLockForm', () => {
           });
 
           describe("when 'Edit' is clicked", () => {
-            it('displays the edit form when editable', () => {
+            it('displays the edit form when editable', async () => {
               expect(findEditForm().exists()).toBe(false);
               findEditLink().trigger('click');
 
-              return wrapper.vm.$nextTick().then(() => {
-                expect(findEditForm().exists()).toBe(true);
-              });
+              await nextTick();
+              expect(findEditForm().exists()).toBe(true);
             });
 
             it('tracks the event ', () => {
@@ -123,13 +122,12 @@ describe('IssuableLockForm', () => {
           });
 
           describe('When sidebar is collapsed', () => {
-            it('displays the edit form when opened', () => {
+            it('displays the edit form when opened', async () => {
               expect(findEditForm().exists()).toBe(false);
               findSidebarCollapseIcon().trigger('click');
 
-              return wrapper.vm.$nextTick().then(() => {
-                expect(findEditForm().exists()).toBe(true);
-              });
+              await nextTick();
+              expect(findEditForm().exists()).toBe(true);
             });
 
             it('renders a tooltip with the lock status text', () => {
diff --git a/spec/frontend/sidebar/mock_data.js b/spec/frontend/sidebar/mock_data.js
index 42e89a3ba84..30972484a08 100644
--- a/spec/frontend/sidebar/mock_data.js
+++ b/spec/frontend/sidebar/mock_data.js
@@ -276,6 +276,7 @@ export const epicParticipantsResponse = () => ({
         participants: {
           nodes: [
             {
+              __typename: 'UserCore',
               id: 'gid://gitlab/User/2',
               avatarUrl:
                 'https://www.gravatar.com/avatar/a95e5b71488f4b9d69ce5ff58bfd28d6?s=80\u0026d=identicon',
@@ -332,6 +333,7 @@ export const issuableQueryResponse = {
         assignees: {
           nodes: [
             {
+              __typename: 'UserCore',
               id: 'gid://gitlab/User/2',
               avatarUrl:
                 'https://www.gravatar.com/avatar/a95e5b71488f4b9d69ce5ff58bfd28d6?s=80\u0026d=identicon',
@@ -389,7 +391,7 @@ export const updateIssueAssigneesMutationResponse = {
         assignees: {
           nodes: [
             {
-              __typename: 'User',
+              __typename: 'UserCore',
               id: 'gid://gitlab/User/1',
               avatarUrl:
                 'https://www.gravatar.com/avatar/e64c7d89f26bd1972efa854d13d7dd61?s=80\u0026d=identicon',
@@ -414,6 +416,7 @@ export const subscriptionNullResponse = {
 };
 
 const mockUser1 = {
+  __typename: 'UserCore',
   id: 'gid://gitlab/User/1',
   avatarUrl:
     'https://www.gravatar.com/avatar/e64c7d89f26bd1972efa854d13d7dd61?s=80\u0026d=identicon',
@@ -424,6 +427,7 @@ const mockUser1 = {
 };
 
 export const mockUser2 = {
+  __typename: 'UserCore',
   id: 'gid://gitlab/User/4',
   avatarUrl: '/avatar2',
   name: 'rookie',
@@ -470,6 +474,7 @@ export const projectMembersResponse = {
           {
             id: 'user-4',
             user: {
+              __typename: 'UserCore',
               id: 'gid://gitlab/User/2',
               avatarUrl:
                 'https://www.gravatar.com/avatar/a95e5b71488f4b9d69ce5ff58bfd28d6?s=80\u0026d=identicon',
@@ -503,6 +508,7 @@ export const groupMembersResponse = {
           {
             id: 'user-3',
             user: {
+              __typename: 'UserCore',
               id: 'gid://gitlab/User/2',
               avatarUrl:
                 'https://www.gravatar.com/avatar/a95e5b71488f4b9d69ce5ff58bfd28d6?s=80\u0026d=identicon',
@@ -535,6 +541,7 @@ export const participantsQueryResponse = {
             mockUser1,
             mockUser1,
             {
+              __typename: 'UserCore',
               id: 'gid://gitlab/User/2',
               avatarUrl:
                 'https://www.gravatar.com/avatar/a95e5b71488f4b9d69ce5ff58bfd28d6?s=80\u0026d=identicon',
@@ -546,6 +553,7 @@ export const participantsQueryResponse = {
               },
             },
             {
+              __typename: 'UserCore',
               id: 'gid://gitlab/User/3',
               avatarUrl: '/avatar',
               name: 'John Doe',
diff --git a/spec/frontend/sidebar/participants_spec.js b/spec/frontend/sidebar/participants_spec.js
index 94cdbe7f2ef..356628849d9 100644
--- a/spec/frontend/sidebar/participants_spec.js
+++ b/spec/frontend/sidebar/participants_spec.js
@@ -1,6 +1,6 @@
 import { GlLoadingIcon } from '@gitlab/ui';
 import { shallowMount } from '@vue/test-utils';
-import Vue from 'vue';
+import { nextTick } from 'vue';
 import Participants from '~/sidebar/components/participants/participants.vue';
 
 const PARTICIPANT = {
@@ -77,7 +77,7 @@ describe('Participants', () => {
       expect(wrapper.find(GlLoadingIcon).exists()).toBe(true);
     });
 
-    it('when only showing visible participants, shows an avatar only for each participant under the limit', () => {
+    it('when only showing visible participants, shows an avatar only for each participant under the limit', async () => {
       const numberOfLessParticipants = 2;
       wrapper = mountComponent({
         loading: false,
@@ -91,12 +91,11 @@ describe('Participants', () => {
         isShowingMoreParticipants: false,
       });
 
-      return Vue.nextTick().then(() => {
-        expect(wrapper.findAll('.participants-author')).toHaveLength(numberOfLessParticipants);
-      });
+      await nextTick();
+      expect(wrapper.findAll('.participants-author')).toHaveLength(numberOfLessParticipants);
     });
 
-    it('when only showing all participants, each has an avatar', () => {
+    it('when only showing all participants, each has an avatar', async () => {
       wrapper = mountComponent({
         loading: false,
         participants: PARTICIPANT_LIST,
@@ -109,9 +108,8 @@ describe('Participants', () => {
         isShowingMoreParticipants: true,
       });
 
-      return Vue.nextTick().then(() => {
-        expect(wrapper.findAll('.participants-author')).toHaveLength(PARTICIPANT_LIST.length);
-      });
+      await nextTick();
+      expect(wrapper.findAll('.participants-author')).toHaveLength(PARTICIPANT_LIST.length);
     });
 
     it('does not have more participants link when they can all be shown', () => {
@@ -126,7 +124,7 @@ describe('Participants', () => {
       expect(getMoreParticipantsButton().exists()).toBe(false);
     });
 
-    it('when too many participants, has more participants link to show more', () => {
+    it('when too many participants, has more participants link to show more', async () => {
       wrapper = mountComponent({
         loading: false,
         participants: PARTICIPANT_LIST,
@@ -139,12 +137,11 @@ describe('Participants', () => {
         isShowingMoreParticipants: false,
       });
 
-      return Vue.nextTick().then(() => {
-        expect(getMoreParticipantsButton().text()).toBe('+ 1 more');
-      });
+      await nextTick();
+      expect(getMoreParticipantsButton().text()).toBe('+ 1 more');
     });
 
-    it('when too many participants and already showing them, has more participants link to show less', () => {
+    it('when too many participants and already showing them, has more participants link to show less', async () => {
       wrapper = mountComponent({
         loading: false,
         participants: PARTICIPANT_LIST,
@@ -157,9 +154,8 @@ describe('Participants', () => {
         isShowingMoreParticipants: true,
       });
 
-      return Vue.nextTick().then(() => {
-        expect(getMoreParticipantsButton().text()).toBe('- show less');
-      });
+      await nextTick();
+      expect(getMoreParticipantsButton().text()).toBe('- show less');
     });
 
     it('clicking more participants link emits event', () => {
@@ -176,7 +172,7 @@ describe('Participants', () => {
       expect(wrapper.vm.isShowingMoreParticipants).toBe(true);
     });
 
-    it('clicking on participants icon emits `toggleSidebar` event', () => {
+    it('clicking on participants icon emits `toggleSidebar` event', async () => {
       wrapper = mountComponent({
         loading: false,
         participants: PARTICIPANT_LIST,
@@ -187,11 +183,9 @@ describe('Participants', () => {
 
       wrapper.find('.sidebar-collapsed-icon').trigger('click');
 
-      return Vue.nextTick(() => {
-        expect(spy).toHaveBeenCalledWith('toggleSidebar');
-
-        spy.mockRestore();
-      });
+      await nextTick();
+      expect(spy).toHaveBeenCalledWith('toggleSidebar');
+      spy.mockRestore();
     });
   });
 
diff --git a/spec/frontend/sidebar/sidebar_assignees_spec.js b/spec/frontend/sidebar/sidebar_assignees_spec.js
index dc121dcb897..5f77e21c1f8 100644
--- a/spec/frontend/sidebar/sidebar_assignees_spec.js
+++ b/spec/frontend/sidebar/sidebar_assignees_spec.js
@@ -1,6 +1,7 @@
 import { shallowMount } from '@vue/test-utils';
 import axios from 'axios';
 import AxiosMockAdapter from 'axios-mock-adapter';
+import { nextTick } from 'vue';
 import Assigness from '~/sidebar/components/assignees/assignees.vue';
 import AssigneesRealtime from '~/sidebar/components/assignees/assignees_realtime.vue';
 import SidebarAssignees from '~/sidebar/components/assignees/sidebar_assignees.vue';
@@ -74,16 +75,15 @@ describe('sidebar assignees', () => {
     expect(mediator.store.assignees.length).toBe(1);
   });
 
-  it('hides assignees until fetched', () => {
+  it('hides assignees until fetched', async () => {
     createComponent();
 
     expect(wrapper.find(Assigness).exists()).toBe(false);
 
     wrapper.vm.store.isFetching.assignees = false;
 
-    return wrapper.vm.$nextTick(() => {
-      expect(wrapper.find(Assigness).exists()).toBe(true);
-    });
+    await nextTick();
+    expect(wrapper.find(Assigness).exists()).toBe(true);
   });
 
   describe('when realTimeIssueSidebar is turned on', () => {
diff --git a/spec/frontend/sidebar/sidebar_move_issue_spec.js b/spec/frontend/sidebar/sidebar_move_issue_spec.js
index d9972ae75c3..7bb7b18adf8 100644
--- a/spec/frontend/sidebar/sidebar_move_issue_spec.js
+++ b/spec/frontend/sidebar/sidebar_move_issue_spec.js
@@ -1,5 +1,6 @@
 import MockAdapter from 'axios-mock-adapter';
 import $ from 'jquery';
+import waitForPromises from 'helpers/wait_for_promises';
 import createFlash from '~/flash';
 import axios from '~/lib/utils/axios_utils';
 import SidebarMoveIssue from '~/sidebar/lib/sidebar_move_issue';
@@ -77,15 +78,14 @@ describe('SidebarMoveIssue', () => {
       expect(test.sidebarMoveIssue.$dropdownToggle.data('deprecatedJQueryDropdown')).toBeTruthy();
     });
 
-    it('escapes html from project name', (done) => {
+    it('escapes html from project name', async () => {
       test.$toggleButton.dropdown('toggle');
 
-      setImmediate(() => {
-        expect(test.$content.find('.js-move-issue-dropdown-item')[1].innerHTML.trim()).toEqual(
-          '<img src=x onerror=alert(document.domain)> foo / bar',
-        );
-        done();
-      });
+      await waitForPromises();
+
+      expect(test.$content.find('.js-move-issue-dropdown-item')[1].innerHTML.trim()).toEqual(
+        '<img src=x onerror=alert(document.domain)> foo / bar',
+      );
     });
   });
 
@@ -101,20 +101,20 @@ describe('SidebarMoveIssue', () => {
       expect(test.$confirmButton.hasClass('is-loading')).toBe(true);
     });
 
-    it('should remove loading state from confirm button on failure', (done) => {
+    it('should remove loading state from confirm button on failure', async () => {
       jest.spyOn(test.mediator, 'moveIssue').mockReturnValue(Promise.reject());
       test.mediator.setMoveToProjectId(7);
 
       test.sidebarMoveIssue.onConfirmClicked();
 
       expect(test.mediator.moveIssue).toHaveBeenCalled();
+
       // Wait for the move issue request to fail
-      setImmediate(() => {
-        expect(createFlash).toHaveBeenCalled();
-        expect(test.$confirmButton.prop('disabled')).toBeFalsy();
-        expect(test.$confirmButton.hasClass('is-loading')).toBe(false);
-        done();
-      });
+      await waitForPromises();
+
+      expect(createFlash).toHaveBeenCalled();
+      expect(test.$confirmButton.prop('disabled')).toBeFalsy();
+      expect(test.$confirmButton.hasClass('is-loading')).toBe(false);
     });
 
     it('should not move the issue with id=0', () => {
@@ -127,35 +127,33 @@ describe('SidebarMoveIssue', () => {
     });
   });
 
-  it('should set moveToProjectId on dropdown item "No project" click', (done) => {
+  it('should set moveToProjectId on dropdown item "No project" click', async () => {
     jest.spyOn(test.mediator, 'setMoveToProjectId').mockImplementation(() => {});
 
     // Open the dropdown
     test.$toggleButton.dropdown('toggle');
 
     // Wait for the autocomplete request to finish
-    setImmediate(() => {
-      test.$content.find('.js-move-issue-dropdown-item').eq(0).trigger('click');
+    await waitForPromises();
 
-      expect(test.mediator.setMoveToProjectId).toHaveBeenCalledWith(0);
-      expect(test.$confirmButton.prop('disabled')).toBeTruthy();
-      done();
-    });
+    test.$content.find('.js-move-issue-dropdown-item').eq(0).trigger('click');
+
+    expect(test.mediator.setMoveToProjectId).toHaveBeenCalledWith(0);
+    expect(test.$confirmButton.prop('disabled')).toBeTruthy();
   });
 
-  it('should set moveToProjectId on dropdown item click', (done) => {
+  it('should set moveToProjectId on dropdown item click', async () => {
     jest.spyOn(test.mediator, 'setMoveToProjectId').mockImplementation(() => {});
 
     // Open the dropdown
     test.$toggleButton.dropdown('toggle');
 
     // Wait for the autocomplete request to finish
-    setImmediate(() => {
-      test.$content.find('.js-move-issue-dropdown-item').eq(1).trigger('click');
+    await waitForPromises();
 
-      expect(test.mediator.setMoveToProjectId).toHaveBeenCalledWith(20);
-      expect(test.$confirmButton.attr('disabled')).toBe(undefined);
-      done();
-    });
+    test.$content.find('.js-move-issue-dropdown-item').eq(1).trigger('click');
+
+    expect(test.mediator.setMoveToProjectId).toHaveBeenCalledWith(20);
+    expect(test.$confirmButton.attr('disabled')).toBe(undefined);
   });
 });
diff --git a/spec/frontend/sidebar/todo_spec.js b/spec/frontend/sidebar/todo_spec.js
index 6829e688c65..9316268d2ad 100644
--- a/spec/frontend/sidebar/todo_spec.js
+++ b/spec/frontend/sidebar/todo_spec.js
@@ -1,6 +1,7 @@
 import { GlLoadingIcon, GlIcon } from '@gitlab/ui';
 import { shallowMount } from '@vue/test-utils';
 
+import { nextTick } from 'vue';
 import SidebarTodos from '~/sidebar/components/todo_toggle/todo.vue';
 
 const defaultProps = {
@@ -49,13 +50,12 @@ describe('SidebarTodo', () => {
   );
 
   describe('template', () => {
-    it('emits `toggleTodo` event when clicked on button', () => {
+    it('emits `toggleTodo` event when clicked on button', async () => {
       createComponent();
       wrapper.find('button').trigger('click');
 
-      return wrapper.vm.$nextTick().then(() => {
-        expect(wrapper.emitted().toggleTodo).toBeTruthy();
-      });
+      await nextTick();
+      expect(wrapper.emitted().toggleTodo).toBeTruthy();
     });
 
     it('renders component container element with proper data attributes', () => {