1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
|
import { GlTableLite } from '@gitlab/ui';
import {
extendedWrapper,
shallowMountExtended,
mountExtended,
} from 'helpers/vue_test_utils_helper';
import { __, s__ } from '~/locale';
import { getIdFromGraphQLId } from '~/graphql_shared/utils';
import RunnerJobsTable from '~/runner/components/runner_jobs_table.vue';
import { useFakeDate } from 'helpers/fake_date';
import { runnerJobsData } from '../mock_data';
const mockJobs = runnerJobsData.data.runner.jobs.nodes;
describe('RunnerJobsTable', () => {
let wrapper;
const mockNow = '2021-01-15T12:00:00Z';
const mockOneHourAgo = '2021-01-15T11:00:00Z';
useFakeDate(mockNow);
const findTable = () => wrapper.findComponent(GlTableLite);
const findHeaders = () => wrapper.findAll('th');
const findRows = () => wrapper.findAll('[data-testid^="job-row-"]');
const findCell = ({ field }) =>
extendedWrapper(findRows().at(0).find(`[data-testid="td-${field}"]`));
const createComponent = ({ props = {} } = {}, mountFn = shallowMountExtended) => {
wrapper = mountFn(RunnerJobsTable, {
propsData: {
jobs: mockJobs,
...props,
},
stubs: {
GlTableLite,
},
});
};
afterEach(() => {
wrapper.destroy();
});
it('Sets job id as a row key', () => {
createComponent();
expect(findTable().attributes('primarykey')).toBe('id');
});
describe('Table data', () => {
beforeEach(() => {
createComponent({}, mountExtended);
});
it('Displays headers', () => {
const headerLabels = findHeaders().wrappers.map((w) => w.text());
expect(headerLabels).toEqual([
s__('Job|Status'),
__('Job'),
__('Project'),
__('Commit'),
s__('Job|Finished at'),
s__('Runners|Tags'),
]);
});
it('Displays a list of jobs', () => {
expect(findRows()).toHaveLength(1);
});
it('Displays details of a job', () => {
const { id, detailedStatus, pipeline, shortSha, commitPath } = mockJobs[0];
expect(findCell({ field: 'status' }).text()).toMatchInterpolatedText(detailedStatus.text);
expect(findCell({ field: 'job' }).text()).toContain(`#${getIdFromGraphQLId(id)}`);
expect(findCell({ field: 'job' }).find('a').attributes('href')).toBe(
detailedStatus.detailsPath,
);
expect(findCell({ field: 'project' }).text()).toBe(pipeline.project.name);
expect(findCell({ field: 'project' }).find('a').attributes('href')).toBe(
pipeline.project.webUrl,
);
expect(findCell({ field: 'commit' }).text()).toBe(shortSha);
expect(findCell({ field: 'commit' }).find('a').attributes('href')).toBe(commitPath);
});
});
describe('Table data formatting', () => {
let mockJobsCopy;
beforeEach(() => {
mockJobsCopy = [
{
...mockJobs[0],
},
];
});
it('Formats finishedAt time', () => {
mockJobsCopy[0].finishedAt = mockOneHourAgo;
createComponent({ props: { jobs: mockJobsCopy } }, mountExtended);
expect(findCell({ field: 'finished_at' }).text()).toBe('1 hour ago');
});
it('Formats tags', () => {
mockJobsCopy[0].tags = ['tag-1', 'tag-2'];
createComponent({ props: { jobs: mockJobsCopy } }, mountExtended);
expect(findCell({ field: 'tags' }).text()).toMatchInterpolatedText('tag-1 tag-2');
});
});
});
|
