Merge branch '220482-use-global-vue-instance-in-approvals-spec' into 'master'

Use global Vue instance in frontend specs

See merge request gitlab-org/gitlab!59767

ee/spec/frontend/approvals/components/app_spec.js

 import { GlLoadingIcon } from '@gitlab/ui';
-import { shallowMount, createLocalVue } from '@vue/test-utils';
+import { shallowMount } from '@vue/test-utils';
+import Vue from 'vue';
 import Vuex from 'vuex';
 import App from 'ee/approvals/components/app.vue';
 import ModalRuleCreate from 'ee/approvals/components/modal_rule_create.vue';
@@ -10,8 +11,7 @@ import showToast from '~/vue_shared/plugins/global_toast';
 
 jest.mock('~/vue_shared/plugins/global_toast');
 
-const localVue = createLocalVue();
-localVue.use(Vuex);
+Vue.use(Vuex);
 
 const TEST_RULES_CLASS = 'js-fake-rules';
 const APP_PREFIX = 'lorem-ipsum';
@@ -23,8 +23,7 @@ describe('EE Approvals App', () => {
 
   const targetBranchName = 'development';
   const factory = () => {
-    wrapper = shallowMount(localVue.extend(App), {
-      localVue,
+    wrapper = shallowMount(App, {
       slots,
       store: new Vuex.Store(store),
     });

ee/spec/frontend/approvals/components/branches_select_spec.js

 import { GlDropdown, GlDropdownItem, GlSearchBoxByType } from '@gitlab/ui';
-import { createLocalVue, shallowMount, mount } from '@vue/test-utils';
-import { nextTick } from 'vue';
+import { shallowMount, mount } from '@vue/test-utils';
+import Vue from 'vue';
 import Vuex from 'vuex';
 import Api from 'ee/api';
 import BranchesSelect from 'ee/approvals/components/branches_select.vue';
@@ -15,9 +15,8 @@ const TEST_PROTECTED_BRANCHES = [
 const TEST_BRANCHES_SELECTIONS = [TEST_DEFAULT_BRANCH, ...TEST_PROTECTED_BRANCHES];
 const branchNames = () => TEST_BRANCHES_SELECTIONS.map((branch) => branch.name);
 const protectedBranchNames = () => TEST_PROTECTED_BRANCHES.map((branch) => branch.name);
-const localVue = createLocalVue();
 
-localVue.use(Vuex);
+Vue.use(Vuex);
 
 describe('Branches Select', () => {
   let wrapper;
@@ -33,7 +32,6 @@ describe('Branches Select', () => {
         projectId: '1',
         ...props,
       },
-      localVue,
       store: new Vuex.Store(store),
       attachTo: document.body,
     });
@@ -83,7 +81,7 @@ describe('Branches Select', () => {
 
   it('displays all the protected branches and any branch', async () => {
     createComponent();
-    await nextTick();
+    await Vue.nextTick();
     expect(findDropdown().props('loading')).toBe(true);
     await waitForPromises();
 
@@ -101,7 +99,7 @@ describe('Branches Select', () => {
       const term = 'lorem';
 
       findSearch().vm.$emit('input', term);
-      await nextTick();
+      await Vue.nextTick();
       expect(findSearch().props('isLoading')).toBe(true);
       await waitForPromises();
 

ee/spec/frontend/approvals/components/hidden_groups_item_spec.js

 import { GlIcon } from '@gitlab/ui';
-import { shallowMount, createLocalVue } from '@vue/test-utils';
+import { shallowMount } from '@vue/test-utils';
+import Vue from 'vue';
+import Vuex from 'vuex';
 import HiddenGroupsItem from 'ee/approvals/components/hidden_groups_item.vue';
 import { createMockDirective, getBinding } from 'helpers/vue_mock_directive';
 import { extendedWrapper } from 'helpers/vue_test_utils_helper';
 
-const localVue = createLocalVue();
+Vue.use(Vuex);
 
 describe('Approvals HiddenGroupsItem', () => {
   let wrapper;
 
   const factory = (options = {}) => {
     wrapper = extendedWrapper(
-      shallowMount(localVue.extend(HiddenGroupsItem), {
+      shallowMount(HiddenGroupsItem, {
         ...options,
-        localVue,
         directives: {
           GlTooltip: createMockDirective(),
         },

ee/spec/frontend/approvals/components/modal_rule_create_spec.js

-import { shallowMount, createLocalVue } from '@vue/test-utils';
+import { shallowMount } from '@vue/test-utils';
+import Vue from 'vue';
 import Vuex from 'vuex';
 import ModalRuleCreate from 'ee/approvals/components/modal_rule_create.vue';
 import RuleForm from 'ee/approvals/components/rule_form.vue';
@@ -9,8 +10,7 @@ const TEST_MODAL_ID = 'test-modal-create-id';
 const TEST_RULE = { id: 7 };
 const MODAL_MODULE = 'createModal';
 
-const localVue = createLocalVue();
-localVue.use(Vuex);
+Vue.use(Vuex);
 
 describe('Approvals ModalRuleCreate', () => {
   let createModalState;
@@ -36,9 +36,8 @@ describe('Approvals ModalRuleCreate', () => {
       ...options.propsData,
     };
 
-    wrapper = shallowMount(localVue.extend(ModalRuleCreate), {
+    wrapper = shallowMount(ModalRuleCreate, {
       ...options,
-      localVue,
       store,
       propsData,
       stubs: {

ee/spec/frontend/approvals/components/mr_edit/mr_rules_hidden_inputs_spec.js

-import { shallowMount, createLocalVue } from '@vue/test-utils';
+import { shallowMount } from '@vue/test-utils';
+import Vue from 'vue';
 import Vuex from 'vuex';
 import MRRulesHiddenInputs from 'ee/approvals/components/mr_edit/mr_rules_hidden_inputs.vue';
 import { createStoreOptions } from 'ee/approvals/stores';
 import MREditModule from 'ee/approvals/stores/modules/mr_edit';
 import { createMRRule } from '../../mocks';
 
-const localVue = createLocalVue();
-localVue.use(Vuex);
+Vue.use(Vuex);
 
 const {
   INPUT_ID,
@@ -28,8 +28,7 @@ describe('EE Approvlas MRRulesHiddenInputs', () => {
   let store;
 
   const factory = () => {
-    wrapper = shallowMount(localVue.extend(MRRulesHiddenInputs), {
-      localVue,
+    wrapper = shallowMount(MRRulesHiddenInputs, {
       store: new Vuex.Store(store),
     });
   };

ee/spec/frontend/approvals/components/mr_edit/mr_rules_spec.js

-import { mount, createLocalVue } from '@vue/test-utils';
+import { mount } from '@vue/test-utils';
+import Vue from 'vue';
 import Vuex from 'vuex';
 import MRRules from 'ee/approvals/components/mr_edit/mr_rules.vue';
 import RuleControls from 'ee/approvals/components/rule_controls.vue';
@@ -10,8 +11,7 @@ import { createEmptyRule, createMRRule, createMRRuleWithSource } from '../../moc
 
 const { HEADERS } = Rules;
 
-const localVue = createLocalVue();
-localVue.use(Vuex);
+Vue.use(Vuex);
 
 describe('EE Approvals MRRules', () => {
   let wrapper;
@@ -24,8 +24,7 @@ describe('EE Approvals MRRules', () => {
       store.modules.approvals.state.rules = approvalRules;
     }
 
-    wrapper = mount(localVue.extend(MRRules), {
-      localVue,
+    wrapper = mount(MRRules, {
       store: new Vuex.Store(store),
       attachTo: document.body,
     });

ee/spec/frontend/approvals/components/project_settings/project_rules_spec.js

-import { mount, createLocalVue } from '@vue/test-utils';
+import { mount } from '@vue/test-utils';
+import Vue from 'vue';
 import Vuex from 'vuex';
 import ApprovalGateIcon from 'ee/approvals/components/approval_gate_icon.vue';
 import RuleInput from 'ee/approvals/components/mr_edit/rule_input.vue';
@@ -13,8 +14,7 @@ import { createProjectRules, createExternalRule } from '../../mocks';
 
 const TEST_RULES = createProjectRules();
 
-const localVue = createLocalVue();
-localVue.use(Vuex);
+Vue.use(Vuex);
 
 const findCell = (tr, name) => tr.find(`td.js-${name}`);
 
@@ -37,7 +37,6 @@ describe('Approvals ProjectRules', () => {
     wrapper = mount(ProjectRules, {
       propsData: props,
       store: new Vuex.Store(store),
-      localVue,
       ...options,
     });
   };

ee/spec/frontend/approvals/components/rule_controls_spec.js

 import { GlButton } from '@gitlab/ui';
-import { createLocalVue, shallowMount } from '@vue/test-utils';
+import { shallowMount } from '@vue/test-utils';
+import Vue from 'vue';
 import Vuex from 'vuex';
 import RuleControls from 'ee/approvals/components/rule_controls.vue';
 import { createStoreOptions } from 'ee/approvals/stores';
 import MREditModule from 'ee/approvals/stores/modules/mr_edit';
 
-const localVue = createLocalVue();
-localVue.use(Vuex);
+Vue.use(Vuex);
 
 const TEST_RULE = { id: 10 };
 
@@ -19,11 +19,10 @@ describe('EE Approvals RuleControls', () => {
   let actions;
 
   const factory = () => {
-    wrapper = shallowMount(localVue.extend(RuleControls), {
+    wrapper = shallowMount(RuleControls, {
       propsData: {
         rule: TEST_RULE,
       },
-      localVue,
       store: new Vuex.Store(store),
     });
   };

ee/spec/frontend/approvals/components/rule_form_spec.js

-import { shallowMount, createLocalVue } from '@vue/test-utils';
-import { nextTick } from 'vue';
+import { shallowMount } from '@vue/test-utils';
+import Vue from 'vue';
 import Vuex from 'vuex';
 import ApproverTypeSelect from 'ee/approvals/components/approver_type_select.vue';
 import ApproversList from 'ee/approvals/components/approvers_list.vue';
@@ -58,8 +58,7 @@ const urlTakenError = {
   },
 };
 
-const localVue = createLocalVue();
-localVue.use(Vuex);
+Vue.use(Vuex);
 
 const addType = (type) => (x) => Object.assign(x, { type });
 
@@ -72,7 +71,6 @@ describe('EE Approvals RuleForm', () => {
     wrapper = shallowMount(RuleForm, {
       propsData: props,
       store: new Vuex.Store(store),
-      localVue,
       provide: {
         glFeatures: {
           ffComplianceApprovalGates: true,
@@ -174,8 +172,7 @@ describe('EE Approvals RuleForm', () => {
           wrapper.vm.branches = ['3'];
           wrapper.vm.submit();
 
-          localVue
-            .nextTick()
+          Vue.nextTick()
             .then(() => {
               expect(findBranchesValidation()).toEqual({
                 isValid: false,
@@ -280,7 +277,7 @@ describe('EE Approvals RuleForm', () => {
 
           wrapper.vm.submit();
 
-          await nextTick();
+          await Vue.nextTick();
 
           expect(findExternalUrlValidation()).toEqual({
             isValid: false,
@@ -354,8 +351,7 @@ describe('EE Approvals RuleForm', () => {
 
         wrapper.vm.submit();
 
-        localVue
-          .nextTick()
+        Vue.nextTick()
           .then(() => {
             expect(findNameValidation()).toEqual({
               isValid: false,
@@ -371,8 +367,7 @@ describe('EE Approvals RuleForm', () => {
 
         wrapper.vm.submit();
 
-        localVue
-          .nextTick()
+        Vue.nextTick()
           .then(() => {
             expect(findApprovalsRequiredValidation()).toEqual({
               isValid: false,
@@ -387,8 +382,7 @@ describe('EE Approvals RuleForm', () => {
         wrapper.vm.approvers = [];
         wrapper.vm.submit();
 
-        localVue
-          .nextTick()
+        Vue.nextTick()
           .then(() => {
             expect(findApproversValidation()).toEqual({
               isValid: false,
@@ -542,7 +536,7 @@ describe('EE Approvals RuleForm', () => {
       describe('with empty name and empty approvers', () => {
         beforeEach((done) => {
           wrapper.vm.submit();
-          localVue.nextTick(done);
+          Vue.nextTick(done);
         });
 
         it('does not post rule', () => {
@@ -565,7 +559,7 @@ describe('EE Approvals RuleForm', () => {
           wrapper.vm.name = 'Lorem';
           wrapper.vm.submit();
 
-          localVue.nextTick(done);
+          Vue.nextTick(done);
         });
 
         it('does not put fallback rule', () => {
@@ -582,7 +576,7 @@ describe('EE Approvals RuleForm', () => {
           wrapper.vm.approvers = TEST_APPROVERS;
           wrapper.vm.submit();
 
-          localVue.nextTick(done);
+          Vue.nextTick(done);
         });
 
         it('does not put fallback rule', () => {
@@ -600,7 +594,7 @@ describe('EE Approvals RuleForm', () => {
           wrapper.vm.name = 'Lorem';
           wrapper.vm.submit();
 
-          localVue.nextTick(done);
+          Vue.nextTick(done);
         });
 
         it('does not put fallback rule', () => {
@@ -795,7 +789,7 @@ describe('EE Approvals RuleForm', () => {
           wrapper.vm.approvers = TEST_APPROVERS;
           wrapper.vm.submit();
 
-          return localVue.nextTick();
+          return Vue.nextTick();
         });
 
         it('posts new rule', () => {
@@ -814,7 +808,7 @@ describe('EE Approvals RuleForm', () => {
         beforeEach(() => {
           wrapper.vm.submit();
 
-          return localVue.nextTick();
+          return Vue.nextTick();
         });
 
         it('puts fallback rule', () => {
@@ -845,7 +839,7 @@ describe('EE Approvals RuleForm', () => {
 
           wrapper.vm.submit();
 
-          return localVue.nextTick();
+          return Vue.nextTick();
         });
 
         it('deletes rule', () => {
@@ -865,7 +859,7 @@ describe('EE Approvals RuleForm', () => {
           wrapper.vm.approvers = TEST_APPROVERS;
           wrapper.vm.submit();
 
-          localVue.nextTick(done);
+          Vue.nextTick(done);
         });
 
         it('puts rule', () => {
@@ -896,7 +890,7 @@ describe('EE Approvals RuleForm', () => {
         },
       );
 
-      await nextTick();
+      await Vue.nextTick();
 
       expect(findApproverTypeSelect().exists()).toBe(false);
     });