diff options
Diffstat (limited to 'spec/frontend/vue_shared/components/sidebar/labels_select_vue/dropdown_contents_labels_view_spec.js')
-rw-r--r-- | spec/frontend/vue_shared/components/sidebar/labels_select_vue/dropdown_contents_labels_view_spec.js | 131 |
1 files changed, 75 insertions, 56 deletions
diff --git a/spec/frontend/vue_shared/components/sidebar/labels_select_vue/dropdown_contents_labels_view_spec.js b/spec/frontend/vue_shared/components/sidebar/labels_select_vue/dropdown_contents_labels_view_spec.js index 9b01e0b9637..589be0ad7a4 100644 --- a/spec/frontend/vue_shared/components/sidebar/labels_select_vue/dropdown_contents_labels_view_spec.js +++ b/spec/frontend/vue_shared/components/sidebar/labels_select_vue/dropdown_contents_labels_view_spec.js @@ -17,53 +17,47 @@ import { mockConfig, mockLabels, mockRegularLabel } from './mock_data'; const localVue = createLocalVue(); localVue.use(Vuex); -const createComponent = (initialState = mockConfig) => { - const store = new Vuex.Store({ - getters, - mutations, - state: { - ...defaultState(), - footerCreateLabelTitle: 'Create label', - footerManageLabelTitle: 'Manage labels', - }, - actions: { - ...actions, - fetchLabels: jest.fn(), - }, - }); - - store.dispatch('setInitialState', initialState); - store.dispatch('receiveLabelsSuccess', mockLabels); - - return shallowMount(DropdownContentsLabelsView, { - localVue, - store, - }); -}; - describe('DropdownContentsLabelsView', () => { let wrapper; - let wrapperStandalone; - let wrapperEmbedded; - beforeEach(() => { - wrapper = createComponent(); - wrapperStandalone = createComponent({ - ...mockConfig, - variant: 'standalone', + const createComponent = (initialState = mockConfig) => { + const store = new Vuex.Store({ + getters, + mutations, + state: { + ...defaultState(), + footerCreateLabelTitle: 'Create label', + footerManageLabelTitle: 'Manage labels', + }, + actions: { + ...actions, + fetchLabels: jest.fn(), + }, }); - wrapperEmbedded = createComponent({ - ...mockConfig, - variant: 'embedded', + + store.dispatch('setInitialState', initialState); + store.dispatch('receiveLabelsSuccess', mockLabels); + + wrapper = shallowMount(DropdownContentsLabelsView, { + localVue, + store, }); + }; + + beforeEach(() => { + createComponent(); }); afterEach(() => { wrapper.destroy(); - wrapperStandalone.destroy(); - wrapperEmbedded.destroy(); + wrapper = null; }); + const findDropdownContent = () => wrapper.find('[data-testid="dropdown-content"]'); + const findDropdownTitle = () => wrapper.find('[data-testid="dropdown-title"]'); + const findDropdownFooter = () => wrapper.find('[data-testid="dropdown-footer"]'); + const findLoadingIcon = () => wrapper.find(GlLoadingIcon); + describe('computed', () => { describe('visibleLabels', () => { it('returns matching labels filtered with `searchKey`', () => { @@ -83,6 +77,24 @@ describe('DropdownContentsLabelsView', () => { expect(wrapper.vm.visibleLabels.length).toBe(mockLabels.length); }); }); + + describe('showListContainer', () => { + it.each` + variant | loading | showList + ${'sidebar'} | ${false} | ${true} + ${'sidebar'} | ${true} | ${false} + ${'not-sidebar'} | ${true} | ${true} + ${'not-sidebar'} | ${false} | ${true} + `( + 'returns $showList if `state.variant` is "$variant" and `labelsFetchInProgress` is $loading', + ({ variant, loading, showList }) => { + createComponent({ ...mockConfig, variant }); + wrapper.vm.$store.state.labelsFetchInProgress = loading; + + expect(wrapper.vm.showListContainer).toBe(showList); + }, + ); + }); }); describe('methods', () => { @@ -199,7 +211,7 @@ describe('DropdownContentsLabelsView', () => { wrapper.vm.$store.dispatch('requestLabels'); return wrapper.vm.$nextTick(() => { - const loadingIconEl = wrapper.find(GlLoadingIcon); + const loadingIconEl = findLoadingIcon(); expect(loadingIconEl.exists()).toBe(true); expect(loadingIconEl.attributes('class')).toContain('labels-fetch-loading'); @@ -207,22 +219,24 @@ describe('DropdownContentsLabelsView', () => { }); it('renders dropdown title element', () => { - const titleEl = wrapper.find('.dropdown-title > span'); + const titleEl = findDropdownTitle(); expect(titleEl.exists()).toBe(true); expect(titleEl.text()).toBe('Assign labels'); }); it('does not render dropdown title element when `state.variant` is "standalone"', () => { - expect(wrapperStandalone.find('.dropdown-title').exists()).toBe(false); + createComponent({ ...mockConfig, variant: 'standalone' }); + expect(findDropdownTitle().exists()).toBe(false); }); it('renders dropdown title element when `state.variant` is "embedded"', () => { - expect(wrapperEmbedded.find('.dropdown-title').exists()).toBe(true); + createComponent({ ...mockConfig, variant: 'embedded' }); + expect(findDropdownTitle().exists()).toBe(true); }); it('renders dropdown close button element', () => { - const closeButtonEl = wrapper.find('.dropdown-title').find(GlButton); + const closeButtonEl = findDropdownTitle().find(GlButton); expect(closeButtonEl.exists()).toBe(true); expect(closeButtonEl.props('icon')).toBe('close'); @@ -249,8 +263,7 @@ describe('DropdownContentsLabelsView', () => { }); return wrapper.vm.$nextTick(() => { - const labelsEl = wrapper.findAll('.dropdown-content li'); - const labelItemEl = labelsEl.at(0).find(LabelItem); + const labelItemEl = findDropdownContent().find(LabelItem); expect(labelItemEl.props('highlight')).toBe(true); }); @@ -262,22 +275,28 @@ describe('DropdownContentsLabelsView', () => { }); return wrapper.vm.$nextTick(() => { - const noMatchEl = wrapper.find('.dropdown-content li'); + const noMatchEl = findDropdownContent().find('li'); expect(noMatchEl.isVisible()).toBe(true); expect(noMatchEl.text()).toContain('No matching results'); }); }); + it('renders empty content while loading', () => { + wrapper.vm.$store.state.labelsFetchInProgress = true; + + return wrapper.vm.$nextTick(() => { + const dropdownContent = findDropdownContent(); + + expect(dropdownContent.exists()).toBe(true); + expect(dropdownContent.isVisible()).toBe(false); + }); + }); + it('renders footer list items', () => { - const createLabelLink = wrapper - .find('.dropdown-footer') - .findAll(GlLink) - .at(0); - const manageLabelsLink = wrapper - .find('.dropdown-footer') - .findAll(GlLink) - .at(1); + const footerLinks = findDropdownFooter().findAll(GlLink); + const createLabelLink = footerLinks.at(0); + const manageLabelsLink = footerLinks.at(1); expect(createLabelLink.exists()).toBe(true); expect(createLabelLink.text()).toBe('Create label'); @@ -289,8 +308,7 @@ describe('DropdownContentsLabelsView', () => { wrapper.vm.$store.state.allowLabelCreate = false; return wrapper.vm.$nextTick(() => { - const createLabelLink = wrapper - .find('.dropdown-footer') + const createLabelLink = findDropdownFooter() .findAll(GlLink) .at(0); @@ -299,11 +317,12 @@ describe('DropdownContentsLabelsView', () => { }); it('does not render footer list items when `state.variant` is "standalone"', () => { - expect(wrapperStandalone.find('.dropdown-footer').exists()).toBe(false); + createComponent({ ...mockConfig, variant: 'standalone' }); + expect(findDropdownFooter().exists()).toBe(false); }); it('renders footer list items when `state.variant` is "embedded"', () => { - expect(wrapperEmbedded.find('.dropdown-footer').exists()).toBe(true); + expect(findDropdownFooter().exists()).toBe(true); }); }); }); |