diff options
Diffstat (limited to 'spec/frontend/create_cluster')
10 files changed, 160 insertions, 210 deletions
diff --git a/spec/frontend/create_cluster/components/cluster_form_dropdown_spec.js b/spec/frontend/create_cluster/components/cluster_form_dropdown_spec.js index 4e92fa1df16..2f835867f5f 100644 --- a/spec/frontend/create_cluster/components/cluster_form_dropdown_spec.js +++ b/spec/frontend/create_cluster/components/cluster_form_dropdown_spec.js @@ -2,6 +2,7 @@ import { GlIcon } from '@gitlab/ui'; import { shallowMount } from '@vue/test-utils'; import $ from 'jquery'; +import { nextTick } from 'vue'; import ClusterFormDropdown from '~/create_cluster/components/cluster_form_dropdown.vue'; import DropdownButton from '~/vue_shared/components/dropdown/dropdown_button.vue'; import DropdownSearchInput from '~/vue_shared/components/dropdown/dropdown_search_input.vue'; @@ -18,35 +19,31 @@ describe('ClusterFormDropdown', () => { afterEach(() => wrapper.destroy()); describe('when initial value is provided', () => { - it('sets selectedItem to initial value', () => { + it('sets selectedItem to initial value', async () => { wrapper.setProps({ items, value: secondItem.value }); - return wrapper.vm.$nextTick().then(() => { - expect(wrapper.find(DropdownButton).props('toggleText')).toEqual(secondItem.name); - }); + await nextTick(); + expect(wrapper.find(DropdownButton).props('toggleText')).toEqual(secondItem.name); }); }); describe('when no item is selected', () => { - it('displays placeholder text', () => { + it('displays placeholder text', async () => { const placeholder = 'placeholder'; wrapper.setProps({ placeholder }); - return wrapper.vm.$nextTick().then(() => { - expect(wrapper.find(DropdownButton).props('toggleText')).toEqual(placeholder); - }); + await nextTick(); + expect(wrapper.find(DropdownButton).props('toggleText')).toEqual(placeholder); }); }); describe('when an item is selected', () => { - beforeEach(() => { + beforeEach(async () => { wrapper.setProps({ items }); - - return wrapper.vm.$nextTick().then(() => { - wrapper.findAll('.js-dropdown-item').at(1).trigger('click'); - return wrapper.vm.$nextTick(); - }); + await nextTick(); + wrapper.findAll('.js-dropdown-item').at(1).trigger('click'); + await nextTick(); }); it('emits input event with selected item', () => { @@ -57,18 +54,16 @@ describe('ClusterFormDropdown', () => { describe('when multiple items are selected', () => { const value = ['1']; - beforeEach(() => { + beforeEach(async () => { wrapper.setProps({ items, multiple: true, value }); - return wrapper.vm - .$nextTick() - .then(() => { - wrapper.findAll('.js-dropdown-item').at(0).trigger('click'); - return wrapper.vm.$nextTick(); - }) - .then(() => { - wrapper.findAll('.js-dropdown-item').at(1).trigger('click'); - return wrapper.vm.$nextTick(); - }); + + await nextTick(); + wrapper.findAll('.js-dropdown-item').at(0).trigger('click'); + + await nextTick(); + wrapper.findAll('.js-dropdown-item').at(1).trigger('click'); + + await nextTick(); }); it('emits input event with an array of selected items', () => { @@ -77,9 +72,9 @@ describe('ClusterFormDropdown', () => { }); describe('when multiple items can be selected', () => { - beforeEach(() => { + beforeEach(async () => { wrapper.setProps({ items, multiple: true, value: firstItem.value }); - return wrapper.vm.$nextTick(); + await nextTick(); }); it('displays a checked GlIcon next to the item', () => { @@ -89,19 +84,18 @@ describe('ClusterFormDropdown', () => { }); describe('when multiple values can be selected and initial value is null', () => { - it('emits input event with an array of a single selected item', () => { + it('emits input event with an array of a single selected item', async () => { wrapper.setProps({ items, multiple: true, value: null }); - return wrapper.vm.$nextTick().then(() => { - wrapper.findAll('.js-dropdown-item').at(0).trigger('click'); + await nextTick(); + wrapper.findAll('.js-dropdown-item').at(0).trigger('click'); - expect(wrapper.emitted('input')[0]).toEqual([[firstItem.value]]); - }); + expect(wrapper.emitted('input')[0]).toEqual([[firstItem.value]]); }); }); describe('when an item is selected and has a custom label property', () => { - it('displays selected item custom label', () => { + it('displays selected item custom label', async () => { const labelProperty = 'customLabel'; const label = 'Name'; const currentValue = '1'; @@ -109,9 +103,8 @@ describe('ClusterFormDropdown', () => { wrapper.setProps({ labelProperty, items: customLabelItems, value: currentValue }); - return wrapper.vm.$nextTick().then(() => { - expect(wrapper.find(DropdownButton).props('toggleText')).toEqual(label); - }); + await nextTick(); + expect(wrapper.find(DropdownButton).props('toggleText')).toEqual(label); }); }); @@ -123,86 +116,79 @@ describe('ClusterFormDropdown', () => { }); describe('when loading and loadingText is provided', () => { - it('uses loading text as toggle button text', () => { + it('uses loading text as toggle button text', async () => { const loadingText = 'loading text'; wrapper.setProps({ loading: true, loadingText }); - return wrapper.vm.$nextTick().then(() => { - expect(wrapper.find(DropdownButton).props('toggleText')).toEqual(loadingText); - }); + await nextTick(); + expect(wrapper.find(DropdownButton).props('toggleText')).toEqual(loadingText); }); }); describe('when disabled', () => { - it('dropdown button isDisabled', () => { + it('dropdown button isDisabled', async () => { wrapper.setProps({ disabled: true }); - return wrapper.vm.$nextTick().then(() => { - expect(wrapper.find(DropdownButton).props('isDisabled')).toBe(true); - }); + await nextTick(); + expect(wrapper.find(DropdownButton).props('isDisabled')).toBe(true); }); }); describe('when disabled and disabledText is provided', () => { - it('uses disabled text as toggle button text', () => { + it('uses disabled text as toggle button text', async () => { const disabledText = 'disabled text'; wrapper.setProps({ disabled: true, disabledText }); - return wrapper.vm.$nextTick().then(() => { - expect(wrapper.find(DropdownButton).props('toggleText')).toBe(disabledText); - }); + await nextTick(); + expect(wrapper.find(DropdownButton).props('toggleText')).toBe(disabledText); }); }); describe('when has errors', () => { - it('sets border-danger class selector to dropdown toggle', () => { + it('sets border-danger class selector to dropdown toggle', async () => { wrapper.setProps({ hasErrors: true }); - return wrapper.vm.$nextTick().then(() => { - expect(wrapper.find(DropdownButton).classes('border-danger')).toBe(true); - }); + await nextTick(); + expect(wrapper.find(DropdownButton).classes('border-danger')).toBe(true); }); }); describe('when has errors and an error message', () => { - it('displays error message', () => { + it('displays error message', async () => { const errorMessage = 'error message'; wrapper.setProps({ hasErrors: true, errorMessage }); - return wrapper.vm.$nextTick().then(() => { - expect(wrapper.find('.js-eks-dropdown-error-message').text()).toEqual(errorMessage); - }); + await nextTick(); + expect(wrapper.find('.js-eks-dropdown-error-message').text()).toEqual(errorMessage); }); }); describe('when no results are available', () => { - it('displays empty text', () => { + it('displays empty text', async () => { const emptyText = 'error message'; wrapper.setProps({ items: [], emptyText }); - return wrapper.vm.$nextTick().then(() => { - expect(wrapper.find('.js-empty-text').text()).toEqual(emptyText); - }); + await nextTick(); + expect(wrapper.find('.js-empty-text').text()).toEqual(emptyText); }); }); - it('displays search field placeholder', () => { + it('displays search field placeholder', async () => { const searchFieldPlaceholder = 'Placeholder'; wrapper.setProps({ searchFieldPlaceholder }); - return wrapper.vm.$nextTick().then(() => { - expect(wrapper.find(DropdownSearchInput).props('placeholderText')).toEqual( - searchFieldPlaceholder, - ); - }); + await nextTick(); + expect(wrapper.find(DropdownSearchInput).props('placeholderText')).toEqual( + searchFieldPlaceholder, + ); }); - it('it filters results by search query', () => { + it('it filters results by search query', async () => { const searchQuery = secondItem.name; wrapper.setProps({ items }); @@ -210,21 +196,19 @@ describe('ClusterFormDropdown', () => { // eslint-disable-next-line no-restricted-syntax wrapper.setData({ searchQuery }); - return wrapper.vm.$nextTick().then(() => { - expect(wrapper.findAll('.js-dropdown-item').length).toEqual(1); - expect(wrapper.find('.js-dropdown-item').text()).toEqual(secondItem.name); - }); + await nextTick(); + expect(wrapper.findAll('.js-dropdown-item').length).toEqual(1); + expect(wrapper.find('.js-dropdown-item').text()).toEqual(secondItem.name); }); - it('focuses dropdown search input when dropdown is displayed', () => { + it('focuses dropdown search input when dropdown is displayed', async () => { const dropdownEl = wrapper.find('.dropdown').element; expect(wrapper.find(DropdownSearchInput).props('focused')).toBe(false); $(dropdownEl).trigger('shown.bs.dropdown'); - return wrapper.vm.$nextTick(() => { - expect(wrapper.find(DropdownSearchInput).props('focused')).toBe(true); - }); + await nextTick(); + expect(wrapper.find(DropdownSearchInput).props('focused')).toBe(true); }); }); diff --git a/spec/frontend/create_cluster/eks_cluster/components/create_eks_cluster_spec.js b/spec/frontend/create_cluster/eks_cluster/components/create_eks_cluster_spec.js index 95810e882a1..c8020cf8308 100644 --- a/spec/frontend/create_cluster/eks_cluster/components/create_eks_cluster_spec.js +++ b/spec/frontend/create_cluster/eks_cluster/components/create_eks_cluster_spec.js @@ -1,12 +1,12 @@ -import { shallowMount, createLocalVue } from '@vue/test-utils'; +import { shallowMount } from '@vue/test-utils'; +import Vue from 'vue'; import Vuex from 'vuex'; import CreateEksCluster from '~/create_cluster/eks_cluster/components/create_eks_cluster.vue'; import EksClusterConfigurationForm from '~/create_cluster/eks_cluster/components/eks_cluster_configuration_form.vue'; import ServiceCredentialsForm from '~/create_cluster/eks_cluster/components/service_credentials_form.vue'; -const localVue = createLocalVue(); -localVue.use(Vuex); +Vue.use(Vuex); describe('CreateEksCluster', () => { let vm; @@ -33,7 +33,6 @@ describe('CreateEksCluster', () => { externalLinkIcon, kubernetesIntegrationHelpPath, }, - localVue, store, }); }); diff --git a/spec/frontend/create_cluster/eks_cluster/components/eks_cluster_configuration_form_spec.js b/spec/frontend/create_cluster/eks_cluster/components/eks_cluster_configuration_form_spec.js index 53a6f12c381..1509d26c99d 100644 --- a/spec/frontend/create_cluster/eks_cluster/components/eks_cluster_configuration_form_spec.js +++ b/spec/frontend/create_cluster/eks_cluster/components/eks_cluster_configuration_form_spec.js @@ -1,14 +1,13 @@ import { GlFormCheckbox } from '@gitlab/ui'; -import { shallowMount, createLocalVue } from '@vue/test-utils'; -import Vue from 'vue'; +import { shallowMount } from '@vue/test-utils'; +import Vue, { nextTick } from 'vue'; import Vuex from 'vuex'; import EksClusterConfigurationForm from '~/create_cluster/eks_cluster/components/eks_cluster_configuration_form.vue'; import eksClusterFormState from '~/create_cluster/eks_cluster/store/state'; import clusterDropdownStoreState from '~/create_cluster/store/cluster_dropdown/state'; -const localVue = createLocalVue(); -localVue.use(Vuex); +Vue.use(Vuex); describe('EksClusterConfigurationForm', () => { let store; @@ -151,7 +150,6 @@ describe('EksClusterConfigurationForm', () => { const buildWrapper = () => { vm = shallowMount(EksClusterConfigurationForm, { - localVue, store, propsData: { gitlabManagedClusterHelpPath: '', @@ -225,108 +223,98 @@ describe('EksClusterConfigurationForm', () => { }); }); - it('sets isLoadingRoles to RoleDropdown loading property', () => { + it('sets isLoadingRoles to RoleDropdown loading property', async () => { rolesState.isLoadingItems = true; - return Vue.nextTick().then(() => { - expect(findRoleDropdown().props('loading')).toBe(rolesState.isLoadingItems); - }); + await nextTick(); + expect(findRoleDropdown().props('loading')).toBe(rolesState.isLoadingItems); }); it('sets roles to RoleDropdown items property', () => { expect(findRoleDropdown().props('items')).toBe(rolesState.items); }); - it('sets RoleDropdown hasErrors to true when loading roles failed', () => { + it('sets RoleDropdown hasErrors to true when loading roles failed', async () => { rolesState.loadingItemsError = new Error(); - return Vue.nextTick().then(() => { - expect(findRoleDropdown().props('hasErrors')).toEqual(true); - }); + await nextTick(); + expect(findRoleDropdown().props('hasErrors')).toEqual(true); }); it('disables KeyPairDropdown when no region is selected', () => { expect(findKeyPairDropdown().props('disabled')).toBe(true); }); - it('enables KeyPairDropdown when no region is selected', () => { + it('enables KeyPairDropdown when no region is selected', async () => { state.selectedRegion = { name: 'west-1 ' }; - return Vue.nextTick().then(() => { - expect(findKeyPairDropdown().props('disabled')).toBe(false); - }); + await nextTick(); + expect(findKeyPairDropdown().props('disabled')).toBe(false); }); - it('sets isLoadingKeyPairs to KeyPairDropdown loading property', () => { + it('sets isLoadingKeyPairs to KeyPairDropdown loading property', async () => { keyPairsState.isLoadingItems = true; - return Vue.nextTick().then(() => { - expect(findKeyPairDropdown().props('loading')).toBe(keyPairsState.isLoadingItems); - }); + await nextTick(); + expect(findKeyPairDropdown().props('loading')).toBe(keyPairsState.isLoadingItems); }); it('sets keyPairs to KeyPairDropdown items property', () => { expect(findKeyPairDropdown().props('items')).toBe(keyPairsState.items); }); - it('sets KeyPairDropdown hasErrors to true when loading key pairs fails', () => { + it('sets KeyPairDropdown hasErrors to true when loading key pairs fails', async () => { keyPairsState.loadingItemsError = new Error(); - return Vue.nextTick().then(() => { - expect(findKeyPairDropdown().props('hasErrors')).toEqual(true); - }); + await nextTick(); + expect(findKeyPairDropdown().props('hasErrors')).toEqual(true); }); it('disables VpcDropdown when no region is selected', () => { expect(findVpcDropdown().props('disabled')).toBe(true); }); - it('enables VpcDropdown when no region is selected', () => { + it('enables VpcDropdown when no region is selected', async () => { state.selectedRegion = { name: 'west-1 ' }; - return Vue.nextTick().then(() => { - expect(findVpcDropdown().props('disabled')).toBe(false); - }); + await nextTick(); + expect(findVpcDropdown().props('disabled')).toBe(false); }); - it('sets isLoadingVpcs to VpcDropdown loading property', () => { + it('sets isLoadingVpcs to VpcDropdown loading property', async () => { vpcsState.isLoadingItems = true; - return Vue.nextTick().then(() => { - expect(findVpcDropdown().props('loading')).toBe(vpcsState.isLoadingItems); - }); + await nextTick(); + expect(findVpcDropdown().props('loading')).toBe(vpcsState.isLoadingItems); }); it('sets vpcs to VpcDropdown items property', () => { expect(findVpcDropdown().props('items')).toBe(vpcsState.items); }); - it('sets VpcDropdown hasErrors to true when loading vpcs fails', () => { + it('sets VpcDropdown hasErrors to true when loading vpcs fails', async () => { vpcsState.loadingItemsError = new Error(); - return Vue.nextTick().then(() => { - expect(findVpcDropdown().props('hasErrors')).toEqual(true); - }); + await nextTick(); + expect(findVpcDropdown().props('hasErrors')).toEqual(true); }); it('disables SubnetDropdown when no vpc is selected', () => { expect(findSubnetDropdown().props('disabled')).toBe(true); }); - it('enables SubnetDropdown when a vpc is selected', () => { + it('enables SubnetDropdown when a vpc is selected', async () => { state.selectedVpc = { name: 'vpc-1 ' }; - return Vue.nextTick().then(() => { - expect(findSubnetDropdown().props('disabled')).toBe(false); - }); + await nextTick(); + expect(findSubnetDropdown().props('disabled')).toBe(false); }); - it('sets isLoadingSubnets to SubnetDropdown loading property', () => { + it('sets isLoadingSubnets to SubnetDropdown loading property', async () => { subnetsState.isLoadingItems = true; - return Vue.nextTick().then(() => { - expect(findSubnetDropdown().props('loading')).toBe(subnetsState.isLoadingItems); - }); + await nextTick(); + expect(findSubnetDropdown().props('loading')).toBe(subnetsState.isLoadingItems); }); it('sets subnets to SubnetDropdown items property', () => { @@ -362,32 +350,29 @@ describe('EksClusterConfigurationForm', () => { expect(findSecurityGroupDropdown().props('disabled')).toBe(true); }); - it('enables SecurityGroupDropdown when a vpc is selected', () => { + it('enables SecurityGroupDropdown when a vpc is selected', async () => { state.selectedVpc = { name: 'vpc-1 ' }; - return Vue.nextTick().then(() => { - expect(findSecurityGroupDropdown().props('disabled')).toBe(false); - }); + await nextTick(); + expect(findSecurityGroupDropdown().props('disabled')).toBe(false); }); - it('sets isLoadingSecurityGroups to SecurityGroupDropdown loading property', () => { + it('sets isLoadingSecurityGroups to SecurityGroupDropdown loading property', async () => { securityGroupsState.isLoadingItems = true; - return Vue.nextTick().then(() => { - expect(findSecurityGroupDropdown().props('loading')).toBe(securityGroupsState.isLoadingItems); - }); + await nextTick(); + expect(findSecurityGroupDropdown().props('loading')).toBe(securityGroupsState.isLoadingItems); }); it('sets securityGroups to SecurityGroupDropdown items property', () => { expect(findSecurityGroupDropdown().props('items')).toBe(securityGroupsState.items); }); - it('sets SecurityGroupDropdown hasErrors to true when loading security groups fails', () => { + it('sets SecurityGroupDropdown hasErrors to true when loading security groups fails', async () => { securityGroupsState.loadingItemsError = new Error(); - return Vue.nextTick().then(() => { - expect(findSecurityGroupDropdown().props('hasErrors')).toEqual(true); - }); + await nextTick(); + expect(findSecurityGroupDropdown().props('hasErrors')).toEqual(true); }); it('dispatches setClusterName when cluster name input changes', () => { diff --git a/spec/frontend/create_cluster/eks_cluster/components/service_credentials_form_spec.js b/spec/frontend/create_cluster/eks_cluster/components/service_credentials_form_spec.js index a0510d46794..0d823a18012 100644 --- a/spec/frontend/create_cluster/eks_cluster/components/service_credentials_form_spec.js +++ b/spec/frontend/create_cluster/eks_cluster/components/service_credentials_form_spec.js @@ -1,11 +1,11 @@ import { GlButton } 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 ServiceCredentialsForm from '~/create_cluster/eks_cluster/components/service_credentials_form.vue'; import eksClusterState from '~/create_cluster/eks_cluster/store/state'; -const localVue = createLocalVue(); -localVue.use(Vuex); +Vue.use(Vuex); describe('ServiceCredentialsForm', () => { let vm; @@ -33,7 +33,6 @@ describe('ServiceCredentialsForm', () => { createRoleArnHelpPath: '', externalLinkIcon: '', }, - localVue, store, }); }); @@ -66,14 +65,13 @@ describe('ServiceCredentialsForm', () => { expect(findSubmitButton().attributes('disabled')).toBeTruthy(); }); - it('enables submit button when role ARN is not provided', () => { + it('enables submit button when role ARN is not provided', async () => { // setData usage is discouraged. See https://gitlab.com/groups/gitlab-org/-/epics/7330 for details // eslint-disable-next-line no-restricted-syntax vm.setData({ roleArn: '123' }); - return vm.vm.$nextTick().then(() => { - expect(findSubmitButton().attributes('disabled')).toBeFalsy(); - }); + await nextTick(); + expect(findSubmitButton().attributes('disabled')).toBeFalsy(); }); it('dispatches createRole action when submit button is clicked', () => { @@ -87,14 +85,14 @@ describe('ServiceCredentialsForm', () => { }); describe('when is creating role', () => { - beforeEach(() => { + beforeEach(async () => { // setData usage is discouraged. See https://gitlab.com/groups/gitlab-org/-/epics/7330 for details // eslint-disable-next-line no-restricted-syntax vm.setData({ roleArn: '123' }); // set role ARN to enable button state.isCreatingRole = true; - return vm.vm.$nextTick(); + await nextTick(); }); it('disables submit button', () => { diff --git a/spec/frontend/create_cluster/gke_cluster/components/gke_machine_type_dropdown_spec.js b/spec/frontend/create_cluster/gke_cluster/components/gke_machine_type_dropdown_spec.js index 2b6f2134553..f46b84da939 100644 --- a/spec/frontend/create_cluster/gke_cluster/components/gke_machine_type_dropdown_spec.js +++ b/spec/frontend/create_cluster/gke_cluster/components/gke_machine_type_dropdown_spec.js @@ -1,4 +1,5 @@ -import { shallowMount, createLocalVue } from '@vue/test-utils'; +import { shallowMount } from '@vue/test-utils'; +import Vue, { nextTick } from 'vue'; import Vuex from 'vuex'; import GkeMachineTypeDropdown from '~/create_cluster/gke_cluster/components/gke_machine_type_dropdown.vue'; import createState from '~/create_cluster/gke_cluster/store/state'; @@ -19,15 +20,12 @@ const LABELS = { DEFAULT: 'Select machine type', }; -const localVue = createLocalVue(); - -localVue.use(Vuex); +Vue.use(Vuex); const createComponent = (store, propsData = componentConfig) => shallowMount(GkeMachineTypeDropdown, { propsData, store, - localVue, }); const createStore = (initialState = {}, getters = {}) => @@ -75,7 +73,7 @@ describe('GkeMachineTypeDropdown', () => { expect(dropdownButtonLabel()).toBe(LABELS.DISABLED_NO_ZONE); }); - it('returns loading toggle text', () => { + it('returns loading toggle text', async () => { store = createStore(); wrapper = createComponent(store); @@ -83,9 +81,8 @@ describe('GkeMachineTypeDropdown', () => { // eslint-disable-next-line no-restricted-syntax wrapper.setData({ isLoading: true }); - return wrapper.vm.$nextTick().then(() => { - expect(dropdownButtonLabel()).toBe(LABELS.LOADING); - }); + await nextTick(); + expect(dropdownButtonLabel()).toBe(LABELS.LOADING); }); it('returns default toggle text', () => { @@ -115,7 +112,7 @@ describe('GkeMachineTypeDropdown', () => { }); describe('form input', () => { - it('reflects new value when dropdown item is clicked', () => { + it('reflects new value when dropdown item is clicked', async () => { store = createStore({ machineTypes: gapiMachineTypesResponseMock.items, }); @@ -125,9 +122,8 @@ describe('GkeMachineTypeDropdown', () => { wrapper.find('.dropdown-content button').trigger('click'); - return wrapper.vm.$nextTick().then(() => { - expect(setMachineType).toHaveBeenCalledWith(expect.anything(), selectedMachineTypeMock); - }); + await nextTick(); + expect(setMachineType).toHaveBeenCalledWith(expect.anything(), selectedMachineTypeMock); }); }); }); diff --git a/spec/frontend/create_cluster/gke_cluster/components/gke_network_dropdown_spec.js b/spec/frontend/create_cluster/gke_cluster/components/gke_network_dropdown_spec.js index 23a56766037..addb0ef72a0 100644 --- a/spec/frontend/create_cluster/gke_cluster/components/gke_network_dropdown_spec.js +++ b/spec/frontend/create_cluster/gke_cluster/components/gke_network_dropdown_spec.js @@ -1,12 +1,11 @@ -import { shallowMount, createLocalVue } from '@vue/test-utils'; +import { shallowMount } from '@vue/test-utils'; +import Vue from 'vue'; import Vuex from 'vuex'; import ClusterFormDropdown from '~/create_cluster/components/cluster_form_dropdown.vue'; import GkeNetworkDropdown from '~/create_cluster/gke_cluster/components/gke_network_dropdown.vue'; import createClusterDropdownState from '~/create_cluster/store/cluster_dropdown/state'; -const localVue = createLocalVue(); - -localVue.use(Vuex); +Vue.use(Vuex); describe('GkeNetworkDropdown', () => { let wrapper; @@ -54,7 +53,6 @@ describe('GkeNetworkDropdown', () => { shallowMount(GkeNetworkDropdown, { propsData, store, - localVue, }); afterEach(() => { diff --git a/spec/frontend/create_cluster/gke_cluster/components/gke_project_id_dropdown_spec.js b/spec/frontend/create_cluster/gke_cluster/components/gke_project_id_dropdown_spec.js index 2b0acc8cf5d..36f8d4bd1e8 100644 --- a/spec/frontend/create_cluster/gke_cluster/components/gke_project_id_dropdown_spec.js +++ b/spec/frontend/create_cluster/gke_cluster/components/gke_project_id_dropdown_spec.js @@ -1,4 +1,5 @@ -import { shallowMount, createLocalVue } from '@vue/test-utils'; +import { shallowMount } from '@vue/test-utils'; +import Vue, { nextTick } from 'vue'; import Vuex from 'vuex'; import GkeProjectIdDropdown from '~/create_cluster/gke_cluster/components/gke_project_id_dropdown.vue'; import createState from '~/create_cluster/gke_cluster/store/state'; @@ -19,9 +20,7 @@ const LABELS = { EMPTY: 'No projects found', }; -const localVue = createLocalVue(); - -localVue.use(Vuex); +Vue.use(Vuex); describe('GkeProjectIdDropdown', () => { let wrapper; @@ -52,7 +51,6 @@ describe('GkeProjectIdDropdown', () => { shallowMount(GkeProjectIdDropdown, { propsData, store, - localVue, }); const bootstrap = (initialState, getters) => { @@ -80,19 +78,18 @@ describe('GkeProjectIdDropdown', () => { expect(dropdownButtonLabel()).toBe(LABELS.VALIDATING_PROJECT_BILLING); }); - it('returns default toggle text', () => { + it('returns default toggle text', async () => { bootstrap(); // setData usage is discouraged. See https://gitlab.com/groups/gitlab-org/-/epics/7330 for details // eslint-disable-next-line no-restricted-syntax wrapper.setData({ isLoading: false }); - return wrapper.vm.$nextTick().then(() => { - expect(dropdownButtonLabel()).toBe(LABELS.DEFAULT); - }); + await nextTick(); + expect(dropdownButtonLabel()).toBe(LABELS.DEFAULT); }); - it('returns project name if project selected', () => { + it('returns project name if project selected', async () => { bootstrap( { selectedProject: selectedProjectMock, @@ -105,12 +102,11 @@ describe('GkeProjectIdDropdown', () => { // eslint-disable-next-line no-restricted-syntax wrapper.setData({ isLoading: false }); - return wrapper.vm.$nextTick().then(() => { - expect(dropdownButtonLabel()).toBe(selectedProjectMock.name); - }); + await nextTick(); + expect(dropdownButtonLabel()).toBe(selectedProjectMock.name); }); - it('returns empty toggle text', () => { + it('returns empty toggle text', async () => { bootstrap({ projects: null, }); @@ -118,26 +114,24 @@ describe('GkeProjectIdDropdown', () => { // eslint-disable-next-line no-restricted-syntax wrapper.setData({ isLoading: false }); - return wrapper.vm.$nextTick().then(() => { - expect(dropdownButtonLabel()).toBe(LABELS.EMPTY); - }); + await nextTick(); + expect(dropdownButtonLabel()).toBe(LABELS.EMPTY); }); }); describe('selectItem', () => { - it('reflects new value when dropdown item is clicked', () => { + it('reflects new value when dropdown item is clicked', async () => { bootstrap({ projects: gapiProjectsResponseMock.projects }); expect(dropdownHiddenInputValue()).toBe(''); wrapper.find('.dropdown-content button').trigger('click'); - return wrapper.vm.$nextTick().then(() => { - expect(setProject).toHaveBeenCalledWith( - expect.anything(), - gapiProjectsResponseMock.projects[0], - ); - }); + await nextTick(); + expect(setProject).toHaveBeenCalledWith( + expect.anything(), + gapiProjectsResponseMock.projects[0], + ); }); }); }); diff --git a/spec/frontend/create_cluster/gke_cluster/components/gke_submit_button_spec.js b/spec/frontend/create_cluster/gke_cluster/components/gke_submit_button_spec.js index 014ed6013bd..2bf9158628c 100644 --- a/spec/frontend/create_cluster/gke_cluster/components/gke_submit_button_spec.js +++ b/spec/frontend/create_cluster/gke_cluster/components/gke_submit_button_spec.js @@ -1,10 +1,9 @@ -import { shallowMount, createLocalVue } from '@vue/test-utils'; +import { shallowMount } from '@vue/test-utils'; +import Vue from 'vue'; import Vuex from 'vuex'; import GkeSubmitButton from '~/create_cluster/gke_cluster/components/gke_submit_button.vue'; -const localVue = createLocalVue(); - -localVue.use(Vuex); +Vue.use(Vuex); describe('GkeSubmitButton', () => { let wrapper; @@ -21,7 +20,6 @@ describe('GkeSubmitButton', () => { const buildWrapper = () => shallowMount(GkeSubmitButton, { store, - localVue, }); const bootstrap = () => { diff --git a/spec/frontend/create_cluster/gke_cluster/components/gke_subnetwork_dropdown_spec.js b/spec/frontend/create_cluster/gke_cluster/components/gke_subnetwork_dropdown_spec.js index cfa8a678a9b..9df680d94b5 100644 --- a/spec/frontend/create_cluster/gke_cluster/components/gke_subnetwork_dropdown_spec.js +++ b/spec/frontend/create_cluster/gke_cluster/components/gke_subnetwork_dropdown_spec.js @@ -1,12 +1,11 @@ -import { shallowMount, createLocalVue } from '@vue/test-utils'; +import { shallowMount } from '@vue/test-utils'; +import Vue from 'vue'; import Vuex from 'vuex'; import ClusterFormDropdown from '~/create_cluster/components/cluster_form_dropdown.vue'; import GkeSubnetworkDropdown from '~/create_cluster/gke_cluster/components/gke_subnetwork_dropdown.vue'; import createClusterDropdownState from '~/create_cluster/store/cluster_dropdown/state'; -const localVue = createLocalVue(); - -localVue.use(Vuex); +Vue.use(Vuex); describe('GkeSubnetworkDropdown', () => { let wrapper; @@ -41,7 +40,6 @@ describe('GkeSubnetworkDropdown', () => { shallowMount(GkeSubnetworkDropdown, { propsData, store, - localVue, }); afterEach(() => { diff --git a/spec/frontend/create_cluster/gke_cluster/components/gke_zone_dropdown_spec.js b/spec/frontend/create_cluster/gke_cluster/components/gke_zone_dropdown_spec.js index 22fc681f863..7b4c228b879 100644 --- a/spec/frontend/create_cluster/gke_cluster/components/gke_zone_dropdown_spec.js +++ b/spec/frontend/create_cluster/gke_cluster/components/gke_zone_dropdown_spec.js @@ -1,4 +1,5 @@ import { shallowMount } from '@vue/test-utils'; +import { nextTick } from 'vue'; import GkeZoneDropdown from '~/create_cluster/gke_cluster/components/gke_zone_dropdown.vue'; import { createStore } from '~/create_cluster/gke_cluster/store'; import { @@ -46,11 +47,11 @@ describe('GkeZoneDropdown', () => { }); describe('isLoading', () => { - beforeEach(() => { + beforeEach(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({ isLoading: true }); - return wrapper.vm.$nextTick(); + await nextTick(); }); it('returns loading toggle text', () => { @@ -59,10 +60,10 @@ describe('GkeZoneDropdown', () => { }); describe('project is set', () => { - beforeEach(() => { + beforeEach(async () => { wrapper.vm.$store.commit(SET_PROJECT, selectedProjectMock); wrapper.vm.$store.commit(SET_PROJECT_BILLING_STATUS, true); - return wrapper.vm.$nextTick(); + await nextTick(); }); it('returns default toggle text', () => { @@ -71,9 +72,9 @@ describe('GkeZoneDropdown', () => { }); describe('project is selected', () => { - beforeEach(() => { + beforeEach(async () => { wrapper.vm.setItem(selectedZoneMock); - return wrapper.vm.$nextTick(); + await nextTick(); }); it('returns project name if project selected', () => { @@ -83,21 +84,20 @@ describe('GkeZoneDropdown', () => { }); describe('selectItem', () => { - beforeEach(() => { + beforeEach(async () => { wrapper.vm.$store.commit(SET_ZONES, gapiZonesResponseMock.items); - return wrapper.vm.$nextTick(); + await nextTick(); }); - it('reflects new value when dropdown item is clicked', () => { + it('reflects new value when dropdown item is clicked', async () => { const dropdown = wrapper.find(DropdownHiddenInput); expect(dropdown.attributes('value')).toBe(''); wrapper.find('.dropdown-content button').trigger('click'); - return wrapper.vm.$nextTick().then(() => { - expect(dropdown.attributes('value')).toBe(selectedZoneMock); - }); + await nextTick(); + expect(dropdown.attributes('value')).toBe(selectedZoneMock); }); }); }); |