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
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
|
import { mount } from '@vue/test-utils';
import PackageTags from '~/packages_and_registries/shared/components/package_tags.vue';
import { mockTags } from 'jest/packages_and_registries/infrastructure_registry/components/mock_data';
describe('PackageTags', () => {
let wrapper;
function createComponent(tags = [], props = {}) {
const propsData = {
tags,
...props,
};
wrapper = mount(PackageTags, {
propsData,
});
}
const tagLabel = () => wrapper.find('[data-testid="tagLabel"]');
const tagBadges = () => wrapper.findAll('[data-testid="tagBadge"]');
const moreBadge = () => wrapper.find('[data-testid="moreBadge"]');
afterEach(() => {
if (wrapper) wrapper.destroy();
});
describe('tag label', () => {
it('shows the tag label by default', () => {
createComponent();
expect(tagLabel().exists()).toBe(true);
});
it('hides when hideLabel prop is set to true', () => {
createComponent(mockTags, { hideLabel: true });
expect(tagLabel().exists()).toBe(false);
});
});
it('renders the correct number of tags', () => {
createComponent(mockTags.slice(0, 2));
expect(tagBadges()).toHaveLength(2);
expect(moreBadge().exists()).toBe(false);
});
it('does not render more than the configured tagDisplayLimit', () => {
createComponent(mockTags);
expect(tagBadges()).toHaveLength(2);
});
it('renders the more tags badge if there are more than the configured limit', () => {
createComponent(mockTags);
expect(tagBadges()).toHaveLength(2);
expect(moreBadge().exists()).toBe(true);
expect(moreBadge().text()).toContain('2');
});
it('renders the configured tagDisplayLimit when set in props', () => {
createComponent(mockTags, { tagDisplayLimit: 1 });
expect(tagBadges()).toHaveLength(1);
expect(moreBadge().exists()).toBe(true);
expect(moreBadge().text()).toContain('3');
});
describe('tagBadgeStyle', () => {
const defaultStyle = ['badge', 'badge-info', 'gl-display-none'];
it('shows tag badge when there is only one', () => {
createComponent([mockTags[0]]);
const expectedStyle = [...defaultStyle, 'gl-display-flex', 'gl-ml-3'];
expect(tagBadges().at(0).classes()).toEqual(expect.arrayContaining(expectedStyle));
});
it('shows tag badge for medium or heigher resolutions', () => {
createComponent(mockTags);
const expectedStyle = [...defaultStyle, 'd-md-flex'];
expect(tagBadges().at(1).classes()).toEqual(expect.arrayContaining(expectedStyle));
});
it('correctly prepends left and appends right when there is more than one tag', () => {
createComponent(mockTags, {
tagDisplayLimit: 4,
});
const expectedStyleWithoutAppend = [...defaultStyle, 'd-md-flex'];
const expectedStyleWithAppend = [...expectedStyleWithoutAppend, 'gl-mr-2'];
const allBadges = tagBadges();
expect(allBadges.at(0).classes()).toEqual(
expect.arrayContaining([...expectedStyleWithAppend, 'gl-ml-3']),
);
expect(allBadges.at(1).classes()).toEqual(expect.arrayContaining(expectedStyleWithAppend));
expect(allBadges.at(2).classes()).toEqual(expect.arrayContaining(expectedStyleWithAppend));
expect(allBadges.at(3).classes()).toEqual(expect.arrayContaining(expectedStyleWithoutAppend));
});
});
});
|
