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> <script>
import _ from 'underscore'; import JobContainerItem from './job_container_item.vue';
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 { export default {
components: { components: {
CiIcon, JobContainerItem,
Icon,
},
directives: {
tooltip,
}, },
props: { props: {
jobs: { jobs: {
type: Array, type: Array,
...@@ -26,49 +20,16 @@ export default { ...@@ -26,49 +20,16 @@ export default {
isJobActive(currentJobId) { isJobActive(currentJobId) {
return this.jobId === currentJobId; return this.jobId === currentJobId;
}, },
tooltipText(job) {
return `${_.escape(job.name)} - ${job.status.tooltip}`;
},
}, },
}; };
</script> </script>
<template> <template>
<div class="js-jobs-container builds-container"> <div class="js-jobs-container builds-container">
<div <job-container-item
v-for="job in jobs" v-for="job in jobs"
:key="job.id" :key="job.id"
class="build-job" :job="job"
:class="{ retried: job.retried, active: isJobActive(job.id) }" :is-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"
/>
</a>
</div>
</div> </div>
</template> </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(); const threeWeeksAgo = new Date();
threeWeeksAgo.setDate(threeWeeksAgo.getDate() - 21); threeWeeksAgo.setDate(threeWeeksAgo.getDate() - 21);
...@@ -19,7 +21,7 @@ export default { ...@@ -19,7 +21,7 @@ export default {
label: 'passed', label: 'passed',
group: 'success', group: 'success',
has_details: true, has_details: true,
details_path: '/root/ci-mock/-/jobs/4757', details_path: `${TEST_HOST}/root/ci-mock/-/jobs/4757`,
favicon: favicon:
'/assets/ci_favicons/favicon_status_success-308b4fc054cdd1b68d0865e6cfb7b02e92e3472f201507418f8eddb74ac11a59.png', '/assets/ci_favicons/favicon_status_success-308b4fc054cdd1b68d0865e6cfb7b02e92e3472f201507418f8eddb74ac11a59.png',
action: { 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