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-11-18 22:05:49 +05:30
|
|
|
import oneReleaseQueryResponse from 'test_fixtures/graphql/releases/graphql/queries/one_release.query.graphql.json';
|
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');
|
|
|
|
|
|
|
|
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
|
|
|
});
|
|
|
|
});
|