diff options
Diffstat (limited to 'spec/frontend/pipelines/pipeline_graph/pipeline_graph_spec.js')
| -rw-r--r-- | spec/frontend/pipelines/pipeline_graph/pipeline_graph_spec.js | 148 |
1 files changed, 99 insertions, 49 deletions
diff --git a/spec/frontend/pipelines/pipeline_graph/pipeline_graph_spec.js b/spec/frontend/pipelines/pipeline_graph/pipeline_graph_spec.js index 7c8ebc27974..6704ee06c1a 100644 --- a/spec/frontend/pipelines/pipeline_graph/pipeline_graph_spec.js +++ b/spec/frontend/pipelines/pipeline_graph/pipeline_graph_spec.js @@ -1,5 +1,8 @@ import { shallowMount } from '@vue/test-utils'; +import { GlAlert } from '@gitlab/ui'; import { pipelineData, singleStageData } from './mock_data'; +import { CI_CONFIG_STATUS_INVALID } from '~/pipeline_editor/constants'; +import { DRAW_FAILURE, EMPTY_PIPELINE_DATA, INVALID_CI_CONFIG } from '~/pipelines/constants'; 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'; @@ -8,15 +11,16 @@ describe('pipeline graph component', () => { const defaultProps = { pipelineData }; let wrapper; - const createComponent = props => { + const createComponent = (props = defaultProps) => { return shallowMount(PipelineGraph, { propsData: { - ...defaultProps, ...props, }, }); }; + const findPipelineGraph = () => wrapper.find('[data-testid="graph-container"]'); + const findAlert = () => wrapper.find(GlAlert); const findAllStagePills = () => wrapper.findAll(StagePill); const findAllStageBackgroundElements = () => wrapper.findAll('[data-testid="stage-background"]'); const findStageBackgroundElementAt = index => findAllStageBackgroundElements().at(index); @@ -33,54 +37,92 @@ describe('pipeline graph component', () => { }); it('renders an empty section', () => { - expect(wrapper.text()).toContain( - 'The visualization will appear in this tab when the CI/CD configuration file is populated with valid syntax.', - ); + expect(wrapper.text()).toBe(wrapper.vm.$options.warningTexts[EMPTY_PIPELINE_DATA]); + expect(findPipelineGraph().exists()).toBe(false); expect(findAllStagePills()).toHaveLength(0); expect(findAllJobPills()).toHaveLength(0); }); }); - describe('with data', () => { + describe('with `INVALID` status', () => { + beforeEach(() => { + wrapper = createComponent({ pipelineData: { status: CI_CONFIG_STATUS_INVALID } }); + }); + + it('renders an error message and does not render the graph', () => { + expect(findAlert().exists()).toBe(true); + expect(findAlert().text()).toBe(wrapper.vm.$options.warningTexts[INVALID_CI_CONFIG]); + expect(findPipelineGraph().exists()).toBe(false); + }); + }); + + describe('without `INVALID` status', () => { + beforeEach(() => { + wrapper = createComponent(); + }); + + it('renders the graph with no status error', () => { + expect(findAlert().text()).not.toBe(wrapper.vm.$options.warningTexts[INVALID_CI_CONFIG]); + expect(findPipelineGraph().exists()).toBe(true); + }); + }); + + describe('with error while rendering the links', () => { beforeEach(() => { wrapper = createComponent(); }); + it('renders the error that link could not be drawn', () => { + expect(findAlert().exists()).toBe(true); + expect(findAlert().text()).toBe(wrapper.vm.$options.errorTexts[DRAW_FAILURE]); + }); + }); + + describe('with only one stage', () => { + beforeEach(() => { + wrapper = createComponent({ pipelineData: singleStageData }); + }); + it('renders the right number of stage pills', () => { - const expectedStagesLength = pipelineData.stages.length; + const expectedStagesLength = singleStageData.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 }) => { + it('renders the right number of job pills', () => { + // We count the number of jobs in the mock data + const expectedJobsLength = singleStageData.stages.reduce((acc, val) => { + return acc + val.groups.length; + }, 0); + + 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); - }, - ); - - 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); - }, - ); + describe('with multiple stages and jobs', () => { + beforeEach(() => { + wrapper = createComponent(); + }); + + it('renders the right number of stage pills', () => { + const expectedStagesLength = pipelineData.stages.length; + + expect(findAllStagePills()).toHaveLength(expectedStagesLength); + }); it('renders the right number of job pills', () => { // We count the number of jobs in the mock data @@ -90,26 +132,34 @@ describe('pipeline graph component', () => { expect(findAllJobPills()).toHaveLength(expectedJobsLength); }); - }); - describe('with only one stage', () => { - beforeEach(() => { - wrapper = createComponent({ pipelineData: singleStageData }); - }); + 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'} | ${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(); + 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); - }, - ); + }); + }); }); }); |