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

Merge remote-tracking branch 'os_repo/5237-unified-layout-common-renderer' into alanaV11

Browse Source
This commit is contained in:
Knut Sveidqvist
2024-07-19 14:15:08 +02:00
parent 9a2865c64a 2800f555c7
commit cc0dcd68f8
67 changed files with 2430 additions and 1195 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
cypress/helpers/util.ts
View File

@@ -97,7 +97,7 @@ export const openURLAndVerifyRendering = (
const name: string = (options.name ?? cy.state('runnable').fullTitle()).replace(/\s+/g, '-');
cy.visit(url);
// cy.window().should('have.property', 'rendered', true);
cy.window().should('have.property', 'rendered', true);
cy.get('svg').should('be.visible');
if (validation) {
@@ -124,7 +124,9 @@ export const verifyScreenshot = (name: string): void => {
cy.log(`Closing eyes ${Cypress.spec.name}`);
cy.eyesClose();
} else if (useArgos) {
cy.argosScreenshot(name);
cy.argosScreenshot(name, {
threshold: 0.01,
});
} else {
cy.matchImageSnapshot(name);
}

31
cypress/integration/rendering/block.spec.js
View File

@@ -236,7 +236,7 @@ describe('Block diagram', () => {
);
});
it('BL16: width alignment - blocks shold be equal in width', () => {
it('BL17: width alignment - blocks shold be equal in width', () => {
imgSnapshotTest(
`block-beta
A("This is the text")
@@ -247,7 +247,7 @@ describe('Block diagram', () => {
);
});
it('BL17: block types 1 - square, rounded and circle', () => {
it('BL18: block types 1 - square, rounded and circle', () => {
imgSnapshotTest(
`block-beta
A["square"]
@@ -258,7 +258,7 @@ describe('Block diagram', () => {
);
});
it('BL18: block types 2 - odd, diamond and hexagon', () => {
it('BL19: block types 2 - odd, diamond and hexagon', () => {
imgSnapshotTest(
`block-beta
A>"rect_left_inv_arrow"]
@@ -269,7 +269,7 @@ describe('Block diagram', () => {
);
});
it('BL19: block types 3 - stadium', () => {
it('BL20: block types 3 - stadium', () => {
imgSnapshotTest(
`block-beta
A(["stadium"])
@@ -278,7 +278,7 @@ describe('Block diagram', () => {
);
});
it('BL20: block types 4 - lean right, lean left, trapezoid and inv trapezoid', () => {
it('BL21: block types 4 - lean right, lean left, trapezoid and inv trapezoid', () => {
imgSnapshotTest(
`block-beta
A[/"lean right"/]
@@ -290,7 +290,7 @@ describe('Block diagram', () => {
);
});
it('BL21: block types 1 - square, rounded and circle', () => {
it('BL22: block types 1 - square, rounded and circle', () => {
imgSnapshotTest(
`block-beta
A["square"]
@@ -301,7 +301,7 @@ describe('Block diagram', () => {
);
});
it('BL22: sizing - it should be possible to make a block wider', () => {
it('BL23: sizing - it should be possible to make a block wider', () => {
imgSnapshotTest(
`block-beta
A("rounded"):2
@@ -312,7 +312,7 @@ describe('Block diagram', () => {
);
});
it('BL23: sizing - it should be possible to make a composite block wider', () => {
it('BL24: sizing - it should be possible to make a composite block wider', () => {
imgSnapshotTest(
`block-beta
block:2
@@ -324,7 +324,7 @@ describe('Block diagram', () => {
);
});
it('BL24: block in the middle with space on each side', () => {
it('BL25: block in the middle with space on each side', () => {
imgSnapshotTest(
`block-beta
columns 3
@@ -335,7 +335,7 @@ describe('Block diagram', () => {
{}
);
});
it('BL25: space and an edge', () => {
it('BL26: space and an edge', () => {
imgSnapshotTest(
`block-beta
columns 5
@@ -345,7 +345,7 @@ describe('Block diagram', () => {
{}
);
});
it('BL26: block sizes for regular blocks', () => {
it('BL27: block sizes for regular blocks', () => {
imgSnapshotTest(
`block-beta
columns 3
@@ -354,7 +354,7 @@ describe('Block diagram', () => {
{}
);
});
it('BL27: composite block with a set width - f should use the available space', () => {
it('BL28: composite block with a set width - f should use the available space', () => {
imgSnapshotTest(
`block-beta
columns 3
@@ -363,11 +363,12 @@ describe('Block diagram', () => {
f
end
g
`,
`,
{}
);
});
it('BL23: composite block with a set width - f and g should split the available space', () => {
it('BL29: composite block with a set width - f and g should split the available space', () => {
imgSnapshotTest(
`block-beta
columns 3
@@ -379,7 +380,7 @@ describe('Block diagram', () => {
h
i
j
`,
`,
{}
);
});

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

@@ -1,7 +1,7 @@
import { imgSnapshotTest, renderGraph } from '../../helpers/util.ts';
describe('C4 diagram', () => {
it('should render a simple C4Context diagram', () => {
it('C4.1 should render a simple C4Context diagram', () => {
imgSnapshotTest(
`
C4Context
@@ -31,7 +31,7 @@ describe('C4 diagram', () => {
{}
);
});
it('should render a simple C4Container diagram', () => {
it('C4.2 should render a simple C4Container diagram', () => {
imgSnapshotTest(
`
C4Container
@@ -50,7 +50,7 @@ describe('C4 diagram', () => {
{}
);
});
it('should render a simple C4Component diagram', () => {
it('C4.3 should render a simple C4Component diagram', () => {
imgSnapshotTest(
`
C4Component
@@ -68,7 +68,7 @@ describe('C4 diagram', () => {
{}
);
});
it('should render a simple C4Dynamic diagram', () => {
it('C4.4 should render a simple C4Dynamic diagram', () => {
imgSnapshotTest(
`
C4Dynamic
@@ -91,7 +91,7 @@ describe('C4 diagram', () => {
{}
);
});
it('should render a simple C4Deployment diagram', () => {
it('C4.5 should render a simple C4Deployment diagram', () => {
imgSnapshotTest(
`
C4Deployment

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

@@ -76,7 +76,7 @@ describe('Class diagram V2', () => {
);
});
it('should render a simple class diagram with different visibilities', () => {
it('2.1 should render a simple class diagram with different visibilities', () => {
imgSnapshotTest(
`
classDiagram-v2
@@ -93,7 +93,7 @@ describe('Class diagram V2', () => {
);
});
it('should render multiple class diagrams', () => {
it('3: should render multiple class diagrams', () => {
imgSnapshotTest(
[
`

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

@@ -3,7 +3,7 @@ import { imgSnapshotTest } from '../../helpers/util';
describe('Error Diagrams', () => {
beforeEach(() => {
cy.on('uncaught:exception', (err) => {
expect(err.message).to.include('Parse error');
expect(err.message).to.include('error');
// return false to prevent the error from
// failing this test
return false;

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

@@ -855,7 +855,7 @@ describe('Title and arrow styling #4813', () => {
flowchart LR
A-->B
A-->C`,
{ flowchart: { defaultRenderer: 'elk' } }
{ layout: 'elk' }
);
cy.get('svg').should((svg) => {
const title = svg[0].querySelector('text');
@@ -871,15 +871,15 @@ describe('Title and arrow styling #4813', () => {
B-.-oC
C==xD
D ~~~ A`,
{ flowchart: { defaultRenderer: 'elk' } }
{ layout: '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');
// 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');
});
});
});

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

@@ -99,7 +99,7 @@ describe('Flowchart v2', () => {
const style = svg.attr('style');
expect(style).to.match(/^max-width: [\d.]+px;$/);
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(446 * 0.95 - 1, 446 * 1.05);
});
});
it('8: should render a flowchart when useMaxWidth is false', () => {
@@ -118,7 +118,7 @@ describe('Flowchart v2', () => {
const width = parseFloat(svg.attr('width'));
// 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(width).to.be.within(290 * 0.95 - 1, 290 * 1.05);
expect(width).to.be.within(446 * 0.95 - 1, 446 * 1.05);
expect(svg).to.not.have.attr('style');
});
});
@@ -1047,7 +1047,9 @@ end
A --lb3--> TOP --lb4--> B
B1 --lb5--> B2
`,
{ flowchart: { subGraphTitleMargin: { top: 10, bottom: 5 } } }
{
flowchart: { subGraphTitleMargin: { top: 10, bottom: 5 } },
}
);
});
});

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

@@ -733,7 +733,7 @@ describe('Graph', () => {
});
it('38: should render a flowchart when useMaxWidth is true (default)', () => {
renderGraph(
`graph TD
`flowchart TD
A[Christmas] -->|Get money| B(Go shopping)
B --> C{Let me think}
C -->|One| D[Laptop]
@@ -751,7 +751,7 @@ describe('Graph', () => {
const style = svg.attr('style');
expect(style).to.match(/^max-width: [\d.]+px;$/);
const maxWidthValue = parseFloat(style.match(/[\d.]+/g).join(''));
expect(maxWidthValue).to.be.within(300 * 0.9, 300 * 1.1);
expect(maxWidthValue).to.be.within(446 * 0.9, 446 * 1.1);
});
});
it('39: should render a flowchart when useMaxWidth is false', () => {
@@ -770,7 +770,7 @@ describe('Graph', () => {
const width = parseFloat(svg.attr('width'));
// use within because the absolute value can be slightly different depending on the environment ±10%
// expect(height).to.be.within(446 * 0.95, 446 * 1.05);
expect(width).to.be.within(300 * 0.9, 300 * 1.1);
expect(width).to.be.within(446 * 0.9, 446 * 1.1);
expect(svg).to.not.have.attr('style');
});
});
@@ -905,13 +905,16 @@ graph TD
it('67: should be able to style default node independently', () => {
imgSnapshotTest(
`
flowchart TD
flowchart TD
classDef default fill:#a34
hello --> default
style default stroke:#000,stroke-width:4px
`,
{ htmlLabels: true, flowchart: { htmlLabels: true }, securityLevel: 'loose' }
{
flowchart: { htmlLabels: true },
securityLevel: 'loose',
}
);
});
});

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

@@ -1532,5 +1532,41 @@ gitGraph TB:
{}
);
});
it('75: should render a gitGraph with multiple tags on a merge commit on bottom-to-top orientation', () => {
imgSnapshotTest(
`gitGraph BT:
commit id: "ZERO"
branch develop
commit id:"A"
checkout main
commit id:"ONE"
checkout develop
commit id:"B"
checkout main
merge develop id:"Release 1.0" type:HIGHLIGHT tag: "SAML v2.0" tag: "OpenID v1.1"
commit id:"TWO"
checkout develop
commit id:"C"`,
{}
);
});
});
it('76: should render a gitGraph with multiple tags on a merge commit on left-to-right orientation', () => {
imgSnapshotTest(
`gitGraph
commit id: "ZERO"
branch develop
commit id:"A"
checkout main
commit id:"ONE"
checkout develop
commit id:"B"
checkout main
merge develop id:"Release 1.0" type:HIGHLIGHT tag: "SAML v2.0" tag: "OpenID v1.1"
commit id:"TWO"
checkout develop
commit id:"C"`,
{}
);
});
});

9
cypress/integration/rendering/packet.spec.ts
View File

@@ -10,6 +10,15 @@ describe('packet structure', () => {
);
});
it('should render a simple packet diagram without ranges', () => {
imgSnapshotTest(
`packet-beta
0: "h"
1: "i"
`
);
});
it('should render a complex packet diagram', () => {
imgSnapshotTest(
`packet-beta

5
cypress/platform/viewer.js
View File

@@ -1,5 +1,5 @@
import mermaid from './mermaid.esm.mjs';
// import flowchartELK from './mermaid-flowchart-elk.esm.mjs';
import { layouts } from './mermaid-layout-elk.esm.mjs';
import externalExample from './mermaid-example-diagram.esm.mjs';
import zenUml from './mermaid-zenuml.esm.mjs';
@@ -47,8 +47,9 @@ const contentLoaded = async function () {
document.getElementsByTagName('body')[0].appendChild(div);
}
// await mermaid.registerExternalDiagrams([externalExample, zenUml, flowchartELK]);
await mermaid.registerExternalDiagrams([externalExample, zenUml]);
mermaid.registerLayoutLoaders(layouts);
mermaid.initialize(graphObj.mermaid);
await mermaid.run();
}