diff options
Diffstat (limited to 'spec/frontend/vue_shared/components/sidebar/labels_select_vue/dropdown_button_spec.js')
-rw-r--r-- | spec/frontend/vue_shared/components/sidebar/labels_select_vue/dropdown_button_spec.js | 62 |
1 files changed, 39 insertions, 23 deletions
diff --git a/spec/frontend/vue_shared/components/sidebar/labels_select_vue/dropdown_button_spec.js b/spec/frontend/vue_shared/components/sidebar/labels_select_vue/dropdown_button_spec.js index 214eb239432..68c9d26bb1a 100644 --- a/spec/frontend/vue_shared/components/sidebar/labels_select_vue/dropdown_button_spec.js +++ b/spec/frontend/vue_shared/components/sidebar/labels_select_vue/dropdown_button_spec.js @@ -1,18 +1,19 @@ import Vuex from 'vuex'; import { shallowMount, createLocalVue } from '@vue/test-utils'; -import { GlIcon } from '@gitlab/ui'; +import { GlIcon, GlButton } from '@gitlab/ui'; import DropdownButton from '~/vue_shared/components/sidebar/labels_select_vue/dropdown_button.vue'; import labelSelectModule from '~/vue_shared/components/sidebar/labels_select_vue/store'; import { mockConfig } from './mock_data'; +let store; const localVue = createLocalVue(); localVue.use(Vuex); const createComponent = (initialState = mockConfig) => { - const store = new Vuex.Store(labelSelectModule()); + store = new Vuex.Store(labelSelectModule()); store.dispatch('setInitialState', initialState); @@ -33,26 +34,32 @@ describe('DropdownButton', () => { wrapper.destroy(); }); + const findDropdownButton = () => wrapper.find(GlButton); + const findDropdownText = () => wrapper.find('.dropdown-toggle-text'); + const findDropdownIcon = () => wrapper.find(GlIcon); + describe('methods', () => { describe('handleButtonClick', () => { - it('calls action `toggleDropdownContents` and stops event propagation when `state.variant` is "standalone"', () => { - const event = { - stopPropagation: jest.fn(), - }; - wrapper = createComponent({ - ...mockConfig, - variant: 'standalone', - }); - - jest.spyOn(wrapper.vm, 'toggleDropdownContents'); - - wrapper.vm.handleButtonClick(event); - - expect(wrapper.vm.toggleDropdownContents).toHaveBeenCalled(); - expect(event.stopPropagation).toHaveBeenCalled(); - - wrapper.destroy(); - }); + it.each` + variant + ${'standalone'} + ${'embedded'} + `( + 'toggles dropdown content and stops event propagation when `state.variant` is "$variant"', + ({ variant }) => { + const event = { stopPropagation: jest.fn() }; + + wrapper = createComponent({ + ...mockConfig, + variant, + }); + + findDropdownButton().vm.$emit('click', event); + + expect(store.state.showDropdownContents).toBe(true); + expect(event.stopPropagation).toHaveBeenCalled(); + }, + ); }); }); @@ -61,15 +68,24 @@ describe('DropdownButton', () => { expect(wrapper.is('gl-button-stub')).toBe(true); }); - it('renders button text element', () => { - const dropdownTextEl = wrapper.find('.dropdown-toggle-text'); + it('renders default button text element', () => { + const dropdownTextEl = findDropdownText(); expect(dropdownTextEl.exists()).toBe(true); expect(dropdownTextEl.text()).toBe('Label'); }); + it('renders provided button text element', () => { + store.state.dropdownButtonText = 'Custom label'; + const dropdownTextEl = findDropdownText(); + + return wrapper.vm.$nextTick().then(() => { + expect(dropdownTextEl.text()).toBe('Custom label'); + }); + }); + it('renders chevron icon element', () => { - const iconEl = wrapper.find(GlIcon); + const iconEl = findDropdownIcon(); expect(iconEl.exists()).toBe(true); expect(iconEl.props('name')).toBe('chevron-down'); |