debian-mirror-gitlab/spec/frontend/pipelines/components/dag/dag_spec.js

178 lines
5 KiB
JavaScript
Raw Normal View History

2020-07-28 23:09:34 +05:30
import { GlAlert, GlEmptyState } from '@gitlab/ui';
2021-03-11 19:13:27 +05:30
import { mount, shallowMount } from '@vue/test-utils';
2022-04-04 11:22:00 +05:30
import { nextTick } from 'vue';
2021-03-11 19:13:27 +05:30
import { ADD_NOTE, REMOVE_NOTE, REPLACE_NOTES } from '~/pipelines/components/dag/constants';
2020-06-23 00:09:42 +05:30
import Dag from '~/pipelines/components/dag/dag.vue';
2020-07-28 23:09:34 +05:30
import DagAnnotations from '~/pipelines/components/dag/dag_annotations.vue';
2021-03-11 19:13:27 +05:30
import DagGraph from '~/pipelines/components/dag/dag_graph.vue';
2020-06-23 00:09:42 +05:30
2021-01-03 14:25:43 +05:30
import { PARSE_FAILURE, UNSUPPORTED_DATA } from '~/pipelines/constants';
2020-07-28 23:09:34 +05:30
import {
2020-10-24 23:57:45 +05:30
mockParsedGraphQLNodes,
2020-07-28 23:09:34 +05:30
tooSmallGraph,
unparseableGraph,
graphWithoutDependencies,
singleNote,
multiNote,
} from './mock_data';
2020-06-23 00:09:42 +05:30
describe('Pipeline DAG graph wrapper', () => {
let wrapper;
const getAlert = () => wrapper.find(GlAlert);
const getAllAlerts = () => wrapper.findAll(GlAlert);
const getGraph = () => wrapper.find(DagGraph);
2020-07-28 23:09:34 +05:30
const getNotes = () => wrapper.find(DagAnnotations);
2021-03-08 18:12:59 +05:30
const getErrorText = (type) => wrapper.vm.$options.errorTexts[type];
2020-07-28 23:09:34 +05:30
const getEmptyState = () => wrapper.find(GlEmptyState);
2020-06-23 00:09:42 +05:30
2020-10-24 23:57:45 +05:30
const createComponent = ({
graphData = mockParsedGraphQLNodes,
provideOverride = {},
method = shallowMount,
} = {}) => {
2020-06-23 00:09:42 +05:30
if (wrapper?.destroy) {
wrapper.destroy();
}
wrapper = method(Dag, {
2020-10-24 23:57:45 +05:30
provide: {
pipelineProjectPath: 'root/abc-dag',
pipelineIid: '1',
2020-07-28 23:09:34 +05:30
emptySvgPath: '/my-svg',
dagDocPath: '/my-doc',
2020-10-24 23:57:45 +05:30
...provideOverride,
2020-07-28 23:09:34 +05:30
},
2020-06-23 00:09:42 +05:30
data() {
return {
2020-10-24 23:57:45 +05:30
graphData,
2020-06-23 00:09:42 +05:30
showFailureAlert: false,
};
},
});
};
afterEach(() => {
wrapper.destroy();
wrapper = null;
});
2020-10-24 23:57:45 +05:30
describe('when a query argument is undefined', () => {
2020-06-23 00:09:42 +05:30
beforeEach(() => {
2020-10-24 23:57:45 +05:30
createComponent({
provideOverride: { pipelineProjectPath: undefined },
graphData: null,
});
2020-06-23 00:09:42 +05:30
});
2020-10-24 23:57:45 +05:30
it('does not render the graph', async () => {
2020-06-23 00:09:42 +05:30
expect(getGraph().exists()).toBe(false);
});
2020-07-28 23:09:34 +05:30
it('does not render the empty state', () => {
expect(getEmptyState().exists()).toBe(false);
});
2020-06-23 00:09:42 +05:30
});
2020-10-24 23:57:45 +05:30
describe('when all query variables are defined', () => {
describe('but the parse fails', () => {
2020-07-28 23:09:34 +05:30
beforeEach(async () => {
2020-10-24 23:57:45 +05:30
createComponent({
graphData: unparseableGraph,
});
2020-06-23 00:09:42 +05:30
});
it('shows the PARSE_FAILURE alert and not the graph', () => {
2020-07-28 23:09:34 +05:30
expect(getAlert().exists()).toBe(true);
expect(getAlert().text()).toBe(getErrorText(PARSE_FAILURE));
expect(getGraph().exists()).toBe(false);
});
it('does not render the empty state', () => {
expect(getEmptyState().exists()).toBe(false);
2020-06-23 00:09:42 +05:30
});
});
2020-10-24 23:57:45 +05:30
describe('parse succeeds', () => {
2020-07-28 23:09:34 +05:30
beforeEach(async () => {
2020-10-24 23:57:45 +05:30
createComponent({ method: mount });
2020-06-23 00:09:42 +05:30
});
2020-10-24 23:57:45 +05:30
it('shows the graph', () => {
2020-07-28 23:09:34 +05:30
expect(getGraph().exists()).toBe(true);
});
it('does not render the empty state', () => {
expect(getEmptyState().exists()).toBe(false);
2020-06-23 00:09:42 +05:30
});
});
2020-10-24 23:57:45 +05:30
describe('parse succeeds, but the resulting graph is too small', () => {
2020-07-28 23:09:34 +05:30
beforeEach(async () => {
2020-10-24 23:57:45 +05:30
createComponent({
graphData: tooSmallGraph,
});
2020-06-23 00:09:42 +05:30
});
it('shows the UNSUPPORTED_DATA alert and not the graph', () => {
2020-07-28 23:09:34 +05:30
expect(getAlert().exists()).toBe(true);
expect(getAlert().text()).toBe(getErrorText(UNSUPPORTED_DATA));
expect(getGraph().exists()).toBe(false);
});
it('does not show the empty dag graph state', () => {
expect(getEmptyState().exists()).toBe(false);
});
});
2020-10-24 23:57:45 +05:30
describe('the returned data is empty', () => {
2020-07-28 23:09:34 +05:30
beforeEach(async () => {
2020-10-24 23:57:45 +05:30
createComponent({
method: mount,
graphData: graphWithoutDependencies,
});
2020-07-28 23:09:34 +05:30
});
it('does not render an error alert or the graph', () => {
2020-10-24 23:57:45 +05:30
expect(getAllAlerts().length).toBe(0);
2020-07-28 23:09:34 +05:30
expect(getGraph().exists()).toBe(false);
2020-06-23 00:09:42 +05:30
});
2020-07-28 23:09:34 +05:30
it('shows the empty dag graph state', () => {
expect(getEmptyState().exists()).toBe(true);
});
});
});
describe('annotations', () => {
beforeEach(async () => {
2020-10-24 23:57:45 +05:30
createComponent();
2020-07-28 23:09:34 +05:30
});
it('toggles on link mouseover and mouseout', async () => {
const currentNote = singleNote['dag-link103'];
expect(getNotes().exists()).toBe(false);
getGraph().vm.$emit('update-annotation', { type: ADD_NOTE, data: currentNote });
2022-04-04 11:22:00 +05:30
await nextTick();
2020-07-28 23:09:34 +05:30
expect(getNotes().exists()).toBe(true);
getGraph().vm.$emit('update-annotation', { type: REMOVE_NOTE, data: currentNote });
2022-04-04 11:22:00 +05:30
await nextTick();
2020-07-28 23:09:34 +05:30
expect(getNotes().exists()).toBe(false);
});
it('toggles on node and link click', async () => {
expect(getNotes().exists()).toBe(false);
getGraph().vm.$emit('update-annotation', { type: REPLACE_NOTES, data: multiNote });
2022-04-04 11:22:00 +05:30
await nextTick();
2020-07-28 23:09:34 +05:30
expect(getNotes().exists()).toBe(true);
getGraph().vm.$emit('update-annotation', { type: REPLACE_NOTES, data: {} });
2022-04-04 11:22:00 +05:30
await nextTick();
2020-07-28 23:09:34 +05:30
expect(getNotes().exists()).toBe(false);
2020-06-23 00:09:42 +05:30
});
});
});