Uniform CI status components in vue

2 files changed, 98 insertions, 0 deletions

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();