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
|
import { GlAvatarLabeled, GlAvatarLink, GlIcon } from '@gitlab/ui';
import { mountExtended } from 'helpers/vue_test_utils_helper';
import ContributionEventBase from '~/contribution_events/components/contribution_event/contribution_event_base.vue';
import TimeAgoTooltip from '~/vue_shared/components/time_ago_tooltip.vue';
import TargetLink from '~/contribution_events/components/target_link.vue';
import ResourceParentLink from '~/contribution_events/components/resource_parent_link.vue';
import { eventApproved } from '../../utils';
describe('ContributionEventBase', () => {
let wrapper;
const defaultPropsData = {
event: eventApproved(),
iconName: 'approval-solid',
iconClass: 'gl-text-green-500',
message: 'Approved merge request %{targetLink} in %{resourceParentLink}.',
};
const createComponent = ({ propsData = {} } = {}) => {
wrapper = mountExtended(ContributionEventBase, {
propsData: {
...defaultPropsData,
...propsData,
},
scopedSlots: {
default: '<div data-testid="default-slot"></div>',
'additional-info': '<div data-testid="additional-info-slot"></div>',
},
});
};
it('renders avatar', () => {
createComponent();
const avatarLink = wrapper.findComponent(GlAvatarLink);
const avatarLabeled = avatarLink.findComponent(GlAvatarLabeled);
expect(avatarLink.attributes('href')).toBe(defaultPropsData.event.author.web_url);
expect(avatarLabeled.attributes()).toMatchObject({
src: defaultPropsData.event.author.avatar_url,
size: '24',
});
expect(avatarLabeled.props()).toMatchObject({
label: defaultPropsData.event.author.name,
subLabel: `@${defaultPropsData.event.author.username}`,
});
});
it('renders time ago tooltip', () => {
createComponent();
expect(wrapper.findComponent(TimeAgoTooltip).props('time')).toBe(
defaultPropsData.event.created_at,
);
});
it('renders icon', () => {
createComponent();
const icon = wrapper.findComponent(GlIcon);
expect(icon.props('name')).toBe(defaultPropsData.iconName);
expect(icon.classes()).toContain(defaultPropsData.iconClass);
});
describe('when `message` prop is passed', () => {
beforeEach(() => {
createComponent();
});
it('renders message', () => {
expect(wrapper.findByTestId('event-body').text()).toBe(
`Approved merge request ${defaultPropsData.event.target.reference_link_text} in ${defaultPropsData.event.resource_parent.full_name}.`,
);
});
it('renders target link', () => {
expect(wrapper.findComponent(TargetLink).props('event')).toEqual(defaultPropsData.event);
});
it('renders resource parent link', () => {
expect(wrapper.findComponent(ResourceParentLink).props('event')).toEqual(
defaultPropsData.event,
);
});
});
describe('when `message` prop is not passed', () => {
beforeEach(() => {
createComponent({ propsData: { message: '' } });
});
it('renders `default` slot', () => {
expect(wrapper.findByTestId('default-slot').exists()).toBe(true);
});
});
it('renders `additional-info` slot', () => {
createComponent();
expect(wrapper.findByTestId('additional-info-slot').exists()).toBe(true);
});
});
|
