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
|
import { nextTick } from 'vue';
import { mountExtended } from 'helpers/vue_test_utils_helper';
import TracingTableList from '~/tracing/components/tracing_table_list.vue';
describe('TracingTableList', () => {
let wrapper;
const mockTraces = [
{
timestamp: '2023-07-10T15:02:30.677538Z',
service_name: 'tracegen',
operation: 'lets-go',
duration: 150,
},
{
timestamp: '2023-07-10T15:02:30.677538Z',
service_name: 'tracegen',
operation: 'lets-go',
duration: 200,
},
];
const mountComponent = ({ traces = mockTraces } = {}) => {
wrapper = mountExtended(TracingTableList, {
propsData: {
traces,
},
});
};
const getRows = () => wrapper.findComponent({ name: 'GlTable' }).find('tbody').findAll('tr');
const getRow = (idx) => getRows().at(idx);
const getCells = (trIdx) => getRows().at(trIdx).findAll('td');
const getCell = (trIdx, tdIdx) => {
return getCells(trIdx).at(tdIdx);
};
const selectRow = async (idx) => {
getRow(idx).trigger('click');
await nextTick();
};
it('renders traces as table', () => {
mountComponent();
const rows = wrapper.findAll('table tbody tr');
expect(rows.length).toBe(mockTraces.length);
mockTraces.forEach((trace, i) => {
expect(getCells(i).length).toBe(4);
expect(getCell(i, 0).text()).toBe(trace.timestamp);
expect(getCell(i, 1).text()).toBe(trace.service_name);
expect(getCell(i, 2).text()).toBe(trace.operation);
expect(getCell(i, 3).text()).toBe(`${trace.duration} ms`);
});
});
it('emits trace-selected on row selection', async () => {
mountComponent();
await selectRow(0);
expect(wrapper.emitted('trace-selected')).toHaveLength(1);
expect(wrapper.emitted('trace-selected')[0][0]).toBe(mockTraces[0]);
});
it('renders the empty state when no traces are provided', () => {
mountComponent({ traces: [] });
expect(getCell(0, 0).text()).toContain('No traces to display');
const link = getCell(0, 0).findComponent({ name: 'GlLink' });
expect(link.text()).toBe('Check again');
link.trigger('click');
expect(wrapper.emitted('reload')).toHaveLength(1);
});
});
|