diff options
Diffstat (limited to 'spec/frontend/vue_shared/components/sidebar/labels_select_vue/dropdown_value_collapsed_spec.js')
-rw-r--r-- | spec/frontend/vue_shared/components/sidebar/labels_select_vue/dropdown_value_collapsed_spec.js | 121 |
1 files changed, 50 insertions, 71 deletions
diff --git a/spec/frontend/vue_shared/components/sidebar/labels_select_vue/dropdown_value_collapsed_spec.js b/spec/frontend/vue_shared/components/sidebar/labels_select_vue/dropdown_value_collapsed_spec.js index 8c1693e8dcc..a7f9391cb5f 100644 --- a/spec/frontend/vue_shared/components/sidebar/labels_select_vue/dropdown_value_collapsed_spec.js +++ b/spec/frontend/vue_shared/components/sidebar/labels_select_vue/dropdown_value_collapsed_spec.js @@ -1,95 +1,74 @@ -import Vue from 'vue'; +import { shallowMount } from '@vue/test-utils'; +import { GlIcon } from '@gitlab/ui'; +import { createMockDirective, getBinding } from 'helpers/vue_mock_directive'; +import DropdownValueCollapsedComponent from '~/vue_shared/components/sidebar/labels_select_vue/dropdown_value_collapsed.vue'; -import mountComponent from 'helpers/vue_mount_component_helper'; -import dropdownValueCollapsedComponent from '~/vue_shared/components/sidebar/labels_select_vue/dropdown_value_collapsed.vue'; +import { mockCollapsedLabels as mockLabels, mockRegularLabel } from './mock_data'; -import { mockCollapsedLabels as mockLabels } from './mock_data'; - -const createComponent = (labels = mockLabels) => { - const Component = Vue.extend(dropdownValueCollapsedComponent); +describe('DropdownValueCollapsedComponent', () => { + let wrapper; - return mountComponent(Component, { - labels, - }); -}; + const defaultProps = { + labels: [], + }; -describe('DropdownValueCollapsedComponent', () => { - let vm; + const mockManyLabels = [...mockLabels, ...mockLabels, ...mockLabels]; - beforeEach(() => { - vm = createComponent(); - }); + const createComponent = ({ props = {} } = {}) => { + wrapper = shallowMount(DropdownValueCollapsedComponent, { + propsData: { ...defaultProps, ...props }, + directives: { + GlTooltip: createMockDirective(), + }, + }); + }; afterEach(() => { - vm.$destroy(); + wrapper.destroy(); }); - describe('computed', () => { - describe('labelsList', () => { - it('returns default text when `labels` prop is empty array', () => { - const vmEmptyLabels = createComponent([]); + const findGlIcon = () => wrapper.findComponent(GlIcon); + const getTooltip = () => getBinding(wrapper.element, 'gl-tooltip'); - expect(vmEmptyLabels.labelsList).toBe('Labels'); - vmEmptyLabels.$destroy(); - }); - - it('returns labels names separated by coma when `labels` prop has more than one item', () => { - const labels = mockLabels.concat(mockLabels); - const vmMoreLabels = createComponent(labels); + describe('template', () => { + it('renders tags icon element', () => { + createComponent(); - const expectedText = labels.map((label) => label.title).join(', '); + expect(findGlIcon().exists()).toBe(true); + }); - expect(vmMoreLabels.labelsList).toBe(expectedText); - vmMoreLabels.$destroy(); - }); + it('emits onValueClick event on click', async () => { + createComponent(); - it('returns labels names separated by coma with remaining labels count and `and more` phrase when `labels` prop has more than five items', () => { - const mockMoreLabels = Object.assign([], mockLabels); - for (let i = 0; i < 6; i += 1) { - mockMoreLabels.unshift(mockLabels[0]); - } + wrapper.trigger('click'); - const vmMoreLabels = createComponent(mockMoreLabels); + await wrapper.vm.$nextTick(); - const expectedText = `${mockMoreLabels - .slice(0, 5) - .map((label) => label.title) - .join(', ')}, and ${mockMoreLabels.length - 5} more`; + expect(wrapper.emitted('onValueClick')[0]).toBeDefined(); + }); - expect(vmMoreLabels.labelsList).toBe(expectedText); - vmMoreLabels.$destroy(); + describe.each` + scenario | labels | expectedResult | expectedText + ${'`labels` is empty'} | ${[]} | ${'default text'} | ${'Labels'} + ${'`labels` has 1 item'} | ${[mockRegularLabel]} | ${'label name'} | ${'Foo Label'} + ${'`labels` has 2 items'} | ${mockLabels} | ${'comma separated label names'} | ${'Foo Label, Foo::Bar'} + ${'`labels` has more than 5 items'} | ${mockManyLabels} | ${'comma separated label names with "and more" phrase'} | ${'Foo Label, Foo::Bar, Foo Label, Foo::Bar, Foo Label, and 1 more'} + `('when $scenario', ({ labels, expectedResult, expectedText }) => { + beforeEach(() => { + createComponent({ + props: { + labels, + }, + }); }); - it('returns first label name when `labels` prop has only one item present', () => { - const text = mockLabels.map((label) => label.title).join(', '); - - expect(vm.labelsList).toBe(text); + it('renders labels count', () => { + expect(wrapper.text()).toBe(`${labels.length}`); }); - }); - }); - - describe('methods', () => { - describe('handleClick', () => { - it('emits onValueClick event on component', () => { - jest.spyOn(vm, '$emit').mockImplementation(() => {}); - vm.handleClick(); - expect(vm.$emit).toHaveBeenCalledWith('onValueClick'); + it(`renders "${expectedResult}" as tooltip`, () => { + expect(getTooltip().value).toBe(expectedText); }); }); }); - - describe('template', () => { - it('renders component container element with tooltip`', () => { - expect(vm.$el.title).toBe(vm.labelsList); - }); - - it('renders tags icon element', () => { - expect(vm.$el.querySelector('[data-testid="labels-icon"]')).not.toBeNull(); - }); - - it('renders labels count', () => { - expect(vm.$el.querySelector('span').innerText.trim()).toBe(`${vm.labels.length}`); - }); - }); }); |