Commit 60405bd3 authored by Winnie Hellmann's avatar Winnie Hellmann Committed by Mike Greiling

Extract JobContainerItem component

parent 0518e63b
<script>
import _ from 'underscore';
import CiIcon from '~/vue_shared/components/ci_icon.vue';
import Icon from '~/vue_shared/components/icon.vue';
import tooltip from '~/vue_shared/directives/tooltip';
export default {
components: {
CiIcon,
Icon,
},
directives: {
tooltip,
},
props: {
job: {
type: Object,
required: true,
},
isActive: {
type: Boolean,
required: true,
},
},
computed: {
tooltipText() {
return `${_.escape(this.job.name)} - ${this.job.status.tooltip}`;
},
},
};
</script>
<template>
<div
class="build-job"
:class="{ retried: job.retried, active: isActive }"
>
<a
v-tooltip
:href="job.status.details_path"
:title="tooltipText"
data-container="body"
data-boundary="viewport"
class="js-job-link"
>
<icon
v-if="isActive"
name="arrow-right"
class="js-arrow-right icon-arrow-right"
/>
<ci-icon :status="job.status" />
<span>{{ job.name ? job.name : job.id }}</span>
<icon
v-if="job.retried"
name="retry"
class="js-retry-icon"
/>
</a>
</div>
</template>
<script>
import _ from 'underscore';
import CiIcon from '~/vue_shared/components/ci_icon.vue';
import Icon from '~/vue_shared/components/icon.vue';
import tooltip from '~/vue_shared/directives/tooltip';
import JobContainerItem from './job_container_item.vue';
export default {
components: {
CiIcon,
Icon,
},
directives: {
tooltip,
JobContainerItem,
},
props: {
jobs: {
type: Array,
......@@ -26,49 +20,16 @@ export default {
isJobActive(currentJobId) {
return this.jobId === currentJobId;
},
tooltipText(job) {
return `${_.escape(job.name)} - ${job.status.tooltip}`;
},
},
};
</script>
<template>
<div class="js-jobs-container builds-container">
<div
<job-container-item
v-for="job in jobs"
:key="job.id"
class="build-job"
:class="{ retried: job.retried, active: isJobActive(job.id) }"
>
<a
v-tooltip
:href="job.status.details_path"
:title="tooltipText(job)"
data-container="body"
>
<icon
v-if="isJobActive(job.id)"
name="arrow-right"
class="js-arrow-right icon-arrow-right"
/>
<ci-icon :status="job.status" />
<span>
<template v-if="job.name">
{{ job.name }}
</template>
<template v-else>
{{ job.id }}
</template>
</span>
<icon
v-if="job.retried"
name="retry"
class="js-retry-icon"
:job="job"
:is-active="isJobActive(job.id)"
/>
</a>
</div>
</div>
</template>
import Vue from 'vue';
import JobContainerItem from '~/jobs/components/job_container_item.vue';
import mountComponent from 'spec/helpers/vue_mount_component_helper';
import job from '../mock_data';
describe('JobContainerItem', () => {
const Component = Vue.extend(JobContainerItem);
let vm;
afterEach(() => {
vm.$destroy();
});
const sharedTests = () => {
it('displays a status icon', () => {
expect(vm.$el).toHaveSpriteIcon(job.status.icon);
});
it('displays the job name', () => {
expect(vm.$el).toContainText(job.name);
});
it('displays a link to the job', () => {
const link = vm.$el.querySelector('.js-job-link');
expect(link.href).toBe(job.status.details_path);
});
};
describe('when a job is not active and not retied', () => {
beforeEach(() => {
vm = mountComponent(Component, {
job,
isActive: false,
});
});
sharedTests();
});
describe('when a job is active', () => {
beforeEach(() => {
vm = mountComponent(Component, {
job,
isActive: true,
});
});
sharedTests();
it('displays an arrow', () => {
expect(vm.$el).toHaveSpriteIcon('arrow-right');
});
});
describe('when a job is retried', () => {
beforeEach(() => {
vm = mountComponent(Component, {
job: {
...job,
retried: true,
},
isActive: false,
});
});
sharedTests();
it('displays an icon', () => {
expect(vm.$el).toHaveSpriteIcon('retry');
});
});
});
import { TEST_HOST } from 'spec/test_constants';
const threeWeeksAgo = new Date();
threeWeeksAgo.setDate(threeWeeksAgo.getDate() - 21);
......@@ -19,7 +21,7 @@ export default {
label: 'passed',
group: 'success',
has_details: true,
details_path: '/root/ci-mock/-/jobs/4757',
details_path: `${TEST_HOST}/root/ci-mock/-/jobs/4757`,
favicon:
'/assets/ci_favicons/favicon_status_success-308b4fc054cdd1b68d0865e6cfb7b02e92e3472f201507418f8eddb74ac11a59.png',
action: {
......
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