debian-mirror-gitlab/spec/frontend/pipelines/graph/linked_pipelines_column_spec.js

Ignoring revisions in .git-blame-ignore-revs. Click here to bypass and see the normal blame view.

221 lines
7.1 KiB
JavaScript
Raw Normal View History

2022-04-04 11:22:00 +05:30
import { mount, shallowMount } from '@vue/test-utils';
import Vue, { nextTick } from 'vue';
2021-03-11 19:13:27 +05:30
import VueApollo from 'vue-apollo';
2021-03-08 18:12:59 +05:30
import createMockApollo from 'helpers/mock_apollo_helper';
2022-04-04 11:22:00 +05:30
import waitForPromises from 'helpers/wait_for_promises';
2021-03-08 18:12:59 +05:30
import getPipelineDetails from 'shared_queries/pipelines/get_pipeline_details.query.graphql';
2021-04-29 21:17:54 +05:30
import {
DOWNSTREAM,
UPSTREAM,
LAYER_VIEW,
STAGE_VIEW,
} from '~/pipelines/components/graph/constants';
2021-02-22 17:27:13 +05:30
import PipelineGraph from '~/pipelines/components/graph/graph_component.vue';
2020-04-22 19:07:51 +05:30
import LinkedPipeline from '~/pipelines/components/graph/linked_pipeline.vue';
2021-03-11 19:13:27 +05:30
import LinkedPipelinesColumn from '~/pipelines/components/graph/linked_pipelines_column.vue';
2021-04-29 21:17:54 +05:30
import * as parsingUtils from '~/pipelines/components/parsing_utils';
2021-02-22 17:27:13 +05:30
import { LOAD_FAILURE } from '~/pipelines/constants';
import {
mockPipelineResponse,
pipelineWithUpstreamDownstream,
wrappedPipelineReturn,
} from './mock_data';
const processedPipeline = pipelineWithUpstreamDownstream(mockPipelineResponse);
2020-04-22 19:07:51 +05:30
describe('Linked Pipelines Column', () => {
2021-02-22 17:27:13 +05:30
const defaultProps = {
2021-03-11 19:13:27 +05:30
columnTitle: 'Downstream',
2021-02-22 17:27:13 +05:30
linkedPipelines: processedPipeline.downstream,
2021-06-08 01:23:25 +05:30
showLinks: false,
2021-02-22 17:27:13 +05:30
type: DOWNSTREAM,
2021-04-29 21:17:54 +05:30
viewType: STAGE_VIEW,
2021-04-17 20:07:23 +05:30
configPaths: {
metricsPath: '',
graphqlResourceEtag: 'this/is/a/path',
},
2020-04-22 19:07:51 +05:30
};
2021-02-22 17:27:13 +05:30
2020-04-22 19:07:51 +05:30
let wrapper;
2021-02-22 17:27:13 +05:30
const findLinkedColumnTitle = () => wrapper.find('[data-testid="linked-column-title"]');
const findLinkedPipelineElements = () => wrapper.findAll(LinkedPipeline);
const findPipelineGraph = () => wrapper.find(PipelineGraph);
const findExpandButton = () => wrapper.find('[data-testid="expand-pipeline-button"]');
2020-04-22 19:07:51 +05:30
2022-04-04 11:22:00 +05:30
Vue.use(VueApollo);
2021-02-22 17:27:13 +05:30
const createComponent = ({ apolloProvider, mountFn = shallowMount, props = {} } = {}) => {
wrapper = mountFn(LinkedPipelinesColumn, {
apolloProvider,
propsData: {
...defaultProps,
...props,
},
});
};
2021-03-11 19:13:27 +05:30
const createComponentWithApollo = ({
2021-02-22 17:27:13 +05:30
mountFn = shallowMount,
getPipelineDetailsHandler = jest.fn().mockResolvedValue(wrappedPipelineReturn),
2021-03-11 19:13:27 +05:30
props = {},
} = {}) => {
2021-02-22 17:27:13 +05:30
const requestHandlers = [[getPipelineDetails, getPipelineDetailsHandler]];
const apolloProvider = createMockApollo(requestHandlers);
2021-03-11 19:13:27 +05:30
createComponent({ apolloProvider, mountFn, props });
2021-02-22 17:27:13 +05:30
};
2020-04-22 19:07:51 +05:30
afterEach(() => {
wrapper.destroy();
});
2021-02-22 17:27:13 +05:30
describe('it renders correctly', () => {
beforeEach(() => {
2021-04-29 21:17:54 +05:30
createComponentWithApollo();
2021-02-22 17:27:13 +05:30
});
it('renders the pipeline title', () => {
expect(findLinkedColumnTitle().text()).toBe(defaultProps.columnTitle);
});
2020-04-22 19:07:51 +05:30
2021-02-22 17:27:13 +05:30
it('renders the correct number of linked pipelines', () => {
expect(findLinkedPipelineElements()).toHaveLength(defaultProps.linkedPipelines.length);
});
2020-04-22 19:07:51 +05:30
});
2021-02-22 17:27:13 +05:30
describe('click action', () => {
const clickExpandButton = async () => {
await findExpandButton().trigger('click');
2022-04-04 11:22:00 +05:30
await waitForPromises();
2021-02-22 17:27:13 +05:30
};
2021-04-29 21:17:54 +05:30
describe('layer type rendering', () => {
let layersFn;
beforeEach(() => {
layersFn = jest.spyOn(parsingUtils, 'listByLayers');
createComponentWithApollo({ mountFn: mount });
});
it('calls listByLayers only once no matter how many times view is switched', async () => {
expect(layersFn).not.toHaveBeenCalled();
2022-04-04 11:22:00 +05:30
await clickExpandButton();
2021-04-29 21:17:54 +05:30
await wrapper.setProps({ viewType: LAYER_VIEW });
2022-04-04 11:22:00 +05:30
await nextTick();
2021-04-29 21:17:54 +05:30
expect(layersFn).toHaveBeenCalledTimes(1);
await wrapper.setProps({ viewType: STAGE_VIEW });
await wrapper.setProps({ viewType: LAYER_VIEW });
await wrapper.setProps({ viewType: STAGE_VIEW });
expect(layersFn).toHaveBeenCalledTimes(1);
});
});
2021-06-08 01:23:25 +05:30
describe('when graph does not use needs', () => {
beforeEach(() => {
const nonNeedsResponse = { ...wrappedPipelineReturn };
nonNeedsResponse.data.project.pipeline.usesNeeds = false;
createComponentWithApollo({
props: {
viewType: LAYER_VIEW,
},
getPipelineDetailsHandler: jest.fn().mockResolvedValue(nonNeedsResponse),
mountFn: mount,
});
});
it('shows the stage view, even when the main graph view type is layers', async () => {
2022-04-04 11:22:00 +05:30
await clickExpandButton();
2021-06-08 01:23:25 +05:30
expect(findPipelineGraph().props('viewType')).toBe(STAGE_VIEW);
});
});
2021-03-11 19:13:27 +05:30
describe('downstream', () => {
describe('when successful', () => {
beforeEach(() => {
createComponentWithApollo({ mountFn: mount });
});
it('toggles the pipeline visibility', async () => {
expect(findPipelineGraph().exists()).toBe(false);
2022-04-04 11:22:00 +05:30
await clickExpandButton();
2021-03-11 19:13:27 +05:30
expect(findPipelineGraph().exists()).toBe(true);
await clickExpandButton();
expect(findPipelineGraph().exists()).toBe(false);
});
2021-02-22 17:27:13 +05:30
});
2021-03-11 19:13:27 +05:30
describe('on error', () => {
beforeEach(() => {
createComponentWithApollo({
mountFn: mount,
getPipelineDetailsHandler: jest.fn().mockRejectedValue(new Error('GraphQL error')),
});
});
it('emits the error', async () => {
await clickExpandButton();
2021-04-17 20:07:23 +05:30
expect(wrapper.emitted().error).toEqual([[{ type: LOAD_FAILURE, skipSentry: true }]]);
2021-03-11 19:13:27 +05:30
});
it('does not show the pipeline', async () => {
expect(findPipelineGraph().exists()).toBe(false);
2022-04-04 11:22:00 +05:30
await clickExpandButton();
2021-03-11 19:13:27 +05:30
expect(findPipelineGraph().exists()).toBe(false);
});
2021-02-22 17:27:13 +05:30
});
});
2021-03-11 19:13:27 +05:30
describe('upstream', () => {
const upstreamProps = {
columnTitle: 'Upstream',
/*
Because the IDs need to match to work, rather
than make new mock data, we are representing
the upstream pipeline with the downstream data.
*/
linkedPipelines: processedPipeline.downstream,
type: UPSTREAM,
};
describe('when successful', () => {
beforeEach(() => {
createComponentWithApollo({
mountFn: mount,
props: upstreamProps,
});
});
it('toggles the pipeline visibility', async () => {
expect(findPipelineGraph().exists()).toBe(false);
2022-04-04 11:22:00 +05:30
await clickExpandButton();
2021-03-11 19:13:27 +05:30
expect(findPipelineGraph().exists()).toBe(true);
await clickExpandButton();
expect(findPipelineGraph().exists()).toBe(false);
});
2021-02-22 17:27:13 +05:30
});
2020-04-22 19:07:51 +05:30
2021-03-11 19:13:27 +05:30
describe('on error', () => {
beforeEach(() => {
createComponentWithApollo({
mountFn: mount,
getPipelineDetailsHandler: jest.fn().mockRejectedValue(new Error('GraphQL error')),
props: upstreamProps,
});
});
it('emits the error', async () => {
await clickExpandButton();
2021-04-17 20:07:23 +05:30
expect(wrapper.emitted().error).toEqual([[{ type: LOAD_FAILURE, skipSentry: true }]]);
2021-03-11 19:13:27 +05:30
});
it('does not show the pipeline', async () => {
expect(findPipelineGraph().exists()).toBe(false);
2022-04-04 11:22:00 +05:30
await clickExpandButton();
2021-03-11 19:13:27 +05:30
expect(findPipelineGraph().exists()).toBe(false);
});
2021-02-22 17:27:13 +05:30
});
});
2020-04-22 19:07:51 +05:30
});
});