marcel/mermaid
1
0
Fork 0
mirror of https://github.com/mermaid-js/mermaid.git synced 2025-09-19 07:19:41 +02:00
Code Issues Packages Projects Releases Wiki Activity

Merge branch 'develop' into fixElkTests

Browse Source
This commit is contained in:
Sidharth Vinod
2023-09-06 17:28:28 +00:00
committed by GitHub
parent 9a5cae9c63 773abbe7e2
commit 212b368ffd
491 changed files with 33655 additions and 17028 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
cypress/integration/rendering/appli.spec.js
View File

@@ -1,4 +1,4 @@
import { imgSnapshotTest } from '../../helpers/util.js';
import { imgSnapshotTest } from '../../helpers/util.ts';
describe('Git Graph diagram', () => {
it('1: should render a simple gitgraph with commit on main branch', () => {

2
cypress/integration/rendering/c4.spec.js
View File

@@ -1,4 +1,4 @@
import { imgSnapshotTest, renderGraph } from '../../helpers/util.js';
import { imgSnapshotTest, renderGraph } from '../../helpers/util.ts';
describe('C4 diagram', () => {
it('should render a simple C4Context diagram', () => {

166
cypress/integration/rendering/classDiagram-v2.spec.js
View File

@@ -1,4 +1,4 @@
import { imgSnapshotTest } from '../../helpers/util';
import { imgSnapshotTest } from '../../helpers/util.ts';
describe('Class diagram V2', () => {
it('0: should render a simple class diagram', () => {
imgSnapshotTest(
@@ -13,7 +13,6 @@ describe('Class diagram V2', () => {
`,
{ logLevel: 1, flowchart: { htmlLabels: false } }
);
cy.get('svg');
});
it('1: should render a simple class diagram', () => {
@@ -47,7 +46,6 @@ describe('Class diagram V2', () => {
`,
{ logLevel: 1, flowchart: { htmlLabels: false } }
);
cy.get('svg');
});
it('2: should render a simple class diagrams with cardinality', () => {
@@ -76,7 +74,6 @@ describe('Class diagram V2', () => {
`,
{ logLevel: 1, flowchart: { htmlLabels: false } }
);
cy.get('svg');
});
it('should render a simple class diagram with different visibilities', () => {
@@ -94,7 +91,6 @@ describe('Class diagram V2', () => {
`,
{ logLevel: 1, flowchart: { htmlLabels: false } }
);
cy.get('svg');
});
it('should render multiple class diagrams', () => {
@@ -147,7 +143,6 @@ describe('Class diagram V2', () => {
],
{ logLevel: 1, flowchart: { htmlLabels: false } }
);
cy.get('svg');
});
it('4: should render a simple class diagram with comments', () => {
@@ -177,7 +172,6 @@ describe('Class diagram V2', () => {
`,
{ logLevel: 1, flowchart: { htmlLabels: false } }
);
cy.get('svg');
});
it('5: should render a simple class diagram with abstract method', () => {
@@ -189,7 +183,6 @@ describe('Class diagram V2', () => {
`,
{ logLevel: 1, flowchart: { htmlLabels: false } }
);
cy.get('svg');
});
it('6: should render a simple class diagram with static method', () => {
@@ -201,7 +194,6 @@ describe('Class diagram V2', () => {
`,
{ logLevel: 1, flowchart: { htmlLabels: false } }
);
cy.get('svg');
});
it('7: should render a simple class diagram with Generic class', () => {
@@ -221,7 +213,6 @@ describe('Class diagram V2', () => {
`,
{ logLevel: 1, flowchart: { htmlLabels: false } }
);
cy.get('svg');
});
it('8: should render a simple class diagram with Generic class and relations', () => {
@@ -242,7 +233,6 @@ describe('Class diagram V2', () => {
`,
{ logLevel: 1, flowchart: { htmlLabels: false } }
);
cy.get('svg');
});
it('9: should render a simple class diagram with clickable link', () => {
@@ -264,7 +254,6 @@ describe('Class diagram V2', () => {
`,
{ logLevel: 1, flowchart: { htmlLabels: false } }
);
cy.get('svg');
});
it('10: should render a simple class diagram with clickable callback', () => {
@@ -286,7 +275,6 @@ describe('Class diagram V2', () => {
`,
{ logLevel: 1, flowchart: { htmlLabels: false } }
);
cy.get('svg');
});
it('11: should render a simple class diagram with return type on method', () => {
@@ -301,7 +289,6 @@ describe('Class diagram V2', () => {
`,
{ logLevel: 1, flowchart: { htmlLabels: false } }
);
cy.get('svg');
});
it('12: should render a simple class diagram with generic types', () => {
@@ -317,7 +304,6 @@ describe('Class diagram V2', () => {
`,
{ logLevel: 1, flowchart: { htmlLabels: false } }
);
cy.get('svg');
});
it('13: should render a simple class diagram with css classes applied', () => {
@@ -335,7 +321,6 @@ describe('Class diagram V2', () => {
`,
{ logLevel: 1, flowchart: { htmlLabels: false } }
);
cy.get('svg');
});
it('14: should render a simple class diagram with css classes applied directly', () => {
@@ -351,7 +336,6 @@ describe('Class diagram V2', () => {
`,
{ logLevel: 1, flowchart: { htmlLabels: false } }
);
cy.get('svg');
});
it('15: should render a simple class diagram with css classes applied two multiple classes', () => {
@@ -365,7 +349,6 @@ describe('Class diagram V2', () => {
`,
{ logLevel: 1, flowchart: { htmlLabels: false } }
);
cy.get('svg');
});
it('16a: should render a simple class diagram with static field', () => {
@@ -378,7 +361,6 @@ describe('Class diagram V2', () => {
`,
{ logLevel: 1, flowchart: { htmlLabels: false } }
);
cy.get('svg');
});
it('16b: should handle the direction statement with TB', () => {
@@ -403,32 +385,6 @@ describe('Class diagram V2', () => {
`,
{ logLevel: 1, flowchart: { htmlLabels: false } }
);
cy.get('svg');
});
it('18: should handle the direction statement with LR', () => {
imgSnapshotTest(
`
classDiagram
direction LR
class Student {
-idCard : IdCard
}
class IdCard{
-id : int
-name : string
}
class Bike{
-id : int
-name : string
}
Student "1" --o "1" IdCard : carries
Student "1" --o "1" Bike : rides
`,
{ logLevel: 1, flowchart: { htmlLabels: false } }
);
cy.get('svg');
});
it('17a: should handle the direction statement with BT', () => {
imgSnapshotTest(
@@ -452,7 +408,6 @@ describe('Class diagram V2', () => {
`,
{ logLevel: 1, flowchart: { htmlLabels: false } }
);
cy.get('svg');
});
it('17b: should handle the direction statement with RL', () => {
imgSnapshotTest(
@@ -476,10 +431,33 @@ describe('Class diagram V2', () => {
`,
{ logLevel: 1, flowchart: { htmlLabels: false } }
);
cy.get('svg');
});
it('18: should render a simple class diagram with notes', () => {
it('18a: should handle the direction statement with LR', () => {
imgSnapshotTest(
`
classDiagram
direction LR
class Student {
-idCard : IdCard
}
class IdCard{
-id : int
-name : string
}
class Bike{
-id : int
-name : string
}
Student "1" --o "1" IdCard : carries
Student "1" --o "1" Bike : rides
`,
{ logLevel: 1, flowchart: { htmlLabels: false } }
);
});
it('18b: should render a simple class diagram with notes', () => {
imgSnapshotTest(
`
classDiagram-v2
@@ -493,7 +471,6 @@ describe('Class diagram V2', () => {
`,
{ logLevel: 1, flowchart: { htmlLabels: false } }
);
cy.get('svg');
});
it('1433: should render a simple class with a title', () => {
@@ -503,8 +480,95 @@ title: simple class diagram
---
classDiagram-v2
class Class10
`,
{}
`
);
});
it('should render a class with text label', () => {
imgSnapshotTest(
`classDiagram
class C1["Class 1 with text label"]
C1 --> C2`
);
});
it('should render two classes with text labels', () => {
imgSnapshotTest(
`classDiagram
class C1["Class 1 with text label"]
class C2["Class 2 with chars @?"]
C1 --> C2`
);
});
it('should render a class with a text label, members and annotation', () => {
imgSnapshotTest(
`classDiagram
class C1["Class 1 with text label"] {
<<interface>>
+member1
}
C1 --> C2`
);
});
it('should render multiple classes with same text labels', () => {
imgSnapshotTest(
`classDiagram
class C1["Class with text label"]
class C2["Class with text label"]
class C3["Class with text label"]
C1 --> C2
C3 ..> C2
`
);
});
it('should render classes with different text labels', () => {
imgSnapshotTest(
`classDiagram
class C1["OneWord"]
class C2["With, Comma"]
class C3["With (Brackets)"]
class C4["With [Brackets]"]
class C5["With {Brackets}"]
class C7["With 1 number"]
class C8["With . period..."]
class C9["With - dash"]
class C10["With _ underscore"]
class C11["With ' single quote"]
class C12["With ~!@#$%^&*()_+=-/?"]
class C13["With Città foreign language"]
`
);
});
it('should render classLabel if class has already been defined earlier', () => {
imgSnapshotTest(
`classDiagram
Animal <|-- Duck
class Duck["Duck with text label"]
`
);
});
it('should add classes namespaces', function () {
imgSnapshotTest(
`
classDiagram
namespace Namespace1 {
class C1
class C2
}
C1 --> C2
class C3
class C4
`
);
});
it('should render a simple class diagram with no members', () => {
imgSnapshotTest(
`
classDiagram-v2
class Class10
`,
{ logLevel: 1, flowchart: { htmlLabels: false } }
);
});
});

82
cypress/integration/rendering/classDiagram.spec.js
View File

@@ -1,4 +1,4 @@
import { imgSnapshotTest, renderGraph } from '../../helpers/util';
import { imgSnapshotTest, renderGraph } from '../../helpers/util.ts';
describe('Class diagram', () => {
it('1: should render a simple class diagram', () => {
@@ -286,7 +286,7 @@ describe('Class diagram', () => {
cy.get('svg');
});
it('15: should render a simple class diagram with css classes applied two multiple classes', () => {
it('15: should render a simple class diagram with css classes applied to multiple classes', () => {
imgSnapshotTest(
`
classDiagram
@@ -423,4 +423,82 @@ describe('Class diagram', () => {
);
cy.get('svg');
});
it('should render class diagram with newlines in title', () => {
imgSnapshotTest(`
classDiagram
Animal <|-- \`Du\nck\`
Animal : +int age
Animal : +String gender
Animal: +isMammal()
Animal: +mate()
class \`Du\nck\` {
+String beakColor
+String featherColor
+swim()
+quack()
}
`);
cy.get('svg');
});
it('should render class diagram with many newlines in title', () => {
imgSnapshotTest(`
classDiagram
class \`This\nTitle\nHas\nMany\nNewlines\` {
+String Also
-Stirng Many
#int Members
+And()
-Many()
#Methods()
}
`);
});
it('should render with newlines in title and an annotation', () => {
imgSnapshotTest(`
classDiagram
class \`This\nTitle\nHas\nMany\nNewlines\` {
+String Also
-Stirng Many
#int Members
+And()
-Many()
#Methods()
}
&lt;&lt;Interface&gt;&gt; \`This\nTitle\nHas\nMany\nNewlines\`
`);
});
it('should handle newline title in namespace', () => {
imgSnapshotTest(`
classDiagram
namespace testingNamespace {
class \`This\nTitle\nHas\nMany\nNewlines\` {
+String Also
-Stirng Many
#int Members
+And()
-Many()
#Methods()
}
}
`);
});
it('should handle newline in string label', () => {
imgSnapshotTest(`
classDiagram
class A["This has\na newline!"] {
+String boop
-Int beep
#double bop
}
class B["This title also has\na newline"]
B : +with(more)
B : -methods()
`);
});
});

93
cypress/integration/rendering/conf-and-directives.spec.js
View File

@@ -1,4 +1,4 @@
import { imgSnapshotTest } from '../../helpers/util.js';
import { imgSnapshotTest } from '../../helpers/util.ts';
describe('Configuration and directives - nodes should be light blue', () => {
it('No config - use default', () => {
@@ -14,7 +14,6 @@ describe('Configuration and directives - nodes should be light blue', () => {
`,
{}
);
cy.get('svg');
});
it('Settings from initialize - nodes should be green', () => {
imgSnapshotTest(
@@ -28,7 +27,6 @@ graph TD
end `,
{ theme: 'forest' }
);
cy.get('svg');
});
it('Settings from initialize overriding themeVariable - nodes should be red', () => {
imgSnapshotTest(
@@ -46,7 +44,6 @@ graph TD
`,
{ theme: 'base', themeVariables: { primaryColor: '#ff0000' }, logLevel: 0 }
);
cy.get('svg');
});
it('Settings from directive - nodes should be grey', () => {
imgSnapshotTest(
@@ -62,7 +59,24 @@ graph TD
`,
{}
);
cy.get('svg');
});
it('Settings from frontmatter - nodes should be grey', () => {
imgSnapshotTest(
`
---
config:
theme: neutral
---
graph TD
A(Start) --> B[/Another/]
A[/Another/] --> C[End]
subgraph section
B
C
end
`,
{}
);
});
it('Settings from directive overriding theme variable - nodes should be red', () => {
@@ -79,7 +93,6 @@ graph TD
`,
{}
);
cy.get('svg');
});
it('Settings from initialize and directive - nodes should be grey', () => {
imgSnapshotTest(
@@ -95,7 +108,6 @@ graph TD
`,
{ theme: 'forest' }
);
cy.get('svg');
});
it('Theme from initialize, directive overriding theme variable - nodes should be red', () => {
imgSnapshotTest(
@@ -111,8 +123,71 @@ graph TD
`,
{ theme: 'base' }
);
cy.get('svg');
});
it('Theme from initialize, frontmatter overriding theme variable - nodes should be red', () => {
imgSnapshotTest(
`
---
config:
theme: base
themeVariables:
primaryColor: '#ff0000'
---
graph TD
A(Start) --> B[/Another/]
A[/Another/] --> C[End]
subgraph section
B
C
end
`,
{ theme: 'forest' }
);
});
it('Theme from initialize, frontmatter overriding theme variable, directive overriding primaryColor - nodes should be red', () => {
imgSnapshotTest(
`
---
config:
theme: base
themeVariables:
primaryColor: '#00ff00'
---
%%{init: {'theme': 'base', 'themeVariables':{ 'primaryColor': '#ff0000'}}}%%
graph TD
A(Start) --> B[/Another/]
A[/Another/] --> C[End]
subgraph section
B
C
end
`,
{ theme: 'forest' }
);
});
it('should render if values are not quoted properly', () => {
// #ff0000 is not quoted properly, and will evaluate to null.
// This test ensures that the rendering still works.
imgSnapshotTest(
`---
config:
theme: base
themeVariables:
primaryColor: #ff0000
---
graph TD
A(Start) --> B[/Another/]
A[/Another/] --> C[End]
subgraph section
B
C
end
`,
{ theme: 'forest' }
);
});
it('Theme variable from initialize, theme from directive - nodes should be red', () => {
imgSnapshotTest(
`
@@ -127,13 +202,11 @@ graph TD
`,
{ themeVariables: { primaryColor: '#ff0000' } }
);
cy.get('svg');
});
describe('when rendering several diagrams', () => {
it('diagrams should not taint later diagrams', () => {
const url = 'http://localhost:9000/theme-directives.html';
cy.visit(url);
cy.get('svg');
cy.matchImageSnapshot('conf-and-directives.spec-when-rendering-several-diagrams-diagram-1');
});
});

2
cypress/integration/rendering/current.spec.js
View File

@@ -1,4 +1,4 @@
import { imgSnapshotTest } from '../../helpers/util';
import { imgSnapshotTest } from '../../helpers/util.ts';
describe('Current diagram', () => {
it('should render a state with states in it', () => {

2
cypress/integration/rendering/debug.spec.js
View File

@@ -1,4 +1,4 @@
import { imgSnapshotTest } from '../../helpers/util';
import { imgSnapshotTest } from '../../helpers/util.ts';
describe('Flowchart', () => {
it('34: testing the label width in percy', () => {

56
cypress/integration/rendering/erDiagram.spec.js
View File

@@ -1,4 +1,4 @@
import { imgSnapshotTest, renderGraph } from '../../helpers/util';
import { imgSnapshotTest, renderGraph } from '../../helpers/util.ts';
describe('Entity Relationship Diagram', () => {
it('should render a simple ER diagram', () => {
@@ -10,7 +10,6 @@ describe('Entity Relationship Diagram', () => {
`,
{ logLevel: 1 }
);
cy.get('svg');
});
it('should render an ER diagram with a recursive relationship', () => {
@@ -23,7 +22,6 @@ describe('Entity Relationship Diagram', () => {
`,
{ logLevel: 1 }
);
cy.get('svg');
});
it('should render an ER diagram with multiple relationships between the same two entities', () => {
@@ -35,7 +33,6 @@ describe('Entity Relationship Diagram', () => {
`,
{ logLevel: 1 }
);
cy.get('svg');
});
it('should render a cyclical ER diagram', () => {
@@ -48,7 +45,6 @@ describe('Entity Relationship Diagram', () => {
`,
{ logLevel: 1 }
);
cy.get('svg');
});
it('should render a not-so-simple ER diagram', () => {
@@ -66,7 +62,6 @@ describe('Entity Relationship Diagram', () => {
`,
{ logLevel: 1 }
);
cy.get('svg');
});
it('should render multiple ER diagrams', () => {
@@ -85,7 +80,6 @@ describe('Entity Relationship Diagram', () => {
],
{ logLevel: 1 }
);
cy.get('svg');
});
it('should render an ER diagram with blank or empty labels', () => {
@@ -98,7 +92,6 @@ describe('Entity Relationship Diagram', () => {
`,
{ logLevel: 1 }
);
cy.get('svg');
});
it('should render an ER diagrams when useMaxWidth is true (default)', () => {
@@ -151,7 +144,6 @@ describe('Entity Relationship Diagram', () => {
`,
{ er: { useMaxWidth: false } }
);
cy.get('svg');
});
it('should render entities with and without attributes', () => {
@@ -164,7 +156,6 @@ describe('Entity Relationship Diagram', () => {
`,
{ logLevel: 1 }
);
cy.get('svg');
});
it('should render entities with generic and array attributes', () => {
@@ -179,7 +170,6 @@ describe('Entity Relationship Diagram', () => {
`,
{ logLevel: 1 }
);
cy.get('svg');
});
it('should render entities with length in attributes type', () => {
@@ -188,12 +178,11 @@ describe('Entity Relationship Diagram', () => {
erDiagram
CLUSTER {
varchar(99) name
string(255) description
string(255) description
}
`,
{ logLevel: 1 }
);
cy.get('svg');
});
it('should render entities and attributes with big and small entity names', () => {
@@ -209,6 +198,26 @@ describe('Entity Relationship Diagram', () => {
`,
{ logLevel: 1 }
);
});
it('should render entities with attributes that begin with asterisk', () => {
imgSnapshotTest(
`
erDiagram
BOOK {
int *id
string name
varchar(99) summary
}
BOOK }o..o{ STORE : soldBy
STORE {
int *id
string name
varchar(50) address
}
`,
{ loglevel: 1 }
);
cy.get('svg');
});
@@ -228,7 +237,6 @@ describe('Entity Relationship Diagram', () => {
`,
{ logLevel: 1 }
);
cy.get('svg');
});
it('should render entities with comments', () => {
@@ -247,7 +255,6 @@ describe('Entity Relationship Diagram', () => {
`,
{ logLevel: 1 }
);
cy.get('svg');
});
it('should render entities with keys and comments', () => {
@@ -267,7 +274,6 @@ describe('Entity Relationship Diagram', () => {
`,
{ logLevel: 1 }
);
cy.get('svg');
});
it('should render entities with aliases', () => {
@@ -285,7 +291,6 @@ describe('Entity Relationship Diagram', () => {
`,
{ logLevel: 1 }
);
cy.get('svg');
});
it('1433: should render a simple ER diagram with a title', () => {
@@ -300,4 +305,21 @@ ORDER ||--|{ LINE-ITEM : contains
{}
);
});
it('should render entities with entity name aliases', () => {
imgSnapshotTest(
`
erDiagram
p[Person] {
varchar(64) firstName
varchar(64) lastName
}
c["Customer Account"] {
varchar(128) email
}
p ||--o| c : has
`,
{ logLevel: 1 }
);
});
});

45
cypress/integration/rendering/errorDiagram.spec.js Normal file
View File

@@ -0,0 +1,45 @@
import { imgSnapshotTest } from '../../helpers/util';
describe('Error Diagrams', () => {
beforeEach(() => {
cy.on('uncaught:exception', (err) => {
expect(err.message).to.include('Parse error');
// return false to prevent the error from
// failing this test
return false;
});
});
it('should render a simple ER diagram', () => {
imgSnapshotTest(
`
error
`,
{ logLevel: 1 }
);
});
it('should render error diagram for actual errors', () => {
imgSnapshotTest(
`
flowchart TD
A[Christmas] --|Get money| B(Go shopping)
`,
{ logLevel: 1 }
);
});
it('should render error for wrong ER diagram', () => {
imgSnapshotTest(
`
erDiagram
ATLAS-ORGANIZATION ||--|{ ATLAS-PROJECTS : "has many"
ATLAS-PROJECTS ||--|{ MONGODB-CLUSTERS : "has many"
ATLAS-PROJECTS ||--|{ ATLAS-TEAMS : "has many"
MONGODB-CLUSTERS ||..|{
ATLAS-TEAMS ||..|{
`,
{ logLevel: 1 }
);
});
});

163
cypress/integration/rendering/flowchart-elk.spec.js
View File

@@ -1,4 +1,4 @@
import { imgSnapshotTest, renderGraph } from '../../helpers/util';
import { imgSnapshotTest, renderGraph } from '../../helpers/util.ts';
describe('Flowchart ELK', () => {
it('1-elk: should render a simple flowchart', () => {
@@ -681,7 +681,166 @@ title: Simple flowchart
flowchart-elk TD
A --> B
`,
{ titleTopMargin: 0 }
{ flowchart: { titleTopMargin: 0 } }
);
});
it('elk: should include classes on the edges', () => {
renderGraph(
`flowchart-elk TD
A --> B --> C --> D
`,
{}
);
cy.get('svg').should((svg) => {
const edges = svg.querySelectorAll('.edges > path');
edges.forEach((edge) => {
expect(edge).to.have.class('flowchart-link');
});
});
});
describe('Markdown strings flowchart-elk (#4220)', () => {
describe('html labels', () => {
it('With styling and classes', () => {
imgSnapshotTest(
`%%{init: {"flowchart": {"htmlLabels": true}} }%%
flowchart-elk LR
A:::someclass --> B["\`The **cat** in the hat\`"]:::someclass
id1(Start)-->id2(Stop)
style id1 fill:#f9f,stroke:#333,stroke-width:4px
style id2 fill:#bbf,stroke:#f66,stroke-width:2px,color:#fff,stroke-dasharray: 5 5
classDef someclass fill:#f96
`,
{ flowchart: { titleTopMargin: 0 } }
);
});
it('With formatting in a node', () => {
imgSnapshotTest(
`%%{init: {"flowchart": {"htmlLabels": true}} }%%
flowchart-elk LR
a{"\`The **cat** in the hat\`"} -- 1o --> b
a -- 2o --> c
a -- 3o --> d
g --2i--> a
d --1i--> a
h --3i -->a
b --> d(The dog in the hog)
c --> d
`,
{ flowchart: { titleTopMargin: 0 } }
);
});
it('New line in node and formatted edge label', () => {
imgSnapshotTest(
`%%{init: {"flowchart": {"htmlLabels": true}} }%%
flowchart-elk LR
b("\`The dog in **the** hog.(1)
NL\`") --"\`1o **bold**\`"--> c
`,
{ flowchart: { titleTopMargin: 0 } }
);
});
it('Wrapping long text with a new line', () => {
imgSnapshotTest(
`%%{init: {"flowchart": {"htmlLabels": true}} }%%
flowchart-elk LR
b(\`The dog in **the** hog.(1).. a a a a *very long text* about it
Word!
Another line with many, many words. Another line with many, many words. Another line with many, many words. Another line with many, many words. Another line with many, many words. Another line with many, many words. Another line with many, many words. Another line with many, many words. \`) --> c
`,
{ flowchart: { titleTopMargin: 0 } }
);
});
it('Sub graphs and markdown strings', () => {
imgSnapshotTest(
`%%{init: {"flowchart": {"htmlLabels": true}} }%%
flowchart-elk LR
subgraph "One"
a("\`The **cat**
in the hat\`") -- "1o" --> b{{"\`The **dog** in the hog\`"}}
end
subgraph "\`**Two**\`"
c("\`The **cat**
in the hat\`") -- "\`1o **ipa**\`" --> d("The dog in the hog")
end
`,
{ flowchart: { titleTopMargin: 0 } }
);
});
});
describe('svg text labels', () => {
it('With styling and classes', () => {
imgSnapshotTest(
`%%{init: {"flowchart": {"htmlLabels": false}} }%%
flowchart-elk LR
A:::someclass --> B["\`The **cat** in the hat\`"]:::someclass
id1(Start)-->id2(Stop)
style id1 fill:#f9f,stroke:#333,stroke-width:4px
style id2 fill:#bbf,stroke:#f66,stroke-width:2px,color:#fff,stroke-dasharray: 5 5
classDef someclass fill:#f96
`,
{ flowchart: { titleTopMargin: 0 } }
);
});
it('With formatting in a node', () => {
imgSnapshotTest(
`%%{init: {"flowchart": {"htmlLabels": false}} }%%
flowchart-elk LR
a{"\`The **cat** in the hat\`"} -- 1o --> b
a -- 2o --> c
a -- 3o --> d
g --2i--> a
d --1i--> a
h --3i -->a
b --> d(The dog in the hog)
c --> d
`,
{ flowchart: { titleTopMargin: 0 } }
);
});
it('New line in node and formatted edge label', () => {
imgSnapshotTest(
`%%{init: {"flowchart": {"htmlLabels": false}} }%%
flowchart-elk LR
b("\`The dog in **the** hog.(1)
NL\`") --"\`1o **bold**\`"--> c
`,
{ flowchart: { titleTopMargin: 0 } }
);
});
it('Wrapping long text with a new line', () => {
imgSnapshotTest(
`%%{init: {"flowchart": {"htmlLabels": false}} }%%
flowchart-elk LR
b("\`The dog in **the** hog.(1).. a a a a *very long text* about it
Word!
Another line with many, many words. Another line with many, many words. Another line with many, many words. Another line with many, many words. Another line with many, many words. Another line with many, many words. Another line with many, many words. Another line with many, many words. \`") --> c
`,
{ flowchart: { titleTopMargin: 0 } }
);
});
it('Sub graphs and markdown strings', () => {
imgSnapshotTest(
`%%{init: {"flowchart": {"htmlLabels": false}} }%%
flowchart-elk LR
subgraph "One"
a("\`The **cat**
in the hat\`") -- "1o" --> b{{"\`The **dog** in the hog\`"}}
end
subgraph "\`**Two**\`"
c("\`The **cat**
in the hat\`") -- "\`1o **ipa**\`" --> d("The dog in the hog")
end
`,
{ flowchart: { titleTopMargin: 0 } }
);
});
});
});
});

208
cypress/integration/rendering/flowchart-v2.spec.js
View File

@@ -1,4 +1,4 @@
import { imgSnapshotTest, renderGraph } from '../../helpers/util';
import { imgSnapshotTest, renderGraph } from '../../helpers/util.ts';
describe('Flowchart v2', () => {
it('1: should render a simple flowchart', () => {
@@ -172,7 +172,7 @@ describe('Flowchart v2', () => {
);
});
it('52: handle nested subgraphs in several levels', () => {
it('52: handle nested subgraphs in several levels.', () => {
imgSnapshotTest(
`flowchart TB
b-->B
@@ -449,7 +449,7 @@ flowchart TD
{ htmlLabels: true, flowchart: { htmlLabels: true }, securityLevel: 'loose' }
);
});
it('65: text-color from classes', () => {
it('65-1: text-color from classes', () => {
imgSnapshotTest(
`
flowchart LR
@@ -460,6 +460,31 @@ flowchart TD
{ htmlLabels: true, flowchart: { htmlLabels: true }, securityLevel: 'loose' }
);
});
it('65-2: bold text from classes', () => {
imgSnapshotTest(
`
flowchart
classDef cat fill:#f9d5e5, stroke:#233d4d,stroke-width:2px, font-weight:bold;
CS(A long bold text to be viewed):::cat
`,
{ htmlLabels: true, flowchart: { htmlLabels: true }, securityLevel: 'loose' }
);
});
it('65-3: bigger font from classes', () => {
imgSnapshotTest(
`
flowchart
Node1:::class1 --> Node2:::class2
Node1:::class1 --> Node3:::class2
Node3 --> Node4((I am a circle)):::larger
classDef class1 fill:lightblue
classDef class2 fill:pink
classDef larger font-size:30px,fill:yellow
`,
{ htmlLabels: true, flowchart: { htmlLabels: true }, securityLevel: 'loose' }
);
});
it('66: More nested subgraph cases (TB)', () => {
imgSnapshotTest(
`
@@ -671,7 +696,182 @@ title: Simple flowchart
flowchart TD
A --> B
`,
{ titleTopMargin: 0 }
{ flowchart: { titleTopMargin: 10 } }
);
});
it('3192: It should be possieble to render flowcharts with invisible edges', () => {
imgSnapshotTest(
`---
title: Simple flowchart with invisible edges
---
flowchart TD
A ~~~ B
`,
{ flowchart: { titleTopMargin: 10 } }
);
});
it('4023: Should render html labels with images and-or text correctly', () => {
imgSnapshotTest(
`flowchart TD
B[<img src='https://mermaid.js.org/mermaid-logo.svg'>]
B-->C[<img src="https://mermaid.js.org/mermaid-logo.svg"> more text <img src='https://mermaid.js.org/mermaid-logo.svg'>]
B-->D(<img src='https://mermaid.js.org/mermaid-logo.svg'> some text)
B-->E(plain)`,
{}
);
});
it('4439: Should render the graph even if some images are missing', () => {
imgSnapshotTest(
`flowchart TD
B[<img>]
B-->C[<img>]`,
{}
);
});
describe('Markdown strings flowchart (#4220)', () => {
describe('html labels', () => {
it('With styling and classes', () => {
imgSnapshotTest(
`%%{init: {"flowchart": {"htmlLabels": true}} }%%
flowchart LR
A:::someclass --> B["\`The **cat** in the hat\`"]:::someclass
id1(Start)-->id2(Stop)
style id1 fill:#f9f,stroke:#333,stroke-width:4px
style id2 fill:#bbf,stroke:#f66,stroke-width:2px,color:#fff,stroke-dasharray: 5 5
classDef someclass fill:#f96
`,
{ flowchart: { titleTopMargin: 0 } }
);
});
it('With formatting in a node', () => {
imgSnapshotTest(
`%%{init: {"flowchart": {"htmlLabels": true}} }%%
flowchart LR
a{"\`The **cat** in the hat\`"} -- 1o --> b
a -- 2o --> c
a -- 3o --> d
g --2i--> a
d --1i--> a
h --3i -->a
b --> d(The dog in the hog)
c --> d
`,
{ flowchart: { titleTopMargin: 0 } }
);
});
it('New line in node and formatted edge label', () => {
imgSnapshotTest(
`%%{init: {"flowchart": {"htmlLabels": true}} }%%
flowchart LR
b("\`The dog in **the** hog.(1)
NL\`") --"\`1o **bold**\`"--> c
`,
{ flowchart: { titleTopMargin: 0 } }
);
});
it('Wrapping long text with a new line', () => {
imgSnapshotTest(
`%%{init: {"flowchart": {"htmlLabels": true}} }%%
flowchart LR
b("\`The dog in **the** hog.(1).. a a a a *very long text* about it
Word!
Another line with many, many words. Another line with many, many words. Another line with many, many words. Another line with many, many words. Another line with many, many words. Another line with many, many words. Another line with many, many words. Another line with many, many words. \`") --> c
`,
{ flowchart: { titleTopMargin: 0 } }
);
});
it('Sub graphs and markdown strings', () => {
imgSnapshotTest(
`%%{init: {"flowchart": {"htmlLabels": true}} }%%
flowchart LR
subgraph "One"
a("\`The **cat**
in the hat\`") -- "1o" --> b{{"\`The **dog** in the hog\`"}}
end
subgraph "\`**Two**\`"
c("\`The **cat**
in the hat\`") -- "\`1o **ipa**\`" --> d("The dog in the hog")
end
`,
{ flowchart: { titleTopMargin: 0 } }
);
});
});
describe('svg text labels', () => {
it('With styling and classes', () => {
imgSnapshotTest(
`%%{init: {"flowchart": {"htmlLabels": false}} }%%
flowchart LR
A:::someclass --> B["\`The **cat** in the hat\`"]:::someclass
id1(Start)-->id2(Stop)
style id1 fill:#f9f,stroke:#333,stroke-width:4px
style id2 fill:#bbf,stroke:#f66,stroke-width:2px,color:#fff,stroke-dasharray: 5 5
classDef someclass fill:#f96
`,
{ flowchart: { titleTopMargin: 0 } }
);
});
it('With formatting in a node', () => {
imgSnapshotTest(
`%%{init: {"flowchart": {"htmlLabels": false}} }%%
flowchart LR
a{"\`The **cat** in the hat\`"} -- 1o --> b
a -- 2o --> c
a -- 3o --> d
g --2i--> a
d --1i--> a
h --3i -->a
b --> d(The dog in the hog)
c --> d
`,
{ flowchart: { titleTopMargin: 0 } }
);
});
it('New line in node and formatted edge label', () => {
imgSnapshotTest(
`%%{init: {"flowchart": {"htmlLabels": false}} }%%
flowchart LR
b("\`The dog in **the** hog.(1)
NL\`") --"\`1o **bold**\`"--> c
`,
{ flowchart: { titleTopMargin: 0 } }
);
});
it('Wrapping long text with a new line', () => {
imgSnapshotTest(
`%%{init: {"flowchart": {"htmlLabels": false}} }%%
flowchart LR
b("\`The dog in **the** hog.(1).. a a a a *very long text* about it
Word!
Another line with many, many words. Another line with many, many words. Another line with many, many words. Another line with many, many words. Another line with many, many words. Another line with many, many words. Another line with many, many words. Another line with many, many words. \`") --> c
`,
{ flowchart: { titleTopMargin: 0 } }
);
});
it('Sub graphs and markdown strings', () => {
imgSnapshotTest(
`%%{init: {"flowchart": {"htmlLabels": false}} }%%
flowchart LR
subgraph "One"
a("\`The **cat**
in the hat\`") -- "1o" --> b{{"\`The **dog** in the hog\`"}}
end
subgraph "\`**Two**\`"
c("\`The **cat**
in the hat\`") -- "\`1o **ipa**\`" --> d("The dog in the hog")
end
`,
{ flowchart: { titleTopMargin: 0 } }
);
});
});
});
});

25
cypress/integration/rendering/flowchart.spec.js
View File

@@ -1,4 +1,4 @@
import { imgSnapshotTest, renderGraph } from '../../helpers/util';
import { imgSnapshotTest, renderGraph } from '../../helpers/util.ts';
describe('Graph', () => {
it('1: should render a simple flowchart no htmlLabels', () => {
@@ -891,4 +891,27 @@ graph TD
{ htmlLabels: true, flowchart: { htmlLabels: true }, securityLevel: 'loose' }
);
});
it('66: apply class called default on node called default', () => {
imgSnapshotTest(
`
graph TD
classDef default fill:#a34,stroke:#000,stroke-width:4px,color:#fff
hello --> default
`,
{ htmlLabels: true, flowchart: { htmlLabels: true }, securityLevel: 'loose' }
);
});
it('67: should be able to style default node independently', () => {
imgSnapshotTest(
`
flowchart TD
classDef default fill:#a34
hello --> default
style default stroke:#000,stroke-width:4px
`,
{ htmlLabels: true, flowchart: { htmlLabels: true }, securityLevel: 'loose' }
);
});
});

125
cypress/integration/rendering/gantt.spec.js
View File

@@ -1,4 +1,4 @@
import { imgSnapshotTest, renderGraph } from '../../helpers/util.js';
import { imgSnapshotTest, renderGraph } from '../../helpers/util.ts';
describe('Gantt diagram', () => {
beforeEach(() => {
@@ -133,6 +133,24 @@ describe('Gantt diagram', () => {
);
});
it('should default to showing today marker', () => {
// This test only works if the environment thinks today is 1010-10-10
imgSnapshotTest(
`
gantt
title Show today marker (vertical line should be visible)
dateFormat YYYY-MM-DD
axisFormat %d
%% Should default to being on
%% todayMarker on
section Section1
Yesterday: 1010-10-09, 1d
Today: 1010-10-10, 1d
`,
{}
);
});
it('should hide today marker', () => {
imgSnapshotTest(
`
@@ -142,7 +160,8 @@ describe('Gantt diagram', () => {
axisFormat %d
todayMarker off
section Section1
Today: 1, -1h
Yesterday: 1010-10-09, 1d
Today: 1010-10-10, 1d
`,
{}
);
@@ -157,7 +176,8 @@ describe('Gantt diagram', () => {
axisFormat %d
todayMarker stroke-width:5px,stroke:#00f,opacity:0.5
section Section1
Today: 1, -1h
Yesterday: 1010-10-09, 1d
Today: 1010-10-10, 1d
`,
{}
);
@@ -310,6 +330,48 @@ describe('Gantt diagram', () => {
);
});
it('should render a gantt diagram with tick is 2 milliseconds', () => {
imgSnapshotTest(
`
gantt
title A Gantt Diagram
dateFormat SSS
axisFormat %Lms
tickInterval 2millisecond
excludes weekends
section Section
A task : a1, 000, 6ms
Another task : after a1, 6ms
section Another
Task in sec : a2, 006, 3ms
another task : 3ms
`,
{}
);
});
it('should render a gantt diagram with tick is 2 seconds', () => {
imgSnapshotTest(
`
gantt
title A Gantt Diagram
dateFormat ss
axisFormat %Ss
tickInterval 2second
excludes weekends
section Section
A task : a1, 00, 6s
Another task : after a1, 6s
section Another
Task in sec : 06, 3s
another task : 3s
`,
{}
);
});
it('should render a gantt diagram with tick is 15 minutes', () => {
imgSnapshotTest(
`
@@ -394,6 +456,28 @@ describe('Gantt diagram', () => {
);
});
it('should render a gantt diagram with tick is 1 week, with the day starting on monday', () => {
imgSnapshotTest(
`
gantt
title A Gantt Diagram
dateFormat YYYY-MM-DD
axisFormat %m-%d
tickInterval 1week
weekday monday
excludes weekends
section Section
A task : a1, 2022-10-01, 30d
Another task : after a1, 20d
section Another
Task in sec : 2022-10-20, 12d
another task : 24d
`,
{}
);
});
it('should render a gantt diagram with tick is 1 month', () => {
imgSnapshotTest(
`
@@ -435,4 +519,39 @@ describe('Gantt diagram', () => {
{ gantt: { topAxis: true } }
);
});
it('should render when compact is true', () => {
imgSnapshotTest(
`
---
displayMode: compact
---
gantt
title GANTT compact
dateFormat HH:mm:ss
axisFormat %Hh%M
section DB Clean
Clean: 12:00:00, 10m
Clean: 12:30:00, 12m
Clean: 13:00:00, 8m
Clean: 13:30:00, 9m
Clean: 14:00:00, 13m
Clean: 14:30:00, 10m
Clean: 15:00:00, 11m
section Sessions
A: 12:00:00, 63m
B: 12:30:00, 12m
C: 13:05:00, 12m
D: 13:06:00, 33m
E: 13:15:00, 55m
F: 13:20:00, 12m
G: 13:32:00, 18m
H: 13:50:00, 20m
I: 14:10:00, 10m
`,
{}
);
});
});

370
cypress/integration/rendering/gitGraph.spec.js
View File

@@ -1,4 +1,4 @@
import { imgSnapshotTest } from '../../helpers/util.js';
import { imgSnapshotTest } from '../../helpers/util.ts';
describe('Git Graph diagram', () => {
it('1: should render a simple gitgraph with commit on main branch', () => {
@@ -333,4 +333,372 @@ gitGraph
{}
);
});
it('15: should render a simple gitgraph with commit on main branch | Vertical Branch', () => {
imgSnapshotTest(
`gitGraph TB:
commit id: "1"
commit id: "2"
commit id: "3"
`,
{}
);
});
it('16: should render a simple gitgraph with commit on main branch with Id | Vertical Branch', () => {
imgSnapshotTest(
`gitGraph TB:
commit id: "One"
commit id: "Two"
commit id: "Three"
`,
{}
);
});
it('17: should render a simple gitgraph with different commitTypes on main branch | Vertical Branch', () => {
imgSnapshotTest(
`gitGraph TB:
commit id: "Normal Commit"
commit id: "Reverse Commit" type: REVERSE
commit id: "Hightlight Commit" type: HIGHLIGHT
`,
{}
);
});
it('18: should render a simple gitgraph with tags commitTypes on main branch | Vertical Branch', () => {
imgSnapshotTest(
`gitGraph TB:
commit id: "Normal Commit with tag" tag: "v1.0.0"
commit id: "Reverse Commit with tag" type: REVERSE tag: "RC_1"
commit id: "Hightlight Commit" type: HIGHLIGHT tag: "8.8.4"
`,
{}
);
});
it('19: should render a simple gitgraph with two branches | Vertical Branch', () => {
imgSnapshotTest(
`gitGraph TB:
commit id: "1"
commit id: "2"
branch develop
checkout develop
commit id: "3"
commit id: "4"
checkout main
commit id: "5"
commit id: "6"
`,
{}
);
});
it('20: should render a simple gitgraph with two branches and merge commit | Vertical Branch', () => {
imgSnapshotTest(
`gitGraph TB:
commit id: "1"
commit id: "2"
branch develop
checkout develop
commit id: "3"
commit id: "4"
checkout main
merge develop
commit id: "5"
commit id: "6"
`,
{}
);
});
it('21: should render a simple gitgraph with three branches and tagged merge commit | Vertical Branch', () => {
imgSnapshotTest(
`gitGraph TB:
commit id: "1"
commit id: "2"
branch nice_feature
checkout nice_feature
commit id: "3"
checkout main
commit id: "4"
checkout nice_feature
branch very_nice_feature
checkout very_nice_feature
commit id: "5"
checkout main
commit id: "6"
checkout nice_feature
commit id: "7"
checkout main
merge nice_feature id: "12345" tag: "my merge commit"
checkout very_nice_feature
commit id: "8"
checkout main
commit id: "9"
`,
{}
);
});
it('22: should render a simple gitgraph with more than 8 branchs & overriding variables | Vertical Branch', () => {
imgSnapshotTest(
`%%{init: { 'logLevel': 'debug', 'theme': 'default' , 'themeVariables': {
'gitBranchLabel0': '#ffffff',
'gitBranchLabel1': '#ffffff',
'gitBranchLabel2': '#ffffff',
'gitBranchLabel3': '#ffffff',
'gitBranchLabel4': '#ffffff',
'gitBranchLabel5': '#ffffff',
'gitBranchLabel6': '#ffffff',
'gitBranchLabel7': '#ffffff',
} } }%%
gitGraph TB:
checkout main
branch branch1
branch branch2
branch branch3
branch branch4
branch branch5
branch branch6
branch branch7
branch branch8
branch branch9
checkout branch1
commit id: "1"
`,
{}
);
});
it('23: should render a simple gitgraph with rotated labels | Vertical Branch', () => {
imgSnapshotTest(
`%%{init: { 'logLevel': 'debug', 'theme': 'default' , 'gitGraph': {
'rotateCommitLabel': true
} } }%%
gitGraph TB:
commit id: "75f7219e83b321cd3fdde7dcf83bc7c1000a6828"
commit id: "0db4784daf82736dec4569e0dc92980d328c1f2e"
commit id: "7067e9973f9eaa6cd4a4b723c506d1eab598e83e"
commit id: "66972321ad6c199013b5b31f03b3a86fa3f9817d"
`,
{}
);
});
it('24: should render a simple gitgraph with horizontal labels | Vertical Branch', () => {
imgSnapshotTest(
`%%{init: { 'logLevel': 'debug', 'theme': 'default' , 'gitGraph': {
'rotateCommitLabel': false
} } }%%
gitGraph TB:
commit id: "Alpha"
commit id: "Beta"
commit id: "Gamma"
commit id: "Delta"
`,
{}
);
});
it('25: should render a simple gitgraph with cherry pick commit | Vertical Branch', () => {
imgSnapshotTest(
`
gitGraph TB:
commit id: "ZERO"
branch develop
commit id:"A"
checkout main
commit id:"ONE"
checkout develop
commit id:"B"
checkout main
commit id:"TWO"
cherry-pick id:"A"
commit id:"THREE"
checkout develop
commit id:"C"
`,
{}
);
});
it('26: should render a gitgraph with cherry pick commit with custom tag | Vertical Branch', () => {
imgSnapshotTest(
`
gitGraph TB:
commit id: "ZERO"
branch develop
commit id:"A"
checkout main
commit id:"ONE"
checkout develop
commit id:"B"
checkout main
commit id:"TWO"
cherry-pick id:"A" tag: "snapshot"
commit id:"THREE"
checkout develop
commit id:"C"
`,
{}
);
});
it('27: should render a gitgraph with cherry pick commit with no tag | Vertical Branch', () => {
imgSnapshotTest(
`
gitGraph TB:
commit id: "ZERO"
branch develop
commit id:"A"
checkout main
commit id:"ONE"
checkout develop
commit id:"B"
checkout main
commit id:"TWO"
cherry-pick id:"A" tag: ""
commit id:"THREE"
checkout develop
commit id:"C"
`,
{}
);
});
it('28: should render a simple gitgraph with two cherry pick commit | Vertical Branch', () => {
imgSnapshotTest(
`
gitGraph TB:
commit id: "ZERO"
branch develop
commit id:"A"
checkout main
commit id:"ONE"
checkout develop
commit id:"B"
branch featureA
commit id:"FIX"
commit id: "FIX-2"
checkout main
commit id:"TWO"
cherry-pick id:"A"
commit id:"THREE"
cherry-pick id:"FIX"
checkout develop
commit id:"C"
merge featureA
`,
{}
);
});
it('29: should render commits for more than 8 branches | Vertical Branch', () => {
imgSnapshotTest(
`
gitGraph TB:
checkout main
%% Make sure to manually set the ID of all commits, for consistent visual tests
commit id: "1-abcdefg"
checkout main
branch branch1
commit id: "2-abcdefg"
checkout main
merge branch1
branch branch2
commit id: "3-abcdefg"
checkout main
merge branch2
branch branch3
commit id: "4-abcdefg"
checkout main
merge branch3
branch branch4
commit id: "5-abcdefg"
checkout main
merge branch4
branch branch5
commit id: "6-abcdefg"
checkout main
merge branch5
branch branch6
commit id: "7-abcdefg"
checkout main
merge branch6
branch branch7
commit id: "8-abcdefg"
checkout main
merge branch7
branch branch8
commit id: "9-abcdefg"
checkout main
merge branch8
branch branch9
commit id: "10-abcdefg"
`,
{}
);
});
it('30: should render a simple gitgraph with three branches,custom merge commit id,tag,type | Vertical Branch', () => {
imgSnapshotTest(
`gitGraph TB:
commit id: "1"
commit id: "2"
branch nice_feature
checkout nice_feature
commit id: "3"
checkout main
commit id: "4"
checkout nice_feature
branch very_nice_feature
checkout very_nice_feature
commit id: "5"
checkout main
commit id: "6"
checkout nice_feature
commit id: "7"
checkout main
merge nice_feature id: "customID" tag: "customTag" type: REVERSE
checkout very_nice_feature
commit id: "8"
checkout main
commit id: "9"
`,
{}
);
});
it('31: should render a simple gitgraph with a title | Vertical Branch', () => {
imgSnapshotTest(
`---
title: simple gitGraph
---
gitGraph TB:
commit id: "1-abcdefg"
`,
{}
);
});
it('32: should render a simple gitgraph overlapping commits | Vertical Branch', () => {
imgSnapshotTest(
`gitGraph TB:
commit id:"s1"
commit id:"s2"
branch branch1
commit id:"s3"
commit id:"s4"
checkout main
commit id:"s5"
checkout branch1
commit id:"s6"
commit id:"s7"
merge main
`,
{}
);
});
it('33: should render a simple gitgraph overlapping commits', () => {
imgSnapshotTest(
`gitGraph
commit id:"s1"
commit id:"s2"
branch branch1
commit id:"s3"
commit id:"s4"
checkout main
commit id:"s5"
checkout branch1
commit id:"s6"
commit id:"s7"
merge main
`,
{}
);
});
});

13
cypress/integration/rendering/info.spec.js
View File

@@ -1,13 +0,0 @@
import { imgSnapshotTest } from '../../helpers/util.js';
describe('Sequencediagram', () => {
it('should render a simple info diagrams', () => {
imgSnapshotTest(
`
info
showInfo
`,
{}
);
});
});

11
cypress/integration/rendering/info.spec.ts Normal file
View File

@@ -0,0 +1,11 @@
import { imgSnapshotTest } from '../../helpers/util.ts';
describe('info diagram', () => {
it('should handle an info definition', () => {
imgSnapshotTest(`info`);
});
it('should handle an info definition with showInfo', () => {
imgSnapshotTest(`info showInfo`);
});
});

2
cypress/integration/rendering/journey.spec.js
View File

@@ -1,4 +1,4 @@
import { imgSnapshotTest, renderGraph } from '../../helpers/util.js';
import { imgSnapshotTest, renderGraph } from '../../helpers/util.ts';
describe('User journey diagram', () => {
it('Simple test', () => {

25
cypress/integration/rendering/mindmap.spec.ts
View File

@@ -1,4 +1,4 @@
import { imgSnapshotTest } from '../../helpers/util.js';
import { imgSnapshotTest } from '../../helpers/util.ts';
/**
* Check whether the SVG Element has a Mindmap root
@@ -52,6 +52,17 @@ root[A root with a long text that wraps to keep the node size in check]
);
});
it('a root with wrapping text and long words that exceed width', () => {
imgSnapshotTest(
`mindmap
root[A few smaller words but then averylongsetofcharacterswithoutwhitespacetoseparate that we expect to wrapontonextlinesandnotexceedwidthparameters]
`,
{},
undefined,
shouldHaveRoot
);
});
it('a root with an icon', () => {
imgSnapshotTest(
`mindmap
@@ -223,5 +234,17 @@ mindmap
shouldHaveRoot
);
});
describe('Markdown strings mindmaps (#4220)', () => {
it('Formatted label with linebreak and a wrapping label and emojis', () => {
imgSnapshotTest(
`mindmap
id1[\`**Start** with
a second line 😎\`]
id2[\`The dog in **the** hog... a *very long text* about it
Word!\`]
`
);
});
});
/* The end */
});

81
cypress/integration/rendering/pie.spec.js → cypress/integration/rendering/pie.spec.ts
View File

@@ -1,78 +1,85 @@
import { imgSnapshotTest, renderGraph } from '../../helpers/util.js';
import { imgSnapshotTest, renderGraph } from '../../helpers/util.ts';
describe('Pie Chart', () => {
describe('pie chart', () => {
it('should render a simple pie diagram', () => {
imgSnapshotTest(
`pie title Sports in Sweden
"Bandy": 40
"Ice-Hockey": 80
"Football": 90
`
pie title Sports in Sweden
"Bandy" : 40
"Ice-Hockey" : 80
"Football" : 90
`,
{}
);
cy.get('svg');
});
it('should render a simple pie diagram with long labels', () => {
imgSnapshotTest(
`pie title NETFLIX
"Time spent looking for movie": 90
"Time spent watching it": 10
`
pie title NETFLIX
"Time spent looking for movie" : 90
"Time spent watching it" : 10
`,
{}
);
cy.get('svg');
});
it('should render a simple pie diagram with capital letters for labels', () => {
imgSnapshotTest(
`pie title What Voldemort doesn't have?
"FRIENDS": 2
"FAMILY": 3
"NOSE": 45
`
pie title What Voldemort doesn't have?
"FRIENDS" : 2
"FAMILY" : 3
"NOSE" : 45
`,
{}
);
cy.get('svg');
});
it('should render a pie diagram when useMaxWidth is true (default)', () => {
renderGraph(
`
pie title Sports in Sweden
"Bandy" : 40
"Ice-Hockey" : 80
"Football" : 90
`pie title Sports in Sweden
"Bandy": 40
"Ice-Hockey": 80
"Football": 90
`,
{ pie: { useMaxWidth: true } }
);
cy.get('svg').should((svg) => {
expect(svg).to.have.attr('width', '100%');
// expect(svg).to.have.attr('height');
// const height = parseFloat(svg.attr('height'));
// expect(height).to.eq(450);
const style = svg.attr('style');
expect(style).to.match(/^max-width: [\d.]+px;$/);
const maxWidthValue = parseFloat(style.match(/[\d.]+/g).join(''));
expect(maxWidthValue).to.eq(984);
});
});
it('should render a pie diagram when useMaxWidth is false', () => {
renderGraph(
`
pie title Sports in Sweden
"Bandy" : 40
"Ice-Hockey" : 80
"Football" : 90
`pie title Sports in Sweden
"Bandy": 40
"Ice-Hockey": 80
"Football": 90
`,
{ pie: { useMaxWidth: false } }
);
cy.get('svg').should((svg) => {
// const height = parseFloat(svg.attr('height'));
const width = parseFloat(svg.attr('width'));
// expect(height).to.eq(450);
expect(width).to.eq(984);
expect(svg).to.not.have.attr('style');
});
});
it('should render a pie diagram when textPosition is setted', () => {
imgSnapshotTest(
`pie
"Dogs": 50
"Cats": 25
`,
{ logLevel: 1, pie: { textPosition: 0.9 } }
);
});
it('should render a pie diagram with showData', () => {
imgSnapshotTest(
`pie showData
"Dogs": 50
"Cats": 25
`
);
});
});

163
cypress/integration/rendering/quadrantChart.spec.js Normal file
View File

@@ -0,0 +1,163 @@
import { imgSnapshotTest, renderGraph } from '../../helpers/util.ts';
describe('Quadrant Chart', () => {
it('should render if only chart type is provided', () => {
imgSnapshotTest(
`
quadrantChart
`,
{}
);
cy.get('svg');
});
it('should render a complete quadrant chart', () => {
imgSnapshotTest(
`
quadrantChart
title Reach and engagement of campaigns
x-axis Low Reach --> High Reach
y-axis Low Engagement --> High Engagement
quadrant-1 We should expand
quadrant-2 Need to promote
quadrant-3 Re-evaluate
quadrant-4 May be improved
Campaign A: [0.3, 0.6]
Campaign B: [0.45, 0.23]
Campaign C: [0.57, 0.69]
Campaign D: [0.78, 0.34]
Campaign E: [0.40, 0.34]
Campaign F: [0.35, 0.78]
`,
{}
);
cy.get('svg');
});
it('should render without points', () => {
imgSnapshotTest(
`
quadrantChart
title Reach and engagement of campaigns
x-axis Low Reach --> High Reach
y-axis Low Engagement --> High Engagement
quadrant-1 We should expand
quadrant-2 Need to promote
quadrant-3 Re-evaluate
quadrant-4 May be improved
`,
{}
);
cy.get('svg');
});
it('should able to render y-axix on right side', () => {
imgSnapshotTest(
`
%%{init: {"quadrantChart": {"yAxisPosition": "right"}}}%%
quadrantChart
title Reach and engagement of campaigns
x-axis Low Reach --> High Reach
y-axis Low Engagement --> High Engagement
quadrant-1 We should expand
quadrant-2 Need to promote
quadrant-3 Re-evaluate
quadrant-4 May be improved
`,
{}
);
cy.get('svg');
});
it('should able to render x-axix on bottom', () => {
imgSnapshotTest(
`
%%{init: {"quadrantChart": {"xAxisPosition": "bottom"}}}%%
quadrantChart
title Reach and engagement of campaigns
x-axis Low Reach --> High Reach
y-axis Low Engagement --> High Engagement
quadrant-1 We should expand
quadrant-2 Need to promote
quadrant-3 Re-evaluate
quadrant-4 May be improved
`,
{}
);
cy.get('svg');
});
it('should able to render x-axix on bottom and y-axis on right', () => {
imgSnapshotTest(
`
%%{init: {"quadrantChart": {"xAxisPosition": "bottom", "yAxisPosition": "right"}}}%%
quadrantChart
title Reach and engagement of campaigns
x-axis Low Reach --> High Reach
y-axis Low Engagement --> High Engagement
quadrant-1 We should expand
quadrant-2 Need to promote
quadrant-3 Re-evaluate
quadrant-4 May be improved
`,
{}
);
cy.get('svg');
});
it('should render without title', () => {
imgSnapshotTest(
`
quadrantChart
x-axis Low Reach --> High Reach
y-axis Low Engagement --> High Engagement
quadrant-1 We should expand
quadrant-2 Need to promote
quadrant-3 Re-evaluate
quadrant-4 May be improved
`,
{}
);
cy.get('svg');
});
it('should use all the config', () => {
imgSnapshotTest(
`
%%{init: {"quadrantChart": {"chartWidth": 600, "chartHeight": 600, "titlePadding": 20, "titleFontSize": 10, "quadrantPadding": 20, "quadrantTextTopPadding": 40, "quadrantLabelFontSize": 20, "quadrantInternalBorderStrokeWidth": 3, "quadrantExternalBorderStrokeWidth": 5, "xAxisLabelPadding": 20, "xAxisLabelFontSize": 20, "yAxisLabelPadding": 20, "yAxisLabelFontSize": 20, "pointTextPadding": 20, "pointLabelFontSize": 20, "pointRadius": 10 }}}%%
quadrantChart
title Reach and engagement of campaigns
x-axis Low Reach --> High Reach
y-axis Low Engagement --> High Engagement
quadrant-1 We should expand
quadrant-2 Need to promote
quadrant-3 Re-evaluate
quadrant-4 May be improved
Campaign A: [0.3, 0.6]
Campaign B: [0.45, 0.23]
Campaign C: [0.57, 0.69]
Campaign D: [0.78, 0.34]
Campaign E: [0.40, 0.34]
Campaign F: [0.35, 0.78]
`,
{}
);
cy.get('svg');
});
it('should use all the theme variable', () => {
imgSnapshotTest(
`
%%{init: {"themeVariables": {"quadrant1Fill": "#b4dcff","quadrant2Fill": "#fef0ff", "quadrant3Fill": "#fffaf0", "quadrant4Fill": "#f0fff2", "quadrant1TextFill": "#ff0000", "quadrant2TextFill": "#2d00df", "quadrant3TextFill": "#00ffda", "quadrant4TextFill": "#e68300", "quadrantPointFill": "#0149ff", "quadrantPointTextFill": "#dc00ff", "quadrantXAxisTextFill": "#ffb500", "quadrantYAxisTextFill": "#fae604", "quadrantInternalBorderStrokeFill": "#3636f2", "quadrantExternalBorderStrokeFill": "#ff1010", "quadrantTitleFill": "#00ea19"} }}%%
quadrantChart
title Reach and engagement of campaigns
x-axis Low Reach --> High Reach
y-axis Low Engagement --> High Engagement
quadrant-1 We should expand
quadrant-2 Need to promote
quadrant-3 Re-evaluate
quadrant-4 May be improved
Campaign A: [0.3, 0.6]
Campaign B: [0.45, 0.23]
Campaign C: [0.57, 0.69]
Campaign D: [0.78, 0.34]
Campaign E: [0.40, 0.34]
Campaign F: [0.35, 0.78]
`,
{}
);
cy.get('svg');
});
});

2
cypress/integration/rendering/requirement.spec.js
View File

@@ -1,4 +1,4 @@
import { imgSnapshotTest, renderGraph } from '../../helpers/util.js';
import { imgSnapshotTest, renderGraph } from '../../helpers/util.ts';
describe('Requirement diagram', () => {
it('sample', () => {

144
cypress/integration/rendering/sankey.spec.ts Normal file
View File

@@ -0,0 +1,144 @@
import { imgSnapshotTest, renderGraph } from '../../helpers/util.ts';
describe('Sankey Diagram', () => {
it('should render a simple example', () => {
imgSnapshotTest(
`
sankey-beta
sourceNode,targetNode,10
`,
{}
);
});
describe('when given a linkColor', function () {
this.beforeAll(() => {
cy.wrap(
`sankey-beta
a,b,10
`
).as('graph');
});
it('links should use hex color', function () {
renderGraph(this.graph, { sankey: { linkColor: '#636465' } });
cy.get('.link path').should((link) => {
expect(link.attr('stroke')).to.equal('#636465');
});
});
it('links should be the same color as source node', function () {
renderGraph(this.graph, { sankey: { linkColor: 'source' } });
cy.get('.link path').then((link) => {
cy.get('.node[id="node-1"] rect').should((node) =>
expect(link.attr('stroke')).to.equal(node.attr('fill'))
);
});
});
it('links should be the same color as target node', function () {
renderGraph(this.graph, { sankey: { linkColor: 'target' } });
cy.get('.link path').then((link) => {
cy.get('.node[id="node-2"] rect').should((node) =>
expect(link.attr('stroke')).to.equal(node.attr('fill'))
);
});
});
it('links must be gradient', function () {
renderGraph(this.graph, { sankey: { linkColor: 'gradient' } });
cy.get('.link path').should((link) => {
expect(link.attr('stroke')).to.equal('url(#linearGradient-3)');
});
});
});
describe('when given a nodeAlignment', function () {
this.beforeAll(() => {
cy.wrap(
`
sankey-beta
a,b,8
b,c,8
c,d,8
d,e,8
x,c,4
c,y,4
`
).as('graph');
});
this.afterEach(() => {
cy.get('.node[id="node-1"]').should((node) => {
expect(node.attr('x')).to.equal('0');
});
cy.get('.node[id="node-2"]').should((node) => {
expect(node.attr('x')).to.equal('100');
});
cy.get('.node[id="node-3"]').should((node) => {
expect(node.attr('x')).to.equal('200');
});
cy.get('.node[id="node-4"]').should((node) => {
expect(node.attr('x')).to.equal('300');
});
cy.get('.node[id="node-5"]').should((node) => {
expect(node.attr('x')).to.equal('400');
});
});
it('should justify nodes', function () {
renderGraph(this.graph, {
sankey: { nodeAlignment: 'justify', width: 410, useMaxWidth: false },
});
cy.get('.node[id="node-6"]').should((node) => {
expect(node.attr('x')).to.equal('0');
});
cy.get('.node[id="node-7"]').should((node) => {
expect(node.attr('x')).to.equal('400');
});
});
it('should align nodes left', function () {
renderGraph(this.graph, {
sankey: { nodeAlignment: 'left', width: 410, useMaxWidth: false },
});
cy.get('.node[id="node-6"]').should((node) => {
expect(node.attr('x')).to.equal('0');
});
cy.get('.node[id="node-7"]').should((node) => {
expect(node.attr('x')).to.equal('300');
});
});
it('should align nodes right', function () {
renderGraph(this.graph, {
sankey: { nodeAlignment: 'right', width: 410, useMaxWidth: false },
});
cy.get('.node[id="node-6"]').should((node) => {
expect(node.attr('x')).to.equal('100');
});
cy.get('.node[id="node-7"]').should((node) => {
expect(node.attr('x')).to.equal('400');
});
});
it('should center nodes', function () {
renderGraph(this.graph, {
sankey: { nodeAlignment: 'center', width: 410, useMaxWidth: false },
});
cy.get('.node[id="node-6"]').should((node) => {
expect(node.attr('x')).to.equal('100');
});
cy.get('.node[id="node-7"]').should((node) => {
expect(node.attr('x')).to.equal('300');
});
});
});
});

116
cypress/integration/rendering/sequencediagram.spec.js
View File

@@ -1,6 +1,6 @@
/// <reference types="Cypress" />
import { imgSnapshotTest, renderGraph } from '../../helpers/util';
import { imgSnapshotTest, renderGraph } from '../../helpers/util.ts';
context('Sequence diagram', () => {
it('should render a sequence diagram with boxes', () => {
@@ -88,6 +88,16 @@ context('Sequence diagram', () => {
{}
);
});
it('should handle empty lines', () => {
imgSnapshotTest(
`
sequenceDiagram
Alice->>John: Hello John<br/>
John-->>Alice: Great<br/><br/>day!
`,
{}
);
});
it('should handle line breaks and wrap annotations', () => {
imgSnapshotTest(
`
@@ -116,7 +126,109 @@ context('Sequence diagram', () => {
loop Loopy
Bob->>Alice: Pasten
end `,
{ wrap: true }
{
sequence: {
wrap: true,
},
}
);
});
it('should render a sequence diagram with par_over', () => {
imgSnapshotTest(
`
sequenceDiagram
participant Alice
participant Bob
participant John
par_over Section title
Alice ->> Bob: Message 1<br>Second line
Bob ->> John: Message 2
end
par_over Two line<br>section title
Note over Alice: Alice note
Note over Bob: Bob note<br>Second line
Note over John: John note
end
par_over Mixed section
Alice ->> Bob: Message 1
Note left of Bob: Alice/Bob Note
end
`
);
});
it('should render a sequence diagram with basic actor creation and destruction', () => {
imgSnapshotTest(
`
sequenceDiagram
Alice ->> Bob: Hello Bob, how are you ?
Bob ->> Alice: Fine, thank you. And you?
create participant Polo
Alice ->> Polo: Hi Polo!
create actor Ola1 as Ola
Polo ->> Ola1: Hiii
Ola1 ->> Alice: Hi too
destroy Ola1
Alice --x Ola1: Bye!
Alice ->> Bob: And now?
create participant Ola2 as Ola
Alice ->> Ola2: Hello again
destroy Alice
Alice --x Ola2: Bye for me!
destroy Bob
Ola2 --> Bob: The end
`
);
});
it('should render a sequence diagram with actor creation and destruction coupled with backgrounds, loops and notes', () => {
imgSnapshotTest(
`
sequenceDiagram
accTitle: test the accTitle
accDescr: Test a description
participant Alice
participant Bob
autonumber 10 10
rect rgb(200, 220, 100)
rect rgb(200, 255, 200)
Alice ->> Bob: Hello Bob, how are you?
create participant John as John<br />Second Line
Bob-->>John: How about you John?
end
Bob--x Alice: I am good thanks!
Bob-x John: I am good thanks!
Note right of John: John thinks a long<br />long time, so long<br />that the text does<br />not fit on a row.
Bob-->Alice: Checking with John...
Note over John:wrap: John looks like he's still thinking, so Bob prods him a bit.
Bob-x John: Hey John - we're still waiting to know<br />how you're doing
Note over John:nowrap: John's trying hard not to break his train of thought.
destroy John
Bob-x John: John! Cmon!
Note over John: After a few more moments, John<br />finally snaps out of it.
end
autonumber off
alt either this
create actor Lola
Alice->>+Lola: Yes
Lola-->>-Alice: OK
else or this
autonumber
Alice->>Lola: No
else or this will happen
Alice->Lola: Maybe
end
autonumber 200
par this happens in parallel
destroy Bob
Alice -->> Bob: Parallel message 1
and
Alice -->> Lola: Parallel message 2
end
`
);
});
context('font settings', () => {

8
cypress/integration/rendering/stateDiagram-v2.spec.js
View File

@@ -1,4 +1,4 @@
import { imgSnapshotTest, renderGraph } from '../../helpers/util';
import { imgSnapshotTest, renderGraph } from '../../helpers/util.ts';
describe('State diagram', () => {
it('v2 should render a simple info', () => {
@@ -530,7 +530,7 @@ stateDiagram-v2
[*] --> A
A --> B: test({ foo#colon; 'far' })
B --> [*]
classDef badBadEvent fill:#f00,color:white,font-weight:bold
classDef badBadEvent fill:#f00,color:white,font-weight:bold
class B badBadEvent
`,
{ logLevel: 0, fontFamily: 'courier' }
@@ -543,14 +543,14 @@ stateDiagram-v2
classDef notMoving fill:white
classDef movement font-style:italic;
classDef badBadEvent fill:#f00,color:white,font-weight:bold
[*] --> Still
Still --> [*]
Still --> Moving
Moving --> Still
Moving --> Crash
Crash --> [*]
class Still notMoving
class Moving, Crash movement
class Crash badBadEvent

2
cypress/integration/rendering/stateDiagram.spec.js
View File

@@ -1,4 +1,4 @@
import { imgSnapshotTest, renderGraph } from '../../helpers/util';
import { imgSnapshotTest, renderGraph } from '../../helpers/util.ts';
describe('State diagram', () => {
it('should render a simple state diagrams', () => {

2
cypress/integration/rendering/theme.spec.js
View File

@@ -1,4 +1,4 @@
import { imgSnapshotTest } from '../../helpers/util.js';
import { imgSnapshotTest } from '../../helpers/util.ts';
describe('themeCSS balancing, it', () => {
it('should not allow unbalanced CSS definitions', () => {

2
cypress/integration/rendering/timeline.spec.ts
View File

@@ -1,4 +1,4 @@
import { imgSnapshotTest } from '../../helpers/util.js';
import { imgSnapshotTest } from '../../helpers/util.ts';
describe('Timeline diagram', () => {
it('1: should render a simple timeline with no specific sections', () => {

19
cypress/integration/rendering/zenuml.spec.js Normal file
View File

@@ -0,0 +1,19 @@
import { imgSnapshotTest } from '../../helpers/util.ts';
describe('Zen UML', () => {
it('Basic Zen UML diagram', () => {
imgSnapshotTest(
`
zenuml
A.method() {
if(x) {
B.method() {
selfCall() { return X }
}
}
}
`,
{}
);
});
});