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

Merge branch 'develop' of https://github.com/mermaid-js/mermaid into xychart

Browse Source 
* 'develop' of https://github.com/mermaid-js/mermaid: (546 commits)
  rebuild
  chore: Use string templates
  chore: Update docs
  chore: Fix docs
  chore: Add argos token to cypress config.
  chore: Remove cy.get('svg') calls
  chore: fix Argos parallel
  chore: Support local screenshot testing without applitools or argos
  chore: Skip checking drupal links
  chore: Remove reference screenshot generation from E2E
  chore: Remove cytoscape patch.
  chore(argos): disable matchImageSnapshot
  chore(argos): put parallel mode only when necessary
  chore(argos): setup parallel mode
  chore: setup Argos Visual Testing on E2E
  Fixed linters
  Added more specs for elk detector
  Fixed wrong elk detector, check only beginning of the line for diagram keywords
  Removed unused patch
  Fix cytoscape patch
  ...
This commit is contained in:
Sidharth Vinod
2024-06-21 10:24:58 +05:30
parent 90be8dedf6 9f375139d5
commit 4f9cf4f9fc
474 changed files with 26979 additions and 18184 deletions
Download Patch File Download Diff File Expand all files Collapse all files

0
cypress/integration/rendering/block.spec.ts → cypress/integration/rendering/block.spec.js
View File

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

