diff options
Diffstat (limited to 'spec/frontend/vue_shared/components/sidebar/labels_select_vue/labels_select_root_spec.js')
-rw-r--r-- | spec/frontend/vue_shared/components/sidebar/labels_select_vue/labels_select_root_spec.js | 104 |
1 files changed, 66 insertions, 38 deletions
diff --git a/spec/frontend/vue_shared/components/sidebar/labels_select_vue/labels_select_root_spec.js b/spec/frontend/vue_shared/components/sidebar/labels_select_vue/labels_select_root_spec.js index 8c17a974b39..1206450bbeb 100644 --- a/spec/frontend/vue_shared/components/sidebar/labels_select_vue/labels_select_root_spec.js +++ b/spec/frontend/vue_shared/components/sidebar/labels_select_vue/labels_select_root_spec.js @@ -20,22 +20,24 @@ jest.mock('~/lib/utils/common_utils', () => ({ const localVue = createLocalVue(); localVue.use(Vuex); -const createComponent = (config = mockConfig, slots = {}) => - shallowMount(LabelsSelectRoot, { - localVue, - slots, - store: new Vuex.Store(labelsSelectModule()), - propsData: config, - stubs: { - 'dropdown-contents': DropdownContents, - }, - }); - describe('LabelsSelectRoot', () => { let wrapper; + let store; + + const createComponent = (config = mockConfig, slots = {}) => { + wrapper = shallowMount(LabelsSelectRoot, { + localVue, + slots, + store, + propsData: config, + stubs: { + 'dropdown-contents': DropdownContents, + }, + }); + }; beforeEach(() => { - wrapper = createComponent(); + store = new Vuex.Store(labelsSelectModule()); }); afterEach(() => { @@ -45,6 +47,7 @@ describe('LabelsSelectRoot', () => { describe('methods', () => { describe('handleVuexActionDispatch', () => { it('calls `handleDropdownClose` when params `action.type` is `toggleDropdownContents` and state has `showDropdownButton` & `showDropdownContents` props `false`', () => { + createComponent(); jest.spyOn(wrapper.vm, 'handleDropdownClose').mockImplementation(); wrapper.vm.handleVuexActionDispatch( @@ -67,7 +70,7 @@ describe('LabelsSelectRoot', () => { }); it('calls `handleDropdownClose` with state.labels filterd using `set` prop when dropdown variant is `embedded`', () => { - wrapper = createComponent({ + createComponent({ ...mockConfig, variant: 'embedded', }); @@ -95,6 +98,10 @@ describe('LabelsSelectRoot', () => { }); describe('handleDropdownClose', () => { + beforeEach(() => { + createComponent(); + }); + it('emits `updateSelectedLabels` & `onDropdownClose` events on component when provided `labels` param is not empty', () => { wrapper.vm.handleDropdownClose([{ id: 1 }, { id: 2 }]); @@ -112,6 +119,7 @@ describe('LabelsSelectRoot', () => { describe('handleCollapsedValueClick', () => { it('emits `toggleCollapse` event on component', () => { + createComponent(); wrapper.vm.handleCollapsedValueClick(); expect(wrapper.emitted().toggleCollapse).toBeTruthy(); @@ -121,6 +129,7 @@ describe('LabelsSelectRoot', () => { describe('template', () => { it('renders component with classes `labels-select-wrapper position-relative`', () => { + createComponent(); expect(wrapper.attributes('class')).toContain('labels-select-wrapper position-relative'); }); @@ -131,7 +140,7 @@ describe('LabelsSelectRoot', () => { `( 'renders component root element with CSS class `$cssClass` when `state.variant` is "$variant"', ({ variant, cssClass }) => { - wrapper = createComponent({ + createComponent({ ...mockConfig, variant, }); @@ -142,57 +151,58 @@ describe('LabelsSelectRoot', () => { }, ); - it('renders `dropdown-value-collapsed` component when `allowLabelCreate` prop is `true`', () => { + it('renders `dropdown-value-collapsed` component when `allowLabelCreate` prop is `true`', async () => { + createComponent(); + await wrapper.vm.$nextTick; expect(wrapper.find(DropdownValueCollapsed).exists()).toBe(true); }); - it('renders `dropdown-title` component', () => { + it('renders `dropdown-title` component', async () => { + createComponent(); + await wrapper.vm.$nextTick; expect(wrapper.find(DropdownTitle).exists()).toBe(true); }); - it('renders `dropdown-value` component', () => { - const wrapperDropdownValue = createComponent(mockConfig, { + it('renders `dropdown-value` component', async () => { + createComponent(mockConfig, { default: 'None', }); + await wrapper.vm.$nextTick; - return wrapperDropdownValue.vm.$nextTick(() => { - const valueComp = wrapperDropdownValue.find(DropdownValue); + const valueComp = wrapper.find(DropdownValue); - expect(valueComp.exists()).toBe(true); - expect(valueComp.text()).toBe('None'); - - wrapperDropdownValue.destroy(); - }); + expect(valueComp.exists()).toBe(true); + expect(valueComp.text()).toBe('None'); }); - it('renders `dropdown-button` component when `showDropdownButton` prop is `true`', () => { + it('renders `dropdown-button` component when `showDropdownButton` prop is `true`', async () => { + createComponent(); wrapper.vm.$store.dispatch('toggleDropdownButton'); - + await wrapper.vm.$nextTick; expect(wrapper.find(DropdownButton).exists()).toBe(true); }); - it('renders `dropdown-contents` component when `showDropdownButton` & `showDropdownContents` prop is `true`', () => { + it('renders `dropdown-contents` component when `showDropdownButton` & `showDropdownContents` prop is `true`', async () => { + createComponent(); wrapper.vm.$store.dispatch('toggleDropdownContents'); - - return wrapper.vm.$nextTick(() => { - expect(wrapper.find(DropdownContents).exists()).toBe(true); - }); + await wrapper.vm.$nextTick; + expect(wrapper.find(DropdownContents).exists()).toBe(true); }); describe('sets content direction based on viewport', () => { - it('does not set direction when `state.variant` is not "embedded"', () => { - wrapper.vm.$store.dispatch('toggleDropdownContents'); + it('does not set direction when `state.variant` is not "embedded"', async () => { + createComponent(); + wrapper.vm.$store.dispatch('toggleDropdownContents'); wrapper.vm.setContentIsOnViewport(wrapper.vm.$store.state); + await wrapper.vm.$nextTick; - return wrapper.vm.$nextTick().then(() => { - expect(wrapper.find(DropdownContents).props('renderOnTop')).toBe(false); - }); + expect(wrapper.find(DropdownContents).props('renderOnTop')).toBe(false); }); describe('when `state.variant` is "embedded"', () => { beforeEach(() => { - wrapper = createComponent({ ...mockConfig, variant: 'embedded' }); + createComponent({ ...mockConfig, variant: 'embedded' }); wrapper.vm.$store.dispatch('toggleDropdownContents'); }); @@ -216,4 +226,22 @@ describe('LabelsSelectRoot', () => { }); }); }); + + it('calls toggleDropdownContents action when isEditing prop is changing to true', async () => { + createComponent(); + + jest.spyOn(store, 'dispatch').mockResolvedValue(); + await wrapper.setProps({ isEditing: true }); + + expect(store.dispatch).toHaveBeenCalledWith('toggleDropdownContents'); + }); + + it('does not call toggleDropdownContents action when isEditing prop is changing to false', async () => { + createComponent(); + + jest.spyOn(store, 'dispatch').mockResolvedValue(); + await wrapper.setProps({ isEditing: false }); + + expect(store.dispatch).not.toHaveBeenCalled(); + }); }); |