2021-03-11 19:13:27 +05:30
|
|
|
import { GlIcon, GlLink } from '@gitlab/ui';
|
|
|
|
import { shallowMount } from '@vue/test-utils';
|
2020-01-01 13:55:28 +05:30
|
|
|
import JobContainerItem from '~/jobs/components/job_container_item.vue';
|
2021-03-11 19:13:27 +05:30
|
|
|
import CiIcon from '~/vue_shared/components/ci_icon.vue';
|
2018-12-13 13:39:08 +05:30
|
|
|
import job from '../mock_data';
|
|
|
|
|
|
|
|
describe('JobContainerItem', () => {
|
2021-03-11 19:13:27 +05:30
|
|
|
let wrapper;
|
2018-12-13 13:39:08 +05:30
|
|
|
const delayedJobFixture = getJSONFixture('jobs/delayed.json');
|
2021-03-11 19:13:27 +05:30
|
|
|
|
|
|
|
const findCiIconComponent = () => wrapper.findComponent(CiIcon);
|
|
|
|
const findGlIconComponent = () => wrapper.findComponent(GlIcon);
|
|
|
|
|
|
|
|
function createComponent(jobData = {}, props = { isActive: false, retried: false }) {
|
|
|
|
wrapper = shallowMount(JobContainerItem, {
|
|
|
|
propsData: {
|
|
|
|
job: {
|
|
|
|
...jobData,
|
|
|
|
retried: props.retried,
|
|
|
|
},
|
|
|
|
isActive: props.isActive,
|
|
|
|
},
|
|
|
|
});
|
|
|
|
}
|
2018-12-13 13:39:08 +05:30
|
|
|
|
|
|
|
afterEach(() => {
|
2021-03-11 19:13:27 +05:30
|
|
|
wrapper.destroy();
|
|
|
|
wrapper = null;
|
2018-12-13 13:39:08 +05:30
|
|
|
});
|
|
|
|
|
2021-03-11 19:13:27 +05:30
|
|
|
describe('when a job is not active and not retried', () => {
|
|
|
|
beforeEach(() => {
|
|
|
|
createComponent(job);
|
|
|
|
});
|
|
|
|
|
2018-12-13 13:39:08 +05:30
|
|
|
it('displays a status icon', () => {
|
2021-03-11 19:13:27 +05:30
|
|
|
const ciIcon = findCiIconComponent();
|
|
|
|
|
|
|
|
expect(ciIcon.props('status')).toBe(job.status);
|
2018-12-13 13:39:08 +05:30
|
|
|
});
|
|
|
|
|
|
|
|
it('displays the job name', () => {
|
2021-03-11 19:13:27 +05:30
|
|
|
expect(wrapper.text()).toContain(job.name);
|
2018-12-13 13:39:08 +05:30
|
|
|
});
|
|
|
|
|
|
|
|
it('displays a link to the job', () => {
|
2021-03-11 19:13:27 +05:30
|
|
|
const link = wrapper.findComponent(GlLink);
|
2018-12-13 13:39:08 +05:30
|
|
|
|
2021-03-11 19:13:27 +05:30
|
|
|
expect(link.attributes('href')).toBe(job.status.details_path);
|
2018-12-13 13:39:08 +05:30
|
|
|
});
|
|
|
|
});
|
|
|
|
|
|
|
|
describe('when a job is active', () => {
|
|
|
|
beforeEach(() => {
|
2021-03-11 19:13:27 +05:30
|
|
|
createComponent(job, { isActive: true });
|
2018-12-13 13:39:08 +05:30
|
|
|
});
|
|
|
|
|
2021-03-11 19:13:27 +05:30
|
|
|
it('displays an arrow sprite icon', () => {
|
|
|
|
const icon = findGlIconComponent();
|
2018-12-13 13:39:08 +05:30
|
|
|
|
2021-03-11 19:13:27 +05:30
|
|
|
expect(icon.props('name')).toBe('arrow-right');
|
2018-12-13 13:39:08 +05:30
|
|
|
});
|
|
|
|
});
|
|
|
|
|
|
|
|
describe('when a job is retried', () => {
|
|
|
|
beforeEach(() => {
|
2021-03-11 19:13:27 +05:30
|
|
|
createComponent(job, { isActive: false, retried: true });
|
2018-12-13 13:39:08 +05:30
|
|
|
});
|
|
|
|
|
2021-03-11 19:13:27 +05:30
|
|
|
it('displays a retry icon', () => {
|
|
|
|
const icon = findGlIconComponent();
|
2018-12-13 13:39:08 +05:30
|
|
|
|
2021-03-11 19:13:27 +05:30
|
|
|
expect(icon.props('name')).toBe('retry');
|
2018-12-13 13:39:08 +05:30
|
|
|
});
|
|
|
|
});
|
|
|
|
|
2021-03-11 19:13:27 +05:30
|
|
|
describe('for a delayed job', () => {
|
2018-12-13 13:39:08 +05:30
|
|
|
beforeEach(() => {
|
|
|
|
const remainingMilliseconds = 1337000;
|
2020-05-24 23:13:21 +05:30
|
|
|
jest
|
|
|
|
.spyOn(Date, 'now')
|
|
|
|
.mockImplementation(
|
|
|
|
() => new Date(delayedJobFixture.scheduled_at).getTime() - remainingMilliseconds,
|
|
|
|
);
|
2021-03-11 19:13:27 +05:30
|
|
|
|
|
|
|
createComponent(delayedJobFixture);
|
2018-12-13 13:39:08 +05:30
|
|
|
});
|
|
|
|
|
2021-03-11 19:13:27 +05:30
|
|
|
it('displays remaining time in tooltip', async () => {
|
|
|
|
await wrapper.vm.$nextTick();
|
|
|
|
|
|
|
|
const link = wrapper.findComponent(GlLink);
|
|
|
|
|
|
|
|
expect(link.attributes('title')).toMatch('delayed job - delayed manual action (00:22:17)');
|
2018-12-13 13:39:08 +05:30
|
|
|
});
|
|
|
|
});
|
|
|
|
});
|