debian-mirror-gitlab/spec/frontend/releases/components/app_index_spec.js

211 lines
6.3 KiB
JavaScript
Raw Normal View History

2020-04-08 14:13:33 +05:30
import { range as rge } from 'lodash';
2020-11-24 15:15:51 +05:30
import Vuex from 'vuex';
import { shallowMount, createLocalVue } from '@vue/test-utils';
2020-10-24 23:57:45 +05:30
import waitForPromises from 'helpers/wait_for_promises';
2021-01-03 14:25:43 +05:30
import { getJSONFixture } from 'helpers/fixtures';
2020-11-24 15:15:51 +05:30
import ReleasesApp from '~/releases/components/app_index.vue';
2020-03-13 15:44:24 +05:30
import createStore from '~/releases/stores';
2020-11-24 15:15:51 +05:30
import createListModule from '~/releases/stores/modules/list';
2019-02-15 15:39:39 +05:30
import api from '~/api';
2021-01-03 14:25:43 +05:30
import { pageInfoHeadersWithoutPagination, pageInfoHeadersWithPagination } from '../mock_data';
2020-04-08 14:13:33 +05:30
import { convertObjectPropsToCamelCase } from '~/lib/utils/common_utils';
2021-01-03 14:25:43 +05:30
import ReleasesPagination from '~/releases/components/releases_pagination.vue';
jest.mock('~/lib/utils/common_utils', () => ({
...jest.requireActual('~/lib/utils/common_utils'),
getParameterByName: jest.fn().mockImplementation(paramName => {
return `${paramName}_param_value`;
}),
}));
2020-11-24 15:15:51 +05:30
const localVue = createLocalVue();
localVue.use(Vuex);
2019-02-15 15:39:39 +05:30
2021-01-03 14:25:43 +05:30
const release = getJSONFixture('api/releases/release.json');
const releases = [release];
2019-02-15 15:39:39 +05:30
describe('Releases App ', () => {
2020-11-24 15:15:51 +05:30
let wrapper;
let fetchReleaseSpy;
2021-01-03 14:25:43 +05:30
const paginatedReleases = rge(21).map(index => ({
2020-11-24 15:15:51 +05:30
...convertObjectPropsToCamelCase(release, { deep: true }),
tagName: `${index}.00`,
}));
2019-02-15 15:39:39 +05:30
2020-11-24 15:15:51 +05:30
const defaultInitialState = {
2019-02-15 15:39:39 +05:30
projectId: 'gitlab-ce',
2020-11-24 15:15:51 +05:30
projectPath: 'gitlab-org/gitlab-ce',
2020-04-08 14:13:33 +05:30
documentationPath: 'help/releases',
2019-02-15 15:39:39 +05:30
illustrationPath: 'illustration/path',
};
2020-11-24 15:15:51 +05:30
const createComponent = (stateUpdates = {}) => {
const listModule = createListModule({
...defaultInitialState,
...stateUpdates,
});
fetchReleaseSpy = jest.spyOn(listModule.actions, 'fetchReleases');
const store = createStore({
modules: { list: listModule },
featureFlags: {
graphqlReleaseData: true,
graphqlReleasesPage: false,
graphqlMilestoneStats: true,
},
});
wrapper = shallowMount(ReleasesApp, {
store,
localVue,
});
};
2019-02-15 15:39:39 +05:30
afterEach(() => {
2020-11-24 15:15:51 +05:30
wrapper.destroy();
});
describe('on startup', () => {
beforeEach(() => {
jest
.spyOn(api, 'releases')
.mockResolvedValue({ data: releases, headers: pageInfoHeadersWithoutPagination });
createComponent();
});
2021-01-03 14:25:43 +05:30
it('calls fetchRelease with the page, before, and after parameters', () => {
2020-11-24 15:15:51 +05:30
expect(fetchReleaseSpy).toHaveBeenCalledTimes(1);
2021-01-03 14:25:43 +05:30
expect(fetchReleaseSpy).toHaveBeenCalledWith(expect.anything(), {
page: 'page_param_value',
before: 'before_param_value',
after: 'after_param_value',
});
2020-11-24 15:15:51 +05:30
});
2019-02-15 15:39:39 +05:30
});
describe('while loading', () => {
beforeEach(() => {
2020-06-23 00:09:42 +05:30
jest
.spyOn(api, 'releases')
// Need to defer the return value here to the next stack,
// otherwise the loading state disappears before our test even starts.
.mockImplementation(() => waitForPromises().then(() => ({ data: [], headers: {} })));
2020-11-24 15:15:51 +05:30
createComponent();
2019-02-15 15:39:39 +05:30
});
2020-06-23 00:09:42 +05:30
it('renders loading icon', () => {
2020-11-24 15:15:51 +05:30
expect(wrapper.contains('.js-loading')).toBe(true);
expect(wrapper.contains('.js-empty-state')).toBe(false);
expect(wrapper.contains('.js-success-state')).toBe(false);
2021-01-03 14:25:43 +05:30
expect(wrapper.contains(ReleasesPagination)).toBe(false);
2019-02-15 15:39:39 +05:30
});
});
describe('with successful request', () => {
beforeEach(() => {
2020-06-23 00:09:42 +05:30
jest
.spyOn(api, 'releases')
.mockResolvedValue({ data: releases, headers: pageInfoHeadersWithoutPagination });
2020-11-24 15:15:51 +05:30
createComponent();
2020-01-01 13:55:28 +05:30
});
2020-06-23 00:09:42 +05:30
it('renders success state', () => {
2020-11-24 15:15:51 +05:30
expect(wrapper.contains('.js-loading')).toBe(false);
expect(wrapper.contains('.js-empty-state')).toBe(false);
expect(wrapper.contains('.js-success-state')).toBe(true);
2021-01-03 14:25:43 +05:30
expect(wrapper.contains(ReleasesPagination)).toBe(true);
2020-01-01 13:55:28 +05:30
});
});
describe('with successful request and pagination', () => {
beforeEach(() => {
2020-06-23 00:09:42 +05:30
jest
.spyOn(api, 'releases')
2021-01-03 14:25:43 +05:30
.mockResolvedValue({ data: paginatedReleases, headers: pageInfoHeadersWithPagination });
2020-11-24 15:15:51 +05:30
createComponent();
2019-02-15 15:39:39 +05:30
});
2020-06-23 00:09:42 +05:30
it('renders success state', () => {
2020-11-24 15:15:51 +05:30
expect(wrapper.contains('.js-loading')).toBe(false);
expect(wrapper.contains('.js-empty-state')).toBe(false);
expect(wrapper.contains('.js-success-state')).toBe(true);
2021-01-03 14:25:43 +05:30
expect(wrapper.contains(ReleasesPagination)).toBe(true);
2019-02-15 15:39:39 +05:30
});
});
describe('with empty request', () => {
beforeEach(() => {
2020-06-23 00:09:42 +05:30
jest.spyOn(api, 'releases').mockResolvedValue({ data: [], headers: {} });
2020-11-24 15:15:51 +05:30
createComponent();
2019-02-15 15:39:39 +05:30
});
2020-06-23 00:09:42 +05:30
it('renders empty state', () => {
2020-11-24 15:15:51 +05:30
expect(wrapper.contains('.js-loading')).toBe(false);
expect(wrapper.contains('.js-empty-state')).toBe(true);
expect(wrapper.contains('.js-success-state')).toBe(false);
2020-04-08 14:13:33 +05:30
});
});
describe('"New release" button', () => {
2020-11-24 15:15:51 +05:30
const findNewReleaseButton = () => wrapper.find('.js-new-release-btn');
2020-04-08 14:13:33 +05:30
beforeEach(() => {
2020-06-23 00:09:42 +05:30
jest.spyOn(api, 'releases').mockResolvedValue({ data: [], headers: {} });
2020-04-08 14:13:33 +05:30
});
describe('when the user is allowed to create a new Release', () => {
const newReleasePath = 'path/to/new/release';
beforeEach(() => {
2021-01-03 14:25:43 +05:30
createComponent({ newReleasePath });
2020-04-08 14:13:33 +05:30
});
2020-06-23 00:09:42 +05:30
it('renders the "New release" button', () => {
2020-11-24 15:15:51 +05:30
expect(findNewReleaseButton().exists()).toBe(true);
2020-04-08 14:13:33 +05:30
});
2020-06-23 00:09:42 +05:30
it('renders the "New release" button with the correct href', () => {
2020-11-24 15:15:51 +05:30
expect(findNewReleaseButton().attributes('href')).toBe(newReleasePath);
2020-04-08 14:13:33 +05:30
});
});
describe('when the user is not allowed to create a new Release', () => {
2020-11-24 15:15:51 +05:30
beforeEach(() => createComponent());
2020-04-08 14:13:33 +05:30
2020-06-23 00:09:42 +05:30
it('does not render the "New release" button', () => {
2020-11-24 15:15:51 +05:30
expect(findNewReleaseButton().exists()).toBe(false);
2020-04-08 14:13:33 +05:30
});
2019-02-15 15:39:39 +05:30
});
});
2021-01-03 14:25:43 +05:30
describe('when the back button is pressed', () => {
beforeEach(() => {
jest
.spyOn(api, 'releases')
.mockResolvedValue({ data: releases, headers: pageInfoHeadersWithoutPagination });
createComponent();
fetchReleaseSpy.mockClear();
window.dispatchEvent(new PopStateEvent('popstate'));
});
it('calls fetchRelease with the page parameter', () => {
expect(fetchReleaseSpy).toHaveBeenCalledTimes(1);
expect(fetchReleaseSpy).toHaveBeenCalledWith(expect.anything(), {
page: 'page_param_value',
before: 'before_param_value',
after: 'after_param_value',
});
});
});
2019-02-15 15:39:39 +05:30
});