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
|
import { GlLink } from '@gitlab/ui';
import { shallowMountExtended } from 'helpers/vue_test_utils_helper';
import { TEST_HOST } from 'spec/test_constants';
import UserAvatarImage from '~/vue_shared/components/user_avatar/user_avatar_image.vue';
import UserAvatarLink from '~/vue_shared/components/user_avatar/user_avatar_link_old.vue';
describe('User Avatar Link Component', () => {
let wrapper;
const findUserName = () => wrapper.find('[data-testid="user-avatar-link-username"]');
const defaultProps = {
linkHref: `${TEST_HOST}/myavatarurl.com`,
imgSize: 32,
imgSrc: `${TEST_HOST}/myavatarurl.com`,
imgAlt: 'mydisplayname',
imgCssClasses: 'myextraavatarclass',
tooltipText: 'tooltip text',
tooltipPlacement: 'bottom',
username: 'username',
};
const createWrapper = (props, slots) => {
wrapper = shallowMountExtended(UserAvatarLink, {
propsData: {
...defaultProps,
...props,
...slots,
},
});
};
beforeEach(() => {
createWrapper();
});
afterEach(() => {
wrapper.destroy();
});
it('should render GlLink with correct props', () => {
const link = wrapper.findComponent(GlLink);
expect(link.exists()).toBe(true);
expect(link.attributes('href')).toBe(defaultProps.linkHref);
});
it('should render UserAvatarImage and povide correct props to it', () => {
expect(wrapper.findComponent(UserAvatarImage).exists()).toBe(true);
expect(wrapper.findComponent(UserAvatarImage).props()).toEqual({
cssClasses: defaultProps.imgCssClasses,
imgAlt: defaultProps.imgAlt,
imgSrc: defaultProps.imgSrc,
lazy: false,
size: defaultProps.imgSize,
tooltipPlacement: defaultProps.tooltipPlacement,
tooltipText: '',
});
});
describe('when username provided', () => {
beforeEach(() => {
createWrapper({ username: defaultProps.username });
});
it('should render provided username', () => {
expect(findUserName().text()).toBe(defaultProps.username);
});
it('should provide the tooltip data for the username', () => {
expect(findUserName().attributes()).toEqual(
expect.objectContaining({
title: defaultProps.tooltipText,
'tooltip-placement': defaultProps.tooltipPlacement,
}),
);
});
});
describe('when username is NOT provided', () => {
beforeEach(() => {
createWrapper({ username: '' });
});
it('should NOT render username', () => {
expect(findUserName().exists()).toBe(false);
});
});
describe('avatar-badge slot', () => {
const badge = '<span>User badge</span>';
beforeEach(() => {
createWrapper(defaultProps, {
'avatar-badge': badge,
});
});
it('should render provided `avatar-badge` slot content', () => {
expect(wrapper.html()).toContain(badge);
});
});
});
|
