diff options
Diffstat (limited to 'spec/frontend/create_cluster/components/cluster_form_dropdown_spec.js')
| -rw-r--r-- | spec/frontend/create_cluster/components/cluster_form_dropdown_spec.js | 134 |
1 files changed, 59 insertions, 75 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); }); }); |