collab/mermaid/cypress/integration/rendering/theme.spec.jsblame
View source
6dd74de1import { imgSnapshotTest } from '../../helpers/util.ts';
6dd74de2
6dd74de3describe('themeCSS balancing, it', () => {
6dd74de4 it('should not allow unbalanced CSS definitions', () => {
6dd74de5 imgSnapshotTest(
6dd74de6 `
6dd74de7 %%{init: { 'themeCSS': '} * { background: red }' } }%%
6dd74de8 flowchart TD
6dd74de9 a --> b
6dd74de10 `,
6dd74de11 {}
6dd74de12 );
6dd74de13 });
6dd74de14 it('should not allow unbalanced CSS definitions 2', () => {
6dd74de15 imgSnapshotTest(
6dd74de16 `
6dd74de17 %%{init: { 'themeCSS': '\u007D * { background: red }' } }%%
6dd74de18 flowchart TD
6dd74de19 a2 --> b2
6dd74de20 `,
6dd74de21 {}
6dd74de22 );
6dd74de23 });
6dd74de24});
6dd74de25
6dd74de26// TODO: Delete/Rename this describe, keeping the inner contents.
6dd74de27describe('Pie Chart', () => {
6dd74de28 // beforeEach(()=>{
6dd74de29 // cy.clock((new Date('2014-06-09')).getTime());
6dd74de30 // });
6dd74de31
6dd74de32 ['default', 'forest', 'dark', 'neutral'].forEach((theme) => {
6dd74de33 describe(theme, () => {
6dd74de34 it('should render a pie diagram', () => {
6dd74de35 imgSnapshotTest(
6dd74de36 `
6dd74de37 pie title Sports in Sweden
6dd74de38 accTitle: This is a title
6dd74de39 accDescr: This is a description
6dd74de40 "Bandy" : 40
6dd74de41 "Ice-Hockey" : 80
6dd74de42 "Football" : 90
6dd74de43 `,
6dd74de44 { theme }
6dd74de45 );
6dd74de46 });
6dd74de47 it('should render a flowchart diagram', () => {
6dd74de48 imgSnapshotTest(
6dd74de49 `
6dd74de50 %%{init: { 'logLevel': 0} }%%
6dd74de51 graph TD
6dd74de52 accTitle: This is a title
6dd74de53 accDescr: This is a description
6dd74de54 A[Christmas] -->|Get money| B(Go shopping)
6dd74de55 B --> C{Let me think}
6dd74de56 B --> G[/Another/]
6dd74de57 C ==>|One| D[Laptop]
6dd74de58 C -->|Two| E[iPhone]
6dd74de59 C -->|Three| F[fa:fa-car Car]
6dd74de60 subgraph section
6dd74de61 C
6dd74de62 D
6dd74de63 E
6dd74de64 F
6dd74de65 G
6dd74de66 end
6dd74de67 `,
6dd74de68 { theme }
6dd74de69 );
6dd74de70 });
6dd74de71 it('should render a new flowchart diagram', () => {
6dd74de72 imgSnapshotTest(
6dd74de73 `
6dd74de74 %%{init: { 'logLevel': 0, 'theme': '${theme}'} }%%
6dd74de75 flowchart TD
6dd74de76 accTitle: This is a title
6dd74de77 accDescr: This is a description
6dd74de78
6dd74de79 A[Christmas] -->|Get money| B(Go shopping)
6dd74de80 B --> C{Let me think}
6dd74de81 B --> G[Another]
6dd74de82 C ==>|One| D[Laptop]
6dd74de83 C x--x|Two| E[iPhone]
6dd74de84 C o--o|Three| F[fa:fa-car Car]
6dd74de85 subgraph section
6dd74de86 C
6dd74de87 D
6dd74de88 E
6dd74de89 F
6dd74de90 G
6dd74de91 end
6dd74de92 `,
6dd74de93 { theme }
6dd74de94 );
6dd74de95 });
6dd74de96 it('should render a sequence diagram', () => {
6dd74de97 imgSnapshotTest(
6dd74de98 `
6dd74de99 %%{init: { 'logLevel': 0, 'theme': '${theme}'} }%%
6dd74de100 sequenceDiagram
6dd74de101 accTitle: This is a title
6dd74de102 accDescr: This is a description
6dd74de103
6dd74de104 autonumber
6dd74de105 par Action 1
6dd74de106 Alice->>John: Hello John, how are you?
6dd74de107 and Action 2
6dd74de108 Alice->>Bob: Hello Bob, how are you?
6dd74de109 end
6dd74de110 Alice->>+John: Hello John, how are you?
6dd74de111 Alice->>+John: John, can you hear me?
6dd74de112 John-->>-Alice: Hi Alice, I can hear you!
6dd74de113 Note right of John: John is perceptive
6dd74de114 John-->>-Alice: I feel great!
6dd74de115 loop Every minute
6dd74de116 John-->Alice: Great!
6dd74de117 end
6dd74de118
6dd74de119
6dd74de120 `,
6dd74de121 { theme }
6dd74de122 );
6dd74de123 });
6dd74de124
6dd74de125 it('should render a class diagram', () => {
6dd74de126 imgSnapshotTest(
6dd74de127 `
6dd74de128 %%{init: { 'logLevel': 0, 'theme': '${theme}'} }%%
6dd74de129 classDiagram
6dd74de130 accTitle: This is a title
6dd74de131 accDescr: This is a description
6dd74de132
6dd74de133 Animal "*" <|-- "1" Duck
6dd74de134 Animal "1" <|-- "10" Fish
6dd74de135 Animal <|-- Zebra
6dd74de136 Animal : +int age
6dd74de137 Animal : +String gender
6dd74de138 Animal: +isMammal()
6dd74de139 Animal: +mate()
6dd74de140 class Duck{
6dd74de141 +String beakColor
6dd74de142 +swim()
6dd74de143 +quack()
6dd74de144 }
6dd74de145 class Fish{
6dd74de146 -int sizeInFeet
6dd74de147 -canEat()
6dd74de148 }
6dd74de149 class Zebra{
6dd74de150 +bool is_wild
6dd74de151 +run()
6dd74de152 }
6dd74de153 classA <|-- classB
6dd74de154 classC *-- classD
6dd74de155 classE o-- classF
6dd74de156 classG <-- classH
6dd74de157 classI -- classJ
6dd74de158 classK <.. classL
6dd74de159 classM <|.. classN
6dd74de160 classO .. classP
6dd74de161 classA --|> classB : Inheritance
6dd74de162 classC --* classD : Composition
6dd74de163 classE --o classF : Aggregation
6dd74de164 classG --> classH : Association
6dd74de165 classI -- classJ : Link(Solid)
6dd74de166 classK ..> classL : Dependency
6dd74de167 classM ..|> classN : Realization
6dd74de168 classO .. classP : Link(Dashed)
6dd74de169 `,
6dd74de170 { theme }
6dd74de171 );
6dd74de172 });
6dd74de173 it('should render a state diagram', () => {
6dd74de174 imgSnapshotTest(
6dd74de175 `
6dd74de176 %%{init: { 'logLevel': 0, 'theme': '${theme}'} }%%
6dd74de177stateDiagram
6dd74de178 accTitle: This is a title
6dd74de179 accDescr: This is a description
6dd74de180
6dd74de181 [*] --> Active
6dd74de182
6dd74de183 state Active {
6dd74de184 [*] --> NumLockOff
6dd74de185 NumLockOff --> NumLockOn : EvNumLockPressed
6dd74de186 NumLockOn --> NumLockOff : EvNumLockPressed
6dd74de187 --
6dd74de188 [*] --> CapsLockOff
6dd74de189 CapsLockOff --> CapsLockOn : EvCapsLockPressed
6dd74de190 CapsLockOn --> CapsLockOff : EvCapsLockPressed
6dd74de191 --
6dd74de192 [*] --> ScrollLockOff
6dd74de193 ScrollLockOff --> ScrollLockOn : EvCapsLockPressed
6dd74de194 ScrollLockOn --> ScrollLockOff : EvCapsLockPressed
6dd74de195 }
6dd74de196 state SomethingElse {
6dd74de197 A --> B
6dd74de198 B --> A
6dd74de199 }
6dd74de200
6dd74de201 Active --> SomethingElse
6dd74de202 note right of SomethingElse : This is the note to the right.
6dd74de203 `,
6dd74de204 { theme }
6dd74de205 );
6dd74de206 });
6dd74de207 it('should render a state diagram (v2)', () => {
6dd74de208 imgSnapshotTest(
6dd74de209 `
6dd74de210 %%{init: { 'logLevel': 0, 'theme': '${theme}'} }%%
6dd74de211stateDiagram-v2
6dd74de212 accTitle: This is a title
6dd74de213 accDescr: This is a description
6dd74de214
6dd74de215 [*] --> Active
6dd74de216
6dd74de217 state Active {
6dd74de218 [*] --> NumLockOff
6dd74de219 NumLockOff --> NumLockOn : EvNumLockPressed
6dd74de220 NumLockOn --> NumLockOff : EvNumLockPressed
6dd74de221 --
6dd74de222 [*] --> CapsLockOff
6dd74de223 CapsLockOff --> CapsLockOn : EvCapsLockPressed
6dd74de224 CapsLockOn --> CapsLockOff : EvCapsLockPressed
6dd74de225 --
6dd74de226 [*] --> ScrollLockOff
6dd74de227 ScrollLockOff --> ScrollLockOn : EvCapsLockPressed
6dd74de228 ScrollLockOn --> ScrollLockOff : EvCapsLockPressed
6dd74de229 }
6dd74de230 state SomethingElse {
6dd74de231 A --> B
6dd74de232 B --> A
6dd74de233 }
6dd74de234
6dd74de235 Active --> SomethingElse2
6dd74de236 note right of SomethingElse2 : This is the note to the right.
6dd74de237 `,
6dd74de238 { theme }
6dd74de239 );
6dd74de240 });
6dd74de241 it('should render a er diagram', () => {
6dd74de242 imgSnapshotTest(
6dd74de243 `
6dd74de244erDiagram
6dd74de245 accTitle: This is a title
6dd74de246 accDescr: This is a description
6dd74de247
6dd74de248 CUSTOMER }|..|{ DELIVERY-ADDRESS : has
6dd74de249 CUSTOMER ||--o{ ORDER : places
6dd74de250 CUSTOMER ||--o{ INVOICE : "liable for"
6dd74de251 DELIVERY-ADDRESS ||--o{ ORDER : receives
6dd74de252 INVOICE ||--|{ ORDER : covers
6dd74de253 ORDER ||--|{ ORDER-ITEM : includes
6dd74de254 PRODUCT-CATEGORY ||--|{ PRODUCT : contains
6dd74de255 PRODUCT ||--o{ ORDER-ITEM : "ordered in"
6dd74de256
6dd74de257 `,
6dd74de258 { theme }
6dd74de259 );
6dd74de260 });
6dd74de261 it('should render a user journey diagram', () => {
6dd74de262 imgSnapshotTest(
6dd74de263 `
6dd74de264 %%{init: { 'logLevel': 0, 'theme': '${theme}'} }%%
6dd74de265 journey
6dd74de266 accTitle: This is a title
6dd74de267 accDescr: This is a description
6dd74de268
6dd74de269 title My working day
6dd74de270 section Go to work
6dd74de271 Make tea: 5: Me
6dd74de272 Go upstairs: 3: Me
6dd74de273 Do work: 1: Me, Cat
6dd74de274 section Go home
6dd74de275 Go downstairs: 5: Me
6dd74de276 Sit down: 5: Me
6dd74de277 `,
6dd74de278 { theme }
6dd74de279 );
6dd74de280 });
6dd74de281 it('should render a gantt diagram', () => {
6dd74de282 cy.clock(new Date('2014-01-06').getTime());
6dd74de283 imgSnapshotTest(
6dd74de284 `
6dd74de285 gantt
6dd74de286 accTitle: This is a title
6dd74de287 accDescr: This is a description
6dd74de288
6dd74de289 dateFormat :YYYY-MM-DD
6dd74de290 title :Adding GANTT diagram functionality to mermaid
6dd74de291 excludes :excludes the named dates/days from being included in a charted task..
6dd74de292 section A section
6dd74de293 Completed task :done, des1, 2014-01-06,2014-01-08
6dd74de294 Active task :active, des2, 2014-01-09, 3d
6dd74de295 Future task : des3, after des2, 5d
6dd74de296 Future task2 : des4, after des3, 5d
6dd74de297
6dd74de298 section Critical tasks
6dd74de299 Completed task in the critical line :crit, done, 2014-01-06,24h
6dd74de300 Implement parser and jison :crit, done, after des1, 2d
6dd74de301 Create tests for parser :crit, active, 3d
6dd74de302 Future task in critical line :crit, 5d
6dd74de303 Create tests for renderer :2d
6dd74de304 Add to mermaid :1d
6dd74de305
6dd74de306 section Documentation
6dd74de307 Describe gantt syntax :active, a1, after des1, 3d
6dd74de308 Add gantt diagram to demo page :after a1 , 20h
6dd74de309 Add another diagram to demo page :doc1, after a1 , 48h
6dd74de310
6dd74de311 section Last section
6dd74de312 Describe gantt syntax :after doc1, 3d
6dd74de313 Add gantt diagram to demo page :20h
6dd74de314 Add another diagram to demo page :48h
6dd74de315 `,
6dd74de316 { theme }
6dd74de317 );
6dd74de318 });
6dd74de319 });
6dd74de320 });
6dd74de321});