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
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
|
import { shallowMount } from '@vue/test-utils';
import { GlButton } from '@gitlab/ui';
import component from '~/registry/explorer/components/details_page/tags_list.vue';
import TagsListRow from '~/registry/explorer/components/details_page/tags_list_row.vue';
import { TAGS_LIST_TITLE, REMOVE_TAGS_BUTTON_TITLE } from '~/registry/explorer/constants/index';
import { tagsListResponse } from '../../mock_data';
describe('Tags List', () => {
let wrapper;
const tags = [...tagsListResponse.data];
const readOnlyTags = tags.map(t => ({ ...t, destroy_path: undefined }));
const findTagsListRow = () => wrapper.findAll(TagsListRow);
const findDeleteButton = () => wrapper.find(GlButton);
const findListTitle = () => wrapper.find('[data-testid="list-title"]');
const mountComponent = (propsData = { tags, isDesktop: true }) => {
wrapper = shallowMount(component, {
propsData,
});
};
afterEach(() => {
wrapper.destroy();
wrapper = null;
});
describe('List title', () => {
it('exists', () => {
mountComponent();
expect(findListTitle().exists()).toBe(true);
});
it('has the correct text', () => {
mountComponent();
expect(findListTitle().text()).toBe(TAGS_LIST_TITLE);
});
});
describe('delete button', () => {
it.each`
inputTags | isDesktop | isVisible
${tags} | ${true} | ${true}
${tags} | ${false} | ${false}
${readOnlyTags} | ${true} | ${false}
${readOnlyTags} | ${false} | ${false}
`(
'is $isVisible that delete button exists when tags is $inputTags and isDesktop is $isDesktop',
({ inputTags, isDesktop, isVisible }) => {
mountComponent({ tags: inputTags, isDesktop });
expect(findDeleteButton().exists()).toBe(isVisible);
},
);
it('has the correct text', () => {
mountComponent();
expect(findDeleteButton().text()).toBe(REMOVE_TAGS_BUTTON_TITLE);
});
it('has the correct props', () => {
mountComponent();
expect(findDeleteButton().attributes()).toMatchObject({
category: 'secondary',
variant: 'danger',
});
});
it('is disabled when no item is selected', () => {
mountComponent();
expect(findDeleteButton().attributes('disabled')).toBe('true');
});
it('is enabled when at least one item is selected', async () => {
mountComponent();
findTagsListRow()
.at(0)
.vm.$emit('select');
await wrapper.vm.$nextTick();
expect(findDeleteButton().attributes('disabled')).toBe(undefined);
});
it('click event emits a deleted event with selected items', () => {
mountComponent();
findTagsListRow()
.at(0)
.vm.$emit('select');
findDeleteButton().vm.$emit('click');
expect(wrapper.emitted('delete')).toEqual([[{ centos6: true }]]);
});
});
describe('list rows', () => {
it('one row exist for each tag', () => {
mountComponent();
expect(findTagsListRow()).toHaveLength(tags.length);
});
it('the correct props are bound to it', () => {
mountComponent();
const rows = findTagsListRow();
expect(rows.at(0).attributes()).toMatchObject({
first: 'true',
isdesktop: 'true',
});
// The list has only two tags and for some reasons .at(-1) does not work
expect(rows.at(1).attributes()).toMatchObject({
last: 'true',
isdesktop: 'true',
});
});
describe('events', () => {
it('select event update the selected items', async () => {
mountComponent();
findTagsListRow()
.at(0)
.vm.$emit('select');
await wrapper.vm.$nextTick();
expect(
findTagsListRow()
.at(0)
.attributes('selected'),
).toBe('true');
});
it('delete event emit a delete event', () => {
mountComponent();
findTagsListRow()
.at(0)
.vm.$emit('delete');
expect(wrapper.emitted('delete')).toEqual([[{ centos6: true }]]);
});
});
});
});
|
