Remove computed props checks for MR widget specs

This change removes references to computed props on
mr_widget_pipeline_spec, in favor of checking for rendered
output.

ee/spec/frontend/vue_mr_widget/mr_widget_pipeline_spec.js

 import { mount } from '@vue/test-utils';
 import mockData from 'ee_jest/vue_mr_widget/mock_data';
 import { trimText } from 'jest/helpers/text_helper';
+import LinkedPipelinesMiniList from 'ee/vue_shared/components/linked_pipelines_mini_list.vue';
 import pipelineComponent from '~/vue_merge_request_widget/components/mr_widget_pipeline.vue';
 import mockLinkedPipelines from '../vue_shared/components/linked_pipelines_mock_data';
 
@@ -8,6 +9,7 @@ describe('MRWidgetPipeline', () => {
   let wrapper;
 
   const findPipelineInfoContainer = () => wrapper.find('[data-testid="pipeline-info-container"');
+  const findPipelinesMiniList = () => wrapper.find(LinkedPipelinesMiniList);
 
   function createComponent(pipeline) {
     wrapper = mount(pipelineComponent, {
@@ -28,36 +30,6 @@ describe('MRWidgetPipeline', () => {
     wrapper.destroy();
   });
 
-  describe('computed', () => {
-    describe('when upstream pipelines are passed', () => {
-      beforeEach(() => {
-        const pipeline = { ...mockData.pipeline, triggered_by: mockLinkedPipelines.triggered_by };
-
-        createComponent(pipeline);
-      });
-
-      it('should coerce triggeredBy into a collection', () => {
-        expect(wrapper.vm.triggeredBy).toHaveLength(1);
-      });
-
-      it('should render the linked pipelines mini list', () => {
-        expect(wrapper.find('.linked-pipeline-mini-list.is-upstream').exists()).toBe(true);
-      });
-    });
-
-    describe('when downstream pipelines are passed', () => {
-      beforeEach(() => {
-        const pipeline = { ...mockData.pipeline, triggered: mockLinkedPipelines.triggered };
-
-        createComponent(pipeline);
-      });
-
-      it('should render the linked pipelines mini list', () => {
-        expect(wrapper.find('.linked-pipeline-mini-list.is-downstream').exists()).toBe(true);
-      });
-    });
-  });
-
   describe('for each type of pipeline', () => {
     let pipeline;
 
@@ -96,4 +68,52 @@ describe('MRWidgetPipeline', () => {
       });
     });
   });
+
+  describe('pipeline graph', () => {
+    describe('when upstream pipelines are passed', () => {
+      beforeEach(() => {
+        const pipeline = { ...mockData.pipeline, triggered_by: mockLinkedPipelines.triggered_by };
+
+        createComponent(pipeline);
+      });
+
+      it('should render the linked pipelines mini list', () => {
+        expect(findPipelinesMiniList().exists()).toBe(true);
+      });
+
+      it('should render the linked pipelines mini list as an upstream list', () => {
+        expect(findPipelinesMiniList().classes('is-upstream')).toBe(true);
+      });
+
+      it('should add a single triggeredBy into an array', () => {
+        const triggeredBy = findPipelinesMiniList().props('triggeredBy');
+
+        expect(triggeredBy).toEqual(expect.any(Array));
+        expect(triggeredBy).toHaveLength(1);
+        expect(triggeredBy[0]).toBe(mockLinkedPipelines.triggered_by);
+      });
+    });
+
+    describe('when downstream pipelines are passed', () => {
+      beforeEach(() => {
+        const pipeline = { ...mockData.pipeline, triggered: mockLinkedPipelines.triggered };
+
+        createComponent(pipeline);
+      });
+
+      it('should render the linked pipelines mini list', () => {
+        expect(findPipelinesMiniList().exists()).toBe(true);
+      });
+
+      it('should render the linked pipelines mini list as a downstream list', () => {
+        expect(findPipelinesMiniList().classes('is-downstream')).toBe(true);
+      });
+
+      it('should pass the triggered pipelines', () => {
+        const triggered = findPipelinesMiniList().props('triggered');
+
+        expect(triggered).toBe(mockLinkedPipelines.triggered);
+      });
+    });
+  });
 });

spec/frontend/vue_mr_widget/components/mr_widget_pipeline_spec.js

@@ -51,87 +51,13 @@ 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 return false when there is no pipeline', async () => {
-        wrapper.setProps({ pipeline: {} });
-
-        await wrapper.vm.$nextTick();
-
-        expect(wrapper.vm.hasPipeline).toBe(false);
-      });
-    });
-
-    describe('hasCIError', () => {
-      beforeEach(() => {
-        createWrapper();
-      });
-
-      it('should return false when there is no CI error', () => {
-        expect(wrapper.vm.hasCIError).toBe(false);
-      });
-
-      it('should return true when there is a pipeline, but no ci status', async () => {
-        wrapper.setProps({ ciStatus: null });
-
-        await wrapper.vm.$nextTick();
-
-        expect(wrapper.vm.hasCIError).toBe(true);
-      });
-    });
-
-    describe('coverageDeltaClass', () => {
-      beforeEach(() => {
-        createWrapper({ pipelineCoverageDelta: '0' });
-      });
-
-      it('should return no class if there is no coverage change', async () => {
-        expect(wrapper.vm.coverageDeltaClass).toBe('');
-      });
-
-      it('should return text-success if the coverage increased', async () => {
-        wrapper.setProps({ pipelineCoverageDelta: '10' });
-
-        await wrapper.vm.$nextTick();
-
-        expect(wrapper.vm.coverageDeltaClass).toBe('text-success');
-      });
-
-      it('should return text-danger if the coverage decreased', async () => {
-        wrapper.setProps({ pipelineCoverageDelta: '-12' });
-
-        await wrapper.vm.$nextTick();
-
-        expect(wrapper.vm.coverageDeltaClass).toBe('text-danger');
-      });
-    });
-  });
-
-  describe('rendered output', () => {
-    beforeEach(() => {
+  it('should render CI error if there is a pipeline, but no status', () => {
     createWrapper({ ciStatus: null }, mount);
-    });
-
-    it('should render CI error if there is a pipeline, but no status', async () => {
     expect(findCIErrorMessage().text()).toBe(ciErrorMessage);
   });
 
-    it('should render a loading state when no pipeline is found', async () => {
-      wrapper.setProps({
-        pipeline: {},
-        hasCi: false,
-        pipelineMustSucceed: true,
-      });
-
-      await wrapper.vm.$nextTick();
+  it('should render a loading state when no pipeline is found', () => {
+    createWrapper({ pipeline: {} }, mount);
 
     expect(findMonitoringPipelineMessage().text()).toBe(monitoringMessage);
     expect(findLoadingIcon().exists()).toBe(true);
@@ -139,13 +65,10 @@ describe('MRWidgetPipeline', () => {
 
   describe('with a pipeline', () => {
     beforeEach(() => {
-        createWrapper(
-          {
+      createWrapper({
         pipelineCoverageDelta: mockData.pipelineCoverageDelta,
         buildsWithCoverage: mockData.buildsWithCoverage,
-          },
-          mount,
-        );
+      });
     });
 
     it('should render pipeline ID', () => {
@@ -173,15 +96,31 @@ describe('MRWidgetPipeline', () => {
       expect(findAllPipelineStages().length).toBe(mockData.pipeline.details.stages.length);
     });
 
-      it('should render coverage information', () => {
+    describe('should render pipeline coverage information', () => {
+      it('should render coverage percentage', () => {
         expect(findPipelineCoverage().text()).toMatch(`Coverage ${mockData.pipeline.coverage}%`);
       });
 
-      it('should render pipeline coverage delta information', () => {
+      it('should render coverage delta', () => {
         expect(findPipelineCoverageDelta().exists()).toBe(true);
         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.`;
@@ -198,13 +137,14 @@ describe('MRWidgetPipeline', () => {
         },
       );
     });
+  });
 
   describe('without commit path', () => {
     beforeEach(() => {
       const mockCopy = JSON.parse(JSON.stringify(mockData));
       delete mockCopy.pipeline.commit;
 
-        createWrapper({}, mount);
+      createWrapper({});
     });
 
     it('should render pipeline ID', () => {
@@ -234,12 +174,7 @@ describe('MRWidgetPipeline', () => {
       const mockCopy = JSON.parse(JSON.stringify(mockData));
       delete mockCopy.pipeline.coverage;
 
-        createWrapper(
-          {
-            pipeline: mockCopy.pipeline,
-          },
-          mount,
-        );
+      createWrapper({ pipeline: mockCopy.pipeline });
     });
 
     it('should not render a coverage component', () => {
@@ -321,5 +256,4 @@ describe('MRWidgetPipeline', () => {
       });
     });
   });
-  });
 });