mirror of
https://github.com/mermaid-js/mermaid.git
synced 2025-08-31 06:06:44 +02:00
Merge branch 'next' into feat/948_packetDiagram
* next: (316 commits) Lint Remove echo RefTest Echo event Update cypress Fix applitools Fix applitools docs: fix lint docs: move community to Discord Swap condition blocks to avoid using negation Reposition const declaration to ideal place Change repetitive values into consts docs: fix swimm link Fix Update Browserslist Use pnpm/action-setup@v2 Fix lint Cleanup e2e.yml Ignore push events on merge queue Remove :: Remove :: ...
This commit is contained in:
@@ -571,4 +571,14 @@ class C13["With Città foreign language"]
|
||||
{ logLevel: 1, flowchart: { htmlLabels: false } }
|
||||
);
|
||||
});
|
||||
it('should render a simple class diagram with style definition', () => {
|
||||
imgSnapshotTest(
|
||||
`
|
||||
classDiagram-v2
|
||||
class Class10
|
||||
style Class10 fill:#f9f,stroke:#333,stroke-width:4px
|
||||
`,
|
||||
{ logLevel: 1, flowchart: { htmlLabels: false } }
|
||||
);
|
||||
});
|
||||
});
|
||||
|
@@ -1,12 +0,0 @@
|
||||
import { imgSnapshotTest } from '../../helpers/util.ts';
|
||||
|
||||
describe('Flowchart', () => {
|
||||
it('34: testing the label width in percy', () => {
|
||||
imgSnapshotTest(
|
||||
`graph TD
|
||||
A[Christmas]
|
||||
`,
|
||||
{ theme: 'forest', fontFamily: '"Noto Sans SC", sans-serif' }
|
||||
);
|
||||
});
|
||||
});
|
@@ -729,6 +729,37 @@ A ~~~ B
|
||||
{}
|
||||
);
|
||||
});
|
||||
|
||||
it('5064: Should render when subgraph child has links to outside node and subgraph', () => {
|
||||
imgSnapshotTest(
|
||||
`flowchart TB
|
||||
Out --> In
|
||||
subgraph Sub
|
||||
In
|
||||
end
|
||||
Sub --> In`
|
||||
);
|
||||
});
|
||||
|
||||
it('5059: Should render when subgraph contains only subgraphs, has link to outside and itself is part of a link', () => {
|
||||
imgSnapshotTest(
|
||||
`flowchart
|
||||
|
||||
subgraph Main
|
||||
subgraph Child1
|
||||
Node1
|
||||
Node2
|
||||
end
|
||||
subgraph Child2
|
||||
Node3
|
||||
Node4
|
||||
end
|
||||
end
|
||||
Main --> Out1
|
||||
Child2 --> Out2`
|
||||
);
|
||||
});
|
||||
|
||||
describe('Markdown strings flowchart (#4220)', () => {
|
||||
describe('html labels', () => {
|
||||
it('With styling and classes', () => {
|
||||
@@ -874,4 +905,93 @@ end
|
||||
});
|
||||
});
|
||||
});
|
||||
describe('Subgraph title margins', () => {
|
||||
it('Should render subgraphs with title margins set (LR)', () => {
|
||||
imgSnapshotTest(
|
||||
`flowchart LR
|
||||
|
||||
subgraph TOP
|
||||
direction TB
|
||||
subgraph B1
|
||||
direction RL
|
||||
i1 -->f1
|
||||
end
|
||||
subgraph B2
|
||||
direction BT
|
||||
i2 -->f2
|
||||
end
|
||||
end
|
||||
A --> TOP --> B
|
||||
B1 --> B2
|
||||
`,
|
||||
{ flowchart: { subGraphTitleMargin: { top: 10, bottom: 5 } } }
|
||||
);
|
||||
});
|
||||
it('Should render subgraphs with title margins set (TD)', () => {
|
||||
imgSnapshotTest(
|
||||
`flowchart TD
|
||||
|
||||
subgraph TOP
|
||||
direction LR
|
||||
subgraph B1
|
||||
direction RL
|
||||
i1 -->f1
|
||||
end
|
||||
subgraph B2
|
||||
direction BT
|
||||
i2 -->f2
|
||||
end
|
||||
end
|
||||
A --> TOP --> B
|
||||
B1 --> B2
|
||||
`,
|
||||
{ flowchart: { subGraphTitleMargin: { top: 8, bottom: 16 } } }
|
||||
);
|
||||
});
|
||||
it('Should render subgraphs with title margins set (LR) and htmlLabels set to false', () => {
|
||||
imgSnapshotTest(
|
||||
`flowchart LR
|
||||
|
||||
subgraph TOP
|
||||
direction TB
|
||||
subgraph B1
|
||||
direction RL
|
||||
i1 -->f1
|
||||
end
|
||||
subgraph B2
|
||||
direction BT
|
||||
i2 -->f2
|
||||
end
|
||||
end
|
||||
A --> TOP --> B
|
||||
B1 --> B2
|
||||
`,
|
||||
{
|
||||
htmlLabels: false,
|
||||
flowchart: { htmlLabels: false, subGraphTitleMargin: { top: 10, bottom: 5 } },
|
||||
}
|
||||
);
|
||||
});
|
||||
it('Should render subgraphs with title margins and edge labels', () => {
|
||||
imgSnapshotTest(
|
||||
`flowchart LR
|
||||
|
||||
subgraph TOP
|
||||
direction TB
|
||||
subgraph B1
|
||||
direction RL
|
||||
i1 --lb1-->f1
|
||||
end
|
||||
subgraph B2
|
||||
direction BT
|
||||
i2 --lb2-->f2
|
||||
end
|
||||
end
|
||||
A --lb3--> TOP --lb4--> B
|
||||
B1 --lb5--> B2
|
||||
`,
|
||||
{ flowchart: { subGraphTitleMargin: { top: 10, bottom: 5 } } }
|
||||
);
|
||||
});
|
||||
});
|
||||
});
|
||||
|
@@ -245,7 +245,10 @@ describe('Gantt diagram', () => {
|
||||
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(984 * 0.95, 984 * 1.05);
|
||||
expect(maxWidthValue).to.be.within(
|
||||
Cypress.config().viewportWidth * 0.95,
|
||||
Cypress.config().viewportWidth * 1.05
|
||||
);
|
||||
});
|
||||
});
|
||||
|
||||
@@ -285,11 +288,11 @@ describe('Gantt diagram', () => {
|
||||
{ gantt: { useMaxWidth: false } }
|
||||
);
|
||||
cy.get('svg').should((svg) => {
|
||||
// const height = parseFloat(svg.attr('height'));
|
||||
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(484 * 0.95, 484 * 1.05);
|
||||
expect(width).to.be.within(984 * 0.95, 984 * 1.05);
|
||||
expect(width).to.be.within(
|
||||
Cypress.config().viewportWidth * 0.95,
|
||||
Cypress.config().viewportWidth * 1.05
|
||||
);
|
||||
expect(svg).to.not.have.attr('style');
|
||||
});
|
||||
});
|
||||
|
@@ -701,4 +701,246 @@ gitGraph TB:
|
||||
{}
|
||||
);
|
||||
});
|
||||
it('34: should render a simple gitgraph with two branches from same commit', () => {
|
||||
imgSnapshotTest(
|
||||
`gitGraph
|
||||
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('35: should render a simple gitgraph with two branches from same commit | Vertical Branch', () => {
|
||||
imgSnapshotTest(
|
||||
`gitGraph TB:
|
||||
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('36: should render GitGraph with branch that is not used immediately', () => {
|
||||
imgSnapshotTest(
|
||||
`gitGraph LR:
|
||||
commit id:"1-abcdefg"
|
||||
branch x
|
||||
checkout main
|
||||
commit id:"2-abcdefg"
|
||||
checkout x
|
||||
commit id:"3-abcdefg"
|
||||
checkout main
|
||||
merge x
|
||||
`,
|
||||
{}
|
||||
);
|
||||
});
|
||||
it('37: should render GitGraph with branch that is not used immediately | Vertical Branch', () => {
|
||||
imgSnapshotTest(
|
||||
`gitGraph TB:
|
||||
commit id:"1-abcdefg"
|
||||
branch x
|
||||
checkout main
|
||||
commit id:"2-abcdefg"
|
||||
checkout x
|
||||
commit id:"3-abcdefg"
|
||||
checkout main
|
||||
merge x
|
||||
`,
|
||||
{}
|
||||
);
|
||||
});
|
||||
it('38: should render GitGraph with branch and sub-branch neither of which used immediately', () => {
|
||||
imgSnapshotTest(
|
||||
`gitGraph LR:
|
||||
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('39: should render GitGraph with branch and sub-branch neither of which used immediately | Vertical Branch', () => {
|
||||
imgSnapshotTest(
|
||||
`gitGraph TB:
|
||||
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('40: should render a simple gitgraph with cherry pick merge commit', () => {
|
||||
imgSnapshotTest(
|
||||
`gitGraph
|
||||
commit id: "ZERO"
|
||||
branch feature
|
||||
branch release
|
||||
checkout feature
|
||||
commit id: "A"
|
||||
commit id: "B"
|
||||
checkout main
|
||||
merge feature id: "M"
|
||||
checkout release
|
||||
cherry-pick id: "M" parent:"B"`
|
||||
);
|
||||
});
|
||||
it('41: should render default GitGraph with parallelCommits set to false', () => {
|
||||
imgSnapshotTest(
|
||||
`gitGraph
|
||||
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: false } }
|
||||
);
|
||||
});
|
||||
it('42: should render GitGraph with parallel commits', () => {
|
||||
imgSnapshotTest(
|
||||
`gitGraph
|
||||
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('43: should render GitGraph with parallel commits | Vertical Branch', () => {
|
||||
imgSnapshotTest(
|
||||
`gitGraph TB:
|
||||
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('44: should render GitGraph with unconnected branches and no parallel commits', () => {
|
||||
imgSnapshotTest(
|
||||
`gitGraph
|
||||
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: false } }
|
||||
);
|
||||
});
|
||||
it('45: should render GitGraph with unconnected branches and parallel commits', () => {
|
||||
imgSnapshotTest(
|
||||
`gitGraph
|
||||
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('46: should render GitGraph with unconnected branches and parallel commits | Vertical Branch', () => {
|
||||
imgSnapshotTest(
|
||||
`gitGraph TB:
|
||||
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 } }
|
||||
);
|
||||
});
|
||||
});
|
||||
|
@@ -44,7 +44,7 @@ describe('pie chart', () => {
|
||||
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);
|
||||
expect(maxWidthValue).to.be.within(590, 600); // depends on installed fonts: 596.2 on my PC, 597.5 on CI
|
||||
});
|
||||
});
|
||||
|
||||
@@ -59,7 +59,7 @@ describe('pie chart', () => {
|
||||
);
|
||||
cy.get('svg').should((svg) => {
|
||||
const width = parseFloat(svg.attr('width'));
|
||||
expect(width).to.eq(984);
|
||||
expect(width).to.be.within(590, 600); // depends on installed fonts: 596.2 on my PC, 597.5 on CI
|
||||
expect(svg).to.not.have.attr('style');
|
||||
});
|
||||
});
|
||||
|
@@ -930,4 +930,36 @@ context('Sequence diagram', () => {
|
||||
});
|
||||
});
|
||||
});
|
||||
context('render after error', () => {
|
||||
it('should render diagram after fixing destroy participant error', () => {
|
||||
cy.on('uncaught:exception', (err) => {
|
||||
return false;
|
||||
});
|
||||
|
||||
renderGraph([
|
||||
`sequenceDiagram
|
||||
Alice->>Bob: Hello Bob, how are you ?
|
||||
Bob->>Alice: Fine, thank you. And you?
|
||||
create participant Carl
|
||||
Alice->>Carl: Hi Carl!
|
||||
create actor D as Donald
|
||||
Carl->>D: Hi!
|
||||
destroy Carl
|
||||
Alice-xCarl: We are too many
|
||||
destroy Bo
|
||||
Bob->>Alice: I agree`,
|
||||
`sequenceDiagram
|
||||
Alice->>Bob: Hello Bob, how are you ?
|
||||
Bob->>Alice: Fine, thank you. And you?
|
||||
create participant Carl
|
||||
Alice->>Carl: Hi Carl!
|
||||
create actor D as Donald
|
||||
Carl->>D: Hi!
|
||||
destroy Carl
|
||||
Alice-xCarl: We are too many
|
||||
destroy Bob
|
||||
Bob->>Alice: I agree`,
|
||||
]);
|
||||
});
|
||||
});
|
||||
});
|
||||
|
Reference in New Issue
Block a user