Merge branch...

Merge branch '30904-mini-pipeline-graph-status-badge-when-updating-in-real-time-don-t-change-color-and-svg-icon' into 'master'

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

Closes #30904

See merge request !10691

app/assets/javascripts/ci_status_icons.js

+import CANCELED_SVG from 'icons/_icon_status_canceled_borderless.svg';
+import CREATED_SVG from 'icons/_icon_status_created_borderless.svg';
+import FAILED_SVG from 'icons/_icon_status_failed_borderless.svg';
+import MANUAL_SVG from 'icons/_icon_status_manual_borderless.svg';
+import PENDING_SVG from 'icons/_icon_status_pending_borderless.svg';
+import RUNNING_SVG from 'icons/_icon_status_running_borderless.svg';
+import SKIPPED_SVG from 'icons/_icon_status_skipped_borderless.svg';
+import SUCCESS_SVG from 'icons/_icon_status_success_borderless.svg';
+import WARNING_SVG from 'icons/_icon_status_warning_borderless.svg';
+
+const StatusIconEntityMap = {
+  icon_status_canceled: CANCELED_SVG,
+  icon_status_created: CREATED_SVG,
+  icon_status_failed: FAILED_SVG,
+  icon_status_manual: MANUAL_SVG,
+  icon_status_pending: PENDING_SVG,
+  icon_status_running: RUNNING_SVG,
+  icon_status_skipped: SKIPPED_SVG,
+  icon_status_success: SUCCESS_SVG,
+  icon_status_warning: WARNING_SVG,
+};
+
+export {
+  CANCELED_SVG,
+  CREATED_SVG,
+  FAILED_SVG,
+  MANUAL_SVG,
+  PENDING_SVG,
+  RUNNING_SVG,
+  SKIPPED_SVG,
+  SUCCESS_SVG,
+  WARNING_SVG,
+  StatusIconEntityMap as default,
+};

app/assets/javascripts/vue_pipelines_index/components/stage.js

 /* global Flash */
-import canceledSvg from 'icons/_icon_status_canceled_borderless.svg';
-import createdSvg from 'icons/_icon_status_created_borderless.svg';
-import failedSvg from 'icons/_icon_status_failed_borderless.svg';
-import manualSvg from 'icons/_icon_status_manual_borderless.svg';
-import pendingSvg from 'icons/_icon_status_pending_borderless.svg';
-import runningSvg from 'icons/_icon_status_running_borderless.svg';
-import skippedSvg from 'icons/_icon_status_skipped_borderless.svg';
-import successSvg from 'icons/_icon_status_success_borderless.svg';
-import warningSvg from 'icons/_icon_status_warning_borderless.svg';
+import StatusIconEntityMap from '../../ci_status_icons';
 
 export default {
   data() {
-    const svgsDictionary = {
-      icon_status_canceled: canceledSvg,
-      icon_status_created: createdSvg,
-      icon_status_failed: failedSvg,
-      icon_status_manual: manualSvg,
-      icon_status_pending: pendingSvg,
-      icon_status_running: runningSvg,
-      icon_status_skipped: skippedSvg,
-      icon_status_success: successSvg,
-      icon_status_warning: warningSvg,
-    };
-
     return {
       builds: '',
       spinner: '<span class="fa fa-spinner fa-spin"></span>',
-      svg: svgsDictionary[this.stage.status.icon],
     };
   },
 
@@ -89,6 +68,9 @@ export default {
     triggerButtonClass() {
       return `mini-pipeline-graph-dropdown-toggle has-tooltip js-builds-dropdown-button ci-status-icon-${this.stage.status.group}`;
     },
+    svgHTML() {
+      return StatusIconEntityMap[this.stage.status.icon];
+    },
   },
   template: `
     <div>
@@ -100,7 +82,7 @@ export default {
         data-toggle="dropdown"
         type="button"
         :aria-label="stage.title">
-        <span v-html="svg" aria-hidden="true"></span>
+        <span v-html="svgHTML" aria-hidden="true"></span>
         <i class="fa fa-caret-down" aria-hidden="true"></i>
       </button>
       <ul class="dropdown-menu mini-pipeline-graph-dropdown-menu js-builds-dropdown-container">

spec/javascripts/ci_status_icon_spec.js

+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);
+      });
+    });
+  });
+});

spec/javascripts/vue_pipelines_index/stage_spec.js

+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);
+    });
+  });
+});