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,135 +51,74 @@ 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' });
+  it('should render CI error if there is a pipeline, but no status', () => {
+    createWrapper({ ciStatus: null }, mount);
+    expect(findCIErrorMessage().text()).toBe(ciErrorMessage);
+  });
 
-        await wrapper.vm.$nextTick();
+  it('should render a loading state when no pipeline is found', () => {
+    createWrapper({ pipeline: {} }, mount);
 
-        expect(wrapper.vm.coverageDeltaClass).toBe('text-danger');
-      });
-    });
+    expect(findMonitoringPipelineMessage().text()).toBe(monitoringMessage);
+    expect(findLoadingIcon().exists()).toBe(true);
   });
 
-  describe('rendered output', () => {
+  describe('with a pipeline', () => {
     beforeEach(() => {
-      createWrapper({ ciStatus: null }, mount);
+      createWrapper({
+        pipelineCoverageDelta: mockData.pipelineCoverageDelta,
+        buildsWithCoverage: mockData.buildsWithCoverage,
+      });
     });
 
-    it('should render CI error if there is a pipeline, but no status', async () => {
-      expect(findCIErrorMessage().text()).toBe(ciErrorMessage);
+    it('should render pipeline ID', () => {
+      expect(
+        findPipelineID()
+          .text()
+          .trim(),
+      ).toBe(`#${mockData.pipeline.id}`);
     });
 
-    it('should render a loading state when no pipeline is found', async () => {
-      wrapper.setProps({
-        pipeline: {},
-        hasCi: false,
-        pipelineMustSucceed: true,
-      });
+    it('should render pipeline status and commit id', () => {
+      expect(findPipelineInfoContainer().text()).toMatch(mockData.pipeline.details.status.label);
 
-      await wrapper.vm.$nextTick();
+      expect(
+        findCommitLink()
+          .text()
+          .trim(),
+      ).toBe(mockData.pipeline.commit.short_id);
 
-      expect(findMonitoringPipelineMessage().text()).toBe(monitoringMessage);
-      expect(findLoadingIcon().exists()).toBe(true);
+      expect(findCommitLink().attributes('href')).toBe(mockData.pipeline.commit.commit_path);
     });
 
-    describe('with a pipeline', () => {
-      beforeEach(() => {
-        createWrapper(
-          {
-            pipelineCoverageDelta: mockData.pipelineCoverageDelta,
-            buildsWithCoverage: mockData.buildsWithCoverage,
-          },
-          mount,
-        );
-      });
+    it('should render pipeline graph', () => {
+      expect(findPipelineGraph().exists()).toBe(true);
+      expect(findAllPipelineStages().length).toBe(mockData.pipeline.details.stages.length);
+    });
 
-      it('should render pipeline ID', () => {
-        expect(
-          findPipelineID()
-            .text()
-            .trim(),
-        ).toBe(`#${mockData.pipeline.id}`);
+    describe('should render pipeline coverage information', () => {
+      it('should render coverage percentage', () => {
+        expect(findPipelineCoverage().text()).toMatch(`Coverage ${mockData.pipeline.coverage}%`);
       });
 
-      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 coverage delta', () => {
+        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);
+      it('coverage delta should have no special style if there is no coverage change', () => {
+        createWrapper({ pipelineCoverageDelta: '0' });
+        expect(findPipelineCoverageDelta().classes()).toEqual([]);
       });
 
-      it('should render coverage information', () => {
-        expect(findPipelineCoverage().text()).toMatch(`Coverage ${mockData.pipeline.coverage}%`);
+      it('coverage delta should have text-success style if coverage increased', () => {
+        createWrapper({ pipelineCoverageDelta: '10' });
+        expect(findPipelineCoverageDelta().classes()).toEqual(['text-success']);
       });
 
-      it('should render pipeline coverage delta information', () => {
-        expect(findPipelineCoverageDelta().exists()).toBe(true);
-        expect(findPipelineCoverageDelta().text()).toBe(`(${mockData.pipelineCoverageDelta}%)`);
+      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', () => {
@@ -198,127 +137,122 @@ describe('MRWidgetPipeline', () => {
         },
       );
     });
+  });
 
-    describe('without commit path', () => {
-      beforeEach(() => {
-        const mockCopy = JSON.parse(JSON.stringify(mockData));
-        delete mockCopy.pipeline.commit;
+  describe('without commit path', () => {
+    beforeEach(() => {
+      const mockCopy = JSON.parse(JSON.stringify(mockData));
+      delete mockCopy.pipeline.commit;
 
-        createWrapper({}, mount);
-      });
+      createWrapper({});
+    });
 
-      it('should render pipeline ID', () => {
-        expect(
-          findPipelineID()
-            .text()
-            .trim(),
-        ).toBe(`#${mockData.pipeline.id}`);
-      });
+    it('should render pipeline ID', () => {
+      expect(
+        findPipelineID()
+          .text()
+          .trim(),
+      ).toBe(`#${mockData.pipeline.id}`);
+    });
 
-      it('should render pipeline status', () => {
-        expect(findPipelineInfoContainer().text()).toMatch(mockData.pipeline.details.status.label);
-      });
+    it('should render pipeline status', () => {
+      expect(findPipelineInfoContainer().text()).toMatch(mockData.pipeline.details.status.label);
+    });
 
-      it('should render pipeline graph', () => {
-        expect(findPipelineGraph().exists()).toBe(true);
-        expect(findAllPipelineStages().length).toBe(mockData.pipeline.details.stages.length);
-      });
+    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 coverage information', () => {
+      expect(findPipelineCoverage().text()).toMatch(`Coverage ${mockData.pipeline.coverage}%`);
     });
+  });
 
-    describe('without coverage', () => {
-      beforeEach(() => {
-        const mockCopy = JSON.parse(JSON.stringify(mockData));
-        delete mockCopy.pipeline.coverage;
-
-        createWrapper(
-          {
-            pipeline: mockCopy.pipeline,
-          },
-          mount,
-        );
-      });
+  describe('without coverage', () => {
+    beforeEach(() => {
+      const mockCopy = JSON.parse(JSON.stringify(mockData));
+      delete mockCopy.pipeline.coverage;
 
-      it('should not render a coverage component', () => {
-        expect(findPipelineCoverage().exists()).toBe(false);
-      });
+      createWrapper({ pipeline: mockCopy.pipeline });
     });
 
-    describe('without a pipeline graph', () => {
-      beforeEach(() => {
-        const mockCopy = JSON.parse(JSON.stringify(mockData));
-        delete mockCopy.pipeline.details.stages;
+    it('should not render a coverage component', () => {
+      expect(findPipelineCoverage().exists()).toBe(false);
+    });
+  });
 
-        createWrapper({
-          pipeline: mockCopy.pipeline,
-        });
-      });
+  describe('without a pipeline graph', () => {
+    beforeEach(() => {
+      const mockCopy = JSON.parse(JSON.stringify(mockData));
+      delete mockCopy.pipeline.details.stages;
 
-      it('should not render a pipeline graph', () => {
-        expect(findPipelineGraph().exists()).toBe(false);
+      createWrapper({
+        pipeline: mockCopy.pipeline,
       });
     });
 
-    describe('for each type of pipeline', () => {
-      let pipeline;
+    it('should not render a pipeline graph', () => {
+      expect(findPipelineGraph().exists()).toBe(false);
+    });
+  });
 
-      beforeEach(() => {
-        ({ pipeline } = JSON.parse(JSON.stringify(mockData)));
+  describe('for each type of pipeline', () => {
+    let pipeline;
 
-        pipeline.details.name = 'Pipeline';
-        pipeline.merge_request_event_type = undefined;
-        pipeline.ref.tag = false;
-        pipeline.ref.branch = false;
-      });
+    beforeEach(() => {
+      ({ pipeline } = JSON.parse(JSON.stringify(mockData)));
 
-      const factory = () => {
-        createWrapper({
-          pipeline,
-          sourceBranchLink: mockData.source_branch_link,
-        });
-      };
+      pipeline.details.name = 'Pipeline';
+      pipeline.merge_request_event_type = undefined;
+      pipeline.ref.tag = false;
+      pipeline.ref.branch = false;
+    });
 
-      describe('for a branch pipeline', () => {
-        it('renders a pipeline widget that reads "Pipeline <ID> <status> for <SHA> on <branch>"', () => {
-          pipeline.ref.branch = true;
+    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;
 
-          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);
       });
     });
   });