1 files changed, 31 insertions, 37 deletions
diff --git a/spec/frontend/vue_shared/components/sidebar/labels_select_vue/dropdown_contents_labels_view_spec.js b/spec/frontend/vue_shared/components/sidebar/labels_select_vue/dropdown_contents_labels_view_spec.js
index 93a0e2f75bb..42202db4935 100644
--- a/spec/frontend/vue_shared/components/sidebar/labels_select_vue/dropdown_contents_labels_view_spec.js
+++ b/spec/frontend/vue_shared/components/sidebar/labels_select_vue/dropdown_contents_labels_view_spec.js
@@ -6,7 +6,7 @@ import {
   GlLink,
 } from '@gitlab/ui';
 import { shallowMount } from '@vue/test-utils';
-import Vue from 'vue';
+import Vue, { nextTick } from 'vue';
 import Vuex from 'vuex';
 import { UP_KEY_CODE, DOWN_KEY_CODE, ENTER_KEY_CODE, ESC_KEY_CODE } from '~/lib/utils/keycodes';
 import DropdownContentsLabelsView from '~/vue_shared/components/sidebar/labels_select_vue/dropdown_contents_labels_view.vue';
@@ -114,7 +114,7 @@ describe('DropdownContentsLabelsView', () => {
 
           wrapper.vm.$store.dispatch('receiveLabelsSuccess', labels);
 
-          await wrapper.vm.$nextTick();
+          await nextTick();
 
           expect(wrapper.vm.showNoMatchingResultsMessage).toBe(returnValue);
         },
@@ -249,7 +249,7 @@ describe('DropdownContentsLabelsView', () => {
         expect(wrapper.vm.toggleDropdownContents).toHaveBeenCalled();
       });
 
-      it('calls action `scrollIntoViewIfNeeded` in next tick when any key is pressed', () => {
+      it('calls action `scrollIntoViewIfNeeded` in next tick when any key is pressed', async () => {
         jest.spyOn(wrapper.vm, 'scrollIntoViewIfNeeded').mockImplementation();
         // setData usage is discouraged. See https://gitlab.com/groups/gitlab-org/-/epics/7330 for details
         // eslint-disable-next-line no-restricted-syntax
@@ -261,9 +261,8 @@ describe('DropdownContentsLabelsView', () => {
           keyCode: DOWN_KEY_CODE,
         });
 
-        return wrapper.vm.$nextTick(() => {
-          expect(wrapper.vm.scrollIntoViewIfNeeded).toHaveBeenCalled();
-        });
+        await nextTick();
+        expect(wrapper.vm.scrollIntoViewIfNeeded).toHaveBeenCalled();
       });
     });
 
@@ -294,15 +293,14 @@ describe('DropdownContentsLabelsView', () => {
       expect(wrapper.find(GlIntersectionObserver).exists()).toBe(true);
     });
 
-    it('renders gl-loading-icon component when `labelsFetchInProgress` prop is true', () => {
+    it('renders gl-loading-icon component when `labelsFetchInProgress` prop is true', async () => {
       wrapper.vm.$store.dispatch('requestLabels');
 
-      return wrapper.vm.$nextTick(() => {
-        const loadingIconEl = findLoadingIcon();
+      await nextTick();
+      const loadingIconEl = findLoadingIcon();
 
-        expect(loadingIconEl.exists()).toBe(true);
-        expect(loadingIconEl.attributes('class')).toContain('labels-fetch-loading');
-      });
+      expect(loadingIconEl.exists()).toBe(true);
+      expect(loadingIconEl.attributes('class')).toContain('labels-fetch-loading');
     });
 
     it('renders dropdown title element', () => {
@@ -339,47 +337,44 @@ describe('DropdownContentsLabelsView', () => {
       expect(wrapper.findAll(LabelItem)).toHaveLength(mockLabels.length);
     });
 
-    it('renders label element with `highlight` set to true when value of `currentHighlightItem` is more than -1', () => {
+    it('renders label element with `highlight` set to true when value of `currentHighlightItem` is more than -1', 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({
         currentHighlightItem: 0,
       });
 
-      return wrapper.vm.$nextTick(() => {
-        const labelItemEl = findDropdownContent().find(LabelItem);
+      await nextTick();
+      const labelItemEl = findDropdownContent().find(LabelItem);
 
-        expect(labelItemEl.attributes('highlight')).toBe('true');
-      });
+      expect(labelItemEl.attributes('highlight')).toBe('true');
     });
 
-    it('renders element containing "No matching results" when `searchKey` does not match with any label', () => {
+    it('renders element containing "No matching results" when `searchKey` does not match with any label', 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({
         searchKey: 'abc',
       });
 
-      return wrapper.vm.$nextTick(() => {
-        const noMatchEl = findDropdownContent().find('li');
+      await nextTick();
+      const noMatchEl = findDropdownContent().find('li');
 
-        expect(noMatchEl.isVisible()).toBe(true);
-        expect(noMatchEl.text()).toContain('No matching results');
-      });
+      expect(noMatchEl.isVisible()).toBe(true);
+      expect(noMatchEl.text()).toContain('No matching results');
     });
 
-    it('renders empty content while loading', () => {
+    it('renders empty content while loading', async () => {
       wrapper.vm.$store.state.labelsFetchInProgress = true;
 
-      return wrapper.vm.$nextTick(() => {
-        const dropdownContent = findDropdownContent();
-        const loadingIcon = findLoadingIcon();
+      await nextTick();
+      const dropdownContent = findDropdownContent();
+      const loadingIcon = findLoadingIcon();
 
-        expect(dropdownContent.exists()).toBe(true);
-        expect(dropdownContent.isVisible()).toBe(true);
-        expect(loadingIcon.exists()).toBe(true);
-        expect(loadingIcon.isVisible()).toBe(true);
-      });
+      expect(dropdownContent.exists()).toBe(true);
+      expect(dropdownContent.isVisible()).toBe(true);
+      expect(loadingIcon.exists()).toBe(true);
+      expect(loadingIcon.isVisible()).toBe(true);
     });
 
     it('renders footer list items', () => {
@@ -393,14 +388,13 @@ describe('DropdownContentsLabelsView', () => {
       expect(manageLabelsLink.text()).toBe('Manage labels');
     });
 
-    it('does not render "Create label" footer link when `state.allowLabelCreate` is `false`', () => {
+    it('does not render "Create label" footer link when `state.allowLabelCreate` is `false`', async () => {
       wrapper.vm.$store.state.allowLabelCreate = false;
 
-      return wrapper.vm.$nextTick(() => {
-        const createLabelLink = findDropdownFooter().findAll(GlLink).at(0);
+      await nextTick();
+      const createLabelLink = findDropdownFooter().findAll(GlLink).at(0);
 
-        expect(createLabelLink.text()).not.toBe('Create label');
-      });
+      expect(createLabelLink.text()).not.toBe('Create label');
     });
 
     it('does not render footer list items when `state.variant` is "standalone"', () => {