@@ -30,7 +30,6 @@ describe('C4 diagram', () => {
`,
{}
);
cy.get('svg');
});
it('should render a simple C4Container diagram', () => {
imgSnapshotTest(
@@ -50,7 +49,6 @@ describe('C4 diagram', () => {
`,
{}
);
cy.get('svg');
});
it('should render a simple C4Component diagram', () => {
imgSnapshotTest(
@@ -69,7 +67,6 @@ describe('C4 diagram', () => {
`,
{}
);
cy.get('svg');
});
it('should render a simple C4Dynamic diagram', () => {
imgSnapshotTest(
@@ -93,7 +90,6 @@ describe('C4 diagram', () => {
`,
{}
);
cy.get('svg');
});
it('should render a simple C4Deployment diagram', () => {
imgSnapshotTest(
@@ -117,6 +113,5 @@ describe('C4 diagram', () => {
`,
{}
);
cy.get('svg');
});
});

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

@@ -32,7 +32,6 @@ describe('Class diagram', () => {
`,
{ logLevel: 1 }
);
cy.get('svg');
});
it('2: should render a simple class diagrams with cardinality', () => {
@@ -61,7 +60,6 @@ describe('Class diagram', () => {
`,
{}
);
cy.get('svg');
});
it('3: should render a simple class diagram with different visibilities', () => {
@@ -79,7 +77,6 @@ describe('Class diagram', () => {
`,
{}
);
cy.get('svg');
});
it('4: should render a simple class diagram with comments', () => {
@@ -109,7 +106,6 @@ describe('Class diagram', () => {
`,
{}
);
cy.get('svg');
});
it('5: should render a simple class diagram with abstract method', () => {
@@ -121,7 +117,6 @@ describe('Class diagram', () => {
`,
{}
);
cy.get('svg');
});
it('6: should render a simple class diagram with static method', () => {
@@ -133,7 +128,6 @@ describe('Class diagram', () => {
`,
{}
);
cy.get('svg');
});
it('7: should render a simple class diagram with Generic class', () => {
@@ -153,7 +147,6 @@ describe('Class diagram', () => {
`,
{}
);
cy.get('svg');
});
it('8: should render a simple class diagram with Generic class and relations', () => {
@@ -174,7 +167,6 @@ describe('Class diagram', () => {
`,
{}
);
cy.get('svg');
});
it('9: should render a simple class diagram with clickable link', () => {
@@ -196,7 +188,6 @@ describe('Class diagram', () => {
`,
{}
);
cy.get('svg');
});
it('10: should render a simple class diagram with clickable callback', () => {
@@ -218,7 +209,6 @@ describe('Class diagram', () => {
`,
{}
);
cy.get('svg');
});
it('11: should render a simple class diagram with return type on method', () => {
@@ -233,7 +223,6 @@ describe('Class diagram', () => {
`,
{}
);
cy.get('svg');
});
it('12: should render a simple class diagram with generic types', () => {
@@ -249,7 +238,6 @@ describe('Class diagram', () => {
`,
{}
);
cy.get('svg');
});
it('13: should render a simple class diagram with css classes applied', () => {
@@ -267,7 +255,6 @@ describe('Class diagram', () => {
`,
{}
);
cy.get('svg');
});
it('14: should render a simple class diagram with css classes applied directly', () => {
@@ -283,7 +270,6 @@ describe('Class diagram', () => {
`,
{}
);
cy.get('svg');
});
it('15: should render a simple class diagram with css classes applied to multiple classes', () => {
@@ -298,7 +284,6 @@ describe('Class diagram', () => {
`,
{}
);
cy.get('svg');
});
it('16: should render multiple class diagrams', () => {
@@ -351,7 +336,6 @@ describe('Class diagram', () => {
],
{}
);
cy.get('svg');
});
// it('17: should render a class diagram when useMaxWidth is true (default)', () => {
@@ -421,7 +405,6 @@ describe('Class diagram', () => {
`,
{ logLevel: 1 }
);
cy.get('svg');
});
it('should render class diagram with newlines in title', () => {
@@ -439,7 +422,6 @@ describe('Class diagram', () => {
+quack()
}
`);
cy.get('svg');
});
it('should render class diagram with many newlines in title', () => {

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

@@ -218,7 +218,6 @@ describe('Entity Relationship Diagram', () => {
`,
{ loglevel: 1 }
);
cy.get('svg');
});
it('should render entities with keys', () => {

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

@@ -844,3 +844,42 @@ end
});
});
});
describe('Title and arrow styling #4813', () => {
it('should render a flowchart with title', () => {
const titleString = 'Test Title';
renderGraph(
`---
title: ${titleString}
---
flowchart LR
A-->B
A-->C`,
{ flowchart: { defaultRenderer: 'elk' } }
);
cy.get('svg').should((svg) => {
const title = svg[0].querySelector('text');
expect(title.textContent).to.contain(titleString);
});
});
it('Render with stylized arrows', () => {
renderGraph(
`
flowchart LR
A-->B
B-.-oC
C==xD
D ~~~ A`,
{ flowchart: { defaultRenderer: 'elk' } }
);
cy.get('svg').should((svg) => {
const edges = svg[0].querySelectorAll('.edges path');
console.log(edges);
expect(edges[0]).to.have.attr('pattern', 'solid');
expect(edges[1]).to.have.attr('pattern', 'dotted');
expect(edges[2]).to.have.css('stroke-width', '3.5px');
expect(edges[3]).to.have.css('stroke-width', '1.5px');
});
});
});

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

@@ -760,6 +760,51 @@ A ~~~ B
);
});
it('3258: Should render subgraphs with main graph nodeSpacing and rankSpacing', () => {
imgSnapshotTest(
`---
title: Subgraph nodeSpacing and rankSpacing example
---
flowchart LR
X --> Y
subgraph X
direction LR
A
C
end
subgraph Y
B
D
end
`,
{ flowchart: { nodeSpacing: 1, rankSpacing: 1 } }
);
});
it('3258: Should render subgraphs with large nodeSpacing and rankSpacing', () => {
imgSnapshotTest(
`---
title: Subgraph nodeSpacing and rankSpacing example
config:
flowchart:
nodeSpacing: 250
rankSpacing: 250
---
flowchart LR
X --> Y
subgraph X
direction LR
A
C
end
subgraph Y
B
D
end
`
);
});
describe('Markdown strings flowchart (#4220)', () => {
describe('html labels', () => {
it('With styling and classes', () => {
@@ -904,6 +949,18 @@ end
);
});
});
it('should not auto wrap when markdownAutoWrap is false', () => {
imgSnapshotTest(
`flowchart TD
angular_velocity["\`**angular_velocity**
*angular_displacement / duration*
[rad/s, 1/s]
{vector}\`"]
frequency["frequency\n(1 / period_duration)\n[Hz, 1/s]"]`,
{ markdownAutoWrap: false }
);
});
});
describe('Subgraph title margins', () => {
it('Should render subgraphs with title margins set (LR)', () => {

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

@@ -92,6 +92,31 @@ describe('Gantt diagram', () => {
{}
);
});
it('should handle multiple dependencies syntax with after and until', () => {
imgSnapshotTest(
`
gantt
dateFormat YYYY-MM-DD
axisFormat %d/%m
title Adding GANTT diagram to mermaid
excludes weekdays 2014-01-10
todayMarker off
section team's critical event
deadline A :milestone, crit, deadlineA, 2024-02-01, 0
deadline B :milestone, crit, deadlineB, 2024-02-15, 0
boss on leave :bossaway, 2024-01-28, 2024-02-11
section new intern
onboarding :onboarding, 2024-01-02, 1w
literature review :litreview, 2024-01-02, 10d
project A :projectA, after onboarding litreview, until deadlineA bossaway
chilling :chilling, after projectA, until deadlineA
project B :projectB, after deadlineA, until deadlineB
`,
{}
);
});
it('should FAIL redering a gantt chart for issue #1060 with invalid date', () => {
imgSnapshotTest(
`
@@ -548,7 +573,28 @@ describe('Gantt diagram', () => {
`
);
});
it('should render a gantt diagram exculding friday and saturday', () => {
imgSnapshotTest(
`gantt
title A Gantt Diagram
dateFormat YYYY-MM-DD
excludes weekends
weekend friday
section Section1
A task :a1, 2024-02-28, 10d`
);
});
it('should render a gantt diagram exculding saturday and sunday', () => {
imgSnapshotTest(
`gantt
title A Gantt Diagram
dateFormat YYYY-MM-DD
excludes weekends
weekend saturday
section Section1
A task :a1, 2024-02-28, 10d`
);
});
it('should render when compact is true', () => {
imgSnapshotTest(
`

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

@@ -943,4 +943,594 @@ gitGraph TB:
{ gitGraph: { parallelCommits: true } }
);
});
it('46: should render GitGraph with merge back and merge forward', () => {
imgSnapshotTest(
`gitGraph LR:
commit id:"1-abcdefg"
branch branch-A
branch branch-B
commit id:"2-abcdefg"
checkout branch-A
merge branch-B
checkout branch-B
merge branch-A
`,
{ gitGraph: { parallelCommits: true } }
);
});
it('47: should render GitGraph with merge back and merge forward | Vertical Branch', () => {
imgSnapshotTest(
`gitGraph TB:
commit id:"1-abcdefg"
branch branch-A
branch branch-B
commit id:"2-abcdefg"
checkout branch-A
merge branch-B
checkout branch-B
merge branch-A
`,
{ gitGraph: { parallelCommits: true } }
);
});
it('48: should render GitGraph with merge on a new branch | Vertical Branch', () => {
imgSnapshotTest(
`gitGraph LR:
commit id:"1-abcdefg"
branch branch-B order: 2
commit id:"2-abcdefg"
branch branch-A
merge main
checkout branch-B
merge branch-A
`,
{ gitGraph: { parallelCommits: true } }
);
});
it('49: should render GitGraph with merge on a new branch | Vertical Branch', () => {
imgSnapshotTest(
`gitGraph TB:
commit id:"1-abcdefg"
branch branch-B order: 2
commit id:"2-abcdefg"
branch branch-A
merge main
checkout branch-B
merge branch-A
`,
{ gitGraph: { parallelCommits: true } }
);
});
describe('Git-Graph Bottom-to-Top Orientation Tests', () => {
it('50: should render a simple gitgraph with commit on main branch | Vertical Branch - Bottom-to-top', () => {
imgSnapshotTest(
`gitGraph BT:
commit id: "1"
commit id: "2"
commit id: "3"
`,
{}
);
});
it('51: should render a simple gitgraph with commit on main branch with Id | Vertical Branch - Bottom-to-top', () => {
imgSnapshotTest(
`gitGraph BT:
commit id: "One"
commit id: "Two"
commit id: "Three"
`,
{}
);
});
it('52: should render a simple gitgraph with different commitTypes on main branch | Vertical Branch - Bottom-to-top', () => {
imgSnapshotTest(
`gitGraph BT:
commit id: "Normal Commit"
commit id: "Reverse Commit" type: REVERSE
commit id: "Highlight Commit" type: HIGHLIGHT
`,
{}
);
});
it('53: should render a simple gitgraph with tags commitTypes on main branch | Vertical Branch - Bottom-to-top', () => {
imgSnapshotTest(
`gitGraph BT:
commit id: "Normal Commit with tag" tag: "v1.0.0"
commit id: "Reverse Commit with tag" type: REVERSE tag: "RC_1"
commit id: "Highlight Commit" type: HIGHLIGHT tag: "8.8.4"
`,
{}
);
});
it('54: should render a simple gitgraph with two branches | Vertical Branch - Bottom-to-top', () => {
imgSnapshotTest(
`gitGraph BT:
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('55: should render a simple gitgraph with two branches and merge commit | Vertical Branch - Bottom-to-top', () => {
imgSnapshotTest(
`gitGraph BT:
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('56: should render a simple gitgraph with three branches and tagged merge commit | Vertical Branch - Bottom-to-top', () => {
imgSnapshotTest(
`gitGraph BT:
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('57: should render a simple gitgraph with more than 8 branches & overriding variables | Vertical Branch - Bottom-to-top', () => {
imgSnapshotTest(
`%%{init: { 'logLevel': 'debug', 'theme': 'default' , 'themeVariables': {
'gitBranchLabel0': '#ffffff',
'gitBranchLabel1': '#ffffff',
'gitBranchLabel2': '#ffffff',
'gitBranchLabel3': '#ffffff',
'gitBranchLabel4': '#ffffff',
'gitBranchLabel5': '#ffffff',
'gitBranchLabel6': '#ffffff',
'gitBranchLabel7': '#ffffff',
} } }%%
gitGraph BT:
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('58: should render a simple gitgraph with rotated labels | Vertical Branch - Bottom-to-top', () => {
imgSnapshotTest(
`%%{init: { 'logLevel': 'debug', 'theme': 'default' , 'gitGraph': {
'rotateCommitLabel': true
} } }%%
gitGraph BT:
commit id: "75f7219e83b321cd3fdde7dcf83bc7c1000a6828"
commit id: "0db4784daf82736dec4569e0dc92980d328c1f2e"
commit id: "7067e9973f9eaa6cd4a4b723c506d1eab598e83e"
commit id: "66972321ad6c199013b5b31f03b3a86fa3f9817d"
`,
{}
);
});
it('59: should render a simple gitgraph with horizontal labels | Vertical Branch - Bottom-to-top', () => {
imgSnapshotTest(
`%%{init: { 'logLevel': 'debug', 'theme': 'default' , 'gitGraph': {
'rotateCommitLabel': false
} } }%%
gitGraph BT:
commit id: "Alpha"
commit id: "Beta"
commit id: "Gamma"
commit id: "Delta"
`,
{}
);
});
it('60: should render a simple gitgraph with cherry pick commit | Vertical Branch - Bottom-to-top', () => {
imgSnapshotTest(
`
gitGraph BT:
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('61: should render a gitgraph with cherry pick commit with custom tag | Vertical Branch - Bottom-to-top', () => {
imgSnapshotTest(
`
gitGraph BT:
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('62: should render a gitgraph with cherry pick commit with no tag | Vertical Branch - Bottom-to-top', () => {
imgSnapshotTest(
`
gitGraph BT:
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('63: should render a simple gitgraph with two cherry pick commit | Vertical Branch - Bottom-to-top', () => {
imgSnapshotTest(
`
gitGraph BT:
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('64: should render commits for more than 8 branches | Vertical Branch - Bottom-to-top', () => {
imgSnapshotTest(
`
gitGraph BT:
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('65: should render a simple gitgraph with three branches,custom merge commit id,tag,type | Vertical Branch - Bottom-to-top', () => {
imgSnapshotTest(
`gitGraph BT:
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('66: should render a simple gitgraph with a title | Vertical Branch - Bottom-to-top', () => {
imgSnapshotTest(
`---
title: simple gitGraph
---
gitGraph BT:
commit id: "1-abcdefg"
`,
{}
);
});
it('67: should render a simple gitgraph overlapping commits | Vertical Branch - Bottom-to-top', () => {
imgSnapshotTest(
`gitGraph BT:
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('68: should render a simple gitgraph with two branches from same commit | Vertical Branch - Bottom-to-top', () => {
imgSnapshotTest(
`gitGraph BT:
commit id:"1-abcdefg"
commit id:"2-abcdefg"
branch feature-001
commit id:"3-abcdefg"
commit id:"4-abcdefg"
checkout main
branch feature-002
commit id:"5-abcdefg"
checkout feature-001
merge feature-002
`,
{}
);
});
it('69: should render GitGraph with branch that is not used immediately | Vertical Branch - Bottom-to-top', () => {
imgSnapshotTest(
`gitGraph BT:
commit id:"1-abcdefg"
branch x
checkout main
commit id:"2-abcdefg"
checkout x
commit id:"3-abcdefg"
checkout main
merge x
`,
{}
);
});
it('70: should render GitGraph with branch and sub-branch neither of which used immediately | Vertical Branch - Bottom-to-top', () => {
imgSnapshotTest(
`gitGraph BT:
commit id:"1-abcdefg"
branch x
checkout main
commit id:"2-abcdefg"
checkout x
commit id:"3-abcdefg"
checkout main
merge x
checkout x
branch y
checkout x
commit id:"4-abcdefg"
checkout y
commit id:"5-abcdefg"
checkout x
merge y
`,
{}
);
});
it('71: should render GitGraph with parallel commits | Vertical Branch - Bottom-to-top', () => {
imgSnapshotTest(
`gitGraph BT:
commit id:"1-abcdefg"
commit id:"2-abcdefg"
branch develop
commit id:"3-abcdefg"
commit id:"4-abcdefg"
checkout main
branch feature
commit id:"5-abcdefg"
commit id:"6-abcdefg"
checkout main
commit id:"7-abcdefg"
commit id:"8-abcdefg"
`,
{ gitGraph: { parallelCommits: true } }
);
});
it('72: should render GitGraph with unconnected branches and parallel commits | Vertical Branch - Bottom-to-top', () => {
imgSnapshotTest(
`gitGraph BT:
branch dev
branch v2
branch feat
commit id:"1-abcdefg"
commit id:"2-abcdefg"
checkout main
commit id:"3-abcdefg"
checkout dev
commit id:"4-abcdefg"
checkout v2
commit id:"5-abcdefg"
checkout main
commit id:"6-abcdefg"
`,
{ gitGraph: { parallelCommits: true } }
);
});
it('73: should render a simple gitgraph with three branches and tagged merge commit using switch instead of checkout', () => {
imgSnapshotTest(
`gitGraph
commit id: "1"
commit id: "2"
branch nice_feature
switch nice_feature
commit id: "3"
switch main
commit id: "4"
switch nice_feature
branch very_nice_feature
switch very_nice_feature
commit id: "5"
switch main
commit id: "6"
switch nice_feature
commit id: "7"
switch main
merge nice_feature id: "12345" tag: "my merge commit"
switch very_nice_feature
commit id: "8"
switch main
commit id: "9"
`,
{}
);
});
it('74: should render commits for more than 8 branches using switch instead of checkout', () => {
imgSnapshotTest(
`
gitGraph
switch main
%% Make sure to manually set the ID of all commits, for consistent visual tests
commit id: "1-abcdefg"
switch main
branch branch1
commit id: "2-abcdefg"
switch main
merge branch1
branch branch2
commit id: "3-abcdefg"
switch main
merge branch2
branch branch3
commit id: "4-abcdefg"
switch main
merge branch3
branch branch4
commit id: "5-abcdefg"
switch main
merge branch4
branch branch5
commit id: "6-abcdefg"
switch main
merge branch5
branch branch6
commit id: "7-abcdefg"
switch main
merge branch6
branch branch7
commit id: "8-abcdefg"
switch main
merge branch7
branch branch8
commit id: "9-abcdefg"
switch main
merge branch8
branch branch9
commit id: "10-abcdefg"
`,
{}
);
});
});
});

36
cypress/integration/rendering/katex.spec.js Normal file
View File

@@ -0,0 +1,36 @@
import { imgSnapshotTest } from '../../helpers/util';
describe('Katex', () => {
it('1: should render a complex Katex flowchart no htmlLabels', () => {
imgSnapshotTest(
`graph LR
A["$$f(\\relax{x}) = \\int_{-\\infty}^\\infty \\hat{f}(\\xi)\\,e^{2 \\pi i \\xi x}\\,d\\xi$$"] -->|"$$\\Bigg(\\bigg(\\Big(\\big((\\frac{-b\\pm\\sqrt{b^2-4ac}}{2a})\\big)\\Big)\\bigg)\\Bigg)$$"| B("$$1+\\frac{e^{-2\\pi}} {1+\\frac{e^{-4\\pi}} {1+\\frac{e^{-6\\pi}} {1+\\frac{e^{-8\\pi}} {1+\\cdots}}}}$$")
A -->|"$$\\overbrace{a+b+c}^{\\text{note}}$$"| C("$$\\phase{-78^\\circ}$$")
B --> D("$$x = \\begin{cases} a &\\text{if } b \\\\ c &\\text{if } d \\end{cases}$$")
C --> E("$$x(t)=c_1\\begin{bmatrix}-\\cos{t}+\\sin{t}\\\\ 2\\cos{t} \\end{bmatrix}e^{2t}$$")`,
{ fontFamily: 'courier' }
);
});
it('2: should render a Katex flowchart containing the Greek alphabet', () => {
imgSnapshotTest(
`graph LR
A["$$\\alpha\\beta\\gamma\\delta\\epsilon\\zeta\\eta\\theta\\iota\\kappa\\lambda\\mu\\nu\\xi\\omicron\\pi\\rho\\sigma\\tau\\upsilon\\phi\\chi\\psi\\omega$$"] --> B["$$\\Alpha\\Beta\\Gamma\\Delta\\Epsilon\\Zeta\\Eta\\Theta\\Iota\\Kappa\\Lambda\\Mu\\Nu\\Xi\\Omicron\\Pi\\Rho\\Sigma\\Tau\\Upsilon\\Phi\\Chi\\Psi\\Omega$$"]`,
{ fontFamily: 'courier' }
);
});
it('3: should render a Katex flowchart containing set theory symbols', () => {
imgSnapshotTest(
`graph LR
A["$$\\forall\\complement\\therefore\\emptyset\\exists\\subset\\because\\empty\\exist\\supset\\mapsto\\varnothing\\nexists\\mid\\to\\implies\\in\\land\\gets\\impliedby\\isin\\lor\\leftrightarrow\\iff\\notin\\ni\\notni\\lnot$$"] --> B["$$\\nabla\\Im\\Reals\\jmath\\partial\\image\\wp\\aleph\\Game\\weierp\\alef\\Finv\\N\\Z\\alefsym\\cnums\\natnums\\beth\\Complex\\R\\gimel\\ell\\Re\\daleth\\hbar\\real\\eth\\hslash\\reals$$"]`,
{ fontFamily: 'courier' }
);
});
// TODO: changes made to develop between Feb 13 - Feb 23 cause this test to no longer function
// it.skip('4: should render an error box originating from Katex', () => {
// imgSnapshotTest(
// `graph LR
// A["$$\\shouldBeError$$"]`,
// { fontFamily: 'courier' }
// );
// });
});

67
cypress/integration/rendering/packet.spec.ts Normal file
View File

@@ -0,0 +1,67 @@
import { imgSnapshotTest } from '../../helpers/util';
describe('packet structure', () => {
it('should render a simple packet diagram', () => {
imgSnapshotTest(
`packet-beta
title Hello world
0-10: "hello"
`
);
});
it('should render a complex packet diagram', () => {
imgSnapshotTest(
`packet-beta
0-15: "Source Port"
16-31: "Destination Port"
32-63: "Sequence Number"
64-95: "Acknowledgment Number"
96-99: "Data Offset"
100-105: "Reserved"
106: "URG"
107: "ACK"
108: "PSH"
109: "RST"
110: "SYN"
111: "FIN"
112-127: "Window"
128-143: "Checksum"
144-159: "Urgent Pointer"
160-191: "(Options and Padding)"
192-223: "data"
`
);
});
it('should render a complex packet diagram with showBits false', () => {
imgSnapshotTest(
`
---
title: "Packet Diagram"
config:
packet:
showBits: false
---
packet-beta
0-15: "Source Port"
16-31: "Destination Port"
32-63: "Sequence Number"
64-95: "Acknowledgment Number"
96-99: "Data Offset"
100-105: "Reserved"
106: "URG"
107: "ACK"
108: "PSH"
109: "RST"
110: "SYN"
111: "FIN"
112-127: "Window"
128-143: "Checksum"
144-159: "Urgent Pointer"
160-191: "(Options and Padding)"
192-223: "data"
`
);
});
});

61
cypress/integration/rendering/quadrantChart.spec.js
View File

@@ -1,4 +1,4 @@
import { imgSnapshotTest, renderGraph } from '../../helpers/util.ts';
import { imgSnapshotTest } from '../../helpers/util.ts';
describe('Quadrant Chart', () => {
it('should render if only chart type is provided', () => {
@@ -8,7 +8,6 @@ describe('Quadrant Chart', () => {
`,
{}
);
cy.get('svg');
});
it('should render a complete quadrant chart', () => {
imgSnapshotTest(
@@ -30,7 +29,6 @@ describe('Quadrant Chart', () => {
`,
{}
);
cy.get('svg');
});
it('should render without points', () => {
imgSnapshotTest(
@@ -46,7 +44,6 @@ describe('Quadrant Chart', () => {
`,
{}
);
cy.get('svg');
});
it('should able to render y-axix on right side', () => {
imgSnapshotTest(
@@ -63,7 +60,6 @@ describe('Quadrant Chart', () => {
`,
{}
);
cy.get('svg');
});
it('should able to render x-axix on bottom', () => {
imgSnapshotTest(
@@ -80,7 +76,6 @@ describe('Quadrant Chart', () => {
`,
{}
);
cy.get('svg');
});
it('should able to render x-axix on bottom and y-axis on right', () => {
imgSnapshotTest(
@@ -97,7 +92,6 @@ describe('Quadrant Chart', () => {
`,
{}
);
cy.get('svg');
});
it('should render without title', () => {
imgSnapshotTest(
@@ -112,7 +106,6 @@ describe('Quadrant Chart', () => {
`,
{}
);
cy.get('svg');
});
it('should use all the config', () => {
imgSnapshotTest(
@@ -135,7 +128,6 @@ describe('Quadrant Chart', () => {
`,
{}
);
cy.get('svg');
});
it('should use all the theme variable', () => {
imgSnapshotTest(
@@ -158,7 +150,6 @@ describe('Quadrant Chart', () => {
`,
{}
);
cy.get('svg');
});
it('should render x-axis labels in the center, if x-axis has two labels', () => {
imgSnapshotTest(
@@ -180,7 +171,6 @@ describe('Quadrant Chart', () => {
`,
{}
);
cy.get('svg');
});
it('should render y-axis labels in the center, if y-axis has two labels', () => {
imgSnapshotTest(
@@ -202,7 +192,6 @@ describe('Quadrant Chart', () => {
`,
{}
);
cy.get('svg');
});
it('should render both axes labels on the left and bottom, if both axes have only one label', () => {
imgSnapshotTest(
@@ -224,6 +213,52 @@ describe('Quadrant Chart', () => {
`,
{}
);
cy.get('svg');
});
it('it should render data points with styles', () => {
imgSnapshotTest(
`
quadrantChart
title Reach and engagement of campaigns
x-axis Reach -->
y-axis 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] radius: 20
Campaign B: [0.45, 0.23] color: #ff0000
Campaign C: [0.57, 0.69] stroke-color: #ff00ff
Campaign D: [0.78, 0.34] stroke-width: 3px
Campaign E: [0.40, 0.34] radius: 20, color: #ff0000 , stroke-color : #ff00ff, stroke-width : 3px
Campaign F: [0.35, 0.78] stroke-width: 3px , color: #ff0000, radius: 20, stroke-color: #ff00ff
Campaign G: [0.22, 0.22] stroke-width: 3px , color: #309708 , radius : 20 , stroke-color: #5060ff
Campaign H: [0.22, 0.44]
`,
{}
);
});
it('it should render data points with styles + classes', () => {
imgSnapshotTest(
`
quadrantChart
title Reach and engagement of campaigns
x-axis Reach -->
y-axis Engagement -->
quadrant-1 We should expand
quadrant-2 Need to promote
quadrant-3 Re-evaluate
quadrant-4 May be improved
Campaign A:::class1: [0.3, 0.6] radius: 20
Campaign B: [0.45, 0.23] color: #ff0000
Campaign C: [0.57, 0.69] stroke-color: #ff00ff
Campaign D:::class2: [0.78, 0.34] stroke-width: 3px
Campaign E:::class2: [0.40, 0.34] radius: 20, color: #ff0000, stroke-color: #ff00ff, stroke-width: 3px
Campaign F:::class1: [0.35, 0.78]
classDef class1 color: #908342, radius : 10, stroke-color: #310085, stroke-width: 10px
classDef class2 color: #f00fff, radius : 10
`
);
});
});

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

@@ -44,6 +44,5 @@ describe('Requirement diagram', () => {
`,
{}
);
cy.get('svg');
});
});

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

@@ -1,4 +1,4 @@
/// <reference types="Cypress" />
// <reference types="Cypress" />
import { imgSnapshotTest, renderGraph } from '../../helpers/util.ts';
@@ -68,6 +68,19 @@ context('Sequence diagram', () => {
{ sequence: { actorFontFamily: 'courier' } }
);
});
it('should render bidirectional arrows', () => {
imgSnapshotTest(
`
sequenceDiagram
Alice<<->>John: Hello John, how are you?
Alice<<-->>John: Hi Alice, I can hear you!
John<<->>Alice: This also works the other way
John<<-->>Alice: Yes
Alice->John: Test
John->>Alice: Still works
`
);
});
it('should handle different line breaks', () => {
imgSnapshotTest(
`
@@ -375,7 +388,7 @@ context('Sequence diagram', () => {
{}
);
});
it('should have actor-top and actor-bottom classes on top and bottom actor box and symbol', () => {
it('should have actor-top and actor-bottom classes on top and bottom actor box and symbol and actor-box and actor-man classes for text tags', () => {
imgSnapshotTest(
`
sequenceDiagram
@@ -394,6 +407,9 @@ context('Sequence diagram', () => {
cy.get('.actor-man').should('have.class', 'actor-bottom');
cy.get('.actor.actor-bottom').should('not.have.class', 'actor-top');
cy.get('.actor-man.actor-bottom').should('not.have.class', 'actor-top');
cy.get('text.actor-box').should('include.text', 'Alice');
cy.get('text.actor-man').should('include.text', 'Bob');
});
it('should render long notes left of actor', () => {
imgSnapshotTest(
@@ -461,6 +477,18 @@ context('Sequence diagram', () => {
{}
);
});
it('should render notes over actors and participant', () => {
imgSnapshotTest(
`
sequenceDiagram
actor Alice
participant Charlie
note over Alice: some note
note over Charlie: other note
`,
{}
);
});
it('should render long messages from an actor to the left to one to the right', () => {
imgSnapshotTest(
`
@@ -807,7 +835,10 @@ context('Sequence diagram', () => {
note left of Alice: config: mirrorActors=true<br/>directive: mirrorActors=false
Bob->>Alice: Short as well
`,
{ logLevel: 0, sequence: { mirrorActors: true, noteFontSize: 18, noteFontFamily: 'Arial' } }
{
logLevel: 0,
sequence: { mirrorActors: true, noteFontSize: 18, noteFontFamily: 'Arial' },
}
);
});
});
@@ -858,7 +889,10 @@ context('Sequence diagram', () => {
a->>j: Hello John, how are you?
j-->>a: Great!
`,
{ logLevel: 0, sequence: { mirrorActors: true, noteFontSize: 18, noteFontFamily: 'Arial' } }
{
logLevel: 0,
sequence: { mirrorActors: true, noteFontSize: 18, noteFontFamily: 'Arial' },
}
);
});
it('should support actor links and properties when not mirrored EXPERIMENTAL: USE WITH CAUTION', () => {

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

@@ -8,7 +8,6 @@ describe('State diagram', () => {
`,
{ logLevel: 1, fontFamily: 'courier' }
);
cy.get('svg');
});
it('v2 should render a simple state diagrams', () => {
imgSnapshotTest(
@@ -20,7 +19,6 @@ describe('State diagram', () => {
`,
{ logLevel: 0, fontFamily: 'courier' }
);
cy.get('svg');
});
it('v2 should render a long descriptions instead of id when available', () => {
imgSnapshotTest(
@@ -32,7 +30,6 @@ describe('State diagram', () => {
`,
{ logLevel: 0, fontFamily: 'courier' }
);
cy.get('svg');
});
it('v2 should render a long descriptions with additional descriptions', () => {
imgSnapshotTest(
@@ -44,7 +41,6 @@ describe('State diagram', () => {
`,
{ logLevel: 0, fontFamily: 'courier' }
);
cy.get('svg');
});
it('v2 should render a single state with short descriptions', () => {
imgSnapshotTest(
@@ -55,7 +51,6 @@ describe('State diagram', () => {
`,
{ logLevel: 0, fontFamily: 'courier' }
);
cy.get('svg');
});
it('v2 should render a transition descriptions with new lines', () => {
imgSnapshotTest(
@@ -69,7 +64,6 @@ describe('State diagram', () => {
`,
{ logLevel: 0, fontFamily: 'courier' }
);
cy.get('svg');
});
it('v2 should render a state with a note', () => {
imgSnapshotTest(
@@ -83,7 +77,6 @@ describe('State diagram', () => {
`,
{ logLevel: 0, fontFamily: 'courier' }
);
cy.get('svg');
});
it('v2 should render a state with on the left side when so specified', () => {
imgSnapshotTest(
@@ -97,7 +90,6 @@ describe('State diagram', () => {
`,
{ logLevel: 0, fontFamily: 'courier' }
);
cy.get('svg');
});
it('v2 should render a state with a note together with another state', () => {
imgSnapshotTest(
@@ -113,7 +105,6 @@ describe('State diagram', () => {
`,
{ logLevel: 0, fontFamily: 'courier' }
);
cy.get('svg');
});
it('v2 should render a note with multiple lines in it', () => {
imgSnapshotTest(
@@ -156,7 +147,6 @@ describe('State diagram', () => {
`,
{ logLevel: 0, fontFamily: 'courier' }
);
cy.get('svg');
});
it('v2 should render a simple state diagrams 2', () => {
imgSnapshotTest(
@@ -169,7 +159,6 @@ describe('State diagram', () => {
`,
{ logLevel: 0, fontFamily: 'courier' }
);
cy.get('svg');
});
it('v2 should render a simple state diagrams with labels', () => {
imgSnapshotTest(
@@ -185,7 +174,6 @@ describe('State diagram', () => {
`,
{ logLevel: 0, fontFamily: 'courier' }
);
cy.get('svg');
});
it('v2 should render state descriptions', () => {
imgSnapshotTest(
@@ -198,7 +186,6 @@ describe('State diagram', () => {
`,
{ logLevel: 0, fontFamily: 'courier' }
);
cy.get('svg');
});
it('v2 should render composite states', () => {
imgSnapshotTest(
@@ -217,7 +204,6 @@ describe('State diagram', () => {
`,
{ logLevel: 0, fontFamily: 'courier' }
);
cy.get('svg');
});
it('v2 should render multiple composite states', () => {
imgSnapshotTest(
@@ -287,7 +273,6 @@ describe('State diagram', () => {
`,
{ logLevel: 0, fontFamily: 'courier' }
);
cy.get('svg');
});
it('v2 should render concurrency states', () => {
imgSnapshotTest(
@@ -311,7 +296,6 @@ describe('State diagram', () => {
`,
{ logLevel: 0, fontFamily: 'courier' }
);
cy.get('svg');
});
it('v2 should render a state with states in it', () => {
imgSnapshotTest(

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

@@ -10,7 +10,6 @@ describe('State diagram', () => {
`,
{ logLevel: 0, fontFamily: 'courier' }
);
cy.get('svg');
});
it('should render a long descriptions instead of id when available', () => {
imgSnapshotTest(
@@ -22,7 +21,6 @@ describe('State diagram', () => {
`,
{ logLevel: 0, fontFamily: 'courier' }
);
cy.get('svg');
});
it('should render a long descriptions with additional descriptions', () => {
imgSnapshotTest(
@@ -34,7 +32,6 @@ describe('State diagram', () => {
`,
{ logLevel: 0, fontFamily: 'courier' }
);
cy.get('svg');
});
it('should render a single state with short descriptions', () => {
imgSnapshotTest(
@@ -45,7 +42,6 @@ describe('State diagram', () => {
`,
{ logLevel: 0, fontFamily: 'courier' }
);
cy.get('svg');
});
it('should render a transition descriptions with new lines', () => {
imgSnapshotTest(
@@ -59,7 +55,6 @@ describe('State diagram', () => {
`,
{ logLevel: 0, fontFamily: 'courier' }
);
cy.get('svg');
});
it('should render a state with a note', () => {
imgSnapshotTest(
@@ -73,7 +68,6 @@ describe('State diagram', () => {
`,
{ logLevel: 0, fontFamily: 'courier' }
);
cy.get('svg');
});
it('should render a state with on the left side when so specified', () => {
imgSnapshotTest(
@@ -87,7 +81,6 @@ describe('State diagram', () => {
`,
{ logLevel: 0, fontFamily: 'courier' }
);
cy.get('svg');
});
it('should render a state with a note together with another state', () => {
imgSnapshotTest(
@@ -103,7 +96,6 @@ describe('State diagram', () => {
`,
{ logLevel: 0, fontFamily: 'courier' }
);
cy.get('svg');
});
it('should render a note with multiple lines in it', () => {
imgSnapshotTest(
@@ -146,7 +138,6 @@ describe('State diagram', () => {
`,
{ logLevel: 0, fontFamily: 'courier' }
);
cy.get('svg');
});
it('should render a simple state diagrams 2', () => {
imgSnapshotTest(
@@ -159,7 +150,6 @@ describe('State diagram', () => {
`,
{ logLevel: 0, fontFamily: 'courier' }
);
cy.get('svg');
});
it('should render a simple state diagrams with labels', () => {
imgSnapshotTest(
@@ -175,7 +165,6 @@ describe('State diagram', () => {
`,
{ logLevel: 0, fontFamily: 'courier' }
);
cy.get('svg');
});
it('should render state descriptions', () => {
imgSnapshotTest(
@@ -188,7 +177,6 @@ describe('State diagram', () => {
`,
{ logLevel: 0, fontFamily: 'courier' }
);
cy.get('svg');
});
it('should render composite states', () => {
imgSnapshotTest(
@@ -207,7 +195,6 @@ describe('State diagram', () => {
`,
{ logLevel: 0, fontFamily: 'courier' }
);
cy.get('svg');
});
it('should render multiple composit states', () => {
imgSnapshotTest(
@@ -277,7 +264,6 @@ describe('State diagram', () => {
`,
{ logLevel: 0, fontFamily: 'courier' }
);
cy.get('svg');
});
it('should render concurrency states', () => {
imgSnapshotTest(
@@ -301,7 +287,6 @@ describe('State diagram', () => {
`,
{ logLevel: 0, fontFamily: 'courier' }
);
cy.get('svg');
});
it('should render a state with states in it', () => {
imgSnapshotTest(

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

@@ -10,7 +10,6 @@ describe('themeCSS balancing, it', () => {
`,
{}
);
cy.get('svg');
});
it('should not allow unbalanced CSS definitions 2', () => {
imgSnapshotTest(
@@ -21,7 +20,6 @@ describe('themeCSS balancing, it', () => {
`,
{}
);
cy.get('svg');
});
});
@@ -45,7 +43,6 @@ describe('Pie Chart', () => {
`,
{ theme }
);
cy.get('svg');
});
it('should render a flowchart diagram', () => {
imgSnapshotTest(
@@ -70,7 +67,6 @@ describe('Pie Chart', () => {
`,
{ theme }
);
cy.get('svg');
});
it('should render a new flowchart diagram', () => {
imgSnapshotTest(
@@ -96,7 +92,6 @@ describe('Pie Chart', () => {
`,
{ theme }
);
cy.get('svg');
});
it('should render a sequence diagram', () => {
imgSnapshotTest(
@@ -125,7 +120,6 @@ describe('Pie Chart', () => {
`,
{ theme }
);
cy.get('svg');
});
it('should render a class diagram', () => {
@@ -175,7 +169,6 @@ describe('Pie Chart', () => {
`,
{ theme }
);
cy.get('svg');
});
it('should render a state diagram', () => {
imgSnapshotTest(
@@ -210,7 +203,6 @@ stateDiagram
`,
{ theme }
);
cy.get('svg');
});
it('should render a state diagram (v2)', () => {
imgSnapshotTest(
@@ -245,7 +237,6 @@ stateDiagram-v2
`,
{ theme }
);
cy.get('svg');
});
it('should render a er diagram', () => {
imgSnapshotTest(
@@ -266,7 +257,6 @@ erDiagram
`,
{ theme }
);
cy.get('svg');
});
it('should render a user journey diagram', () => {
imgSnapshotTest(
@@ -287,7 +277,6 @@ erDiagram
`,
{ theme }
);
cy.get('svg');
});
it('should render a gantt diagram', () => {
cy.clock(new Date('2014-01-06').getTime());
@@ -326,7 +315,6 @@ erDiagram
`,
{ theme }
);
cy.get('svg');
});
});
});

15
cypress/integration/rendering/xyChart.spec.js
View File

@@ -10,7 +10,6 @@ describe('XY Chart', () => {
`,
{}
);
cy.get('svg');
});
it('Should render a complete chart', () => {
imgSnapshotTest(
@@ -36,7 +35,6 @@ describe('XY Chart', () => {
`,
{}
);
cy.get('svg');
});
it('y-axis title not required', () => {
imgSnapshotTest(
@@ -49,7 +47,6 @@ describe('XY Chart', () => {
`,
{}
);
cy.get('svg');
});
it('Should render a chart without y-axis with different range', () => {
imgSnapshotTest(
@@ -61,7 +58,6 @@ describe('XY Chart', () => {
`,
{}
);
cy.get('svg');
});
it('x axis title not required', () => {
imgSnapshotTest(
@@ -73,7 +69,6 @@ describe('XY Chart', () => {
`,
{}
);
cy.get('svg');
});
it('Decimals and negative numbers are supported', () => {
imgSnapshotTest(
@@ -84,7 +79,6 @@ describe('XY Chart', () => {
`,
{}
);
cy.get('svg');
});
it('Render spark line with "plotReservedSpacePercent"', () => {
imgSnapshotTest(
@@ -102,7 +96,6 @@ describe('XY Chart', () => {
`,
{}
);
cy.get('svg');
});
it('Render spark bar without displaying other property', () => {
imgSnapshotTest(
@@ -129,7 +122,6 @@ describe('XY Chart', () => {
`,
{}
);
cy.get('svg');
});
it('Should use all the config from directive', () => {
imgSnapshotTest(
@@ -144,7 +136,6 @@ describe('XY Chart', () => {
`,
{}
);
cy.get('svg');
});
it('Should use all the config from yaml', () => {
imgSnapshotTest(
@@ -185,7 +176,6 @@ describe('XY Chart', () => {
`,
{}
);
cy.get('svg');
});
it('Render with show axis title false', () => {
imgSnapshotTest(
@@ -207,7 +197,6 @@ describe('XY Chart', () => {
`,
{}
);
cy.get('svg');
});
it('Render with show axis label false', () => {
imgSnapshotTest(
@@ -229,7 +218,6 @@ describe('XY Chart', () => {
`,
{}
);
cy.get('svg');
});
it('Render with show axis tick false', () => {
imgSnapshotTest(
@@ -251,7 +239,6 @@ describe('XY Chart', () => {
`,
{}
);
cy.get('svg');
});
it('Render with show axis line false', () => {
imgSnapshotTest(
@@ -273,7 +260,6 @@ describe('XY Chart', () => {
`,
{}
);
cy.get('svg');
});
it('Render all the theme color', () => {
imgSnapshotTest(
@@ -303,7 +289,6 @@ describe('XY Chart', () => {
`,
{}
);
cy.get('svg');
});
});