1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
|
import { shallowMount } from '@vue/test-utils';
import { GlIcon } from '@gitlab/ui';
import { nextTick } from 'vue';
import { createMockDirective, getBinding } from 'helpers/vue_mock_directive';
import DropdownValueCollapsedComponent from '~/sidebar/components/labels/labels_select_vue/dropdown_value_collapsed.vue';
import { mockCollapsedLabels as mockLabels, mockRegularLabel } from './mock_data';
describe('DropdownValueCollapsedComponent', () => {
let wrapper;
const defaultProps = {
labels: [],
};
const mockManyLabels = [...mockLabels, ...mockLabels, ...mockLabels];
const createComponent = ({ props = {} } = {}) => {
wrapper = shallowMount(DropdownValueCollapsedComponent, {
propsData: { ...defaultProps, ...props },
directives: {
GlTooltip: createMockDirective(),
},
});
};
afterEach(() => {
wrapper.destroy();
});
const findGlIcon = () => wrapper.findComponent(GlIcon);
const getTooltip = () => getBinding(wrapper.element, 'gl-tooltip');
describe('template', () => {
it('renders tags icon element', () => {
createComponent();
expect(findGlIcon().exists()).toBe(true);
});
it('emits onValueClick event on click', async () => {
createComponent();
wrapper.trigger('click');
await nextTick();
expect(wrapper.emitted('onValueClick')[0]).toBeDefined();
});
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('renders labels count', () => {
expect(wrapper.text()).toBe(`${labels.length}`);
});
it(`renders "${expectedResult}" as tooltip`, () => {
expect(getTooltip().value).toBe(expectedText);
});
});
});
});
|
