Commit a5a7cabb authored by Filipa Lacerda's avatar Filipa Lacerda

Port of fl-prettify to EE

parent fdf536dc
<script>
import ciIcon from './ci_icon.vue';
import tooltip from '../directives/tooltip';
/**
import CiIcon from './ci_icon.vue';
import tooltip from '../directives/tooltip';
/**
* Renders CI Badge link with CI icon and status text based on
* API response shared between all places where it is used.
*
......@@ -22,9 +22,9 @@
* - MR widget
*/
export default {
export default {
components: {
ciIcon,
CiIcon,
},
directives: {
tooltip,
......@@ -46,7 +46,7 @@
return className ? `ci-status ci-${className}` : 'ci-status';
},
},
};
};
</script>
<template>
<a
......
<script>
import icon from '../../vue_shared/components/icon.vue';
import Icon from '../../vue_shared/components/icon.vue';
/**
/**
* Renders CI icon based on API response shared between all places where it is used.
*
* Receives status object containing:
......@@ -23,9 +23,9 @@
* - Jobs show view sidebar
* - Linked pipelines
*/
export default {
export default {
components: {
icon,
Icon,
},
props: {
......@@ -41,7 +41,7 @@
return `ci-status-icon ci-status-icon-${status} js-ci-status-icon-${status}`;
},
},
};
};
</script>
<template>
<span :class="cssClass">
......
<script>
/**
/**
* Falls back to the code used in `copy_to_clipboard.js`
*/
import tooltip from '../directives/tooltip';
import tooltip from '../directives/tooltip';
export default {
export default {
name: 'ClipboardButton',
directives: {
tooltip,
......@@ -34,7 +34,7 @@
default: 'btn-default',
},
},
};
};
</script>
<template>
......
import Vue from 'vue';
import ciIcon from '~/vue_shared/components/ci_icon.vue';
import mountComponent from 'spec/helpers/vue_mount_component_helper';
describe('CI Icon component', () => {
let CiIcon;
beforeEach(() => {
CiIcon = Vue.extend(ciIcon);
const Component = Vue.extend(ciIcon);
let vm;
afterEach(() => {
vm.$destroy();
});
it('should render a span element with an svg', () => {
const component = new CiIcon({
propsData: {
vm = mountComponent(Component, {
status: {
icon: 'icon_status_success',
},
},
}).$mount();
});
expect(component.$el.tagName).toEqual('SPAN');
expect(component.$el.querySelector('span > svg')).toBeDefined();
expect(vm.$el.tagName).toEqual('SPAN');
expect(vm.$el.querySelector('span > svg')).toBeDefined();
});
it('should render a success status', () => {
const component = new CiIcon({
propsData: {
vm = mountComponent(Component, {
status: {
icon: 'icon_status_success',
group: 'success',
},
},
}).$mount();
})();
expect(component.$el.classList.contains('ci-status-icon-success')).toEqual(true);
expect(vm.$el.classList.contains('ci-status-icon-success')).toEqual(true);
});
it('should render a failed status', () => {
const component = new CiIcon({
propsData: {
vm = mountComponent(Component, {
status: {
icon: 'icon_status_failed',
group: 'failed',
},
},
}).$mount();
});
expect(component.$el.classList.contains('ci-status-icon-failed')).toEqual(true);
expect(vm.$el.classList.contains('ci-status-icon-failed')).toEqual(true);
});
it('should render success with warnings status', () => {
const component = new CiIcon({
propsData: {
vm = mountComponent(Component, {
status: {
icon: 'icon_status_warning',
group: 'warning',
},
},
}).$mount();
});
expect(component.$el.classList.contains('ci-status-icon-warning')).toEqual(true);
expect(vm.$el.classList.contains('ci-status-icon-warning')).toEqual(true);
});
it('should render pending status', () => {
const component = new CiIcon({
propsData: {
vm = mountComponent(Component, {
status: {
icon: 'icon_status_pending',
group: 'pending',
},
},
}).$mount();
});
expect(component.$el.classList.contains('ci-status-icon-pending')).toEqual(true);
expect(vm.$el.classList.contains('ci-status-icon-pending')).toEqual(true);
});
it('should render running status', () => {
const component = new CiIcon({
propsData: {
vm = mountComponent(Component, {
status: {
icon: 'icon_status_running',
group: 'running',
},
},
}).$mount();
});
expect(component.$el.classList.contains('ci-status-icon-running')).toEqual(true);
expect(vm.$el.classList.contains('ci-status-icon-running')).toEqual(true);
});
it('should render created status', () => {
const component = new CiIcon({
propsData: {
vm = mountComponent(Component, {
status: {
icon: 'icon_status_created',
group: 'created',
},
},
}).$mount();
});
expect(component.$el.classList.contains('ci-status-icon-created')).toEqual(true);
expect(vm.$el.classList.contains('ci-status-icon-created')).toEqual(true);
});
it('should render skipped status', () => {
const component = new CiIcon({
propsData: {
vm = mountComponent(Component, {
status: {
icon: 'icon_status_skipped',
group: 'skipped',
},
},
}).$mount();
});
expect(component.$el.classList.contains('ci-status-icon-skipped')).toEqual(true);
expect(vm.$el.classList.contains('ci-status-icon-skipped')).toEqual(true);
});
it('should render canceled status', () => {
const component = new CiIcon({
propsData: {
vm = mountComponent(Component, {
status: {
icon: 'icon_status_canceled',
group: 'canceled',
},
},
}).$mount();
});
expect(component.$el.classList.contains('ci-status-icon-canceled')).toEqual(true);
expect(vm.$el.classList.contains('ci-status-icon-canceled')).toEqual(true);
});
it('should render status for manual action', () => {
const component = new CiIcon({
propsData: {
vm = mountComponent(Component, {
status: {
icon: 'icon_status_manual',
group: 'manual',
},
},
}).$mount();
});
expect(component.$el.classList.contains('ci-status-icon-manual')).toEqual(true);
expect(vm.$el.classList.contains('ci-status-icon-manual')).toEqual(true);
});
});
......@@ -3,10 +3,10 @@ import clipboardButton from '~/vue_shared/components/clipboard_button.vue';
import mountComponent from 'spec/helpers/vue_mount_component_helper';
describe('clipboard button', () => {
const Component = Vue.extend(clipboardButton);
let vm;
beforeEach(() => {
const Component = Vue.extend(clipboardButton);
vm = mountComponent(Component, {
text: 'copy me',
title: 'Copy this value into Clipboard!',
......
Markdown is supported
0%
or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment