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