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

177 lines
5 KiB
JavaScript
Raw Normal View History

2020-04-08 14:13:33 +05:30
import { shallowMount } from '@vue/test-utils';
2021-04-29 21:17:54 +05:30
import Vue from 'vue';
import VueApollo from 'vue-apollo';
2021-01-03 14:25:43 +05:30
import { getJSONFixture } from 'helpers/fixtures';
2021-04-29 21:17:54 +05:30
import createMockApollo from 'helpers/mock_apollo_helper';
import createFlash from '~/flash';
2020-04-08 14:13:33 +05:30
import ReleaseShowApp from '~/releases/components/app_show.vue';
import ReleaseBlock from '~/releases/components/release_block.vue';
2021-03-11 19:13:27 +05:30
import ReleaseSkeletonLoader from '~/releases/components/release_skeleton_loader.vue';
2021-06-08 01:23:25 +05:30
import oneReleaseQuery from '~/releases/graphql/queries/one_release.query.graphql';
2020-04-08 14:13:33 +05:30
2021-04-29 21:17:54 +05:30
jest.mock('~/flash');
const oneReleaseQueryResponse = getJSONFixture(
2021-06-08 01:23:25 +05:30
'graphql/releases/graphql/queries/one_release.query.graphql.json',
2021-04-29 21:17:54 +05:30
);
Vue.use(VueApollo);
const EXPECTED_ERROR_MESSAGE = 'Something went wrong while getting the release details.';
const MOCK_FULL_PATH = 'project/full/path';
const MOCK_TAG_NAME = 'test-tag-name';
2021-01-03 14:25:43 +05:30
2020-04-08 14:13:33 +05:30
describe('Release show component', () => {
let wrapper;
2021-04-29 21:17:54 +05:30
const createComponent = ({ apolloProvider }) => {
wrapper = shallowMount(ReleaseShowApp, {
provide: {
fullPath: MOCK_FULL_PATH,
tagName: MOCK_TAG_NAME,
2020-04-08 14:13:33 +05:30
},
2021-04-29 21:17:54 +05:30
apolloProvider,
2020-04-08 14:13:33 +05:30
});
};
2021-04-29 21:17:54 +05:30
afterEach(() => {
wrapper.destroy();
wrapper = null;
});
2021-01-03 14:25:43 +05:30
const findLoadingSkeleton = () => wrapper.find(ReleaseSkeletonLoader);
2020-04-08 14:13:33 +05:30
const findReleaseBlock = () => wrapper.find(ReleaseBlock);
2021-04-29 21:17:54 +05:30
const expectLoadingIndicator = () => {
it('renders a loading indicator', () => {
expect(findLoadingSkeleton().exists()).toBe(true);
});
};
const expectNoLoadingIndicator = () => {
it('does not render a loading indicator', () => {
expect(findLoadingSkeleton().exists()).toBe(false);
});
};
const expectNoFlash = () => {
it('does not show a flash message', () => {
expect(createFlash).not.toHaveBeenCalled();
});
};
const expectFlashWithMessage = (message) => {
it(`shows a flash message that reads "${message}"`, () => {
expect(createFlash).toHaveBeenCalledTimes(1);
expect(createFlash).toHaveBeenCalledWith({
message,
captureError: true,
error: expect.any(Error),
});
});
};
const expectReleaseBlock = () => {
it('renders a release block', () => {
expect(findReleaseBlock().exists()).toBe(true);
});
};
const expectNoReleaseBlock = () => {
it('does not render a release block', () => {
expect(findReleaseBlock().exists()).toBe(false);
});
};
describe('GraphQL query variables', () => {
const queryHandler = jest.fn().mockResolvedValueOnce(oneReleaseQueryResponse);
beforeEach(() => {
const apolloProvider = createMockApollo([[oneReleaseQuery, queryHandler]]);
createComponent({ apolloProvider });
});
it('builds a GraphQL with the expected variables', () => {
expect(queryHandler).toHaveBeenCalledTimes(1);
expect(queryHandler).toHaveBeenCalledWith({
fullPath: MOCK_FULL_PATH,
tagName: MOCK_TAG_NAME,
});
});
2020-04-08 14:13:33 +05:30
});
2021-04-29 21:17:54 +05:30
describe('when the component is loading data', () => {
beforeEach(() => {
const apolloProvider = createMockApollo([
[oneReleaseQuery, jest.fn().mockReturnValueOnce(new Promise(() => {}))],
]);
createComponent({ apolloProvider });
});
expectLoadingIndicator();
expectNoFlash();
expectNoReleaseBlock();
2020-04-08 14:13:33 +05:30
});
2021-04-29 21:17:54 +05:30
describe('when the component has successfully loaded the release', () => {
beforeEach(() => {
const apolloProvider = createMockApollo([
[oneReleaseQuery, jest.fn().mockResolvedValueOnce(oneReleaseQueryResponse)],
]);
createComponent({ apolloProvider });
});
expectNoLoadingIndicator();
expectNoFlash();
expectReleaseBlock();
2020-04-08 14:13:33 +05:30
});
2021-04-29 21:17:54 +05:30
describe('when the request succeeded, but the returned "project" key was null', () => {
beforeEach(() => {
const apolloProvider = createMockApollo([
[oneReleaseQuery, jest.fn().mockResolvedValueOnce({ data: { project: null } })],
]);
createComponent({ apolloProvider });
});
expectNoLoadingIndicator();
expectFlashWithMessage(EXPECTED_ERROR_MESSAGE);
expectNoReleaseBlock();
});
describe('when the request succeeded, but the returned "project.release" key was null', () => {
beforeEach(() => {
const apolloProvider = createMockApollo([
[
oneReleaseQuery,
jest.fn().mockResolvedValueOnce({ data: { project: { release: null } } }),
],
]);
createComponent({ apolloProvider });
});
expectNoLoadingIndicator();
expectFlashWithMessage(EXPECTED_ERROR_MESSAGE);
expectNoReleaseBlock();
});
describe('when an error occurs while loading the release', () => {
beforeEach(() => {
const apolloProvider = createMockApollo([
[oneReleaseQuery, jest.fn().mockRejectedValueOnce('An error occurred!')],
]);
createComponent({ apolloProvider });
});
expectNoLoadingIndicator();
expectFlashWithMessage(EXPECTED_ERROR_MESSAGE);
expectNoReleaseBlock();
2020-04-08 14:13:33 +05:30
});
});