1 |
|
2 | import mermaid from './mermaid'
|
3 | import flowDb from './diagrams/flowchart/flowDb'
|
4 | import flowParser from './diagrams/flowchart/parser/flow'
|
5 | import flowRenderer from './diagrams/flowchart/flowRenderer'
|
6 |
|
7 | describe('when using mermaid and ', function () {
|
8 | describe('when detecting chart type ', function () {
|
9 | it('should not start rendering with mermaid.startOnLoad set to false', function () {
|
10 | mermaid.startOnLoad = false
|
11 | document.body.innerHTML = '<div class="mermaid">graph TD;\na;</div>'
|
12 | spyOn(mermaid, 'init')
|
13 | mermaid.contentLoaded()
|
14 | expect(mermaid.init).not.toHaveBeenCalled()
|
15 | })
|
16 |
|
17 | it('should start rendering with both startOnLoad set', function () {
|
18 | mermaid.startOnLoad = true
|
19 | document.body.innerHTML = '<div class="mermaid">graph TD;\na;</div>'
|
20 | spyOn(mermaid, 'init')
|
21 | mermaid.contentLoaded()
|
22 | expect(mermaid.init).toHaveBeenCalled()
|
23 | })
|
24 |
|
25 | it('should start rendering with mermaid.startOnLoad', function () {
|
26 | mermaid.startOnLoad = true
|
27 | document.body.innerHTML = '<div class="mermaid">graph TD;\na;</div>'
|
28 | spyOn(mermaid, 'init')
|
29 | mermaid.contentLoaded()
|
30 | expect(mermaid.init).toHaveBeenCalled()
|
31 | })
|
32 |
|
33 | it('should start rendering as a default with no changes performed', function () {
|
34 | document.body.innerHTML = '<div class="mermaid">graph TD;\na;</div>'
|
35 | spyOn(mermaid, 'init')
|
36 | mermaid.contentLoaded()
|
37 | expect(mermaid.init).toHaveBeenCalled()
|
38 | })
|
39 | })
|
40 |
|
41 | describe('when calling addEdges ', function () {
|
42 | beforeEach(function () {
|
43 | flowParser.parser.yy = flowDb
|
44 | flowDb.clear()
|
45 | })
|
46 | it('it should handle edges with text', function () {
|
47 | flowParser.parser.parse('graph TD;A-->|text ex|B;')
|
48 | flowParser.parser.yy.getVertices()
|
49 | const edges = flowParser.parser.yy.getEdges()
|
50 |
|
51 | const mockG = {
|
52 | setEdge: function (start, end, options) {
|
53 | expect(start).toBe('A')
|
54 | expect(end).toBe('B')
|
55 | expect(options.arrowhead).toBe('normal')
|
56 | expect(options.label.match('text ex')).toBeTruthy()
|
57 | }
|
58 | }
|
59 |
|
60 | flowRenderer.addEdges(edges, mockG)
|
61 | })
|
62 |
|
63 | it('should handle edges without text', function () {
|
64 | flowParser.parser.parse('graph TD;A-->B;')
|
65 | flowParser.parser.yy.getVertices()
|
66 | const edges = flowParser.parser.yy.getEdges()
|
67 |
|
68 | const mockG = {
|
69 | setEdge: function (start, end, options) {
|
70 | expect(start).toBe('A')
|
71 | expect(end).toBe('B')
|
72 | expect(options.arrowhead).toBe('normal')
|
73 | }
|
74 | }
|
75 |
|
76 | flowRenderer.addEdges(edges, mockG)
|
77 | })
|
78 |
|
79 | it('should handle open-ended edges', function () {
|
80 | flowParser.parser.parse('graph TD;A---B;')
|
81 | flowParser.parser.yy.getVertices()
|
82 | const edges = flowParser.parser.yy.getEdges()
|
83 |
|
84 | const mockG = {
|
85 | setEdge: function (start, end, options) {
|
86 | expect(start).toBe('A')
|
87 | expect(end).toBe('B')
|
88 | expect(options.arrowhead).toBe('none')
|
89 | }
|
90 | }
|
91 |
|
92 | flowRenderer.addEdges(edges, mockG)
|
93 | })
|
94 |
|
95 | it('should handle edges with styles defined', function () {
|
96 | flowParser.parser.parse('graph TD;A---B; linkStyle 0 stroke:val1,stroke-width:val2;')
|
97 | flowParser.parser.yy.getVertices()
|
98 | const edges = flowParser.parser.yy.getEdges()
|
99 |
|
100 | const mockG = {
|
101 | setEdge: function (start, end, options) {
|
102 | expect(start).toBe('A')
|
103 | expect(end).toBe('B')
|
104 | expect(options.arrowhead).toBe('none')
|
105 | expect(options.style).toBe('stroke:val1;stroke-width:val2;fill:none;')
|
106 | }
|
107 | }
|
108 |
|
109 | flowRenderer.addEdges(edges, mockG)
|
110 | })
|
111 | it('should handle edges with interpolation defined', function () {
|
112 | flowParser.parser.parse('graph TD;A---B; linkStyle 0 interpolate basis')
|
113 | flowParser.parser.yy.getVertices()
|
114 | const edges = flowParser.parser.yy.getEdges()
|
115 |
|
116 | const mockG = {
|
117 | setEdge: function (start, end, options) {
|
118 | expect(start).toBe('A')
|
119 | expect(end).toBe('B')
|
120 | expect(options.arrowhead).toBe('none')
|
121 | expect(options.curve).toBe('basis')
|
122 | }
|
123 | }
|
124 |
|
125 | flowRenderer.addEdges(edges, mockG)
|
126 | })
|
127 | it('should handle edges with text and styles defined', function () {
|
128 | flowParser.parser.parse('graph TD;A---|the text|B; linkStyle 0 stroke:val1,stroke-width:val2;')
|
129 | flowParser.parser.yy.getVertices()
|
130 | const edges = flowParser.parser.yy.getEdges()
|
131 |
|
132 | const mockG = {
|
133 | setEdge: function (start, end, options) {
|
134 | expect(start).toBe('A')
|
135 | expect(end).toBe('B')
|
136 | expect(options.arrowhead).toBe('none')
|
137 | expect(options.label.match('the text')).toBeTruthy()
|
138 | expect(options.style).toBe('stroke:val1;stroke-width:val2;fill:none;')
|
139 | }
|
140 | }
|
141 |
|
142 | flowRenderer.addEdges(edges, mockG)
|
143 | })
|
144 |
|
145 | it('should set fill to "none" by default when handling edges', function () {
|
146 | flowParser.parser.parse('graph TD;A---B; linkStyle 0 stroke:val1,stroke-width:val2;')
|
147 | flowParser.parser.yy.getVertices()
|
148 | const edges = flowParser.parser.yy.getEdges()
|
149 |
|
150 | const mockG = {
|
151 | setEdge: function (start, end, options) {
|
152 | expect(start).toBe('A')
|
153 | expect(end).toBe('B')
|
154 | expect(options.arrowhead).toBe('none')
|
155 | expect(options.style).toBe('stroke:val1;stroke-width:val2;fill:none;')
|
156 | }
|
157 | }
|
158 |
|
159 | flowRenderer.addEdges(edges, mockG)
|
160 | })
|
161 |
|
162 | it('should not set fill to none if fill is set in linkStyle', function () {
|
163 | flowParser.parser.parse('graph TD;A---B; linkStyle 0 stroke:val1,stroke-width:val2,fill:blue;')
|
164 | flowParser.parser.yy.getVertices()
|
165 | const edges = flowParser.parser.yy.getEdges()
|
166 | const mockG = {
|
167 | setEdge: function (start, end, options) {
|
168 | expect(start).toBe('A')
|
169 | expect(end).toBe('B')
|
170 | expect(options.arrowhead).toBe('none')
|
171 | expect(options.style).toBe('stroke:val1;stroke-width:val2;fill:blue;')
|
172 | }
|
173 | }
|
174 |
|
175 | flowRenderer.addEdges(edges, mockG)
|
176 | })
|
177 | })
|
178 |
|
179 | describe('checking validity of input ', function () {
|
180 | it('it should throw for an invalid definiton', function () {
|
181 | expect(() => mermaid.parse('this is not a mermaid diagram definition')).toThrow()
|
182 | })
|
183 |
|
184 | it('it should not throw for a valid flow definition', function () {
|
185 | expect(() => mermaid.parse('graph TD;A--x|text including URL space|B;')).not.toThrow()
|
186 | })
|
187 | it('it should throw for an invalid flow definition', function () {
|
188 | expect(() => mermaid.parse('graph TQ;A--x|text including URL space|B;')).toThrow()
|
189 | })
|
190 |
|
191 | it('it should not throw for a valid sequenceDiagram definition', function () {
|
192 | const text = 'sequenceDiagram\n' +
|
193 | 'Alice->Bob: Hello Bob, how are you?\n\n' +
|
194 | '%% Comment\n' +
|
195 | 'Note right of Bob: Bob thinks\n' +
|
196 | 'alt isWell\n\n' +
|
197 | 'Bob-->Alice: I am good thanks!\n' +
|
198 | 'else isSick\n' +
|
199 | 'Bob-->Alice: Feel sick...\n' +
|
200 | 'end'
|
201 | expect(() => mermaid.parse(text)).not.toThrow()
|
202 | })
|
203 |
|
204 | it('it should throw for an invalid sequenceDiagram definition', function () {
|
205 | const text = 'sequenceDiagram\n' +
|
206 | 'Alice:->Bob: Hello Bob, how are you?\n\n' +
|
207 | '%% Comment\n' +
|
208 | 'Note right of Bob: Bob thinks\n' +
|
209 | 'alt isWell\n\n' +
|
210 | 'Bob-->Alice: I am good thanks!\n' +
|
211 | 'else isSick\n' +
|
212 | 'Bob-->Alice: Feel sick...\n' +
|
213 | 'end'
|
214 | expect(() => mermaid.parse(text)).toThrow()
|
215 | })
|
216 | })
|
217 | })
|