Resolve "Mini pipeline graph + status badge, when updating in real time don't change color and svg icon"

2 files changed, 110 insertions, 0 deletions

diff --git a/spec/javascripts/ci_status_icon_spec.js b/spec/javascripts/ci_status_icon_spec.js
new file mode 100644
index 00000000000..c83416c15ef
--- /dev/null
+++ b/spec/javascripts/ci_status_icon_spec.js
@@ -0,0 +1,44 @@
+import * as icons from '~/ci_status_icons';
+
+describe('CI status icons', () => {
+  const statuses = [
+    'canceled',
+    'created',
+    'failed',
+    'manual',
+    'pending',
+    'running',
+    'skipped',
+    'success',
+    'warning',
+  ];
+
+  statuses.forEach((status) => {
+    it(`should export a ${status} svg`, () => {
+      const key = `${status.toUpperCase()}_SVG`;
+
+      expect(Object.hasOwnProperty.call(icons, key)).toBe(true);
+      expect(icons[key]).toMatch(/^<svg/);
+    });
+  });
+
+  describe('default export map', () => {
+    const entityIconNames = [
+      'icon_status_canceled',
+      'icon_status_created',
+      'icon_status_failed',
+      'icon_status_manual',
+      'icon_status_pending',
+      'icon_status_running',
+      'icon_status_skipped',
+      'icon_status_success',
+      'icon_status_warning',
+    ];
+
+    entityIconNames.forEach((iconName) => {
+      it(`should have a '${iconName}' key`, () => {
+        expect(Object.hasOwnProperty.call(icons.default, iconName)).toBe(true);
+      });
+    });
+  });
+});
diff --git a/spec/javascripts/vue_pipelines_index/stage_spec.js b/spec/javascripts/vue_pipelines_index/stage_spec.js
new file mode 100644
index 00000000000..542661df2b0
--- /dev/null
+++ b/spec/javascripts/vue_pipelines_index/stage_spec.js
@@ -0,0 +1,66 @@
+import Vue from 'vue';
+import { SUCCESS_SVG } from '~/ci_status_icons';
+import Stage from '~/vue_pipelines_index/components/stage';
+
+function minify(string) {
+  return string.replace(/\s/g, '');
+}
+
+describe('Pipelines Stage', () => {
+  describe('data', () => {
+    let stageReturnValue;
+
+    beforeEach(() => {
+      stageReturnValue = Stage.data();
+    });
+
+    it('should return object with .builds and .spinner', () => {
+      expect(stageReturnValue).toEqual({
+        builds: '',
+        spinner: '<span class="fa fa-spinner fa-spin"></span>',
+      });
+    });
+  });
+
+  describe('computed', () => {
+    describe('svgHTML', function () {
+      let stage;
+      let svgHTML;
+
+      beforeEach(() => {
+        stage = { stage: { status: { icon: 'icon_status_success' } } };
+
+        svgHTML = Stage.computed.svgHTML.call(stage);
+      });
+
+      it("should return the correct icon for the stage's status", () => {
+        expect(svgHTML).toBe(SUCCESS_SVG);
+      });
+    });
+  });
+
+  describe('when mounted', () => {
+    let StageComponent;
+    let renderedComponent;
+    let stage;
+
+    beforeEach(() => {
+      stage = { status: { icon: 'icon_status_success' } };
+
+      StageComponent = Vue.extend(Stage);
+
+      renderedComponent = new StageComponent({
+        propsData: {
+          stage,
+        },
+      }).$mount();
+    });
+
+    it('should render the correct status svg', () => {
+      const minifiedComponent = minify(renderedComponent.$el.outerHTML);
+      const expectedSVG = minify(SUCCESS_SVG);
+
+      expect(minifiedComponent).toContain(expectedSVG);
+    });
+  });
+});