Commit 673bd49a authored by Jose Ivan Vargas's avatar Jose Ivan Vargas

Merge branch '283893-mr-pipeline-coverage-update' into 'master'

Clarify what "coverage" means in MRs

See merge request gitlab-org/gitlab!57275
parents 6c794a2d ce702076
......@@ -127,10 +127,20 @@ export default {
pipelineCoverageJobNumberText() {
return n__('from %d job', 'from %d jobs', this.buildsWithCoverage.length);
},
pipelineCoverageTooltipDeltaDescription() {
const delta = parseFloat(this.pipelineCoverageDelta) || 0;
if (delta > 0) {
return s__('Pipeline|This change will increase the overall test coverage if merged.');
}
if (delta < 0) {
return s__('Pipeline|This change will decrease the overall test coverage if merged.');
}
return s__('Pipeline|This change will not change the overall test coverage if merged.');
},
pipelineCoverageTooltipDescription() {
return n__(
'Coverage value for this pipeline was calculated by the coverage value of %d job.',
'Coverage value for this pipeline was calculated by averaging the resulting coverage values of %d jobs.',
'Test coverage value for this pipeline was calculated by the coverage value of %d job.',
'Test coverage value for this pipeline was calculated by averaging the resulting coverage values of %d jobs.',
this.buildsWithCoverage.length,
);
},
......@@ -218,13 +228,15 @@ export default {
</template>
</div>
<div v-if="pipeline.coverage" class="coverage" data-testid="pipeline-coverage">
{{ s__('Pipeline|Coverage') }} {{ pipeline.coverage }}%
{{ s__('Pipeline|Test coverage') }} {{ pipeline.coverage }}%
<span
v-if="pipelineCoverageDelta"
ref="pipelineCoverageDelta"
:class="coverageDeltaClass"
data-testid="pipeline-coverage-delta"
>({{ pipelineCoverageDelta }}%)</span
>
({{ pipelineCoverageDelta }}%)
</span>
{{ pipelineCoverageJobNumberText }}
<span ref="pipelineCoverageQuestion">
<gl-icon name="question" :size="12" />
......@@ -242,6 +254,12 @@ export default {
{{ build.name }} ({{ build.coverage }}%)
</div>
</gl-tooltip>
<gl-tooltip
:target="() => $refs.pipelineCoverageDelta"
data-testid="pipeline-coverage-delta-tooltip"
>
{{ pipelineCoverageTooltipDeltaDescription }}
</gl-tooltip>
</div>
</div>
</div>
......
---
title: Clarify what coverage means on the merge request pipeline section
merge_request: 57275
author:
type: added
......@@ -8722,11 +8722,6 @@ msgstr ""
msgid "Coverage Fuzzing"
msgstr ""
msgid "Coverage value for this pipeline was calculated by the coverage value of %d job."
msgid_plural "Coverage value for this pipeline was calculated by averaging the resulting coverage values of %d jobs."
msgstr[0] ""
msgstr[1] ""
msgid "Create"
msgstr ""
......@@ -22668,9 +22663,6 @@ msgstr ""
msgid "Pipeline|Could not retrieve the pipeline status. For troubleshooting steps, read the %{linkStart}documentation%{linkEnd}."
msgstr ""
msgid "Pipeline|Coverage"
msgstr ""
msgid "Pipeline|Created"
msgstr ""
......@@ -22767,6 +22759,18 @@ msgstr ""
msgid "Pipeline|Tag name"
msgstr ""
msgid "Pipeline|Test coverage"
msgstr ""
msgid "Pipeline|This change will decrease the overall test coverage if merged."
msgstr ""
msgid "Pipeline|This change will increase the overall test coverage if merged."
msgstr ""
msgid "Pipeline|This change will not change the overall test coverage if merged."
msgstr ""
msgid "Pipeline|Trigger author"
msgstr ""
......@@ -29834,6 +29838,11 @@ msgstr ""
msgid "Test coverage parsing"
msgstr ""
msgid "Test coverage value for this pipeline was calculated by the coverage value of %d job."
msgid_plural "Test coverage value for this pipeline was calculated by averaging the resulting coverage values of %d jobs."
msgstr[0] ""
msgstr[1] ""
msgid "Test coverage: %d hit"
msgid_plural "Test coverage: %d hits"
msgstr[0] ""
......
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,30 @@ 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 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(() => {
......@@ -94,7 +98,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 +108,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 +123,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 +174,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}%`);
});
});
......
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