Reduce verbose component creation in tests

This change reduces repetition in tests by using a simpler way to
create extended wrappers for tests.

It also reduces the unnecessary use of localVue.

ee/spec/frontend/runner/components/runner_update_cost_factor_fields_spec.js

-import { mount } from '@vue/test-utils';
+import { mountExtended } from 'helpers/vue_test_utils_helper';
 import RunnerUpdateCostFactorFields from 'ee/runner/components/runner_update_cost_factor_fields.vue';
-import { extendedWrapper } from 'helpers/vue_test_utils_helper';
 import { runnerData } from 'jest/runner/mock_data';
 
 const mockRunner = runnerData.data.runner;
@@ -20,13 +19,11 @@ describe('RunnerUpdateCostFactorFields', () => {
   };
 
   const createComponent = () => {
-    wrapper = extendedWrapper(
-      mount(RunnerUpdateCostFactorFields, {
-        propsData: {
-          value: mockRunner,
-        },
-      }),
-    );
+    wrapper = mountExtended(RunnerUpdateCostFactorFields, {
+      propsData: {
+        value: mockRunner,
+      },
+    });
   };
 
   describe('when on dot_com', () => {

ee/spec/frontend/runner/components/runner_update_form_spec.js

+import Vue from 'vue';
 import { GlForm } from '@gitlab/ui';
-import { createLocalVue, mount } from '@vue/test-utils';
 import VueApollo from 'vue-apollo';
 import createMockApollo from 'helpers/mock_apollo_helper';
-import { extendedWrapper } from 'helpers/vue_test_utils_helper';
+import { mountExtended } from 'helpers/vue_test_utils_helper';
 import waitForPromises from 'helpers/wait_for_promises';
 import { runnerData } from 'jest/runner/mock_data';
 import { createAlert, VARIANT_SUCCESS } from '~/flash';
@@ -13,8 +13,7 @@ jest.mock('~/flash');
 
 const mockRunner = runnerData.data.runner;
 
-const localVue = createLocalVue();
-localVue.use(VueApollo);
+Vue.use(VueApollo);
 
 describe('RunnerUpdateForm', () => {
   let wrapper;
@@ -35,16 +34,13 @@ describe('RunnerUpdateForm', () => {
   const submitFormAndWait = () => submitForm().then(waitForPromises);
 
   const createComponent = ({ props } = {}) => {
-    wrapper = extendedWrapper(
-      mount(RunnerUpdateForm, {
-        localVue,
-        propsData: {
-          runner: mockRunner,
-          ...props,
-        },
-        apolloProvider: createMockApollo([[runnerUpdateMutation, runnerUpdateHandler]]),
-      }),
-    );
+    wrapper = mountExtended(RunnerUpdateForm, {
+      propsData: {
+        runner: mockRunner,
+        ...props,
+      },
+      apolloProvider: createMockApollo([[runnerUpdateMutation, runnerUpdateHandler]]),
+    });
   };
 
   const expectToHaveSubmittedRunnerContaining = (submittedRunner) => {

spec/frontend/runner/admin_runners/admin_runners_app_spec.js

+import Vue from 'vue';
 import { GlLink } from '@gitlab/ui';
-import { createLocalVue, mount, shallowMount } from '@vue/test-utils';
 import VueApollo from 'vue-apollo';
 import createMockApollo from 'helpers/mock_apollo_helper';
 import setWindowLocation from 'helpers/set_window_location_helper';
-import { extendedWrapper } from 'helpers/vue_test_utils_helper';
+import {
+  extendedWrapper,
+  shallowMountExtended,
+  mountExtended,
+} from 'helpers/vue_test_utils_helper';
 import waitForPromises from 'helpers/wait_for_promises';
 import { createAlert } from '~/flash';
 import { getIdFromGraphQLId } from '~/graphql_shared/utils';
@@ -46,8 +50,7 @@ jest.mock('~/lib/utils/url_utility', () => ({
   updateHistory: jest.fn(),
 }));
 
-const localVue = createLocalVue();
-localVue.use(VueApollo);
+Vue.use(VueApollo);
 
 describe('AdminRunnersApp', () => {
   let wrapper;
@@ -65,22 +68,19 @@ describe('AdminRunnersApp', () => {
   const findRunnerFilteredSearchBar = () => wrapper.findComponent(RunnerFilteredSearchBar);
   const findFilteredSearch = () => wrapper.findComponent(FilteredSearch);
 
-  const createComponent = ({ props = {}, mountFn = shallowMount } = {}) => {
+  const createComponent = ({ props = {}, mountFn = shallowMountExtended } = {}) => {
     const handlers = [
       [getRunnersQuery, mockRunnersQuery],
       [getRunnersCountQuery, mockRunnersCountQuery],
     ];
 
-    wrapper = extendedWrapper(
-      mountFn(AdminRunnersApp, {
-        localVue,
-        apolloProvider: createMockApollo(handlers),
-        propsData: {
-          registrationToken: mockRegistrationToken,
-          ...props,
-        },
-      }),
-    );
+    wrapper = mountFn(AdminRunnersApp, {
+      apolloProvider: createMockApollo(handlers),
+      propsData: {
+        registrationToken: mockRegistrationToken,
+        ...props,
+      },
+    });
   };
 
   beforeEach(async () => {
@@ -98,7 +98,7 @@ describe('AdminRunnersApp', () => {
   });
 
   it('shows total runner counts', async () => {
-    createComponent({ mountFn: mount });
+    createComponent({ mountFn: mountExtended });
 
     await waitForPromises();
 
@@ -129,7 +129,7 @@ describe('AdminRunnersApp', () => {
       return Promise.resolve({ data: { runners: { count } } });
     });
 
-    createComponent({ mountFn: mount });
+    createComponent({ mountFn: mountExtended });
     await waitForPromises();
 
     expect(findRunnerTypeTabs().text()).toMatchInterpolatedText(
@@ -157,7 +157,7 @@ describe('AdminRunnersApp', () => {
       return Promise.resolve({ data: { runners: { count } } });
     });
 
-    createComponent({ mountFn: mount });
+    createComponent({ mountFn: mountExtended });
     await waitForPromises();
 
     expect(findRunnerTypeTabs().text()).toMatchInterpolatedText(
@@ -175,7 +175,7 @@ describe('AdminRunnersApp', () => {
   });
 
   it('runner item links to the runner admin page', async () => {
-    createComponent({ mountFn: mount });
+    createComponent({ mountFn: mountExtended });
 
     await waitForPromises();
 
@@ -198,7 +198,7 @@ describe('AdminRunnersApp', () => {
   });
 
   it('sets tokens in the filtered search', () => {
-    createComponent({ mountFn: mount });
+    createComponent({ mountFn: mountExtended });
 
     expect(findFilteredSearch().props('tokens')).toEqual([
       expect.objectContaining({
@@ -310,7 +310,7 @@ describe('AdminRunnersApp', () => {
     beforeEach(() => {
       mockRunnersQuery = jest.fn().mockResolvedValue(runnersDataPaginated);
 
-      createComponent({ mountFn: mount });
+      createComponent({ mountFn: mountExtended });
     });
 
     it('more pages can be selected', () => {

spec/frontend/runner/components/cells/runner_actions_cell_spec.js

-import { createLocalVue, shallowMount } from '@vue/test-utils';
+import Vue from 'vue';
 import VueApollo from 'vue-apollo';
 import createMockApollo from 'helpers/mock_apollo_helper';
-import { extendedWrapper } from 'helpers/vue_test_utils_helper';
+import { shallowMountExtended } from 'helpers/vue_test_utils_helper';
 import waitForPromises from 'helpers/wait_for_promises';
 import { createMockDirective, getBinding } from 'helpers/vue_mock_directive';
 import { createAlert } from '~/flash';
@@ -21,8 +21,7 @@ const mockRunner = runnersData.data.runners.nodes[0];
 const getRunnersQueryName = getRunnersQuery.definitions[0].name.value;
 const getGroupRunnersQueryName = getGroupRunnersQuery.definitions[0].name.value;
 
-const localVue = createLocalVue();
-localVue.use(VueApollo);
+Vue.use(VueApollo);
 
 jest.mock('~/flash');
 jest.mock('~/runner/sentry_utils');
@@ -41,35 +40,32 @@ describe('RunnerTypeCell', () => {
   const getTooltip = (w) => getBinding(w.element, 'gl-tooltip')?.value;
 
   const createComponent = (runner = {}, options) => {
-    wrapper = extendedWrapper(
-      shallowMount(RunnerActionCell, {
-        propsData: {
-          runner: {
-            id: mockRunner.id,
-            shortSha: mockRunner.shortSha,
-            editAdminUrl: mockRunner.editAdminUrl,
-            userPermissions: mockRunner.userPermissions,
-            active: mockRunner.active,
-            ...runner,
-          },
+    wrapper = shallowMountExtended(RunnerActionCell, {
+      propsData: {
+        runner: {
+          id: mockRunner.id,
+          shortSha: mockRunner.shortSha,
+          editAdminUrl: mockRunner.editAdminUrl,
+          userPermissions: mockRunner.userPermissions,
+          active: mockRunner.active,
+          ...runner,
         },
-        localVue,
-        apolloProvider: createMockApollo([
-          [runnerDeleteMutation, runnerDeleteMutationHandler],
-          [runnerActionsUpdateMutation, runnerActionsUpdateMutationHandler],
-        ]),
-        directives: {
-          GlTooltip: createMockDirective(),
-          GlModal: createMockDirective(),
-        },
-        mocks: {
-          $toast: {
-            show: mockToastShow,
-          },
+      },
+      apolloProvider: createMockApollo([
+        [runnerDeleteMutation, runnerDeleteMutationHandler],
+        [runnerActionsUpdateMutation, runnerActionsUpdateMutationHandler],
+      ]),
+      directives: {
+        GlTooltip: createMockDirective(),
+        GlModal: createMockDirective(),
+      },
+      mocks: {
+        $toast: {
+          show: mockToastShow,
         },
-        ...options,
-      }),
-    );
+      },
+      ...options,
+    });
   };
 
   beforeEach(() => {

spec/frontend/runner/components/registration/registration_dropdown_spec.js

 import { GlDropdown, GlDropdownItem, GlDropdownForm } from '@gitlab/ui';
-import { createLocalVue, mount, shallowMount, createWrapper } from '@vue/test-utils';
+import { createLocalVue, createWrapper } from '@vue/test-utils';
 import { nextTick } from 'vue';
 import VueApollo from 'vue-apollo';
-import { extendedWrapper } from 'helpers/vue_test_utils_helper';
+import { shallowMountExtended, mountExtended } from 'helpers/vue_test_utils_helper';
 import createMockApollo from 'helpers/mock_apollo_helper';
 
 import RegistrationDropdown from '~/runner/components/registration/registration_dropdown.vue';
@@ -33,17 +33,15 @@ describe('RegistrationDropdown', () => {
 
   const findToggleMaskButton = () => wrapper.findByTestId('toggle-masked');
 
-  const createComponent = ({ props = {}, ...options } = {}, mountFn = shallowMount) => {
-    wrapper = extendedWrapper(
-      mountFn(RegistrationDropdown, {
-        propsData: {
-          registrationToken: mockToken,
-          type: INSTANCE_TYPE,
-          ...props,
-        },
-        ...options,
-      }),
-    );
+  const createComponent = ({ props = {}, ...options } = {}, mountFn = shallowMountExtended) => {
+    wrapper = mountFn(RegistrationDropdown, {
+      propsData: {
+        registrationToken: mockToken,
+        type: INSTANCE_TYPE,
+        ...props,
+      },
+      ...options,
+    });
   };
 
   it.each`
@@ -52,7 +50,7 @@ describe('RegistrationDropdown', () => {
     ${GROUP_TYPE}    | ${'Register a group runner'}
     ${PROJECT_TYPE}  | ${'Register a project runner'}
   `('Dropdown text for type $type is "$text"', () => {
-    createComponent({ props: { type: INSTANCE_TYPE } }, mount);
+    createComponent({ props: { type: INSTANCE_TYPE } }, mountExtended);
 
     expect(wrapper.text()).toContain('Register an instance runner');
   });
@@ -93,7 +91,7 @@ describe('RegistrationDropdown', () => {
             // Use `attachTo` to find the modal
             attachTo: document.body,
           },
-          mount,
+          mountExtended,
         );
 
         findRegistrationInstructionsDropdownItem().trigger('click');
@@ -131,7 +129,7 @@ describe('RegistrationDropdown', () => {
     });
 
     it('Displays masked value by default', () => {
-      createComponent({}, mount);
+      createComponent({}, mountExtended);
 
       expect(findTokenDropdownItem().text()).toMatchInterpolatedText(
         `Registration token ${maskToken}`,
@@ -154,7 +152,7 @@ describe('RegistrationDropdown', () => {
   });
 
   it('Updates the token when it gets reset', async () => {
-    createComponent({}, mount);
+    createComponent({}, mountExtended);
 
     const newToken = 'mock1';
 

spec/frontend/runner/components/registration/registration_token_reset_dropdown_item_spec.js

+import Vue, { nextTick } from 'vue';
 import { GlDropdownItem, GlLoadingIcon, GlToast, GlModal } from '@gitlab/ui';
-import { createLocalVue, shallowMount } from '@vue/test-utils';
-import { nextTick } from 'vue';
 import VueApollo from 'vue-apollo';
+import { shallowMountExtended } from 'helpers/vue_test_utils_helper';
 import createMockApollo from 'helpers/mock_apollo_helper';
 import waitForPromises from 'helpers/wait_for_promises';
 import { createAlert } from '~/flash';
@@ -14,9 +14,8 @@ import { createMockDirective, getBinding } from 'helpers/vue_mock_directive';
 jest.mock('~/flash');
 jest.mock('~/runner/sentry_utils');
 
-const localVue = createLocalVue();
-localVue.use(VueApollo);
-localVue.use(GlToast);
+Vue.use(VueApollo);
+Vue.use(GlToast);
 
 const mockNewToken = 'NEW_TOKEN';
 const modalID = 'token-reset-modal';
@@ -33,8 +32,7 @@ describe('RegistrationTokenResetDropdownItem', () => {
   const clickSubmit = () => findModal().vm.$emit('primary', mockEvent);
 
   const createComponent = ({ props, provide = {} } = {}) => {
-    wrapper = shallowMount(RegistrationTokenResetDropdownItem, {
-      localVue,
+    wrapper = shallowMountExtended(RegistrationTokenResetDropdownItem, {
       provide,
       propsData: {
         type: INSTANCE_TYPE,

spec/frontend/runner/components/registration/registration_token_spec.js

 import { nextTick } from 'vue';
 import { GlToast } from '@gitlab/ui';
-import { createLocalVue, shallowMount } from '@vue/test-utils';
-import { extendedWrapper } from 'helpers/vue_test_utils_helper';
+import { createLocalVue } from '@vue/test-utils';
+import { shallowMountExtended } from 'helpers/vue_test_utils_helper';
 import RegistrationToken from '~/runner/components/registration/registration_token.vue';
 import ModalCopyButton from '~/vue_shared/components/modal_copy_button.vue';
 
@@ -25,15 +25,13 @@ describe('RegistrationToken', () => {
   const createComponent = ({ props = {}, withGlToast = true } = {}) => {
     const localVue = withGlToast ? vueWithGlToast() : undefined;
 
-    wrapper = extendedWrapper(
-      shallowMount(RegistrationToken, {
-        propsData: {
-          value: mockToken,
-          ...props,
-        },
-        localVue,
-      }),
-    );
+    wrapper = shallowMountExtended(RegistrationToken, {
+      propsData: {
+        value: mockToken,
+        ...props,
+      },
+      localVue,
+    });
 
     showToast = wrapper.vm.$toast ? jest.spyOn(wrapper.vm.$toast, 'show') : null;
   };

spec/frontend/runner/components/runner_filtered_search_bar_spec.js

 import { GlFilteredSearch, GlDropdown, GlDropdownItem } from '@gitlab/ui';
-import { shallowMount } from '@vue/test-utils';
-import { extendedWrapper } from 'helpers/vue_test_utils_helper';
+import { shallowMountExtended } from 'helpers/vue_test_utils_helper';
 import RunnerFilteredSearchBar from '~/runner/components/runner_filtered_search_bar.vue';
 import { statusTokenConfig } from '~/runner/components/search_tokens/status_token_config';
 import TagToken from '~/runner/components/search_tokens/tag_token.vue';
@@ -29,27 +28,25 @@ describe('RunnerList', () => {
   };
 
   const createComponent = ({ props = {}, options = {} } = {}) => {
-    wrapper = extendedWrapper(
-      shallowMount(RunnerFilteredSearchBar, {
-        propsData: {
-          namespace: 'runners',
-          tokens: [],
-          value: {
-            runnerType: null,
-            filters: [],
-            sort: mockDefaultSort,
-          },
-          ...props,
+    wrapper = shallowMountExtended(RunnerFilteredSearchBar, {
+      propsData: {
+        namespace: 'runners',
+        tokens: [],
+        value: {
+          runnerType: null,
+          filters: [],
+          sort: mockDefaultSort,
         },
-        stubs: {
-          FilteredSearch,
-          GlFilteredSearch,
-          GlDropdown,
-          GlDropdownItem,
-        },
-        ...options,
-      }),
-    );
+        ...props,
+      },
+      stubs: {
+        FilteredSearch,
+        GlFilteredSearch,
+        GlDropdown,
+        GlDropdownItem,
+      },
+      ...options,
+    });
   };
 
   beforeEach(() => {

spec/frontend/runner/components/runner_list_spec.js

 import { GlTable, GlSkeletonLoader } from '@gitlab/ui';
-import { mount, shallowMount } from '@vue/test-utils';
-import { extendedWrapper } from 'helpers/vue_test_utils_helper';
+import {
+  extendedWrapper,
+  shallowMountExtended,
+  mountExtended,
+} from 'helpers/vue_test_utils_helper';
 import { getIdFromGraphQLId } from '~/graphql_shared/utils';
 import RunnerList from '~/runner/components/runner_list.vue';
 import { runnersData } from '../mock_data';
@@ -18,20 +21,18 @@ describe('RunnerList', () => {
   const findCell = ({ row = 0, fieldKey }) =>
     extendedWrapper(findRows().at(row).find(`[data-testid="td-${fieldKey}"]`));
 
-  const createComponent = ({ props = {} } = {}, mountFn = shallowMount) => {
-    wrapper = extendedWrapper(
-      mountFn(RunnerList, {
-        propsData: {
-          runners: mockRunners,
-          activeRunnersCount: mockActiveRunnersCount,
-          ...props,
-        },
-      }),
-    );
+  const createComponent = ({ props = {} } = {}, mountFn = shallowMountExtended) => {
+    wrapper = mountFn(RunnerList, {
+      propsData: {
+        runners: mockRunners,
+        activeRunnersCount: mockActiveRunnersCount,
+        ...props,
+      },
+    });
   };
 
   beforeEach(() => {
-    createComponent({}, mount);
+    createComponent({}, mountExtended);
   });
 
   afterEach(() => {
@@ -54,7 +55,7 @@ describe('RunnerList', () => {
   });
 
   it('Sets runner id as a row key', () => {
-    createComponent({}, shallowMount);
+    createComponent({});
 
     expect(findTable().attributes('primary-key')).toBe('id');
   });
@@ -107,7 +108,7 @@ describe('RunnerList', () => {
     it('Formats job counts', () => {
       mockRunnersCopy[0].jobCount = 1;
 
-      createComponent({ props: { runners: mockRunnersCopy } }, mount);
+      createComponent({ props: { runners: mockRunnersCopy } }, mountExtended);
 
       expect(findCell({ fieldKey: 'jobCount' }).text()).toBe('1');
     });
@@ -115,7 +116,7 @@ describe('RunnerList', () => {
     it('Formats large job counts', () => {
       mockRunnersCopy[0].jobCount = 1000;
 
-      createComponent({ props: { runners: mockRunnersCopy } }, mount);
+      createComponent({ props: { runners: mockRunnersCopy } }, mountExtended);
 
       expect(findCell({ fieldKey: 'jobCount' }).text()).toBe('1,000');
     });
@@ -123,7 +124,7 @@ describe('RunnerList', () => {
     it('Formats large job counts with a plus symbol', () => {
       mockRunnersCopy[0].jobCount = 1001;
 
-      createComponent({ props: { runners: mockRunnersCopy } }, mount);
+      createComponent({ props: { runners: mockRunnersCopy } }, mountExtended);
 
       expect(findCell({ fieldKey: 'jobCount' }).text()).toBe('1,000+');
     });
@@ -143,13 +144,13 @@ describe('RunnerList', () => {
     });
 
     it('when there are no runners, shows an skeleton loader', () => {
-      createComponent({ props: { runners: [], loading: true } }, mount);
+      createComponent({ props: { runners: [], loading: true } }, mountExtended);
 
       expect(findSkeletonLoader().exists()).toBe(true);
     });
 
     it('when there are runners, shows a busy indicator skeleton loader', () => {
-      createComponent({ props: { loading: true } }, mount);
+      createComponent({ props: { loading: true } }, mountExtended);
 
       expect(findSkeletonLoader().exists()).toBe(false);
     });

spec/frontend/runner/components/runner_update_form_spec.js

+import Vue, { nextTick } from 'vue';
 import { GlForm } from '@gitlab/ui';
-import { createLocalVue, mount } from '@vue/test-utils';
-import { nextTick } from 'vue';
 import VueApollo from 'vue-apollo';
 import createMockApollo from 'helpers/mock_apollo_helper';
-import { extendedWrapper } from 'helpers/vue_test_utils_helper';
+import { mountExtended } from 'helpers/vue_test_utils_helper';
 import waitForPromises from 'helpers/wait_for_promises';
 import { createAlert, VARIANT_SUCCESS } from '~/flash';
 import RunnerUpdateForm from '~/runner/components/runner_update_form.vue';
@@ -23,8 +22,7 @@ jest.mock('~/runner/sentry_utils');
 
 const mockRunner = runnerData.data.runner;
 
-const localVue = createLocalVue();
-localVue.use(VueApollo);
+Vue.use(VueApollo);
 
 describe('RunnerUpdateForm', () => {
   let wrapper;
@@ -61,16 +59,13 @@ describe('RunnerUpdateForm', () => {
   });
 
   const createComponent = ({ props } = {}) => {
-    wrapper = extendedWrapper(
-      mount(RunnerUpdateForm, {
-        localVue,
-        propsData: {
-          runner: mockRunner,
-          ...props,
-        },
-        apolloProvider: createMockApollo([[runnerUpdateMutation, runnerUpdateHandler]]),
-      }),
-    );
+    wrapper = mountExtended(RunnerUpdateForm, {
+      propsData: {
+        runner: mockRunner,
+        ...props,
+      },
+      apolloProvider: createMockApollo([[runnerUpdateMutation, runnerUpdateHandler]]),
+    });
   };
 
   const expectToHaveSubmittedRunnerContaining = (submittedRunner) => {

spec/frontend/runner/group_runners/group_runners_app_spec.js

-import { nextTick } from 'vue';
+import Vue, { nextTick } from 'vue';
 import { GlLink } from '@gitlab/ui';
-import { createLocalVue, shallowMount, mount } from '@vue/test-utils';
+import { shallowMount, mount } from '@vue/test-utils';
 import VueApollo from 'vue-apollo';
 import createMockApollo from 'helpers/mock_apollo_helper';
 import setWindowLocation from 'helpers/set_window_location_helper';
@@ -33,8 +33,7 @@ import { captureException } from '~/runner/sentry_utils';
 import FilteredSearch from '~/vue_shared/components/filtered_search_bar/filtered_search_bar_root.vue';
 import { groupRunnersData, groupRunnersDataPaginated, groupRunnersCountData } from '../mock_data';
 
-const localVue = createLocalVue();
-localVue.use(VueApollo);
+Vue.use(VueApollo);
 
 const mockGroupFullPath = 'group1';
 const mockRegistrationToken = 'AABBCC';
@@ -69,7 +68,6 @@ describe('GroupRunnersApp', () => {
     ];
 
     wrapper = mountFn(GroupRunnersApp, {
-      localVue,
       apolloProvider: createMockApollo(handlers),
       propsData: {
         registrationToken: mockRegistrationToken,