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

12 files changed, 57 insertions, 53 deletions

diff --git a/spec/frontend/releases/components/app_edit_new_spec.js b/spec/frontend/releases/components/app_edit_new_spec.js
index 029d720f7b9..0a0a683b56d 100644
--- a/spec/frontend/releases/components/app_edit_new_spec.js
+++ b/spec/frontend/releases/components/app_edit_new_spec.js
@@ -3,6 +3,7 @@ import axios from 'axios';
 import MockAdapter from 'axios-mock-adapter';
 import { merge } from 'lodash';
 import Vuex from 'vuex';
+import { nextTick } from 'vue';
 import originalRelease from 'test_fixtures/api/releases/release.json';
 import setWindowLocation from 'helpers/set_window_location_helper';
 import { TEST_HOST } from 'helpers/test_constants';
@@ -71,7 +72,7 @@ describe('Release edit/new component', () => {
       },
     });
 
-    await wrapper.vm.$nextTick();
+    await nextTick();
 
     wrapper.element.querySelectorAll('input').forEach((input) => jest.spyOn(input, 'focus'));
   };
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..9881ef9bc9f 100644
--- a/spec/frontend/releases/components/app_index_apollo_client_spec.js
+++ b/spec/frontend/releases/components/app_index_apollo_client_spec.js
@@ -1,9 +1,10 @@
 import { cloneDeep } from 'lodash';
-import Vue from 'vue';
+import Vue, { nextTick } from 'vue';
 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);
         });
 
