5.0 KB278 lines
Blame
1import { imgSnapshotTest } from '../../helpers/util.ts';
2
3/**
4 * Check whether the SVG Element has a Mindmap root
5 *
6 * Sometimes, Cypress takes a snapshot before the mermaid mindmap has finished
7 * generating the SVG.
8 *
9 * @param $p - The element to check.
10 */
11function shouldHaveRoot($p: JQuery<SVGSVGElement>) {
12 // get HTML Element from jquery element
13 const svgElement = $p[0];
14 expect(svgElement.nodeName).equal('svg');
15
16 const sectionRoots = svgElement.getElementsByClassName('mindmap-node section-root');
17 // mindmap should have at least one root section
18 expect(sectionRoots).to.have.lengthOf.at.least(1);
19}
20
21describe('Mindmaps', () => {
22 it('Only a root', () => {
23 imgSnapshotTest(
24 `mindmap
25root
26 `,
27 {},
28 undefined,
29 shouldHaveRoot
30 );
31 });
32
33 it('a root with a shape', () => {
34 imgSnapshotTest(
35 `mindmap
36root[root]
37 `,
38 {},
39 undefined,
40 shouldHaveRoot
41 );
42 });
43
44 it('a root with wrapping text and a shape', () => {
45 imgSnapshotTest(
46 `mindmap
47root[A root with a long text that wraps to keep the node size in check]
48 `,
49 {},
50 undefined,
51 shouldHaveRoot
52 );
53 });
54
55 it('a root with wrapping text and long words that exceed width', () => {
56 imgSnapshotTest(
57 `mindmap
58root[A few smaller words but then averylongsetofcharacterswithoutwhitespacetoseparate that we expect to wrapontonextlinesandnotexceedwidthparameters]
59 `,
60 {},
61 undefined,
62 shouldHaveRoot
63 );
64 });
65
66 it('a root with an icon', () => {
67 imgSnapshotTest(
68 `mindmap
69root[root]
70::icon(mdi mdi-fire)
71 `,
72 {},
73 undefined,
74 shouldHaveRoot
75 );
76 });
77
78 it('Blang and cloud shape', () => {
79 imgSnapshotTest(
80 `mindmap
81root))bang((
82 ::icon(mdi mdi-fire)
83 a))Another bang((
84 ::icon(mdi mdi-fire)
85 a)A cloud(
86 ::icon(mdi mdi-fire)
87 `,
88 {},
89 undefined,
90 shouldHaveRoot
91 );
92 });
93
94 it('Blang and cloud shape with icons', () => {
95 imgSnapshotTest(
96 `mindmap
97root))bang((
98
99 a))Another bang((
100 a)A cloud(
101 `,
102 {},
103 undefined,
104 shouldHaveRoot
105 );
106 });
107
108 it('braches', () => {
109 imgSnapshotTest(
110 `mindmap
111root
112 child1
113 grandchild 1
114 grandchild 2
115 child2
116 grandchild 3
117 grandchild 4
118 child3
119 grandchild 5
120 grandchild 6
121 `,
122 {},
123 undefined,
124 shouldHaveRoot
125 );
126 });
127
128 it('braches with shapes and labels', () => {
129 imgSnapshotTest(
130 `mindmap
131root
132 child1((Circle))
133 grandchild 1
134 grandchild 2
135 child2(Round rectangle)
136 grandchild 3
137 grandchild 4
138 child3[Square]
139 grandchild 5
140 ::icon(mdi mdi-fire)
141 gc6((grand<br/>child 6))
142 ::icon(mdi mdi-fire)
143 `,
144 {},
145 undefined,
146 shouldHaveRoot
147 );
148 });
149 it('text should wrap with icon', () => {
150 imgSnapshotTest(
151 `mindmap
152root
153 Child3(A node with an icon and with a long text that wraps to keep the node size in check)
154 `,
155 {},
156 undefined,
157 shouldHaveRoot
158 );
159 });
160 it('square shape', () => {
161 imgSnapshotTest(
162 `mindmap
163 root[
164 The root
165 ]`,
166 {},
167 undefined,
168 shouldHaveRoot
169 );
170 });
171 it('rounded rect shape', () => {
172 imgSnapshotTest(
173 `mindmap
174 root((
175 The root
176 ))`,
177 {},
178 undefined,
179 shouldHaveRoot
180 );
181 });
182 it('circle shape', () => {
183 imgSnapshotTest(
184 `mindmap
185 root(
186 The root
187 )`,
188 {},
189 undefined,
190 shouldHaveRoot
191 );
192 });
193 it('default shape', () => {
194 imgSnapshotTest(
195 `mindmap
196 The root`,
197 {},
198 undefined,
199 shouldHaveRoot
200 );
201 });
202 it('adding children', () => {
203 imgSnapshotTest(
204 `mindmap
205 The root
206 child1
207 child2`,
208 {},
209 undefined,
210 shouldHaveRoot
211 );
212 });
213 it('adding grand children', () => {
214 imgSnapshotTest(
215 `mindmap
216 The root
217 child1
218 child2
219 child3`,
220 {},
221 undefined,
222 shouldHaveRoot
223 );
224 });
225 describe('Markdown strings mindmaps (#4220)', () => {
226 it('Formatted label with linebreak and a wrapping label and emojis', () => {
227 imgSnapshotTest(
228 `mindmap
229 id1[\`**Start** with
230 a second line 😎\`]
231 id2[\`The dog in **the** hog... a *very long text* about it Word!\`]`
232 );
233 });
234 });
235 describe('Include char sequence "graph" in text (#6795)', () => {
236 it('has a label with char sequence "graph"', () => {
237 imgSnapshotTest(
238 ` mindmap
239 root
240 Photograph
241 Waterfall
242 Landscape
243 Geography
244 Mountains
245 Rocks`,
246 { flowchart: { defaultRenderer: 'elk' } }
247 );
248 });
249 });
250 describe('Level 2 nodes exceeding 11', () => {
251 it('should render all Level 2 nodes correctly when there are more than 11', () => {
252 imgSnapshotTest(
253 `mindmap
254root
255 Node1
256 Node2
257 Node3
258 Node4
259 Node5
260 Node6
261 Node7
262 Node8
263 Node9
264 Node10
265 Node11
266 Node12
267 Node13
268 Node14
269 Node15`,
270 {},
271 undefined,
272 shouldHaveRoot
273 );
274 });
275 });
276 /* The end */
277});
278