diff options
Diffstat (limited to 'spec/frontend')
2 files changed, 79 insertions, 94 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 a9350bc059d..e8a126d8774 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 @@ -1,9 +1,14 @@ import Vuex from 'vuex'; import { shallowMount, createLocalVue } from '@vue/test-utils'; -import { GlButton, GlLoadingIcon, GlSearchBoxByType, GlLink } from '@gitlab/ui'; +import { + GlIntersectionObserver, + GlButton, + GlLoadingIcon, + GlSearchBoxByType, + GlLink, +} from '@gitlab/ui'; import { UP_KEY_CODE, DOWN_KEY_CODE, ENTER_KEY_CODE, ESC_KEY_CODE } from '~/lib/utils/keycodes'; -import SmartVirtualList from '~/vue_shared/components/smart_virtual_list.vue'; import DropdownContentsLabelsView from '~/vue_shared/components/sidebar/labels_select_vue/dropdown_contents_labels_view.vue'; import LabelItem from '~/vue_shared/components/sidebar/labels_select_vue/label_item.vue'; @@ -88,20 +93,25 @@ describe('DropdownContentsLabelsView', () => { }); }); - describe('showListContainer', () => { + describe('showNoMatchingResultsMessage', () => { it.each` - variant | loading | showList - ${'sidebar'} | ${false} | ${true} - ${'sidebar'} | ${true} | ${false} - ${'not-sidebar'} | ${true} | ${true} - ${'not-sidebar'} | ${false} | ${true} + searchKey | labels | labelsDescription | returnValue + ${''} | ${[]} | ${'empty'} | ${false} + ${'bug'} | ${[]} | ${'empty'} | ${true} + ${''} | ${mockLabels} | ${'not empty'} | ${false} + ${'bug'} | ${mockLabels} | ${'not empty'} | ${false} `( - 'returns $showList if `state.variant` is "$variant" and `labelsFetchInProgress` is $loading', - ({ variant, loading, showList }) => { - createComponent({ ...mockConfig, variant }); - wrapper.vm.$store.state.labelsFetchInProgress = loading; + 'returns $returnValue when searchKey is "$searchKey" and visibleLabels is $labelsDescription', + async ({ searchKey, labels, returnValue }) => { + wrapper.setData({ + searchKey, + }); - expect(wrapper.vm.showListContainer).toBe(showList); + wrapper.vm.$store.dispatch('receiveLabelsSuccess', labels); + + await wrapper.vm.$nextTick(); + + expect(wrapper.vm.showNoMatchingResultsMessage).toBe(returnValue); }, ); }); @@ -118,6 +128,28 @@ describe('DropdownContentsLabelsView', () => { }); }); + describe('handleComponentDisappear', () => { + it('calls action `receiveLabelsSuccess` with empty array', () => { + jest.spyOn(wrapper.vm, 'receiveLabelsSuccess'); + + wrapper.vm.handleComponentDisappear(); + + expect(wrapper.vm.receiveLabelsSuccess).toHaveBeenCalledWith([]); + }); + }); + + describe('handleCreateLabelClick', () => { + it('calls actions `receiveLabelsSuccess` with empty array and `toggleDropdownContentsCreateView`', () => { + jest.spyOn(wrapper.vm, 'receiveLabelsSuccess'); + jest.spyOn(wrapper.vm, 'toggleDropdownContentsCreateView'); + + wrapper.vm.handleCreateLabelClick(); + + expect(wrapper.vm.receiveLabelsSuccess).toHaveBeenCalledWith([]); + expect(wrapper.vm.toggleDropdownContentsCreateView).toHaveBeenCalled(); + }); + }); + describe('handleKeyDown', () => { it('decreases `currentHighlightItem` value by 1 when Up arrow key is pressed', () => { wrapper.setData({ @@ -226,8 +258,8 @@ describe('DropdownContentsLabelsView', () => { }); describe('template', () => { - it('renders component container element with class `labels-select-contents-list`', () => { - expect(wrapper.attributes('class')).toContain('labels-select-contents-list'); + it('renders gl-intersection-observer as component root', () => { + expect(wrapper.find(GlIntersectionObserver).exists()).toBe(true); }); it('renders gl-loading-icon component when `labelsFetchInProgress` prop is true', () => { @@ -272,15 +304,11 @@ describe('DropdownContentsLabelsView', () => { expect(searchInputEl.attributes('autofocus')).toBe('true'); }); - it('renders smart-virtual-list element', () => { - expect(wrapper.find(SmartVirtualList).exists()).toBe(true); - }); - it('renders label elements for all labels', () => { expect(wrapper.findAll(LabelItem)).toHaveLength(mockLabels.length); }); - it('renders label element with "is-focused" when value of `currentHighlightItem` is more than -1', () => { + it('renders label element with `highlight` set to true when value of `currentHighlightItem` is more than -1', () => { wrapper.setData({ currentHighlightItem: 0, }); @@ -288,7 +316,7 @@ describe('DropdownContentsLabelsView', () => { return wrapper.vm.$nextTick(() => { const labelItemEl = findDropdownContent().find(LabelItem); - expect(labelItemEl.props('highlight')).toBe(true); + expect(labelItemEl.attributes('highlight')).toBe('true'); }); }); @@ -310,9 +338,12 @@ describe('DropdownContentsLabelsView', () => { return wrapper.vm.$nextTick(() => { const dropdownContent = findDropdownContent(); + const loadingIcon = findLoadingIcon(); expect(dropdownContent.exists()).toBe(true); - expect(dropdownContent.isVisible()).toBe(false); + expect(dropdownContent.isVisible()).toBe(true); + expect(loadingIcon.exists()).toBe(true); + expect(loadingIcon.isVisible()).toBe(true); }); }); diff --git a/spec/frontend/vue_shared/components/sidebar/labels_select_vue/label_item_spec.js b/spec/frontend/vue_shared/components/sidebar/labels_select_vue/label_item_spec.js index ad3f073fdf9..a6ec01ad7e1 100644 --- a/spec/frontend/vue_shared/components/sidebar/labels_select_vue/label_item_spec.js +++ b/spec/frontend/vue_shared/components/sidebar/labels_select_vue/label_item_spec.js @@ -6,11 +6,15 @@ import { mockRegularLabel } from './mock_data'; const mockLabel = { ...mockRegularLabel, set: true }; -const createComponent = ({ label = mockLabel, highlight = true } = {}) => +const createComponent = ({ + label = mockLabel, + isLabelSet = mockLabel.set, + highlight = true, +} = {}) => shallowMount(LabelItem, { propsData: { label, - isLabelSet: label.set, + isLabelSet, highlight, }, }); @@ -26,94 +30,44 @@ describe('LabelItem', () => { wrapper.destroy(); }); - describe('computed', () => { - describe('labelBoxStyle', () => { - it('returns an object containing `backgroundColor` based on `label` prop', () => { - expect(wrapper.vm.labelBoxStyle).toEqual( - expect.objectContaining({ - backgroundColor: mockLabel.color, - }), - ); - }); - }); - }); - - describe('watchers', () => { - describe('isLabelSet', () => { - it('sets value of `isLabelSet` to `isSet` data prop', () => { - expect(wrapper.vm.isSet).toBe(true); - - wrapper.setProps({ - isLabelSet: false, - }); - - return wrapper.vm.$nextTick(() => { - expect(wrapper.vm.isSet).toBe(false); - }); - }); - }); - }); - - describe('methods', () => { - describe('handleClick', () => { - it('sets value of `isSet` data prop to opposite of its current value', () => { - wrapper.setData({ - isSet: true, - }); - - wrapper.vm.handleClick(); - expect(wrapper.vm.isSet).toBe(false); - wrapper.vm.handleClick(); - expect(wrapper.vm.isSet).toBe(true); - }); - - it('emits event `clickLabel` on component with `label` prop as param', () => { - wrapper.vm.handleClick(); - - expect(wrapper.emitted('clickLabel')).toBeTruthy(); - expect(wrapper.emitted('clickLabel')[0]).toEqual([mockLabel]); - }); - }); - }); - describe('template', () => { it('renders gl-link component', () => { expect(wrapper.find(GlLink).exists()).toBe(true); }); - it('renders gl-link component with class `is-focused` when `highlight` prop is true', () => { - wrapper.setProps({ + it('renders component root with class `is-focused` when `highlight` prop is true', () => { + const wrapperTemp = createComponent({ highlight: true, }); - return wrapper.vm.$nextTick(() => { - expect(wrapper.find(GlLink).classes()).toContain('is-focused'); - }); + expect(wrapperTemp.classes()).toContain('is-focused'); + + wrapperTemp.destroy(); }); - it('renders visible gl-icon component when `isSet` prop is true', () => { - wrapper.setData({ - isSet: true, + it('renders visible gl-icon component when `isLabelSet` prop is true', () => { + const wrapperTemp = createComponent({ + isLabelSet: true, }); - return wrapper.vm.$nextTick(() => { - const iconEl = wrapper.find(GlIcon); + const iconEl = wrapperTemp.find(GlIcon); - expect(iconEl.isVisible()).toBe(true); - expect(iconEl.props('name')).toBe('mobile-issue-close'); - }); + expect(iconEl.isVisible()).toBe(true); + expect(iconEl.props('name')).toBe('mobile-issue-close'); + + wrapperTemp.destroy(); }); - it('renders visible span element as placeholder instead of gl-icon when `isSet` prop is false', () => { - wrapper.setData({ - isSet: false, + it('renders visible span element as placeholder instead of gl-icon when `isLabelSet` prop is false', () => { + const wrapperTemp = createComponent({ + isLabelSet: false, }); - return wrapper.vm.$nextTick(() => { - const placeholderEl = wrapper.find('[data-testid="no-icon"]'); + const placeholderEl = wrapperTemp.find('[data-testid="no-icon"]'); - expect(placeholderEl.isVisible()).toBe(true); - }); + expect(placeholderEl.isVisible()).toBe(true); + + wrapperTemp.destroy(); }); it('renders label color element', () => { |