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 { nextTick } from 'vue';
import { renderJSONTable } from '~/behaviors/markdown/render_json_table';
describe('behaviors/markdown/render_json_table', () => {
let element;
const TEST_DATA = {
fields: [
{ label: 'Field 1', key: 'a' },
{ label: 'F 2', key: 'b' },
{ label: 'F 3', key: 'c' },
],
items: [
{
a: '1',
b: 'b',
c: 'c',
},
{
a: '2',
b: 'd',
c: 'e',
},
],
};
const TEST_LABELS = TEST_DATA.fields.map((x) => x.label);
const tableAsData = (table) => ({
head: Array.from(table.querySelectorAll('thead th')).map((td) => td.textContent),
body: Array.from(table.querySelectorAll('tbody > tr')).map((tr) =>
Array.from(tr.querySelectorAll('td')).map((x) => x.textContent),
),
});
const createTestSubject = async (json) => {
if (element) {
throw new Error('element has already been initialized');
}
const parent = document.createElement('div');
const pre = document.createElement('pre');
pre.textContent = json;
parent.appendChild(pre);
document.body.appendChild(parent);
renderJSONTable([parent]);
element = parent;
jest.runAllTimers();
await nextTick();
};
const findPres = () => document.querySelectorAll('pre');
const findTables = () => document.querySelectorAll('table');
const findAlerts = () => document.querySelectorAll('.gl-alert');
const findInputs = () => document.querySelectorAll('.gl-form-input');
afterEach(() => {
document.body.innerHTML = '';
element = null;
});
describe('default', () => {
beforeEach(async () => {
await createTestSubject(JSON.stringify(TEST_DATA, null, 2));
});
it('removes pre', () => {
expect(findPres()).toHaveLength(0);
});
it('replaces pre with table', () => {
const tables = findTables();
expect(tables).toHaveLength(1);
expect(tableAsData(tables[0])).toEqual({
head: TEST_LABELS,
body: [
['1', 'b', 'c'],
['2', 'd', 'e'],
],
});
});
it('does not show filter', () => {
expect(findInputs()).toHaveLength(0);
});
});
describe('with invalid json', () => {
beforeEach(() => {
createTestSubject('funky but not json');
});
it('preserves pre', () => {
expect(findPres()).toHaveLength(1);
});
it('shows alert', () => {
const alerts = findAlerts();
expect(alerts).toHaveLength(1);
expect(alerts[0].textContent).toMatchInterpolatedText('Unable to parse JSON');
});
});
describe('with filter set', () => {
beforeEach(() => {
createTestSubject(JSON.stringify({ ...TEST_DATA, filter: true }));
});
it('shows filter', () => {
expect(findInputs()).toHaveLength(1);
});
});
});
|
