Skip to content

G
gitlab-ce
Commit 1c7008fb authored by Phil Hughes's avatar Phil Hughes
Browse files
Options

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
Hide whitespace changes
Inline Side-by-side
Showing with 192 additions and 201 deletions
app/assets/javascripts/vue_shared/components/ci_badge_link.vue
View file @ 1c7008fb
<script> <script>
import ciIcon from './ci_icon.vue'; import CiIcon from './ci_icon.vue';
import tooltip from '../directives/tooltip'; import tooltip from '../directives/tooltip';
/** /**
* Renders CI Badge link with CI icon and status text based on * Renders CI Badge link with CI icon and status text based on
* API response shared between all places where it is used. * API response shared between all places where it is used.
* *
* Receives status object containing: * Receives status object containing:
* status: { * status: {
* details_path: "/gitlab-org/gitlab-ce/pipelines/8150156" // url * details_path: "/gitlab-org/gitlab-ce/pipelines/8150156" // url
* group:"running" // used for CSS class * group:"running" // used for CSS class
* icon: "icon_status_running" // used to render the icon * icon: "icon_status_running" // used to render the icon
* label:"running" // used for potential tooltip * label:"running" // used for potential tooltip
* text:"running" // text rendered * text:"running" // text rendered
* } * }
* *
* Used in: * Used in:
* - Pipelines table - first column * - Pipelines table - first column
* - Jobs table - first column * - Jobs table - first column
* - Pipeline show view - header * - Pipeline show view - header
* - Job show view - header * - Job show view - header
* - MR widget * - MR widget
*/ */
export default { export default {
components: { components: {
ciIcon, CiIcon,
},
directives: {
tooltip,
},
props: {
status: {
type: Object,
required: true,
}, },
directives: { showText: {
tooltip, type: Boolean,
required: false,
default: true,
}, },
props: { },
status: { computed: {
type: Object, cssClass() {
required: true, const className = this.status.group;
}, return className ? `ci-status ci-${className}` : 'ci-status';
showText: {
type: Boolean,
required: false,
default: true,
},
}, },
computed: { },
cssClass() { };
const className = this.status.group;
return className ? `ci-status ci-${className}` : 'ci-status';
},
},
};
</script> </script>
<template> <template>
<a <a
......
app/assets/javascripts/vue_shared/components/ci_icon.vue
View file @ 1c7008fb
<script> <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. * Renders CI icon based on API response shared between all places where it is used.
* *
* Receives status object containing: * Receives status object containing:
* status: { * status: {
* details_path: "/gitlab-org/gitlab-ce/pipelines/8150156" // url * details_path: "/gitlab-org/gitlab-ce/pipelines/8150156" // url
* group:"running" // used for CSS class * group:"running" // used for CSS class
* icon: "icon_status_running" // used to render the icon * icon: "icon_status_running" // used to render the icon
* label:"running" // used for potential tooltip * label:"running" // used for potential tooltip
* text:"running" // text rendered * text:"running" // text rendered
* } * }
* *
* Used in: * Used in:
* - Pipelines table Badge * - Pipelines table Badge
* - Pipelines table mini graph * - Pipelines table mini graph
* - Pipeline graph * - Pipeline graph
* - Pipeline show view badge * - Pipeline show view badge
* - Jobs table * - Jobs table
* - Jobs show view header * - Jobs show view header
* - Jobs show view sidebar * - Jobs show view sidebar
* - Linked pipelines * - Linked pipelines
*/ */
export default { export default {
components: { components: {
icon, Icon,
},
props: {
status: {
type: Object,
required: true,
}, },
},
props: { computed: {
status: { cssClass() {
type: Object, const status = this.status.group;
required: true, 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> </script>
<template> <template>
<span :class="cssClass"> <span :class="cssClass">
......
app/assets/javascripts/vue_shared/components/clipboard_button.vue
View file @ 1c7008fb
<script> <script>
/** /**
* Falls back to the code used in `copy_to_clipboard.js` * Falls back to the code used in `copy_to_clipboard.js`
*/ *
import tooltip from '../directives/tooltip'; * 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 { export default {
name: 'ClipboardButton', name: 'ClipboardButton',
directives: { directives: {
tooltip, tooltip,
},
props: {
text: {
type: String,
required: true,
}, },
props: { title: {
text: { type: String,
type: String, required: true,
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',
},
}, },
}; tooltipPlacement: {
type: String,
required: false,
default: 'top',
},
tooltipContainer: {
type: [String, Boolean],
required: false,
default: false,
},
cssClass: {
type: String,
required: false,
default: 'btn-default',
},
},
};
</script> </script>
<template> <template>
......
spec/javascripts/vue_shared/components/ci_icon_spec.js
View file @ 1c7008fb
import Vue from 'vue'; import Vue from 'vue';
import ciIcon from '~/vue_shared/components/ci_icon.vue'; import ciIcon from '~/vue_shared/components/ci_icon.vue';
import mountComponent from 'spec/helpers/vue_mount_component_helper';
describe('CI Icon component', () => { describe('CI Icon component', () => {
let CiIcon; const Component = Vue.extend(ciIcon);
beforeEach(() => { let vm;
CiIcon = Vue.extend(ciIcon);
afterEach(() => {
vm.$destroy();
}); });
it('should render a span element with an svg', () => { it('should render a span element with an svg', () => {
const component = new CiIcon({ vm = mountComponent(Component, {
propsData: { status: {
status: { icon: 'icon_status_success',
icon: 'icon_status_success',
},
}, },
}).$mount(); });
expect(component.$el.tagName).toEqual('SPAN'); expect(vm.$el.tagName).toEqual('SPAN');
expect(component.$el.querySelector('span > svg')).toBeDefined(); expect(vm.$el.querySelector('span > svg')).toBeDefined();
}); });
it('should render a success status', () => { it('should render a success status', () => {
const component = new CiIcon({ vm = mountComponent(Component, {
propsData: { status: {
status: { icon: 'icon_status_success',
icon: 'icon_status_success', group: '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', () => { it('should render a failed status', () => {
const component = new CiIcon({ vm = mountComponent(Component, {
propsData: { status: {
status: { icon: 'icon_status_failed',
icon: 'icon_status_failed', group: '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', () => { it('should render success with warnings status', () => {
const component = new CiIcon({ vm = mountComponent(Component, {
propsData: { status: {
status: { icon: 'icon_status_warning',
icon: 'icon_status_warning', group: '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', () => { it('should render pending status', () => {
const component = new CiIcon({ vm = mountComponent(Component, {
propsData: { status: {
status: { icon: 'icon_status_pending',
icon: 'icon_status_pending', group: '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', () => { it('should render running status', () => {
const component = new CiIcon({ vm = mountComponent(Component, {
propsData: { status: {
status: { icon: 'icon_status_running',
icon: 'icon_status_running', group: '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', () => { it('should render created status', () => {
const component = new CiIcon({ vm = mountComponent(Component, {
propsData: { status: {
status: { icon: 'icon_status_created',
icon: 'icon_status_created', group: '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', () => { it('should render skipped status', () => {
const component = new CiIcon({ vm = mountComponent(Component, {
propsData: { status: {
status: { icon: 'icon_status_skipped',
icon: 'icon_status_skipped', group: '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', () => { it('should render canceled status', () => {
const component = new CiIcon({ vm = mountComponent(Component, {
propsData: { status: {
status: { icon: 'icon_status_canceled',
icon: 'icon_status_canceled', group: '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', () => { it('should render status for manual action', () => {
const component = new CiIcon({ vm = mountComponent(Component, {
propsData: { status: {
status: { icon: 'icon_status_manual',
icon: 'icon_status_manual', group: '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 @ 1c7008fb
...@@ -3,10 +3,10 @@ import clipboardButton from '~/vue_shared/components/clipboard_button.vue'; ...@@ -3,10 +3,10 @@ import clipboardButton from '~/vue_shared/components/clipboard_button.vue';
import mountComponent from 'spec/helpers/vue_mount_component_helper'; import mountComponent from 'spec/helpers/vue_mount_component_helper';
describe('clipboard button', () => { describe('clipboard button', () => {
const Component = Vue.extend(clipboardButton);
let vm; let vm;
beforeEach(() => { beforeEach(() => {
const Component = Vue.extend(clipboardButton);
vm = mountComponent(Component, { vm = mountComponent(Component, {
text: 'copy me', text: 'copy me',
title: 'Copy this value into Clipboard!', 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