diff options
author | GitLab Bot <gitlab-bot@gitlab.com> | 2020-03-11 15:09:37 +0000 |
---|---|---|
committer | GitLab Bot <gitlab-bot@gitlab.com> | 2020-03-11 15:09:37 +0000 |
commit | a210c43e0aca0311cc1d3d381763b25979ec72dc (patch) | |
tree | 0325d173da7a6e7bd6c2cdf450d0aa1c4e142d0f /spec/frontend/create_cluster | |
parent | c9687bdf58e9d4a9c3942f587bd4841f42e3b5de (diff) | |
download | gitlab-ce-a210c43e0aca0311cc1d3d381763b25979ec72dc.tar.gz |
Add latest changes from gitlab-org/gitlab@master
Diffstat (limited to 'spec/frontend/create_cluster')
-rw-r--r-- | spec/frontend/create_cluster/components/cluster_form_dropdown_spec.js | 142 |
1 files changed, 81 insertions, 61 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 292b8694fbc..14f2a527dfb 100644 --- a/spec/frontend/create_cluster/components/cluster_form_dropdown_spec.js +++ b/spec/frontend/create_cluster/components/cluster_form_dropdown_spec.js @@ -7,22 +7,22 @@ import DropdownButton from '~/vue_shared/components/dropdown/dropdown_button.vue import DropdownSearchInput from '~/vue_shared/components/dropdown/dropdown_search_input.vue'; describe('ClusterFormDropdown', () => { - let vm; + let wrapper; const firstItem = { name: 'item 1', value: 1 }; const secondItem = { name: 'item 2', value: 2 }; const items = [firstItem, secondItem, { name: 'item 3', value: 3 }]; beforeEach(() => { - vm = shallowMount(ClusterFormDropdown); + wrapper = shallowMount(ClusterFormDropdown); }); - afterEach(() => vm.destroy()); + afterEach(() => wrapper.destroy()); describe('when initial value is provided', () => { it('sets selectedItem to initial value', () => { - vm.setProps({ items, value: secondItem.value }); + wrapper.setProps({ items, value: secondItem.value }); - return vm.vm.$nextTick().then(() => { - expect(vm.find(DropdownButton).props('toggleText')).toEqual(secondItem.name); + return wrapper.vm.$nextTick().then(() => { + expect(wrapper.find(DropdownButton).props('toggleText')).toEqual(secondItem.name); }); }); }); @@ -31,28 +31,29 @@ describe('ClusterFormDropdown', () => { it('displays placeholder text', () => { const placeholder = 'placeholder'; - vm.setProps({ placeholder }); + wrapper.setProps({ placeholder }); - return vm.vm.$nextTick().then(() => { - expect(vm.find(DropdownButton).props('toggleText')).toEqual(placeholder); + return wrapper.vm.$nextTick().then(() => { + expect(wrapper.find(DropdownButton).props('toggleText')).toEqual(placeholder); }); }); }); describe('when an item is selected', () => { beforeEach(() => { - vm.setProps({ items }); + wrapper.setProps({ items }); - return vm.vm.$nextTick().then(() => { - vm.findAll('.js-dropdown-item') + return wrapper.vm.$nextTick().then(() => { + wrapper + .findAll('.js-dropdown-item') .at(1) .trigger('click'); - return vm.vm.$nextTick(); + return wrapper.vm.$nextTick(); }); }); it('emits input event with selected item', () => { - expect(vm.emitted('input')[0]).toEqual([secondItem.value]); + expect(wrapper.emitted('input')[0]).toEqual([secondItem.value]); }); }); @@ -60,37 +61,54 @@ describe('ClusterFormDropdown', () => { const value = [1]; beforeEach(() => { - vm.setProps({ items, multiple: true, value }); - return vm.vm + wrapper.setProps({ items, multiple: true, value }); + return wrapper.vm .$nextTick() .then(() => { - vm.findAll('.js-dropdown-item') + wrapper + .findAll('.js-dropdown-item') .at(0) .trigger('click'); - return vm.vm.$nextTick(); + return wrapper.vm.$nextTick(); }) .then(() => { - vm.findAll('.js-dropdown-item') + wrapper + .findAll('.js-dropdown-item') .at(1) .trigger('click'); - return vm.vm.$nextTick(); + return wrapper.vm.$nextTick(); }); }); it('emits input event with an array of selected items', () => { - expect(vm.emitted('input')[1]).toEqual([[firstItem.value, secondItem.value]]); + expect(wrapper.emitted('input')[1]).toEqual([[firstItem.value, secondItem.value]]); }); }); describe('when multiple items can be selected', () => { beforeEach(() => { - vm.setProps({ items, multiple: true, value: firstItem.value }); - return vm.vm.$nextTick(); + wrapper.setProps({ items, multiple: true, value: firstItem.value }); + return wrapper.vm.$nextTick(); }); it('displays a checked GlIcon next to the item', () => { - expect(vm.find(GlIcon).is('.invisible')).toBe(false); - expect(vm.find(GlIcon).props('name')).toBe('mobile-issue-close'); + expect(wrapper.find(GlIcon).is('.invisible')).toBe(false); + expect(wrapper.find(GlIcon).props('name')).toBe('mobile-issue-close'); + }); + }); + + describe('when multiple values can be selected and initial value is null', () => { + it('emits input event with an array of a single selected item', () => { + wrapper.setProps({ items, multiple: true, value: null }); + + return wrapper.vm.$nextTick().then(() => { + wrapper + .findAll('.js-dropdown-item') + .at(0) + .trigger('click'); + + expect(wrapper.emitted('input')[0]).toEqual([[firstItem.value]]); + }); }); }); @@ -101,20 +119,20 @@ describe('ClusterFormDropdown', () => { const currentValue = 1; const customLabelItems = [{ [labelProperty]: label, value: currentValue }]; - vm.setProps({ labelProperty, items: customLabelItems, value: currentValue }); + wrapper.setProps({ labelProperty, items: customLabelItems, value: currentValue }); - return vm.vm.$nextTick().then(() => { - expect(vm.find(DropdownButton).props('toggleText')).toEqual(label); + return wrapper.vm.$nextTick().then(() => { + expect(wrapper.find(DropdownButton).props('toggleText')).toEqual(label); }); }); }); describe('when loading', () => { it('dropdown button isLoading', () => { - vm.setProps({ loading: true }); + wrapper.setProps({ loading: true }); - return vm.vm.$nextTick().then(() => { - expect(vm.find(DropdownButton).props('isLoading')).toBe(true); + return wrapper.vm.$nextTick().then(() => { + expect(wrapper.find(DropdownButton).props('isLoading')).toBe(true); }); }); }); @@ -123,20 +141,20 @@ describe('ClusterFormDropdown', () => { it('uses loading text as toggle button text', () => { const loadingText = 'loading text'; - vm.setProps({ loading: true, loadingText }); + wrapper.setProps({ loading: true, loadingText }); - return vm.vm.$nextTick().then(() => { - expect(vm.find(DropdownButton).props('toggleText')).toEqual(loadingText); + return wrapper.vm.$nextTick().then(() => { + expect(wrapper.find(DropdownButton).props('toggleText')).toEqual(loadingText); }); }); }); describe('when disabled', () => { it('dropdown button isDisabled', () => { - vm.setProps({ disabled: true }); + wrapper.setProps({ disabled: true }); - return vm.vm.$nextTick().then(() => { - expect(vm.find(DropdownButton).props('isDisabled')).toBe(true); + return wrapper.vm.$nextTick().then(() => { + expect(wrapper.find(DropdownButton).props('isDisabled')).toBe(true); }); }); }); @@ -145,20 +163,20 @@ describe('ClusterFormDropdown', () => { it('uses disabled text as toggle button text', () => { const disabledText = 'disabled text'; - vm.setProps({ disabled: true, disabledText }); + wrapper.setProps({ disabled: true, disabledText }); - return vm.vm.$nextTick().then(() => { - expect(vm.find(DropdownButton).props('toggleText')).toBe(disabledText); + return wrapper.vm.$nextTick().then(() => { + expect(wrapper.find(DropdownButton).props('toggleText')).toBe(disabledText); }); }); }); describe('when has errors', () => { it('sets border-danger class selector to dropdown toggle', () => { - vm.setProps({ hasErrors: true }); + wrapper.setProps({ hasErrors: true }); - return vm.vm.$nextTick().then(() => { - expect(vm.find(DropdownButton).classes('border-danger')).toBe(true); + return wrapper.vm.$nextTick().then(() => { + expect(wrapper.find(DropdownButton).classes('border-danger')).toBe(true); }); }); }); @@ -167,10 +185,10 @@ describe('ClusterFormDropdown', () => { it('displays error message', () => { const errorMessage = 'error message'; - vm.setProps({ hasErrors: true, errorMessage }); + wrapper.setProps({ hasErrors: true, errorMessage }); - return vm.vm.$nextTick().then(() => { - expect(vm.find('.js-eks-dropdown-error-message').text()).toEqual(errorMessage); + return wrapper.vm.$nextTick().then(() => { + expect(wrapper.find('.js-eks-dropdown-error-message').text()).toEqual(errorMessage); }); }); }); @@ -179,10 +197,10 @@ describe('ClusterFormDropdown', () => { it('displays empty text', () => { const emptyText = 'error message'; - vm.setProps({ items: [], emptyText }); + wrapper.setProps({ items: [], emptyText }); - return vm.vm.$nextTick().then(() => { - expect(vm.find('.js-empty-text').text()).toEqual(emptyText); + return wrapper.vm.$nextTick().then(() => { + expect(wrapper.find('.js-empty-text').text()).toEqual(emptyText); }); }); }); @@ -190,34 +208,36 @@ describe('ClusterFormDropdown', () => { it('displays search field placeholder', () => { const searchFieldPlaceholder = 'Placeholder'; - vm.setProps({ searchFieldPlaceholder }); + wrapper.setProps({ searchFieldPlaceholder }); - return vm.vm.$nextTick().then(() => { - expect(vm.find(DropdownSearchInput).props('placeholderText')).toEqual(searchFieldPlaceholder); + return wrapper.vm.$nextTick().then(() => { + expect(wrapper.find(DropdownSearchInput).props('placeholderText')).toEqual( + searchFieldPlaceholder, + ); }); }); it('it filters results by search query', () => { const searchQuery = secondItem.name; - vm.setProps({ items }); - vm.setData({ searchQuery }); + wrapper.setProps({ items }); + wrapper.setData({ searchQuery }); - return vm.vm.$nextTick().then(() => { - expect(vm.findAll('.js-dropdown-item').length).toEqual(1); - expect(vm.find('.js-dropdown-item').text()).toEqual(secondItem.name); + return wrapper.vm.$nextTick().then(() => { + 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', () => { - const dropdownEl = vm.find('.dropdown').element; + const dropdownEl = wrapper.find('.dropdown').element; - expect(vm.find(DropdownSearchInput).props('focused')).toBe(false); + expect(wrapper.find(DropdownSearchInput).props('focused')).toBe(false); $(dropdownEl).trigger('shown.bs.dropdown'); - return vm.vm.$nextTick(() => { - expect(vm.find(DropdownSearchInput).props('focused')).toBe(true); + return wrapper.vm.$nextTick(() => { + expect(wrapper.find(DropdownSearchInput).props('focused')).toBe(true); }); }); }); |