gitlab-org--gitlab-foss/spec/frontend/jobs/components/table/cells/job_cell_spec.js

141 lines
4.3 KiB
JavaScript

import { shallowMount } from '@vue/test-utils';
import { extendedWrapper } from 'helpers/vue_test_utils_helper';
import { getIdFromGraphQLId } from '~/graphql_shared/utils';
import JobCell from '~/jobs/components/table/cells/job_cell.vue';
import { mockJobsInTable } from '../../../mock_data';
const mockJob = mockJobsInTable[0];
const mockJobCreatedByTag = mockJobsInTable[1];
const mockJobLimitedAccess = mockJobsInTable[2];
const mockStuckJob = mockJobsInTable[3];
describe('Job Cell', () => {
let wrapper;
const findJobIdLink = () => wrapper.findByTestId('job-id-link');
const findJobIdNoLink = () => wrapper.findByTestId('job-id-limited-access');
const findJobRef = () => wrapper.findByTestId('job-ref');
const findJobSha = () => wrapper.findByTestId('job-sha');
const findLabelIcon = () => wrapper.findByTestId('label-icon');
const findForkIcon = () => wrapper.findByTestId('fork-icon');
const findStuckIcon = () => wrapper.findByTestId('stuck-icon');
const findAllTagBadges = () => wrapper.findAllByTestId('job-tag-badge');
const findBadgeById = (id) => wrapper.findByTestId(id);
const createComponent = (jobData = mockJob) => {
wrapper = extendedWrapper(
shallowMount(JobCell, {
propsData: {
job: jobData,
},
}),
);
};
afterEach(() => {
wrapper.destroy();
});
describe('Job Id', () => {
it('displays the job id and links to the job', () => {
createComponent();
const expectedJobId = `#${getIdFromGraphQLId(mockJob.id)}`;
expect(findJobIdLink().text()).toBe(expectedJobId);
expect(findJobIdLink().attributes('href')).toBe(mockJob.detailedStatus.detailsPath);
expect(findJobIdNoLink().exists()).toBe(false);
});
it('display the job id with no link', () => {
createComponent(mockJobLimitedAccess);
const expectedJobId = `#${getIdFromGraphQLId(mockJobLimitedAccess.id)}`;
expect(findJobIdNoLink().text()).toBe(expectedJobId);
expect(findJobIdNoLink().exists()).toBe(true);
expect(findJobIdLink().exists()).toBe(false);
});
});
describe('Ref of the job', () => {
it('displays the ref name and links to the ref', () => {
createComponent();
expect(findJobRef().text()).toBe(mockJob.refName);
expect(findJobRef().attributes('href')).toBe(mockJob.refPath);
});
it('displays fork icon when job is not created by tag', () => {
createComponent();
expect(findForkIcon().exists()).toBe(true);
expect(findLabelIcon().exists()).toBe(false);
});
it('displays label icon when job is created by a tag', () => {
createComponent(mockJobCreatedByTag);
expect(findLabelIcon().exists()).toBe(true);
expect(findForkIcon().exists()).toBe(false);
});
});
describe('Commit of the job', () => {
beforeEach(() => {
createComponent();
});
it('displays the sha and links to the commit', () => {
expect(findJobSha().text()).toBe(mockJob.shortSha);
expect(findJobSha().attributes('href')).toBe(mockJob.commitPath);
});
});
describe('Job badges', () => {
it('displays tags of the job', () => {
const mockJobWithTags = {
tags: ['tag-1', 'tag-2', 'tag-3'],
};
createComponent(mockJobWithTags);
expect(findAllTagBadges()).toHaveLength(mockJobWithTags.tags.length);
});
it.each`
testId | text
${'manual-job-badge'} | ${'manual'}
${'triggered-job-badge'} | ${'triggered'}
${'fail-job-badge'} | ${'allowed to fail'}
${'delayed-job-badge'} | ${'delayed'}
`('displays the static $text badge', ({ testId, text }) => {
createComponent({
manualJob: true,
triggered: true,
allowFailure: true,
scheduledAt: '2021-03-09T14:58:50+00:00',
});
expect(findBadgeById(testId).exists()).toBe(true);
expect(findBadgeById(testId).text()).toBe(text);
});
});
describe('Job icons', () => {
it('stuck icon is not shown if job is not stuck', () => {
createComponent();
expect(findStuckIcon().exists()).toBe(false);
});
it('stuck icon is shown if job is stuck', () => {
createComponent(mockStuckJob);
expect(findStuckIcon().exists()).toBe(true);
expect(findStuckIcon().attributes('name')).toBe('warning');
});
});
});