Merge branch '499631-vue3-migration-form_custom_headers_spec' into 'master'

Fix Vue 3 failing test form_custom_headers_spec

See merge request https://gitlab.com/gitlab-org/gitlab/-/merge_requests/169514



Merged-by: Elwyn Benson <ebenson@gitlab.com>
Approved-by: Eduardo Bonet <ebonet@gitlab.com>
Approved-by: Elwyn Benson <ebenson@gitlab.com>
Co-authored-by: Artur Fedorov <afedorov@gitlab.com>

spec/frontend/webhooks/components/form_custom_headers_spec.js

@@ -3,8 +3,8 @@ import { nextTick } from 'vue';
 import { scrollToElement } from '~/lib/utils/common_utils';
 import FormCustomHeaders from '~/webhooks/components/form_custom_headers.vue';
 import FormCustomHeaderItem from '~/webhooks/components/form_custom_header_item.vue';
-
-import { mountExtended } from 'helpers/vue_test_utils_helper';
+import CrudComponent from '~/vue_shared/components/crud_component.vue';
+import { shallowMountExtended } from 'helpers/vue_test_utils_helper';
 import { setHTMLFixture, resetHTMLFixture } from 'helpers/fixtures';
 
 jest.mock('~/lib/utils/common_utils');
@@ -24,8 +24,11 @@ describe('FormCustomHeaders', () => {
   });
 
   const createComponent = ({ props } = {}) => {
-    wrapper = mountExtended(FormCustomHeaders, {
+    wrapper = shallowMountExtended(FormCustomHeaders, {
       propsData: props,
+      stubs: {
+        CrudComponent,
+      },
     });
   };
 
@@ -49,7 +52,7 @@ describe('FormCustomHeaders', () => {
 
         expect(findAllCustomHeaderItems()).toHaveLength(3);
 
-        const lastItem = findAllCustomHeaderItems().at(-1);
+        const lastItem = findAllCustomHeaderItems().at(2);
         expect(lastItem.props()).toMatchObject({
           headerKey: '',
           headerValue: '',