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

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

567 lines
18 KiB
JavaScript
Raw Normal View History

2022-01-26 12:08:38 +05:30
import { GlAlert, GlButton, GlButtonGroup, GlLoadingIcon } from '@gitlab/ui';
2021-04-29 21:17:54 +05:30
import { mount, shallowMount } from '@vue/test-utils';
2021-10-27 15:23:28 +05:30
import MockAdapter from 'axios-mock-adapter';
2022-04-04 11:22:00 +05:30
import Vue from 'vue';
2021-02-22 17:27:13 +05:30
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';
2022-08-13 15:12:31 +05:30
import { stubPerformanceWebAPI } from 'helpers/performance';
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-09-04 01:27:46 +05:30
import getUserCallouts from '~/graphql_shared/queries/get_user_callouts.query.graphql';
2021-10-27 15:23:28 +05:30
import axios from '~/lib/utils/axios_utils';
import {
PIPELINES_DETAIL_LINK_DURATION,
PIPELINES_DETAIL_LINKS_TOTAL,
PIPELINES_DETAIL_LINKS_JOB_RATIO,
} from '~/performance/constants';
import * as perfUtils from '~/performance/utils';
2021-04-29 21:17:54 +05:30
import {
2022-07-16 23:28:13 +05:30
ACTION_FAILURE,
2021-04-29 21:17:54 +05:30
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';
2021-10-27 15:23:28 +05:30
import * as Api from '~/pipelines/components/graph_shared/api';
2021-06-08 01:23:25 +05:30
import LinksLayer from '~/pipelines/components/graph_shared/links_layer.vue';
2021-04-29 21:17:54 +05:30
import * as parsingUtils from '~/pipelines/components/parsing_utils';
2021-10-27 15:23:28 +05:30
import getPipelineHeaderData from '~/pipelines/graphql/queries/get_pipeline_header_data.query.graphql';
import * as sentryUtils from '~/pipelines/utils';
2022-06-21 17:19:12 +05:30
import LocalStorageSync from '~/vue_shared/components/local_storage_sync.vue';
2021-10-27 15:23:28 +05:30
import { mockRunningPipelineHeaderData } from '../mock_data';
2022-10-11 01:57:18 +05:30
import { mapCallouts, mockCalloutsResponse, mockPipelineResponse } from './mock_data';
2021-02-22 17:27:13 +05:30
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;
2021-06-08 01:23:25 +05:30
const getAlert = () => wrapper.findComponent(GlAlert);
const getDependenciesToggle = () => wrapper.find('[data-testid="show-links-toggle"]');
const getLoadingIcon = () => wrapper.findComponent(GlLoadingIcon);
const getLinksLayer = () => wrapper.findComponent(LinksLayer);
2022-10-11 01:57:18 +05:30
const getGraph = () => wrapper.findComponent(PipelineGraph);
2021-04-29 21:17:54 +05:30
const getStageColumnTitle = () => wrapper.find('[data-testid="stage-column-title"]');
const getAllStageColumnGroupsInColumn = () =>
2022-10-11 01:57:18 +05:30
wrapper.findComponent(StageColumnComponent).findAll('[data-testid="stage-column-group"]');
const getViewSelector = () => wrapper.findComponent(GraphViewSelector);
2021-06-08 01:23:25 +05:30
const getViewSelectorTrip = () => getViewSelector().findComponent(GlAlert);
2022-06-21 17:19:12 +05:30
const getLocalStorageSync = () => wrapper.findComponent(LocalStorageSync);
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-06-08 01:23:25 +05:30
calloutsList = [],
data = {},
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-06-08 01:23:25 +05:30
const callouts = mapCallouts(calloutsList);
const getUserCalloutsHandler = jest.fn().mockResolvedValue(mockCalloutsResponse(callouts));
2021-10-27 15:23:28 +05:30
const getPipelineHeaderDataHandler = jest.fn().mockResolvedValue(mockRunningPipelineHeaderData);
2021-06-08 01:23:25 +05:30
const requestHandlers = [
2021-10-27 15:23:28 +05:30
[getPipelineHeaderData, getPipelineHeaderDataHandler],
2021-06-08 01:23:25 +05:30
[getPipelineDetails, getPipelineDetailsHandler],
[getUserCallouts, getUserCalloutsHandler],
];
2021-02-22 17:27:13 +05:30
const apolloProvider = createMockApollo(requestHandlers);
2021-06-08 01:23:25 +05:30
createComponent({ apolloProvider, data, provide, mountFn });
2021-02-22 17:27:13 +05:30
};
afterEach(() => {
wrapper.destroy();
});
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);
});
2021-10-27 15:23:28 +05:30
it('skips querying headerPipeline', () => {
createComponentWithApollo();
expect(wrapper.vm.$apollo.queries.headerPipeline.skip).toBe(true);
});
2021-02-22 17:27:13 +05:30
});
describe('when data has loaded', () => {
beforeEach(async () => {
createComponentWithApollo();
2022-04-04 11:22:00 +05:30
await waitForPromises();
2021-02-22 17:27:13 +05:30
});
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')),
});
2022-04-04 11:22:00 +05:30
await waitForPromises();
2021-02-22 17:27:13 +05:30
});
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: '',
},
});
2022-04-04 11:22:00 +05:30
await waitForPromises();
2021-04-29 21:17:54 +05:30
});
it('does not display the loading icon', () => {
expect(getLoadingIcon().exists()).toBe(false);
});
it('displays the no iid alert', () => {
expect(getAlert().exists()).toBe(true);
2022-07-16 23:28:13 +05:30
expect(getAlert().text()).toBe(
'The data in this pipeline is too old to be rendered as a graph. Please check the Jobs tab to access historical data.',
);
2021-04-29 21:17:54 +05:30
});
it('does not display the graph', () => {
expect(getGraph().exists()).toBe(false);
});
});
2022-07-16 23:28:13 +05:30
describe('when there is an error with an action in the graph', () => {
beforeEach(async () => {
createComponentWithApollo();
await waitForPromises();
await getGraph().vm.$emit('error', { type: ACTION_FAILURE });
});
it('does not display the loading icon', () => {
expect(getLoadingIcon().exists()).toBe(false);
});
it('displays the action error alert', () => {
expect(getAlert().exists()).toBe(true);
expect(getAlert().text()).toBe('An error occurred while performing this action.');
});
it('displays the graph', () => {
expect(getGraph().exists()).toBe(true);
});
});
2021-02-22 17:27:13 +05:30
describe('when refresh action is emitted', () => {
beforeEach(async () => {
createComponentWithApollo();
2021-10-27 15:23:28 +05:30
jest.spyOn(wrapper.vm.$apollo.queries.headerPipeline, 'refetch');
2021-02-22 17:27:13 +05:30
jest.spyOn(wrapper.vm.$apollo.queries.pipeline, 'refetch');
2022-04-04 11:22:00 +05:30
await waitForPromises();
2021-02-22 17:27:13 +05:30
getGraph().vm.$emit('refreshPipelineGraph');
});
it('calls refetch', () => {
2021-10-27 15:23:28 +05:30
expect(wrapper.vm.$apollo.queries.headerPipeline.skip).toBe(false);
expect(wrapper.vm.$apollo.queries.headerPipeline.refetch).toHaveBeenCalled();
2021-02-22 17:27:13 +05:30
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();
2022-04-04 11:22:00 +05:30
await waitForPromises();
2021-04-17 20:07:23 +05:30
};
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 });
2022-04-04 11:22:00 +05:30
await waitForPromises();
2021-04-17 20:07:23 +05:30
});
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', () => {
2021-10-27 15:23:28 +05:30
describe('default', () => {
2021-04-29 21:17:54 +05:30
let layersFn;
beforeEach(async () => {
layersFn = jest.spyOn(parsingUtils, 'listByLayers');
createComponentWithApollo({
mountFn: mount,
});
2022-04-04 11:22:00 +05:30
await waitForPromises();
2021-04-29 21:17:54 +05:30
});
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);
2022-10-11 01:57:18 +05:30
expect(getStageColumnTitle().text()).toBe('build');
2021-04-29 21:17:54 +05:30
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);
});
});
2021-10-27 15:23:28 +05:30
describe('when layers view is selected', () => {
2021-06-08 01:23:25 +05:30
beforeEach(async () => {
createComponentWithApollo({
data: {
currentViewType: LAYER_VIEW,
},
mountFn: mount,
});
jest.runOnlyPendingTimers();
2022-04-04 11:22:00 +05:30
await waitForPromises();
2021-06-08 01:23:25 +05:30
});
it('sets showLinks to true', async () => {
/* This spec uses .props for performance reasons. */
expect(getLinksLayer().exists()).toBe(true);
expect(getLinksLayer().props('showLinks')).toBe(false);
expect(getViewSelector().props('type')).toBe(LAYER_VIEW);
2021-12-11 22:18:48 +05:30
await getDependenciesToggle().vm.$emit('change', true);
2022-04-04 11:22:00 +05:30
2021-06-08 01:23:25 +05:30
jest.runOnlyPendingTimers();
2022-04-04 11:22:00 +05:30
await waitForPromises();
2021-06-08 01:23:25 +05:30
expect(wrapper.findComponent(LinksLayer).props('showLinks')).toBe(true);
});
});
2021-10-27 15:23:28 +05:30
describe('when layers view is selected, and links are active', () => {
2021-06-08 01:23:25 +05:30
beforeEach(async () => {
createComponentWithApollo({
data: {
currentViewType: LAYER_VIEW,
showLinks: true,
},
mountFn: mount,
});
2022-04-04 11:22:00 +05:30
await waitForPromises();
2021-06-08 01:23:25 +05:30
});
it('shows the hover tip in the view selector', async () => {
await getViewSelector().setData({ showLinksActive: true });
expect(getViewSelectorTrip().exists()).toBe(true);
});
});
describe('when hover tip would otherwise show, but it has been previously dismissed', () => {
beforeEach(async () => {
createComponentWithApollo({
data: {
currentViewType: LAYER_VIEW,
showLinks: true,
},
mountFn: mount,
calloutsList: ['pipeline_needs_hover_tip'.toUpperCase()],
});
jest.runOnlyPendingTimers();
2022-04-04 11:22:00 +05:30
await waitForPromises();
2021-06-08 01:23:25 +05:30
});
it('does not show the hover tip', async () => {
await getViewSelector().setData({ showLinksActive: true });
expect(getViewSelectorTrip().exists()).toBe(false);
});
});
2021-04-29 21:17:54 +05:30
describe('when feature flag is on and local storage is set', () => {
beforeEach(async () => {
localStorage.setItem(VIEW_TYPE_KEY, LAYER_VIEW);
createComponentWithApollo({
mountFn: mount,
});
2022-04-04 11:22:00 +05:30
await waitForPromises();
2021-04-29 21:17:54 +05:30
});
2021-06-08 01:23:25 +05:30
afterEach(() => {
localStorage.clear();
});
2022-06-21 17:19:12 +05:30
it('sets the asString prop on the LocalStorageSync component', () => {
expect(getLocalStorageSync().props('asString')).toBe(true);
});
2021-04-29 21:17:54 +05:30
it('reads the view type from localStorage when available', () => {
2021-06-08 01:23:25 +05:30
const viewSelectorNeedsSegment = wrapper
2022-10-11 01:57:18 +05:30
.findComponent(GlButtonGroup)
2022-01-26 12:08:38 +05:30
.findAllComponents(GlButton)
2021-06-08 01:23:25 +05:30
.at(1);
2022-01-26 12:08:38 +05:30
expect(viewSelectorNeedsSegment.classes()).toContain('selected');
2021-06-08 01:23:25 +05:30
});
});
describe('when feature flag is on and local storage is set, but the graph does not use needs', () => {
beforeEach(async () => {
const nonNeedsResponse = { ...mockPipelineResponse };
nonNeedsResponse.data.project.pipeline.usesNeeds = false;
localStorage.setItem(VIEW_TYPE_KEY, LAYER_VIEW);
createComponentWithApollo({
mountFn: mount,
getPipelineDetailsHandler: jest.fn().mockResolvedValue(nonNeedsResponse),
});
2022-04-04 11:22:00 +05:30
await waitForPromises();
2021-06-08 01:23:25 +05:30
});
afterEach(() => {
localStorage.clear();
});
it('still passes stage type to graph', () => {
expect(getGraph().props('viewType')).toBe(STAGE_VIEW);
2021-04-29 21:17:54 +05:30
});
});
describe('when feature flag is on but pipeline does not use needs', () => {
beforeEach(async () => {
const nonNeedsResponse = { ...mockPipelineResponse };
nonNeedsResponse.data.project.pipeline.usesNeeds = false;
createComponentWithApollo({
mountFn: mount,
getPipelineDetailsHandler: jest.fn().mockResolvedValue(nonNeedsResponse),
});
jest.runOnlyPendingTimers();
2022-04-04 11:22:00 +05:30
await waitForPromises();
2021-04-29 21:17:54 +05:30
});
it('does not appear when pipeline does not use needs', () => {
expect(getViewSelector().exists()).toBe(false);
});
});
});
2021-10-27 15:23:28 +05:30
describe('performance metrics', () => {
const metricsPath = '/root/project/-/ci/prometheus_metrics/histograms.json';
let markAndMeasure;
let reportToSentry;
let reportPerformance;
let mock;
beforeEach(() => {
jest.spyOn(window, 'requestAnimationFrame').mockImplementation((cb) => cb());
markAndMeasure = jest.spyOn(perfUtils, 'performanceMarkAndMeasure');
reportToSentry = jest.spyOn(sentryUtils, 'reportToSentry');
reportPerformance = jest.spyOn(Api, 'reportPerformance');
});
describe('with no metrics path', () => {
beforeEach(async () => {
createComponentWithApollo();
2022-04-04 11:22:00 +05:30
await waitForPromises();
2021-10-27 15:23:28 +05:30
});
it('is not called', () => {
expect(markAndMeasure).not.toHaveBeenCalled();
expect(reportToSentry).not.toHaveBeenCalled();
expect(reportPerformance).not.toHaveBeenCalled();
});
});
describe('with metrics path', () => {
const duration = 875;
const numLinks = 7;
const totalGroups = 8;
const metricsData = {
histograms: [
{ name: PIPELINES_DETAIL_LINK_DURATION, value: duration / 1000 },
{ name: PIPELINES_DETAIL_LINKS_TOTAL, value: numLinks },
{
name: PIPELINES_DETAIL_LINKS_JOB_RATIO,
value: numLinks / totalGroups,
},
],
};
describe('when no duration is obtained', () => {
beforeEach(async () => {
2022-08-13 15:12:31 +05:30
stubPerformanceWebAPI();
2021-10-27 15:23:28 +05:30
createComponentWithApollo({
provide: {
metricsPath,
glFeatures: {
pipelineGraphLayersView: true,
},
},
data: {
currentViewType: LAYER_VIEW,
},
});
2022-04-04 11:22:00 +05:30
await waitForPromises();
2021-10-27 15:23:28 +05:30
});
it('attempts to collect metrics', () => {
expect(markAndMeasure).toHaveBeenCalled();
expect(reportPerformance).not.toHaveBeenCalled();
expect(reportToSentry).not.toHaveBeenCalled();
});
});
describe('with duration and no error', () => {
2022-04-04 11:22:00 +05:30
beforeEach(async () => {
2021-10-27 15:23:28 +05:30
mock = new MockAdapter(axios);
mock.onPost(metricsPath).reply(200, {});
jest.spyOn(window.performance, 'getEntriesByName').mockImplementation(() => {
return [{ duration }];
});
createComponentWithApollo({
provide: {
metricsPath,
glFeatures: {
pipelineGraphLayersView: true,
},
},
data: {
currentViewType: LAYER_VIEW,
},
});
2022-04-04 11:22:00 +05:30
await waitForPromises();
2021-10-27 15:23:28 +05:30
});
afterEach(() => {
mock.restore();
});
2022-10-11 01:57:18 +05:30
it('calls reportPerformance with expected arguments', () => {
2021-10-27 15:23:28 +05:30
expect(markAndMeasure).toHaveBeenCalled();
expect(reportPerformance).toHaveBeenCalled();
expect(reportPerformance).toHaveBeenCalledWith(metricsPath, metricsData);
expect(reportToSentry).not.toHaveBeenCalled();
});
});
});
});
2021-02-22 17:27:13 +05:30
});