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

Lint fix

Browse Source
This commit is contained in:
Knut Sveidqvist
2021-12-08 08:42:12 +01:00
parent 0b35f9c24a be0dd22fa5
commit e0a05f83d1
1 changed files with 57 additions and 62 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -1,4 +1,3 @@
/* eslint-env jest */
import { imgSnapshotTest, renderGraph } from '../../helpers/util'; import { imgSnapshotTest, renderGraph } from '../../helpers/util';
describe('Flowchart v2', () => { describe('Flowchart v2', () => {
@@ -29,7 +28,7 @@ describe('Flowchart v2', () => {
); );
}); });
it('3: a link with correct arrowhead to a subgraph', () => { it('3: a link with correct arrowhead to a subgraph', () => {
imgSnapshotTest( imgSnapshotTest(
`flowchart TD `flowchart TD
P1 P1
@@ -69,7 +68,7 @@ describe('Flowchart v2', () => {
`flowchart TD `flowchart TD
a["<strong>Haiya</strong>"]---->b a["<strong>Haiya</strong>"]---->b
`, `,
{htmlLabels: false, flowchart: {htmlLabels: false}} { htmlLabels: false, flowchart: { htmlLabels: false } }
); );
}); });
it('6: should render non-escaped with html labels', () => { it('6: should render non-escaped with html labels', () => {
@@ -77,7 +76,7 @@ describe('Flowchart v2', () => {
`flowchart TD `flowchart TD
a["<strong>Haiya</strong>"]===>b a["<strong>Haiya</strong>"]===>b
`, `,
{htmlLabels: true, flowchart: {htmlLabels: true}, securityLevel: 'loose'} { htmlLabels: true, flowchart: { htmlLabels: true }, securityLevel: 'loose' }
); );
}); });
it('7: should render a flowchart when useMaxWidth is true (default)', () => { it('7: should render a flowchart when useMaxWidth is true (default)', () => {
@@ -91,18 +90,17 @@ describe('Flowchart v2', () => {
`, `,
{ flowchart: { useMaxWidth: true } } { flowchart: { useMaxWidth: true } }
); );
cy.get('svg') cy.get('svg').should((svg) => {
.should((svg) => { expect(svg).to.have.attr('width', '100%');
expect(svg).to.have.attr('width', '100%'); expect(svg).to.have.attr('height');
expect(svg).to.have.attr('height'); // use within because the absolute value can be slightly different depending on the environment ±5%
// use within because the absolute value can be slightly different depending on the environment ±5% const height = parseFloat(svg.attr('height'));
const height = parseFloat(svg.attr('height')); expect(height).to.be.within(446 * 0.95, 446 * 1.05);
expect(height).to.be.within(446 * .95, 446 * 1.05); const style = svg.attr('style');
const style = svg.attr('style'); expect(style).to.match(/^max-width: [\d.]+px;$/);
expect(style).to.match(/^max-width: [\d.]+px;$/); const maxWidthValue = parseFloat(style.match(/[\d.]+/g).join(''));
const maxWidthValue = parseFloat(style.match(/[\d.]+/g).join('')); expect(maxWidthValue).to.be.within(290 * 0.95 - 1, 290 * 1.05);
expect(maxWidthValue).to.be.within(290 * .95-1, 290 * 1.05); });
});
}); });
it('8: should render a flowchart when useMaxWidth is false', () => { it('8: should render a flowchart when useMaxWidth is false', () => {
renderGraph( renderGraph(
@@ -115,15 +113,14 @@ describe('Flowchart v2', () => {
`, `,
{ flowchart: { useMaxWidth: false } } { flowchart: { useMaxWidth: false } }
); );
cy.get('svg') cy.get('svg').should((svg) => {
.should((svg) => { const height = parseFloat(svg.attr('height'));
const height = parseFloat(svg.attr('height')); const width = parseFloat(svg.attr('width'));
const width = parseFloat(svg.attr('width')); // use within because the absolute value can be slightly different depending on the environment ±5%
// use within because the absolute value can be slightly different depending on the environment ±5% expect(height).to.be.within(446 * 0.95, 446 * 1.05);
expect(height).to.be.within(446 * .95, 446 * 1.05); expect(width).to.be.within(290 * 0.95 - 1, 290 * 1.05);
expect(width).to.be.within(290 * .95-1, 290 * 1.05); expect(svg).to.not.have.attr('style');
expect(svg).to.not.have.attr('style'); });
});
}); });
it('V2 - 16: Render Stadium shape', () => { it('V2 - 16: Render Stadium shape', () => {
@@ -141,7 +138,7 @@ describe('Flowchart v2', () => {
class A someclass; class A someclass;
class C someclass; class C someclass;
`, `,
{ flowchart: { htmlLabels: false } , fontFamily: 'courier'} { flowchart: { htmlLabels: false }, fontFamily: 'courier' }
); );
}); });
@@ -156,7 +153,7 @@ describe('Flowchart v2', () => {
b b
end end
`, `,
{htmlLabels: true, flowchart: {htmlLabels: true}, securityLevel: 'loose'} { htmlLabels: true, flowchart: { htmlLabels: true }, securityLevel: 'loose' }
); );
}); });
@@ -171,7 +168,7 @@ describe('Flowchart v2', () => {
b b
end end
`, `,
{htmlLabels: true, flowchart: {htmlLabels: true}, securityLevel: 'loose'} { htmlLabels: true, flowchart: { htmlLabels: true }, securityLevel: 'loose' }
); );
}); });
@@ -192,7 +189,7 @@ describe('Flowchart v2', () => {
B B
end end
`, `,
{htmlLabels: true, flowchart: {htmlLabels: true}, securityLevel: 'loose'} { htmlLabels: true, flowchart: { htmlLabels: true }, securityLevel: 'loose' }
); );
}); });
@@ -222,7 +219,7 @@ describe('Flowchart v2', () => {
routeur --> subnet1 & subnet2 routeur --> subnet1 & subnet2
subnet1 & subnet2 --> nat --> internet subnet1 & subnet2 --> nat --> internet
`, `,
{htmlLabels: true, flowchart: {htmlLabels: true}, securityLevel: 'loose'} { htmlLabels: true, flowchart: { htmlLabels: true }, securityLevel: 'loose' }
); );
}); });
@@ -236,7 +233,7 @@ describe('Flowchart v2', () => {
subcontainer-child--> subcontainer-sibling subcontainer-child--> subcontainer-sibling
end end
`, `,
{htmlLabels: true, flowchart: {htmlLabels: true}, securityLevel: 'loose'} { htmlLabels: true, flowchart: { htmlLabels: true }, securityLevel: 'loose' }
); );
}); });
@@ -258,11 +255,10 @@ end
sub_one --> sub_two sub_one --> sub_two
_one --> b _one --> b
`, `,
{htmlLabels: true, flowchart: {htmlLabels: true}, securityLevel: 'loose'} { htmlLabels: true, flowchart: { htmlLabels: true }, securityLevel: 'loose' }
); );
}); });
it('56: handle nested subgraphs with outgoing links 3', () => { it('56: handle nested subgraphs with outgoing links 3', () => {
imgSnapshotTest( imgSnapshotTest(
`flowchart TB `flowchart TB
@@ -275,7 +271,7 @@ _one --> b
end end
process_B-->|via_AWSBatch|container_Beta process_B-->|via_AWSBatch|container_Beta
`, `,
{htmlLabels: true, flowchart: {htmlLabels: true}, securityLevel: 'loose'} { htmlLabels: true, flowchart: { htmlLabels: true }, securityLevel: 'loose' }
); );
}); });
it('57: handle nested subgraphs with outgoing links 4', () => { it('57: handle nested subgraphs with outgoing links 4', () => {
@@ -288,11 +284,10 @@ subgraph B
b b
end end
`, `,
{htmlLabels: true, flowchart: {htmlLabels: true}, securityLevel: 'loose'} { htmlLabels: true, flowchart: { htmlLabels: true }, securityLevel: 'loose' }
); );
}); });
it('57: handle nested subgraphs with outgoing links 2', () => { it('57: handle nested subgraphs with outgoing links 2', () => {
imgSnapshotTest( imgSnapshotTest(
`flowchart TB `flowchart TB
@@ -310,7 +305,7 @@ end
three --> two three --> two
two --> c2 two --> c2
`, `,
{htmlLabels: true, flowchart: {htmlLabels: true}, securityLevel: 'loose'} { htmlLabels: true, flowchart: { htmlLabels: true }, securityLevel: 'loose' }
); );
}); });
it('57.x: handle nested subgraphs with outgoing links 5', () => { it('57.x: handle nested subgraphs with outgoing links 5', () => {
@@ -326,7 +321,7 @@ flowchart TB
process_A-->|messages|process_C process_A-->|messages|process_C
end end
`, `,
{htmlLabels: true, flowchart: {htmlLabels: true}, securityLevel: 'loose'} { htmlLabels: true, flowchart: { htmlLabels: true }, securityLevel: 'loose' }
); );
}); });
it('58: handle styling with style expressions', () => { it('58: handle styling with style expressions', () => {
@@ -337,7 +332,7 @@ flowchart TB
style id1 fill:#f9f,stroke:#333,stroke-width:4px style id1 fill:#f9f,stroke:#333,stroke-width:4px
style id2 fill:#bbf,stroke:#f66,stroke-width:2px,color:#fff,stroke-dasharray: 5 5 style id2 fill:#bbf,stroke:#f66,stroke-width:2px,color:#fff,stroke-dasharray: 5 5
`, `,
{htmlLabels: true, flowchart: {htmlLabels: true}, securityLevel: 'loose'} { htmlLabels: true, flowchart: { htmlLabels: true }, securityLevel: 'loose' }
); );
}); });
it('59: handle styling of subgraphs and links', () => { it('59: handle styling of subgraphs and links', () => {
@@ -359,7 +354,7 @@ flowchart TD
class T TestSub class T TestSub
linkStyle 0,1 color:orange, stroke: orange; linkStyle 0,1 color:orange, stroke: orange;
`, `,
{htmlLabels: true, flowchart: {htmlLabels: true}, securityLevel: 'loose'} { htmlLabels: true, flowchart: { htmlLabels: true }, securityLevel: 'loose' }
); );
}); });
it('60: handle styling for all node shapes - v2', () => { it('60: handle styling for all node shapes - v2', () => {
@@ -389,7 +384,7 @@ flowchart TD
style M stroke:#ff0000,fill:#ffcccc,color:#ff0000; style M stroke:#ff0000,fill:#ffcccc,color:#ff0000;
style N stroke:#0000ff,fill:#ccccff,color:#0000ff; style N stroke:#0000ff,fill:#ccccff,color:#0000ff;
`, `,
{htmlLabels: true, flowchart: {htmlLabels: true}, securityLevel: 'loose', logLevel:2} { htmlLabels: true, flowchart: { htmlLabels: true }, securityLevel: 'loose', logLevel: 2 }
); );
}); });
it('61: fontawesome icons in edge labels', () => { it('61: fontawesome icons in edge labels', () => {
@@ -398,7 +393,7 @@ flowchart TD
flowchart TD flowchart TD
C -->|fa:fa-car Car| F[fa:fa-car Car] C -->|fa:fa-car Car| F[fa:fa-car Car]
`, `,
{htmlLabels: true, flowchart: {htmlLabels: true}, securityLevel: 'loose'} { htmlLabels: true, flowchart: { htmlLabels: true }, securityLevel: 'loose' }
); );
}); });
it('62: should render styled subgraphs', () => { it('62: should render styled subgraphs', () => {
@@ -432,7 +427,7 @@ flowchart TD
style foo fill:#F99,stroke-width:2px,stroke:#F0F,color:darkred style foo fill:#F99,stroke-width:2px,stroke:#F0F,color:darkred
style bar fill:#999,stroke-width:10px,stroke:#0F0,color:blue style bar fill:#999,stroke-width:10px,stroke:#0F0,color:blue
`, `,
{htmlLabels: true, flowchart: {htmlLabels: true}, securityLevel: 'loose'} { htmlLabels: true, flowchart: { htmlLabels: true }, securityLevel: 'loose' }
); );
}); });
it('63: title on subgraphs should be themable', () => { it('63: title on subgraphs should be themable', () => {
@@ -448,7 +443,7 @@ flowchart TD
end end
A --> B A --> B
`, `,
{htmlLabels: true, flowchart: {htmlLabels: true}, securityLevel: 'loose'} { htmlLabels: true, flowchart: { htmlLabels: true }, securityLevel: 'loose' }
); );
}); });
it('65: text-color from classes', () => { it('65: text-color from classes', () => {
@@ -459,7 +454,7 @@ flowchart TD
Lorem --> Ipsum --> Dolor Lorem --> Ipsum --> Dolor
class Lorem,Dolor dark class Lorem,Dolor dark
`, `,
{htmlLabels: true, flowchart: {htmlLabels: true}, securityLevel: 'loose'} { htmlLabels: true, flowchart: { htmlLabels: true }, securityLevel: 'loose' }
); );
}); });
it('66: More nested subgraph cases (TB)', () => { it('66: More nested subgraph cases (TB)', () => {
@@ -477,7 +472,7 @@ flowchart TB
two --> c2 two --> c2
`, `,
{htmlLabels: true, flowchart: {htmlLabels: true}, securityLevel: 'loose'} { htmlLabels: true, flowchart: { htmlLabels: true }, securityLevel: 'loose' }
); );
}); });
it('67: More nested subgraph cases (RL)', () => { it('67: More nested subgraph cases (RL)', () => {
@@ -495,7 +490,7 @@ flowchart RL
two --> c2 two --> c2
`, `,
{htmlLabels: true, flowchart: {htmlLabels: true}, securityLevel: 'loose'} { htmlLabels: true, flowchart: { htmlLabels: true }, securityLevel: 'loose' }
); );
}); });
it('68: More nested subgraph cases (BT)', () => { it('68: More nested subgraph cases (BT)', () => {
@@ -513,7 +508,7 @@ flowchart BT
two --> c2 two --> c2
`, `,
{htmlLabels: true, flowchart: {htmlLabels: true}, securityLevel: 'loose'} { htmlLabels: true, flowchart: { htmlLabels: true }, securityLevel: 'loose' }
); );
}); });
it('69: More nested subgraph cases (LR)', () => { it('69: More nested subgraph cases (LR)', () => {
@@ -531,7 +526,7 @@ flowchart LR
two --> c2 two --> c2
`, `,
{htmlLabels: true, flowchart: {htmlLabels: true}, securityLevel: 'loose'} { htmlLabels: true, flowchart: { htmlLabels: true }, securityLevel: 'loose' }
); );
}); });
it('70: Handle nested subgraph cases (TB) link out and link between subgraphs', () => { it('70: Handle nested subgraph cases (TB) link out and link between subgraphs', () => {
@@ -547,7 +542,7 @@ flowchart TB
S1 --> S2 S1 --> S2
sub1 --> sub4 sub1 --> sub4
`, `,
{htmlLabels: true, flowchart: {htmlLabels: true}, securityLevel: 'loose'} { htmlLabels: true, flowchart: { htmlLabels: true }, securityLevel: 'loose' }
); );
}); });
it('71: Handle nested subgraph cases (RL) link out and link between subgraphs', () => { it('71: Handle nested subgraph cases (RL) link out and link between subgraphs', () => {
@@ -563,7 +558,7 @@ flowchart RL
S1 --> S2 S1 --> S2
sub1 --> sub4 sub1 --> sub4
`, `,
{htmlLabels: true, flowchart: {htmlLabels: true}, securityLevel: 'loose'} { htmlLabels: true, flowchart: { htmlLabels: true }, securityLevel: 'loose' }
); );
}); });
it('72: Handle nested subgraph cases (BT) link out and link between subgraphs', () => { it('72: Handle nested subgraph cases (BT) link out and link between subgraphs', () => {
@@ -579,7 +574,7 @@ flowchart BT
S1 --> S2 S1 --> S2
sub1 --> sub4 sub1 --> sub4
`, `,
{htmlLabels: true, flowchart: {htmlLabels: true}, securityLevel: 'loose'} { htmlLabels: true, flowchart: { htmlLabels: true }, securityLevel: 'loose' }
); );
}); });
it('74: Handle nested subgraph cases (RL) link out and link between subgraphs', () => { it('74: Handle nested subgraph cases (RL) link out and link between subgraphs', () => {
@@ -595,10 +590,10 @@ flowchart RL
S1 --> S2 S1 --> S2
sub1 --> sub4 sub1 --> sub4
`, `,
{htmlLabels: true, flowchart: {htmlLabels: true}, securityLevel: 'loose'} { htmlLabels: true, flowchart: { htmlLabels: true }, securityLevel: 'loose' }
); );
}); });
it('74: Handle labels for multiple edges from and to the same couple of nodes', () => { it('74: Handle labels for multiple edges from and to the same couple of nodes', () => {
imgSnapshotTest( imgSnapshotTest(
` `
flowchart RL flowchart RL
@@ -607,7 +602,7 @@ flowchart RL
a1 -- l2 --> a2 a1 -- l2 --> a2
end end
`, `,
{htmlLabels: true, flowchart: {htmlLabels: true}, securityLevel: 'loose'} { htmlLabels: true, flowchart: { htmlLabels: true }, securityLevel: 'loose' }
); );
}); });
@@ -617,11 +612,11 @@ flowchart RL
a{{"Lorem 'ipsum' dolor 'sit' amet, 'consectetur' adipiscing 'elit'."}} a{{"Lorem 'ipsum' dolor 'sit' amet, 'consectetur' adipiscing 'elit'."}}
--> b{{"Lorem #quot;ipsum#quot; dolor #quot;sit#quot; amet,#quot;consectetur#quot; adipiscing #quot;elit#quot;."}} --> b{{"Lorem #quot;ipsum#quot; dolor #quot;sit#quot; amet,#quot;consectetur#quot; adipiscing #quot;elit#quot;."}}
`, `,
{htmlLabels: true, flowchart: {htmlLabels: true}, securityLevel: 'loose'} { htmlLabels: true, flowchart: { htmlLabels: true }, securityLevel: 'loose' }
); );
}); });
it('2050: handling of different rendering direction in subgraphs', () => { it('2050: handling of different rendering direction in subgraphs', () => {
imgSnapshotTest( imgSnapshotTest(
` `
flowchart LR flowchart LR
@@ -640,7 +635,7 @@ flowchart RL
A --> TOP --> B A --> TOP --> B
B1 --> B2 B1 --> B2
`, `,
{htmlLabels: true, flowchart: {htmlLabels: true}, securityLevel: 'loose'} { htmlLabels: true, flowchart: { htmlLabels: true }, securityLevel: 'loose' }
); );
}); });
@@ -651,7 +646,7 @@ flowchart RL
default-index.js --> dot.template.js default-index.js --> dot.template.js
index.js --> module-utl.js index.js --> module-utl.js
`, `,
{htmlLabels: true, flowchart: {htmlLabels: true}, securityLevel: 'loose'} { htmlLabels: true, flowchart: { htmlLabels: true }, securityLevel: 'loose' }
) );
}) });
}); });