diff options
author | Martin Hobert <info@dosh.dk> | 2019-04-26 14:54:20 +0200 |
---|---|---|
committer | Martin Hobert <info@dosh.dk> | 2019-04-26 14:54:20 +0200 |
commit | 4848c32ea00a9a5be587aec0f24214e56724c683 (patch) | |
tree | 0e0d08bd0c198956f9e19f708276008ac6a3233b /spec/frontend/vue_shared/components/sidebar/labels_select/dropdown_value_collapsed_spec.js | |
parent | f04f6909cebac79704081bc4787099c613a70cf7 (diff) | |
download | gitlab-ce-4848c32ea00a9a5be587aec0f24214e56724c683.tar.gz |
refactor(sidebar): Refactored Karma spec files to Jest
fix #58830
Added changelog
Updated to use jest functions
Added mock implementation
Diffstat (limited to 'spec/frontend/vue_shared/components/sidebar/labels_select/dropdown_value_collapsed_spec.js')
-rw-r--r-- | spec/frontend/vue_shared/components/sidebar/labels_select/dropdown_value_collapsed_spec.js | 97 |
1 files changed, 97 insertions, 0 deletions
diff --git a/spec/frontend/vue_shared/components/sidebar/labels_select/dropdown_value_collapsed_spec.js b/spec/frontend/vue_shared/components/sidebar/labels_select/dropdown_value_collapsed_spec.js new file mode 100644 index 00000000000..517f2c01c46 --- /dev/null +++ b/spec/frontend/vue_shared/components/sidebar/labels_select/dropdown_value_collapsed_spec.js @@ -0,0 +1,97 @@ +import Vue from 'vue'; + +import dropdownValueCollapsedComponent from '~/vue_shared/components/sidebar/labels_select/dropdown_value_collapsed.vue'; + +import mountComponent from 'helpers/vue_mount_component_helper'; +import { mockLabels } from '../../../../../javascripts/vue_shared/components/sidebar/labels_select/mock_data'; + +const createComponent = (labels = mockLabels) => { + const Component = Vue.extend(dropdownValueCollapsedComponent); + + return mountComponent(Component, { + labels, + }); +}; + +describe('DropdownValueCollapsedComponent', () => { + let vm; + + beforeEach(() => { + vm = createComponent(); + }); + + afterEach(() => { + vm.$destroy(); + }); + + describe('computed', () => { + describe('labelsList', () => { + it('returns default text when `labels` prop is empty array', () => { + const vmEmptyLabels = createComponent([]); + + 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); + + const expectedText = labels.map(label => label.title).join(', '); + + expect(vmMoreLabels.labelsList).toBe(expectedText); + vmMoreLabels.$destroy(); + }); + + 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]); + } + + const vmMoreLabels = createComponent(mockMoreLabels); + + const expectedText = `${mockMoreLabels + .slice(0, 5) + .map(label => label.title) + .join(', ')}, and ${mockMoreLabels.length - 5} more`; + + expect(vmMoreLabels.labelsList).toBe(expectedText); + vmMoreLabels.$destroy(); + }); + + 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); + }); + }); + }); + + describe('methods', () => { + describe('handleClick', () => { + it('emits onValueClick event on component', () => { + jest.spyOn(vm, '$emit').mockImplementation(() => {}); + vm.handleClick(); + + expect(vm.$emit).toHaveBeenCalledWith('onValueClick'); + }); + }); + }); + + describe('template', () => { + it('renders component container element with tooltip`', () => { + expect(vm.$el.dataset.placement).toBe('left'); + expect(vm.$el.dataset.container).toBe('body'); + expect(vm.$el.dataset.originalTitle).toBe(vm.labelsList); + }); + + it('renders tags icon element', () => { + expect(vm.$el.querySelector('.fa-tags')).not.toBeNull(); + }); + + it('renders labels count', () => { + expect(vm.$el.querySelector('span').innerText.trim()).toBe(`${vm.labels.length}`); + }); + }); +}); |