diff options
author | GitLab Bot <gitlab-bot@gitlab.com> | 2020-11-19 08:27:35 +0000 |
---|---|---|
committer | GitLab Bot <gitlab-bot@gitlab.com> | 2020-11-19 08:27:35 +0000 |
commit | 7e9c479f7de77702622631cff2628a9c8dcbc627 (patch) | |
tree | c8f718a08e110ad7e1894510980d2155a6549197 /spec/frontend/pipelines/pipeline_graph/pipeline_graph_spec.js | |
parent | e852b0ae16db4052c1c567d9efa4facc81146e88 (diff) | |
download | gitlab-ce-7e9c479f7de77702622631cff2628a9c8dcbc627.tar.gz |
Add latest changes from gitlab-org/gitlab@13-6-stable-eev13.6.0-rc42
Diffstat (limited to 'spec/frontend/pipelines/pipeline_graph/pipeline_graph_spec.js')
-rw-r--r-- | spec/frontend/pipelines/pipeline_graph/pipeline_graph_spec.js | 60 |
1 files changed, 58 insertions, 2 deletions
diff --git a/spec/frontend/pipelines/pipeline_graph/pipeline_graph_spec.js b/spec/frontend/pipelines/pipeline_graph/pipeline_graph_spec.js index 30e192e5726..7c8ebc27974 100644 --- a/spec/frontend/pipelines/pipeline_graph/pipeline_graph_spec.js +++ b/spec/frontend/pipelines/pipeline_graph/pipeline_graph_spec.js @@ -1,5 +1,5 @@ import { shallowMount } from '@vue/test-utils'; -import { pipelineData } from './mock_data'; +import { pipelineData, singleStageData } from './mock_data'; import PipelineGraph from '~/pipelines/components/pipeline_graph/pipeline_graph.vue'; import StagePill from '~/pipelines/components/pipeline_graph/stage_pill.vue'; import JobPill from '~/pipelines/components/pipeline_graph/job_pill.vue'; @@ -18,6 +18,8 @@ describe('pipeline graph component', () => { }; const findAllStagePills = () => wrapper.findAll(StagePill); + const findAllStageBackgroundElements = () => wrapper.findAll('[data-testid="stage-background"]'); + const findStageBackgroundElementAt = index => findAllStageBackgroundElements().at(index); const findAllJobPills = () => wrapper.findAll(JobPill); afterEach(() => { @@ -31,7 +33,9 @@ describe('pipeline graph component', () => { }); it('renders an empty section', () => { - expect(wrapper.text()).toContain('No content to show'); + expect(wrapper.text()).toContain( + 'The visualization will appear in this tab when the CI/CD configuration file is populated with valid syntax.', + ); expect(findAllStagePills()).toHaveLength(0); expect(findAllJobPills()).toHaveLength(0); }); @@ -41,12 +45,43 @@ describe('pipeline graph component', () => { beforeEach(() => { wrapper = createComponent(); }); + it('renders the right number of stage pills', () => { const expectedStagesLength = pipelineData.stages.length; expect(findAllStagePills()).toHaveLength(expectedStagesLength); }); + 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} + `( + 'rounds corner: $class 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} + `( + 'rounds corner: $class should be $expectedState on the last element', + ({ cssClass, expectedState }) => { + const classes = findStageBackgroundElementAt(pipelineData.stages.length - 1).classes(); + + expect(classes.includes(cssClass)).toBe(expectedState); + }, + ); + it('renders the right number of job pills', () => { // We count the number of jobs in the mock data const expectedJobsLength = pipelineData.stages.reduce((acc, val) => { @@ -56,4 +91,25 @@ describe('pipeline graph component', () => { expect(findAllJobPills()).toHaveLength(expectedJobsLength); }); }); + + describe('with only one stage', () => { + beforeEach(() => { + wrapper = createComponent({ pipelineData: singleStageData }); + }); + + 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} + `( + 'rounds corner: $class should be $expectedState on the only element', + ({ cssClass, expectedState }) => { + const classes = findStageBackgroundElementAt(0).classes(); + + expect(classes.includes(cssClass)).toBe(expectedState); + }, + ); + }); }); |