9.1 KB322 lines
Blame
1import { imgSnapshotTest } from '../../helpers/util.ts';
2
3describe('themeCSS balancing, it', () => {
4 it('should not allow unbalanced CSS definitions', () => {
5 imgSnapshotTest(
6 `
7 %%{init: { 'themeCSS': '} * { background: red }' } }%%
8 flowchart TD
9 a --> b
10 `,
11 {}
12 );
13 });
14 it('should not allow unbalanced CSS definitions 2', () => {
15 imgSnapshotTest(
16 `
17 %%{init: { 'themeCSS': '\u007D * { background: red }' } }%%
18 flowchart TD
19 a2 --> b2
20 `,
21 {}
22 );
23 });
24});
25
26// TODO: Delete/Rename this describe, keeping the inner contents.
27describe('Pie Chart', () => {
28 // beforeEach(()=>{
29 // cy.clock((new Date('2014-06-09')).getTime());
30 // });
31
32 ['default', 'forest', 'dark', 'neutral'].forEach((theme) => {
33 describe(theme, () => {
34 it('should render a pie diagram', () => {
35 imgSnapshotTest(
36 `
37 pie title Sports in Sweden
38 accTitle: This is a title
39 accDescr: This is a description
40 "Bandy" : 40
41 "Ice-Hockey" : 80
42 "Football" : 90
43 `,
44 { theme }
45 );
46 });
47 it('should render a flowchart diagram', () => {
48 imgSnapshotTest(
49 `
50 %%{init: { 'logLevel': 0} }%%
51 graph TD
52 accTitle: This is a title
53 accDescr: This is a description
54 A[Christmas] -->|Get money| B(Go shopping)
55 B --> C{Let me think}
56 B --> G[/Another/]
57 C ==>|One| D[Laptop]
58 C -->|Two| E[iPhone]
59 C -->|Three| F[fa:fa-car Car]
60 subgraph section
61 C
62 D
63 E
64 F
65 G
66 end
67 `,
68 { theme }
69 );
70 });
71 it('should render a new flowchart diagram', () => {
72 imgSnapshotTest(
73 `
74 %%{init: { 'logLevel': 0, 'theme': '${theme}'} }%%
75 flowchart TD
76 accTitle: This is a title
77 accDescr: This is a description
78
79 A[Christmas] -->|Get money| B(Go shopping)
80 B --> C{Let me think}
81 B --> G[Another]
82 C ==>|One| D[Laptop]
83 C x--x|Two| E[iPhone]
84 C o--o|Three| F[fa:fa-car Car]
85 subgraph section
86 C
87 D
88 E
89 F
90 G
91 end
92 `,
93 { theme }
94 );
95 });
96 it('should render a sequence diagram', () => {
97 imgSnapshotTest(
98 `
99 %%{init: { 'logLevel': 0, 'theme': '${theme}'} }%%
100 sequenceDiagram
101 accTitle: This is a title
102 accDescr: This is a description
103
104 autonumber
105 par Action 1
106 Alice->>John: Hello John, how are you?
107 and Action 2
108 Alice->>Bob: Hello Bob, how are you?
109 end
110 Alice->>+John: Hello John, how are you?
111 Alice->>+John: John, can you hear me?
112 John-->>-Alice: Hi Alice, I can hear you!
113 Note right of John: John is perceptive
114 John-->>-Alice: I feel great!
115 loop Every minute
116 John-->Alice: Great!
117 end
118
119
120 `,
121 { theme }
122 );
123 });
124
125 it('should render a class diagram', () => {
126 imgSnapshotTest(
127 `
128 %%{init: { 'logLevel': 0, 'theme': '${theme}'} }%%
129 classDiagram
130 accTitle: This is a title
131 accDescr: This is a description
132
133 Animal "*" <|-- "1" Duck
134 Animal "1" <|-- "10" Fish
135 Animal <|-- Zebra
136 Animal : +int age
137 Animal : +String gender
138 Animal: +isMammal()
139 Animal: +mate()
140 class Duck{
141 +String beakColor
142 +swim()
143 +quack()
144 }
145 class Fish{
146 -int sizeInFeet
147 -canEat()
148 }
149 class Zebra{
150 +bool is_wild
151 +run()
152 }
153 classA <|-- classB
154 classC *-- classD
155 classE o-- classF
156 classG <-- classH
157 classI -- classJ
158 classK <.. classL
159 classM <|.. classN
160 classO .. classP
161 classA --|> classB : Inheritance
162 classC --* classD : Composition
163 classE --o classF : Aggregation
164 classG --> classH : Association
165 classI -- classJ : Link(Solid)
166 classK ..> classL : Dependency
167 classM ..|> classN : Realization
168 classO .. classP : Link(Dashed)
169 `,
170 { theme }
171 );
172 });
173 it('should render a state diagram', () => {
174 imgSnapshotTest(
175 `
176 %%{init: { 'logLevel': 0, 'theme': '${theme}'} }%%
177stateDiagram
178 accTitle: This is a title
179 accDescr: This is a description
180
181 [*] --> Active
182
183 state Active {
184 [*] --> NumLockOff
185 NumLockOff --> NumLockOn : EvNumLockPressed
186 NumLockOn --> NumLockOff : EvNumLockPressed
187 --
188 [*] --> CapsLockOff
189 CapsLockOff --> CapsLockOn : EvCapsLockPressed
190 CapsLockOn --> CapsLockOff : EvCapsLockPressed
191 --
192 [*] --> ScrollLockOff
193 ScrollLockOff --> ScrollLockOn : EvCapsLockPressed
194 ScrollLockOn --> ScrollLockOff : EvCapsLockPressed
195 }
196 state SomethingElse {
197 A --> B
198 B --> A
199 }
200
201 Active --> SomethingElse
202 note right of SomethingElse : This is the note to the right.
203 `,
204 { theme }
205 );
206 });
207 it('should render a state diagram (v2)', () => {
208 imgSnapshotTest(
209 `
210 %%{init: { 'logLevel': 0, 'theme': '${theme}'} }%%
211stateDiagram-v2
212 accTitle: This is a title
213 accDescr: This is a description
214
215 [*] --> Active
216
217 state Active {
218 [*] --> NumLockOff
219 NumLockOff --> NumLockOn : EvNumLockPressed
220 NumLockOn --> NumLockOff : EvNumLockPressed
221 --
222 [*] --> CapsLockOff
223 CapsLockOff --> CapsLockOn : EvCapsLockPressed
224 CapsLockOn --> CapsLockOff : EvCapsLockPressed
225 --
226 [*] --> ScrollLockOff
227 ScrollLockOff --> ScrollLockOn : EvCapsLockPressed
228 ScrollLockOn --> ScrollLockOff : EvCapsLockPressed
229 }
230 state SomethingElse {
231 A --> B
232 B --> A
233 }
234
235 Active --> SomethingElse2
236 note right of SomethingElse2 : This is the note to the right.
237 `,
238 { theme }
239 );
240 });
241 it('should render a er diagram', () => {
242 imgSnapshotTest(
243 `
244erDiagram
245 accTitle: This is a title
246 accDescr: This is a description
247
248 CUSTOMER }|..|{ DELIVERY-ADDRESS : has
249 CUSTOMER ||--o{ ORDER : places
250 CUSTOMER ||--o{ INVOICE : "liable for"
251 DELIVERY-ADDRESS ||--o{ ORDER : receives
252 INVOICE ||--|{ ORDER : covers
253 ORDER ||--|{ ORDER-ITEM : includes
254 PRODUCT-CATEGORY ||--|{ PRODUCT : contains
255 PRODUCT ||--o{ ORDER-ITEM : "ordered in"
256
257 `,
258 { theme }
259 );
260 });
261 it('should render a user journey diagram', () => {
262 imgSnapshotTest(
263 `
264 %%{init: { 'logLevel': 0, 'theme': '${theme}'} }%%
265 journey
266 accTitle: This is a title
267 accDescr: This is a description
268
269 title My working day
270 section Go to work
271 Make tea: 5: Me
272 Go upstairs: 3: Me
273 Do work: 1: Me, Cat
274 section Go home
275 Go downstairs: 5: Me
276 Sit down: 5: Me
277 `,
278 { theme }
279 );
280 });
281 it('should render a gantt diagram', () => {
282 cy.clock(new Date('2014-01-06').getTime());
283 imgSnapshotTest(
284 `
285 gantt
286 accTitle: This is a title
287 accDescr: This is a description
288
289 dateFormat :YYYY-MM-DD
290 title :Adding GANTT diagram functionality to mermaid
291 excludes :excludes the named dates/days from being included in a charted task..
292 section A section
293 Completed task :done, des1, 2014-01-06,2014-01-08
294 Active task :active, des2, 2014-01-09, 3d
295 Future task : des3, after des2, 5d
296 Future task2 : des4, after des3, 5d
297
298 section Critical tasks
299 Completed task in the critical line :crit, done, 2014-01-06,24h
300 Implement parser and jison :crit, done, after des1, 2d
301 Create tests for parser :crit, active, 3d
302 Future task in critical line :crit, 5d
303 Create tests for renderer :2d
304 Add to mermaid :1d
305
306 section Documentation
307 Describe gantt syntax :active, a1, after des1, 3d
308 Add gantt diagram to demo page :after a1 , 20h
309 Add another diagram to demo page :doc1, after a1 , 48h
310
311 section Last section
312 Describe gantt syntax :after doc1, 3d
313 Add gantt diagram to demo page :20h
314 Add another diagram to demo page :48h
315 `,
316 { theme }
317 );
318 });
319 });
320 });
321});
322