Add latest changes from gitlab-org/gitlab@master

8 files changed, 51 insertions, 46 deletions

diff --git a/spec/frontend/vue_shared/components/filtered_search_bar/filtered_search_bar_root_spec.js b/spec/frontend/vue_shared/components/filtered_search_bar/filtered_search_bar_root_spec.js
index 4e9eac2dde2..575e8a73050 100644
--- a/spec/frontend/vue_shared/components/filtered_search_bar/filtered_search_bar_root_spec.js
+++ b/spec/frontend/vue_shared/components/filtered_search_bar/filtered_search_bar_root_spec.js
@@ -8,6 +8,7 @@ import {
 } from '@gitlab/ui';
 import { shallowMount, mount } from '@vue/test-utils';
 
+import { nextTick } from 'vue';
 import RecentSearchesService from '~/filtered_search/services/recent_searches_service';
 import RecentSearchesStore from '~/filtered_search/stores/recent_searches_store';
 import { SortDirection } from '~/vue_shared/components/filtered_search_bar/constants';
@@ -172,7 +173,7 @@ describe('FilteredSearchBarRoot', () => {
           recentSearches: [{ foo: 'bar' }, 'foo'],
         });
 
-        await wrapper.vm.$nextTick();
+        await nextTick();
 
         expect(wrapper.vm.filteredRecentSearches).toHaveLength(1);
         expect(wrapper.vm.filteredRecentSearches[0]).toEqual({ foo: 'bar' });
@@ -188,7 +189,7 @@ describe('FilteredSearchBarRoot', () => {
           ],
         });
 
-        await wrapper.vm.$nextTick();
+        await nextTick();
 
         expect(wrapper.vm.filteredRecentSearches).toHaveLength(2);
         expect(uniqueTokens).toHaveBeenCalled();
@@ -199,7 +200,7 @@ describe('FilteredSearchBarRoot', () => {
           recentSearchesStorageKey: '',
         });
 
-        await wrapper.vm.$nextTick();
+        await nextTick();
 
         expect(wrapper.vm.filteredRecentSearches).not.toBeDefined();
       });
