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
|
import { GlButton, GlAvatarLink, GlTooltip } from '@gitlab/ui';
import { shallowMount } from '@vue/test-utils';
import { extendedWrapper } from 'helpers/vue_test_utils_helper';
import CiBadgeLink from '~/vue_shared/components/ci_badge_link.vue';
import JobHeader from '~/ci/job_details/components/job_header.vue';
import TimeagoTooltip from '~/vue_shared/components/time_ago_tooltip.vue';
describe('Header CI Component', () => {
let wrapper;
const defaultProps = {
status: {
group: 'failed',
icon: 'status_failed',
label: 'failed',
text: 'failed',
details_path: 'path',
},
name: 'build_job',
time: '2017-05-08T14:57:39.781Z',
user: {
id: 1234,
web_url: 'path',
name: 'Foo',
username: 'foobar',
email: 'foo@bar.com',
avatar_url: 'link',
},
shouldRenderTriggeredLabel: true,
};
const findCiBadgeLink = () => wrapper.findComponent(CiBadgeLink);
const findTimeAgo = () => wrapper.findComponent(TimeagoTooltip);
const findUserLink = () => wrapper.findComponent(GlAvatarLink);
const findSidebarToggleBtn = () => wrapper.findComponent(GlButton);
const findStatusTooltip = () => wrapper.findComponent(GlTooltip);
const findJobName = () => wrapper.findByTestId('job-name');
const createComponent = (props) => {
wrapper = extendedWrapper(
shallowMount(JobHeader, {
propsData: {
...defaultProps,
...props,
},
}),
);
};
describe('render', () => {
beforeEach(() => {
createComponent();
});
it('renders the correct job name', () => {
expect(findJobName().text()).toBe(defaultProps.name);
});
it('should render status badge', () => {
expect(findCiBadgeLink().exists()).toBe(true);
});
it('should render timeago date', () => {
expect(findTimeAgo().exists()).toBe(true);
});
it('should render sidebar toggle button', () => {
expect(findSidebarToggleBtn().exists()).toBe(true);
});
});
describe('user avatar', () => {
beforeEach(() => {
createComponent();
});
it('contains the username', () => {
expect(findUserLink().text()).toContain(defaultProps.user.username);
});
it('has the correct HTML attributes', () => {
expect(findUserLink().attributes()).toMatchObject({
'data-user-id': defaultProps.user.id.toString(),
'data-username': defaultProps.user.username,
'data-name': defaultProps.user.name,
href: defaultProps.user.web_url,
});
});
describe('when the user has a status', () => {
const STATUS_MESSAGE = 'Working on exciting features...';
beforeEach(() => {
createComponent({
user: { ...defaultProps.user, status: { message: STATUS_MESSAGE } },
});
});
it('renders a tooltip', () => {
expect(findStatusTooltip().text()).toBe(STATUS_MESSAGE);
});
});
describe('with data from GraphQL', () => {
const userId = 1;
beforeEach(() => {
createComponent({
user: { ...defaultProps.user, id: `gid://gitlab/User/${1}` },
});
});
it('has the correct user id', () => {
expect(findUserLink().attributes('data-user-id')).toBe(userId.toString());
});
});
describe('with data from REST', () => {
it('has the correct user id', () => {
expect(findUserLink().attributes('data-user-id')).toBe(defaultProps.user.id.toString());
});
});
});
describe('shouldRenderTriggeredLabel', () => {
it('should render created keyword when the shouldRenderTriggeredLabel is false', () => {
createComponent({ shouldRenderTriggeredLabel: false });
expect(wrapper.text()).toContain('Created');
expect(wrapper.text()).not.toContain('Started');
});
});
});
|