@@ -294,7 +296,7 @@ describe('app_index_apollo_client.vue', () => {
       mockQueryParams = { after };
       findPagination().vm.$emit('next', after);
 
-      await wrapper.vm.$nextTick();
+      await nextTick();
 
       expect(queryMock.mock.calls).toEqual([
         [expect.objectContaining({ before })],
@@ -319,7 +321,7 @@ describe('app_index_apollo_client.vue', () => {
     it('requeries the GraphQL endpoint and updates the URL when the sort is changed', async () => {
       findSort().vm.$emit('input', CREATED_ASC);
 
-      await wrapper.vm.$nextTick();
+      await nextTick();
 
       expect(queryMock.mock.calls).toEqual([
         [expect.objectContaining({ sort: DEFAULT_SORT })],
@@ -335,7 +337,7 @@ describe('app_index_apollo_client.vue', () => {
     it('does not requery the GraphQL endpoint or update the URL if the sort is updated to the same value', async () => {
       findSort().vm.$emit('input', DEFAULT_SORT);
 
-      await wrapper.vm.$nextTick();
+      await nextTick();
 
       expect(queryMock.mock.calls).toEqual([
         [expect.objectContaining({ sort: DEFAULT_SORT })],
@@ -368,7 +370,7 @@ describe('app_index_apollo_client.vue', () => {
 
           findSort().vm.$emit('input', CREATED_ASC);
 
-          await wrapper.vm.$nextTick();
+          await nextTick();
         });
 
         it(`resets the page's "${paramName}" pagination cursor when the sort is changed`, () => {
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/releases/components/asset_links_form_spec.js b/spec/frontend/releases/components/asset_links_form_spec.js
index 839d127e00f..c0f7738bec5 100644
--- a/spec/frontend/releases/components/asset_links_form_spec.js
+++ b/spec/frontend/releases/components/asset_links_form_spec.js
@@ -1,4 +1,5 @@
-import { mount, createLocalVue } from '@vue/test-utils';
+import { mount } from '@vue/test-utils';
+import Vue from 'vue';
 import Vuex from 'vuex';
 import originalRelease from 'test_fixtures/api/releases/release.json';
 import * as commonUtils from '~/lib/utils/common_utils';
@@ -6,8 +7,7 @@ import { ENTER_KEY } from '~/lib/utils/keys';
 import AssetLinksForm from '~/releases/components/asset_links_form.vue';
 import { ASSET_LINK_TYPE, DEFAULT_ASSET_LINK_TYPE } from '~/releases/constants';
 
-const localVue = createLocalVue();
-localVue.use(Vuex);
+Vue.use(Vuex);
 
 describe('Release edit component', () => {
   let wrapper;
@@ -52,7 +52,6 @@ describe('Release edit component', () => {
     });
 
     wrapper = mount(AssetLinksForm, {
-      localVue,
       store,
     });
   };
diff --git a/spec/frontend/releases/components/evidence_block_spec.js b/spec/frontend/releases/components/evidence_block_spec.js
index 973428257b7..f0d02884305 100644
--- a/spec/frontend/releases/components/evidence_block_spec.js
+++ b/spec/frontend/releases/components/evidence_block_spec.js
@@ -1,5 +1,6 @@
 import { GlLink, GlIcon } from '@gitlab/ui';
 import { mount } from '@vue/test-utils';
+import { nextTick } from 'vue';
 import originalRelease from 'test_fixtures/api/releases/release.json';
 import { convertObjectPropsToCamelCase } from '~/lib/utils/common_utils';
 import { truncateSha } from '~/lib/utils/text_utility';
@@ -51,12 +52,11 @@ describe('Evidence Block', () => {
       expect(wrapper.find('.js-short').text()).toBe(truncateSha(release.evidences[0].sha));
     });
 
-    it('renders the long sha after expansion', () => {
+    it('renders the long sha after expansion', async () => {
       wrapper.find('.js-text-expander-prepend').trigger('click');
 
-      return wrapper.vm.$nextTick().then(() => {
-        expect(wrapper.find('.js-expanded').text()).toBe(release.evidences[0].sha);
-      });
+      await nextTick();
+      expect(wrapper.find('.js-expanded').text()).toBe(release.evidences[0].sha);
     });
   });
 
diff --git a/spec/frontend/releases/components/release_block_footer_spec.js b/spec/frontend/releases/components/release_block_footer_spec.js
index f645dc309d7..b095e9e1d78 100644
--- a/spec/frontend/releases/components/release_block_footer_spec.js
+++ b/spec/frontend/releases/components/release_block_footer_spec.js
@@ -1,6 +1,7 @@
 import { GlLink, GlIcon } from '@gitlab/ui';
 import { mount } from '@vue/test-utils';
 import { cloneDeep } from 'lodash';
+import { nextTick } from 'vue';
 import originalRelease from 'test_fixtures/api/releases/release.json';
 import { trimText } from 'helpers/text_helper';
 import { convertObjectPropsToCamelCase } from '~/lib/utils/common_utils';
@@ -14,7 +15,7 @@ describe('Release block footer', () => {
   let wrapper;
   let release;
 
-  const factory = (props = {}) => {
+  const factory = async (props = {}) => {
     wrapper = mount(ReleaseBlockFooter, {
       propsData: {
         ...convertObjectPropsToCamelCase(release, { deep: true }),
@@ -22,7 +23,7 @@ describe('Release block footer', () => {
       },
     });
 
-    return wrapper.vm.$nextTick();
+    await nextTick();
   };
 
   beforeEach(() => {
diff --git a/spec/frontend/releases/components/release_block_milestone_info_spec.js b/spec/frontend/releases/components/release_block_milestone_info_spec.js
index 146b2cc7490..84a0080965b 100644
--- a/spec/frontend/releases/components/release_block_milestone_info_spec.js
+++ b/spec/frontend/releases/components/release_block_milestone_info_spec.js
@@ -1,5 +1,6 @@
 import { GlProgressBar, GlLink, GlBadge, GlButton } from '@gitlab/ui';
 import { mount } from '@vue/test-utils';
+import { nextTick } from 'vue';
 import originalRelease from 'test_fixtures/api/releases/release.json';
 import { trimText } from 'helpers/text_helper';
 import { convertObjectPropsToCamelCase } from '~/lib/utils/common_utils';
@@ -12,12 +13,12 @@ describe('Release block milestone info', () => {
   let wrapper;
   let milestones;
 
-  const factory = (props) => {
+  const factory = async (props) => {
     wrapper = mount(ReleaseBlockMilestoneInfo, {
       propsData: props,
     });
 
-    return wrapper.vm.$nextTick();
+    await nextTick();
   };
 
   beforeEach(() => {
@@ -105,10 +106,10 @@ describe('Release block milestone info', () => {
       return factory({ milestones: lotsOfMilestones });
     });
 
-    const clickShowMoreFewerButton = () => {
+    const clickShowMoreFewerButton = async () => {
       milestoneListContainer().find(GlButton).trigger('click');
 
-      return wrapper.vm.$nextTick();
+      await nextTick();
     };
 
     const milestoneListText = () => trimText(milestoneListContainer().text());
@@ -117,19 +118,16 @@ describe('Release block milestone info', () => {
       expect(milestoneListText()).toContain(`Milestones ${abbreviatedListString} • show 10 more`);
     });
 
-    it('renders all milestones when "show more" is clicked', () =>
-      clickShowMoreFewerButton().then(() => {
-        expect(milestoneListText()).toContain(`Milestones ${fullListString} • show fewer`);
-      }));
+    it('renders all milestones when "show more" is clicked', async () => {
+      await clickShowMoreFewerButton();
+      expect(milestoneListText()).toContain(`Milestones ${fullListString} • show fewer`);
+    });
 
-    it('returns to the original view when "show fewer" is clicked', () =>
-      clickShowMoreFewerButton()
-        .then(clickShowMoreFewerButton)
-        .then(() => {
-          expect(milestoneListText()).toContain(
-            `Milestones ${abbreviatedListString} • show 10 more`,
-          );
-        }));
+    it('returns to the original view when "show fewer" is clicked', async () => {
+      await clickShowMoreFewerButton();
+      await clickShowMoreFewerButton();
+      expect(milestoneListText()).toContain(`Milestones ${abbreviatedListString} • show 10 more`);
+    });
   });
 
   const expectAllZeros = () => {
diff --git a/spec/frontend/releases/components/release_block_spec.js b/spec/frontend/releases/components/release_block_spec.js
index a847c32b8f1..c4910ae9b2f 100644
--- a/spec/frontend/releases/components/release_block_spec.js
+++ b/spec/frontend/releases/components/release_block_spec.js
@@ -1,5 +1,6 @@
 import { mount } from '@vue/test-utils';
 import $ from 'jquery';
+import { nextTick } from 'vue';
 import originalRelease from 'test_fixtures/api/releases/release.json';
 import * as commonUtils from '~/lib/utils/common_utils';
 import * as urlUtility from '~/lib/utils/url_utility';
@@ -13,7 +14,7 @@ describe('Release block', () => {
   let wrapper;
   let release;
 
-  const factory = (releaseProp, featureFlags = {}) => {
+  const factory = async (releaseProp, featureFlags = {}) => {
     wrapper = mount(ReleaseBlock, {
       propsData: {
         release: releaseProp,
@@ -25,7 +26,7 @@ describe('Release block', () => {
       },
     });
 
-    return wrapper.vm.$nextTick();
+    await nextTick();
   };
 
   const milestoneListLabel = () => wrapper.find('.js-milestone-list-label');
diff --git a/spec/frontend/releases/components/releases_pagination_spec.js b/spec/frontend/releases/components/releases_pagination_spec.js
index 2d08f72ad8b..b8c69b0ea70 100644
--- a/spec/frontend/releases/components/releases_pagination_spec.js
+++ b/spec/frontend/releases/components/releases_pagination_spec.js
@@ -1,5 +1,6 @@
 import { GlKeysetPagination } from '@gitlab/ui';
-import { mount, createLocalVue } from '@vue/test-utils';
+import { mount } from '@vue/test-utils';
+import Vue from 'vue';
 import Vuex from 'vuex';
 import { historyPushState } from '~/lib/utils/common_utils';
 import ReleasesPagination from '~/releases/components/releases_pagination.vue';
@@ -11,8 +12,7 @@ jest.mock('~/lib/utils/common_utils', () => ({
   historyPushState: jest.fn(),
 }));
 
-const localVue = createLocalVue();
-localVue.use(Vuex);
+Vue.use(Vuex);
 
 describe('~/releases/components/releases_pagination.vue', () => {
   let wrapper;
@@ -39,7 +39,6 @@ describe('~/releases/components/releases_pagination.vue', () => {
         },
         featureFlags: {},
       }),
-      localVue,
     });
   };
 
diff --git a/spec/frontend/releases/components/releases_sort_spec.js b/spec/frontend/releases/components/releases_sort_spec.js
index b16f80b9c73..7774532bc12 100644
--- a/spec/frontend/releases/components/releases_sort_spec.js
+++ b/spec/frontend/releases/components/releases_sort_spec.js
@@ -1,12 +1,12 @@
 import { GlSorting, GlSortingItem } from '@gitlab/ui';
-import { shallowMount, createLocalVue } from '@vue/test-utils';
+import { shallowMount } from '@vue/test-utils';
+import Vue from 'vue';
 import Vuex from 'vuex';
 import ReleasesSort from '~/releases/components/releases_sort.vue';
 import createStore from '~/releases/stores';
 import createIndexModule from '~/releases/stores/modules/index';
 
-const localVue = createLocalVue();
-localVue.use(Vuex);
+Vue.use(Vuex);
 
 describe('~/releases/components/releases_sort.vue', () => {
   let wrapper;
@@ -30,7 +30,6 @@ describe('~/releases/components/releases_sort.vue', () => {
       stubs: {
         GlSortingItem,
       },
-      localVue,
     });
   };
 
diff --git a/spec/frontend/releases/components/tag_field_exsting_spec.js b/spec/frontend/releases/components/tag_field_exsting_spec.js
index 294538086b4..f45a28392b7 100644
--- a/spec/frontend/releases/components/tag_field_exsting_spec.js
+++ b/spec/frontend/releases/components/tag_field_exsting_spec.js
@@ -1,5 +1,6 @@
 import { GlFormInput } from '@gitlab/ui';
-import { shallowMount, mount, createLocalVue } from '@vue/test-utils';
+import { shallowMount, mount } from '@vue/test-utils';
+import Vue from 'vue';
 import Vuex from 'vuex';
 import TagFieldExisting from '~/releases/components/tag_field_existing.vue';
 import createStore from '~/releases/stores';
@@ -7,8 +8,7 @@ import createEditNewModule from '~/releases/stores/modules/edit_new';
 
 const TEST_TAG_NAME = 'test-tag-name';
 
-const localVue = createLocalVue();
-localVue.use(Vuex);
+Vue.use(Vuex);
 
 describe('releases/components/tag_field_existing', () => {
   let store;
@@ -17,7 +17,6 @@ describe('releases/components/tag_field_existing', () => {
   const createComponent = (mountFn = shallowMount) => {
     wrapper = mountFn(TagFieldExisting, {
       store,
-      localVue,
     });
   };
 
diff --git a/spec/frontend/releases/components/tag_field_new_spec.js b/spec/frontend/releases/components/tag_field_new_spec.js
index 0f416e46dba..c13b513f87e 100644
--- a/spec/frontend/releases/components/tag_field_new_spec.js
+++ b/spec/frontend/releases/components/tag_field_new_spec.js
@@ -1,6 +1,6 @@
 import { GlDropdownItem } from '@gitlab/ui';
 import { mount, shallowMount } from '@vue/test-utils';
-import Vue from 'vue';
+import Vue, { nextTick } from 'vue';
 import { __ } from '~/locale';
 import TagFieldNew from '~/releases/components/tag_field_new.vue';
 import createStore from '~/releases/stores';
@@ -153,7 +153,7 @@ describe('releases/components/tag_field_new', () => {
        * Should be passed either 'shown' or 'hidden'
        */
       const expectValidationMessageToBe = async (state) => {
-        await wrapper.vm.$nextTick();
+        await nextTick();
 
         expect(findTagNameFormGroup().element).toHaveClass(
           state === 'shown' ? 'is-invalid' : 'is-valid',