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

232 lines
6.3 KiB
JavaScript
Raw Normal View History

2021-06-08 01:23:25 +05:30
import { shallowMount } from '@vue/test-utils';
import { merge } from 'lodash';
import Vue from 'vue';
2020-11-24 15:15:51 +05:30
import Vuex from 'vuex';
2021-09-30 23:02:18 +05:30
import { getParameterByName } from '~/lib/utils/url_utility';
2021-06-08 01:23:25 +05:30
import AppIndex from '~/releases/components/app_index.vue';
import ReleaseSkeletonLoader from '~/releases/components/release_skeleton_loader.vue';
2021-03-11 19:13:27 +05:30
import ReleasesPagination from '~/releases/components/releases_pagination.vue';
2021-06-08 01:23:25 +05:30
import ReleasesSort from '~/releases/components/releases_sort.vue';
2021-01-03 14:25:43 +05:30
2021-09-30 23:02:18 +05:30
jest.mock('~/lib/utils/url_utility', () => ({
...jest.requireActual('~/lib/utils/url_utility'),
2021-06-08 01:23:25 +05:30
getParameterByName: jest.fn(),
2021-01-03 14:25:43 +05:30
}));
2020-11-24 15:15:51 +05:30
2021-06-08 01:23:25 +05:30
Vue.use(Vuex);
2019-02-15 15:39:39 +05:30
2021-06-08 01:23:25 +05:30
describe('app_index.vue', () => {
2020-11-24 15:15:51 +05:30
let wrapper;
2021-06-08 01:23:25 +05:30
let fetchReleasesSpy;
let urlParams;
const createComponent = (storeUpdates) => {
wrapper = shallowMount(AppIndex, {
store: new Vuex.Store({
modules: {
index: merge(
{
namespaced: true,
actions: {
fetchReleases: fetchReleasesSpy,
},
state: {
isLoading: true,
releases: [],
},
},
storeUpdates,
),
},
}),
});
2019-02-15 15:39:39 +05:30
};
2021-06-08 01:23:25 +05:30
beforeEach(() => {
fetchReleasesSpy = jest.fn();
getParameterByName.mockImplementation((paramName) => urlParams[paramName]);
});
afterEach(() => {
wrapper.destroy();
});
// Finders
const findLoadingIndicator = () => wrapper.find(ReleaseSkeletonLoader);
const findEmptyState = () => wrapper.find('[data-testid="empty-state"]');
const findSuccessState = () => wrapper.find('[data-testid="success-state"]');
const findPagination = () => wrapper.find(ReleasesPagination);
const findSortControls = () => wrapper.find(ReleasesSort);
const findNewReleaseButton = () => wrapper.find('[data-testid="new-release-button"]');
// Expectations
const expectLoadingIndicator = (shouldExist) => {
it(`${shouldExist ? 'renders' : 'does not render'} a loading indicator`, () => {
expect(findLoadingIndicator().exists()).toBe(shouldExist);
2020-11-24 15:15:51 +05:30
});
2021-06-08 01:23:25 +05:30
};
2020-11-24 15:15:51 +05:30
2021-06-08 01:23:25 +05:30
const expectEmptyState = (shouldExist) => {
it(`${shouldExist ? 'renders' : 'does not render'} an empty state`, () => {
expect(findEmptyState().exists()).toBe(shouldExist);
});
};
2020-11-24 15:15:51 +05:30
2021-06-08 01:23:25 +05:30
const expectSuccessState = (shouldExist) => {
it(`${shouldExist ? 'renders' : 'does not render'} the success state`, () => {
expect(findSuccessState().exists()).toBe(shouldExist);
2020-11-24 15:15:51 +05:30
});
2021-06-08 01:23:25 +05:30
};
2020-11-24 15:15:51 +05:30
2021-06-08 01:23:25 +05:30
const expectPagination = (shouldExist) => {
it(`${shouldExist ? 'renders' : 'does not render'} the pagination controls`, () => {
expect(findPagination().exists()).toBe(shouldExist);
2020-11-24 15:15:51 +05:30
});
};
2019-02-15 15:39:39 +05:30
2021-06-08 01:23:25 +05:30
const expectNewReleaseButton = (shouldExist) => {
it(`${shouldExist ? 'renders' : 'does not render'} the "New release" button`, () => {
expect(findNewReleaseButton().exists()).toBe(shouldExist);
});
};
2020-11-24 15:15:51 +05:30
2021-06-08 01:23:25 +05:30
// Tests
2020-11-24 15:15:51 +05:30
describe('on startup', () => {
2021-06-08 01:23:25 +05:30
it.each`
before | after
${null} | ${null}
${'before_param_value'} | ${null}
${null} | ${'after_param_value'}
`(
'calls fetchRelease with the correct parameters based on the curent query parameters: before: $before, after: $after',
({ before, after }) => {
urlParams = { before, after };
createComponent();
expect(fetchReleasesSpy).toHaveBeenCalledTimes(1);
expect(fetchReleasesSpy).toHaveBeenCalledWith(expect.anything(), urlParams);
},
);
});
2020-11-24 15:15:51 +05:30
2021-06-08 01:23:25 +05:30
describe('when the request to fetch releases has not yet completed', () => {
beforeEach(() => {
2020-11-24 15:15:51 +05:30
createComponent();
});
2021-06-08 01:23:25 +05:30
expectLoadingIndicator(true);
expectEmptyState(false);
expectSuccessState(false);
expectPagination(false);
2019-02-15 15:39:39 +05:30
});
2021-06-08 01:23:25 +05:30
describe('when the request fails', () => {
2019-02-15 15:39:39 +05:30
beforeEach(() => {
2021-06-08 01:23:25 +05:30
createComponent({
state: {
isLoading: false,
hasError: true,
},
});
2019-02-15 15:39:39 +05:30
});
2021-06-08 01:23:25 +05:30
expectLoadingIndicator(false);
expectEmptyState(false);
expectSuccessState(false);
expectPagination(true);
2019-02-15 15:39:39 +05:30
});
2021-06-08 01:23:25 +05:30
describe('when the request succeeds but returns no releases', () => {
2019-02-15 15:39:39 +05:30
beforeEach(() => {
2021-06-08 01:23:25 +05:30
createComponent({
state: {
isLoading: false,
},
});
2020-01-01 13:55:28 +05:30
});
2021-06-08 01:23:25 +05:30
expectLoadingIndicator(false);
expectEmptyState(true);
expectSuccessState(false);
expectPagination(true);
2020-01-01 13:55:28 +05:30
});
2021-06-08 01:23:25 +05:30
describe('when the request succeeds and includes at least one release', () => {
2020-01-01 13:55:28 +05:30
beforeEach(() => {
2021-06-08 01:23:25 +05:30
createComponent({
state: {
isLoading: false,
releases: [{}],
},
});
2019-02-15 15:39:39 +05:30
});
2021-06-08 01:23:25 +05:30
expectLoadingIndicator(false);
expectEmptyState(false);
expectSuccessState(true);
expectPagination(true);
2019-02-15 15:39:39 +05:30
});
2021-06-08 01:23:25 +05:30
describe('sorting', () => {
2019-02-15 15:39:39 +05:30
beforeEach(() => {
2020-11-24 15:15:51 +05:30
createComponent();
2019-02-15 15:39:39 +05:30
});
2021-06-08 01:23:25 +05:30
it('renders the sort controls', () => {
expect(findSortControls().exists()).toBe(true);
2020-04-08 14:13:33 +05:30
});
2021-06-08 01:23:25 +05:30
it('calls the fetchReleases store method when the sort is updated', () => {
fetchReleasesSpy.mockClear();
2020-04-08 14:13:33 +05:30
2021-06-08 01:23:25 +05:30
findSortControls().vm.$emit('sort:changed');
expect(fetchReleasesSpy).toHaveBeenCalledTimes(1);
2020-04-08 14:13:33 +05:30
});
2021-06-08 01:23:25 +05:30
});
2020-04-08 14:13:33 +05:30
2021-06-08 01:23:25 +05:30
describe('"New release" button', () => {
describe('when the user is allowed to create releases', () => {
const newReleasePath = 'path/to/new/release/page';
2020-04-08 14:13:33 +05:30
beforeEach(() => {
2021-06-08 01:23:25 +05:30
createComponent({ state: { newReleasePath } });
2020-04-08 14:13:33 +05:30
});
2021-06-08 01:23:25 +05:30
expectNewReleaseButton(true);
2020-04-08 14:13:33 +05:30
2021-06-08 01:23:25 +05:30
it('renders the 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
});
});
2021-06-08 01:23:25 +05:30
describe('when the user is not allowed to create releases', () => {
beforeEach(() => {
createComponent();
2020-04-08 14:13:33 +05:30
});
2021-06-08 01:23:25 +05:30
expectNewReleaseButton(false);
2019-02-15 15:39:39 +05:30
});
});
2021-01-03 14:25:43 +05:30
2021-06-08 01:23:25 +05:30
describe("when the browser's back button is pressed", () => {
2021-01-03 14:25:43 +05:30
beforeEach(() => {
2021-06-08 01:23:25 +05:30
urlParams = {
before: 'before_param_value',
};
2021-01-03 14:25:43 +05:30
createComponent();
2021-06-08 01:23:25 +05:30
fetchReleasesSpy.mockClear();
2021-01-03 14:25:43 +05:30
window.dispatchEvent(new PopStateEvent('popstate'));
});
2021-06-08 01:23:25 +05:30
it('calls the fetchRelease store method with the parameters from the URL query', () => {
expect(fetchReleasesSpy).toHaveBeenCalledTimes(1);
expect(fetchReleasesSpy).toHaveBeenCalledWith(expect.anything(), urlParams);
2021-01-03 14:25:43 +05:30
});
});
2019-02-15 15:39:39 +05:30
});