diff options
Diffstat (limited to 'spec/frontend/vue_mr_widget/components/mr_widget_pipeline_spec.js')
-rw-r--r-- | spec/frontend/vue_mr_widget/components/mr_widget_pipeline_spec.js | 38 |
1 files changed, 24 insertions, 14 deletions
diff --git a/spec/frontend/vue_mr_widget/components/mr_widget_pipeline_spec.js b/spec/frontend/vue_mr_widget/components/mr_widget_pipeline_spec.js index b93236d4628..28492018600 100644 --- a/spec/frontend/vue_mr_widget/components/mr_widget_pipeline_spec.js +++ b/spec/frontend/vue_mr_widget/components/mr_widget_pipeline_spec.js @@ -1,7 +1,8 @@ import { GlLoadingIcon } from '@gitlab/ui'; import { shallowMount, mount } from '@vue/test-utils'; import { trimText } from 'helpers/text_helper'; -import PipelineStage from '~/pipelines/components/pipelines_list/stage.vue'; +import PipelineMiniGraph from '~/pipelines/components/pipelines_list/pipeline_mini_graph.vue'; +import PipelineStage from '~/pipelines/components/pipelines_list/pipeline_stage.vue'; import PipelineComponent from '~/vue_merge_request_widget/components/mr_widget_pipeline.vue'; import { SUCCESS } from '~/vue_merge_request_widget/constants'; import mockData from '../mock_data'; @@ -25,7 +26,7 @@ describe('MRWidgetPipeline', () => { const findPipelineID = () => wrapper.find('[data-testid="pipeline-id"]'); const findPipelineInfoContainer = () => wrapper.find('[data-testid="pipeline-info-container"]'); const findCommitLink = () => wrapper.find('[data-testid="commit-link"]'); - const findPipelineGraph = () => wrapper.find('[data-testid="widget-mini-pipeline-graph"]'); + const findPipelineMiniGraph = () => wrapper.find(PipelineMiniGraph); const findAllPipelineStages = () => wrapper.findAll(PipelineStage); const findPipelineCoverage = () => wrapper.find('[data-testid="pipeline-coverage"]'); const findPipelineCoverageDelta = () => wrapper.find('[data-testid="pipeline-coverage-delta"]'); @@ -35,7 +36,7 @@ describe('MRWidgetPipeline', () => { wrapper.find('[data-testid="monitoring-pipeline-message"]'); const findLoadingIcon = () => wrapper.find(GlLoadingIcon); - const createWrapper = (props, mountFn = shallowMount) => { + const createWrapper = (props = {}, mountFn = shallowMount) => { wrapper = mountFn(PipelineComponent, { propsData: { ...defaultProps, @@ -65,10 +66,13 @@ describe('MRWidgetPipeline', () => { describe('with a pipeline', () => { beforeEach(() => { - createWrapper({ - pipelineCoverageDelta: mockData.pipelineCoverageDelta, - buildsWithCoverage: mockData.buildsWithCoverage, - }); + createWrapper( + { + pipelineCoverageDelta: mockData.pipelineCoverageDelta, + buildsWithCoverage: mockData.buildsWithCoverage, + }, + mount, + ); }); it('should render pipeline ID', () => { @@ -84,8 +88,8 @@ describe('MRWidgetPipeline', () => { }); it('should render pipeline graph', () => { - expect(findPipelineGraph().exists()).toBe(true); - expect(findAllPipelineStages().length).toBe(mockData.pipeline.details.stages.length); + expect(findPipelineMiniGraph().exists()).toBe(true); + expect(findAllPipelineStages()).toHaveLength(mockData.pipeline.details.stages.length); }); describe('should render pipeline coverage information', () => { @@ -136,7 +140,7 @@ describe('MRWidgetPipeline', () => { const mockCopy = JSON.parse(JSON.stringify(mockData)); delete mockCopy.pipeline.commit; - createWrapper({}); + createWrapper({}, mount); }); it('should render pipeline ID', () => { @@ -147,9 +151,15 @@ describe('MRWidgetPipeline', () => { expect(findPipelineInfoContainer().text()).toMatch(mockData.pipeline.details.status.label); }); - it('should render pipeline graph', () => { - expect(findPipelineGraph().exists()).toBe(true); - expect(findAllPipelineStages().length).toBe(mockData.pipeline.details.stages.length); + it('should render pipeline graph with correct styles', () => { + const stagesCount = mockData.pipeline.details.stages.length; + + expect(findPipelineMiniGraph().exists()).toBe(true); + expect(findPipelineMiniGraph().findAll('.mr-widget-pipeline-stages')).toHaveLength( + stagesCount, + ); + + expect(findAllPipelineStages()).toHaveLength(stagesCount); }); it('should render coverage information', () => { @@ -181,7 +191,7 @@ describe('MRWidgetPipeline', () => { }); it('should not render a pipeline graph', () => { - expect(findPipelineGraph().exists()).toBe(false); + expect(findPipelineMiniGraph().exists()).toBe(false); }); }); |