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
This commit is contained in:
commit
f88762a5f5
|
@ -0,0 +1,34 @@
|
|||
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,
|
||||
};
|
|
@ -1,32 +1,11 @@
|
|||
/* 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">
|
||||
|
|
|
@ -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);
|
||||
});
|
||||
});
|
||||
});
|
||||
});
|
|
@ -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);
|
||||
});
|
||||
});
|
||||
});
|
Loading…
Reference in New Issue