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 | 91 |
1 files changed, 55 insertions, 36 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 28492018600..924dc37aab9 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,6 +1,7 @@ import { GlLoadingIcon } from '@gitlab/ui'; import { shallowMount, mount } from '@vue/test-utils'; import { trimText } from 'helpers/text_helper'; +import { extendedWrapper } from 'helpers/vue_test_utils_helper'; 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'; @@ -22,27 +23,31 @@ describe('MRWidgetPipeline', () => { 'Could not retrieve the pipeline status. For troubleshooting steps, read the documentation.'; const monitoringMessage = 'Checking pipeline status.'; - const findCIErrorMessage = () => wrapper.find('[data-testid="ci-error-message"]'); - 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 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"]'); + const findCIErrorMessage = () => wrapper.findByTestId('ci-error-message'); + const findPipelineID = () => wrapper.findByTestId('pipeline-id'); + const findPipelineInfoContainer = () => wrapper.findByTestId('pipeline-info-container'); + const findCommitLink = () => wrapper.findByTestId('commit-link'); + const findPipelineFinishedAt = () => wrapper.findByTestId('finished-at'); + const findPipelineMiniGraph = () => wrapper.findComponent(PipelineMiniGraph); + const findAllPipelineStages = () => wrapper.findAllComponents(PipelineStage); + const findPipelineCoverage = () => wrapper.findByTestId('pipeline-coverage'); + const findPipelineCoverageDelta = () => wrapper.findByTestId('pipeline-coverage-delta'); const findPipelineCoverageTooltipText = () => - wrapper.find('[data-testid="pipeline-coverage-tooltip"]').text(); - const findMonitoringPipelineMessage = () => - wrapper.find('[data-testid="monitoring-pipeline-message"]'); - const findLoadingIcon = () => wrapper.find(GlLoadingIcon); + wrapper.findByTestId('pipeline-coverage-tooltip').text(); + const findPipelineCoverageDeltaTooltipText = () => + wrapper.findByTestId('pipeline-coverage-delta-tooltip').text(); + const findMonitoringPipelineMessage = () => wrapper.findByTestId('monitoring-pipeline-message'); + const findLoadingIcon = () => wrapper.findComponent(GlLoadingIcon); const createWrapper = (props = {}, mountFn = shallowMount) => { - wrapper = mountFn(PipelineComponent, { - propsData: { - ...defaultProps, - ...props, - }, - }); + wrapper = extendedWrapper( + mountFn(PipelineComponent, { + propsData: { + ...defaultProps, + ...props, + }, + }), + ); }; afterEach(() => { @@ -87,6 +92,13 @@ describe('MRWidgetPipeline', () => { expect(findCommitLink().attributes('href')).toBe(mockData.pipeline.commit.commit_path); }); + it('should render pipeline finished timestamp', () => { + expect(findPipelineFinishedAt().attributes()).toMatchObject({ + title: 'Apr 7, 2017 2:00pm GMT+0000', + datetime: mockData.pipeline.details.finished_at, + }); + }); + it('should render pipeline graph', () => { expect(findPipelineMiniGraph().exists()).toBe(true); expect(findAllPipelineStages()).toHaveLength(mockData.pipeline.details.stages.length); @@ -94,7 +106,9 @@ describe('MRWidgetPipeline', () => { describe('should render pipeline coverage information', () => { it('should render coverage percentage', () => { - expect(findPipelineCoverage().text()).toMatch(`Coverage ${mockData.pipeline.coverage}%`); + expect(findPipelineCoverage().text()).toMatch( + `Test coverage ${mockData.pipeline.coverage}%`, + ); }); it('should render coverage delta', () => { @@ -102,24 +116,9 @@ describe('MRWidgetPipeline', () => { expect(findPipelineCoverageDelta().text()).toBe(`(${mockData.pipelineCoverageDelta}%)`); }); - it('coverage delta should have no special style if there is no coverage change', () => { - createWrapper({ pipelineCoverageDelta: '0' }); - expect(findPipelineCoverageDelta().classes()).toEqual([]); - }); - - it('coverage delta should have text-success style if coverage increased', () => { - createWrapper({ pipelineCoverageDelta: '10' }); - expect(findPipelineCoverageDelta().classes()).toEqual(['text-success']); - }); - - it('coverage delta should have text-danger style if coverage increased', () => { - createWrapper({ pipelineCoverageDelta: '-10' }); - expect(findPipelineCoverageDelta().classes()).toEqual(['text-danger']); - }); - it('should render tooltip for jobs contributing to code coverage', () => { const tooltipText = findPipelineCoverageTooltipText(); - const expectedDescription = `Coverage value for this pipeline was calculated by averaging the resulting coverage values of ${mockData.buildsWithCoverage.length} jobs.`; + const expectedDescription = `Test coverage value for this pipeline was calculated by averaging the resulting coverage values of ${mockData.buildsWithCoverage.length} jobs.`; expect(tooltipText).toContain(expectedDescription); }); @@ -132,6 +131,26 @@ describe('MRWidgetPipeline', () => { expect(tooltipText).toContain(`${build.name} (${build.coverage}%)`); }, ); + + describe.each` + style | coverageState | coverageChangeText | styleClass | pipelineCoverageDelta + ${'no special'} | ${'the same'} | ${'not change'} | ${''} | ${'0'} + ${'success'} | ${'increased'} | ${'increase'} | ${'text-success'} | ${'10'} + ${'danger'} | ${'decreased'} | ${'decrease'} | ${'text-danger'} | ${'-10'} + `( + 'if test coverage is $coverageState', + ({ style, styleClass, coverageChangeText, pipelineCoverageDelta }) => { + it(`coverage delta should have ${style}`, () => { + createWrapper({ pipelineCoverageDelta }); + expect(findPipelineCoverageDelta().classes()).toEqual(styleClass ? [styleClass] : []); + }); + + it(`coverage delta tooltip should say that the coverage will ${coverageChangeText}`, () => { + createWrapper({ pipelineCoverageDelta }); + expect(findPipelineCoverageDeltaTooltipText()).toContain(coverageChangeText); + }); + }, + ); }); }); @@ -163,7 +182,7 @@ describe('MRWidgetPipeline', () => { }); it('should render coverage information', () => { - expect(findPipelineCoverage().text()).toMatch(`Coverage ${mockData.pipeline.coverage}%`); + expect(findPipelineCoverage().text()).toMatch(`Test coverage ${mockData.pipeline.coverage}%`); }); }); |