Commit 8312df80 authored by Filipa Lacerda's avatar Filipa Lacerda Committed by Phil Hughes

Creates vue component for artifacts block

parent 33539ccb
<script>
import TimeagoTooltiop from '~/vue_shared/components/time_ago_tooltip.vue';
export default {
components: {
TimeagoTooltiop,
},
props: {
// @build.artifacts_expired?
haveArtifactsExpired: {
type: Boolean,
required: true,
},
// @build.has_expiring_artifacts?
willArtifactsExpire: {
type: Boolean,
required: true,
},
expireAt: {
type: String,
required: false,
default: null,
},
keepArtifactsPath: {
type: String,
required: false,
default: null,
},
downloadArtifactsPath: {
type: String,
required: false,
default: null,
},
browseArtifactsPath: {
type: String,
required: false,
default: null,
},
},
};
</script>
<template>
<div class="block">
<div class="title">
{{ s__('Job|Job artifacts') }}
</div>
<p
v-if="haveArtifactsExpired"
class="js-artifacts-removed build-detail-row"
>
{{ s__('Job|The artifacts were removed') }}
</p>
<p
v-else-if="willArtifactsExpire"
class="js-artifacts-will-be-removed build-detail-row"
>
{{ s__('Job|The artifacts will be removed') }}
</p>
<timeago-tooltiop
v-if="expireAt"
:time="expireAt"
/>
<div
class="btn-group d-flex"
role="group"
>
<a
v-if="keepArtifactsPath"
:href="keepArtifactsPath"
class="js-keep-artifacts btn btn-sm btn-default"
data-method="post"
>
{{ s__('Job|Keep') }}
</a>
<a
v-if="downloadArtifactsPath"
:href="downloadArtifactsPath"
class="js-download-artifacts btn btn-sm btn-default"
download
rel="nofollow"
>
{{ s__('Job|Download') }}
</a>
<a
v-if="browseArtifactsPath"
:href="browseArtifactsPath"
class="js-browse-artifacts btn btn-sm btn-default"
>
{{ s__('Job|Browse') }}
</a>
</div>
</div>
</template>
---
title: Creates Vue component for artifacts block on job page
merge_request:
author:
type: other
......@@ -3139,12 +3139,30 @@ msgstr ""
msgid "Jobs"
msgstr ""
msgid "Job|Browse"
msgstr ""
msgid "Job|Download"
msgstr ""
msgid "Job|Job artifacts"
msgstr ""
msgid "Job|Job has been erased"
msgstr ""
msgid "Job|Job has been erased by"
msgstr ""
msgid "Job|Keep"
msgstr ""
msgid "Job|The artifacts were removed"
msgstr ""
msgid "Job|The artifacts will be removed"
msgstr ""
msgid "Jul"
msgstr ""
......
import Vue from 'vue';
import { getTimeago } from '~/lib/utils/datetime_utility';
import component from '~/jobs/components/artifacts_block.vue';
import mountComponent from '../helpers/vue_mount_component_helper';
describe('Artifacts block', () => {
const Component = Vue.extend(component);
let vm;
const expireAt = '2018-08-14T09:38:49.157Z';
const timeago = getTimeago();
const formatedDate = timeago.format(expireAt);
afterEach(() => {
vm.$destroy();
});
describe('with expired artifacts', () => {
it('renders expired artifact date and info', () => {
vm = mountComponent(Component, {
haveArtifactsExpired: true,
willArtifactsExpire: false,
expireAt,
});
expect(vm.$el.querySelector('.js-artifacts-removed')).not.toBeNull();
expect(vm.$el.querySelector('.js-artifacts-will-be-removed')).toBeNull();
expect(vm.$el.textContent).toContain(formatedDate);
});
});
describe('with artifacts that will expire', () => {
it('renders will expire artifact date and info', () => {
vm = mountComponent(Component, {
haveArtifactsExpired: false,
willArtifactsExpire: true,
expireAt,
});
expect(vm.$el.querySelector('.js-artifacts-removed')).toBeNull();
expect(vm.$el.querySelector('.js-artifacts-will-be-removed')).not.toBeNull();
expect(vm.$el.textContent).toContain(formatedDate);
});
});
describe('when the user can keep the artifacts', () => {
it('renders the keep button', () => {
vm = mountComponent(Component, {
haveArtifactsExpired: true,
willArtifactsExpire: false,
expireAt,
keepArtifactsPath: '/keep',
});
expect(vm.$el.querySelector('.js-keep-artifacts')).not.toBeNull();
});
});
describe('when the user can not keep the artifacts', () => {
it('does not render the keep button', () => {
vm = mountComponent(Component, {
haveArtifactsExpired: true,
willArtifactsExpire: false,
expireAt,
});
expect(vm.$el.querySelector('.js-keep-artifacts')).toBeNull();
});
});
describe('when the user can download the artifacts', () => {
it('renders the download button', () => {
vm = mountComponent(Component, {
haveArtifactsExpired: true,
willArtifactsExpire: false,
expireAt,
downloadArtifactsPath: '/download',
});
expect(vm.$el.querySelector('.js-download-artifacts')).not.toBeNull();
});
});
describe('when the user can not download the artifacts', () => {
it('does not render the keep button', () => {
vm = mountComponent(Component, {
haveArtifactsExpired: true,
willArtifactsExpire: false,
expireAt,
});
expect(vm.$el.querySelector('.js-download-artifacts')).toBeNull();
});
});
describe('when the user can browse the artifacts', () => {
it('does not render the browse button', () => {
vm = mountComponent(Component, {
haveArtifactsExpired: true,
willArtifactsExpire: false,
expireAt,
browseArtifactsPath: '/browse',
});
expect(vm.$el.querySelector('.js-browse-artifacts')).not.toBeNull();
});
});
describe('when the user can not browse the artifacts', () => {
it('does not render the browse button', () => {
vm = mountComponent(Component, {
haveArtifactsExpired: true,
willArtifactsExpire: false,
expireAt,
});
expect(vm.$el.querySelector('.js-browse-artifacts')).toBeNull();
});
});
});
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