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
|
import Vue from 'vue';
import VueApollo from 'vue-apollo';
import { GlBadge } from '@gitlab/ui';
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 count for achievements awarded more than once', async () => {
createComponent({ queryHandler: jest.fn().mockResolvedValue(getUserAchievementsLongResponse) });
await waitForPromises();
expect(achievement().findComponent(GlBadge).text()).toBe('2x');
});
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);
});
});
|
