Skip to content

G
gitlab-ce
Commit 995fc1a1 authored by Sarah Groff Hennigh-Palermo's avatar Sarah Groff Hennigh-Palermo
Browse files
Options

Merge branch '333169-update-the-pipeline-editor-viz-to-look-like-pipeline-graph' into 'master' 

Update the Pipeline editor viz to look like Pipeline Graph

See merge request gitlab-org/gitlab!64018
parents c73e8e6e 704baf56
Show whitespace changes
Inline Side-by-side
Showing with 73 additions and 132 deletions
app/assets/javascripts/pipelines/components/graph/graph_component.vue
View file @ 995fc1a1
...@@ -101,9 +101,6 @@ export default { ...@@ -101,9 +101,6 @@ export default {
showJobLinks() { showJobLinks() {
return !this.isStageView && this.showLinks; return !this.isStageView && this.showLinks;
}, },
shouldShowStageName() {
return !this.isStageView;
},
// The show downstream check prevents showing redundant linked columns // The show downstream check prevents showing redundant linked columns
showDownstreamPipelines() { showDownstreamPipelines() {
return ( return (
...@@ -202,7 +199,7 @@ export default { ...@@ -202,7 +199,7 @@ export default {
:groups="column.groups" :groups="column.groups"
:action="column.status.action" :action="column.status.action"
:highlighted-jobs="highlightedJobs" :highlighted-jobs="highlightedJobs"
:show-stage-name="shouldShowStageName" :is-stage-view="isStageView"
:job-hovered="hoveredJobName" :job-hovered="hoveredJobName"
:source-job-hovered="hoveredSourceJobName" :source-job-hovered="hoveredSourceJobName"
:pipeline-expanded="pipelineExpanded" :pipeline-expanded="pipelineExpanded"
......
app/assets/javascripts/pipelines/components/graph/stage_column_component.vue
View file @ 995fc1a1
...@@ -40,6 +40,11 @@ export default { ...@@ -40,6 +40,11 @@ export default {
required: false, required: false,
default: () => [], default: () => [],
}, },
isStageView: {
type: Boolean,
required: false,
default: false,
},
jobHovered: { jobHovered: {
type: String, type: String,
required: false, required: false,
...@@ -50,11 +55,6 @@ export default { ...@@ -50,11 +55,6 @@ export default {
required: false, required: false,
default: () => ({}), default: () => ({}),
}, },
showStageName: {
type: Boolean,
required: false,
default: false,
},
sourceJobHovered: { sourceJobHovered: {
type: String, type: String,
required: false, required: false,
...@@ -73,6 +73,12 @@ export default { ...@@ -73,6 +73,12 @@ export default {
'gl-pl-3', 'gl-pl-3',
], ],
computed: { computed: {
canUpdatePipeline() {
return this.userPermissions.updatePipeline;
},
columnSpacingClass() {
return this.isStageView ? 'gl-px-6' : 'gl-px-9';
},
/* /*
currentGroups and filteredGroups are part of currentGroups and filteredGroups are part of
a test to hunt down a bug a test to hunt down a bug
...@@ -94,8 +100,8 @@ export default { ...@@ -94,8 +100,8 @@ export default {
hasAction() { hasAction() {
return !isEmpty(this.action); return !isEmpty(this.action);
}, },
canUpdatePipeline() { showStageName() {
return this.userPermissions.updatePipeline; return !this.isStageView;
}, },
}, },
errorCaptured(err, _vm, info) { errorCaptured(err, _vm, info) {
...@@ -130,7 +136,7 @@ export default { ...@@ -130,7 +136,7 @@ export default {
}; };
</script> </script>
<template> <template>
<main-graph-wrapper class="gl-px-6" data-testid="stage-column"> <main-graph-wrapper :class="columnSpacingClass" data-testid="stage-column">
<template #stages> <template #stages>
<div <div
data-testid="stage-column-title" data-testid="stage-column-title"
......
app/assets/javascripts/pipelines/components/graph_shared/drawing_utils.js
View file @ 995fc1a1
...@@ -75,11 +75,11 @@ export const generateLinksData = ({ links }, containerID, modifier = '') => { ...@@ -75,11 +75,11 @@ export const generateLinksData = ({ links }, containerID, modifier = '') => {
// until we can safely draw the bezier to look nice. // until we can safely draw the bezier to look nice.
// The adjustment number here is a magic number to make things // The adjustment number here is a magic number to make things
// look nice and should change if the padding changes. This goes well // look nice and should change if the padding changes. This goes well
// with gl-px-6. gl-px-8 is more like 100. // with gl-px-9 which we translate with 100px here.
const straightLineDestinationX = targetNodeX - 60; const straightLineDestinationX = targetNodeX - 100;
const controlPointX = straightLineDestinationX + (targetNodeX - straightLineDestinationX) / 2; const controlPointX = straightLineDestinationX + (targetNodeX - straightLineDestinationX) / 2;
if (straightLineDestinationX > 0) { if (straightLineDestinationX > firstPointCoordinateX) {
path.lineTo(straightLineDestinationX, sourceNodeY); path.lineTo(straightLineDestinationX, sourceNodeY);
} }
......
app/assets/javascripts/pipelines/components/pipeline_graph/job_pill.vue
View file @ 995fc1a1
...@@ -14,7 +14,7 @@ export default { ...@@ -14,7 +14,7 @@ export default {
type: Number, type: Number,
required: true, required: true,
}, },
isHighlighted: { isHovered: {
type: Boolean, type: Boolean,
required: false, required: false,
default: false, default: false,
...@@ -42,7 +42,7 @@ export default { ...@@ -42,7 +42,7 @@ export default {
jobPillClasses() { jobPillClasses() {
return [ return [
{ 'gl-opacity-3': this.isFadedOut }, { 'gl-opacity-3': this.isFadedOut },
this.isHighlighted ? 'gl-shadow-blue-200-x0-y0-b4-s2' : 'gl-inset-border-2-green-400', { 'gl-bg-gray-50 gl-inset-border-1-gray-200': this.isHovered },
]; ];
}, },
}, },
...@@ -57,10 +57,11 @@ export default { ...@@ -57,10 +57,11 @@ export default {
}; };
</script> </script>
<template> <template>
<div class="gl-w-full">
<tooltip-on-truncate :title="jobName" truncate-target="child" placement="top"> <tooltip-on-truncate :title="jobName" truncate-target="child" placement="top">
<div <div
:id="id" :id="id"
class="gl-w-15 gl-bg-white gl-text-center gl-text-truncate gl-rounded-pill gl-mb-3 gl-px-5 gl-py-2 gl-relative gl-z-index-1 gl-transition-duration-slow gl-transition-timing-function-ease" class="gl-bg-white gl-inset-border-1-gray-100 gl-text-center gl-text-truncate gl-rounded-6 gl-mb-3 gl-px-5 gl-py-3 gl-relative gl-z-index-1 gl-transition-duration-slow gl-transition-timing-function-ease"
:class="jobPillClasses" :class="jobPillClasses"
@mouseover="onMouseEnter" @mouseover="onMouseEnter"
@mouseleave="onMouseLeave" @mouseleave="onMouseLeave"
...@@ -68,4 +69,5 @@ export default { ...@@ -68,4 +69,5 @@ export default {
{{ jobName }} {{ jobName }}
</div> </div>
</tooltip-on-truncate> </tooltip-on-truncate>
</div>
</template> </template>
app/assets/javascripts/pipelines/components/pipeline_graph/pipeline_graph.vue
View file @ 995fc1a1
...@@ -4,14 +4,14 @@ import { __ } from '~/locale'; ...@@ -4,14 +4,14 @@ import { __ } from '~/locale';
import { DRAW_FAILURE, DEFAULT } from '../../constants'; import { DRAW_FAILURE, DEFAULT } from '../../constants';
import LinksLayer from '../graph_shared/links_layer.vue'; import LinksLayer from '../graph_shared/links_layer.vue';
import JobPill from './job_pill.vue'; import JobPill from './job_pill.vue';
import StagePill from './stage_pill.vue'; import StageName from './stage_name.vue';
export default { export default {
components: { components: {
GlAlert, GlAlert,
JobPill, JobPill,
LinksLayer, LinksLayer,
StagePill, StageName,
}, },
CONTAINER_REF: 'PIPELINE_GRAPH_CONTAINER_REF', CONTAINER_REF: 'PIPELINE_GRAPH_CONTAINER_REF',
BASE_CONTAINER_ID: 'pipeline-graph-container', BASE_CONTAINER_ID: 'pipeline-graph-container',
...@@ -21,6 +21,11 @@ export default { ...@@ -21,6 +21,11 @@ export default {
[DRAW_FAILURE]: __('Could not draw the lines for job relationships'), [DRAW_FAILURE]: __('Could not draw the lines for job relationships'),
[DEFAULT]: __('An unknown error occurred.'), [DEFAULT]: __('An unknown error occurred.'),
}, },
// The combination of gl-w-full gl-min-w-full and gl-max-w-15 is necessary.
// The max width and the width make sure the ellipsis to work and the min width
// is for when there is less text than the stage column width (which the width 100% does not fix)
jobWrapperClasses:
'gl-display-flex gl-flex-direction-column gl-align-items-center gl-w-full gl-px-8 gl-min-w-full gl-max-w-15',
props: { props: {
pipelineData: { pipelineData: {
required: true, required: true,
...@@ -85,23 +90,8 @@ export default { ...@@ -85,23 +90,8 @@ export default {
height: this.$refs[this.$options.CONTAINER_REF].scrollHeight, height: this.$refs[this.$options.CONTAINER_REF].scrollHeight,
}; };
}, },
getStageBackgroundClasses(index) { isFadedOut(jobName) {
const { length } = this.pipelineStages; return this.highlightedJobs.length > 1 && !this.isJobHighlighted(jobName);
// It's possible for a graph to have only one stage, in which
// case we concatenate both the left and right rounding classes
if (length === 1) {
return 'gl-rounded-bottom-left-6 gl-rounded-top-left-6 gl-rounded-bottom-right-6 gl-rounded-top-right-6';
}
if (index === 0) {
return 'gl-rounded-bottom-left-6 gl-rounded-top-left-6';
}
if (index === length - 1) {
return 'gl-rounded-bottom-right-6 gl-rounded-top-right-6';
}
return '';
}, },
isJobHighlighted(jobName) { isJobHighlighted(jobName) {
return this.highlightedJobs.includes(jobName); return this.highlightedJobs.includes(jobName);
...@@ -137,7 +127,12 @@ export default { ...@@ -137,7 +127,12 @@ export default {
> >
{{ failure.text }} {{ failure.text }}
</gl-alert> </gl-alert>
<div :id="containerId" :ref="$options.CONTAINER_REF" data-testid="graph-container"> <div
:id="containerId"
:ref="$options.CONTAINER_REF"
class="gl-bg-gray-10 gl-overflow-auto"
data-testid="graph-container"
>
<links-layer <links-layer
:pipeline-data="pipelineStages" :pipeline-data="pipelineStages"
:pipeline-id="$options.PIPELINE_ID" :pipeline-id="$options.PIPELINE_ID"
...@@ -152,23 +147,17 @@ export default { ...@@ -152,23 +147,17 @@ export default {
:key="`${stage.name}-${index}`" :key="`${stage.name}-${index}`"
class="gl-flex-direction-column" class="gl-flex-direction-column"
> >
<div <div class="gl-display-flex gl-align-items-center gl-w-full gl-px-9 gl-py-4 gl-mb-5">
class="gl-display-flex gl-align-items-center gl-bg-white gl-w-full gl-px-8 gl-py-4 gl-mb-5" <stage-name :stage-name="stage.name" />
:class="getStageBackgroundClasses(index)"
data-testid="stage-background"
>
<stage-pill :stage-name="stage.name" :is-empty="stage.groups.length === 0" />
</div> </div>
<div <div :class="$options.jobWrapperClasses">
class="gl-display-flex gl-flex-direction-column gl-align-items-center gl-w-full gl-px-8"
>
<job-pill <job-pill
v-for="group in stage.groups" v-for="group in stage.groups"
:key="group.name" :key="group.name"
:job-name="group.name" :job-name="group.name"
:pipeline-id="$options.PIPELINE_ID" :pipeline-id="$options.PIPELINE_ID"
:is-highlighted="hasHighlightedJob && isJobHighlighted(group.name)" :is-hovered="highlightedJob === group.name"
:is-faded-out="hasHighlightedJob && !isJobHighlighted(group.name)" :is-faded-out="isFadedOut(group.name)"
@on-mouse-enter="setHoveredJob" @on-mouse-enter="setHoveredJob"
@on-mouse-leave="removeHoveredJob" @on-mouse-leave="removeHoveredJob"
/> />
......
app/assets/javascripts/pipelines/components/pipeline_graph/stage_pill.vue → app/assets/javascripts/pipelines/components/pipeline_graph/stage_name.vue
View file @ 995fc1a1
<script> <script>
import { capitalize, escape } from 'lodash';
import tooltipOnTruncate from '~/vue_shared/components/tooltip_on_truncate.vue'; import tooltipOnTruncate from '~/vue_shared/components/tooltip_on_truncate.vue';
export default { export default {
...@@ -10,26 +11,18 @@ export default { ...@@ -10,26 +11,18 @@ export default {
type: String, type: String,
required: true, required: true,
}, },
isEmpty: {
type: Boolean,
required: false,
default: false,
},
}, },
computed: { computed: {
emptyClass() { formattedTitle() {
return this.isEmpty ? 'gl-bg-gray-200' : 'gl-bg-gray-600'; return capitalize(escape(this.stageName));
}, },
}, },
}; };
</script> </script>
<template> <template>
<tooltip-on-truncate :title="stageName" truncate-target="child" placement="top"> <tooltip-on-truncate :title="stageName" truncate-target="child" placement="top">
<div <div class="gl-py-2 gl-text-truncate gl-font-weight-bold gl-w-20">
class="gl-px-5 gl-py-2 gl-text-white gl-text-center gl-text-truncate gl-rounded-pill gl-w-20" {{ formattedTitle }}
:class="emptyClass"
>
{{ stageName }}
</div> </div>
</tooltip-on-truncate> </tooltip-on-truncate>
</template> </template>
spec/frontend/pipelines/graph/stage_column_component_spec.js
View file @ 995fc1a1
...@@ -56,7 +56,6 @@ describe('stage column component', () => { ...@@ -56,7 +56,6 @@ describe('stage column component', () => {
afterEach(() => { afterEach(() => {
wrapper.destroy(); wrapper.destroy();
wrapper = null;
}); });
describe('when mounted', () => { describe('when mounted', () => {
......
spec/frontend/pipelines/graph_shared/__snapshots__/links_inner_spec.js.snap
View file @ 995fc1a1
...@@ -2,29 +2,29 @@ ...@@ -2,29 +2,29 @@
exports[`Links Inner component with a large number of needs matches snapshot and has expected path 1`] = ` exports[`Links Inner component with a large number of needs matches snapshot and has expected path 1`] = `
"<div class=\\"gl-display-flex gl-relative\\" totalgroups=\\"10\\"><svg id=\\"link-svg\\" viewBox=\\"0,0,1019,445\\" width=\\"1019px\\" height=\\"445px\\" class=\\"gl-absolute gl-pointer-events-none\\"> "<div class=\\"gl-display-flex gl-relative\\" totalgroups=\\"10\\"><svg id=\\"link-svg\\" viewBox=\\"0,0,1019,445\\" width=\\"1019px\\" height=\\"445px\\" class=\\"gl-absolute gl-pointer-events-none\\">
<path d=\\"M202,118L42,118C72,118,72,138,102,138\\" stroke-width=\\"2\\" class=\\"gl-fill-transparent gl-transition-duration-slow gl-transition-timing-function-ease gl-stroke-gray-200\\"></path> <path d=\\"M202,118C52,118,52,138,102,138\\" stroke-width=\\"2\\" class=\\"gl-fill-transparent gl-transition-duration-slow gl-transition-timing-function-ease gl-stroke-gray-200\\"></path>
<path d=\\"M202,118L52,118C82,118,82,148,112,148\\" stroke-width=\\"2\\" class=\\"gl-fill-transparent gl-transition-duration-slow gl-transition-timing-function-ease gl-stroke-gray-200\\"></path> <path d=\\"M202,118C62,118,62,148,112,148\\" stroke-width=\\"2\\" class=\\"gl-fill-transparent gl-transition-duration-slow gl-transition-timing-function-ease gl-stroke-gray-200\\"></path>
<path d=\\"M222,138L62,138C92,138,92,158,122,158\\" stroke-width=\\"2\\" class=\\"gl-fill-transparent gl-transition-duration-slow gl-transition-timing-function-ease gl-stroke-gray-200\\"></path> <path d=\\"M222,138C72,138,72,158,122,158\\" stroke-width=\\"2\\" class=\\"gl-fill-transparent gl-transition-duration-slow gl-transition-timing-function-ease gl-stroke-gray-200\\"></path>
<path d=\\"M212,128L72,128C102,128,102,168,132,168\\" stroke-width=\\"2\\" class=\\"gl-fill-transparent gl-transition-duration-slow gl-transition-timing-function-ease gl-stroke-gray-200\\"></path> <path d=\\"M212,128C82,128,82,168,132,168\\" stroke-width=\\"2\\" class=\\"gl-fill-transparent gl-transition-duration-slow gl-transition-timing-function-ease gl-stroke-gray-200\\"></path>
<path d=\\"M232,148L82,148C112,148,112,178,142,178\\" stroke-width=\\"2\\" class=\\"gl-fill-transparent gl-transition-duration-slow gl-transition-timing-function-ease gl-stroke-gray-200\\"></path> <path d=\\"M232,148C92,148,92,178,142,178\\" stroke-width=\\"2\\" class=\\"gl-fill-transparent gl-transition-duration-slow gl-transition-timing-function-ease gl-stroke-gray-200\\"></path>
</svg> </div>" </svg> </div>"
`; `;
exports[`Links Inner component with a parallel need matches snapshot and has expected path 1`] = ` exports[`Links Inner component with a parallel need matches snapshot and has expected path 1`] = `
"<div class=\\"gl-display-flex gl-relative\\" totalgroups=\\"10\\"><svg id=\\"link-svg\\" viewBox=\\"0,0,1019,445\\" width=\\"1019px\\" height=\\"445px\\" class=\\"gl-absolute gl-pointer-events-none\\"> "<div class=\\"gl-display-flex gl-relative\\" totalgroups=\\"10\\"><svg id=\\"link-svg\\" viewBox=\\"0,0,1019,445\\" width=\\"1019px\\" height=\\"445px\\" class=\\"gl-absolute gl-pointer-events-none\\">
<path d=\\"M192,108L22,108C52,108,52,118,82,118\\" stroke-width=\\"2\\" class=\\"gl-fill-transparent gl-transition-duration-slow gl-transition-timing-function-ease gl-stroke-gray-200\\"></path> <path d=\\"M192,108C32,108,32,118,82,118\\" stroke-width=\\"2\\" class=\\"gl-fill-transparent gl-transition-duration-slow gl-transition-timing-function-ease gl-stroke-gray-200\\"></path>
</svg> </div>" </svg> </div>"
`; `;
exports[`Links Inner component with one need matches snapshot and has expected path 1`] = ` exports[`Links Inner component with one need matches snapshot and has expected path 1`] = `
"<div class=\\"gl-display-flex gl-relative\\" totalgroups=\\"10\\"><svg id=\\"link-svg\\" viewBox=\\"0,0,1019,445\\" width=\\"1019px\\" height=\\"445px\\" class=\\"gl-absolute gl-pointer-events-none\\"> "<div class=\\"gl-display-flex gl-relative\\" totalgroups=\\"10\\"><svg id=\\"link-svg\\" viewBox=\\"0,0,1019,445\\" width=\\"1019px\\" height=\\"445px\\" class=\\"gl-absolute gl-pointer-events-none\\">
<path d=\\"M202,118L42,118C72,118,72,138,102,138\\" stroke-width=\\"2\\" class=\\"gl-fill-transparent gl-transition-duration-slow gl-transition-timing-function-ease gl-stroke-gray-200\\"></path> <path d=\\"M202,118C52,118,52,138,102,138\\" stroke-width=\\"2\\" class=\\"gl-fill-transparent gl-transition-duration-slow gl-transition-timing-function-ease gl-stroke-gray-200\\"></path>
</svg> </div>" </svg> </div>"
`; `;
exports[`Links Inner component with same stage needs matches snapshot and has expected path 1`] = ` exports[`Links Inner component with same stage needs matches snapshot and has expected path 1`] = `
"<div class=\\"gl-display-flex gl-relative\\" totalgroups=\\"10\\"><svg id=\\"link-svg\\" viewBox=\\"0,0,1019,445\\" width=\\"1019px\\" height=\\"445px\\" class=\\"gl-absolute gl-pointer-events-none\\"> "<div class=\\"gl-display-flex gl-relative\\" totalgroups=\\"10\\"><svg id=\\"link-svg\\" viewBox=\\"0,0,1019,445\\" width=\\"1019px\\" height=\\"445px\\" class=\\"gl-absolute gl-pointer-events-none\\">
<path d=\\"M192,108L22,108C52,108,52,118,82,118\\" stroke-width=\\"2\\" class=\\"gl-fill-transparent gl-transition-duration-slow gl-transition-timing-function-ease gl-stroke-gray-200\\"></path> <path d=\\"M192,108C32,108,32,118,82,118\\" stroke-width=\\"2\\" class=\\"gl-fill-transparent gl-transition-duration-slow gl-transition-timing-function-ease gl-stroke-gray-200\\"></path>
<path d=\\"M202,118L32,118C62,118,62,128,92,128\\" stroke-width=\\"2\\" class=\\"gl-fill-transparent gl-transition-duration-slow gl-transition-timing-function-ease gl-stroke-gray-200\\"></path> <path d=\\"M202,118C42,118,42,128,92,128\\" stroke-width=\\"2\\" class=\\"gl-fill-transparent gl-transition-duration-slow gl-transition-timing-function-ease gl-stroke-gray-200\\"></path>
</svg> </div>" </svg> </div>"
`; `;
spec/frontend/pipelines/pipeline_graph/pipeline_graph_spec.js
View file @ 995fc1a1
...@@ -6,7 +6,7 @@ import LinksInner from '~/pipelines/components/graph_shared/links_inner.vue'; ...@@ -6,7 +6,7 @@ import LinksInner from '~/pipelines/components/graph_shared/links_inner.vue';
import LinksLayer from '~/pipelines/components/graph_shared/links_layer.vue'; import LinksLayer from '~/pipelines/components/graph_shared/links_layer.vue';
import JobPill from '~/pipelines/components/pipeline_graph/job_pill.vue'; import JobPill from '~/pipelines/components/pipeline_graph/job_pill.vue';
import PipelineGraph from '~/pipelines/components/pipeline_graph/pipeline_graph.vue'; import PipelineGraph from '~/pipelines/components/pipeline_graph/pipeline_graph.vue';
import StagePill from '~/pipelines/components/pipeline_graph/stage_pill.vue'; import StageName from '~/pipelines/components/pipeline_graph/stage_name.vue';
import { pipelineData, singleStageData } from './mock_data'; import { pipelineData, singleStageData } from './mock_data';
describe('pipeline graph component', () => { describe('pipeline graph component', () => {
...@@ -35,11 +35,9 @@ describe('pipeline graph component', () => { ...@@ -35,11 +35,9 @@ describe('pipeline graph component', () => {
const findAlert = () => wrapper.findComponent(GlAlert); const findAlert = () => wrapper.findComponent(GlAlert);
const findAllJobPills = () => wrapper.findAll(JobPill); const findAllJobPills = () => wrapper.findAll(JobPill);
const findAllStageBackgroundElements = () => wrapper.findAll('[data-testid="stage-background"]'); const findAllStageNames = () => wrapper.findAllComponents(StageName);
const findAllStagePills = () => wrapper.findAllComponents(StagePill);
const findLinksLayer = () => wrapper.findComponent(LinksLayer); const findLinksLayer = () => wrapper.findComponent(LinksLayer);
const findPipelineGraph = () => wrapper.find('[data-testid="graph-container"]'); const findPipelineGraph = () => wrapper.find('[data-testid="graph-container"]');
const findStageBackgroundElementAt = (index) => findAllStageBackgroundElements().at(index);
afterEach(() => { afterEach(() => {
wrapper.destroy(); wrapper.destroy();
...@@ -67,10 +65,10 @@ describe('pipeline graph component', () => { ...@@ -67,10 +65,10 @@ describe('pipeline graph component', () => {
wrapper = createComponent({ pipelineData: singleStageData }); wrapper = createComponent({ pipelineData: singleStageData });
}); });
it('renders the right number of stage pills', () => { it('renders the right number of stage titles', () => {
const expectedStagesLength = singleStageData.stages.length; const expectedStagesLength = singleStageData.stages.length;
expect(findAllStagePills()).toHaveLength(expectedStagesLength); expect(findAllStageNames()).toHaveLength(expectedStagesLength);
}); });
it('renders the right number of job pills', () => { it('renders the right number of job pills', () => {
...@@ -81,20 +79,6 @@ describe('pipeline graph component', () => { ...@@ -81,20 +79,6 @@ describe('pipeline graph component', () => {
expect(findAllJobPills()).toHaveLength(expectedJobsLength); expect(findAllJobPills()).toHaveLength(expectedJobsLength);
}); });
describe('rounds corner', () => {
it.each`
cssClass | expectedState
${'gl-rounded-bottom-left-6'} | ${true}
${'gl-rounded-top-left-6'} | ${true}
${'gl-rounded-top-right-6'} | ${true}
${'gl-rounded-bottom-right-6'} | ${true}
`('$cssClass should be $expectedState on the only element', ({ cssClass, expectedState }) => {
const classes = findStageBackgroundElementAt(0).classes();
expect(classes.includes(cssClass)).toBe(expectedState);
});
});
}); });
describe('with multiple stages and jobs', () => { describe('with multiple stages and jobs', () => {
...@@ -102,10 +86,10 @@ describe('pipeline graph component', () => { ...@@ -102,10 +86,10 @@ describe('pipeline graph component', () => {
wrapper = createComponent(); wrapper = createComponent();
}); });
it('renders the right number of stage pills', () => { it('renders the right number of stage titles', () => {
const expectedStagesLength = pipelineData.stages.length; const expectedStagesLength = pipelineData.stages.length;
expect(findAllStagePills()).toHaveLength(expectedStagesLength); expect(findAllStageNames()).toHaveLength(expectedStagesLength);
}); });
it('renders the right number of job pills', () => { it('renders the right number of job pills', () => {
...@@ -116,34 +100,5 @@ describe('pipeline graph component', () => { ...@@ -116,34 +100,5 @@ describe('pipeline graph component', () => {
expect(findAllJobPills()).toHaveLength(expectedJobsLength); expect(findAllJobPills()).toHaveLength(expectedJobsLength);
}); });
describe('rounds corner', () => {
it.each`
cssClass | expectedState
${'gl-rounded-bottom-left-6'} | ${true}
${'gl-rounded-top-left-6'} | ${true}
${'gl-rounded-top-right-6'} | ${false}
${'gl-rounded-bottom-right-6'} | ${false}
`(
'$cssClass should be $expectedState on the first element',
({ cssClass, expectedState }) => {
const classes = findStageBackgroundElementAt(0).classes();
expect(classes.includes(cssClass)).toBe(expectedState);
},
);
it.each`
cssClass | expectedState
${'gl-rounded-bottom-left-6'} | ${false}
${'gl-rounded-top-left-6'} | ${false}
${'gl-rounded-top-right-6'} | ${true}
${'gl-rounded-bottom-right-6'} | ${true}
`('$cssClass should be $expectedState on the last element', ({ cssClass, expectedState }) => {
const classes = findStageBackgroundElementAt(pipelineData.stages.length - 1).classes();
expect(classes.includes(cssClass)).toBe(expectedState);
});
});
}); });
}); });
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment
GitLab Nexedi Edition | About GitLab | About Nexedi | 沪ICP备2021021310号-2 | 沪ICP备2021021310号-7