Add latest changes from gitlab-org/gitlab@16-4-stable-eev16.4.0-rc42

9 files changed, 68 insertions, 382 deletions

diff --git a/spec/frontend/projects/commit/components/form_modal_spec.js b/spec/frontend/projects/commit/components/form_modal_spec.js
index d40e2d7a48c..7ea3a74418d 100644
--- a/spec/frontend/projects/commit/components/form_modal_spec.js
+++ b/spec/frontend/projects/commit/components/form_modal_spec.js
@@ -72,11 +72,11 @@ describe('CommitFormModal', () => {
 
     it('Shows modal', () => {
       createComponent();
-      const rootEmit = jest.spyOn(wrapper.vm.$root, '$emit');
+      const rootWrapper = createWrapper(wrapper.vm.$root);
 
-      wrapper.vm.show();
+      eventHub.$emit(mockData.modalPropsData.openModal);
 
-      expect(rootEmit).toHaveBeenCalledWith(BV_SHOW_MODAL, mockData.modalPropsData.modalId);
+      expect(rootWrapper.emitted(BV_SHOW_MODAL)[0]).toContain(mockData.modalPropsData.modalId);
     });
 
     it('Clears the modal state once modal is hidden', () => {
@@ -150,8 +150,9 @@ describe('CommitFormModal', () => {
 
     it('Action primary button dispatches submit action', () => {
       getByText(mockData.modalPropsData.i18n.actionPrimaryText).trigger('click');
+      const formSubmitSpy = jest.spyOn(findForm().element, 'submit');
 
-      expect(wrapper.vm.$refs.form.$el.submit).toHaveBeenCalled();
+      expect(formSubmitSpy).toHaveBeenCalled();
     });
 
     it('Changes the start_branch input value', async () => {
diff --git a/spec/frontend/projects/compare/components/revision_dropdown_legacy_spec.js b/spec/frontend/projects/compare/components/revision_dropdown_legacy_spec.js
deleted file mode 100644
index e289569f8ce..00000000000
--- a/spec/frontend/projects/compare/components/revision_dropdown_legacy_spec.js
+++ /dev/null
@@ -1,136 +0,0 @@
-import { GlDropdown, GlDropdownItem } from '@gitlab/ui';
-import { shallowMount } from '@vue/test-utils';
-import AxiosMockAdapter from 'axios-mock-adapter';
-import waitForPromises from 'helpers/wait_for_promises';
-import { createAlert } from '~/alert';
-import axios from '~/lib/utils/axios_utils';
-import { HTTP_STATUS_NOT_FOUND, HTTP_STATUS_OK } from '~/lib/utils/http_status';
-import RevisionDropdown from '~/projects/compare/components/revision_dropdown_legacy.vue';
-
-const defaultProps = {
-  refsProjectPath: 'some/refs/path',
-  revisionText: 'Target',
-  paramsName: 'from',
-  paramsBranch: 'main',
-};
-
-jest.mock('~/alert');
-
-describe('RevisionDropdown component', () => {
-  let wrapper;
-  let axiosMock;
-
-  const createComponent = (props = {}) => {
-    wrapper = shallowMount(RevisionDropdown, {
-      propsData: {
-        ...defaultProps,
-        ...props,
-      },
-    });
-  };
-
-  beforeEach(() => {
-    axiosMock = new AxiosMockAdapter(axios);
-    createComponent();
-  });
-
-  afterEach(() => {
-    axiosMock.restore();
-  });
-
-  const findGlDropdown = () => wrapper.findComponent(GlDropdown);
-  const findBranchesDropdownItem = () =>
-    wrapper.findAllComponents('[data-testid="branches-dropdown-item"]');
-  const findTagsDropdownItem = () =>
-    wrapper.findAllComponents('[data-testid="tags-dropdown-item"]');
-
-  it('sets hidden input', () => {
-    expect(wrapper.find('input[type="hidden"]').attributes('value')).toBe(
-      defaultProps.paramsBranch,
-    );
-  });
-
-  it('update the branches on success', async () => {
-    const Branches = ['branch-1', 'branch-2'];
-    const Tags = ['tag-1', 'tag-2', 'tag-3'];
-
-    axiosMock.onGet(defaultProps.refsProjectPath).replyOnce(HTTP_STATUS_OK, {
-      Branches,
-      Tags,
-    });
-
-    createComponent();
-
-    expect(findBranchesDropdownItem()).toHaveLength(0);
-    expect(findTagsDropdownItem()).toHaveLength(0);
-
-    await waitForPromises();
-
-    Branches.forEach((branch, index) => {
-      expect(findBranchesDropdownItem().at(index).text()).toBe(branch);
-    });
-
-    Tags.forEach((tag, index) => {
-      expect(findTagsDropdownItem().at(index).text()).toBe(tag);
-    });
-
-    expect(findBranchesDropdownItem()).toHaveLength(Branches.length);
-    expect(findTagsDropdownItem()).toHaveLength(Tags.length);
-  });
-
-  it('sets branches and tags to be an empty array when no tags or branches are given', async () => {
-    axiosMock.onGet(defaultProps.refsProjectPath).replyOnce(HTTP_STATUS_OK, {
-      Branches: undefined,
-      Tags: undefined,
-    });
-
-    await waitForPromises();
-
-    expect(findBranchesDropdownItem()).toHaveLength(0);
-    expect(findTagsDropdownItem()).toHaveLength(0);
-  });
-
-  it('shows an alert on error', async () => {
-    axiosMock.onGet('some/invalid/path').replyOnce(HTTP_STATUS_NOT_FOUND);
-
-    await waitForPromises();
-
-    expect(createAlert).toHaveBeenCalled();
-  });
-
-  describe('GlDropdown component', () => {
-    it('renders props', () => {
-      expect(wrapper.props()).toEqual(expect.objectContaining(defaultProps));
-    });
-
-    it('display default text', () => {
-      createComponent({
-        paramsBranch: null,
-      });
-      expect(findGlDropdown().props('text')).toBe('Select branch/tag');
-    });
-
-    it('display params branch text', () => {
-      expect(findGlDropdown().props('text')).toBe(defaultProps.paramsBranch);
-    });
-
-    it('emits a "selectRevision" event when a revision is selected', async () => {
-      const findGlDropdownItems = () => wrapper.findAllComponents(GlDropdownItem);
-      const findFirstGlDropdownItem = () => findGlDropdownItems().at(0);
-      const branchName = 'some-branch';
-
-      axiosMock.onGet(defaultProps.refsProjectPath).replyOnce(HTTP_STATUS_OK, {
-        Branches: [branchName],
-      });
-
-      createComponent();
-      await waitForPromises();
-
-      findFirstGlDropdownItem().vm.$emit('click');
-
-      expect(wrapper.emitted()).toEqual({
-        selectRevision: [[{ direction: 'from', revision: branchName }]],
-      });
-    });
-  });
-});
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 4893ee26178..479530c1d38 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
@@ -10,12 +10,10 @@ exports[`Project remove modal initialized matches the snapshot 1`] = `
     type="hidden"
     value="delete"
   />
-   
   <input
     name="authenticity_token"
     type="hidden"
   />
-   
   <delete-modal-stub
     confirmphrase="foo"
     forkscount="3"
@@ -23,7 +21,6 @@ exports[`Project remove modal initialized matches the snapshot 1`] = `
     mergerequestscount="2"
     starscount="4"
   />
-   
   <gl-button-stub
     buttontextclasses=""
     category="primary"
diff --git a/spec/frontend/projects/pipelines/charts/components/__snapshots__/ci_cd_analytics_area_chart_spec.js.snap b/spec/frontend/projects/pipelines/charts/components/__snapshots__/ci_cd_analytics_area_chart_spec.js.snap
index 61bcd44724c..efce72271e0 100644
--- a/spec/frontend/projects/pipelines/charts/components/__snapshots__/ci_cd_analytics_area_chart_spec.js.snap
+++ b/spec/frontend/projects/pipelines/charts/components/__snapshots__/ci_cd_analytics_area_chart_spec.js.snap
@@ -7,7 +7,6 @@ exports[`CiCdAnalyticsAreaChart matches the snapshot 1`] = `
   <p>
     Some title
   </p>
-   
   <glareachart-stub
     annotations=""
     data="[object Object],[object Object]"
diff --git a/spec/frontend/projects/pipelines/charts/components/__snapshots__/statistics_list_spec.js.snap b/spec/frontend/projects/pipelines/charts/components/__snapshots__/statistics_list_spec.js.snap
index 5ec0ad794fb..16d291804cc 100644
--- a/spec/frontend/projects/pipelines/charts/components/__snapshots__/statistics_list_spec.js.snap
+++ b/spec/frontend/projects/pipelines/charts/components/__snapshots__/statistics_list_spec.js.snap
@@ -6,7 +6,6 @@ exports[`StatisticsList displays the counts data with labels 1`] = `
     <span>
       Total:
     </span>
-     
     <strong>
       4 pipelines
     </strong>
@@ -15,7 +14,6 @@ exports[`StatisticsList displays the counts data with labels 1`] = `
     <span>
       Successful:
     </span>
-     
     <strong>
       2 pipelines
     </strong>
@@ -24,20 +22,16 @@ exports[`StatisticsList displays the counts data with labels 1`] = `
     <span>
       Failed:
     </span>
-     
     <gl-link-stub
       href="/flightjs/Flight/-/pipelines?page=1&scope=all&status=failed"
     >
-      
-        2 pipelines
-      
+      2 pipelines
     </gl-link-stub>
   </li>
   <li>
     <span>
       Success ratio:
     </span>
-     
     <strong>
       50.00%
     </strong>
diff --git a/spec/frontend/projects/settings/access_dropdown_spec.js b/spec/frontend/projects/settings/access_dropdown_spec.js
deleted file mode 100644
index a94d7669b2b..00000000000
--- a/spec/frontend/projects/settings/access_dropdown_spec.js
+++ /dev/null
@@ -1,204 +0,0 @@
-import $ from 'jquery';
-import { setHTMLFixture, resetHTMLFixture } from 'helpers/fixtures';
-import AccessDropdown from '~/projects/settings/access_dropdown';
-import { LEVEL_TYPES } from '~/projects/settings/constants';
-
-describe('AccessDropdown', () => {
-  const defaultLabel = 'dummy default label';
-  let dropdown;
-
-  beforeEach(() => {
-    setHTMLFixture(`
-      <div id="dummy-dropdown">
-        <span class="dropdown-toggle-text"></span>
-      </div>
-    `);
-    const $dropdown = $('#dummy-dropdown');
-    $dropdown.data('defaultLabel', defaultLabel);
-    const options = {
-      $dropdown,
-      accessLevelsData: {
-        roles: [
-          {
-            id: 42,
-            text: 'Dummy Role',
-          },
-        ],
-      },
-    };
-    dropdown = new AccessDropdown(options);
-  });
-
-  afterEach(() => {
-    resetHTMLFixture();
-  });
-
-  describe('toggleLabel', () => {
-    let $dropdownToggleText;
-    const dummyItems = [
-      { type: LEVEL_TYPES.ROLE, access_level: 42 },
-      { type: LEVEL_TYPES.USER },
-      { type: LEVEL_TYPES.USER },
-      { type: LEVEL_TYPES.GROUP },
-      { type: LEVEL_TYPES.GROUP },
-      { type: LEVEL_TYPES.GROUP },
-      { type: LEVEL_TYPES.DEPLOY_KEY },
-      { type: LEVEL_TYPES.DEPLOY_KEY },
-      { type: LEVEL_TYPES.DEPLOY_KEY },
-    ];
-
-    beforeEach(() => {
-      $dropdownToggleText = $('.dropdown-toggle-text');
-    });
-
-    it('displays number of items', () => {
-      dropdown.setSelectedItems(dummyItems);
-      $dropdownToggleText.addClass('is-default');
-
-      const label = dropdown.toggleLabel();
-
-      expect(label).toBe('1 role, 2 users, 3 deploy keys, 3 groups');
-      expect($dropdownToggleText).not.toHaveClass('is-default');
-    });
-
-    describe('without selected items', () => {
-      beforeEach(() => {
-        dropdown.setSelectedItems([]);
-      });
-
-      it('falls back to default label', () => {
-        const label = dropdown.toggleLabel();
-
-        expect(label).toBe(defaultLabel);
-        expect($dropdownToggleText).toHaveClass('is-default');
-      });
-    });
-
-    describe('with only role', () => {
-      beforeEach(() => {
-        dropdown.setSelectedItems(dummyItems.filter((item) => item.type === LEVEL_TYPES.ROLE));
-        $dropdownToggleText.addClass('is-default');
-      });
-
-      it('displays the role name', () => {
-        const label = dropdown.toggleLabel();
-
-        expect(label).toBe('Dummy Role');
-        expect($dropdownToggleText).not.toHaveClass('is-default');
-      });
-    });
-
-    describe('with only users', () => {
-      beforeEach(() => {
-        dropdown.setSelectedItems(dummyItems.filter((item) => item.type === LEVEL_TYPES.USER));
-        $dropdownToggleText.addClass('is-default');
-      });
-
-      it('displays number of users', () => {
-        const label = dropdown.toggleLabel();
-
-        expect(label).toBe('2 users');
-        expect($dropdownToggleText).not.toHaveClass('is-default');
-      });
-    });
-
-    describe('with only groups', () => {
-      beforeEach(() => {
-        dropdown.setSelectedItems(dummyItems.filter((item) => item.type === LEVEL_TYPES.GROUP));
-        $dropdownToggleText.addClass('is-default');
-      });
-
-      it('displays number of groups', () => {
-        const label = dropdown.toggleLabel();
-
-        expect(label).toBe('3 groups');
-        expect($dropdownToggleText).not.toHaveClass('is-default');
-      });
-    });
-
-    describe('with users and groups', () => {
-      beforeEach(() => {
-        const selectedTypes = [LEVEL_TYPES.GROUP, LEVEL_TYPES.USER];
-        dropdown.setSelectedItems(dummyItems.filter((item) => selectedTypes.includes(item.type)));
-        $dropdownToggleText.addClass('is-default');
-      });
-
-      it('displays number of groups', () => {
-        const label = dropdown.toggleLabel();
-
-        expect(label).toBe('2 users, 3 groups');
-        expect($dropdownToggleText).not.toHaveClass('is-default');
-      });
-    });
-
-    describe('with users and deploy keys', () => {
-      beforeEach(() => {
-        const selectedTypes = [LEVEL_TYPES.DEPLOY_KEY, LEVEL_TYPES.USER];
-        dropdown.setSelectedItems(dummyItems.filter((item) => selectedTypes.includes(item.type)));
-        $dropdownToggleText.addClass('is-default');
-      });
-
-      it('displays number of deploy keys', () => {
-        const label = dropdown.toggleLabel();
-
-        expect(label).toBe('2 users, 3 deploy keys');
-        expect($dropdownToggleText).not.toHaveClass('is-default');
-      });
-    });
-  });
-
-  describe('userRowHtml', () => {
-    it('escapes users name', () => {
-      const user = {
-        avatar_url: '',
-        name: '<img src=x onerror=alert(document.domain)>',
-        username: 'test',
-      };
-      const template = dropdown.userRowHtml(user);
-
-      expect(template).not.toContain(user.name);
-    });
-
-    it('show user avatar correctly', () => {
-      const user = {
-        id: 613,
-        avatar_url: 'some_valid_avatar.png',
-        name: 'test',
-        username: 'test',
-      };
-      const template = dropdown.userRowHtml(user);
-
-      expect(template).toContain(user.avatar_url);
-      expect(template).not.toContain('identicon');
-    });
-
-    it('show identicon when user do not have avatar', () => {
-      const user = {
-        id: 613,
-        avatar_url: '',
-        name: 'test',
-        username: 'test',
-      };
-      const template = dropdown.userRowHtml(user);
-
-      expect(template).toContain('identicon');
-    });
-  });
-
-  describe('deployKeyRowHtml', () => {
-    const deployKey = {
-      id: 1,
-      title: 'title <script>alert(document.domain)</script>',
-      fullname: 'fullname <script>alert(document.domain)</script>',
-      avatar_url: '',
-      username: '',
-    };
-
-    it('escapes deploy key title and fullname', () => {
-      const template = dropdown.deployKeyRowHtml(deployKey);
-
-      expect(template).not.toContain(deployKey.title);
-      expect(template).not.toContain(deployKey.fullname);
-    });
-  });
-});
diff --git a/spec/frontend/projects/settings/components/new_access_dropdown_spec.js b/spec/frontend/projects/settings/components/new_access_dropdown_spec.js
index ce696ee321b..0ed2e51e8c3 100644
--- a/spec/frontend/projects/settings/components/new_access_dropdown_spec.js
+++ b/spec/frontend/projects/settings/components/new_access_dropdown_spec.js
@@ -14,13 +14,11 @@ import AccessDropdown, { i18n } from '~/projects/settings/components/access_drop
 import { ACCESS_LEVELS, LEVEL_TYPES } from '~/projects/settings/constants';
 
 jest.mock('~/projects/settings/api/access_dropdown_api', () => ({
-  getGroups: jest.fn().mockResolvedValue({
-    data: [
-      { id: 4, name: 'group4' },
-      { id: 5, name: 'group5' },
-      { id: 6, name: 'group6' },
-    ],
-  }),
+  getGroups: jest.fn().mockResolvedValue([
+    { id: 4, name: 'group4' },
+    { id: 5, name: 'group5' },
+    { id: 6, name: 'group6' },
+  ]),
   getUsers: jest.fn().mockResolvedValue({
     data: [
       { id: 7, name: 'user7' },
@@ -50,6 +48,7 @@ jest.mock('~/projects/settings/api/access_dropdown_api', () => ({
 
 describe('Access Level Dropdown', () => {
   let wrapper;
+  const defaultToggleClass = 'gl-text-gray-500!';
   const mockAccessLevelsData = [
     {
       id: 1,
@@ -63,6 +62,10 @@ describe('Access Level Dropdown', () => {
       id: 3,
       text: 'role3',
     },
+    {
+      id: 0,
+      text: 'No one',
+    },
   ];
 
   const createComponent = ({
@@ -140,7 +143,7 @@ describe('Access Level Dropdown', () => {
     });
 
     it('renders dropdown item for each access level type', () => {
-      expect(findAllDropdownItems()).toHaveLength(12);
+      expect(findAllDropdownItems()).toHaveLength(13);
     });
 
     it.each`
@@ -177,26 +180,26 @@ describe('Access Level Dropdown', () => {
       const customLabel = 'Set the access level';
       createComponent({ label: customLabel });
       expect(findDropdownToggleLabel()).toBe(customLabel);
-      expect(findDropdown().props('toggleClass')).toBe('gl-text-gray-500!');
+      expect(findDropdown().props('toggleClass')[defaultToggleClass]).toBe(true);
     });
 
     it('when no items selected, displays a default fallback label and has default CSS class', () => {
-      expect(findDropdownToggleLabel()).toBe(i18n.selectUsers);
-      expect(findDropdown().props('toggleClass')).toBe('gl-text-gray-500!');
+      expect(findDropdownToggleLabel()).toBe(i18n.defaultLabel);
+      expect(findDropdown().props('toggleClass')[defaultToggleClass]).toBe(true);
     });
 
-    it('displays a number of selected items for each group level', async () => {
+    it('displays selected items for each group level', async () => {
       dropdownItems.wrappers.forEach((item) => {
         item.trigger('click');
       });
       await nextTick();
-      expect(findDropdownToggleLabel()).toBe('3 roles, 3 users, 3 deploy keys, 3 groups');
+      expect(findDropdownToggleLabel()).toBe('No role, 3 users, 3 deploy keys, 3 groups');
     });
 
     it('with only role selected displays the role name and has no class applied', async () => {
       await findItemByNameAndClick('role1');
       expect(findDropdownToggleLabel()).toBe('role1');
-      expect(findDropdown().props('toggleClass')).toBe('');
+      expect(findDropdown().props('toggleClass')[defaultToggleClass]).toBe(false);
     });
 
     it('with only groups selected displays the number of selected groups', async () => {
@@ -204,14 +207,14 @@ describe('Access Level Dropdown', () => {
       await findItemByNameAndClick('group5');
       await findItemByNameAndClick('group6');
       expect(findDropdownToggleLabel()).toBe('3 groups');
-      expect(findDropdown().props('toggleClass')).toBe('');
+      expect(findDropdown().props('toggleClass')[defaultToggleClass]).toBe(false);
     });
 
     it('with only users selected displays the number of selected users', async () => {
       await findItemByNameAndClick('user7');
       await findItemByNameAndClick('user8');
       expect(findDropdownToggleLabel()).toBe('2 users');
-      expect(findDropdown().props('toggleClass')).toBe('');
+      expect(findDropdown().props('toggleClass')[defaultToggleClass]).toBe(false);
     });
 
     it('with users and groups selected displays the number of selected users & groups', async () => {
@@ -220,7 +223,7 @@ describe('Access Level Dropdown', () => {
       await findItemByNameAndClick('user7');
       await findItemByNameAndClick('user9');
       expect(findDropdownToggleLabel()).toBe('2 users, 2 groups');
-      expect(findDropdown().props('toggleClass')).toBe('');
+      expect(findDropdown().props('toggleClass')[defaultToggleClass]).toBe(false);
     });
 
     it('with users and deploy keys selected displays the number of selected users & keys', async () => {
@@ -228,7 +231,7 @@ describe('Access Level Dropdown', () => {
       await findItemByNameAndClick('key10');
       await findItemByNameAndClick('key11');
       expect(findDropdownToggleLabel()).toBe('1 user, 2 deploy keys');
-      expect(findDropdown().props('toggleClass')).toBe('');
+      expect(findDropdown().props('toggleClass')[defaultToggleClass]).toBe(false);
     });
   });
 
@@ -393,4 +396,20 @@ describe('Access Level Dropdown', () => {
       expect(wrapper.emitted('hidden')[0][0]).toStrictEqual([{ access_level: 2 }]);
     });
   });
+
+  describe('when no license and accessLevel is MERGE', () => {
+    beforeEach(async () => {
+      createComponent({ hasLicense: false, accessLevel: ACCESS_LEVELS.MERGE });
+      await waitForPromises();
+    });
+
+    it('dropdown is single-select', () => {
+      const dropdownItems = findAllDropdownItems();
+
+      findDropdownItemWithText(dropdownItems, mockAccessLevelsData[0].text).trigger('click');
+      findDropdownItemWithText(dropdownItems, mockAccessLevelsData[1].text).trigger('click');
+
+      expect(wrapper.emitted('select')[1]).toHaveLength(1);
+    });
+  });
 });
diff --git a/spec/frontend/projects/settings_service_desk/components/custom_email_form_spec.js b/spec/frontend/projects/settings_service_desk/components/custom_email_form_spec.js
index ded8b181c4e..9b012995ea4 100644
--- a/spec/frontend/projects/settings_service_desk/components/custom_email_form_spec.js
+++ b/spec/frontend/projects/settings_service_desk/components/custom_email_form_spec.js
@@ -1,6 +1,8 @@
 import { mount } from '@vue/test-utils';
+import { GlLink } from '@gitlab/ui';
 import { nextTick } from 'vue';
 import { extendedWrapper } from 'helpers/vue_test_utils_helper';
+import { helpPagePath } from '~/helpers/help_page_helper';
 import CustomEmailForm from '~/projects/settings_service_desk/components/custom_email_form.vue';
 import ClipboardButton from '~/vue_shared/components/clipboard_button.vue';
 import { I18N_FORM_FORWARDING_CLIPBOARD_BUTTON_TITLE } from '~/projects/settings_service_desk/custom_email_constants';
@@ -15,6 +17,7 @@ describe('CustomEmailForm', () => {
 
   const findForm = () => wrapper.find('form');
   const findClipboardButton = () => wrapper.findComponent(ClipboardButton);
+  const findLink = () => wrapper.findComponent(GlLink);
   const findInputByTestId = (testId) => wrapper.findByTestId(testId).find('input');
   const findCustomEmailInput = () => findInputByTestId('form-custom-email');
   const findSmtpAddressInput = () => findInputByTestId('form-smtp-address');
@@ -35,6 +38,16 @@ describe('CustomEmailForm', () => {
     wrapper = extendedWrapper(mount(CustomEmailForm, { propsData: { ...defaultProps, ...props } }));
   };
 
+  it('displays help page link', () => {
+    createWrapper();
+
+    expect(findLink().attributes('href')).toBe(
+      helpPagePath('user/project/service_desk/configure.html', {
+        anchor: 'custom-email-address',
+      }),
+    );
+  });
+
   it('renders a copy to clipboard button', () => {
     createWrapper();
 
diff --git a/spec/frontend/projects/settings_service_desk/components/custom_email_wrapper_spec.js b/spec/frontend/projects/settings_service_desk/components/custom_email_wrapper_spec.js
index e54d09cf82f..174e05ceeee 100644
--- a/spec/frontend/projects/settings_service_desk/components/custom_email_wrapper_spec.js
+++ b/spec/frontend/projects/settings_service_desk/components/custom_email_wrapper_spec.js
@@ -1,7 +1,8 @@
 import { nextTick } from 'vue';
-import { GlLink, GlLoadingIcon, GlAlert } from '@gitlab/ui';
+import { GlLoadingIcon, GlAlert } from '@gitlab/ui';
 import { mount } from '@vue/test-utils';
 import AxiosMockAdapter from 'axios-mock-adapter';
+import { extendedWrapper } from 'helpers/vue_test_utils_helper';
 import axios from '~/lib/utils/axios_utils';
 import waitForPromises from 'helpers/wait_for_promises';
 import { HTTP_STATUS_OK, HTTP_STATUS_NOT_FOUND } from '~/lib/utils/http_status';
@@ -40,19 +41,21 @@ describe('CustomEmailWrapper', () => {
   const showToast = jest.fn();
 
   const createWrapper = (props = {}) => {
-    wrapper = mount(CustomEmailWrapper, {
-      propsData: { ...defaultProps, ...props },
-      mocks: {
-        $toast: {
-          show: showToast,
+    wrapper = extendedWrapper(
+      mount(CustomEmailWrapper, {
+        propsData: { ...defaultProps, ...props },
+        mocks: {
+          $toast: {
+            show: showToast,
+          },
         },
-      },
-    });
+      }),
+    );
   };
 
   const findLoadingIcon = () => wrapper.findComponent(GlLoadingIcon);
   const findAlert = () => wrapper.findComponent(GlAlert);
-  const findFeedbackLink = () => wrapper.findComponent(GlLink);
+  const findFeedbackLink = () => wrapper.findByTestId('feedback-link');
   const findCustomEmailForm = () => wrapper.findComponent(CustomEmailForm);
   const findCustomEmail = () => wrapper.findComponent(CustomEmail);
   const findCustomEmailConfirmModal = () => wrapper.findComponent(CustomEmailConfirmModal);