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 { mount } from '@vue/test-utils';
import { parseTOC } from '../../../../content/frontend/shared/toc/parse_toc';
import TableOfContentsList from '../../../../content/frontend/default/components/table_of_contents_list.vue';
import { createExampleToc } from '../../shared/toc_helper';
describe('frontend/default/components/table_of_contents_list', () => {
let wrapper;
const createComponent = (props = {}) => {
wrapper = mount(TableOfContentsList, {
propsData: {
...props,
},
});
};
const findItemsData = () => parseTOC(wrapper.element);
const findLinks = () => wrapper.findAll('a');
const findListItems = () => wrapper.findAll('li');
afterEach(() => {
wrapper.destroy();
wrapper = null;
});
describe('with items', () => {
let items;
beforeEach(() => {
items = createExampleToc();
createComponent({ items });
});
it('renders all items', () => {
expect(findItemsData()).toEqual(items);
});
it('starts at level 0', () => {
expect(findLinks().at(0).classes('toc-level-0')).toBe(true);
});
});
describe('with empty items', () => {
beforeEach(() => {
createComponent({ items: [] });
});
it('shows empty ul', () => {
expect(wrapper.element).toMatchSnapshot();
});
});
describe('with level', () => {
beforeEach(() => {
createComponent({
items: [
{
text: 'A',
items: [{ text: 'A_1' }, { text: 'A_2' }],
},
{
text: 'B',
level: 1,
items: [{ text: 'B_1', items: [{ text: 'B_1_1' }] }],
},
],
level: 1,
});
});
it('increments levels for nested lists', () => {
// Order isn't important. We just want to find the link + level class mapping
const data = findLinks().wrappers.reduce(
(acc, link) =>
Object.assign(acc, {
[link.text()]: link.classes().find((x) => x.startsWith('toc-level')),
}),
{},
);
expect(data).toEqual({
A: 'toc-level-1',
A_1: 'toc-level-2',
A_2: 'toc-level-2',
B: 'toc-level-2',
B_1: 'toc-level-3',
B_1_1: 'toc-level-4',
});
});
});
describe('with separator', () => {
beforeEach(() => {
createComponent({
items: [
{
text: 'Lorem',
},
{
text: 'Ipsum',
withSeparator: true,
},
],
});
});
it('has separator class for separator item', () => {
const data = findListItems().wrappers.map((x) => ({
text: x.text(),
hasSeparator: x.classes('toc-separator'),
}));
expect(data).toEqual([
{ text: 'Lorem', hasSeparator: false },
{ text: 'Ipsum', hasSeparator: true },
]);
});
});
});
|
