Creates Vue component for trigger variables block in job log page

Regenerate pot files

Remove `#`

Remove empty lines
This commit is contained in:
Filipa Lacerda 2018-08-16 12:07:59 +01:00
parent ce18246c24
commit 0ade3a0755
4 changed files with 161 additions and 0 deletions

View file

@ -0,0 +1,84 @@
<script>
export default {
props: {
shortToken: {
type: String,
required: false,
default: null,
},
variables: {
type: Object,
required: false,
default: () => ({}),
},
},
data() {
return {
areVariablesVisible: false,
};
},
computed: {
hasVariables() {
return Object.keys(this.variables).length > 0;
},
},
methods: {
revealVariables() {
this.areVariablesVisible = true;
},
},
};
</script>
<template>
<div class="build-widget block">
<h4 class="title">
{{ __('Trigger') }}
</h4>
<p
v-if="shortToken"
class="js-short-token"
>
<span class="build-light-text">
{{ __('Token') }}
</span>
{{ shortToken }}
</p>
<p v-if="hasVariables">
<button
type="button"
class="btn btn-default group js-reveal-variables"
@click="revealVariables"
>
{{ __('Reveal Variables') }}
</button>
</p>
<dl
v-if="areVariablesVisible"
class="js-build-variables trigger-build-variables"
>
<template
v-for="(value, key) in variables"
>
<dt
:key="`${key}-variable`"
class="js-build-variable trigger-build-variable"
>
{{ key }}
</dt>
<dd
:key="`${key}-value`"
class="js-build-value trigger-build-value"
>
{{ value }}
</dd>
</template>
</dl>
</div>
</template>

View file

@ -0,0 +1,5 @@
---
title: Creates Vue component for trigger variables block in job log page
merge_request:
author:
type: other

View file

@ -4649,6 +4649,9 @@ msgstr ""
msgid "Retry verification"
msgstr ""
msgid "Reveal Variables"
msgstr ""
msgid "Reveal value"
msgid_plural "Reveal values"
msgstr[0] ""
@ -5784,6 +5787,9 @@ msgstr ""
msgid "Trending"
msgstr ""
msgid "Trigger"
msgstr ""
msgid "Trigger this manual action"
msgstr ""

View file

@ -0,0 +1,66 @@
import Vue from 'vue';
import component from '~/jobs/components/trigger_block.vue';
import mountComponent from '../helpers/vue_mount_component_helper';
describe('Trigger block', () => {
const Component = Vue.extend(component);
let vm;
afterEach(() => {
vm.$destroy();
});
describe('with short token', () => {
it('renders short token', () => {
vm = mountComponent(Component, {
shortToken: '0a666b2',
});
expect(vm.$el.querySelector('.js-short-token').textContent).toContain('0a666b2');
});
});
describe('without short token', () => {
it('does not render short token', () => {
vm = mountComponent(Component, {});
expect(vm.$el.querySelector('.js-short-token')).toBeNull();
});
});
describe('with variables', () => {
describe('reveal variables', () => {
it('reveals variables on click', done => {
vm = mountComponent(Component, {
variables: {
key: 'value',
variable: 'foo',
},
});
vm.$el.querySelector('.js-reveal-variables').click();
vm
.$nextTick()
.then(() => {
expect(vm.$el.querySelector('.js-build-variables')).not.toBeNull();
expect(vm.$el.querySelector('.js-build-variables').textContent).toContain('key');
expect(vm.$el.querySelector('.js-build-variables').textContent).toContain('value');
expect(vm.$el.querySelector('.js-build-variables').textContent).toContain('variable');
expect(vm.$el.querySelector('.js-build-variables').textContent).toContain('foo');
})
.then(done)
.catch(done.fail);
});
});
});
describe('without variables', () => {
it('does not render variables', () => {
vm = mountComponent(Component);
expect(vm.$el.querySelector('.js-reveal-variables')).toBeNull();
expect(vm.$el.querySelector('.js-build-variables')).toBeNull();
});
});
});