Clarify what "coverage" means in MRs

Clarify that "coverage" in the pipeline MR widget
refers to "test coverage". Also clarify what the
delta number means in the same area.

Did some driveby spec file cleanup as well.

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 ""
 
@@ -22653,9 +22648,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 ""
 
@@ -22752,6 +22744,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 ""
 
@@ -29819,6 +29823,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}%`);
     });
   });