2021-03-11 19:13:27 +05:30
|
|
|
import { GlAlert, GlLoadingIcon } from '@gitlab/ui';
|
2021-04-29 21:17:54 +05:30
|
|
|
import { mount, shallowMount } from '@vue/test-utils';
|
2021-02-22 17:27:13 +05:30
|
|
|
import Vue from 'vue';
|
|
|
|
import VueApollo from 'vue-apollo';
|
2021-04-29 21:17:54 +05:30
|
|
|
import { useLocalStorageSpy } from 'helpers/local_storage_helper';
|
2021-03-08 18:12:59 +05:30
|
|
|
import createMockApollo from 'helpers/mock_apollo_helper';
|
|
|
|
import getPipelineDetails from 'shared_queries/pipelines/get_pipeline_details.query.graphql';
|
2021-04-29 21:17:54 +05:30
|
|
|
import {
|
|
|
|
IID_FAILURE,
|
|
|
|
LAYER_VIEW,
|
|
|
|
STAGE_VIEW,
|
|
|
|
VIEW_TYPE_KEY,
|
|
|
|
} from '~/pipelines/components/graph/constants';
|
2021-02-22 17:27:13 +05:30
|
|
|
import PipelineGraph from '~/pipelines/components/graph/graph_component.vue';
|
2021-03-11 19:13:27 +05:30
|
|
|
import PipelineGraphWrapper from '~/pipelines/components/graph/graph_component_wrapper.vue';
|
2021-04-29 21:17:54 +05:30
|
|
|
import GraphViewSelector from '~/pipelines/components/graph/graph_view_selector.vue';
|
|
|
|
import StageColumnComponent from '~/pipelines/components/graph/stage_column_component.vue';
|
|
|
|
import * as parsingUtils from '~/pipelines/components/parsing_utils';
|
2021-02-22 17:27:13 +05:30
|
|
|
import { mockPipelineResponse } from './mock_data';
|
|
|
|
|
|
|
|
const defaultProvide = {
|
2021-04-17 20:07:23 +05:30
|
|
|
graphqlResourceEtag: 'frog/amphibirama/etag/',
|
|
|
|
metricsPath: '',
|
2021-02-22 17:27:13 +05:30
|
|
|
pipelineProjectPath: 'frog/amphibirama',
|
|
|
|
pipelineIid: '22',
|
|
|
|
};
|
|
|
|
|
|
|
|
describe('Pipeline graph wrapper', () => {
|
|
|
|
Vue.use(VueApollo);
|
2021-04-29 21:17:54 +05:30
|
|
|
useLocalStorageSpy();
|
2021-02-22 17:27:13 +05:30
|
|
|
|
|
|
|
let wrapper;
|
|
|
|
const getAlert = () => wrapper.find(GlAlert);
|
|
|
|
const getLoadingIcon = () => wrapper.find(GlLoadingIcon);
|
|
|
|
const getGraph = () => wrapper.find(PipelineGraph);
|
2021-04-29 21:17:54 +05:30
|
|
|
const getStageColumnTitle = () => wrapper.find('[data-testid="stage-column-title"]');
|
|
|
|
const getAllStageColumnGroupsInColumn = () =>
|
|
|
|
wrapper.find(StageColumnComponent).findAll('[data-testid="stage-column-group"]');
|
|
|
|
const getViewSelector = () => wrapper.find(GraphViewSelector);
|
2021-02-22 17:27:13 +05:30
|
|
|
|
|
|
|
const createComponent = ({
|
|
|
|
apolloProvider,
|
|
|
|
data = {},
|
2021-04-29 21:17:54 +05:30
|
|
|
provide = {},
|
2021-02-22 17:27:13 +05:30
|
|
|
mountFn = shallowMount,
|
|
|
|
} = {}) => {
|
|
|
|
wrapper = mountFn(PipelineGraphWrapper, {
|
2021-04-29 21:17:54 +05:30
|
|
|
provide: {
|
|
|
|
...defaultProvide,
|
|
|
|
...provide,
|
|
|
|
},
|
2021-02-22 17:27:13 +05:30
|
|
|
apolloProvider,
|
|
|
|
data() {
|
|
|
|
return {
|
|
|
|
...data,
|
|
|
|
};
|
|
|
|
},
|
|
|
|
});
|
|
|
|
};
|
|
|
|
|
2021-04-29 21:17:54 +05:30
|
|
|
const createComponentWithApollo = ({
|
2021-02-22 17:27:13 +05:30
|
|
|
getPipelineDetailsHandler = jest.fn().mockResolvedValue(mockPipelineResponse),
|
2021-04-29 21:17:54 +05:30
|
|
|
mountFn = shallowMount,
|
|
|
|
provide = {},
|
|
|
|
} = {}) => {
|
2021-02-22 17:27:13 +05:30
|
|
|
const requestHandlers = [[getPipelineDetails, getPipelineDetailsHandler]];
|
|
|
|
|
|
|
|
const apolloProvider = createMockApollo(requestHandlers);
|
2021-04-29 21:17:54 +05:30
|
|
|
createComponent({ apolloProvider, provide, mountFn });
|
2021-02-22 17:27:13 +05:30
|
|
|
};
|
|
|
|
|
|
|
|
afterEach(() => {
|
|
|
|
wrapper.destroy();
|
|
|
|
wrapper = null;
|
|
|
|
});
|
|
|
|
|
|
|
|
describe('when data is loading', () => {
|
|
|
|
it('displays the loading icon', () => {
|
|
|
|
createComponentWithApollo();
|
|
|
|
expect(getLoadingIcon().exists()).toBe(true);
|
|
|
|
});
|
|
|
|
|
|
|
|
it('does not display the alert', () => {
|
|
|
|
createComponentWithApollo();
|
|
|
|
expect(getAlert().exists()).toBe(false);
|
|
|
|
});
|
|
|
|
|
|
|
|
it('does not display the graph', () => {
|
|
|
|
createComponentWithApollo();
|
|
|
|
expect(getGraph().exists()).toBe(false);
|
|
|
|
});
|
|
|
|
});
|
|
|
|
|
|
|
|
describe('when data has loaded', () => {
|
|
|
|
beforeEach(async () => {
|
|
|
|
createComponentWithApollo();
|
|
|
|
jest.runOnlyPendingTimers();
|
|
|
|
await wrapper.vm.$nextTick();
|
|
|
|
});
|
|
|
|
|
|
|
|
it('does not display the loading icon', () => {
|
|
|
|
expect(getLoadingIcon().exists()).toBe(false);
|
|
|
|
});
|
|
|
|
|
|
|
|
it('does not display the alert', () => {
|
|
|
|
expect(getAlert().exists()).toBe(false);
|
|
|
|
});
|
|
|
|
|
|
|
|
it('displays the graph', () => {
|
|
|
|
expect(getGraph().exists()).toBe(true);
|
|
|
|
});
|
2021-04-17 20:07:23 +05:30
|
|
|
|
|
|
|
it('passes the etag resource and metrics path to the graph', () => {
|
|
|
|
expect(getGraph().props('configPaths')).toMatchObject({
|
|
|
|
graphqlResourceEtag: defaultProvide.graphqlResourceEtag,
|
|
|
|
metricsPath: defaultProvide.metricsPath,
|
|
|
|
});
|
|
|
|
});
|
2021-02-22 17:27:13 +05:30
|
|
|
});
|
|
|
|
|
|
|
|
describe('when there is an error', () => {
|
|
|
|
beforeEach(async () => {
|
2021-04-29 21:17:54 +05:30
|
|
|
createComponentWithApollo({
|
|
|
|
getPipelineDetailsHandler: jest.fn().mockRejectedValue(new Error('GraphQL error')),
|
|
|
|
});
|
2021-02-22 17:27:13 +05:30
|
|
|
jest.runOnlyPendingTimers();
|
|
|
|
await wrapper.vm.$nextTick();
|
|
|
|
});
|
|
|
|
|
|
|
|
it('does not display the loading icon', () => {
|
|
|
|
expect(getLoadingIcon().exists()).toBe(false);
|
|
|
|
});
|
|
|
|
|
|
|
|
it('displays the alert', () => {
|
|
|
|
expect(getAlert().exists()).toBe(true);
|
|
|
|
});
|
|
|
|
|
|
|
|
it('does not display the graph', () => {
|
|
|
|
expect(getGraph().exists()).toBe(false);
|
|
|
|
});
|
|
|
|
});
|
|
|
|
|
2021-04-29 21:17:54 +05:30
|
|
|
describe('when there is no pipeline iid available', () => {
|
|
|
|
beforeEach(async () => {
|
|
|
|
createComponentWithApollo({
|
|
|
|
provide: {
|
|
|
|
pipelineIid: '',
|
|
|
|
},
|
|
|
|
});
|
|
|
|
jest.runOnlyPendingTimers();
|
|
|
|
await wrapper.vm.$nextTick();
|
|
|
|
});
|
|
|
|
|
|
|
|
it('does not display the loading icon', () => {
|
|
|
|
expect(getLoadingIcon().exists()).toBe(false);
|
|
|
|
});
|
|
|
|
|
|
|
|
it('displays the no iid alert', () => {
|
|
|
|
expect(getAlert().exists()).toBe(true);
|
|
|
|
expect(getAlert().text()).toBe(wrapper.vm.$options.errorTexts[IID_FAILURE]);
|
|
|
|
});
|
|
|
|
|
|
|
|
it('does not display the graph', () => {
|
|
|
|
expect(getGraph().exists()).toBe(false);
|
|
|
|
});
|
|
|
|
});
|
|
|
|
|
2021-02-22 17:27:13 +05:30
|
|
|
describe('when refresh action is emitted', () => {
|
|
|
|
beforeEach(async () => {
|
|
|
|
createComponentWithApollo();
|
|
|
|
jest.spyOn(wrapper.vm.$apollo.queries.pipeline, 'refetch');
|
|
|
|
await wrapper.vm.$nextTick();
|
|
|
|
getGraph().vm.$emit('refreshPipelineGraph');
|
|
|
|
});
|
|
|
|
|
|
|
|
it('calls refetch', () => {
|
|
|
|
expect(wrapper.vm.$apollo.queries.pipeline.refetch).toHaveBeenCalled();
|
|
|
|
});
|
|
|
|
});
|
2021-04-17 20:07:23 +05:30
|
|
|
|
|
|
|
describe('when query times out', () => {
|
|
|
|
const advanceApolloTimers = async () => {
|
|
|
|
jest.runOnlyPendingTimers();
|
|
|
|
await wrapper.vm.$nextTick();
|
|
|
|
await wrapper.vm.$nextTick();
|
|
|
|
};
|
|
|
|
|
|
|
|
beforeEach(async () => {
|
|
|
|
const errorData = {
|
|
|
|
data: {
|
|
|
|
project: {
|
|
|
|
pipelines: null,
|
|
|
|
},
|
|
|
|
},
|
|
|
|
errors: [{ message: 'timeout' }],
|
|
|
|
};
|
|
|
|
|
|
|
|
const failSucceedFail = jest
|
|
|
|
.fn()
|
|
|
|
.mockResolvedValueOnce(errorData)
|
|
|
|
.mockResolvedValueOnce(mockPipelineResponse)
|
|
|
|
.mockResolvedValueOnce(errorData);
|
|
|
|
|
2021-04-29 21:17:54 +05:30
|
|
|
createComponentWithApollo({ getPipelineDetailsHandler: failSucceedFail });
|
2021-04-17 20:07:23 +05:30
|
|
|
await wrapper.vm.$nextTick();
|
|
|
|
});
|
|
|
|
|
|
|
|
it('shows correct errors and does not overwrite populated data when data is empty', async () => {
|
|
|
|
/* fails at first, shows error, no data yet */
|
|
|
|
expect(getAlert().exists()).toBe(true);
|
|
|
|
expect(getGraph().exists()).toBe(false);
|
|
|
|
|
|
|
|
/* succeeds, clears error, shows graph */
|
|
|
|
await advanceApolloTimers();
|
|
|
|
expect(getAlert().exists()).toBe(false);
|
|
|
|
expect(getGraph().exists()).toBe(true);
|
|
|
|
|
|
|
|
/* fails again, alert returns but data persists */
|
|
|
|
await advanceApolloTimers();
|
|
|
|
expect(getAlert().exists()).toBe(true);
|
|
|
|
expect(getGraph().exists()).toBe(true);
|
|
|
|
});
|
|
|
|
});
|
2021-04-29 21:17:54 +05:30
|
|
|
|
|
|
|
describe('view dropdown', () => {
|
|
|
|
describe('when pipelineGraphLayersView feature flag is off', () => {
|
|
|
|
beforeEach(async () => {
|
|
|
|
createComponentWithApollo();
|
|
|
|
jest.runOnlyPendingTimers();
|
|
|
|
await wrapper.vm.$nextTick();
|
|
|
|
});
|
|
|
|
|
|
|
|
it('does not appear', () => {
|
|
|
|
expect(getViewSelector().exists()).toBe(false);
|
|
|
|
});
|
|
|
|
});
|
|
|
|
|
|
|
|
describe('when pipelineGraphLayersView feature flag is on', () => {
|
|
|
|
let layersFn;
|
|
|
|
beforeEach(async () => {
|
|
|
|
layersFn = jest.spyOn(parsingUtils, 'listByLayers');
|
|
|
|
createComponentWithApollo({
|
|
|
|
provide: {
|
|
|
|
glFeatures: {
|
|
|
|
pipelineGraphLayersView: true,
|
|
|
|
},
|
|
|
|
},
|
|
|
|
mountFn: mount,
|
|
|
|
});
|
|
|
|
|
|
|
|
jest.runOnlyPendingTimers();
|
|
|
|
await wrapper.vm.$nextTick();
|
|
|
|
});
|
|
|
|
|
|
|
|
it('appears when pipeline uses needs', () => {
|
|
|
|
expect(getViewSelector().exists()).toBe(true);
|
|
|
|
});
|
|
|
|
|
|
|
|
it('switches between views', async () => {
|
|
|
|
const groupsInFirstColumn =
|
|
|
|
mockPipelineResponse.data.project.pipeline.stages.nodes[0].groups.nodes.length;
|
|
|
|
expect(getAllStageColumnGroupsInColumn()).toHaveLength(groupsInFirstColumn);
|
|
|
|
expect(getStageColumnTitle().text()).toBe('Build');
|
|
|
|
await getViewSelector().vm.$emit('updateViewType', LAYER_VIEW);
|
|
|
|
expect(getAllStageColumnGroupsInColumn()).toHaveLength(groupsInFirstColumn + 1);
|
|
|
|
expect(getStageColumnTitle().text()).toBe('');
|
|
|
|
});
|
|
|
|
|
|
|
|
it('saves the view type to local storage', async () => {
|
|
|
|
await getViewSelector().vm.$emit('updateViewType', LAYER_VIEW);
|
|
|
|
expect(localStorage.setItem.mock.calls).toEqual([[VIEW_TYPE_KEY, LAYER_VIEW]]);
|
|
|
|
});
|
|
|
|
|
|
|
|
it('calls listByLayers only once no matter how many times view is switched', async () => {
|
|
|
|
expect(layersFn).not.toHaveBeenCalled();
|
|
|
|
await getViewSelector().vm.$emit('updateViewType', LAYER_VIEW);
|
|
|
|
expect(layersFn).toHaveBeenCalledTimes(1);
|
|
|
|
await getViewSelector().vm.$emit('updateViewType', STAGE_VIEW);
|
|
|
|
await getViewSelector().vm.$emit('updateViewType', LAYER_VIEW);
|
|
|
|
await getViewSelector().vm.$emit('updateViewType', STAGE_VIEW);
|
|
|
|
expect(layersFn).toHaveBeenCalledTimes(1);
|
|
|
|
});
|
|
|
|
});
|
|
|
|
|
|
|
|
describe('when feature flag is on and local storage is set', () => {
|
|
|
|
beforeEach(async () => {
|
|
|
|
localStorage.setItem(VIEW_TYPE_KEY, LAYER_VIEW);
|
|
|
|
|
|
|
|
createComponentWithApollo({
|
|
|
|
provide: {
|
|
|
|
glFeatures: {
|
|
|
|
pipelineGraphLayersView: true,
|
|
|
|
},
|
|
|
|
},
|
|
|
|
mountFn: mount,
|
|
|
|
});
|
|
|
|
|
|
|
|
jest.runOnlyPendingTimers();
|
|
|
|
await wrapper.vm.$nextTick();
|
|
|
|
});
|
|
|
|
|
|
|
|
it('reads the view type from localStorage when available', () => {
|
|
|
|
expect(wrapper.find('[data-testid="pipeline-view-selector"] code').text()).toContain(
|
|
|
|
'needs:',
|
|
|
|
);
|
|
|
|
});
|
|
|
|
});
|
|
|
|
|
|
|
|
describe('when feature flag is on but pipeline does not use needs', () => {
|
|
|
|
beforeEach(async () => {
|
|
|
|
const nonNeedsResponse = { ...mockPipelineResponse };
|
|
|
|
nonNeedsResponse.data.project.pipeline.usesNeeds = false;
|
|
|
|
|
|
|
|
createComponentWithApollo({
|
|
|
|
provide: {
|
|
|
|
glFeatures: {
|
|
|
|
pipelineGraphLayersView: true,
|
|
|
|
},
|
|
|
|
},
|
|
|
|
mountFn: mount,
|
|
|
|
getPipelineDetailsHandler: jest.fn().mockResolvedValue(nonNeedsResponse),
|
|
|
|
});
|
|
|
|
|
|
|
|
jest.runOnlyPendingTimers();
|
|
|
|
await wrapper.vm.$nextTick();
|
|
|
|
});
|
|
|
|
|
|
|
|
it('does not appear when pipeline does not use needs', () => {
|
|
|
|
expect(getViewSelector().exists()).toBe(false);
|
|
|
|
});
|
|
|
|
});
|
|
|
|
});
|
2021-02-22 17:27:13 +05:30
|
|
|
});
|