Add latest changes from gitlab-org/gitlab@master

38 files changed, 253 insertions, 175 deletions

diff --git a/spec/frontend/__helpers__/mock_apollo_helper.js b/spec/frontend/__helpers__/mock_apollo_helper.js
index ee4bbd42b1e..2dff9acbc76 100644
--- a/spec/frontend/__helpers__/mock_apollo_helper.js
+++ b/spec/frontend/__helpers__/mock_apollo_helper.js
@@ -16,7 +16,11 @@ export function createMockClient(handlers = [], resolvers = {}, cacheOptions = {
   const mockClient = createMockApolloClient({ cache, resolvers });
 
   if (Array.isArray(handlers)) {
-    handlers.forEach(([query, value]) => mockClient.setRequestHandler(query, value));
+    handlers.forEach(([query, value]) =>
+      mockClient.setRequestHandler(query, (...args) =>
+        Promise.resolve(value(...args)).then((r) => ({ ...r })),
+      ),
+    );
   } else {
     throw new Error('You should pass an array of handlers to mock Apollo client');
   }
diff --git a/spec/frontend/admin/users/components/users_table_spec.js b/spec/frontend/admin/users/components/users_table_spec.js
index 9ff5961c7ec..dffe8d6893b 100644
--- a/spec/frontend/admin/users/components/users_table_spec.js
+++ b/spec/frontend/admin/users/components/users_table_spec.js
@@ -3,6 +3,7 @@ import Vue from 'vue';
 import VueApollo from 'vue-apollo';
 
 import createMockApollo from 'helpers/mock_apollo_helper';
+import waitForPromises from 'helpers/wait_for_promises';
 import { mountExtended } from 'helpers/vue_test_utils_helper';
 
 import AdminUserActions from '~/admin/users/components/user_actions.vue';
@@ -106,8 +107,9 @@ describe('AdminUsersTable component', () => {
     });
 
     describe('when the data has been fetched', () => {
-      beforeEach(() => {
+      beforeEach(async () => {
         initComponent();
+        await waitForPromises();
       });
 
       it("renders the user's group count", () => {
@@ -115,8 +117,9 @@ describe('AdminUsersTable component', () => {
       });
 
       describe("and a user's group count is null", () => {
-        beforeEach(() => {
+        beforeEach(async () => {
           initComponent({}, createFetchGroupCount([{ id: user.id, groupCount: null }]));
+          await waitForPromises();
         });
 
         it("renders the user's group count as 0", () => {
@@ -126,12 +129,13 @@ describe('AdminUsersTable component', () => {
     });
 
     describe('when there is an error while fetching the data', () => {
-      beforeEach(() => {
+      beforeEach(async () => {
         initComponent({}, fetchGroupCountsError);
+        await waitForPromises();
       });
 
       it('creates a flash message and captures the error', () => {
-        expect(createFlash).toHaveBeenCalledTimes(1);
+        expect(createFlash).toHaveBeenCalledTimes(2);
         expect(createFlash).toHaveBeenCalledWith({
           message: 'Could not load user group counts. Please refresh the page to try again.',
           captureError: true,
diff --git a/spec/frontend/alerts_settings/components/alerts_settings_wrapper_spec.js b/spec/frontend/alerts_settings/components/alerts_settings_wrapper_spec.js
index e6a6e01c41c..12fc08c303c 100644
--- a/spec/frontend/alerts_settings/components/alerts_settings_wrapper_spec.js
+++ b/spec/frontend/alerts_settings/components/alerts_settings_wrapper_spec.js
@@ -1,7 +1,6 @@
 import { GlLoadingIcon, GlAlert } from '@gitlab/ui';
 import { mount, createLocalVue } from '@vue/test-utils';
 import AxiosMockAdapter from 'axios-mock-adapter';
-import { nextTick } from 'vue';
 import VueApollo from 'vue-apollo';
 import createHttpIntegrationMutation from 'ee_else_ce/alerts_settings/graphql/mutations/create_http_integration.mutation.graphql';
 import updateHttpIntegrationMutation from 'ee_else_ce/alerts_settings/graphql/mutations/update_http_integration.mutation.graphql';
@@ -79,12 +78,6 @@ describe('AlertsSettingsWrapper', () => {
       .vm.$emit('delete-integration', { id: integrationToDestroy.id });
   }
 
-  async function awaitApolloDomMock() {
-    await nextTick(); // kick off the DOM update
-    await jest.runOnlyPendingTimers(); // kick off the mocked GQL stuff (promises)
-    await nextTick(); // kick off the DOM update for flash
-  }
-
   const createComponent = ({ data = {}, provide = {}, loading = false } = {}) => {
     wrapper = extendedWrapper(
       mount(AlertsSettingsWrapper, {
@@ -476,9 +469,7 @@ describe('AlertsSettingsWrapper', () => {
   describe('with mocked Apollo client', () => {
     it('has a selection of integrations loaded via the getIntegrationsQuery', async () => {
       createComponentWithApollo();
-
-      await jest.runOnlyPendingTimers();
-      await nextTick();
+      await waitForPromises();
 
       expect(findIntegrations()).toHaveLength(4);
     });
@@ -490,7 +481,7 @@ describe('AlertsSettingsWrapper', () => {
 
       expect(destroyIntegrationHandler).toHaveBeenCalled();
 
-      await nextTick();
+      await waitForPromises();
 
       expect(findIntegrations()).toHaveLength(3);
     });
@@ -501,7 +492,7 @@ describe('AlertsSettingsWrapper', () => {
       });
 
       await destroyHttpIntegration(wrapper);
-      await awaitApolloDomMock();
+      await waitForPromises();
 
       expect(createFlash).toHaveBeenCalledWith({ message: 'Houston, we have a problem' });
     });
@@ -512,7 +503,7 @@ describe('AlertsSettingsWrapper', () => {
       });
 
       await destroyHttpIntegration(wrapper);
-      await awaitApolloDomMock();
+      await waitForPromises();
 
       expect(createFlash).toHaveBeenCalledWith({
         message: DELETE_INTEGRATION_ERROR,
diff --git a/spec/frontend/analytics/usage_trends/components/usage_trends_count_chart_spec.js b/spec/frontend/analytics/usage_trends/components/usage_trends_count_chart_spec.js
index 1a331100bb8..f86f2eacf50 100644
--- a/spec/frontend/analytics/usage_trends/components/usage_trends_count_chart_spec.js
+++ b/spec/frontend/analytics/usage_trends/components/usage_trends_count_chart_spec.js
@@ -4,6 +4,7 @@ import { shallowMount } 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';
 import UsageTrendsCountChart from '~/analytics/usage_trends/components/usage_trends_count_chart.vue';
 import statsQuery from '~/analytics/usage_trends/graphql/queries/usage_count.query.graphql';
 import ChartSkeletonLoader from '~/vue_shared/components/resizable_chart/skeleton_loader.vue';
@@ -77,9 +78,10 @@ describe('UsageTrendsCountChart', () => {
   });
 
   describe('without data', () => {
-    beforeEach(() => {
+    beforeEach(async () => {
       queryHandler = mockQueryResponse({ key: queryResponseDataKey, data: [] });
       wrapper = createComponent({ responseHandler: queryHandler });
+      await waitForPromises();
     });
 
     it('renders an no data message', () => {
@@ -96,9 +98,10 @@ describe('UsageTrendsCountChart', () => {
   });
 
   describe('with data', () => {
-    beforeEach(() => {
+    beforeEach(async () => {
       queryHandler = mockQueryResponse({ key: queryResponseDataKey, data: mockCountsData1 });
       wrapper = createComponent({ responseHandler: queryHandler });
+      await waitForPromises();
     });
 
     it('requests data', () => {
@@ -134,7 +137,7 @@ describe('UsageTrendsCountChart', () => {
         });
 
         wrapper = createComponent({ responseHandler: queryHandler });
-        await wrapper.vm.$nextTick();
+        await waitForPromises();
       });
 
       it('requests data twice', () => {
diff --git a/spec/frontend/boards/board_list_spec.js b/spec/frontend/boards/board_list_spec.js
index 1981ed5ab7f..e29c19d6e97 100644
--- a/spec/frontend/boards/board_list_spec.js
+++ b/spec/frontend/boards/board_list_spec.js
@@ -1,6 +1,7 @@
 import Draggable from 'vuedraggable';
 import { DraggableItemTypes } from 'ee_else_ce/boards/constants';
 import { useFakeRequestAnimationFrame } from 'helpers/fake_request_animation_frame';
+import waitForPromises from 'helpers/wait_for_promises';
 import createComponent from 'jest/boards/board_list_helper';
 import BoardCard from '~/boards/components/board_card.vue';
 import eventHub from '~/boards/eventhub';
@@ -132,7 +133,6 @@ describe('Board list component', () => {
     });
 
     it('shows how many more issues to load', async () => {
-      // wrapper.vm.showCount = true;
       wrapper = createComponent({
         data: {
           showCount: true,
@@ -140,6 +140,9 @@ describe('Board list component', () => {
       });
 
       await wrapper.vm.$nextTick();
+      await waitForPromises();
+      await wrapper.vm.$nextTick();
+
       expect(wrapper.find('.board-list-count').text()).toBe('Showing 1 of 20 issues');
     });
   });
diff --git a/spec/frontend/clusters/agents/components/activity_events_list_spec.js b/spec/frontend/clusters/agents/components/activity_events_list_spec.js
index 4abbd77dfb7..6b374b6620d 100644
--- a/spec/frontend/clusters/agents/components/activity_events_list_spec.js
+++ b/spec/frontend/clusters/agents/components/activity_events_list_spec.js
@@ -70,8 +70,9 @@ describe('ActivityEvents', () => {
   });
 
   describe('when there are no agentEvents', () => {
-    beforeEach(() => {
+    beforeEach(async () => {
       createWrapper({ queryResponse: jest.fn().mockResolvedValue(mockEmptyResponse) });
+      await waitForPromises();
     });
 
     it('displays an empty state with the correct illustration', () => {
@@ -83,9 +84,11 @@ describe('ActivityEvents', () => {
   describe('when the agentEvents are present', () => {
     const length = mockResponse.data?.project?.clusterAgent?.activityEvents?.nodes?.length;
 
-    beforeEach(() => {
+    beforeEach(async () => {
       createWrapper();
+      await waitForPromises();
     });
+
     it('renders an activity-history-item components for every event', () => {
       expect(findAllActivityHistoryItems()).toHaveLength(length);
     });
diff --git a/spec/frontend/clusters/agents/components/show_spec.js b/spec/frontend/clusters/agents/components/show_spec.js
index 4b40f9e7223..c92bf634a92 100644
--- a/spec/frontend/clusters/agents/components/show_spec.js
+++ b/spec/frontend/clusters/agents/components/show_spec.js
@@ -82,8 +82,9 @@ describe('ClusterAgentShow', () => {
   });
 
   describe('default behaviour', () => {
-    beforeEach(() => {
-      return createWrapper({ clusterAgent: defaultClusterAgent });
+    beforeEach(async () => {
+      createWrapper({ clusterAgent: defaultClusterAgent });
+      await waitForPromises();
     });
 
     it('sends expected params', () => {
@@ -131,8 +132,9 @@ describe('ClusterAgentShow', () => {
       createdByUser: null,
     };
 
-    beforeEach(() => {
-      return createWrapper({ clusterAgent: missingUser });
+    beforeEach(async () => {
+      createWrapper({ clusterAgent: missingUser });
+      await waitForPromises();
     });
 
     it('displays agent create information with unknown user', () => {
@@ -146,8 +148,9 @@ describe('ClusterAgentShow', () => {
       tokens: null,
     };
 
-    beforeEach(() => {
-      return createWrapper({ clusterAgent: missingTokens });
+    beforeEach(async () => {
+      createWrapper({ clusterAgent: missingTokens });
+      await waitForPromises();
     });
 
     it('displays token header with no count', () => {
@@ -171,8 +174,9 @@ describe('ClusterAgentShow', () => {
       },
     };
 
-    beforeEach(() => {
-      return createWrapper({ clusterAgent: tokenPagination });
+    beforeEach(async () => {
+      createWrapper({ clusterAgent: tokenPagination });
+      await waitForPromises();
     });
 
     it('should render pagination buttons', () => {
diff --git a/spec/frontend/clusters_list/components/agent_options_spec.js b/spec/frontend/clusters_list/components/agent_options_spec.js
index 05bab247816..f20a7b39a97 100644
--- a/spec/frontend/clusters_list/components/agent_options_spec.js
+++ b/spec/frontend/clusters_list/components/agent_options_spec.js
@@ -6,6 +6,7 @@ import { ENTER_KEY } from '~/lib/utils/keys';
 import getAgentsQuery from '~/clusters_list/graphql/queries/get_agents.query.graphql';
 import deleteAgentMutation from '~/clusters_list/graphql/mutations/delete_agent.mutation.graphql';
 import createMockApollo from 'helpers/mock_apollo_helper';
+import waitForPromises from 'helpers/wait_for_promises';
 import AgentOptions from '~/clusters_list/components/agent_options.vue';
 import { MAX_LIST_COUNT } from '~/clusters_list/constants';
 import { getAgentResponse, mockDeleteResponse, mockErrorDeleteResponse } from '../mocks/apollo';
@@ -83,6 +84,7 @@ describe('AgentOptions', () => {
     findDeleteBtn().vm.$emit('click');
     findInput().vm.$emit('input', agent.name);
     await findModal().vm.$emit('primary');
+    await waitForPromises();
   };
 
   beforeEach(() => {
@@ -173,8 +175,7 @@ describe('AgentOptions', () => {
   describe('when getting an error deleting agent', () => {
     beforeEach(async () => {
       await createWrapper({ mutationResponse: mockErrorDeleteResponse });
-
-      submitAgentToDelete();
+      await submitAgentToDelete();
     });
 
     it('displays the error message', () => {
@@ -187,7 +188,7 @@ describe('AgentOptions', () => {
       const loadingResponse = new Promise(() => {});
       await createWrapper({ mutationResponse: loadingResponse });
 
-      submitAgentToDelete();
+      await submitAgentToDelete();
     });
 
     it('reenables the options dropdown', async () => {
diff --git a/spec/frontend/clusters_list/components/install_agent_modal_spec.js b/spec/frontend/clusters_list/components/install_agent_modal_spec.js
index 4d1429c9e50..5edc504aecb 100644
--- a/spec/frontend/clusters_list/components/install_agent_modal_spec.js
+++ b/spec/frontend/clusters_list/components/install_agent_modal_spec.js
@@ -1,6 +1,7 @@
-import { GlAlert, GlButton, GlFormInputGroup } from '@gitlab/ui';
+import { GlAlert, GlButton, GlFormInputGroup, GlSprintf } from '@gitlab/ui';
 import { createLocalVue } from '@vue/test-utils';
 import VueApollo from 'vue-apollo';
+import { sprintf } from '~/locale';
 import { shallowMountExtended } from 'helpers/vue_test_utils_helper';
 import { mockTracking } from 'helpers/tracking_helper';
 import AvailableAgentsDropdown from '~/clusters_list/components/available_agents_dropdown.vue';
@@ -27,6 +28,7 @@ import {
   createAgentTokenResponse,
   createAgentTokenErrorResponse,
   getAgentResponse,
+  kasDisabledErrorResponse,
 } from '../mocks/apollo';
 import ModalStub from '../stubs';
 
@@ -35,7 +37,6 @@ localVue.use(VueApollo);
 
 const projectPath = 'path/to/project';
 const kasAddress = 'kas.example.com';
-const kasEnabled = true;
 const emptyStateImage = 'path/to/image';
 const defaultBranchName = 'default';
 const maxAgents = MAX_LIST_COUNT;
@@ -80,7 +81,6 @@ describe('InstallAgentModal', () => {
     const provide = {
       projectPath,
       kasAddress,
-      kasEnabled,
       emptyStateImage,
     };
 
@@ -92,6 +92,7 @@ describe('InstallAgentModal', () => {
     wrapper = shallowMountExtended(InstallAgentModal, {
       attachTo: document.body,
       stubs: {
+        GlSprintf,
         GlModal: ModalStub,
       },
       localVue,
@@ -118,7 +119,7 @@ describe('InstallAgentModal', () => {
     createWrapper();
     writeQuery();
 
-    await wrapper.vm.$nextTick();
+    await waitForPromises();
 
     wrapper.vm.setAgentName('agent-name');
     findActionButton().vm.$emit('click');
@@ -126,11 +127,12 @@ describe('InstallAgentModal', () => {
     return waitForPromises();
   };
 
-  beforeEach(() => {
+  beforeEach(async () => {
     apolloProvider = createMockApollo([
       [getAgentConfigurations, jest.fn().mockResolvedValue(apolloQueryResponse)],
     ]);
     createWrapper();
+    await waitForPromises();
     trackingSpy = mockTracking(undefined, wrapper.element, jest.spyOn);
   });
 
@@ -306,4 +308,34 @@ describe('InstallAgentModal', () => {
       });
     });
   });
+
+  describe('when KAS is disabled', () => {
+    const i18n = I18N_AGENT_MODAL.empty_state;
+    beforeEach(() => {
+      apolloProvider = createMockApollo([
+        [getAgentConfigurations, jest.fn().mockResolvedValue(kasDisabledErrorResponse)],
+      ]);
+
+      return mockSelectedAgentResponse();
+    });
+
+    it('renders empty state image', () => {
+      expect(findImage().attributes('src')).toBe(emptyStateImage);
+    });
+
+    it('renders an instruction to enable the KAS', () => {
+      expect(findModal().text()).toContain(
+        sprintf(i18n.enableKasText, { linkStart: '', linkEnd: '' }),
+      );
+    });
+
+    it('renders a cancel button', () => {
+      expect(findActionButton().isVisible()).toBe(true);
+      expect(findActionButton().text()).toBe(i18n.done);
+    });
+
+    it("doesn't render a secondary button", () => {
+      expect(findSecondaryButton().exists()).toBe(false);
+    });
+  });
 });
diff --git a/spec/frontend/clusters_list/mocks/apollo.js b/spec/frontend/clusters_list/mocks/apollo.js
index c4a31ed4394..4e863e1c1e9 100644
--- a/spec/frontend/clusters_list/mocks/apollo.js
+++ b/spec/frontend/clusters_list/mocks/apollo.js
@@ -76,6 +76,11 @@ export const getAgentResponse = {
   },
 };
 
+export const kasDisabledErrorResponse = {
+  data: {},
+  errors: [{ message: 'Gitlab::Kas::Client::ConfigurationError' }],
+};
+
 export const mockDeleteResponse = {
   data: { clusterAgentDelete: { errors: [] } },
 };
diff --git a/spec/frontend/design_management/pages/index_spec.js b/spec/frontend/design_management/pages/index_spec.js
index dd0f7972553..ce74569f219 100644
--- a/spec/frontend/design_management/pages/index_spec.js
+++ b/spec/frontend/design_management/pages/index_spec.js
@@ -5,6 +5,7 @@ import VueApollo, { ApolloMutation } from 'vue-apollo';
 import VueRouter from 'vue-router';
 import VueDraggable from 'vuedraggable';
 import createMockApollo from 'helpers/mock_apollo_helper';
+import waitForPromises from 'helpers/wait_for_promises';
 import { mockTracking, unmockTracking } from 'helpers/tracking_helper';
 import permissionsQuery from 'shared_queries/design_management/design_permissions.query.graphql';
 import getDesignListQuery from 'shared_queries/design_management/get_design_list.query.graphql';
@@ -115,8 +116,7 @@ describe('Design management index page', () => {
   const findDesignToolbarWrapper = () => wrapper.find('[data-testid="design-toolbar-wrapper"]');
 
   async function moveDesigns(localWrapper) {
-    await jest.runOnlyPendingTimers();
-    await nextTick();
+    await waitForPromises();
 
     localWrapper.find(VueDraggable).vm.$emit('input', reorderedDesigns);
     localWrapper.find(VueDraggable).vm.$emit('change', {
@@ -746,9 +746,7 @@ describe('Design management index page', () => {
   describe('with mocked Apollo client', () => {
     it('has a design with id 1 as a first one', async () => {
       createComponentWithApollo({});
-
-      await jest.runOnlyPendingTimers();
-      await nextTick();
+      await waitForPromises();
 
       expect(findDesigns()).toHaveLength(3);
       expect(findDesigns().at(0).props('id')).toBe('1');
@@ -773,9 +771,7 @@ describe('Design management index page', () => {
 
       expect(draggableAttributes().disabled).toBe(true);
 
-      await jest.runOnlyPendingTimers(); // kick off the mocked GQL stuff (promises)
-      await nextTick(); // kick off the DOM update
-      await nextTick(); // kick off the DOM update for finally block
+      await waitForPromises();
 
       expect(draggableAttributes().disabled).toBe(false);
     });
@@ -787,7 +783,7 @@ describe('Design management index page', () => {
 
       await moveDesigns(wrapper);
 
-      await nextTick();
+      await waitForPromises();
 
       expect(createFlash).toHaveBeenCalledWith({ message: 'Houston, we have a problem' });
     });
@@ -799,9 +795,7 @@ describe('Design management index page', () => {
 
       await moveDesigns(wrapper);
 
-      await nextTick(); // kick off the DOM update
-      await jest.runOnlyPendingTimers(); // kick off the mocked GQL stuff (promises)
-      await nextTick(); // kick off the DOM update for flash
+      await waitForPromises();
 
       expect(createFlash).toHaveBeenCalledWith({
         message: 'Something went wrong when reordering designs. Please try again',
diff --git a/spec/frontend/issues/list/components/issues_list_app_spec.js b/spec/frontend/issues/list/components/issues_list_app_spec.js
index 66428ee0492..7730c69641e 100644
--- a/spec/frontend/issues/list/components/issues_list_app_spec.js
+++ b/spec/frontend/issues/list/components/issues_list_app_spec.js
@@ -131,9 +131,10 @@ describe('CE IssuesListApp component', () => {
   });
 
   describe('IssuableList', () => {
-    beforeEach(() => {
+    beforeEach(async () => {
       wrapper = mountComponent();
       jest.runOnlyPendingTimers();
+      await waitForPromises();
     });
 
     it('renders', () => {
@@ -167,8 +168,9 @@ describe('CE IssuesListApp component', () => {
   });
 
   describe('header action buttons', () => {
-    it('renders rss button', () => {
+    it('renders rss button', async () => {
       wrapper = mountComponent({ mountFn: mount });
+      await waitForPromises();
 
       expect(findGlButtonAt(0).props('icon')).toBe('rss');
       expect(findGlButtonAt(0).attributes()).toMatchObject({
@@ -177,8 +179,9 @@ describe('CE IssuesListApp component', () => {
       });
     });
 
-    it('renders calendar button', () => {
+    it('renders calendar button', async () => {
       wrapper = mountComponent({ mountFn: mount });
+      await waitForPromises();
 
       expect(findGlButtonAt(1).props('icon')).toBe('calendar');
       expect(findGlButtonAt(1).attributes()).toMatchObject({
@@ -191,12 +194,13 @@ describe('CE IssuesListApp component', () => {
       describe('when user is signed in', () => {
         const search = '?search=refactor&sort=created_date&state=opened';
 
-        beforeEach(() => {
+        beforeEach(async () => {
           setWindowLocation(search);
 
           wrapper = mountComponent({ provide: { isSignedIn: true }, mountFn: mount });
 
           jest.runOnlyPendingTimers();
+          await waitForPromises();
         });
 
         it('renders', () => {
@@ -585,11 +589,12 @@ describe('CE IssuesListApp component', () => {
       ${'fetching issues'}       | ${'issuesQueryResponse'}       | ${IssuesListApp.i18n.errorFetchingIssues}
       ${'fetching issue counts'} | ${'issuesCountsQueryResponse'} | ${IssuesListApp.i18n.errorFetchingCounts}
     `('when there is an error $error', ({ mountOption, message }) => {
-      beforeEach(() => {
+      beforeEach(async () => {
         wrapper = mountComponent({
           [mountOption]: jest.fn().mockRejectedValue(new Error('ERROR')),
         });
         jest.runOnlyPendingTimers();
+        await waitForPromises();
       });
 
       it('shows an error message', () => {
diff --git a/spec/frontend/issues/list/components/new_issue_dropdown_spec.js b/spec/frontend/issues/list/components/new_issue_dropdown_spec.js
index 0c52e66ff14..7bec3d13d44 100644
--- a/spec/frontend/issues/list/components/new_issue_dropdown_spec.js
+++ b/spec/frontend/issues/list/components/new_issue_dropdown_spec.js
@@ -2,9 +2,11 @@ import { GlDropdown, GlDropdownItem, GlSearchBoxByType } from '@gitlab/ui';
 import { createLocalVue, mount, shallowMount } from '@vue/test-utils';
 import VueApollo from 'vue-apollo';
 import createMockApollo from 'helpers/mock_apollo_helper';
+import waitForPromises from 'helpers/wait_for_promises';
 import NewIssueDropdown from '~/issues/list/components/new_issue_dropdown.vue';
 import searchProjectsQuery from '~/issues/list/queries/search_projects.query.graphql';
 import { DASH_SCOPE, joinPaths } from '~/lib/utils/url_utility';
+import { DEBOUNCE_DELAY } from '~/vue_shared/components/filtered_search_bar/constants';
 import {
   emptySearchProjectsQueryResponse,
   project1,
@@ -42,8 +44,9 @@ describe('NewIssueDropdown component', () => {
   const findInput = () => wrapper.findComponent(GlSearchBoxByType);
   const showDropdown = async () => {
     findDropdown().vm.$emit('shown');
-    await wrapper.vm.$apollo.queries.projects.refetch();
-    jest.runOnlyPendingTimers();
+    await waitForPromises();
+    jest.advanceTimersByTime(DEBOUNCE_DELAY);
+    await waitForPromises();
   };
 
   afterEach(() => {
@@ -74,7 +77,6 @@ describe('NewIssueDropdown component', () => {
 
   it('renders projects with issues enabled', async () => {
     wrapper = mountComponent({ mountFn: mount });
-
     await showDropdown();
 
     const listItems = wrapper.findAll('li');
@@ -112,10 +114,11 @@ describe('NewIssueDropdown component', () => {
   describe('when a project is selected', () => {
     beforeEach(async () => {
       wrapper = mountComponent({ mountFn: mount });
-
+      await waitForPromises();
       await showDropdown();
 
       wrapper.findComponent(GlDropdownItem).vm.$emit('click', project1);
+      await waitForPromises();
     });
 
     it('dropdown button is a link', () => {
diff --git a/spec/frontend/jobs/bridge/app_spec.js b/spec/frontend/jobs/bridge/app_spec.js
index c0faab90552..cd7c2fd5322 100644
--- a/spec/frontend/jobs/bridge/app_spec.js
+++ b/spec/frontend/jobs/bridge/app_spec.js
@@ -81,10 +81,10 @@ describe('Bridge Show Page', () => {
   });
 
   describe('after pipeline query is loaded', () => {
-    beforeEach(() => {
+    beforeEach(async () => {
       mockPipelineQuery.mockResolvedValue(mockPipelineQueryResponse);
       createComponentWithApollo();
-      waitForPromises();
+      await waitForPromises();
     });
 
     it('query is called with correct variables', async () => {
@@ -109,10 +109,10 @@ describe('Bridge Show Page', () => {
   });
 
   describe('sidebar expansion', () => {
-    beforeEach(() => {
+    beforeEach(async () => {
       mockPipelineQuery.mockResolvedValue(mockPipelineQueryResponse);
       createComponentWithApollo();
-      waitForPromises();
+      await waitForPromises();
     });
 
     describe('on resize', () => {
diff --git a/spec/frontend/jobs/components/table/job_table_app_spec.js b/spec/frontend/jobs/components/table/job_table_app_spec.js
index 05988eecb10..389bcf670c9 100644
--- a/spec/frontend/jobs/components/table/job_table_app_spec.js
+++ b/spec/frontend/jobs/components/table/job_table_app_spec.js
@@ -112,7 +112,7 @@ describe('Job table app', () => {
         },
       });
 
-      await wrapper.vm.$nextTick();
+      await waitForPromises();
 
       // setData usage is discouraged. See https://gitlab.com/groups/gitlab-org/-/epics/7330 for details
       // eslint-disable-next-line no-restricted-syntax
@@ -150,7 +150,7 @@ describe('Job table app', () => {
         },
       });
 
-      await wrapper.vm.$nextTick();
+      await waitForPromises();
 
       expect(findPrevious().exists()).toBe(true);
       expect(findPrevious().classes('disabled')).toBe(true);
diff --git a/spec/frontend/packages_and_registries/container_registry/explorer/components/details_page/tags_list_spec.js b/spec/frontend/packages_and_registries/container_registry/explorer/components/details_page/tags_list_spec.js
index 917d0fccf3f..7d9f89518d5 100644
--- a/spec/frontend/packages_and_registries/container_registry/explorer/components/details_page/tags_list_spec.js
+++ b/spec/frontend/packages_and_registries/container_registry/explorer/components/details_page/tags_list_spec.js
@@ -108,6 +108,7 @@ describe('Tags List', () => {
     describe('events', () => {
       it('prev-page fetch the previous page', async () => {
         findRegistryList().vm.$emit('prev-page');
+        await waitForPromises();
 
         expect(resolver).toHaveBeenCalledWith({
           first: null,
@@ -119,8 +120,9 @@ describe('Tags List', () => {
         });
       });
 
-      it('next-page fetch the previous page', () => {
+      it('next-page fetch the previous page', async () => {
         findRegistryList().vm.$emit('next-page');
+        await waitForPromises();
 
         expect(resolver).toHaveBeenCalledWith({
           after: tagsPageInfo.endCursor,
diff --git a/spec/frontend/packages_and_registries/container_registry/explorer/pages/details_spec.js b/spec/frontend/packages_and_registries/container_registry/explorer/pages/details_spec.js
index 9e9d61a1241..1f8cda55f39 100644
--- a/spec/frontend/packages_and_registries/container_registry/explorer/pages/details_spec.js
+++ b/spec/frontend/packages_and_registries/container_registry/explorer/pages/details_spec.js
@@ -522,7 +522,7 @@ describe('Details Page', () => {
 
       findDeleteImage().vm.$emit('start');
 
-      await nextTick();
+      await waitForPromises();
 
       expect(findTagsLoader().exists()).toBe(true);
 
diff --git a/spec/frontend/packages_and_registries/container_registry/explorer/pages/list_spec.js b/spec/frontend/packages_and_registries/container_registry/explorer/pages/list_spec.js
index ec00e7f9319..c4984d1b6ae 100644
--- a/spec/frontend/packages_and_registries/container_registry/explorer/pages/list_spec.js
+++ b/spec/frontend/packages_and_registries/container_registry/explorer/pages/list_spec.js
@@ -361,7 +361,7 @@ describe('List Page', () => {
 
         findRegistrySearch().vm.$emit('filter:submit');
 
-        await nextTick();
+        await waitForPromises();
       };
 
       it('has a search box element', async () => {
@@ -429,7 +429,7 @@ describe('List Page', () => {
         await waitForApolloRequestRender();
 
         findImageList().vm.$emit('prev-page');
-        await nextTick();
+        await waitForPromises();
 
         expect(resolver).toHaveBeenCalledWith(
           expect.objectContaining({ before: pageInfo.startCursor }),
@@ -449,7 +449,7 @@ describe('List Page', () => {
         await waitForApolloRequestRender();
 
         findImageList().vm.$emit('next-page');
-        await nextTick();
+        await waitForPromises();
 
         expect(resolver).toHaveBeenCalledWith(
           expect.objectContaining({ after: pageInfo.endCursor }),
@@ -471,8 +471,9 @@ describe('List Page', () => {
     });
 
     it('contains a description with the path of the item to delete', async () => {
+      await waitForPromises();
       findImageList().vm.$emit('delete', { path: 'foo' });
-      await nextTick();
+      await waitForPromises();
       expect(findDeleteModal().html()).toContain('foo');
     });
   });
diff --git a/spec/frontend/packages_and_registries/dependency_proxy/app_spec.js b/spec/frontend/packages_and_registries/dependency_proxy/app_spec.js
index 44a7186904d..842b63ac0d5 100644
--- a/spec/frontend/packages_and_registries/dependency_proxy/app_spec.js
+++ b/spec/frontend/packages_and_registries/dependency_proxy/app_spec.js
@@ -195,8 +195,9 @@ describe('DependencyProxyApp', () => {
               });
             });
 
-            it('prev-page event on list fetches the previous page', () => {
+            it('prev-page event on list fetches the previous page', async () => {
               findManifestList().vm.$emit('prev-page');
+              await waitForPromises();
 
               expect(resolver).toHaveBeenCalledWith({
                 before: pagination().startCursor,
@@ -206,8 +207,9 @@ describe('DependencyProxyApp', () => {
               });
             });
 
-            it('next-page event on list fetches the next page', () => {
+            it('next-page event on list fetches the next page', async () => {
               findManifestList().vm.$emit('next-page');
+              await waitForPromises();
 
               expect(resolver).toHaveBeenCalledWith({
                 after: pagination().endCursor,
diff --git a/spec/frontend/packages_and_registries/package_registry/pages/list_spec.js b/spec/frontend/packages_and_registries/package_registry/pages/list_spec.js
index 2ac2a6455ef..8121d9c7dbd 100644
--- a/spec/frontend/packages_and_registries/package_registry/pages/list_spec.js
+++ b/spec/frontend/packages_and_registries/package_registry/pages/list_spec.js
@@ -85,7 +85,7 @@ describe('PackagesListApp', () => {
     wrapper.destroy();
   });
 
-  const waitForFirstRequest = () => {
+  const waitForFirstRequest = async () => {
     // emit a search update so the query is executed
     findSearch().vm.$emit('update', { sort: 'NAME_DESC', filters: [] });
     return waitForPromises();
@@ -149,11 +149,10 @@ describe('PackagesListApp', () => {
     beforeEach(() => {
       resolver = jest.fn().mockResolvedValue(packagesListQuery());
       mountComponent({ resolver });
-
-      return waitForFirstRequest();
     });
 
-    it('exists and has the right props', () => {
+    it('exists and has the right props', async () => {
+      await waitForFirstRequest();
       expect(findListComponent().props()).toMatchObject({
         list: expect.arrayContaining([expect.objectContaining({ id: packageData().id })]),
         isLoading: false,
@@ -161,16 +160,20 @@ describe('PackagesListApp', () => {
       });
     });
 
-    it('when list emits next-page fetches the next set of records', () => {
+    it('when list emits next-page fetches the next set of records', async () => {
+      await waitForFirstRequest();
       findListComponent().vm.$emit('next-page');
+      await waitForPromises();
 
       expect(resolver).toHaveBeenCalledWith(
         expect.objectContaining({ after: pagination().endCursor, first: GRAPHQL_PAGE_SIZE }),
       );
     });
 
-    it('when list emits prev-page fetches the prev set of records', () => {
+    it('when list emits prev-page fetches the prev set of records', async () => {
+      await waitForFirstRequest();
       findListComponent().vm.$emit('prev-page');
+      await waitForPromises();
 
       expect(resolver).toHaveBeenCalledWith(
         expect.objectContaining({ before: pagination().startCursor, last: GRAPHQL_PAGE_SIZE }),
diff --git a/spec/frontend/packages_and_registries/settings/project/settings/components/registry_settings_app_spec.js b/spec/frontend/packages_and_registries/settings/project/settings/components/registry_settings_app_spec.js
index 8266f9bee89..cad5d4db033 100644
--- a/spec/frontend/packages_and_registries/settings/project/settings/components/registry_settings_app_spec.js
+++ b/spec/frontend/packages_and_registries/settings/project/settings/components/registry_settings_app_spec.js
@@ -2,6 +2,7 @@ import { GlAlert, GlSprintf, GlLink } from '@gitlab/ui';
 import { shallowMount, createLocalVue } from '@vue/test-utils';
 import VueApollo from 'vue-apollo';
 import createMockApollo from 'helpers/mock_apollo_helper';
+import waitForPromises from 'helpers/wait_for_promises';
 import component from '~/packages_and_registries/settings/project/components/registry_settings_app.vue';
 import SettingsForm from '~/packages_and_registries/settings/project/components/settings_form.vue';
 import {
@@ -64,8 +65,6 @@ describe('Registry Settings App', () => {
       localVue,
       apolloProvider: fakeApollo,
     });
-
-    return requestHandlers.map((request) => request[1]);
   };
 
   afterEach(() => {
@@ -101,25 +100,25 @@ describe('Registry Settings App', () => {
       ${'response and changes'}                    | ${expirationPolicyPayload()}      | ${{ ...containerExpirationPolicyData(), nameRegex: '12345' }} | ${true}
       ${'response and empty'}                      | ${expirationPolicyPayload()}      | ${{}}                                                         | ${true}
     `('$description', async ({ apiResponse, workingCopy, result }) => {
-      const requests = mountComponentWithApollo({
+      mountComponentWithApollo({
         provide: { ...defaultProvidedValues, enableHistoricEntries: true },
         resolver: jest.fn().mockResolvedValue(apiResponse),
       });
-      await Promise.all(requests);
+      await waitForPromises();
 
       findSettingsComponent().vm.$emit('input', workingCopy);
 
-      await wrapper.vm.$nextTick();
+      await waitForPromises();
 
       expect(findSettingsComponent().props('isEdited')).toBe(result);
     });
   });
 
   it('renders the setting form', async () => {
-    const requests = mountComponentWithApollo({
+    mountComponentWithApollo({
       resolver: jest.fn().mockResolvedValue(expirationPolicyPayload()),
     });
-    await Promise.all(requests);
+    await waitForPromises();
 
     expect(findSettingsComponent().exists()).toBe(true);
   });
@@ -153,11 +152,11 @@ describe('Registry Settings App', () => {
   });
 
   describe('fetchSettingsError', () => {
-    beforeEach(() => {
-      const requests = mountComponentWithApollo({
+    beforeEach(async () => {
+      mountComponentWithApollo({
         resolver: jest.fn().mockRejectedValue(new Error('GraphQL error')),
       });
-      return Promise.all(requests);
+      await waitForPromises();
     });
 
     it('the form is hidden', () => {
@@ -175,14 +174,14 @@ describe('Registry Settings App', () => {
       ${true}               | ${true}
       ${false}              | ${false}
     `('is $isShown that the form is shown', async ({ enableHistoricEntries, isShown }) => {
-      const requests = mountComponentWithApollo({
+      mountComponentWithApollo({
         provide: {
           ...defaultProvidedValues,
           enableHistoricEntries,
         },
         resolver: jest.fn().mockResolvedValue(emptyExpirationPolicyPayload()),
       });
-      await Promise.all(requests);
+      await waitForPromises();
 
       expect(findSettingsComponent().exists()).toBe(isShown);
     });
diff --git a/spec/frontend/pipeline_editor/components/header/pipeline_status_spec.js b/spec/frontend/pipeline_editor/components/header/pipeline_status_spec.js
index c101b1d21c7..d813d67b94b 100644
--- a/spec/frontend/pipeline_editor/components/header/pipeline_status_spec.js
+++ b/spec/frontend/pipeline_editor/components/header/pipeline_status_spec.js
@@ -70,13 +70,13 @@ describe('Pipeline Status', () => {
 
   describe('when querying data', () => {
     describe('when data is set', () => {
-      beforeEach(() => {
+      beforeEach(async () => {
         mockPipelineQuery.mockResolvedValue({
           data: { project: mockProjectPipeline() },
         });
 
         createComponentWithApollo();
-        waitForPromises();
+        await waitForPromises();
       });
 
       it('query is called with correct variables', async () => {
diff --git a/spec/frontend/pipeline_editor/components/header/pipline_editor_mini_graph_spec.js b/spec/frontend/pipeline_editor/components/header/pipline_editor_mini_graph_spec.js
index 6b9f576917f..2f26b4d145c 100644
--- a/spec/frontend/pipeline_editor/components/header/pipline_editor_mini_graph_spec.js
+++ b/spec/frontend/pipeline_editor/components/header/pipline_editor_mini_graph_spec.js
@@ -1,6 +1,7 @@
 import { shallowMount, createLocalVue } from '@vue/test-utils';
 import VueApollo from 'vue-apollo';
 import createMockApollo from 'helpers/mock_apollo_helper';
+import waitForPromises from 'helpers/wait_for_promises';
 import PipelineEditorMiniGraph from '~/pipeline_editor/components/header/pipeline_editor_mini_graph.vue';
 import PipelineMiniGraph from '~/pipelines/components/pipelines_list/pipeline_mini_graph.vue';
 import getLinkedPipelinesQuery from '~/projects/commit_box/info/graphql/queries/get_linked_pipelines.query.graphql';
@@ -89,13 +90,14 @@ describe('Pipeline Status', () => {
     });
 
     describe('when query fails', () => {
-      beforeEach(() => {
+      beforeEach(async () => {
         mockLinkedPipelinesQuery.mockRejectedValue(new Error());
         createComponentWithApollo();
+        await waitForPromises();
       });
 
       it('should emit an error event when query fails', async () => {
-        expect(wrapper.emitted('showError')).toHaveLength(1);
+        expect(wrapper.emitted('showError')).toHaveLength(2);
         expect(wrapper.emitted('showError')[0]).toEqual([
           {
             type: PIPELINE_FAILURE,
diff --git a/spec/frontend/pipelines/components/jobs/jobs_app_spec.js b/spec/frontend/pipelines/components/jobs/jobs_app_spec.js
index 1ea6096c922..547c0cdda5e 100644
--- a/spec/frontend/pipelines/components/jobs/jobs_app_spec.js
+++ b/spec/frontend/pipelines/components/jobs/jobs_app_spec.js
@@ -74,16 +74,16 @@ describe('Jobs app', () => {
     await waitForPromises();
 
     expect(createFlash).toHaveBeenCalledWith({
-      message: 'An error occured while fetching the pipelines jobs.',
+      message: 'An error occurred while fetching the pipelines jobs.',
     });
   });
 
   it('handles infinite scrolling by calling fetchMore', async () => {
     createComponent(resolverSpy);
-
     await waitForPromises();
 
     triggerInfiniteScroll();
+    await waitForPromises();
 
     expect(resolverSpy).toHaveBeenCalledWith({
       after: 'eyJpZCI6Ijg0NyJ9',
@@ -96,10 +96,10 @@ describe('Jobs app', () => {
     createComponent(resolverSpy);
 
     expect(findSkeletonLoader().exists()).toBe(true);
-
     await waitForPromises();
 
     triggerInfiniteScroll();
+    await waitForPromises();
 
     expect(findSkeletonLoader().exists()).toBe(false);
   });
diff --git a/spec/frontend/pipelines/graph/graph_component_wrapper_spec.js b/spec/frontend/pipelines/graph/graph_component_wrapper_spec.js
index 04e004dc6c1..8bc6c086b9d 100644
--- a/spec/frontend/pipelines/graph/graph_component_wrapper_spec.js
+++ b/spec/frontend/pipelines/graph/graph_component_wrapper_spec.js
@@ -1,10 +1,11 @@
 import { GlAlert, GlButton, GlButtonGroup, GlLoadingIcon } from '@gitlab/ui';
 import { mount, shallowMount } from '@vue/test-utils';
 import MockAdapter from 'axios-mock-adapter';
-import Vue, { nextTick } from 'vue';
+import Vue from 'vue';
 import VueApollo from 'vue-apollo';
 import { useLocalStorageSpy } from 'helpers/local_storage_helper';
 import createMockApollo from 'helpers/mock_apollo_helper';
+import waitForPromises from 'helpers/wait_for_promises';
 import getPipelineDetails from 'shared_queries/pipelines/get_pipeline_details.query.graphql';
 import getUserCallouts from '~/graphql_shared/queries/get_user_callouts.query.graphql';
 import axios from '~/lib/utils/axios_utils';
@@ -100,15 +101,6 @@ describe('Pipeline graph wrapper', () => {
     wrapper.destroy();
   });
 
-  beforeAll(() => {
-    jest.useFakeTimers();
-  });
-
-  afterAll(() => {
-    jest.runOnlyPendingTimers();
-    jest.useRealTimers();
-  });
-
   describe('when data is loading', () => {
     it('displays the loading icon', () => {
       createComponentWithApollo();
@@ -134,8 +126,7 @@ describe('Pipeline graph wrapper', () => {
   describe('when data has loaded', () => {
     beforeEach(async () => {
       createComponentWithApollo();
-      jest.runOnlyPendingTimers();
-      await nextTick();
+      await waitForPromises();
     });
 
     it('does not display the loading icon', () => {
@@ -163,8 +154,7 @@ describe('Pipeline graph wrapper', () => {
       createComponentWithApollo({
         getPipelineDetailsHandler: jest.fn().mockRejectedValue(new Error('GraphQL error')),
       });
-      jest.runOnlyPendingTimers();
-      await nextTick();
+      await waitForPromises();
     });
 
     it('does not display the loading icon', () => {
@@ -187,8 +177,7 @@ describe('Pipeline graph wrapper', () => {
           pipelineIid: '',
         },
       });
-      jest.runOnlyPendingTimers();
-      await nextTick();
+      await waitForPromises();
     });
 
     it('does not display the loading icon', () => {
@@ -210,7 +199,7 @@ describe('Pipeline graph wrapper', () => {
       createComponentWithApollo();
       jest.spyOn(wrapper.vm.$apollo.queries.headerPipeline, 'refetch');
       jest.spyOn(wrapper.vm.$apollo.queries.pipeline, 'refetch');
-      await nextTick();
+      await waitForPromises();
       getGraph().vm.$emit('refreshPipelineGraph');
     });
 
@@ -224,8 +213,7 @@ describe('Pipeline graph wrapper', () => {
   describe('when query times out', () => {
     const advanceApolloTimers = async () => {
       jest.runOnlyPendingTimers();
-      await nextTick();
-      await nextTick();
+      await waitForPromises();
     };
 
     beforeEach(async () => {
@@ -245,7 +233,7 @@ describe('Pipeline graph wrapper', () => {
         .mockResolvedValueOnce(errorData);
 
       createComponentWithApollo({ getPipelineDetailsHandler: failSucceedFail });
-      await nextTick();
+      await waitForPromises();
     });
 
     it('shows correct errors and does not overwrite populated data when data is empty', async () => {
@@ -274,8 +262,7 @@ describe('Pipeline graph wrapper', () => {
           mountFn: mount,
         });
 
-        jest.runOnlyPendingTimers();
-        await nextTick();
+        await waitForPromises();
       });
 
       it('appears when pipeline uses needs', () => {
@@ -318,7 +305,7 @@ describe('Pipeline graph wrapper', () => {
         });
 
         jest.runOnlyPendingTimers();
-        await nextTick();
+        await waitForPromises();
       });
 
       it('sets showLinks to true', async () => {
@@ -327,8 +314,9 @@ describe('Pipeline graph wrapper', () => {
         expect(getLinksLayer().props('showLinks')).toBe(false);
         expect(getViewSelector().props('type')).toBe(LAYER_VIEW);
         await getDependenciesToggle().vm.$emit('change', true);
+
         jest.runOnlyPendingTimers();
-        await nextTick();
+        await waitForPromises();
         expect(wrapper.findComponent(LinksLayer).props('showLinks')).toBe(true);
       });
     });
@@ -343,8 +331,7 @@ describe('Pipeline graph wrapper', () => {
           mountFn: mount,
         });
 
-        jest.runOnlyPendingTimers();
-        await nextTick();
+        await waitForPromises();
       });
 
       it('shows the hover tip in the view selector', async () => {
@@ -365,7 +352,7 @@ describe('Pipeline graph wrapper', () => {
         });
 
         jest.runOnlyPendingTimers();
-        await nextTick();
+        await waitForPromises();
       });
 
       it('does not show the hover tip', async () => {
@@ -382,8 +369,7 @@ describe('Pipeline graph wrapper', () => {
           mountFn: mount,
         });
 
-        jest.runOnlyPendingTimers();
-        await nextTick();
+        await waitForPromises();
       });
 
       afterEach(() => {
@@ -411,8 +397,7 @@ describe('Pipeline graph wrapper', () => {
           getPipelineDetailsHandler: jest.fn().mockResolvedValue(nonNeedsResponse),
         });
 
-        jest.runOnlyPendingTimers();
-        await nextTick();
+        await waitForPromises();
       });
 
       afterEach(() => {
@@ -435,7 +420,7 @@ describe('Pipeline graph wrapper', () => {
         });
 
         jest.runOnlyPendingTimers();
-        await nextTick();
+        await waitForPromises();
       });
 
       it('does not appear when pipeline does not use needs', () => {
@@ -461,8 +446,7 @@ describe('Pipeline graph wrapper', () => {
     describe('with no metrics path', () => {
       beforeEach(async () => {
         createComponentWithApollo();
-        jest.runOnlyPendingTimers();
-        await nextTick();
+        await waitForPromises();
       });
 
       it('is not called', () => {
@@ -505,8 +489,7 @@ describe('Pipeline graph wrapper', () => {
             },
           });
 
-          jest.runOnlyPendingTimers();
-          await nextTick();
+          await waitForPromises();
         });
 
         it('attempts to collect metrics', () => {
@@ -517,7 +500,7 @@ describe('Pipeline graph wrapper', () => {
       });
 
       describe('with duration and no error', () => {
-        beforeEach(() => {
+        beforeEach(async () => {
           mock = new MockAdapter(axios);
           mock.onPost(metricsPath).reply(200, {});
 
@@ -536,6 +519,7 @@ describe('Pipeline graph wrapper', () => {
               currentViewType: LAYER_VIEW,
             },
           });
+          await waitForPromises();
         });
 
         afterEach(() => {
diff --git a/spec/frontend/pipelines/graph/linked_pipelines_column_spec.js b/spec/frontend/pipelines/graph/linked_pipelines_column_spec.js
index 2f03b846525..5897da4b8c2 100644
--- a/spec/frontend/pipelines/graph/linked_pipelines_column_spec.js
+++ b/spec/frontend/pipelines/graph/linked_pipelines_column_spec.js
@@ -1,6 +1,7 @@
 import { mount, shallowMount, createLocalVue } from '@vue/test-utils';
 import VueApollo from 'vue-apollo';
 import createMockApollo from 'helpers/mock_apollo_helper';
+import waitForPromises from 'helpers/wait_for_promises';
 import getPipelineDetails from 'shared_queries/pipelines/get_pipeline_details.query.graphql';
 import {
   DOWNSTREAM,
@@ -87,13 +88,12 @@ describe('Linked Pipelines Column', () => {
   describe('click action', () => {
     const clickExpandButton = async () => {
       await findExpandButton().trigger('click');
-      await wrapper.vm.$nextTick();
+      await waitForPromises();
     };
 
     const clickExpandButtonAndAwaitTimers = async () => {
       await clickExpandButton();
       jest.runOnlyPendingTimers();
-      await wrapper.vm.$nextTick();
     };
 
     describe('layer type rendering', () => {
@@ -162,7 +162,10 @@ describe('Linked Pipelines Column', () => {
 
         it('emits the error', async () => {
           await clickExpandButton();
-          expect(wrapper.emitted().error).toEqual([[{ type: LOAD_FAILURE, skipSentry: true }]]);
+          expect(wrapper.emitted().error).toEqual([
+            [{ type: LOAD_FAILURE, skipSentry: true }],
+            [{ type: LOAD_FAILURE, skipSentry: true }],
+          ]);
         });
 
         it('does not show the pipeline', async () => {
@@ -213,7 +216,10 @@ describe('Linked Pipelines Column', () => {
 
         it('emits the error', async () => {
           await clickExpandButton();
-          expect(wrapper.emitted().error).toEqual([[{ type: LOAD_FAILURE, skipSentry: true }]]);
+          expect(wrapper.emitted().error).toEqual([
+            [{ type: LOAD_FAILURE, skipSentry: true }],
+            [{ type: LOAD_FAILURE, skipSentry: true }],
+          ]);
         });
 
         it('does not show the pipeline', async () => {
diff --git a/spec/frontend/pipelines/notification/deprecated_type_keyword_notification_spec.js b/spec/frontend/pipelines/notification/deprecated_type_keyword_notification_spec.js
index 10ee55818ac..f626652a944 100644
--- a/spec/frontend/pipelines/notification/deprecated_type_keyword_notification_spec.js
+++ b/spec/frontend/pipelines/notification/deprecated_type_keyword_notification_spec.js
@@ -2,6 +2,7 @@ import VueApollo from 'vue-apollo';
 import { createLocalVue, shallowMount } from '@vue/test-utils';
 import { GlAlert, GlSprintf } from '@gitlab/ui';
 import createMockApollo from 'helpers/mock_apollo_helper';
+import waitForPromises from 'helpers/wait_for_promises';
 import DeprecatedTypeKeywordNotification from '~/pipelines/components/notification/deprecated_type_keyword_notification.vue';
 import getPipelineWarnings from '~/pipelines/graphql/queries/get_pipeline_warnings.query.graphql';
 import {
@@ -77,9 +78,10 @@ describe('Deprecated keyword notification', () => {
   });
 
   describe('if there is an error in the query', () => {
-    beforeEach(() => {
+    beforeEach(async () => {
       mockWarnings.mockResolvedValue({ errors: ['It didnt work'] });
       wrapper = createComponentWithApollo();
+      await waitForPromises();
     });
 
     it('does not display the notification', () => {
@@ -89,9 +91,10 @@ describe('Deprecated keyword notification', () => {
 
   describe('with a valid query result', () => {
     describe('if there are no deprecation warnings', () => {
-      beforeEach(() => {
+      beforeEach(async () => {
         mockWarnings.mockResolvedValue(mockWarningsWithoutDeprecation);
         wrapper = createComponentWithApollo();
+        await waitForPromises();
       });
       it('does not show the notification', () => {
         expect(findAlert().exists()).toBe(false);
@@ -99,9 +102,10 @@ describe('Deprecated keyword notification', () => {
     });
 
     describe('with a root type deprecation message', () => {
-      beforeEach(() => {
+      beforeEach(async () => {
         mockWarnings.mockResolvedValue(mockWarningsRootType);
         wrapper = createComponentWithApollo();
+        await waitForPromises();
       });
       it('shows the notification with one item', () => {
         expect(findAlert().exists()).toBe(true);
@@ -111,9 +115,10 @@ describe('Deprecated keyword notification', () => {
     });
 
     describe('with a job type deprecation message', () => {
-      beforeEach(() => {
+      beforeEach(async () => {
         mockWarnings.mockResolvedValue(mockWarningsType);
         wrapper = createComponentWithApollo();
+        await waitForPromises();
       });
       it('shows the notification with one item', () => {
         expect(findAlert().exists()).toBe(true);
@@ -124,9 +129,10 @@ describe('Deprecated keyword notification', () => {
     });
 
     describe('with both the root types and job type deprecation message', () => {
-      beforeEach(() => {
+      beforeEach(async () => {
         mockWarnings.mockResolvedValue(mockWarningsTypesAll);
         wrapper = createComponentWithApollo();
+        await waitForPromises();
       });
       it('shows the notification with two items', () => {
         expect(findAlert().exists()).toBe(true);
diff --git a/spec/frontend/projects/new/components/new_project_url_select_spec.js b/spec/frontend/projects/new/components/new_project_url_select_spec.js
index 258fa7636d4..be6592530fc 100644
--- a/spec/frontend/projects/new/components/new_project_url_select_spec.js
+++ b/spec/frontend/projects/new/components/new_project_url_select_spec.js
@@ -9,6 +9,7 @@ import { mount, shallowMount } 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';
 import { mockTracking, unmockTracking } from 'helpers/tracking_helper';
 import { getIdFromGraphQLId } from '~/graphql_shared/utils';
 import eventHub from '~/projects/new/event_hub';
@@ -101,6 +102,7 @@ describe('NewProjectUrlSelect component', () => {
     findDropdown().vm.$emit('shown');
     await wrapper.vm.$apollo.queries.currentUser.refetch();
     jest.runOnlyPendingTimers();
+    await waitForPromises();
   };
 
   afterEach(() => {
@@ -235,8 +237,7 @@ describe('NewProjectUrlSelect component', () => {
     };
 
     wrapper = mountComponent({ search: 'no matches', queryResponse, mountFn: mount });
-    jest.runOnlyPendingTimers();
-    await wrapper.vm.$nextTick();
+    await waitForPromises();
 
     expect(wrapper.find('li').text()).toBe('No matches found');
   });
diff --git a/spec/frontend/projects/pipelines/charts/components/pipeline_charts_spec.js b/spec/frontend/projects/pipelines/charts/components/pipeline_charts_spec.js
index 6ef49390c47..2ee2ffdb96b 100644
--- a/spec/frontend/projects/pipelines/charts/components/pipeline_charts_spec.js
+++ b/spec/frontend/projects/pipelines/charts/components/pipeline_charts_spec.js
@@ -2,6 +2,7 @@ import { GlColumnChart } from '@gitlab/ui/dist/charts';
 import { createLocalVue, shallowMount } from '@vue/test-utils';
 import VueApollo from 'vue-apollo';
 import createMockApollo from 'helpers/mock_apollo_helper';
+import waitForPromises from 'helpers/wait_for_promises';
 import PipelineCharts from '~/projects/pipelines/charts/components/pipeline_charts.vue';
 import StatisticsList from '~/projects/pipelines/charts/components/statistics_list.vue';
 import getPipelineCountByStatus from '~/projects/pipelines/charts/graphql/queries/get_pipeline_count_by_status.query.graphql';
@@ -25,7 +26,7 @@ describe('~/projects/pipelines/charts/components/pipeline_charts.vue', () => {
     return createMockApollo(requestHandlers);
   }
 
-  beforeEach(() => {
+  beforeEach(async () => {
     wrapper = shallowMount(PipelineCharts, {
       provide: {
         projectPath,
@@ -33,6 +34,8 @@ describe('~/projects/pipelines/charts/components/pipeline_charts.vue', () => {
       localVue,
       apolloProvider: createMockApolloProvider(),
     });
+
+    await waitForPromises();
   });
 
   afterEach(() => {
diff --git a/spec/frontend/releases/components/app_index_apollo_client_spec.js b/spec/frontend/releases/components/app_index_apollo_client_spec.js
index 32bbfd386f5..53ee5b223ad 100644
--- a/spec/frontend/releases/components/app_index_apollo_client_spec.js
+++ b/spec/frontend/releases/components/app_index_apollo_client_spec.js
@@ -4,6 +4,7 @@ import VueApollo from 'vue-apollo';
 import originalAllReleasesQueryResponse from 'test_fixtures/graphql/releases/graphql/queries/all_releases.query.graphql.json';
 import createMockApollo from 'helpers/mock_apollo_helper';
 import { shallowMountExtended } from 'helpers/vue_test_utils_helper';
+import waitForPromises from 'helpers/wait_for_promises';
 import allReleasesQuery from 'shared_queries/releases/all_releases.query.graphql';
 import createFlash from '~/flash';
 import { historyPushState } from '~/lib/utils/common_utils';
@@ -141,7 +142,8 @@ describe('app_index_apollo_client.vue', () => {
           });
         });
 
-        it(`${toDescription(loadingIndicator)} render a loading indicator`, () => {
+        it(`${toDescription(loadingIndicator)} render a loading indicator`, async () => {
+          await waitForPromises();
           expect(findLoadingIndicator().exists()).toBe(loadingIndicator);
         });
 
diff --git a/spec/frontend/releases/components/app_show_spec.js b/spec/frontend/releases/components/app_show_spec.js
index a60b9bda66a..41c9746a363 100644
--- a/spec/frontend/releases/components/app_show_spec.js
+++ b/spec/frontend/releases/components/app_show_spec.js
@@ -3,6 +3,7 @@ import Vue from 'vue';
 import VueApollo from 'vue-apollo';
 import oneReleaseQueryResponse from 'test_fixtures/graphql/releases/graphql/queries/one_release.query.graphql.json';
 import createMockApollo from 'helpers/mock_apollo_helper';
+import waitForPromises from 'helpers/wait_for_promises';
 import createFlash from '~/flash';
 import ReleaseShowApp from '~/releases/components/app_show.vue';
 import ReleaseBlock from '~/releases/components/release_block.vue';
@@ -111,12 +112,13 @@ describe('Release show component', () => {
   });
 
   describe('when the component has successfully loaded the release', () => {
-    beforeEach(() => {
+    beforeEach(async () => {
       const apolloProvider = createMockApollo([
         [oneReleaseQuery, jest.fn().mockResolvedValueOnce(oneReleaseQueryResponse)],
       ]);
 
       createComponent({ apolloProvider });
+      await waitForPromises();
     });
 
     expectNoLoadingIndicator();
@@ -125,12 +127,13 @@ describe('Release show component', () => {
   });
 
   describe('when the request succeeded, but the returned "project" key was null', () => {
-    beforeEach(() => {
+    beforeEach(async () => {
       const apolloProvider = createMockApollo([
         [oneReleaseQuery, jest.fn().mockResolvedValueOnce({ data: { project: null } })],
       ]);
 
       createComponent({ apolloProvider });
+      await waitForPromises();
     });
 
     expectNoLoadingIndicator();
@@ -139,7 +142,7 @@ describe('Release show component', () => {
   });
 
   describe('when the request succeeded, but the returned "project.release" key was null', () => {
-    beforeEach(() => {
+    beforeEach(async () => {
       const apolloProvider = createMockApollo([
         [
           oneReleaseQuery,
@@ -148,6 +151,7 @@ describe('Release show component', () => {
       ]);
 
       createComponent({ apolloProvider });
+      await waitForPromises();
     });
 
     expectNoLoadingIndicator();
@@ -156,12 +160,13 @@ describe('Release show component', () => {
   });
 
   describe('when an error occurs while loading the release', () => {
-    beforeEach(() => {
+    beforeEach(async () => {
       const apolloProvider = createMockApollo([
         [oneReleaseQuery, jest.fn().mockRejectedValueOnce('An error occurred!')],
       ]);
 
       createComponent({ apolloProvider });
+      await waitForPromises();
     });
 
     expectNoLoadingIndicator();
diff --git a/spec/frontend/repository/components/blob_content_viewer_spec.js b/spec/frontend/repository/components/blob_content_viewer_spec.js
index d3b60ec3768..3384fd599b4 100644
--- a/spec/frontend/repository/components/blob_content_viewer_spec.js
+++ b/spec/frontend/repository/components/blob_content_viewer_spec.js
@@ -209,7 +209,7 @@ describe('Blob content viewer component', () => {
     it('does not render a BlobContent component if a Blob viewer is available', async () => {
       loadViewer.mockReturnValue(() => true);
       await createComponent({ blob: richViewerMock });
-
+      await waitForPromises();
       expect(findBlobContent().exists()).toBe(false);
     });
 
@@ -235,7 +235,7 @@ describe('Blob content viewer component', () => {
           },
         });
 
-        await nextTick();
+        await waitForPromises();
 
         expect(loadViewer).toHaveBeenCalledWith(viewer);
         expect(wrapper.findComponent(loadViewerReturnValue).exists()).toBe(true);
diff --git a/spec/frontend/runner/admin_runners/admin_runners_app_spec.js b/spec/frontend/runner/admin_runners/admin_runners_app_spec.js
index ac7ecf32938..35df27e02ea 100644
--- a/spec/frontend/runner/admin_runners/admin_runners_app_spec.js
+++ b/spec/frontend/runner/admin_runners/admin_runners_app_spec.js
@@ -281,6 +281,7 @@ describe('AdminRunnersApp', () => {
         },
       });
       createComponent();
+      await waitForPromises();
     });
 
     it('shows a message for no results', async () => {
@@ -289,9 +290,10 @@ describe('AdminRunnersApp', () => {
   });
 
   describe('when runners query fails', () => {
-    beforeEach(() => {
+    beforeEach(async () => {
       mockRunnersQuery = jest.fn().mockRejectedValue(new Error('Error!'));
       createComponent();
+      await waitForPromises();
     });
 
     it('error is shown to the user', async () => {
diff --git a/spec/frontend/runner/components/cells/runner_actions_cell_spec.js b/spec/frontend/runner/components/cells/runner_actions_cell_spec.js
index 89961fdb162..69838ab95fa 100644
--- a/spec/frontend/runner/components/cells/runner_actions_cell_spec.js
+++ b/spec/frontend/runner/components/cells/runner_actions_cell_spec.js
@@ -186,7 +186,8 @@ describe('RunnerTypeCell', () => {
           beforeEach(async () => {
             runnerActionsUpdateMutationHandler.mockRejectedValueOnce(new Error(mockErrorMsg));
 
-            await findToggleActiveBtn().vm.$emit('click');
+            findToggleActiveBtn().vm.$emit('click');
+            await waitForPromises();
           });
 
           it('error is reported to sentry', () => {
@@ -215,7 +216,8 @@ describe('RunnerTypeCell', () => {
               },
             });
 
-            await findToggleActiveBtn().vm.$emit('click');
+            findToggleActiveBtn().vm.$emit('click');
+            await waitForPromises();
           });
 
           it('error is reported to sentry', () => {
@@ -305,8 +307,9 @@ describe('RunnerTypeCell', () => {
     });
 
     describe('When delete is clicked', () => {
-      beforeEach(() => {
+      beforeEach(async () => {
         findRunnerDeleteModal().vm.$emit('primary');
+        await waitForPromises();
       });
 
       it('The delete mutation is called correctly', () => {
@@ -333,10 +336,11 @@ describe('RunnerTypeCell', () => {
       describe('On a network error', () => {
         const mockErrorMsg = 'Delete error!';
 
-        beforeEach(() => {
+        beforeEach(async () => {
           runnerDeleteMutationHandler.mockRejectedValueOnce(new Error(mockErrorMsg));
 
           findRunnerDeleteModal().vm.$emit('primary');
+          await waitForPromises();
         });
 
         it('error is reported to sentry', () => {
@@ -359,7 +363,7 @@ describe('RunnerTypeCell', () => {
         const mockErrorMsg = 'Runner not found!';
         const mockErrorMsg2 = 'User not allowed!';
 
-        beforeEach(() => {
+        beforeEach(async () => {
           runnerDeleteMutationHandler.mockResolvedValue({
             data: {
               runnerDelete: {
@@ -369,6 +373,7 @@ describe('RunnerTypeCell', () => {
           });
 
           findRunnerDeleteModal().vm.$emit('primary');
+          await waitForPromises();
         });
 
         it('error is reported to sentry', () => {
diff --git a/spec/frontend/runner/components/registration/registration_dropdown_spec.js b/spec/frontend/runner/components/registration/registration_dropdown_spec.js
index 8c08f3560f8..2685d387ef2 100644
--- a/spec/frontend/runner/components/registration/registration_dropdown_spec.js
+++ b/spec/frontend/runner/components/registration/registration_dropdown_spec.js
@@ -82,7 +82,7 @@ describe('RegistrationDropdown', () => {
       const findModalInBody = () =>
         createWrapper(document.body).find('[data-testid="runner-instructions-modal"]');
 
-      beforeEach(() => {
+      beforeEach(async () => {
         createComponent(
           {
             localVue,
@@ -94,7 +94,7 @@ describe('RegistrationDropdown', () => {
           mountExtended,
         );
 
-        findRegistrationInstructionsDropdownItem().trigger('click');
+        await findRegistrationInstructionsDropdownItem().trigger('click');
       });
 
       afterEach(() => {
diff --git a/spec/frontend/runner/group_runners/group_runners_app_spec.js b/spec/frontend/runner/group_runners/group_runners_app_spec.js
index 71706767092..6becc1ba743 100644
--- a/spec/frontend/runner/group_runners/group_runners_app_spec.js
+++ b/spec/frontend/runner/group_runners/group_runners_app_spec.js
@@ -218,6 +218,7 @@ describe('GroupRunnersApp', () => {
         },
       });
       createComponent();
+      await waitForPromises();
     });
 
     it('shows a message for no results', async () => {
@@ -226,9 +227,10 @@ describe('GroupRunnersApp', () => {
   });
 
   describe('when runners query fails', () => {
-    beforeEach(() => {
+    beforeEach(async () => {
       mockGroupRunnersQuery = jest.fn().mockRejectedValue(new Error('Error!'));
       createComponent();
+      await waitForPromises();
     });
 
     it('error is shown to the user', async () => {
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..76a00f5a826 100644
--- a/spec/frontend/sidebar/components/assignees/sidebar_assignees_widget_spec.js
+++ b/spec/frontend/sidebar/components/assignees/sidebar_assignees_widget_spec.js
@@ -322,9 +322,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', () => {
diff --git a/spec/frontend/vue_shared/components/runner_instructions/runner_instructions_modal_spec.js b/spec/frontend/vue_shared/components/runner_instructions/runner_instructions_modal_spec.js
index e74a867ec97..7808bdb8db3 100644
--- a/spec/frontend/vue_shared/components/runner_instructions/runner_instructions_modal_spec.js
+++ b/spec/frontend/vue_shared/components/runner_instructions/runner_instructions_modal_spec.js
@@ -77,8 +77,6 @@ describe('RunnerInstructionsModal component', () => {
     runnerSetupInstructionsHandler = jest.fn().mockResolvedValue(mockGraphqlInstructions);
 
     createComponent();
-
-    await nextTick();
   });
 
   afterEach(() => {
@@ -113,13 +111,15 @@ describe('RunnerInstructionsModal component', () => {
       });
     });
 
-    it('binary instructions are shown', () => {
+    it('binary instructions are shown', async () => {
+      await waitForPromises();
       const instructions = findBinaryInstructions().text();
 
       expect(instructions).toBe(installInstructions);
     });
 
-    it('register command is shown with a replaced token', () => {
+    it('register command is shown with a replaced token', async () => {
+      await waitForPromises();
       const instructions = findRegisterCommand().text();
 
       expect(instructions).toBe(
@@ -130,7 +130,7 @@ describe('RunnerInstructionsModal component', () => {
     describe('when a register token is not shown', () => {
       beforeEach(async () => {
         createComponent({ props: { registrationToken: undefined } });
-        await nextTick();
+        await waitForPromises();
       });
 
       it('register command is shown without a defined registration token', () => {
@@ -198,16 +198,16 @@ describe('RunnerInstructionsModal component', () => {
       expect(findSkeletonLoader().exists()).toBe(true);
       expect(findGlLoadingIcon().exists()).toBe(false);
 
-      await nextTick(); // wait for platforms
+      await nextTick();
+      await jest.runOnlyPendingTimers();
+      await nextTick();
 
       expect(findGlLoadingIcon().exists()).toBe(true);
     });
 
     it('once loaded, should not show a loading state', async () => {
       createComponent();
-
-      await nextTick(); // wait for platforms
-      await nextTick(); // wait for architectures
+      await waitForPromises();
 
       expect(findSkeletonLoader().exists()).toBe(false);
       expect(findGlLoadingIcon().exists()).toBe(false);