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

12 files changed, 111 insertions, 310 deletions

diff --git a/spec/frontend/vue_shared/components/sidebar/collapsed_calendar_icon_spec.js b/spec/frontend/vue_shared/components/sidebar/collapsed_calendar_icon_spec.js
deleted file mode 100644
index 79e41ed0c9e..00000000000
--- a/spec/frontend/vue_shared/components/sidebar/collapsed_calendar_icon_spec.js
+++ /dev/null
@@ -1,68 +0,0 @@
-import { shallowMount } from '@vue/test-utils';
-import { GlIcon } from '@gitlab/ui';
-import { createMockDirective, getBinding } from 'helpers/vue_mock_directive';
-
-import CollapsedCalendarIcon from '~/vue_shared/components/sidebar/collapsed_calendar_icon.vue';
-
-describe('CollapsedCalendarIcon', () => {
-  let wrapper;
-
-  const defaultProps = {
-    containerClass: 'test-class',
-    text: 'text',
-    tooltipText: 'tooltip text',
-    showIcon: false,
-  };
-
-  const createComponent = ({ props = {} } = {}) => {
-    wrapper = shallowMount(CollapsedCalendarIcon, {
-      propsData: { ...defaultProps, ...props },
-      directives: {
-        GlTooltip: createMockDirective(),
-      },
-    });
-  };
-
-  beforeEach(() => {
-    createComponent();
-  });
-
-  afterEach(() => {
-    wrapper.destroy();
-  });
-
-  const findGlIcon = () => wrapper.findComponent(GlIcon);
-  const getTooltip = () => getBinding(wrapper.element, 'gl-tooltip');
-
-  it('adds class to container', () => {
-    expect(wrapper.classes()).toContain(defaultProps.containerClass);
-  });
-
-  it('does not render calendar icon when showIcon is false', () => {
-    expect(findGlIcon().exists()).toBe(false);
-  });
-
-  it('renders calendar icon when showIcon is true', () => {
-    createComponent({
-      props: { showIcon: true },
-    });
-
-    expect(findGlIcon().exists()).toBe(true);
-  });
-
-  it('renders text', () => {
-    expect(wrapper.text()).toBe(defaultProps.text);
-  });
-
-  it('renders tooltipText as tooltip', () => {
-    expect(getTooltip().value).toBe(defaultProps.tooltipText);
-  });
-
-  it('emits click event when container is clicked', async () => {
-    wrapper.trigger('click');
-
-    await wrapper.vm.$nextTick();
-
-    expect(wrapper.emitted('click')[0]).toBeDefined();
-  });
-});
diff --git a/spec/frontend/vue_shared/components/sidebar/date_picker_spec.js b/spec/frontend/vue_shared/components/sidebar/date_picker_spec.js
deleted file mode 100644
index 263d1e9d947..00000000000
--- a/spec/frontend/vue_shared/components/sidebar/date_picker_spec.js
+++ /dev/null
@@ -1,125 +0,0 @@
-import { GlLoadingIcon } from '@gitlab/ui';
-import { mount } from '@vue/test-utils';
-import DatePicker from '~/vue_shared/components/pikaday.vue';
-import SidebarDatePicker from '~/vue_shared/components/sidebar/date_picker.vue';
-
-describe('SidebarDatePicker', () => {
-  let wrapper;
-
-  const createComponent = (propsData = {}, data = {}) => {
-    wrapper = mount(SidebarDatePicker, {
-      propsData,
-      data: () => data,
-    });
-  };
-
-  afterEach(() => {
-    wrapper.destroy();
-  });
-
-  const findDatePicker = () => wrapper.findComponent(DatePicker);
-  const findLoadingIcon = () => wrapper.findComponent(GlLoadingIcon);
-  const findEditButton = () => wrapper.find('.title .btn-blank');
-  const findRemoveButton = () => wrapper.find('.value-content .btn-blank');
-  const findSidebarToggle = () => wrapper.find('.title .gutter-toggle');
-  const findValueContent = () => wrapper.find('.value-content');
-
-  it('should emit toggleCollapse when collapsed toggle sidebar is clicked', () => {
-    createComponent();
-
-    wrapper.find('.issuable-sidebar-header .gutter-toggle').trigger('click');
-
-    expect(wrapper.emitted('toggleCollapse')).toEqual([[]]);
-  });
-
-  it('should render collapsed-calendar-icon', () => {
-    createComponent();
-
-    expect(wrapper.find('.sidebar-collapsed-icon').exists()).toBe(true);
-  });
-
-  it('should render value when not editing', () => {
-    createComponent();
-
-    expect(findValueContent().exists()).toBe(true);
-  });
-
-  it('should render None if there is no selectedDate', () => {
-    createComponent();
-
-    expect(findValueContent().text()).toBe('None');
-  });
-
-  it('should render date-picker when editing', () => {
-    createComponent({}, { editing: true });
-
-    expect(findDatePicker().exists()).toBe(true);
-  });
-
-  it('should render label', () => {
-    const label = 'label';
-    createComponent({ label });
-    expect(wrapper.find('.title').text()).toBe(label);
-  });
-
-  it('should render loading-icon when isLoading', () => {
-    createComponent({ isLoading: true });
-    expect(findLoadingIcon().exists()).toBe(true);
-  });
-
-  describe('editable', () => {
-    beforeEach(() => {
-      createComponent({ editable: true });
-    });
-
-    it('should render edit button', () => {
-      expect(findEditButton().text()).toBe('Edit');
-    });
-
-    it('should enable editing when edit button is clicked', async () => {
-      findEditButton().trigger('click');
-
-      await wrapper.vm.$nextTick();
-
-      expect(wrapper.vm.editing).toBe(true);
-    });
-  });
-
-  it('should render date if selectedDate', () => {
-    createComponent({ selectedDate: new Date('07/07/2017') });
-
-    expect(wrapper.find('.value-content strong').text()).toBe('Jul 7, 2017');
-  });
-
-  describe('selectedDate and editable', () => {
-    beforeEach(() => {
-      createComponent({ selectedDate: new Date('07/07/2017'), editable: true });
-    });
-
-    it('should render remove button if selectedDate and editable', () => {
-      expect(findRemoveButton().text()).toBe('remove');
-    });
-
-    it('should emit saveDate with null when remove button is clicked', () => {
-      findRemoveButton().trigger('click');
-
-      expect(wrapper.emitted('saveDate')).toEqual([[null]]);
-    });
-  });
-
-  describe('showToggleSidebar', () => {
-    beforeEach(() => {
-      createComponent({ showToggleSidebar: true });
-    });
-
-    it('should render toggle-sidebar when showToggleSidebar', () => {
-      expect(findSidebarToggle().exists()).toBe(true);
-    });
-
-    it('should emit toggleCollapse when toggle sidebar is clicked', () => {
-      findSidebarToggle().trigger('click');
-
-      expect(wrapper.emitted('toggleCollapse')).toEqual([[]]);
-    });
-  });
-});
diff --git a/spec/frontend/vue_shared/components/sidebar/issuable_move_dropdown_spec.js b/spec/frontend/vue_shared/components/sidebar/issuable_move_dropdown_spec.js
index 5336ecc614c..f213e37cbc1 100644
--- a/spec/frontend/vue_shared/components/sidebar/issuable_move_dropdown_spec.js
+++ b/spec/frontend/vue_shared/components/sidebar/issuable_move_dropdown_spec.js
@@ -10,6 +10,7 @@ import {
 import { shallowMount } from '@vue/test-utils';
 import MockAdapter from 'axios-mock-adapter';
 
+import { nextTick } from 'vue';
 import axios from '~/lib/utils/axios_utils';
 import IssuableMoveDropdown from '~/vue_shared/components/sidebar/issuable_move_dropdown.vue';
 
@@ -74,7 +75,7 @@ describe('IssuableMoveDropdown', () => {
           searchKey: 'foo',
         });
 
-        await wrapper.vm.$nextTick();
+        await nextTick();
 
         expect(wrapper.vm.fetchProjects).toHaveBeenCalledWith('foo');
       });
