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

20 files changed, 286 insertions, 100 deletions

diff --git a/spec/frontend/projects/commit/components/branches_dropdown_spec.js b/spec/frontend/projects/commit/components/branches_dropdown_spec.js
index 30556cdeae1..e2848e615c3 100644
--- a/spec/frontend/projects/commit/components/branches_dropdown_spec.js
+++ b/spec/frontend/projects/commit/components/branches_dropdown_spec.js
@@ -1,6 +1,6 @@
 import { GlDropdownItem, GlSearchBoxByType } from '@gitlab/ui';
 import { shallowMount } from '@vue/test-utils';
-import Vue from 'vue';
+import Vue, { nextTick } from 'vue';
 import Vuex from 'vuex';
 import { extendedWrapper } from 'helpers/vue_test_utils_helper';
 import { DEFAULT_DEBOUNCE_AND_THROTTLE_MS } from '~/lib/utils/constants';
@@ -115,7 +115,7 @@ describe('BranchesDropdown', () => {
 
       findSearchBoxByType().vm.$emit('input', '_anything_');
 
-      await wrapper.vm.$nextTick();
+      await nextTick();
 
       expect(spy).toHaveBeenCalledWith('_anything_');
       expect(wrapper.vm.searchTerm).toBe('_anything_');
diff --git a/spec/frontend/projects/commit/components/form_modal_spec.js b/spec/frontend/projects/commit/components/form_modal_spec.js
index 93e2ae13628..79e9dab935d 100644
--- a/spec/frontend/projects/commit/components/form_modal_spec.js
+++ b/spec/frontend/projects/commit/components/form_modal_spec.js
@@ -2,6 +2,7 @@ import { GlModal, GlForm, GlFormCheckbox, GlSprintf } from '@gitlab/ui';
 import { within } from '@testing-library/dom';
 import { shallowMount, mount, createWrapper } from '@vue/test-utils';
 import MockAdapter from 'axios-mock-adapter';
+import { nextTick } from 'vue';
 import { extendedWrapper } from 'helpers/vue_test_utils_helper';
 import api from '~/api';
 import axios from '~/lib/utils/axios_utils';
@@ -156,7 +157,7 @@ describe('CommitFormModal', () => {
     it('Changes the start_branch input value', async () => {
       findBranchesDropdown().vm.$emit('selectBranch', '_changed_branch_value_');
 
-      await wrapper.vm.$nextTick();
+      await nextTick();
 
       expect(findStartBranch().attributes('value')).toBe('_changed_branch_value_');
     });
@@ -165,7 +166,7 @@ describe('CommitFormModal', () => {
       createComponent(shallowMount, {}, {}, { isCherryPick: true });
       findProjectsDropdown().vm.$emit('selectProject', '_changed_project_value_');
 
-      await wrapper.vm.$nextTick();
+      await nextTick();
 
       expect(findTargetProject().attributes('value')).toBe('_changed_project_value_');
     });
@@ -174,7 +175,7 @@ describe('CommitFormModal', () => {
   it('action primary button triggers Redis HLL tracking api call', async () => {
     createComponent(mount, {}, {}, { primaryActionEventName: 'test_event' });
 
-    await wrapper.vm.$nextTick();
+    await nextTick();
 
     jest.spyOn(findForm().element, 'submit');
 
diff --git a/spec/frontend/projects/commits/components/author_select_spec.js b/spec/frontend/projects/commits/components/author_select_spec.js
index 23b4cccd92c..4e567ab030e 100644
--- a/spec/frontend/projects/commits/components/author_select_spec.js
+++ b/spec/frontend/projects/commits/components/author_select_spec.js
@@ -1,12 +1,12 @@
 import { GlDropdown, GlDropdownSectionHeader, GlSearchBoxByType, GlDropdownItem } from '@gitlab/ui';
-import { shallowMount, createLocalVue } from '@vue/test-utils';
+import { shallowMount } from '@vue/test-utils';
+import Vue, { nextTick } from 'vue';
 import Vuex from 'vuex';
 import * as urlUtility from '~/lib/utils/url_utility';
 import AuthorSelect from '~/projects/commits/components/author_select.vue';
 import { createStore } from '~/projects/commits/store';
 
-const localVue = createLocalVue();
-localVue.use(Vuex);
+Vue.use(Vuex);
 
 const commitsPath = 'author/search/url';
 const currentAuthor = 'lorem';
@@ -38,7 +38,6 @@ describe('Author Select', () => {
     `);
 
     wrapper = shallowMount(AuthorSelect, {
-      localVue,
       store: new Vuex.Store(store),
       propsData: {
         projectCommitsEl: document.querySelector('.js-project-commits-show'),
@@ -64,36 +63,33 @@ describe('Author Select', () => {
   const findDropdownItems = () => wrapper.findAll(GlDropdownItem);
 
   describe('user is searching via "filter by commit message"', () => {
-    it('disables dropdown container', () => {
+    it('disables dropdown container', 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({ hasSearchParam: true });
 
-      return wrapper.vm.$nextTick().then(() => {
-        expect(findDropdownContainer().attributes('disabled')).toBeFalsy();
-      });
+      await nextTick();
+      expect(findDropdownContainer().attributes('disabled')).toBeFalsy();
     });
 
-    it('has correct tooltip message', () => {
+    it('has correct tooltip message', 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({ hasSearchParam: true });
 
-      return wrapper.vm.$nextTick().then(() => {
-        expect(findDropdownContainer().attributes('title')).toBe(
-          'Searching by both author and message is currently not supported.',
-        );
-      });
+      await nextTick();
+      expect(findDropdownContainer().attributes('title')).toBe(
+        'Searching by both author and message is currently not supported.',
+      );
     });
 
-    it('disables dropdown', () => {
+    it('disables dropdown', 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({ hasSearchParam: false });
 
-      return wrapper.vm.$nextTick().then(() => {
-        expect(findDropdown().attributes('disabled')).toBeFalsy();
-      });
+      await nextTick();
+      expect(findDropdown().attributes('disabled')).toBeFalsy();
     });
 
     it('hasSearchParam if user types a truthy string', () => {
@@ -108,14 +104,13 @@ describe('Author Select', () => {
       expect(findDropdown().attributes('text')).toBe('Author');
     });
 
-    it('displays the current selected author', () => {
+    it('displays the current selected author', 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({ currentAuthor });
 
-      return wrapper.vm.$nextTick().then(() => {
-        expect(findDropdown().attributes('text')).toBe(currentAuthor);
-      });
+      await nextTick();
+      expect(findDropdown().attributes('text')).toBe(currentAuthor);
     });
 
     it('displays correct header text', () => {
@@ -150,13 +145,12 @@ describe('Author Select', () => {
       expect(findDropdownItems().at(0).text()).toBe('Any Author');
     });
 
-    it('displays the project authors', () => {
-      return wrapper.vm.$nextTick().then(() => {
-        expect(findDropdownItems()).toHaveLength(authors.length + 1);
-      });
+    it('displays the project authors', async () => {
+      await nextTick();
+      expect(findDropdownItems()).toHaveLength(authors.length + 1);
     });
 
-    it('has the correct props', () => {
+    it('has the correct props', async () => {
       const [{ avatar_url, username }] = authors;
       const result = {
         avatarUrl: avatar_url,
@@ -168,15 +162,13 @@ describe('Author Select', () => {
       // eslint-disable-next-line no-restricted-syntax
       wrapper.setData({ currentAuthor });
 
-      return wrapper.vm.$nextTick().then(() => {
-        expect(findDropdownItems().at(1).props()).toEqual(expect.objectContaining(result));
-      });
+      await nextTick();
+      expect(findDropdownItems().at(1).props()).toEqual(expect.objectContaining(result));
     });
 
-    it("display the author's name", () => {
-      return wrapper.vm.$nextTick().then(() => {
-        expect(findDropdownItems().at(1).text()).toBe(currentAuthor);
-      });
+    it("display the author's name", async () => {
+      await nextTick();
+      expect(findDropdownItems().at(1).text()).toBe(currentAuthor);
     });
 
     it('passes selected author to redirectPath', () => {
diff --git a/spec/frontend/projects/compare/components/app_spec.js b/spec/frontend/projects/compare/components/app_spec.js
index 7989a6f3d74..18e7f2e0f6e 100644
--- a/spec/frontend/projects/compare/components/app_spec.js
+++ b/spec/frontend/projects/compare/components/app_spec.js
@@ -1,5 +1,6 @@
 import { GlButton } from '@gitlab/ui';
 import { shallowMount } from '@vue/test-utils';
+import { nextTick } from 'vue';
 import CompareApp from '~/projects/compare/components/app.vue';
 import RevisionCard from '~/projects/compare/components/revision_card.vue';
 import { appDefaultProps as defaultProps } from './mock_data';
@@ -91,7 +92,7 @@ describe('CompareApp component', () => {
       project,
     });
 
-    await wrapper.vm.$nextTick();
+    await nextTick();
 
     expect(findTargetRevisionCard().props('selectedProject')).toEqual(
       expect.objectContaining(project),
@@ -106,7 +107,7 @@ describe('CompareApp component', () => {
       revision,
     });
 
-    await wrapper.vm.$nextTick();
+    await nextTick();
 
     expect(findSourceRevisionCard().props('paramsBranch')).toBe(revision);
   });
@@ -125,7 +126,7 @@ describe('CompareApp component', () => {
     it('swaps revisions when clicked', async () => {
       findSwapRevisionsButton().vm.$emit('click');
 
-      await wrapper.vm.$nextTick();
+      await nextTick();
 
       expect(findTargetRevisionCard().props('paramsBranch')).toBe(defaultProps.paramsTo);
       expect(findSourceRevisionCard().props('paramsBranch')).toBe(defaultProps.paramsFrom);
diff --git a/spec/frontend/projects/compare/components/repo_dropdown_spec.js b/spec/frontend/projects/compare/components/repo_dropdown_spec.js
index 27a7a32ebca..98aec347e4b 100644
--- a/spec/frontend/projects/compare/components/repo_dropdown_spec.js
+++ b/spec/frontend/projects/compare/components/repo_dropdown_spec.js
@@ -1,5 +1,6 @@
 import { GlDropdown, GlDropdownItem } from '@gitlab/ui';
 import { shallowMount } from '@vue/test-utils';
+import { nextTick } from 'vue';
 import RepoDropdown from '~/projects/compare/components/repo_dropdown.vue';
 import { revisionCardDefaultProps as defaultProps } from './mock_data';
 
@@ -39,7 +40,7 @@ describe('RepoDropdown component', () => {
 
     it('does not emit `changeTargetProject` event', async () => {
       wrapper.vm.emitTargetProject('foo');
-      await wrapper.vm.$nextTick();
+      await nextTick();
       expect(wrapper.emitted('changeTargetProject')).toBeUndefined();
     });
   });
@@ -67,13 +68,13 @@ describe('RepoDropdown component', () => {
     it('updates the hidden input value when onClick method is triggered', async () => {
       const repoId = '1';
       wrapper.vm.onClick({ id: repoId });
-      await wrapper.vm.$nextTick();
+      await nextTick();
       expect(findHiddenInput().attributes('value')).toBe(repoId);
     });
 
     it('emits `selectProject` event when another target project is selected', async () => {
       findGlDropdown().findAll(GlDropdownItem).at(0).vm.$emit('click');
-      await wrapper.vm.$nextTick();
+      await nextTick();
 
       expect(wrapper.emitted('selectProject')[0][0]).toEqual({
         direction: 'from',
diff --git a/spec/frontend/projects/compare/components/revision_dropdown_legacy_spec.js b/spec/frontend/projects/compare/components/revision_dropdown_legacy_spec.js
index eb80d57fb3c..102f95f65da 100644
--- a/spec/frontend/projects/compare/components/revision_dropdown_legacy_spec.js
+++ b/spec/frontend/projects/compare/components/revision_dropdown_legacy_spec.js
@@ -1,6 +1,7 @@
 import { GlDropdown, GlDropdownItem } from '@gitlab/ui';
 import { shallowMount } from '@vue/test-utils';
 import AxiosMockAdapter from 'axios-mock-adapter';
+import { nextTick } from 'vue';
 import createFlash from '~/flash';
 import axios from '~/lib/utils/axios_utils';
 import RevisionDropdown from '~/projects/compare/components/revision_dropdown_legacy.vue';
@@ -105,7 +106,7 @@ describe('RevisionDropdown component', () => {
       // eslint-disable-next-line no-restricted-syntax
       wrapper.setData({ branches: ['some-branch'] });
 
-      await wrapper.vm.$nextTick();
+      await nextTick();
 
       findFirstGlDropdownItem().vm.$emit('click');
 
diff --git a/spec/frontend/projects/compare/components/revision_dropdown_spec.js b/spec/frontend/projects/compare/components/revision_dropdown_spec.js
index 118bb68585e..c8a90848492 100644
--- a/spec/frontend/projects/compare/components/revision_dropdown_spec.js
+++ b/spec/frontend/projects/compare/components/revision_dropdown_spec.js
@@ -1,6 +1,7 @@
 import { GlDropdown, GlDropdownItem, GlSearchBoxByType } from '@gitlab/ui';
 import { shallowMount } from '@vue/test-utils';
 import AxiosMockAdapter from 'axios-mock-adapter';
+import { nextTick } from 'vue';
 import createFlash from '~/flash';
 import axios from '~/lib/utils/axios_utils';
 import RevisionDropdown from '~/projects/compare/components/revision_dropdown.vue';
@@ -141,7 +142,7 @@ describe('RevisionDropdown component', () => {
   it('emits `selectRevision` event when another revision is selected', async () => {
     createComponent();
     wrapper.vm.branches = ['some-branch'];
-    await wrapper.vm.$nextTick();
+    await nextTick();
 
     findGlDropdown().findAll(GlDropdownItem).at(0).vm.$emit('click');
 
diff --git a/spec/frontend/projects/components/__snapshots__/project_delete_button_spec.js.snap b/spec/frontend/projects/components/__snapshots__/project_delete_button_spec.js.snap
index e1e1aac09aa..b8f9951bbfc 100644
--- a/spec/frontend/projects/components/__snapshots__/project_delete_button_spec.js.snap
+++ b/spec/frontend/projects/components/__snapshots__/project_delete_button_spec.js.snap
@@ -49,16 +49,17 @@ exports[`Project remove modal initialized matches the snapshot 1`] = `
         primarybuttontext=""
         secondarybuttonlink=""
         secondarybuttontext=""
-        title="You are about to permanently delete this project"
+        title=""
         variant="danger"
       >
-        <p>
-          This project is 
-          <strong>
-            NOT
-          </strong>
-           a fork, and has the following:
-        </p>
+        <h4
+          class="gl-alert-title"
+          data-testid="delete-alert-title"
+        >
+          
+          You are about to delete this project containing:
+        
+        </h4>
          
         <ul>
           <li>
@@ -77,25 +78,17 @@ exports[`Project remove modal initialized matches the snapshot 1`] = `
             4 stars
           </li>
         </ul>
-         After a project is permanently deleted, it 
-        <strong>
-          cannot be recovered
-        </strong>
-        . Permanently deleting this project will 
-        <strong>
-          immediately delete
-        </strong>
-         its repositories and 
+         This project is 
         <strong>
-          all related resources
+          NOT
         </strong>
-        , including issues, merge requests etc.
+         a fork. This process deletes the project repository and all related resources.
       </gl-alert-stub>
        
       <p
         class="gl-mb-1"
       >
-        Please type the following to confirm:
+        Enter the following to confirm:
       </p>
        
       <p>
diff --git a/spec/frontend/projects/components/project_delete_button_spec.js b/spec/frontend/projects/components/project_delete_button_spec.js
index bb6021fadda..a3bc4931eb3 100644
--- a/spec/frontend/projects/components/project_delete_button_spec.js
+++ b/spec/frontend/projects/components/project_delete_button_spec.js
@@ -50,7 +50,12 @@ describe('Project remove modal', () => {
     it('passes confirmPhrase and formPath props to the shared delete button', () => {
       expect(findSharedDeleteButton().props()).toEqual({
         confirmPhrase: defaultProps.confirmPhrase,
+        forksCount: defaultProps.forksCount,
         formPath: defaultProps.formPath,
+        isFork: defaultProps.isFork,
+        issuesCount: defaultProps.issuesCount,
+        mergeRequestsCount: defaultProps.mergeRequestsCount,
+        starsCount: defaultProps.starsCount,
       });
     });
   });
diff --git a/spec/frontend/projects/components/shared/__snapshots__/delete_button_spec.js.snap b/spec/frontend/projects/components/shared/__snapshots__/delete_button_spec.js.snap
index dd54db7dc0a..2d1039a8743 100644
--- a/spec/frontend/projects/components/shared/__snapshots__/delete_button_spec.js.snap
+++ b/spec/frontend/projects/components/shared/__snapshots__/delete_button_spec.js.snap
@@ -34,13 +34,63 @@ exports[`Project remove modal intialized matches the snapshot 1`] = `
     ok-variant="danger"
     title-class="gl-text-red-500"
   >
-    Delete project. Are you ABSOLUTELY SURE?  
+    Are you absolutely sure?  
     <div>
+      <gl-alert-stub
+        class="gl-mb-5"
+        dismisslabel="Dismiss"
+        primarybuttonlink=""
+        primarybuttontext=""
+        secondarybuttonlink=""
+        secondarybuttontext=""
+        title=""
+        variant="danger"
+      >
+        <h4
+          class="gl-alert-title"
+          data-testid="delete-alert-title"
+        >
+          
+          You are about to delete this project containing:
+        
+        </h4>
+         
+        <ul>
+          <li>
+            <gl-sprintf-stub
+              message="1 issue"
+            />
+          </li>
+           
+          <li>
+            <gl-sprintf-stub
+              message="2 merge requests"
+            />
+          </li>
+           
+          <li>
+            <gl-sprintf-stub
+              message="3 forks"
+            />
+          </li>
+           
+          <li>
+            <gl-sprintf-stub
+              message="4 stars"
+            />
+          </li>
+        </ul>
+         
+        <gl-sprintf-stub
+          data-testid="delete-alert-body"
+          message="This project is %{strongStart}NOT%{strongEnd} a fork. This process deletes the project repository and all related resources."
+        />
+      </gl-alert-stub>
        
       <p
         class="gl-mb-1"
       >
-        Please type the following to confirm:
+        Enter the following to confirm:
       </p>
        
       <p>
diff --git a/spec/frontend/projects/components/shared/delete_button_spec.js b/spec/frontend/projects/components/shared/delete_button_spec.js
index 3e491584670..45c39ee91d8 100644
--- a/spec/frontend/projects/components/shared/delete_button_spec.js
+++ b/spec/frontend/projects/components/shared/delete_button_spec.js
@@ -12,15 +12,25 @@ describe('Project remove modal', () => {
   const findConfirmButton = () => wrapper.find('.js-modal-action-primary');
   const findAuthenticityTokenInput = () => findFormElement().find('input[name=authenticity_token]');
   const findModal = () => wrapper.find(GlModal);
+  const findTitle = () => wrapper.find('[data-testid="delete-alert-title"]');
+  const findAlertBody = () => wrapper.find('[data-testid="delete-alert-body"]');
 
   const defaultProps = {
     confirmPhrase: 'foo',
     formPath: 'some/path',
+    isFork: false,
+    issuesCount: 1,
+    mergeRequestsCount: 2,
+    forksCount: 3,
+    starsCount: 4,
   };
 
-  const createComponent = (data = {}, stubs = {}) => {
+  const createComponent = (data = {}, stubs = {}, props = {}) => {
     wrapper = shallowMount(SharedDeleteButton, {
-      propsData: defaultProps,
+      propsData: {
+        ...defaultProps,
+        ...props,
+      },
       data: () => data,
       stubs: {
         GlModal: stubComponent(GlModal, {
@@ -88,4 +98,20 @@ describe('Project remove modal', () => {
       expect(findFormElement().element.submit).toHaveBeenCalled();
     });
   });
+
+  describe('when project is a fork', () => {
+    beforeEach(() => {
+      createComponent({}, {}, { isFork: true });
+    });
+
+    it('matches the fork title', () => {
+      expect(findTitle().text()).toEqual('You are about to delete this forked project containing:');
+    });
+
+    it('matches the fork body', () => {
+      expect(findAlertBody().attributes().message).toEqual(
+        'This process deletes the project repository and all related resources.',
+      );
+    });
+  });
 });
diff --git a/spec/frontend/projects/new/components/deployment_target_select_spec.js b/spec/frontend/projects/new/components/deployment_target_select_spec.js
new file mode 100644
index 00000000000..8fe4c5f1230
--- /dev/null
+++ b/spec/frontend/projects/new/components/deployment_target_select_spec.js
@@ -0,0 +1,82 @@
+import { GlFormGroup, GlFormSelect } from '@gitlab/ui';
+import { shallowMount } from '@vue/test-utils';
+import { mockTracking } from 'helpers/tracking_helper';
+import DeploymentTargetSelect from '~/projects/new/components/deployment_target_select.vue';
+import {
+  DEPLOYMENT_TARGET_SELECTIONS,
+  DEPLOYMENT_TARGET_LABEL,
+  DEPLOYMENT_TARGET_EVENT,
+  NEW_PROJECT_FORM,
+} from '~/projects/new/constants';
+
+describe('Deployment target select', () => {
+  let wrapper;
+  let trackingSpy;
+
+  const findFormGroup = () => wrapper.findComponent(GlFormGroup);
+  const findSelect = () => wrapper.findComponent(GlFormSelect);
+
+  const createdWrapper = () => {
+    wrapper = shallowMount(DeploymentTargetSelect, {
+      stubs: {
+        GlFormSelect,
+      },
+    });
+  };
+
+  const createForm = () => {
+    setFixtures(`
+      <form id="${NEW_PROJECT_FORM}">
+      </form>
+    `);
+  };
+
+  beforeEach(() => {
+    createForm();
+    createdWrapper();
+
+    trackingSpy = mockTracking(undefined, wrapper.element, jest.spyOn);
+  });
+
+  afterEach(() => {
+    wrapper.destroy();
+  });
+
+  it('renders the correct label', () => {
+    expect(findFormGroup().attributes('label')).toBe('Project deployment target (optional)');
+  });
+
+  it('renders a select with the disabled default option', () => {
+    expect(findSelect().find('option').text()).toBe('Select the deployment target');
+    expect(findSelect().find('option').attributes('disabled')).toBe('disabled');
+  });
+
+  describe.each`
+    selectedTarget                     | formSubmitted | eventSent
+    ${null}                            | ${true}       | ${false}
+    ${DEPLOYMENT_TARGET_SELECTIONS[0]} | ${false}      | ${false}
+    ${DEPLOYMENT_TARGET_SELECTIONS[0]} | ${true}       | ${true}
+  `('Snowplow tracking event', ({ selectedTarget, formSubmitted, eventSent }) => {
+    beforeEach(() => {
+      findSelect().vm.$emit('input', selectedTarget);
+
+      if (formSubmitted) {
+        const form = document.getElementById(NEW_PROJECT_FORM);
+        form.dispatchEvent(new Event('submit'));
+      }
+    });
+
+    if (eventSent) {
+      it(`is sent, when the the selectedTarget is ${selectedTarget} and the formSubmitted is ${formSubmitted} `, () => {
+        expect(trackingSpy).toHaveBeenCalledWith(undefined, DEPLOYMENT_TARGET_EVENT, {
+          label: DEPLOYMENT_TARGET_LABEL,
+          property: selectedTarget,
+        });
+      });
+    } else {
+      it(`is not sent, when the the selectedTarget is ${selectedTarget} and the formSubmitted is ${formSubmitted} `, () => {
+        expect(trackingSpy).toHaveBeenCalledTimes(0);
+      });
+    }
+  });
+});
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..921f5b74278 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
@@ -6,9 +6,10 @@ import {
   GlSearchBoxByType,
 } from '@gitlab/ui';
 import { mount, shallowMount } from '@vue/test-utils';
-import Vue from 'vue';
+import Vue, { nextTick } 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';
@@ -94,13 +95,14 @@ describe('NewProjectUrlSelect component', () => {
 
   const clickDropdownItem = async () => {
     wrapper.findComponent(GlDropdownItem).vm.$emit('click');
-    await wrapper.vm.$nextTick();
+    await nextTick();
   };
 
   const showDropdown = async () => {
     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/app_spec.js b/spec/frontend/projects/pipelines/charts/components/app_spec.js
index 574756322c7..9c94925c817 100644
--- a/spec/frontend/projects/pipelines/charts/components/app_spec.js
+++ b/spec/frontend/projects/pipelines/charts/components/app_spec.js
@@ -1,5 +1,6 @@
 import { GlTabs, GlTab } from '@gitlab/ui';
 import { merge } from 'lodash';
+import { nextTick } from 'vue';
 import { shallowMountExtended } from 'helpers/vue_test_utils_helper';
 import setWindowLocation from 'helpers/set_window_location_helper';
 import { TEST_HOST } from 'helpers/test_constants';
@@ -99,7 +100,7 @@ describe('ProjectsPipelinesChartsApp', () => {
 
       tabs.vm.$emit('input', 1);
 
-      await wrapper.vm.$nextTick();
+      await nextTick();
 
       expect(tabs.attributes('value')).toBe('1');
     });
@@ -115,7 +116,7 @@ describe('ProjectsPipelinesChartsApp', () => {
 
       tabs.vm.$emit('input', 0);
 
-      await wrapper.vm.$nextTick();
+      await nextTick();
 
       expect(updateHistory).not.toHaveBeenCalled();
     });
@@ -183,7 +184,7 @@ describe('ProjectsPipelinesChartsApp', () => {
 
       popstateHandler();
 
-      await wrapper.vm.$nextTick();
+      await nextTick();
 
       expect(findGlTabs().attributes('value')).toBe('1');
     });
diff --git a/spec/frontend/projects/pipelines/charts/components/ci_cd_analytics_charts_spec.js b/spec/frontend/projects/pipelines/charts/components/ci_cd_analytics_charts_spec.js
index 9adc6dba51e..cafb3f231bd 100644
--- a/spec/frontend/projects/pipelines/charts/components/ci_cd_analytics_charts_spec.js
+++ b/spec/frontend/projects/pipelines/charts/components/ci_cd_analytics_charts_spec.js
@@ -1,6 +1,6 @@
-import { GlSegmentedControl } from '@gitlab/ui';
-import { shallowMount } from '@vue/test-utils';
 import { nextTick } from 'vue';
+import { GlSegmentedControl } from '@gitlab/ui';
+import { shallowMountExtended } from 'helpers/vue_test_utils_helper';
 import CiCdAnalyticsAreaChart from '~/vue_shared/components/ci_cd_analytics/ci_cd_analytics_area_chart.vue';
 import CiCdAnalyticsCharts from '~/vue_shared/components/ci_cd_analytics/ci_cd_analytics_charts.vue';
 import { transformedAreaChartData, chartOptions } from '../mock_data';
@@ -29,12 +29,15 @@ const DEFAULT_PROPS = {
 describe('~/vue_shared/components/ci_cd_analytics/ci_cd_analytics_charts.vue', () => {
   let wrapper;
 
-  const createWrapper = (props = {}) =>
-    shallowMount(CiCdAnalyticsCharts, {
+  const createWrapper = (props = {}, slots = {}) =>
+    shallowMountExtended(CiCdAnalyticsCharts, {
       propsData: {
         ...DEFAULT_PROPS,
         ...props,
       },
+      scopedSlots: {
+        ...slots,
+      },
     });
 
   afterEach(() => {
@@ -44,20 +47,20 @@ describe('~/vue_shared/components/ci_cd_analytics/ci_cd_analytics_charts.vue', (
     }
   });
 
-  describe('segmented control', () => {
-    let segmentedControl;
+  const findMetricsSlot = () => wrapper.findByTestId('metrics-slot');
+  const findSegmentedControl = () => wrapper.findComponent(GlSegmentedControl);
 
+  describe('segmented control', () => {
     beforeEach(() => {
       wrapper = createWrapper();
-      segmentedControl = wrapper.find(GlSegmentedControl);
     });
 
     it('should default to the first chart', () => {
-      expect(segmentedControl.props('checked')).toBe(0);
+      expect(findSegmentedControl().props('checked')).toBe(0);
     });
 
     it('should use the title and index as values', () => {
-      const options = segmentedControl.props('options');
+      const options = findSegmentedControl().props('options');
       expect(options).toHaveLength(3);
       expect(options).toEqual([
         {
@@ -76,7 +79,7 @@ describe('~/vue_shared/components/ci_cd_analytics/ci_cd_analytics_charts.vue', (
     });
 
     it('should select a different chart on change', async () => {
-      segmentedControl.vm.$emit('input', 1);
+      findSegmentedControl().vm.$emit('input', 1);
 
       const chart = wrapper.find(CiCdAnalyticsAreaChart);
 
@@ -91,4 +94,24 @@ describe('~/vue_shared/components/ci_cd_analytics/ci_cd_analytics_charts.vue', (
     wrapper = createWrapper({ charts: [] });
     expect(wrapper.find(CiCdAnalyticsAreaChart).exists()).toBe(false);
   });
+
+  describe('slots', () => {
+    beforeEach(() => {
+      wrapper = createWrapper(
+        {},
+        {
+          metrics: '<div data-testid="metrics-slot">selected chart: {{props.selectedChart}}</div>',
+        },
+      );
+    });
+
+    it('renders a metrics slot', async () => {
+      const selectedChart = 1;
+      findSegmentedControl().vm.$emit('input', selectedChart);
+
+      await nextTick();
+
+      expect(findMetricsSlot().text()).toBe(`selected chart: ${selectedChart}`);
+    });
+  });
 });
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..3c91b913e67 100644
--- a/spec/frontend/projects/pipelines/charts/components/pipeline_charts_spec.js
+++ b/spec/frontend/projects/pipelines/charts/components/pipeline_charts_spec.js
@@ -1,7 +1,9 @@
 import { GlColumnChart } from '@gitlab/ui/dist/charts';
-import { createLocalVue, shallowMount } from '@vue/test-utils';
+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 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';
@@ -10,8 +12,7 @@ import CiCdAnalyticsCharts from '~/vue_shared/components/ci_cd_analytics/ci_cd_a
 import { mockPipelineCount, mockPipelineStatistics } from '../mock_data';
 
 const projectPath = 'gitlab-org/gitlab';
-const localVue = createLocalVue();
-localVue.use(VueApollo);
+Vue.use(VueApollo);
 
 describe('~/projects/pipelines/charts/components/pipeline_charts.vue', () => {
   let wrapper;
@@ -25,14 +26,15 @@ describe('~/projects/pipelines/charts/components/pipeline_charts.vue', () => {
     return createMockApollo(requestHandlers);
   }
 
-  beforeEach(() => {
+  beforeEach(async () => {
     wrapper = shallowMount(PipelineCharts, {
       provide: {
         projectPath,
       },
-      localVue,
       apolloProvider: createMockApolloProvider(),
     });
+
+    await waitForPromises();
   });
 
   afterEach(() => {
diff --git a/spec/frontend/projects/project_find_file_spec.js b/spec/frontend/projects/project_find_file_spec.js
index 9c1000039b1..eec54dd04bc 100644
--- a/spec/frontend/projects/project_find_file_spec.js
+++ b/spec/frontend/projects/project_find_file_spec.js
@@ -1,6 +1,7 @@
 import MockAdapter from 'axios-mock-adapter';
 import $ from 'jquery';
 import { TEST_HOST } from 'helpers/test_constants';
+import waitForPromises from 'helpers/wait_for_promises';
 import { sanitize } from '~/lib/dompurify';
 import axios from '~/lib/utils/axios_utils';
 import ProjectFindFile from '~/projects/project_find_file';
@@ -53,7 +54,7 @@ describe('ProjectFindFile', () => {
     { path: 'folde?rC/fil#F.txt', escaped: 'folde%3FrC/fil%23F.txt' },
   ];
 
-  beforeEach((done) => {
+  beforeEach(() => {
     // Create a mock adapter for stubbing axios API requests
     mock = new MockAdapter(axios);
 
@@ -64,7 +65,7 @@ describe('ProjectFindFile', () => {
     );
     getProjectFindFileInstance(); // This triggers a load / axios call + subsequent render in the constructor
 
-    setImmediate(done);
+    return waitForPromises();
   });
 
   afterEach(() => {
diff --git a/spec/frontend/projects/settings/components/shared_runners_toggle_spec.js b/spec/frontend/projects/settings/components/shared_runners_toggle_spec.js
index 0c5bbe2a115..0a05832ceb6 100644
--- a/spec/frontend/projects/settings/components/shared_runners_toggle_spec.js
+++ b/spec/frontend/projects/settings/components/shared_runners_toggle_spec.js
@@ -1,6 +1,7 @@
 import { GlAlert, GlToggle, GlTooltip } from '@gitlab/ui';
 import { shallowMount } from '@vue/test-utils';
 import MockAxiosAdapter from 'axios-mock-adapter';
+import { nextTick } from 'vue';
 import waitForPromises from 'helpers/wait_for_promises';
 import axios from '~/lib/utils/axios_utils';
 import SharedRunnersToggleComponent from '~/projects/settings/components/shared_runners_toggle.vue';
@@ -121,7 +122,7 @@ describe('projects/settings/components/shared_runners', () => {
         expect(isToggleLoading()).toBe(false);
 
         findSharedRunnersToggle().vm.$emit('change', true);
-        await wrapper.vm.$nextTick();
+        await nextTick();
         expect(isToggleLoading()).toBe(true);
 
         await waitForPromises();
diff --git a/spec/frontend/projects/settings/components/transfer_project_form_spec.js b/spec/frontend/projects/settings/components/transfer_project_form_spec.js
index f7ce7c6f840..85b09ced024 100644
--- a/spec/frontend/projects/settings/components/transfer_project_form_spec.js
+++ b/spec/frontend/projects/settings/components/transfer_project_form_spec.js
@@ -1,4 +1,7 @@
-import { namespaces } from 'jest/vue_shared/components/namespace_select/mock_data';
+import {
+  groupNamespaces,
+  userNamespaces,
+} from 'jest/vue_shared/components/namespace_select/mock_data';
 import { shallowMountExtended } from 'helpers/vue_test_utils_helper';
 import TransferProjectForm from '~/projects/settings/components/transfer_project_form.vue';
 import NamespaceSelect from '~/vue_shared/components/namespace_select/namespace_select.vue';
@@ -13,7 +16,8 @@ describe('Transfer project form', () => {
   const createComponent = () =>
     shallowMountExtended(TransferProjectForm, {
       propsData: {
-        namespaces,
+        userNamespaces,
+        groupNamespaces,
         confirmButtonText,
         confirmationPhrase,
       },
@@ -43,7 +47,7 @@ describe('Transfer project form', () => {
   });
 
   describe('with a selected namespace', () => {
-    const [selectedItem] = namespaces.group;
+    const [selectedItem] = groupNamespaces;
 
     beforeEach(() => {
       findNamespaceSelect().vm.$emit('select', selectedItem);
diff --git a/spec/frontend/projects/settings_service_desk/components/service_desk_setting_spec.js b/spec/frontend/projects/settings_service_desk/components/service_desk_setting_spec.js
index 875c58583df..57e515723e5 100644
--- a/spec/frontend/projects/settings_service_desk/components/service_desk_setting_spec.js
+++ b/spec/frontend/projects/settings_service_desk/components/service_desk_setting_spec.js
@@ -139,7 +139,7 @@ describe('ServiceDeskSetting', () => {
           input.setValue('abc_A.');
           input.trigger('blur');
 
-          await wrapper.vm.$nextTick();
+          await nextTick();
 
           const errorText = wrapper.find('.invalid-feedback');
           expect(errorText.exists()).toBe(true);