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
|
import Vue from 'vue';
import VueApollo from 'vue-apollo';
import getUserAchievementsEmptyResponse from 'test_fixtures/graphql/get_user_achievements_empty_response.json';
import getUserAchievementsLongResponse from 'test_fixtures/graphql/get_user_achievements_long_response.json';
import getUserAchievementsResponse from 'test_fixtures/graphql/get_user_achievements_with_avatar_and_description_response.json';
import getUserAchievementsPrivateGroupResponse from 'test_fixtures/graphql/get_user_achievements_from_private_group.json';
import getUserAchievementsNoAvatarResponse from 'test_fixtures/graphql/get_user_achievements_without_avatar_or_description_response.json';
import createMockApollo from 'helpers/mock_apollo_helper';
import waitForPromises from 'helpers/wait_for_promises';
import UserAchievements from '~/profile/components/user_achievements.vue';
import getUserAchievements from '~/profile/components//graphql/get_user_achievements.query.graphql';
import { getTimeago, timeagoLanguageCode } from '~/lib/utils/datetime_utility';
import { mountExtended } from 'helpers/vue_test_utils_helper';
const USER_ID = 123;
const ROOT_URL = 'https://gitlab.com/';
const PLACEHOLDER_URL = 'https://gitlab.com/assets/gitlab_logo.png';
const userAchievement1 = getUserAchievementsResponse.data.user.userAchievements.nodes[0];
Vue.use(VueApollo);
describe('UserAchievements', () => {
let wrapper;
const getUserAchievementsQueryHandler = jest.fn().mockResolvedValue(getUserAchievementsResponse);
const achievement = () => wrapper.findByTestId('user-achievement');
const createComponent = ({ queryHandler = getUserAchievementsQueryHandler } = {}) => {
const fakeApollo = createMockApollo([[getUserAchievements, queryHandler]]);
wrapper = mountExtended(UserAchievements, {
apolloProvider: fakeApollo,
provide: {
rootUrl: ROOT_URL,
userId: USER_ID,
},
});
};
it('renders no achievements on reject', async () => {
createComponent({ queryHandler: jest.fn().mockRejectedValue('ERROR') });
await waitForPromises();
expect(wrapper.findAllByTestId('user-achievement').length).toBe(0);
});
it('renders no achievements when none are present', async () => {
createComponent({
queryHandler: jest.fn().mockResolvedValue(getUserAchievementsEmptyResponse),
});
await waitForPromises();
expect(wrapper.findAllByTestId('user-achievement').length).toBe(0);
});
it('only renders 3 achievements when more are present', async () => {
createComponent({ queryHandler: jest.fn().mockResolvedValue(getUserAchievementsLongResponse) });
await waitForPromises();
expect(wrapper.findAllByTestId('user-achievement').length).toBe(3);
});
it('renders correctly if the achievement is from a private namespace', async () => {
createComponent({
queryHandler: jest.fn().mockResolvedValue(getUserAchievementsPrivateGroupResponse),
});
await waitForPromises();
const userAchievement =
getUserAchievementsPrivateGroupResponse.data.user.userAchievements.nodes[0];
expect(achievement().text()).toContain(userAchievement.achievement.name);
expect(achievement().text()).toContain(
`Awarded ${getTimeago().format(
userAchievement.createdAt,
timeagoLanguageCode,
)} by a private namespace`,
);
});
it('renders achievement correctly', async () => {
createComponent();
await waitForPromises();
expect(achievement().text()).toContain(userAchievement1.achievement.name);
expect(achievement().text()).toContain(
`Awarded ${getTimeago().format(userAchievement1.createdAt, timeagoLanguageCode)} by`,
);
expect(achievement().text()).toContain(userAchievement1.achievement.namespace.fullPath);
expect(achievement().text()).toContain(userAchievement1.achievement.description);
expect(achievement().find('img').attributes('src')).toBe(
userAchievement1.achievement.avatarUrl,
);
});
it('renders a placeholder when no avatar is present', async () => {
gon.gitlab_logo = PLACEHOLDER_URL;
createComponent({
queryHandler: jest.fn().mockResolvedValue(getUserAchievementsNoAvatarResponse),
});
await waitForPromises();
expect(achievement().find('img').attributes('src')).toBe(PLACEHOLDER_URL);
});
it('does not render a description when none is present', async () => {
gon.gitlab_logo = PLACEHOLDER_URL;
createComponent({
queryHandler: jest.fn().mockResolvedValue(getUserAchievementsNoAvatarResponse),
});
await waitForPromises();
expect(wrapper.findAllByTestId('achievement-description').length).toBe(0);
});
});
|
