1 files changed, 141 insertions, 188 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 6486826c3ec..7ecd8629607 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
@@ -29,6 +29,8 @@ describe('MRWidgetPipeline', () => {
   const findAllPipelineStages = () => wrapper.findAll(PipelineStage);
   const findPipelineCoverage = () => wrapper.find('[data-testid="pipeline-coverage"]');
   const findPipelineCoverageDelta = () => wrapper.find('[data-testid="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);
@@ -49,257 +51,208 @@ describe('MRWidgetPipeline', () => {
     }
   });
 
-  describe('computed', () => {
-    describe('hasPipeline', () => {
-      beforeEach(() => {
-        createWrapper();
-      });
-
-      it('should return true when there is a pipeline', () => {
-        expect(wrapper.vm.hasPipeline).toBe(true);
-      });
+  it('should render CI error if there is a pipeline, but no status', () => {
+    createWrapper({ ciStatus: null }, mount);
+    expect(findCIErrorMessage().text()).toBe(ciErrorMessage);
+  });
 
-      it('should return false when there is no pipeline', async () => {
-        wrapper.setProps({ pipeline: {} });
+  it('should render a loading state when no pipeline is found', () => {
+    createWrapper({ pipeline: {} }, mount);
 
-        await wrapper.vm.$nextTick();
+    expect(findMonitoringPipelineMessage().text()).toBe(monitoringMessage);
+    expect(findLoadingIcon().exists()).toBe(true);
+  });
 
-        expect(wrapper.vm.hasPipeline).toBe(false);
+  describe('with a pipeline', () => {
+    beforeEach(() => {
+      createWrapper({
+        pipelineCoverageDelta: mockData.pipelineCoverageDelta,
+        buildsWithCoverage: mockData.buildsWithCoverage,
       });
     });
 
-    describe('hasCIError', () => {
-      beforeEach(() => {
-        createWrapper();
-      });
+    it('should render pipeline ID', () => {
+      expect(
+        findPipelineID()
+          .text()
+          .trim(),
+      ).toBe(`#${mockData.pipeline.id}`);
+    });
 
-      it('should return false when there is no CI error', () => {
-        expect(wrapper.vm.hasCIError).toBe(false);
-      });
+    it('should render pipeline status and commit id', () => {
+      expect(findPipelineInfoContainer().text()).toMatch(mockData.pipeline.details.status.label);
 
-      it('should return true when there is a pipeline, but no ci status', async () => {
-        wrapper.setProps({ ciStatus: null });
+      expect(
+        findCommitLink()
+          .text()
+          .trim(),
+      ).toBe(mockData.pipeline.commit.short_id);
 
-        await wrapper.vm.$nextTick();
+      expect(findCommitLink().attributes('href')).toBe(mockData.pipeline.commit.commit_path);
+    });
 
-        expect(wrapper.vm.hasCIError).toBe(true);
-      });
+    it('should render pipeline graph', () => {
+      expect(findPipelineGraph().exists()).toBe(true);
+      expect(findAllPipelineStages().length).toBe(mockData.pipeline.details.stages.length);
     });
 
-    describe('coverageDeltaClass', () => {
-      beforeEach(() => {
-        createWrapper({ pipelineCoverageDelta: '0' });
+    describe('should render pipeline coverage information', () => {
+      it('should render coverage percentage', () => {
+        expect(findPipelineCoverage().text()).toMatch(`Coverage ${mockData.pipeline.coverage}%`);
       });
 
-      it('should return no class if there is no coverage change', async () => {
-        expect(wrapper.vm.coverageDeltaClass).toBe('');
+      it('should render coverage delta', () => {
+        expect(findPipelineCoverageDelta().exists()).toBe(true);
+        expect(findPipelineCoverageDelta().text()).toBe(`(${mockData.pipelineCoverageDelta}%)`);
       });
 
-      it('should return text-success if the coverage increased', async () => {
-        wrapper.setProps({ pipelineCoverageDelta: '10' });
-
-        await wrapper.vm.$nextTick();
+      it('coverage delta should have no special style if there is no coverage change', () => {
+        createWrapper({ pipelineCoverageDelta: '0' });
+        expect(findPipelineCoverageDelta().classes()).toEqual([]);
+      });
 
-        expect(wrapper.vm.coverageDeltaClass).toBe('text-success');
+      it('coverage delta should have text-success style if coverage increased', () => {
+        createWrapper({ pipelineCoverageDelta: '10' });
+        expect(findPipelineCoverageDelta().classes()).toEqual(['text-success']);
       });
 
-      it('should return text-danger if the coverage decreased', async () => {
-        wrapper.setProps({ pipelineCoverageDelta: '-12' });
+      it('coverage delta should have text-danger style if coverage increased', () => {
+        createWrapper({ pipelineCoverageDelta: '-10' });
+        expect(findPipelineCoverageDelta().classes()).toEqual(['text-danger']);
+      });
 
-        await wrapper.vm.$nextTick();
+      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.`;
 
-        expect(wrapper.vm.coverageDeltaClass).toBe('text-danger');
+        expect(tooltipText).toContain(expectedDescription);
       });
+
+      it.each(mockData.buildsWithCoverage)(
+        'should have name and coverage for build %s listed in tooltip',
+        build => {
+          const tooltipText = findPipelineCoverageTooltipText();
+
+          expect(tooltipText).toContain(`${build.name} (${build.coverage}%)`);
+        },
+      );
     });
   });
 
-  describe('rendered output', () => {
+  describe('without commit path', () => {
     beforeEach(() => {
-      createWrapper({ ciStatus: null }, mount);
-    });
+      const mockCopy = JSON.parse(JSON.stringify(mockData));
+      delete mockCopy.pipeline.commit;
 
-    it('should render CI error if there is a pipeline, but no status', async () => {
-      expect(findCIErrorMessage().text()).toBe(ciErrorMessage);
+      createWrapper({});
     });
 
-    it('should render a loading state when no pipeline is found', async () => {
-      wrapper.setProps({
-        pipeline: {},
-        hasCi: false,
-        pipelineMustSucceed: true,
-      });
-
-      await wrapper.vm.$nextTick();
-
-      expect(findMonitoringPipelineMessage().text()).toBe(monitoringMessage);
-      expect(findLoadingIcon().exists()).toBe(true);
+    it('should render pipeline ID', () => {
+      expect(
+        findPipelineID()
+          .text()
+          .trim(),
+      ).toBe(`#${mockData.pipeline.id}`);
     });
 
-    describe('with a pipeline', () => {
-      beforeEach(() => {
-        createWrapper(
-          {
-            pipelineCoverageDelta: mockData.pipelineCoverageDelta,
-          },
-          mount,
-        );
-      });
-
-      it('should render pipeline ID', () => {
-        expect(
-          findPipelineID()
-            .text()
-            .trim(),
-        ).toBe(`#${mockData.pipeline.id}`);
-      });
-
-      it('should render pipeline status and commit id', () => {
-        expect(findPipelineInfoContainer().text()).toMatch(mockData.pipeline.details.status.label);
-
-        expect(
-          findCommitLink()
-            .text()
-            .trim(),
-        ).toBe(mockData.pipeline.commit.short_id);
-
-        expect(findCommitLink().attributes('href')).toBe(mockData.pipeline.commit.commit_path);
-      });
-
-      it('should render pipeline graph', () => {
-        expect(findPipelineGraph().exists()).toBe(true);
-        expect(findAllPipelineStages().length).toBe(mockData.pipeline.details.stages.length);
-      });
-
-      it('should render coverage information', () => {
-        expect(findPipelineCoverage().text()).toMatch(`Coverage ${mockData.pipeline.coverage}%`);
-      });
+    it('should render pipeline status', () => {
+      expect(findPipelineInfoContainer().text()).toMatch(mockData.pipeline.details.status.label);
+    });
 
-      it('should render pipeline coverage delta information', () => {
-        expect(findPipelineCoverageDelta().exists()).toBe(true);
-        expect(findPipelineCoverageDelta().text()).toBe(`(${mockData.pipelineCoverageDelta}%)`);
-      });
+    it('should render pipeline graph', () => {
+      expect(findPipelineGraph().exists()).toBe(true);
+      expect(findAllPipelineStages().length).toBe(mockData.pipeline.details.stages.length);
     });
 
-    describe('without commit path', () => {
-      beforeEach(() => {
-        const mockCopy = JSON.parse(JSON.stringify(mockData));
-        delete mockCopy.pipeline.commit;
+    it('should render coverage information', () => {
+      expect(findPipelineCoverage().text()).toMatch(`Coverage ${mockData.pipeline.coverage}%`);
+    });
+  });
 
-        createWrapper({}, mount);
-      });
+  describe('without coverage', () => {
+    beforeEach(() => {
+      const mockCopy = JSON.parse(JSON.stringify(mockData));
+      delete mockCopy.pipeline.coverage;
 
-      it('should render pipeline ID', () => {
-        expect(
-          findPipelineID()
-            .text()
-            .trim(),
-        ).toBe(`#${mockData.pipeline.id}`);
-      });
+      createWrapper({ pipeline: mockCopy.pipeline });
+    });
 
-      it('should render pipeline status', () => {
-        expect(findPipelineInfoContainer().text()).toMatch(mockData.pipeline.details.status.label);
-      });
+    it('should not render a coverage component', () => {
+      expect(findPipelineCoverage().exists()).toBe(false);
+    });
+  });
 
-      it('should render pipeline graph', () => {
-        expect(findPipelineGraph().exists()).toBe(true);
-        expect(findAllPipelineStages().length).toBe(mockData.pipeline.details.stages.length);
-      });
+  describe('without a pipeline graph', () => {
+    beforeEach(() => {
+      const mockCopy = JSON.parse(JSON.stringify(mockData));
+      delete mockCopy.pipeline.details.stages;
 
-      it('should render coverage information', () => {
-        expect(findPipelineCoverage().text()).toMatch(`Coverage ${mockData.pipeline.coverage}%`);
+      createWrapper({
+        pipeline: mockCopy.pipeline,
       });
     });
 
-    describe('without coverage', () => {
-      beforeEach(() => {
-        const mockCopy = JSON.parse(JSON.stringify(mockData));
-        delete mockCopy.pipeline.coverage;
-
-        createWrapper(
-          {
-            pipeline: mockCopy.pipeline,
-          },
-          mount,
-        );
-      });
-
-      it('should not render a coverage component', () => {
-        expect(findPipelineCoverage().exists()).toBe(false);
-      });
+    it('should not render a pipeline graph', () => {
+      expect(findPipelineGraph().exists()).toBe(false);
     });
+  });
 
-    describe('without a pipeline graph', () => {
-      beforeEach(() => {
-        const mockCopy = JSON.parse(JSON.stringify(mockData));
-        delete mockCopy.pipeline.details.stages;
+  describe('for each type of pipeline', () => {
+    let pipeline;
 
-        createWrapper({
-          pipeline: mockCopy.pipeline,
-        });
-      });
+    beforeEach(() => {
+      ({ pipeline } = JSON.parse(JSON.stringify(mockData)));
 
-      it('should not render a pipeline graph', () => {
-        expect(findPipelineGraph().exists()).toBe(false);
-      });
+      pipeline.details.name = 'Pipeline';
+      pipeline.merge_request_event_type = undefined;
+      pipeline.ref.tag = false;
+      pipeline.ref.branch = false;
     });
 
-    describe('for each type of pipeline', () => {
-      let pipeline;
-
-      beforeEach(() => {
-        ({ pipeline } = JSON.parse(JSON.stringify(mockData)));
-
-        pipeline.details.name = 'Pipeline';
-        pipeline.merge_request_event_type = undefined;
-        pipeline.ref.tag = false;
-        pipeline.ref.branch = false;
+    const factory = () => {
+      createWrapper({
+        pipeline,
+        sourceBranchLink: mockData.source_branch_link,
       });
+    };
 
-      const factory = () => {
-        createWrapper({
-          pipeline,
-          sourceBranchLink: mockData.source_branch_link,
-        });
-      };
-
-      describe('for a branch pipeline', () => {
-        it('renders a pipeline widget that reads "Pipeline <ID> <status> for <SHA> on <branch>"', () => {
-          pipeline.ref.branch = true;
+    describe('for a branch pipeline', () => {
+      it('renders a pipeline widget that reads "Pipeline <ID> <status> for <SHA> on <branch>"', () => {
+        pipeline.ref.branch = true;
 
-          factory();
+        factory();
 
-          const expected = `Pipeline #${pipeline.id} ${pipeline.details.status.label} for ${pipeline.commit.short_id} on ${mockData.source_branch_link}`;
-          const actual = trimText(findPipelineInfoContainer().text());
+        const expected = `Pipeline #${pipeline.id} ${pipeline.details.status.label} for ${pipeline.commit.short_id} on ${mockData.source_branch_link}`;
+        const actual = trimText(findPipelineInfoContainer().text());
 
-          expect(actual).toBe(expected);
-        });
+        expect(actual).toBe(expected);
       });
+    });
 
-      describe('for a tag pipeline', () => {
-        it('renders a pipeline widget that reads "Pipeline <ID> <status> for <SHA> on <branch>"', () => {
-          pipeline.ref.tag = true;
+    describe('for a tag pipeline', () => {
+      it('renders a pipeline widget that reads "Pipeline <ID> <status> for <SHA> on <branch>"', () => {
+        pipeline.ref.tag = true;
 
-          factory();
+        factory();
 
-          const expected = `Pipeline #${pipeline.id} ${pipeline.details.status.label} for ${pipeline.commit.short_id}`;
-          const actual = trimText(findPipelineInfoContainer().text());
+        const expected = `Pipeline #${pipeline.id} ${pipeline.details.status.label} for ${pipeline.commit.short_id}`;
+        const actual = trimText(findPipelineInfoContainer().text());
 
-          expect(actual).toBe(expected);
-        });
+        expect(actual).toBe(expected);
       });
+    });
 
-      describe('for a detached merge request pipeline', () => {
-        it('renders a pipeline widget that reads "Detached merge request pipeline <ID> <status> for <SHA>"', () => {
-          pipeline.details.name = 'Detached merge request pipeline';
-          pipeline.merge_request_event_type = 'detached';
+    describe('for a detached merge request pipeline', () => {
+      it('renders a pipeline widget that reads "Detached merge request pipeline <ID> <status> for <SHA>"', () => {
+        pipeline.details.name = 'Detached merge request pipeline';
+        pipeline.merge_request_event_type = 'detached';
 
-          factory();
+        factory();
 
-          const expected = `Detached merge request pipeline #${pipeline.id} ${pipeline.details.status.label} for ${pipeline.commit.short_id}`;
-          const actual = trimText(findPipelineInfoContainer().text());
+        const expected = `Detached merge request pipeline #${pipeline.id} ${pipeline.details.status.label} for ${pipeline.commit.short_id}`;
+        const actual = trimText(findPipelineInfoContainer().text());
 
-          expect(actual).toBe(expected);
-        });
+        expect(actual).toBe(expected);
       });
     });
   });