diff options
Diffstat (limited to 'spec/frontend/vue_shared/components/sidebar/labels_select_vue/label_item_spec.js')
-rw-r--r-- | spec/frontend/vue_shared/components/sidebar/labels_select_vue/label_item_spec.js | 98 |
1 files changed, 26 insertions, 72 deletions
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', () => { |