1 files changed, 24 insertions, 7 deletions

diff --git a/spec/frontend/pipelines/pipelines_table_spec.js b/spec/frontend/pipelines/pipelines_table_spec.js
index 251d823cc37..950a6b21e16 100644
--- a/spec/frontend/pipelines/pipelines_table_spec.js
+++ b/spec/frontend/pipelines/pipelines_table_spec.js
@@ -4,7 +4,8 @@ import { mount } from '@vue/test-utils';
 import fixture from 'test_fixtures/pipelines/pipelines.json';
 import { mockTracking, unmockTracking } from 'helpers/tracking_helper';
 import { extendedWrapper } from 'helpers/vue_test_utils_helper';
-import PipelineMiniGraph from '~/pipelines/components/pipeline_mini_graph/pipeline_mini_graph.vue';
+import LegacyPipelineMiniGraph from '~/pipelines/components/pipeline_mini_graph/legacy_pipeline_mini_graph.vue';
+import PipelineFailedJobsWidget from '~/pipelines/components/pipelines_list/failure_widget/pipeline_failed_jobs_widget.vue';
 import PipelineOperations from '~/pipelines/components/pipelines_list/pipeline_operations.vue';
 import PipelineTriggerer from '~/pipelines/components/pipelines_list/pipeline_triggerer.vue';
 import PipelineUrl from '~/pipelines/components/pipelines_list/pipeline_url.vue';
@@ -70,10 +71,11 @@ describe('Pipelines Table', () => {
   const findCiBadgeLink = () => wrapper.findComponent(CiBadgeLink);
   const findPipelineInfo = () => wrapper.findComponent(PipelineUrl);
   const findTriggerer = () => wrapper.findComponent(PipelineTriggerer);
-  const findPipelineMiniGraph = () => wrapper.findComponent(PipelineMiniGraph);
+  const findLegacyPipelineMiniGraph = () => wrapper.findComponent(LegacyPipelineMiniGraph);
   const findTimeAgo = () => wrapper.findComponent(PipelinesTimeago);
   const findActions = () => wrapper.findComponent(PipelineOperations);
 
+  const findPipelineFailureWidget = () => wrapper.findComponent(PipelineFailedJobsWidget);
   const findTableRows = () => wrapper.findAllByTestId('pipeline-table-row');
   const findStatusTh = () => wrapper.findByTestId('status-th');
   const findPipelineTh = () => wrapper.findByTestId('pipeline-th');
@@ -124,12 +126,12 @@ describe('Pipelines Table', () => {
 
     describe('stages cell', () => {
       it('should render pipeline mini graph', () => {
-        expect(findPipelineMiniGraph().exists()).toBe(true);
+        expect(findLegacyPipelineMiniGraph().exists()).toBe(true);
       });
 
       it('should render the right number of stages', () => {
         const stagesLength = pipeline.details.stages.length;
-        expect(findPipelineMiniGraph().props('stages').length).toBe(stagesLength);
+        expect(findLegacyPipelineMiniGraph().props('stages').length).toBe(stagesLength);
       });
 
       it('should render the latest downstream pipelines only', () => {
@@ -137,7 +139,7 @@ describe('Pipelines Table', () => {
         // because we retried the trigger job, so the mini pipeline graph will only
         // render the newly created downstream pipeline instead
         expect(pipeline.triggered).toHaveLength(2);
-        expect(findPipelineMiniGraph().props('downstreamPipelines')).toHaveLength(1);
+        expect(findLegacyPipelineMiniGraph().props('downstreamPipelines')).toHaveLength(1);
       });
 
       describe('when pipeline does not have stages', () => {
@@ -149,7 +151,7 @@ describe('Pipelines Table', () => {
         });
 
         it('stages are not rendered', () => {
-          expect(findPipelineMiniGraph().props('stages')).toHaveLength(0);
+          expect(findLegacyPipelineMiniGraph().props('stages')).toHaveLength(0);
         });
       });
     });
@@ -189,6 +191,7 @@ describe('Pipelines Table', () => {
 
           it('does not render', () => {
             expect(findTableRows()).toHaveLength(1);
+            expect(findPipelineFailureWidget().exists()).toBe(false);
           });
         });
 
@@ -197,8 +200,21 @@ describe('Pipelines Table', () => {
             beforeEach(() => {
               createComponent({ pipelines: [pipeline] }, provideWithDetails);
             });
+
             it('renders', () => {
               expect(findTableRows()).toHaveLength(2);
+              expect(findPipelineFailureWidget().exists()).toBe(true);
+            });
+
+            it('passes the expected props', () => {
+              expect(findPipelineFailureWidget().props()).toStrictEqual({
+                failedJobsCount: pipeline.failed_builds.length,
+                isPipelineActive: pipeline.active,
+                pipelineIid: pipeline.iid,
+                pipelinePath: pipeline.path,
+                // Make sure the forward slash was removed
+                projectPath: 'frontend-fixtures/pipelines-project',
+              });
             });
           });
 
@@ -212,6 +228,7 @@ describe('Pipelines Table', () => {
 
             it('does not render', () => {
               expect(findTableRows()).toHaveLength(1);
+              expect(findPipelineFailureWidget().exists()).toBe(false);
             });
           });
         });
@@ -252,7 +269,7 @@ describe('Pipelines Table', () => {
       });
 
       it('tracks pipeline mini graph stage click', () => {
-        findPipelineMiniGraph().vm.$emit('miniGraphStageClick');
+        findLegacyPipelineMiniGraph().vm.$emit('miniGraphStageClick');
 
         expect(trackingSpy).toHaveBeenCalledWith(undefined, 'click_minigraph', {
           label: TRACKING_CATEGORIES.table,