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

Clarify what "coverage" means in MRs

See merge request gitlab-org/gitlab!57275

app/assets/javascripts/vue_merge_request_widget/components/mr_widget_pipeline.vue

@@ -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>

changelogs/unreleased/283893-mr-pipeline-coverage-update.yml

+---
+title: Clarify what coverage means on the merge request pipeline section
+merge_request: 57275
+author:
+type: added

locale/gitlab.pot

@@ -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] ""

spec/frontend/vue_mr_widget/components/mr_widget_pipeline_spec.js

 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}%`);
     });
   });