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
|
import { GlAvatarLabeled, GlDropdown, GlDropdownItem } from '@gitlab/ui';
import { shallowMount } from '@vue/test-utils';
import TopicSelect from '~/admin/topics/components/topic_select.vue';
const mockTopics = [
{ id: 1, name: 'topic1', title: 'Topic 1', avatarUrl: 'avatar.com/topic1.png' },
{ id: 2, name: 'GitLab', title: 'GitLab', avatarUrl: 'avatar.com/GitLab.png' },
];
describe('TopicSelect', () => {
let wrapper;
const findDropdown = () => wrapper.findComponent(GlDropdown);
const findAllDropdownItems = () => wrapper.findAllComponents(GlDropdownItem);
function createComponent(props = {}) {
wrapper = shallowMount(TopicSelect, {
propsData: props,
data() {
return {
topics: mockTopics,
search: '',
};
},
mocks: {
$apollo: {
queries: {
topics: { loading: false },
},
},
},
});
}
afterEach(() => {
wrapper.destroy();
});
it('mounts', () => {
createComponent();
expect(wrapper.exists()).toBe(true);
});
it('`selectedTopic` prop defaults to `{}`', () => {
createComponent();
expect(wrapper.props('selectedTopic')).toEqual({});
});
it('`labelText` prop defaults to `null`', () => {
createComponent();
expect(wrapper.props('labelText')).toBe(null);
});
it('renders default text if no selected topic', () => {
createComponent();
expect(findDropdown().props('text')).toBe('Select a topic');
});
it('renders selected topic', () => {
createComponent({ selectedTopic: mockTopics[0] });
expect(findDropdown().props('text')).toBe('topic1');
});
it('renders label', () => {
createComponent({ labelText: 'my label' });
expect(wrapper.find('label').text()).toBe('my label');
});
it('renders dropdown items', () => {
createComponent();
const dropdownItems = findAllDropdownItems();
expect(dropdownItems.at(0).findComponent(GlAvatarLabeled).props('label')).toBe('Topic 1');
expect(dropdownItems.at(1).findComponent(GlAvatarLabeled).props('label')).toBe('GitLab');
});
it('emits `click` event when topic selected', () => {
createComponent();
findAllDropdownItems().at(0).vm.$emit('click');
expect(wrapper.emitted('click')).toEqual([[mockTopics[0]]]);
});
});
|
