120 lines
3.2 KiB
JavaScript
120 lines
3.2 KiB
JavaScript
import { GlLoadingIcon, GlAlert } from '@gitlab/ui';
|
|
import * as GitLabUIUtils from '@gitlab/ui/dist/utils';
|
|
|
|
import ActivityCalendar from '~/profile/components/activity_calendar.vue';
|
|
import AjaxCache from '~/lib/utils/ajax_cache';
|
|
import { mountExtended } from 'helpers/vue_test_utils_helper';
|
|
import waitForPromises from 'helpers/wait_for_promises';
|
|
import { useFakeDate } from 'helpers/fake_date';
|
|
import { userCalendarResponse } from '../mock_data';
|
|
|
|
jest.mock('~/lib/utils/ajax_cache');
|
|
jest.mock('@gitlab/ui/dist/utils');
|
|
|
|
describe('ActivityCalendar', () => {
|
|
// Feb 21st, 2023
|
|
useFakeDate(2023, 1, 21);
|
|
|
|
let wrapper;
|
|
|
|
const defaultProvide = {
|
|
userCalendarPath: '/users/root/calendar.json',
|
|
utcOffset: '0',
|
|
};
|
|
|
|
const createComponent = () => {
|
|
wrapper = mountExtended(ActivityCalendar, { provide: defaultProvide });
|
|
};
|
|
|
|
const mockSuccessfulApiRequest = () =>
|
|
AjaxCache.retrieve.mockResolvedValueOnce(userCalendarResponse);
|
|
const mockUnsuccessfulApiRequest = () => AjaxCache.retrieve.mockRejectedValueOnce();
|
|
|
|
const findCalendar = () => wrapper.findByTestId('contrib-calendar');
|
|
|
|
describe('when API request is loading', () => {
|
|
beforeEach(() => {
|
|
AjaxCache.retrieve.mockReturnValueOnce(new Promise(() => {}));
|
|
});
|
|
|
|
it('renders loading icon', () => {
|
|
createComponent();
|
|
|
|
expect(wrapper.findComponent(GlLoadingIcon).exists()).toBe(true);
|
|
});
|
|
});
|
|
|
|
describe('when API request is successful', () => {
|
|
beforeEach(() => {
|
|
mockSuccessfulApiRequest();
|
|
});
|
|
|
|
it('renders the calendar', async () => {
|
|
createComponent();
|
|
|
|
await waitForPromises();
|
|
|
|
expect(findCalendar().exists()).toBe(true);
|
|
expect(wrapper.findByText(ActivityCalendar.i18n.calendarHint).exists()).toBe(true);
|
|
});
|
|
|
|
describe('when window is resized', () => {
|
|
it('re-renders the calendar', async () => {
|
|
createComponent();
|
|
|
|
await waitForPromises();
|
|
|
|
mockSuccessfulApiRequest();
|
|
window.innerWidth = 1200;
|
|
window.dispatchEvent(new Event('resize'));
|
|
|
|
await waitForPromises();
|
|
|
|
expect(findCalendar().exists()).toBe(true);
|
|
expect(AjaxCache.retrieve).toHaveBeenCalledTimes(2);
|
|
});
|
|
});
|
|
});
|
|
|
|
describe('when API request is not successful', () => {
|
|
beforeEach(() => {
|
|
mockUnsuccessfulApiRequest();
|
|
});
|
|
|
|
it('renders error', async () => {
|
|
createComponent();
|
|
|
|
await waitForPromises();
|
|
|
|
expect(wrapper.findComponent(GlAlert).exists()).toBe(true);
|
|
});
|
|
|
|
describe('when retry button is clicked', () => {
|
|
it('retries API request', async () => {
|
|
createComponent();
|
|
|
|
await waitForPromises();
|
|
|
|
mockSuccessfulApiRequest();
|
|
|
|
await wrapper.findByRole('button', { name: ActivityCalendar.i18n.retry }).trigger('click');
|
|
|
|
await waitForPromises();
|
|
|
|
expect(findCalendar().exists()).toBe(true);
|
|
});
|
|
});
|
|
});
|
|
|
|
describe('when screen is extra small', () => {
|
|
beforeEach(() => {
|
|
GitLabUIUtils.GlBreakpointInstance.getBreakpointSize.mockReturnValueOnce('xs');
|
|
});
|
|
|
|
it('does not render the calendar', () => {
|
|
createComponent();
|
|
|
|
expect(findCalendar().exists()).toBe(false);
|
|
});
|
|
});
|
|
});
|