Uniform CI status components in vue

4 files changed, 103 insertions, 5 deletions

diff --git a/spec/javascripts/vue_mr_widget/components/mr_widget_deployment_spec.js b/spec/javascripts/vue_mr_widget/components/mr_widget_deployment_spec.js
index 2f971b39d16..d4b200875df 100644
--- a/spec/javascripts/vue_mr_widget/components/mr_widget_deployment_spec.js
+++ b/spec/javascripts/vue_mr_widget/components/mr_widget_deployment_spec.js
@@ -1,7 +1,7 @@
 import Vue from 'vue';
 import deploymentComponent from '~/vue_merge_request_widget/components/mr_widget_deployment';
 import MRWidgetService from '~/vue_merge_request_widget/services/mr_widget_service';
-import { statusClassToSvgMap } from '~/vue_shared/pipeline_svg_icons';
+import { statusIconEntityMap } from '~/vue_shared/ci_status_icons';
 
 const deploymentMockData = [
   {
@@ -46,7 +46,7 @@ describe('MRWidgetDeployment', () => {
     describe('svg', () => {
       it('should have the proper SVG icon', () => {
         const vm = createComponent(deploymentMockData);
-        expect(vm.svg).toEqual(statusClassToSvgMap.icon_status_success);
+        expect(vm.svg).toEqual(statusIconEntityMap.icon_status_success);
       });
     });
   });
diff --git a/spec/javascripts/vue_mr_widget/components/mr_widget_pipeline_spec.js b/spec/javascripts/vue_mr_widget/components/mr_widget_pipeline_spec.js
index 1b418c7dfcf..647b59520f8 100644
--- a/spec/javascripts/vue_mr_widget/components/mr_widget_pipeline_spec.js
+++ b/spec/javascripts/vue_mr_widget/components/mr_widget_pipeline_spec.js
@@ -1,5 +1,5 @@
 import Vue from 'vue';
-import { statusClassToSvgMap } from '~/vue_shared/pipeline_svg_icons';
+import { statusIconEntityMap } from '~/vue_shared/ci_status_icons';
 import pipelineComponent from '~/vue_merge_request_widget/components/mr_widget_pipeline';
 import mockData from '../mock_data';
 
@@ -24,7 +24,7 @@ describe('MRWidgetPipeline', () => {
   describe('components', () => {
     it('should have components added', () => {
       expect(pipelineComponent.components['pipeline-stage']).toBeDefined();
-      expect(pipelineComponent.components['pipeline-status-icon']).toBeDefined();
+      expect(pipelineComponent.components.ciIcon).toBeDefined();
     });
   });
 
@@ -33,7 +33,7 @@ describe('MRWidgetPipeline', () => {
       it('should have the proper SVG icon', () => {
         const vm = createComponent({ pipeline: mockData.pipeline });
 
-        expect(vm.svg).toEqual(statusClassToSvgMap.icon_status_failed);
+        expect(vm.svg).toEqual(statusIconEntityMap.icon_status_failed);
       });
     });
 
diff --git a/spec/javascripts/vue_shared/components/ci_badge_link_spec.js b/spec/javascripts/vue_shared/components/ci_badge_link_spec.js
new file mode 100644
index 00000000000..daed4da3e15
--- /dev/null
+++ b/spec/javascripts/vue_shared/components/ci_badge_link_spec.js
@@ -0,0 +1,89 @@
+import Vue from 'vue';
+import ciBadge from '~/vue_shared/components/ci_badge_link.vue';
+
+describe('CI Badge Link Component', () => {
+  let CIBadge;
+
+  const statuses = {
+    canceled: {
+      text: 'canceled',
+      label: 'canceled',
+      group: 'canceled',
+      icon: 'icon_status_canceled',
+      details_path: 'status/canceled',
+    },
+    created: {
+      text: 'created',
+      label: 'created',
+      group: 'created',
+      icon: 'icon_status_created',
+      details_path: 'status/created',
+    },
+    failed: {
+      text: 'failed',
+      label: 'failed',
+      group: 'failed',
+      icon: 'icon_status_failed',
+      details_path: 'status/failed',
+    },
+    manual: {
+      text: 'manual',
+      label: 'manual action',
+      group: 'manual',
+      icon: 'icon_status_manual',
+      details_path: 'status/manual',
+    },
+    pending: {
+      text: 'pending',
+      label: 'pending',
+      group: 'pending',
+      icon: 'icon_status_pending',
+      details_path: 'status/pending',
+    },
+    running: {
+      text: 'running',
+      label: 'running',
+      group: 'running',
+      icon: 'icon_status_running',
+      details_path: 'status/running',
+    },
+    skipped: {
+      text: 'skipped',
+      label: 'skipped',
+      group: 'skipped',
+      icon: 'icon_status_skipped',
+      details_path: 'status/skipped',
+    },
+    success_warining: {
+      text: 'passed',
+      label: 'passed',
+      group: 'success_with_warnings',
+      icon: 'icon_status_warning',
+      details_path: 'status/warning',
+    },
+    success: {
+      text: 'passed',
+      label: 'passed',
+      group: 'passed',
+      icon: 'icon_status_success',
+      details_path: 'status/passed',
+    },
+  };
+
+  it('should render each status badge', () => {
+    CIBadge = Vue.extend(ciBadge);
+    Object.keys(statuses).map((status) => {
+      const vm = new CIBadge({
+        propsData: {
+          status: statuses[status],
+        },
+      }).$mount();
+
+      expect(vm.$el.getAttribute('href')).toEqual(statuses[status].details_path);
+      expect(vm.$el.textContent.trim()).toEqual(statuses[status].text);
+      expect(vm.$el.getAttribute('class')).toEqual(`ci-status ci-${statuses[status].group}`);
+      expect(vm.$el.querySelector('svg')).toBeDefined();
+      return vm;
+    });
+  });
+});
diff --git a/spec/javascripts/vue_shared/components/ci_icon_spec.js b/spec/javascripts/vue_shared/components/ci_icon_spec.js
index 98dc6caa622..d8664408595 100644
--- a/spec/javascripts/vue_shared/components/ci_icon_spec.js
+++ b/spec/javascripts/vue_shared/components/ci_icon_spec.js
@@ -25,6 +25,7 @@ describe('CI Icon component', () => {
       propsData: {
         status: {
           icon: 'icon_status_success',
+          group: 'success',
         },
       },
     }).$mount();
@@ -37,6 +38,7 @@ describe('CI Icon component', () => {
       propsData: {
         status: {
           icon: 'icon_status_failed',
+          group: 'failed',
         },
       },
     }).$mount();
@@ -49,6 +51,7 @@ describe('CI Icon component', () => {
       propsData: {
         status: {
           icon: 'icon_status_warning',
+          group: 'warning',
         },
       },
     }).$mount();
@@ -61,6 +64,7 @@ describe('CI Icon component', () => {
       propsData: {
         status: {
           icon: 'icon_status_pending',
+          group: 'pending',
         },
       },
     }).$mount();
@@ -73,6 +77,7 @@ describe('CI Icon component', () => {
       propsData: {
         status: {
           icon: 'icon_status_running',
+          group: 'running',
         },
       },
     }).$mount();
@@ -85,6 +90,7 @@ describe('CI Icon component', () => {
       propsData: {
         status: {
           icon: 'icon_status_created',
+          group: 'created',
         },
       },
     }).$mount();
@@ -97,6 +103,7 @@ describe('CI Icon component', () => {
       propsData: {
         status: {
           icon: 'icon_status_skipped',
+          group: 'skipped',
         },
       },
     }).$mount();
@@ -109,6 +116,7 @@ describe('CI Icon component', () => {
       propsData: {
         status: {
           icon: 'icon_status_canceled',
+          group: 'canceled',
         },
       },
     }).$mount();
@@ -121,6 +129,7 @@ describe('CI Icon component', () => {
       propsData: {
         status: {
           icon: 'icon_status_manual',
+          group: 'manual',
         },
       },
     }).$mount();