Skip to content

G
gitlab-ce
Commit 12aab8ff authored by Filipa Lacerda's avatar Filipa Lacerda
Browse files
Options

Prettify vue shared component & improve tests to match guidelines

parent 0517e1d8
Hide whitespace changes
Inline Side-by-side
Showing with 191 additions and 199 deletions
app/assets/javascripts/vue_shared/components/ci_badge_link.vue
View file @ 12aab8ff
<script>
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.
*
* Receives status object containing:
* status: {
* details_path: "/gitlab-org/gitlab-ce/pipelines/8150156" // url
* group:"running" // used for CSS class
* icon: "icon_status_running" // used to render the icon
* label:"running" // used for potential tooltip
* text:"running" // text rendered
* }
*
* Used in:
* - Pipelines table - first column
* - Jobs table - first column
* - Pipeline show view - header
* - Job show view - header
* - MR widget
*/
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.
*
* Receives status object containing:
* status: {
* details_path: "/gitlab-org/gitlab-ce/pipelines/8150156" // url
* group:"running" // used for CSS class
* icon: "icon_status_running" // used to render the icon
* label:"running" // used for potential tooltip
* text:"running" // text rendered
* }
*
* Used in:
* - Pipelines table - first column
* - Jobs table - first column
* - Pipeline show view - header
* - Job show view - header
* - MR widget
*/
export default {
components: {
ciIcon,
export default {
components: {
CiIcon,
},
directives: {
tooltip,
},
props: {
status: {
type: Object,
required: true,
},
directives: {
tooltip,
showText: {
type: Boolean,
required: false,
default: true,
},
props: {
status: {
type: Object,
required: true,
},
showText: {
type: Boolean,
required: false,
default: true,
},
},
computed: {
cssClass() {
const className = this.status.group;
return className ? `ci-status ci-${className}` : 'ci-status';
},
computed: {
cssClass() {
const className = this.status.group;
return className ? `ci-status ci-${className}` : 'ci-status';
},
},
};
},
};
</script>
<template>
<a
......
app/assets/javascripts/vue_shared/components/ci_icon.vue
View file @ 12aab8ff
<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:
* status: {
* details_path: "/gitlab-org/gitlab-ce/pipelines/8150156" // url
* group:"running" // used for CSS class
* icon: "icon_status_running" // used to render the icon
* label:"running" // used for potential tooltip
* text:"running" // text rendered
* }
*
* Used in:
* - Pipelines table Badge
* - Pipelines table mini graph
* - Pipeline graph
* - Pipeline show view badge
* - Jobs table
* - Jobs show view header
* - Jobs show view sidebar
*/
export default {
components: {
icon,
/**
* Renders CI icon based on API response shared between all places where it is used.
*
* Receives status object containing:
* status: {
* details_path: "/gitlab-org/gitlab-ce/pipelines/8150156" // url
* group:"running" // used for CSS class
* icon: "icon_status_running" // used to render the icon
* label:"running" // used for potential tooltip
* text:"running" // text rendered
* }
*
* Used in:
* - Pipelines table Badge
* - Pipelines table mini graph
* - Pipeline graph
* - Pipeline show view badge
* - Jobs table
* - Jobs show view header
* - Jobs show view sidebar
*/
export default {
components: {
Icon,
},
props: {
status: {
type: Object,
required: true,
},
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}`;
},
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">
......
app/assets/javascripts/vue_shared/components/clipboard_button.vue
View file @ 12aab8ff
<script>
/**
* Falls back to the code used in `copy_to_clipboard.js`
*/
import tooltip from '../directives/tooltip';
/**
* 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';
export default {
name: 'ClipboardButton',
directives: {
tooltip,
export default {
name: 'ClipboardButton',
directives: {
tooltip,
},
props: {
text: {
type: String,
required: true,
},
props: {
text: {
type: String,
required: true,
},
title: {
type: String,
required: true,
},
tooltipPlacement: {
type: String,
required: false,
default: 'top',
},
tooltipContainer: {
type: [String, Boolean],
required: false,
default: false,
},
cssClass: {
type: String,
required: false,
default: 'btn-default',
},
title: {
type: String,
required: true,
},
};
tooltipPlacement: {
type: String,
required: false,
default: 'top',
},
tooltipContainer: {
type: [String, Boolean],
required: false,
default: false,
},
cssClass: {
type: String,
required: false,
default: 'btn-default',
},
},
};
</script>
<template>
......
spec/javascripts/vue_shared/components/ci_icon_spec.js
View file @ 12aab8ff
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: {
status: {
icon: 'icon_status_success',
},
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: {
status: {
icon: 'icon_status_success',
group: 'success',
},
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: {
status: {
icon: 'icon_status_failed',
group: 'failed',
},
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: {
status: {
icon: 'icon_status_warning',
group: 'warning',
},
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: {
status: {
icon: 'icon_status_pending',
group: 'pending',
},
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: {
status: {
icon: 'icon_status_running',
group: 'running',
},
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: {
status: {
icon: 'icon_status_created',
group: 'created',
},
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: {
status: {
icon: 'icon_status_skipped',
group: 'skipped',
},
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: {
status: {
icon: 'icon_status_canceled',
group: 'canceled',
},
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: {
status: {
icon: 'icon_status_manual',
group: 'manual',
},
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);
});
});
spec/javascripts/vue_shared/components/clipboard_button_spec.js
View file @ 12aab8ff
......@@ -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
GitLab Nexedi Edition | About GitLab | About Nexedi | 沪ICP备2021021310号-2 | 沪ICP备2021021310号-7