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
|
import { GlTooltip, GlLink, GlIcon } from '@gitlab/ui';
import { shallowMount } from '@vue/test-utils';
import { TEST_HOST } from 'helpers/test_constants';
import Suggestion from '~/issuable_suggestions/components/item.vue';
import UserAvatarImage from '~/vue_shared/components/user_avatar/user_avatar_image.vue';
import mockData from '../mock_data';
describe('Issuable suggestions suggestion component', () => {
let wrapper;
function createComponent(suggestion = {}) {
wrapper = shallowMount(Suggestion, {
propsData: {
suggestion: {
...mockData(),
...suggestion,
},
},
});
}
const findLink = () => wrapper.findComponent(GlLink);
const findAuthorLink = () => wrapper.findAll(GlLink).at(1);
const findIcon = () => wrapper.findComponent(GlIcon);
const findTooltip = () => wrapper.findComponent(GlTooltip);
const findUserAvatar = () => wrapper.findComponent(UserAvatarImage);
afterEach(() => {
wrapper.destroy();
});
it('renders title', () => {
createComponent();
expect(wrapper.text()).toContain('Test issue');
});
it('renders issue link', () => {
createComponent();
expect(findLink().attributes('href')).toBe(`${TEST_HOST}/test/issue/1`);
});
it('renders IID', () => {
createComponent();
expect(wrapper.text()).toContain('#1');
});
describe('opened state', () => {
it('renders icon', () => {
createComponent();
expect(findIcon().props('name')).toBe('issue-open-m');
expect(findIcon().attributes('class')).toMatch('gl-text-green-500');
});
it('renders created timeago', () => {
createComponent({
closedAt: '',
});
expect(findTooltip().text()).toContain('Opened');
expect(findTooltip().text()).toContain('3 days ago');
});
});
describe('closed state', () => {
it('renders icon', () => {
createComponent({
state: 'closed',
});
expect(findIcon().props('name')).toBe('issue-close');
expect(findIcon().attributes('class')).toMatch('gl-text-blue-500');
});
it('renders closed timeago', () => {
createComponent();
expect(findTooltip().text()).toContain('Opened');
expect(findTooltip().text()).toContain('1 day ago');
});
});
describe('author', () => {
it('renders author info', () => {
createComponent();
expect(findAuthorLink().text()).toContain('Author Name');
expect(findAuthorLink().text()).toContain('@author.username');
});
it('renders author image', () => {
createComponent();
expect(findUserAvatar().props('imgSrc')).toBe(`${TEST_HOST}/avatar`);
});
});
describe('counts', () => {
it('renders upvotes count', () => {
createComponent();
const count = wrapper.findAll('.suggestion-counts span').at(0);
expect(count.text()).toContain('1');
expect(count.find(GlIcon).props('name')).toBe('thumb-up');
});
it('renders notes count', () => {
createComponent();
const count = wrapper.findAll('.suggestion-counts span').at(1);
expect(count.text()).toContain('2');
expect(count.find(GlIcon).props('name')).toBe('comment');
});
});
describe('confidential', () => {
it('renders confidential icon', () => {
createComponent({
confidential: true,
});
expect(findIcon().props('name')).toBe('eye-slash');
expect(findIcon().attributes('class')).toMatch('gl-text-orange-500');
expect(findIcon().attributes('title')).toBe('Confidential');
});
});
});
|
