Commit 1c7008fb authored by Phil Hughes's avatar Phil Hughes

Merge branch 'ee-fl-prettify' into 'master'

Prettify vue shared component & improve tests to match guidelines

See merge request gitlab-org/gitlab-ee!5423
parents 16eb5607 b7dc48a4
<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,25 +23,23 @@
* - Jobs show view sidebar
* - Linked pipelines
*/
export default {
export default {
components: {
icon,
Icon,
},
props: {
status: {
type: Object,
required: true,
},
},
computed: {
cssClass() {
const status = this.status.group;
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`
*
* Renders a button with a clipboard icon that copies the content of `data-clipboard-text`
* when clicked.
*
* @example
* <clipboard-button
* title="Copy to clipbard"
* text="Content to be copied"
* css-class="btn-transparent"
* />
*/
import tooltip from '../directives/tooltip';
import tooltip from '../directives/tooltip';
export default {
export default {
name: 'ClipboardButton',
directives: {
tooltip,
......@@ -34,7 +44,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