@@ -151,7 +152,7 @@ describe('IssuableMoveDropdown', () => {
             selectedProject,
           });
 
-          await wrapper.vm.$nextTick();
+          await nextTick();
 
           expect(wrapper.vm.isSelectedProject(project)).toBe(returnValue);
         },
@@ -164,7 +165,7 @@ describe('IssuableMoveDropdown', () => {
           selectedProject: null,
         });
 
-        await wrapper.vm.$nextTick();
+        await nextTick();
 
         expect(wrapper.vm.isSelectedProject(mockProjects[0])).toBe(false);
       });
@@ -218,7 +219,7 @@ describe('IssuableMoveDropdown', () => {
           projectsListLoading: true,
         });
 
-        await wrapper.vm.$nextTick();
+        await nextTick();
 
         expect(findDropdownEl().find(GlLoadingIcon).exists()).toBe(true);
       });
@@ -231,7 +232,7 @@ describe('IssuableMoveDropdown', () => {
           selectedProject: mockProjects[0],
         });
 
-        await wrapper.vm.$nextTick();
+        await nextTick();
 
         const dropdownItems = wrapper.findAll(GlDropdownItem);
 
@@ -251,7 +252,7 @@ describe('IssuableMoveDropdown', () => {
         });
 
         // Wait for `searchKey` watcher to run.
-        await wrapper.vm.$nextTick();
+        await nextTick();
 
         // setData usage is discouraged. See https://gitlab.com/groups/gitlab-org/-/epics/7330 for details
         // eslint-disable-next-line no-restricted-syntax
@@ -260,7 +261,7 @@ describe('IssuableMoveDropdown', () => {
           projectsListLoading: false,
         });
 
-        await wrapper.vm.$nextTick();
+        await nextTick();
 
         const dropdownContentEl = wrapper.find('[data-testid="content"]');
 
@@ -276,7 +277,7 @@ describe('IssuableMoveDropdown', () => {
           projectsListLoadFailed: true,
         });
 
-        await wrapper.vm.$nextTick();
+        await nextTick();
 
         const dropdownContentEl = wrapper.find('[data-testid="content"]');
 
@@ -295,7 +296,7 @@ describe('IssuableMoveDropdown', () => {
           selectedProject: mockProjects[0],
         });
 
-        await wrapper.vm.$nextTick();
+        await nextTick();
 
         expect(
           wrapper.find('[data-testid="footer"]').find(GlButton).attributes('disabled'),
@@ -352,7 +353,7 @@ describe('IssuableMoveDropdown', () => {
           projects: mockProjects,
         });
 
-        await wrapper.vm.$nextTick();
+        await nextTick();
 
         wrapper.findAll(GlDropdownItem).at(0).vm.$emit('click', mockEvent);
 
@@ -366,7 +367,7 @@ describe('IssuableMoveDropdown', () => {
           selectedProject: mockProjects[0],
         });
 
-        await wrapper.vm.$nextTick();
+        await nextTick();
 
         wrapper.find('[data-testid="footer"]').find(GlButton).vm.$emit('click');
 
diff --git a/spec/frontend/vue_shared/components/sidebar/labels_select_vue/dropdown_button_spec.js b/spec/frontend/vue_shared/components/sidebar/labels_select_vue/dropdown_button_spec.js
index c4ed975e746..c05513a6d5f 100644
--- a/spec/frontend/vue_shared/components/sidebar/labels_select_vue/dropdown_button_spec.js
+++ b/spec/frontend/vue_shared/components/sidebar/labels_select_vue/dropdown_button_spec.js
@@ -1,6 +1,6 @@
 import { GlIcon, GlButton } from '@gitlab/ui';
 import { shallowMount } from '@vue/test-utils';
-import Vue from 'vue';
+import Vue, { nextTick } from 'vue';
 import Vuex from 'vuex';
 
 import DropdownButton from '~/vue_shared/components/sidebar/labels_select_vue/dropdown_button.vue';
@@ -71,13 +71,12 @@ describe('DropdownButton', () => {
       expect(dropdownTextEl.text()).toBe('Label');
     });
 
-    it('renders provided button text element', () => {
+    it('renders provided button text element', async () => {
       store.state.dropdownButtonText = 'Custom label';
       const dropdownTextEl = findDropdownText();
 
-      return wrapper.vm.$nextTick().then(() => {
-        expect(dropdownTextEl.text()).toBe('Custom label');
-      });
+      await nextTick();
+      expect(dropdownTextEl.text()).toBe('Custom label');
     });
 
     it('renders chevron icon element', () => {
diff --git a/spec/frontend/vue_shared/components/sidebar/labels_select_vue/dropdown_contents_create_view_spec.js b/spec/frontend/vue_shared/components/sidebar/labels_select_vue/dropdown_contents_create_view_spec.js
index 0eff6a1dace..0673ffee22b 100644
--- a/spec/frontend/vue_shared/components/sidebar/labels_select_vue/dropdown_contents_create_view_spec.js
+++ b/spec/frontend/vue_shared/components/sidebar/labels_select_vue/dropdown_contents_create_view_spec.js
@@ -1,6 +1,6 @@
 import { GlButton, GlFormInput, GlLink, GlLoadingIcon } from '@gitlab/ui';
 import { shallowMount } from '@vue/test-utils';
-import Vue from 'vue';
+import Vue, { nextTick } from 'vue';
 import Vuex from 'vuex';
 
 import DropdownContentsCreateView from '~/vue_shared/components/sidebar/labels_select_vue/dropdown_contents_create_view.vue';
@@ -42,7 +42,7 @@ describe('DropdownContentsCreateView', () => {
         expect(wrapper.vm.disableCreate).toBe(true);
       });
 
-      it('returns `true` when `labelCreateInProgress` is true', () => {
+      it('returns `true` when `labelCreateInProgress` is true', 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({
@@ -51,12 +51,11 @@ describe('DropdownContentsCreateView', () => {
         });
         wrapper.vm.$store.dispatch('requestCreateLabel');
 
-        return wrapper.vm.$nextTick(() => {
-          expect(wrapper.vm.disableCreate).toBe(true);
-        });
+        await nextTick();
+        expect(wrapper.vm.disableCreate).toBe(true);
       });
 
-      it('returns `false` when label title and color is defined and create request is not already in progress', () => {
+      it('returns `false` when label title and color is defined and create request is not already in progress', 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({
@@ -64,9 +63,8 @@ describe('DropdownContentsCreateView', () => {
           selectedColor: '#ff0000',
         });
 
-        return wrapper.vm.$nextTick(() => {
-          expect(wrapper.vm.disableCreate).toBe(false);
-        });
+        await nextTick();
+        expect(wrapper.vm.disableCreate).toBe(false);
       });
     });
 
@@ -101,7 +99,7 @@ describe('DropdownContentsCreateView', () => {
     });
 
     describe('handleCreateClick', () => {
-      it('calls action `createLabel` with object containing `labelTitle` & `selectedColor`', () => {
+      it('calls action `createLabel` with object containing `labelTitle` & `selectedColor`', async () => {
         jest.spyOn(wrapper.vm, 'createLabel').mockImplementation();
         // setData usage is discouraged. See https://gitlab.com/groups/gitlab-org/-/epics/7330 for details
         // eslint-disable-next-line no-restricted-syntax
@@ -112,14 +110,13 @@ describe('DropdownContentsCreateView', () => {
 
         wrapper.vm.handleCreateClick();
 
-        return wrapper.vm.$nextTick(() => {
-          expect(wrapper.vm.createLabel).toHaveBeenCalledWith(
-            expect.objectContaining({
-              title: 'Foo',
-              color: '#ff0000',
-            }),
-          );
-        });
+        await nextTick();
+        expect(wrapper.vm.createLabel).toHaveBeenCalledWith(
+          expect.objectContaining({
+            title: 'Foo',
+            color: '#ff0000',
+          }),
+        );
       });
     });
   });
@@ -169,25 +166,22 @@ describe('DropdownContentsCreateView', () => {
       });
     });
 
-    it('renders color input element', () => {
+    it('renders color input element', 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({
         selectedColor: '#ff0000',
       });
 
-      return wrapper.vm.$nextTick(() => {
-        const colorPreviewEl = wrapper.find(
-          '.color-input-container > .dropdown-label-color-preview',
-        );
-        const colorInputEl = wrapper.find('.color-input-container').find(GlFormInput);
+      await nextTick();
+      const colorPreviewEl = wrapper.find('.color-input-container > .dropdown-label-color-preview');
+      const colorInputEl = wrapper.find('.color-input-container').find(GlFormInput);
 
-        expect(colorPreviewEl.exists()).toBe(true);
-        expect(colorPreviewEl.attributes('style')).toContain('background-color');
-        expect(colorInputEl.exists()).toBe(true);
-        expect(colorInputEl.attributes('placeholder')).toBe('Use custom color #FF0000');
-        expect(colorInputEl.attributes('value')).toBe('#ff0000');
-      });
+      expect(colorPreviewEl.exists()).toBe(true);
+      expect(colorPreviewEl.attributes('style')).toContain('background-color');
+      expect(colorInputEl.exists()).toBe(true);
+      expect(colorInputEl.attributes('placeholder')).toBe('Use custom color #FF0000');
+      expect(colorInputEl.attributes('value')).toBe('#ff0000');
     });
 
     it('renders create button element', () => {
@@ -197,15 +191,14 @@ describe('DropdownContentsCreateView', () => {
       expect(createBtnEl.text()).toContain('Create');
     });
 
-    it('shows gl-loading-icon within create button element when `labelCreateInProgress` is `true`', () => {
+    it('shows gl-loading-icon within create button element when `labelCreateInProgress` is `true`', async () => {
       wrapper.vm.$store.dispatch('requestCreateLabel');
 
-      return wrapper.vm.$nextTick(() => {
-        const loadingIconEl = wrapper.find('.dropdown-actions').find(GlLoadingIcon);
+      await nextTick();
+      const loadingIconEl = wrapper.find('.dropdown-actions').find(GlLoadingIcon);
 
-        expect(loadingIconEl.exists()).toBe(true);
-        expect(loadingIconEl.isVisible()).toBe(true);
-      });
+      expect(loadingIconEl.exists()).toBe(true);
+      expect(loadingIconEl.isVisible()).toBe(true);
     });
 
     it('renders cancel button element', () => {
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"', () => {
diff --git a/spec/frontend/vue_shared/components/sidebar/labels_select_vue/dropdown_title_spec.js b/spec/frontend/vue_shared/components/sidebar/labels_select_vue/dropdown_title_spec.js
index 110c1d1b7eb..84e9f3f41c3 100644
--- a/spec/frontend/vue_shared/components/sidebar/labels_select_vue/dropdown_title_spec.js
+++ b/spec/frontend/vue_shared/components/sidebar/labels_select_vue/dropdown_title_spec.js
@@ -1,6 +1,6 @@
 import { GlButton, GlLoadingIcon } from '@gitlab/ui';
 import { shallowMount } from '@vue/test-utils';
-import Vue from 'vue';
+import Vue, { nextTick } from 'vue';
 import Vuex from 'vuex';
 
 import DropdownTitle from '~/vue_shared/components/sidebar/labels_select_vue/dropdown_title.vue';
@@ -47,14 +47,13 @@ describe('DropdownTitle', () => {
       expect(editBtnEl.text()).toBe('Edit');
     });
 
-    it('renders loading icon element when `labelsSelectInProgress` prop is true', () => {
+    it('renders loading icon element when `labelsSelectInProgress` prop is true', async () => {
       wrapper.setProps({
         labelsSelectInProgress: true,
       });
 
-      return wrapper.vm.$nextTick(() => {
-        expect(wrapper.find(GlLoadingIcon).isVisible()).toBe(true);
-      });
+      await nextTick();
+      expect(wrapper.find(GlLoadingIcon).isVisible()).toBe(true);
     });
   });
 });
diff --git a/spec/frontend/vue_shared/components/sidebar/labels_select_vue/dropdown_value_collapsed_spec.js b/spec/frontend/vue_shared/components/sidebar/labels_select_vue/dropdown_value_collapsed_spec.js
index a7f9391cb5f..c6400320dea 100644
--- a/spec/frontend/vue_shared/components/sidebar/labels_select_vue/dropdown_value_collapsed_spec.js
+++ b/spec/frontend/vue_shared/components/sidebar/labels_select_vue/dropdown_value_collapsed_spec.js
@@ -1,5 +1,6 @@
 import { shallowMount } from '@vue/test-utils';
 import { GlIcon } from '@gitlab/ui';
+import { nextTick } from 'vue';
 import { createMockDirective, getBinding } from 'helpers/vue_mock_directive';
 import DropdownValueCollapsedComponent from '~/vue_shared/components/sidebar/labels_select_vue/dropdown_value_collapsed.vue';
 
@@ -42,7 +43,7 @@ describe('DropdownValueCollapsedComponent', () => {
 
       wrapper.trigger('click');
 
-      await wrapper.vm.$nextTick();
+      await nextTick();
 
       expect(wrapper.emitted('onValueClick')[0]).toBeDefined();
     });
diff --git a/spec/frontend/vue_shared/components/sidebar/labels_select_vue/labels_select_root_spec.js b/spec/frontend/vue_shared/components/sidebar/labels_select_vue/labels_select_root_spec.js
index 4b0ba075eda..31819d0e2f7 100644
--- a/spec/frontend/vue_shared/components/sidebar/labels_select_vue/labels_select_root_spec.js
+++ b/spec/frontend/vue_shared/components/sidebar/labels_select_vue/labels_select_root_spec.js
@@ -1,5 +1,5 @@
 import { shallowMount } from '@vue/test-utils';
-import Vue from 'vue';
+import Vue, { nextTick } from 'vue';
 import Vuex from 'vuex';
 
 import { isInViewport } from '~/lib/utils/common_utils';
@@ -139,27 +139,26 @@ describe('LabelsSelectRoot', () => {
       ${'embedded'}   | ${'is-embedded'}
     `(
       'renders component root element with CSS class `$cssClass` when `state.variant` is "$variant"',
-      ({ variant, cssClass }) => {
+      async ({ variant, cssClass }) => {
         createComponent({
           ...mockConfig,
           variant,
         });
 
-        return wrapper.vm.$nextTick(() => {
-          expect(wrapper.classes()).toContain(cssClass);
-        });
+        await nextTick();
+        expect(wrapper.classes()).toContain(cssClass);
       },
     );
 
     it('renders `dropdown-value-collapsed` component when `allowLabelCreate` prop is `true`', async () => {
       createComponent();
-      await wrapper.vm.$nextTick;
+      await nextTick;
       expect(wrapper.find(DropdownValueCollapsed).exists()).toBe(true);
     });
 
     it('renders `dropdown-title` component', async () => {
       createComponent();
-      await wrapper.vm.$nextTick;
+      await nextTick;
       expect(wrapper.find(DropdownTitle).exists()).toBe(true);
     });
 
@@ -167,7 +166,7 @@ describe('LabelsSelectRoot', () => {
       createComponent(mockConfig, {
         default: 'None',
       });
-      await wrapper.vm.$nextTick;
+      await nextTick;
 
       const valueComp = wrapper.find(DropdownValue);
 
@@ -178,14 +177,14 @@ describe('LabelsSelectRoot', () => {
     it('renders `dropdown-button` component when `showDropdownButton` prop is `true`', async () => {
       createComponent();
       wrapper.vm.$store.dispatch('toggleDropdownButton');
-      await wrapper.vm.$nextTick;
+      await nextTick;
       expect(wrapper.find(DropdownButton).exists()).toBe(true);
     });
 
     it('renders `dropdown-contents` component when `showDropdownButton` & `showDropdownContents` prop is `true`', async () => {
       createComponent();
       wrapper.vm.$store.dispatch('toggleDropdownContents');
-      await wrapper.vm.$nextTick;
+      await nextTick;
       expect(wrapper.find(DropdownContents).exists()).toBe(true);
     });
 
@@ -198,22 +197,20 @@ describe('LabelsSelectRoot', () => {
             wrapper.vm.$store.dispatch('toggleDropdownContents');
           });
 
-          it('set direction when out of viewport', () => {
+          it('set direction when out of viewport', async () => {
             isInViewport.mockImplementation(() => false);
             wrapper.vm.setContentIsOnViewport(wrapper.vm.$store.state);
 
-            return wrapper.vm.$nextTick().then(() => {
-              expect(wrapper.find(DropdownContents).props('renderOnTop')).toBe(true);
-            });
+            await nextTick();
+            expect(wrapper.find(DropdownContents).props('renderOnTop')).toBe(true);
           });
 
-          it('does not set direction when inside of viewport', () => {
+          it('does not set direction when inside of viewport', async () => {
             isInViewport.mockImplementation(() => true);
             wrapper.vm.setContentIsOnViewport(wrapper.vm.$store.state);
 
-            return wrapper.vm.$nextTick().then(() => {
-              expect(wrapper.find(DropdownContents).props('renderOnTop')).toBe(false);
-            });
+            await nextTick();
+            expect(wrapper.find(DropdownContents).props('renderOnTop')).toBe(false);
           });
         },
       );
diff --git a/spec/frontend/vue_shared/components/sidebar/labels_select_widget/labels_select_root_spec.js b/spec/frontend/vue_shared/components/sidebar/labels_select_widget/labels_select_root_spec.js
index a4199bb3e27..67e1a3ce932 100644
--- a/spec/frontend/vue_shared/components/sidebar/labels_select_widget/labels_select_root_spec.js
+++ b/spec/frontend/vue_shared/components/sidebar/labels_select_widget/labels_select_root_spec.js
@@ -117,9 +117,15 @@ describe('LabelsSelectRoot', () => {
 
       it('renders dropdown value component when query labels is resolved', () => {
         expect(findDropdownValue().exists()).toBe(true);
-        expect(findDropdownValue().props('selectedLabels')).toEqual(
-          issuableLabelsQueryResponse.data.workspace.issuable.labels.nodes,
-        );
+        expect(findDropdownValue().props('selectedLabels')).toEqual([
+          {
+            color: '#330066',
+            description: null,
+            id: 'gid://gitlab/ProjectLabel/1',
+            title: 'Label1',
+            textColor: '#000000',
+          },
+        ]);
       });
 
       it('emits `onLabelRemove` event on dropdown value label remove event', () => {
diff --git a/spec/frontend/vue_shared/components/sidebar/labels_select_widget/mock_data.js b/spec/frontend/vue_shared/components/sidebar/labels_select_widget/mock_data.js
index 6ef54ce37ce..49224fb915c 100644
--- a/spec/frontend/vue_shared/components/sidebar/labels_select_widget/mock_data.js
+++ b/spec/frontend/vue_shared/components/sidebar/labels_select_widget/mock_data.js
@@ -96,6 +96,7 @@ export const workspaceLabelsQueryResponse = {
       labels: {
         nodes: [
           {
+            __typename: 'Label',
             color: '#330066',
             description: null,
             id: 'gid://gitlab/ProjectLabel/1',
@@ -103,6 +104,7 @@ export const workspaceLabelsQueryResponse = {
             textColor: '#000000',
           },
           {
+            __typename: 'Label',
             color: '#2f7b2e',
             description: null,
             id: 'gid://gitlab/ProjectLabel/2',
@@ -125,6 +127,7 @@ export const issuableLabelsQueryResponse = {
         labels: {
           nodes: [
             {
+              __typename: 'Label',
               color: '#330066',
               description: null,
               id: 'gid://gitlab/ProjectLabel/1',
diff --git a/spec/frontend/vue_shared/components/sidebar/toggle_sidebar_spec.js b/spec/frontend/vue_shared/components/sidebar/toggle_sidebar_spec.js
index a6c9bda1aa2..267a467059d 100644
--- a/spec/frontend/vue_shared/components/sidebar/toggle_sidebar_spec.js
+++ b/spec/frontend/vue_shared/components/sidebar/toggle_sidebar_spec.js
@@ -1,6 +1,7 @@
 import { GlButton } from '@gitlab/ui';
 import { mount, shallowMount } from '@vue/test-utils';
 
+import { nextTick } from 'vue';
 import ToggleSidebar from '~/vue_shared/components/sidebar/toggle_sidebar.vue';
 
 describe('ToggleSidebar', () => {
@@ -38,7 +39,7 @@ describe('ToggleSidebar', () => {
     createComponent({ mountFn: mount });
 
     findGlButton().trigger('click');
-    await wrapper.vm.$nextTick();
+    await nextTick();
 
     expect(wrapper.emitted('toggle')[0]).toBeDefined();
   });