@@ -208,7 +209,7 @@ describe('FilteredSearchBarRoot', () => {
 
   describe('watchers', () => {
     describe('filterValue', () => {
-      it('emits component event `onFilter` with empty array and false when filter was never selected', () => {
+      it('emits component event `onFilter` with empty array and false when filter was never selected', async () => {
         wrapper = createComponent({ initialFilterValue: [tokenValueEmpty] });
         // setData usage is discouraged. See https://gitlab.com/groups/gitlab-org/-/epics/7330 for details
         // eslint-disable-next-line no-restricted-syntax
@@ -217,12 +218,11 @@ describe('FilteredSearchBarRoot', () => {
           filterValue: [tokenValueEmpty],
         });
 
-        return wrapper.vm.$nextTick(() => {
-          expect(wrapper.emitted('onFilter')[0]).toEqual([[], false]);
-        });
+        await nextTick();
+        expect(wrapper.emitted('onFilter')[0]).toEqual([[], false]);
       });
 
-      it('emits component event `onFilter` with empty array and true when initially selected filter value was cleared', () => {
+      it('emits component event `onFilter` with empty array and true when initially selected filter value was cleared', async () => {
         wrapper = createComponent({ initialFilterValue: [tokenValueLabel] });
         // setData usage is discouraged. See https://gitlab.com/groups/gitlab-org/-/epics/7330 for details
         // eslint-disable-next-line no-restricted-syntax
@@ -231,9 +231,8 @@ describe('FilteredSearchBarRoot', () => {
           filterValue: [tokenValueEmpty],
         });
 
-        return wrapper.vm.$nextTick(() => {
-          expect(wrapper.emitted('onFilter')[0]).toEqual([[], true]);
-        });
+        await nextTick();
+        expect(wrapper.emitted('onFilter')[0]).toEqual([[], true]);
       });
     });
   });
@@ -336,7 +335,7 @@ describe('FilteredSearchBarRoot', () => {
           filterValue: mockFilters,
         });
 
-        await wrapper.vm.$nextTick();
+        await nextTick();
       });
 
       it('calls `uniqueTokens` on `filterValue` prop to remove duplicates', () => {
@@ -395,7 +394,7 @@ describe('FilteredSearchBarRoot', () => {
   });
 
   describe('template', () => {
-    beforeEach(() => {
+    beforeEach(async () => {
       // setData usage is discouraged. See https://gitlab.com/groups/gitlab-org/-/epics/7330 for details
       // eslint-disable-next-line no-restricted-syntax
       wrapper.setData({
@@ -404,7 +403,7 @@ describe('FilteredSearchBarRoot', () => {
         recentSearches: mockHistoryItems,
       });
 
-      return wrapper.vm.$nextTick();
+      await nextTick();
     });
 
     it('renders gl-filtered-search component', () => {
@@ -439,7 +438,7 @@ describe('FilteredSearchBarRoot', () => {
       const wrapperFullMount = createComponent({ sortOptions: mockSortOptions, shallow: false });
       wrapperFullMount.vm.recentSearchesStore.addRecentSearch(mockHistoryItems[0]);
 
-      await wrapperFullMount.vm.$nextTick();
+      await nextTick();
 
       const searchHistoryItemsEl = wrapperFullMount.findAll(
         '.gl-search-box-by-click-menu .gl-search-box-by-click-history-item',
@@ -462,7 +461,7 @@ describe('FilteredSearchBarRoot', () => {
 
         wrapperFullMount.vm.recentSearchesStore.addRecentSearch([tokenValueMembership]);
 
-        await wrapperFullMount.vm.$nextTick();
+        await nextTick();
 
         expect(wrapperFullMount.find(GlDropdownItem).text()).toBe('Membership := Direct');
 
@@ -480,7 +479,7 @@ describe('FilteredSearchBarRoot', () => {
 
         wrapperFullMount.vm.recentSearchesStore.addRecentSearch([tokenValueMembership]);
 
-        await wrapperFullMount.vm.$nextTick();
+        await nextTick();
 
         expect(wrapperFullMount.find(GlDropdownItem).text()).toBe('Membership := exclude');
 
diff --git a/spec/frontend/vue_shared/components/filtered_search_bar/tokens/author_token_spec.js b/spec/frontend/vue_shared/components/filtered_search_bar/tokens/author_token_spec.js
index 5865c6a41b8..87066b70023 100644
--- a/spec/frontend/vue_shared/components/filtered_search_bar/tokens/author_token_spec.js
+++ b/spec/frontend/vue_shared/components/filtered_search_bar/tokens/author_token_spec.js
@@ -6,6 +6,7 @@ import {
 } from '@gitlab/ui';
 import { mount } from '@vue/test-utils';
 import MockAdapter from 'axios-mock-adapter';
+import { nextTick } from 'vue';
 import waitForPromises from 'helpers/wait_for_promises';
 import createFlash from '~/flash';
 import axios from '~/lib/utils/axios_utils';
@@ -167,7 +168,7 @@ describe('AuthorToken', () => {
       const tokenSegments = wrapper.findAllComponents(GlFilteredSearchTokenSegment);
       const suggestionsSegment = tokenSegments.at(2);
       suggestionsSegment.vm.$emit('activate');
-      await wrapper.vm.$nextTick();
+      await nextTick();
     };
 
     it('renders base-token component', () => {
@@ -185,23 +186,22 @@ describe('AuthorToken', () => {
       });
     });
 
-    it('renders token item when value is selected', () => {
+    it('renders token item when value is selected', async () => {
       wrapper = createComponent({
         value: { data: mockAuthors[0].username },
         data: { authors: mockAuthors },
         stubs: { Portal: true },
       });
 
-      return wrapper.vm.$nextTick(() => {
-        const tokenSegments = wrapper.findAll(GlFilteredSearchTokenSegment);
+      await nextTick();
+      const tokenSegments = wrapper.findAll(GlFilteredSearchTokenSegment);
 
-        expect(tokenSegments).toHaveLength(3); // Author, =, "Administrator"
+      expect(tokenSegments).toHaveLength(3); // Author, =, "Administrator"
 
-        const tokenValue = tokenSegments.at(2);
+      const tokenValue = tokenSegments.at(2);
 
-        expect(tokenValue.findComponent(GlAvatar).props('src')).toBe(mockAuthors[0].avatar_url);
-        expect(tokenValue.text()).toBe(mockAuthors[0].name); // "Administrator"
-      });
+      expect(tokenValue.findComponent(GlAvatar).props('src')).toBe(mockAuthors[0].avatar_url);
+      expect(tokenValue.text()).toBe(mockAuthors[0].name); // "Administrator"
     });
 
     it('renders token value with correct avatarUrl from author object', async () => {
@@ -220,7 +220,7 @@ describe('AuthorToken', () => {
         stubs: { Portal: true },
       });
 
-      await wrapper.vm.$nextTick();
+      await nextTick();
 
       expect(getAvatarEl().props('src')).toBe(mockAuthors[0].avatar_url);
 
@@ -236,7 +236,7 @@ describe('AuthorToken', () => {
         ],
       });
 
-      await wrapper.vm.$nextTick();
+      await nextTick();
 
       expect(getAvatarEl().props('src')).toBe(mockAuthors[0].avatar_url);
     });
@@ -268,7 +268,7 @@ describe('AuthorToken', () => {
       const tokenSegments = wrapper.findAll(GlFilteredSearchTokenSegment);
       const suggestionsSegment = tokenSegments.at(2);
       suggestionsSegment.vm.$emit('activate');
-      await wrapper.vm.$nextTick();
+      await nextTick();
 
       expect(wrapper.find(GlDropdownDivider).exists()).toBe(false);
     });
@@ -323,7 +323,7 @@ describe('AuthorToken', () => {
       it('does not show current user while searching', async () => {
         wrapper.findComponent(BaseToken).vm.handleInput({ data: 'foo' });
 
-        await wrapper.vm.$nextTick();
+        await nextTick();
 
         expect(wrapper.findComponent(GlFilteredSearchSuggestion).exists()).toBe(false);
       });
diff --git a/spec/frontend/vue_shared/components/filtered_search_bar/tokens/base_token_spec.js b/spec/frontend/vue_shared/components/filtered_search_bar/tokens/base_token_spec.js
index 4836d54ad07..dd9bf2ff598 100644
--- a/spec/frontend/vue_shared/components/filtered_search_bar/tokens/base_token_spec.js
+++ b/spec/frontend/vue_shared/components/filtered_search_bar/tokens/base_token_spec.js
@@ -1,5 +1,6 @@
 import { GlFilteredSearchToken, GlLoadingIcon } from '@gitlab/ui';
 import { mount } from '@vue/test-utils';
+import { nextTick } from 'vue';
 import {
   mockRegularLabel,
   mockLabels,
@@ -202,7 +203,7 @@ describe('BaseToken', () => {
           jest.useFakeTimers();
 
           findGlFilteredSearchToken().vm.$emit('input', { data: 'foo' });
-          await wrapper.vm.$nextTick();
+          await nextTick();
 
           jest.runAllTimers();
 
@@ -221,7 +222,7 @@ describe('BaseToken', () => {
           jest.useFakeTimers();
 
           findGlFilteredSearchToken().vm.$emit('input', { data: 'foo' });
-          await wrapper.vm.$nextTick();
+          await nextTick();
 
           jest.runAllTimers();
 
diff --git a/spec/frontend/vue_shared/components/filtered_search_bar/tokens/branch_token_spec.js b/spec/frontend/vue_shared/components/filtered_search_bar/tokens/branch_token_spec.js
index cd8be765fb5..7a7db434052 100644
--- a/spec/frontend/vue_shared/components/filtered_search_bar/tokens/branch_token_spec.js
+++ b/spec/frontend/vue_shared/components/filtered_search_bar/tokens/branch_token_spec.js
@@ -6,6 +6,7 @@ import {
 } from '@gitlab/ui';
 import { mount } from '@vue/test-utils';
 import MockAdapter from 'axios-mock-adapter';
+import { nextTick } from 'vue';
 import waitForPromises from 'helpers/wait_for_promises';
 
 import createFlash from '~/flash';
@@ -115,7 +116,7 @@ describe('BranchToken', () => {
       const tokenSegments = wrapper.findAll(GlFilteredSearchTokenSegment);
       const suggestionsSegment = tokenSegments.at(2);
       suggestionsSegment.vm.$emit('activate');
-      await wrapper.vm.$nextTick();
+      await nextTick();
     }
 
     beforeEach(async () => {
@@ -127,7 +128,7 @@ describe('BranchToken', () => {
         branches: mockBranches,
       });
 
-      await wrapper.vm.$nextTick();
+      await nextTick();
     });
 
     it('renders gl-filtered-search-token component', () => {
diff --git a/spec/frontend/vue_shared/components/filtered_search_bar/tokens/emoji_token_spec.js b/spec/frontend/vue_shared/components/filtered_search_bar/tokens/emoji_token_spec.js
index ed9ac7c271e..b163563cea4 100644
--- a/spec/frontend/vue_shared/components/filtered_search_bar/tokens/emoji_token_spec.js
+++ b/spec/frontend/vue_shared/components/filtered_search_bar/tokens/emoji_token_spec.js
@@ -6,6 +6,7 @@ import {
 } from '@gitlab/ui';
 import { mount } from '@vue/test-utils';
 import MockAdapter from 'axios-mock-adapter';
+import { nextTick } from 'vue';
 import waitForPromises from 'helpers/wait_for_promises';
 import createFlash from '~/flash';
 import axios from '~/lib/utils/axios_utils';
@@ -129,7 +130,7 @@ describe('EmojiToken', () => {
         emojis: mockEmojis,
       });
 
-      await wrapper.vm.$nextTick();
+      await nextTick();
     });
 
     it('renders gl-filtered-search-token component', () => {
@@ -152,7 +153,7 @@ describe('EmojiToken', () => {
       const tokenSegments = wrapper.findAll(GlFilteredSearchTokenSegment);
       const suggestionsSegment = tokenSegments.at(2);
       suggestionsSegment.vm.$emit('activate');
-      await wrapper.vm.$nextTick();
+      await nextTick();
 
       const suggestions = wrapper.findAll(GlFilteredSearchSuggestion);
 
@@ -171,7 +172,7 @@ describe('EmojiToken', () => {
       const tokenSegments = wrapper.findAll(GlFilteredSearchTokenSegment);
       const suggestionsSegment = tokenSegments.at(2);
       suggestionsSegment.vm.$emit('activate');
-      await wrapper.vm.$nextTick();
+      await nextTick();
 
       expect(wrapper.find(GlFilteredSearchSuggestion).exists()).toBe(false);
       expect(wrapper.find(GlDropdownDivider).exists()).toBe(false);
@@ -186,7 +187,7 @@ describe('EmojiToken', () => {
       const tokenSegments = wrapper.findAll(GlFilteredSearchTokenSegment);
       const suggestionsSegment = tokenSegments.at(2);
       suggestionsSegment.vm.$emit('activate');
-      await wrapper.vm.$nextTick();
+      await nextTick();
 
       const suggestions = wrapper.findAll(GlFilteredSearchSuggestion);
 
diff --git a/spec/frontend/vue_shared/components/filtered_search_bar/tokens/label_token_spec.js b/spec/frontend/vue_shared/components/filtered_search_bar/tokens/label_token_spec.js
index b9af71ad8a7..52df27c2d00 100644
--- a/spec/frontend/vue_shared/components/filtered_search_bar/tokens/label_token_spec.js
+++ b/spec/frontend/vue_shared/components/filtered_search_bar/tokens/label_token_spec.js
@@ -5,6 +5,7 @@ import {
 } from '@gitlab/ui';
 import { mount } from '@vue/test-utils';
 import MockAdapter from 'axios-mock-adapter';
+import { nextTick } from 'vue';
 import waitForPromises from 'helpers/wait_for_promises';
 import {
   mockRegularLabel,
@@ -150,7 +151,7 @@ describe('LabelToken', () => {
         labels: mockLabels,
       });
 
-      await wrapper.vm.$nextTick();
+      await nextTick();
     });
 
     it('renders base-token component', () => {
@@ -182,7 +183,7 @@ describe('LabelToken', () => {
       const tokenSegments = wrapper.findAll(GlFilteredSearchTokenSegment);
       const suggestionsSegment = tokenSegments.at(2);
       suggestionsSegment.vm.$emit('activate');
-      await wrapper.vm.$nextTick();
+      await nextTick();
 
       const suggestions = wrapper.findAll(GlFilteredSearchSuggestion);
 
@@ -201,7 +202,7 @@ describe('LabelToken', () => {
       const tokenSegments = wrapper.findAll(GlFilteredSearchTokenSegment);
       const suggestionsSegment = tokenSegments.at(2);
       suggestionsSegment.vm.$emit('activate');
-      await wrapper.vm.$nextTick();
+      await nextTick();
 
       expect(wrapper.find(GlFilteredSearchSuggestion).exists()).toBe(false);
       expect(wrapper.find(GlDropdownDivider).exists()).toBe(false);
diff --git a/spec/frontend/vue_shared/components/filtered_search_bar/tokens/milestone_token_spec.js b/spec/frontend/vue_shared/components/filtered_search_bar/tokens/milestone_token_spec.js
index c0d8b5fd139..332f865b874 100644
--- a/spec/frontend/vue_shared/components/filtered_search_bar/tokens/milestone_token_spec.js
+++ b/spec/frontend/vue_shared/components/filtered_search_bar/tokens/milestone_token_spec.js
@@ -6,6 +6,7 @@ import {
 } from '@gitlab/ui';
 import { mount } from '@vue/test-utils';
 import MockAdapter from 'axios-mock-adapter';
+import { nextTick } from 'vue';
 import waitForPromises from 'helpers/wait_for_promises';
 import createFlash from '~/flash';
 import axios from '~/lib/utils/axios_utils';
@@ -127,7 +128,7 @@ describe('MilestoneToken', () => {
         milestones: mockMilestones,
       });
 
-      await wrapper.vm.$nextTick();
+      await nextTick();
     });
 
     it('renders gl-filtered-search-token component', () => {
@@ -150,7 +151,7 @@ describe('MilestoneToken', () => {
       const tokenSegments = wrapper.findAll(GlFilteredSearchTokenSegment);
       const suggestionsSegment = tokenSegments.at(2);
       suggestionsSegment.vm.$emit('activate');
-      await wrapper.vm.$nextTick();
+      await nextTick();
 
       const suggestions = wrapper.findAll(GlFilteredSearchSuggestion);
 
@@ -169,7 +170,7 @@ describe('MilestoneToken', () => {
       const tokenSegments = wrapper.findAll(GlFilteredSearchTokenSegment);
       const suggestionsSegment = tokenSegments.at(2);
       suggestionsSegment.vm.$emit('activate');
-      await wrapper.vm.$nextTick();
+      await nextTick();
 
       expect(wrapper.find(GlFilteredSearchSuggestion).exists()).toBe(false);
       expect(wrapper.find(GlDropdownDivider).exists()).toBe(false);
@@ -184,7 +185,7 @@ describe('MilestoneToken', () => {
       const tokenSegments = wrapper.findAll(GlFilteredSearchTokenSegment);
       const suggestionsSegment = tokenSegments.at(2);
       suggestionsSegment.vm.$emit('activate');
-      await wrapper.vm.$nextTick();
+      await nextTick();
 
       const suggestions = wrapper.findAll(GlFilteredSearchSuggestion);
 
diff --git a/spec/frontend/vue_shared/components/filtered_search_bar/tokens/release_token_spec.js b/spec/frontend/vue_shared/components/filtered_search_bar/tokens/release_token_spec.js
index b2f246a5985..8be21b35414 100644
--- a/spec/frontend/vue_shared/components/filtered_search_bar/tokens/release_token_spec.js
+++ b/spec/frontend/vue_shared/components/filtered_search_bar/tokens/release_token_spec.js
@@ -1,5 +1,6 @@
 import { GlFilteredSearchToken, GlFilteredSearchTokenSegment } from '@gitlab/ui';
 import { mount } from '@vue/test-utils';
+import { nextTick } from 'vue';
 import waitForPromises from 'helpers/wait_for_promises';
 import createFlash from '~/flash';
 import ReleaseToken from '~/vue_shared/components/filtered_search_bar/tokens/release_token.vue';
@@ -31,7 +32,7 @@ describe('ReleaseToken', () => {
 
   it('renders release value', async () => {
     wrapper = createComponent({ value: { data: id } });
-    await wrapper.vm.$nextTick();
+    await nextTick();
 
     const tokenSegments = wrapper.findAllComponents(GlFilteredSearchTokenSegment);