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

238 lines
7.8 KiB
JavaScript
Raw Normal View History

2020-01-01 13:55:28 +05:30
import { mount } from '@vue/test-utils';
2020-11-24 15:15:51 +05:30
import { GlButton, GlLoadingIcon } from '@gitlab/ui';
2020-01-01 13:55:28 +05:30
import LinkedPipelineComponent from '~/pipelines/components/graph/linked_pipeline.vue';
2020-04-22 19:07:51 +05:30
import CiStatus from '~/vue_shared/components/ci_icon.vue';
2020-01-01 13:55:28 +05:30
import mockData from './linked_pipelines_mock_data';
2021-01-29 00:20:46 +05:30
import { UPSTREAM, DOWNSTREAM } from '~/pipelines/components/graph/constants';
2020-01-01 13:55:28 +05:30
const mockPipeline = mockData.triggered[0];
2020-04-22 19:07:51 +05:30
const validTriggeredPipelineId = mockPipeline.project.id;
const invalidTriggeredPipelineId = mockPipeline.project.id + 5;
2020-01-01 13:55:28 +05:30
describe('Linked pipeline', () => {
let wrapper;
2020-07-28 23:09:34 +05:30
2020-10-24 23:57:45 +05:30
const findButton = () => wrapper.find(GlButton);
2020-07-28 23:09:34 +05:30
const findPipelineLabel = () => wrapper.find('[data-testid="downstream-pipeline-label"]');
const findLinkedPipeline = () => wrapper.find({ ref: 'linkedPipeline' });
2020-11-24 15:15:51 +05:30
const findLoadingIcon = () => wrapper.find(GlLoadingIcon);
const findPipelineLink = () => wrapper.find('[data-testid="pipelineLink"]');
2021-02-22 17:27:13 +05:30
const findExpandButton = () => wrapper.find('[data-testid="expand-pipeline-button"]');
2020-01-01 13:55:28 +05:30
2020-11-24 15:15:51 +05:30
const createWrapper = (propsData, data = []) => {
2020-03-13 15:44:24 +05:30
wrapper = mount(LinkedPipelineComponent, {
propsData,
2020-11-24 15:15:51 +05:30
data() {
return {
...data,
};
},
2020-03-13 15:44:24 +05:30
});
};
2020-01-01 13:55:28 +05:30
afterEach(() => {
wrapper.destroy();
});
describe('rendered output', () => {
const props = {
pipeline: mockPipeline,
2020-04-22 19:07:51 +05:30
projectId: invalidTriggeredPipelineId,
2020-03-13 15:44:24 +05:30
columnTitle: 'Downstream',
2021-01-29 00:20:46 +05:30
type: DOWNSTREAM,
2021-02-22 17:27:13 +05:30
expanded: false,
2020-01-01 13:55:28 +05:30
};
beforeEach(() => {
2020-03-13 15:44:24 +05:30
createWrapper(props);
2020-01-01 13:55:28 +05:30
});
it('should render the project name', () => {
expect(wrapper.text()).toContain(props.pipeline.project.name);
});
it('should render an svg within the status container', () => {
2020-04-22 19:07:51 +05:30
const pipelineStatusElement = wrapper.find(CiStatus);
2020-01-01 13:55:28 +05:30
expect(pipelineStatusElement.find('svg').exists()).toBe(true);
});
it('should render the pipeline status icon svg', () => {
2020-04-22 19:07:51 +05:30
expect(wrapper.find('.ci-status-icon-failed svg').exists()).toBe(true);
2020-01-01 13:55:28 +05:30
});
it('should have a ci-status child component', () => {
2020-10-24 23:57:45 +05:30
expect(wrapper.find(CiStatus).exists()).toBe(true);
2020-01-01 13:55:28 +05:30
});
it('should render the pipeline id', () => {
expect(wrapper.text()).toContain(`#${props.pipeline.id}`);
});
it('should correctly compute the tooltip text', () => {
expect(wrapper.vm.tooltipText).toContain(mockPipeline.project.name);
expect(wrapper.vm.tooltipText).toContain(mockPipeline.details.status.label);
2020-07-28 23:09:34 +05:30
expect(wrapper.vm.tooltipText).toContain(mockPipeline.source_job.name);
expect(wrapper.vm.tooltipText).toContain(mockPipeline.id);
2020-01-01 13:55:28 +05:30
});
it('should render the tooltip text as the title attribute', () => {
2020-11-24 15:15:51 +05:30
const titleAttr = findLinkedPipeline().attributes('title');
2020-01-01 13:55:28 +05:30
expect(titleAttr).toContain(mockPipeline.project.name);
expect(titleAttr).toContain(mockPipeline.details.status.label);
});
2020-10-24 23:57:45 +05:30
it('sets the loading prop to false', () => {
expect(findButton().props('loading')).toBe(false);
2020-01-01 13:55:28 +05:30
});
2020-03-13 15:44:24 +05:30
2020-07-28 23:09:34 +05:30
it('should display multi-project label when pipeline project id is not the same as triggered pipeline project id', () => {
expect(findPipelineLabel().text()).toBe('Multi-project');
2020-03-13 15:44:24 +05:30
});
});
describe('parent/child', () => {
const downstreamProps = {
pipeline: mockPipeline,
2020-04-22 19:07:51 +05:30
projectId: validTriggeredPipelineId,
2020-03-13 15:44:24 +05:30
columnTitle: 'Downstream',
2021-01-29 00:20:46 +05:30
type: DOWNSTREAM,
2021-02-22 17:27:13 +05:30
expanded: false,
2020-03-13 15:44:24 +05:30
};
const upstreamProps = {
...downstreamProps,
columnTitle: 'Upstream',
2021-01-29 00:20:46 +05:30
type: UPSTREAM,
2021-02-22 17:27:13 +05:30
expanded: false,
2020-03-13 15:44:24 +05:30
};
it('parent/child label container should exist', () => {
createWrapper(downstreamProps);
2020-07-28 23:09:34 +05:30
expect(findPipelineLabel().exists()).toBe(true);
2020-03-13 15:44:24 +05:30
});
it('should display child label when pipeline project id is the same as triggered pipeline project id', () => {
createWrapper(downstreamProps);
2020-07-28 23:09:34 +05:30
expect(findPipelineLabel().exists()).toBe(true);
2020-03-13 15:44:24 +05:30
});
it('should display parent label when pipeline project id is the same as triggered_by pipeline project id', () => {
createWrapper(upstreamProps);
2020-07-28 23:09:34 +05:30
expect(findPipelineLabel().exists()).toBe(true);
2020-03-13 15:44:24 +05:30
});
2020-11-24 15:15:51 +05:30
it('downstream pipeline should contain the correct link', () => {
createWrapper(downstreamProps);
expect(findPipelineLink().attributes('href')).toBe(mockData.triggered_by.path);
});
it('upstream pipeline should contain the correct link', () => {
createWrapper(upstreamProps);
expect(findPipelineLink().attributes('href')).toBe(mockData.triggered_by.path);
});
it.each`
presentClass | missingClass
${'gl-right-0'} | ${'gl-left-0'}
${'gl-border-l-1!'} | ${'gl-border-r-1!'}
`(
'pipeline expand button should be postioned right when child pipeline',
({ presentClass, missingClass }) => {
createWrapper(downstreamProps);
expect(findExpandButton().classes()).toContain(presentClass);
expect(findExpandButton().classes()).not.toContain(missingClass);
},
);
it.each`
presentClass | missingClass
${'gl-left-0'} | ${'gl-right-0'}
${'gl-border-r-1!'} | ${'gl-border-l-1!'}
`(
'pipeline expand button should be postioned left when parent pipeline',
({ presentClass, missingClass }) => {
createWrapper(upstreamProps);
expect(findExpandButton().classes()).toContain(presentClass);
expect(findExpandButton().classes()).not.toContain(missingClass);
},
);
it.each`
pipelineType | anglePosition | expanded
${downstreamProps} | ${'angle-right'} | ${false}
${downstreamProps} | ${'angle-left'} | ${true}
${upstreamProps} | ${'angle-left'} | ${false}
${upstreamProps} | ${'angle-right'} | ${true}
`(
'$pipelineType.columnTitle pipeline button icon should be $anglePosition if expanded state is $expanded',
({ pipelineType, anglePosition, expanded }) => {
2021-02-22 17:27:13 +05:30
createWrapper({ ...pipelineType, expanded });
2020-11-24 15:15:51 +05:30
expect(findExpandButton().props('icon')).toBe(anglePosition);
},
);
2020-01-01 13:55:28 +05:30
});
describe('when isLoading is true', () => {
const props = {
pipeline: { ...mockPipeline, isLoading: true },
2020-04-22 19:07:51 +05:30
projectId: invalidTriggeredPipelineId,
2020-03-13 15:44:24 +05:30
columnTitle: 'Downstream',
2021-01-29 00:20:46 +05:30
type: DOWNSTREAM,
2021-02-22 17:27:13 +05:30
expanded: false,
2020-01-01 13:55:28 +05:30
};
beforeEach(() => {
2020-03-13 15:44:24 +05:30
createWrapper(props);
2020-01-01 13:55:28 +05:30
});
2020-11-24 15:15:51 +05:30
it('loading icon is visible', () => {
expect(findLoadingIcon().exists()).toBe(true);
2020-01-01 13:55:28 +05:30
});
});
2020-07-28 23:09:34 +05:30
describe('on click/hover', () => {
2020-01-01 13:55:28 +05:30
const props = {
pipeline: mockPipeline,
2020-04-22 19:07:51 +05:30
projectId: validTriggeredPipelineId,
2020-03-13 15:44:24 +05:30
columnTitle: 'Downstream',
2021-01-29 00:20:46 +05:30
type: DOWNSTREAM,
2021-02-22 17:27:13 +05:30
expanded: false,
2020-01-01 13:55:28 +05:30
};
beforeEach(() => {
2020-03-13 15:44:24 +05:30
createWrapper(props);
2020-01-01 13:55:28 +05:30
});
it('emits `pipelineClicked` event', () => {
jest.spyOn(wrapper.vm, '$emit');
2020-04-22 19:07:51 +05:30
findButton().trigger('click');
2020-01-01 13:55:28 +05:30
2020-03-13 15:44:24 +05:30
expect(wrapper.emitted().pipelineClicked).toBeTruthy();
2020-01-01 13:55:28 +05:30
});
it('should emit `bv::hide::tooltip` to close the tooltip', () => {
jest.spyOn(wrapper.vm.$root, '$emit');
2020-04-22 19:07:51 +05:30
findButton().trigger('click');
2020-01-01 13:55:28 +05:30
2021-02-22 17:27:13 +05:30
expect(wrapper.vm.$root.$emit.mock.calls[0]).toEqual(['bv::hide::tooltip']);
2020-01-01 13:55:28 +05:30
});
2020-07-28 23:09:34 +05:30
it('should emit downstreamHovered with job name on mouseover', () => {
findLinkedPipeline().trigger('mouseover');
expect(wrapper.emitted().downstreamHovered).toStrictEqual([['trigger_job']]);
});
it('should emit downstreamHovered with empty string on mouseleave', () => {
findLinkedPipeline().trigger('mouseleave');
expect(wrapper.emitted().downstreamHovered).toStrictEqual([['']]);
});
2020-11-24 15:15:51 +05:30
it('should emit pipelineExpanded with job name and expanded state on click', () => {
findExpandButton().trigger('click');
expect(wrapper.emitted().pipelineExpandToggle).toStrictEqual([['trigger_job', true]]);
});
2020-01-01 13:55:28 +05:30
});
});