diff --git a/.gitignore b/.gitignore
index a1b467100..69f442484 100644
--- a/.gitignore
+++ b/.gitignore
@@ -18,3 +18,4 @@ dist/classTest.html
dist/sequenceTest.html
.vscode/
+cypress/platform/current.html
\ No newline at end of file
diff --git a/cypress/integration/rendering/flowchart.spec.js b/cypress/integration/rendering/flowchart.spec.js
index 4ea4cbcee..2c20090a4 100644
--- a/cypress/integration/rendering/flowchart.spec.js
+++ b/cypress/integration/rendering/flowchart.spec.js
@@ -512,7 +512,7 @@ describe('Flowchart', () => {
);
});
- it('24: Keep node label text (if already defined) when a style is applied', () => {
+ it('24.1: Keep node label text (if already defined) when a style is applied', () => {
imgSnapshotTest(
`graph LR
A(( )) -->|step 1| B(( ))
@@ -524,4 +524,55 @@ describe('Flowchart', () => {
{ flowchart: { htmlLabels: false } }
);
});
+it('24.2: Handle link click events (link, anchor, mailto, other protocol, script)', () => {
+ imgSnapshotTest(
+ `graph TB
+ TITLE["Link Click Events
(click the nodes below)"]
+ A[link test]
+ B[anchor test]
+ C[mailto test]
+ D[other protocol test]
+ E[script test]
+ TITLE --> A & B & C & D & E
+ click A "https://mermaid-js.github.io/mermaid/#/" "link test"
+ click B "#link-clicked" "anchor test"
+ click C "mailto:user@user.user" "mailto test"
+ click D "notes://do-your-thing/id" "other protocol test"
+ click E "javascript:alert('test')" "script test"
+ `,
+ { securityLevel: 'loose' }
+ );
+ });
+
+ it('25: Set node text color according to style when html labels are enabled', () => {
+ imgSnapshotTest(
+ `graph LR
+ A[red
text] --> B(blue
text)
+ C[/red
text/] --> D{blue
text}
+ style A color:red;
+ style B color:blue;
+ style C stroke:#ff0000,fill:#ffcccc,color:#ff0000
+ style D stroke:#0000ff,fill:#ccccff,color:#0000ff
+ click B "index.html#link-clicked" "link test"
+ click D testClick "click test"
+ `,
+ { flowchart: { htmlLabels: true } }
+ );
+ });
+
+ it('26: Set node text color according to style when html labels are disabled', () => {
+ imgSnapshotTest(
+ `graph LR
+ A[red
text] --> B(blue
text)
+ C[/red
text/] --> D{blue
text}
+ style A color:red;
+ style B color:blue;
+ style C stroke:#ff0000,fill:#ffcccc,color:#ff0000
+ style D stroke:#0000ff,fill:#ccccff,color:#0000ff
+ click B "index.html#link-clicked" "link test"
+ click D testClick "click test"
+ `,
+ { flowchart: { htmlLabels: false } }
+ );
+ });
});
diff --git a/cypress/integration/rendering/stateDiagram.spec.js b/cypress/integration/rendering/stateDiagram.spec.js
index 3e0bf1e1c..db257f76c 100644
--- a/cypress/integration/rendering/stateDiagram.spec.js
+++ b/cypress/integration/rendering/stateDiagram.spec.js
@@ -319,7 +319,7 @@ describe('State diagram', () => {
}
);
});
- it('Simplest compone state', () => {
+ it('Simplest composit state', () => {
imgSnapshotTest(
`
stateDiagram
@@ -332,5 +332,17 @@ describe('State diagram', () => {
}
);
});
+ it('should handle multiple arrows from one node to another', () => {
+ imgSnapshotTest(
+ `
+ stateDiagram
+ a --> b: Start
+ a --> b: Stop
+ `,
+ {
+ logLevel: 0,
+ }
+ );
+ });
});
diff --git a/cypress/platform/current.html b/cypress/platform/current.html
index d2e48875c..a5c6d2bec 100644
--- a/cypress/platform/current.html
+++ b/cypress/platform/current.html
@@ -5,33 +5,28 @@
rel="stylesheet"
/>