Creates Vue commit component for job log page
This commit is contained in:
parent
ce18246c24
commit
8d5c92c558
3 changed files with 142 additions and 0 deletions
64
app/assets/javascripts/jobs/components/commit_block.vue
Normal file
64
app/assets/javascripts/jobs/components/commit_block.vue
Normal file
|
@ -0,0 +1,64 @@
|
|||
<script>
|
||||
import ClipboardButton from '~/vue_shared/components/clipboard_button.vue';
|
||||
|
||||
export default {
|
||||
components: {
|
||||
ClipboardButton,
|
||||
},
|
||||
props: {
|
||||
pipelineShortSha: {
|
||||
type: String,
|
||||
required: true,
|
||||
},
|
||||
pipelineShaPath: {
|
||||
type: String,
|
||||
required: true,
|
||||
},
|
||||
mergeRequestReference: {
|
||||
type: String,
|
||||
required: false,
|
||||
default: null,
|
||||
},
|
||||
mergeRequestPath: {
|
||||
type: String,
|
||||
required: false,
|
||||
default: null,
|
||||
},
|
||||
gitCommitTitlte: {
|
||||
type: String,
|
||||
required: true,
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
<template>
|
||||
<div class="block">
|
||||
<p>
|
||||
{{ __('Commit') }}
|
||||
|
||||
<a
|
||||
:href="pipelineShaPath"
|
||||
class="js-commit-sha commit-sha link-commit"
|
||||
>
|
||||
{{ pipelineShortSha }}
|
||||
</a>
|
||||
|
||||
<clipboard-button
|
||||
:text="pipelineShortSha"
|
||||
:title="__('Copy commit SHA to clipboard')"
|
||||
/>
|
||||
|
||||
<a
|
||||
v-if="mergeRequestPath && mergeRequestReference"
|
||||
:href="mergeRequestPath"
|
||||
class="js-link-commit link-commit"
|
||||
>
|
||||
{{ mergeRequestReference }}
|
||||
</a>
|
||||
</p>
|
||||
|
||||
<p class="build-light-text append-bottom-0">
|
||||
{{ gitCommitTitlte }}
|
||||
</p>
|
||||
</div>
|
||||
</template>
|
5
changelogs/unreleased/50101-commit-block.yml
Normal file
5
changelogs/unreleased/50101-commit-block.yml
Normal file
|
@ -0,0 +1,5 @@
|
|||
---
|
||||
title: Creates vue component for commit block in job log page
|
||||
merge_request:
|
||||
author:
|
||||
type: other
|
73
spec/javascripts/jobs/commit_block_spec.js
Normal file
73
spec/javascripts/jobs/commit_block_spec.js
Normal file
|
@ -0,0 +1,73 @@
|
|||
import Vue from 'vue';
|
||||
import component from '~/jobs/components/commit_block.vue';
|
||||
import mountComponent from '../helpers/vue_mount_component_helper';
|
||||
|
||||
describe('Commit block', () => {
|
||||
const Component = Vue.extend(component);
|
||||
let vm;
|
||||
|
||||
const props = {
|
||||
pipelineShortSha: '1f0fb84f',
|
||||
pipelineShaPath: 'commit/1f0fb84fb6770d74d97eee58118fd3909cd4f48c',
|
||||
mergeRequestReference: '!21244',
|
||||
mergeRequestPath: 'merge_requests/21244',
|
||||
gitCommitTitlte: 'Regenerate pot files',
|
||||
};
|
||||
|
||||
afterEach(() => {
|
||||
vm.$destroy();
|
||||
});
|
||||
|
||||
describe('pipeline short sha', () => {
|
||||
beforeEach(() => {
|
||||
vm = mountComponent(Component, {
|
||||
...props,
|
||||
});
|
||||
});
|
||||
|
||||
it('renders pipeline short sha link', () => {
|
||||
expect(vm.$el.querySelector('.js-commit-sha').getAttribute('href')).toEqual(props.pipelineShaPath);
|
||||
expect(vm.$el.querySelector('.js-commit-sha').textContent.trim()).toEqual(props.pipelineShortSha);
|
||||
});
|
||||
|
||||
it('renders clipboard button', () => {
|
||||
expect(vm.$el.querySelector('button').getAttribute('data-clipboard-text')).toEqual(props.pipelineShortSha);
|
||||
});
|
||||
});
|
||||
|
||||
describe('with merge request', () => {
|
||||
it('renders merge request link and reference', () => {
|
||||
vm = mountComponent(Component, {
|
||||
...props,
|
||||
});
|
||||
|
||||
expect(vm.$el.querySelector('.js-link-commit').getAttribute('href')).toEqual(props.mergeRequestPath);
|
||||
expect(vm.$el.querySelector('.js-link-commit').textContent.trim()).toEqual(props.mergeRequestReference);
|
||||
|
||||
});
|
||||
});
|
||||
|
||||
describe('without merge request', () => {
|
||||
it('does not render merge request', () => {
|
||||
const copyProps = Object.assign({}, props);
|
||||
delete copyProps.mergeRequestPath;
|
||||
delete copyProps.mergeRequestReference;
|
||||
|
||||
vm = mountComponent(Component, {
|
||||
...copyProps,
|
||||
});
|
||||
|
||||
expect(vm.$el.querySelector('.js-link-commit')).toBeNull();
|
||||
});
|
||||
});
|
||||
|
||||
describe('git commit title', () => {
|
||||
it('renders git commit title', () => {
|
||||
vm = mountComponent(Component, {
|
||||
...props,
|
||||
});
|
||||
|
||||
expect(vm.$el.textContent).toContain(props.gitCommitTitlte);
|
||||
});
|
||||
});
|
||||
});
|
Loading…
Reference in a new issue