102 lines
3.8 KiB
JavaScript
102 lines
3.8 KiB
JavaScript
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 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 timeagoMixin from '~/vue_shared/mixins/timeago';
|
|
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 achievement correctly', async () => {
|
|
createComponent();
|
|
|
|
await waitForPromises();
|
|
|
|
expect(achievement().text()).toContain(userAchievement1.achievement.name);
|
|
expect(achievement().text()).toContain(
|
|
`Awarded ${timeagoMixin.methods.timeFormatted(userAchievement1.createdAt)} 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);
|
|
});
|
|
});
|