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

fix: rendering test cases

Browse Source 
on-behalf-of: @Mermaid-Chart <hello@mermaidchart.com>
This commit is contained in:
omkarht
2025-08-08 19:31:56 +05:30
parent 4bece53a3c
commit 716548548a
2 changed files with 300 additions and 285 deletions
Download Patch File Download Diff File Expand all files Collapse all files

583
cypress/integration/rendering/sequencediagram-v2.spec.js
View File

@@ -2,49 +2,50 @@ import { imgSnapshotTest, renderGraph } from '../../helpers/util.ts';
const looks = ['classic']; const looks = ['classic'];
const participantTypes = [ const participantTypes = [
'participant', { type: 'participant', display: 'participant' },
'actor', { type: 'actor', display: 'actor' },
'boundary', { type: 'boundary', display: 'boundary' },
'control', { type: 'control', display: 'control' },
'entity', { type: 'entity', display: 'entity' },
'database', { type: 'database', display: 'database' },
'collections', { type: 'collections', display: 'collections' },
'queue', { type: 'queue', display: 'queue' },
]; ];
const interactionTypes = [ const restrictedTypes = ['boundary', 'control', 'entity', 'database', 'collections', 'queue'];
'->>', // Solid arrow with arrowhead
'-->>', // Dotted arrow with arrowhead const interactionTypes = ['->>', '-->>', '->', '-->', '-x', '--x', '->>+', '-->>+'];
'->', // Solid arrow without arrowhead
'-->', // Dotted arrow without arrowhead
'-x', // Solid arrow with cross
'--x', // Dotted arrow with cross
'->>+', // Solid arrow with arrowhead (activate)
'-->>+', // Dotted arrow with arrowhead (activate)
];
const notePositions = ['left of', 'right of', 'over']; const notePositions = ['left of', 'right of', 'over'];
function getParticipantLine(name, type, alias) {
if (restrictedTypes.includes(type)) {
return ` participant ${name}@{ "type" : "${type}" }\n`;
} else if (alias) {
return ` participant ${name}@{ "type" : "${type}" } \n`;
} else {
return ` participant ${name}@{ "type" : "${type}" }\n`;
}
}
looks.forEach((look) => { looks.forEach((look) => {
describe(`Sequence Diagram Tests - ${look} look`, () => { describe(`Sequence Diagram Tests - ${look} look`, () => {
it('should render all participant types', () => { it('should render all participant types', () => {
let diagramCode = `sequenceDiagram\n`; let diagramCode = `sequenceDiagram\n`;
participantTypes.forEach((type, index) => { participantTypes.forEach((pt, index) => {
diagramCode += ` ${type} ${type}${index} as ${type} ${index}\n`; const name = `${pt.display}${index}`;
diagramCode += getParticipantLine(name, pt.type);
}); });
// Add some basic interactions
for (let i = 0; i < participantTypes.length - 1; i++) { for (let i = 0; i < participantTypes.length - 1; i++) {
diagramCode += ` ${participantTypes[i]}${i} ->> ${participantTypes[i + 1]}${i + 1}: Message ${i}\n`; diagramCode += ` ${participantTypes[i].display}${i} ->> ${participantTypes[i + 1].display}${i + 1}: Message ${i}\n`;
} }
imgSnapshotTest(diagramCode, { look, sequence: { diagramMarginX: 50, diagramMarginY: 10 } }); imgSnapshotTest(diagramCode, { look, sequence: { diagramMarginX: 50, diagramMarginY: 10 } });
}); });
it('should render all interaction types', () => { it('should render all interaction types', () => {
let diagramCode = `sequenceDiagram\n`; let diagramCode = `sequenceDiagram\n`;
// Create two participants diagramCode += getParticipantLine('A', 'actor');
// Add all interaction types diagramCode += getParticipantLine('B', 'boundary');
diagramCode += ` participant A\n`;
diagramCode += ` participant B\n`;
interactionTypes.forEach((interaction, index) => { interactionTypes.forEach((interaction, index) => {
diagramCode += ` A ${interaction} B: ${interaction} message ${index}\n`; diagramCode += ` A ${interaction} B: ${interaction} message ${index}\n`;
}); });
@@ -53,13 +54,14 @@ looks.forEach((look) => {
it('should render participant creation and destruction', () => { it('should render participant creation and destruction', () => {
let diagramCode = `sequenceDiagram\n`; let diagramCode = `sequenceDiagram\n`;
participantTypes.forEach((type, index) => { participantTypes.forEach((pt, index) => {
diagramCode += ` ${type} A\n`; const name = `${pt.display}${index}`;
diagramCode += ` ${type} B\n`; diagramCode += getParticipantLine('A', pt.type);
diagramCode += ` create ${type} ${type}${index}\n`; diagramCode += getParticipantLine('B', pt.type);
diagramCode += ` A ->> ${type}${index}: Hello ${type}\n`; diagramCode += ` create participant ${name}@{ "type" : "${pt.type}" }\n`;
diagramCode += ` A ->> ${name}: Hello ${pt.display}\n`;
if (index % 2 === 0) { if (index % 2 === 0) {
diagramCode += ` destroy ${type}${index}\n`; diagramCode += ` destroy ${name}\n`;
} }
}); });
imgSnapshotTest(diagramCode, { look }); imgSnapshotTest(diagramCode, { look });
@@ -67,8 +69,8 @@ looks.forEach((look) => {
it('should render notes in all positions', () => { it('should render notes in all positions', () => {
let diagramCode = `sequenceDiagram\n`; let diagramCode = `sequenceDiagram\n`;
diagramCode += ` participant A\n`; diagramCode += getParticipantLine('A', 'actor');
diagramCode += ` participant B\n`; diagramCode += getParticipantLine('B', 'boundary');
notePositions.forEach((position, index) => { notePositions.forEach((position, index) => {
diagramCode += ` Note ${position} A: Note ${position} ${index}\n`; diagramCode += ` Note ${position} A: Note ${position} ${index}\n`;
}); });
@@ -78,12 +80,12 @@ looks.forEach((look) => {
it('should render parallel interactions', () => { it('should render parallel interactions', () => {
let diagramCode = `sequenceDiagram\n`; let diagramCode = `sequenceDiagram\n`;
participantTypes.slice(0, 4).forEach((type, index) => { participantTypes.slice(0, 4).forEach((pt, index) => {
diagramCode += ` ${type} ${type}${index}\n`; diagramCode += getParticipantLine(`${pt.display}${index}`, pt.type);
}); });
diagramCode += ` par Parallel actions\n`; diagramCode += ` par Parallel actions\n`;
for (let i = 0; i < participantTypes.length - 1; i += 2) { for (let i = 0; i < 3; i += 2) {
diagramCode += ` ${participantTypes[i]}${i} ->> ${participantTypes[i + 1]}${i + 1}: Message ${i}\n`; diagramCode += ` ${participantTypes[i].display}${i} ->> ${participantTypes[i + 1].display}${i + 1}: Message ${i}\n`;
if (i < participantTypes.length - 2) { if (i < participantTypes.length - 2) {
diagramCode += ` and\n`; diagramCode += ` and\n`;
} }
@@ -94,8 +96,8 @@ looks.forEach((look) => {
it('should render alternative flows', () => { it('should render alternative flows', () => {
let diagramCode = `sequenceDiagram\n`; let diagramCode = `sequenceDiagram\n`;
diagramCode += ` participant A\n`; diagramCode += getParticipantLine('A', 'actor');
diagramCode += ` participant B\n`; diagramCode += getParticipantLine('B', 'boundary');
diagramCode += ` alt Successful case\n`; diagramCode += ` alt Successful case\n`;
diagramCode += ` A ->> B: Request\n`; diagramCode += ` A ->> B: Request\n`;
diagramCode += ` B -->> A: Success\n`; diagramCode += ` B -->> A: Success\n`;
@@ -108,12 +110,12 @@ looks.forEach((look) => {
it('should render loops', () => { it('should render loops', () => {
let diagramCode = `sequenceDiagram\n`; let diagramCode = `sequenceDiagram\n`;
participantTypes.slice(0, 3).forEach((type, index) => { participantTypes.slice(0, 3).forEach((pt, index) => {
diagramCode += ` ${type} ${type}${index}\n`; diagramCode += getParticipantLine(`${pt.display}${index}`, pt.type);
}); });
diagramCode += ` loop For each participant\n`; diagramCode += ` loop For each participant\n`;
for (let i = 0; i < 3; i++) { for (let i = 0; i < 3; i++) {
diagramCode += ` ${participantTypes[0]}0 ->> ${participantTypes[1]}1: Message ${i}\n`; diagramCode += ` ${participantTypes[0].display}0 ->> ${participantTypes[1].display}1: Message ${i}\n`;
} }
diagramCode += ` end\n`; diagramCode += ` end\n`;
imgSnapshotTest(diagramCode, { look }); imgSnapshotTest(diagramCode, { look });
@@ -122,27 +124,26 @@ looks.forEach((look) => {
it('should render boxes around groups', () => { it('should render boxes around groups', () => {
let diagramCode = `sequenceDiagram\n`; let diagramCode = `sequenceDiagram\n`;
diagramCode += ` box Group 1\n`; diagramCode += ` box Group 1\n`;
participantTypes.slice(0, 3).forEach((type, index) => { participantTypes.slice(0, 3).forEach((pt, index) => {
diagramCode += ` ${type} ${type}${index}\n`; diagramCode += ` ${getParticipantLine(`${pt.display}${index}`, pt.type)}`;
}); });
diagramCode += ` end\n`; diagramCode += ` end\n`;
diagramCode += ` box rgb(200,220,255) Group 2\n`; diagramCode += ` box rgb(200,220,255) Group 2\n`;
participantTypes.slice(3, 6).forEach((type, index) => { participantTypes.slice(3, 6).forEach((pt, index) => {
diagramCode += ` ${type} ${type}${index}\n`; diagramCode += ` ${getParticipantLine(`${pt.display}${index}`, pt.type)}`;
}); });
diagramCode += ` end\n`; diagramCode += ` end\n`;
// Add some interactions diagramCode += ` ${participantTypes[0].display}0 ->> ${participantTypes[3].display}0: Cross-group message\n`;
diagramCode += ` ${participantTypes[0]}0 ->> ${participantTypes[3]}0: Cross-group message\n`;
imgSnapshotTest(diagramCode, { look }); imgSnapshotTest(diagramCode, { look });
}); });
it('should render with different font settings', () => { it('should render with different font settings', () => {
let diagramCode = `sequenceDiagram\n`; let diagramCode = `sequenceDiagram\n`;
participantTypes.slice(0, 3).forEach((type, index) => { participantTypes.slice(0, 3).forEach((pt, index) => {
diagramCode += ` ${type} ${type}${index}\n`; diagramCode += getParticipantLine(`${pt.display}${index}`, pt.type);
}); });
diagramCode += ` ${participantTypes[0]}0 ->> ${participantTypes[1]}1: Regular message\n`; diagramCode += ` ${participantTypes[0].display}0 ->> ${participantTypes[1].display}1: Regular message\n`;
diagramCode += ` Note right of ${participantTypes[1]}1: Regular note\n`; diagramCode += ` Note right of ${participantTypes[1].display}1: Regular note\n`;
imgSnapshotTest(diagramCode, { imgSnapshotTest(diagramCode, {
look, look,
sequence: { sequence: {
@@ -166,15 +167,15 @@ describe('Sequence Diagram Special Cases', () => {
sequenceDiagram sequenceDiagram
box rgb(200,220,255) Authentication box rgb(200,220,255) Authentication
actor User actor User
boundary LoginUI participant LoginUI@{ "type": "boundary" }
control AuthService participant AuthService@{ "type": "control" }
database UserDB participant UserDB@{ "type": "database" }
end end
box rgb(200,255,220) Order Processing box rgb(200,255,220) Order Processing
entity Order participant Order@{ "type": "entity" }
queue OrderQueue participant OrderQueue@{ "type": "queue" }
collections AuditLogs participant AuditLogs@{ "type": "collections" }
end end
User ->> LoginUI: Enter credentials User ->> LoginUI: Enter credentials
@@ -230,70 +231,87 @@ describe('Sequence Diagram Special Cases', () => {
it('should render a sequence diagram with various participant types', () => { it('should render a sequence diagram with various participant types', () => {
imgSnapshotTest( imgSnapshotTest(
` `
sequenceDiagram sequenceDiagram
actor User participant User@{ "type": "actor" }
participant AuthService as Authentication Service participant AuthService@{ "type": "control" }
boundary UI participant UI@{ "type": "boundary" }
control OrderController participant OrderController@{ "type": "control" }
entity Product participant Product@{ "type": "entity" }
database MongoDB participant MongoDB@{ "type": "database" }
collections Products participant Products@{ "type": "collections" }
queue OrderQueue participant OrderQueue@{ "type": "queue" }
User ->> UI: Login request User ->> UI: Login request
UI ->> AuthService: Validate credentials UI ->> AuthService: Validate credentials
AuthService -->> UI: Authentication token AuthService -->> UI: Authentication token
UI ->> OrderController: Place order UI ->> OrderController: Place order
OrderController ->> Product: Check availability OrderController ->> Product: Check availability
Product -->> OrderController: Available Product -->> OrderController: Available
OrderController ->> MongoDB: Save order OrderController ->> MongoDB: Save order
MongoDB -->> OrderController: Order saved MongoDB -->> OrderController: Order saved
OrderController ->> OrderQueue: Process payment OrderController ->> OrderQueue: Process payment
OrderQueue -->> User: Order confirmation OrderQueue -->> User: Order confirmation
` `
); );
}); });
it('should render participant creation and destruction with different types', () => { it('should render participant creation and destruction with different types', () => {
imgSnapshotTest( imgSnapshotTest(`
` sequenceDiagram
sequenceDiagram participant Alice@{ "type" : "boundary" }
actor Customer Alice->>Bob: Hello Bob, how are you ?
participant Frontend Bob->>Alice: Fine, thank you. And you?
boundary PaymentGateway create participant Carl@{ "type" : "control" }
Customer ->> Frontend: Place order Alice->>Carl: Hi Carl!
Frontend ->> OrderProcessor: Process order create actor D as Donald
create database OrderDB Carl->>D: Hi!
OrderProcessor ->> OrderDB: Save order destroy Carl
` Alice-xCarl: We are too many
); destroy Bob
Bob->>Alice: I agree
`);
}); });
it('should handle complex interactions between different participant types', () => { it('should handle complex interactions between different participant types', () => {
imgSnapshotTest( imgSnapshotTest(
` `
sequenceDiagram sequenceDiagram
box rgba(200,220,255,0.5) System Components box rgb(200,220,255) Authentication
actor User participant User@{ "type": "actor" }
boundary WebUI participant LoginUI@{ "type": "boundary" }
control API participant AuthService@{ "type": "control" }
entity BusinessLogic participant UserDB@{ "type": "database" }
database MainDB end
end
box rgba(200,255,220,0.5) External Services
queue MessageQueue
database AuditLogs
end
User ->> WebUI: Submit request box rgb(200,255,220) Order Processing
WebUI ->> API: Process request participant Order@{ "type": "entity" }
API ->> BusinessLogic: Execute business rules participant OrderQueue@{ "type": "queue" }
BusinessLogic ->> MainDB: Query data participant AuditLogs@{ "type": "collections" }
MainDB -->> BusinessLogic: Return results end
BusinessLogic ->> MessageQueue: Publish event
MessageQueue -->> AuditLogs: Store audit trail User ->> LoginUI: Enter credentials
AuditLogs -->> API: Audit complete LoginUI ->> AuthService: Validate
API -->> WebUI: Return response AuthService ->> UserDB: Query user
WebUI -->> User: Show results UserDB -->> AuthService: User data
alt Valid credentials
AuthService -->> LoginUI: Success
LoginUI -->> User: Welcome
par Place order
User ->> Order: New order
Order ->> OrderQueue: Process
and
Order ->> AuditLogs: Record
end
loop Until confirmed
OrderQueue ->> Order: Update status
Order -->> User: Notification
end
else Invalid credentials
AuthService --x LoginUI: Failure
LoginUI --x User: Retry
end
`, `,
{ sequence: { useMaxWidth: false } } { sequence: { useMaxWidth: false } }
); );
@@ -302,15 +320,15 @@ describe('Sequence Diagram Special Cases', () => {
it('should render parallel processes with different participant types', () => { it('should render parallel processes with different participant types', () => {
imgSnapshotTest( imgSnapshotTest(
` `
sequenceDiagram sequenceDiagram
actor Customer participant Customer@{ "type": "actor" }
participant Frontend participant Frontend@{ "type": "participant" }
boundary PaymentService participant PaymentService@{ "type": "boundary" }
control InventoryManager participant InventoryManager@{ "type": "control" }
entity Order participant Order@{ "type": "entity" }
database OrdersDB participant OrdersDB@{ "type": "database" }
queue NotificationQueue participant NotificationQueue@{ "type": "queue" }
Customer ->> Frontend: Place order Customer ->> Frontend: Place order
Frontend ->> Order: Create order Frontend ->> Order: Create order
par Parallel Processing par Parallel Processing
@@ -327,18 +345,18 @@ describe('Sequence Diagram Special Cases', () => {
` `
); );
}); });
});
it('should render different participant types with notes and loops', () => { it('should render different participant types with notes and loops', () => {
imgSnapshotTest( imgSnapshotTest(
` `
sequenceDiagram sequenceDiagram
actor Admin actor Admin
participant Dashboard participant Dashboard
boundary AuthService participant AuthService@{ "type" : "boundary" }
control UserManager participant UserManager@{ "type" : "control" }
entity UserProfile participant UserProfile@{ "type" : "entity" }
database UserDB participant UserDB@{ "type" : "database" }
database Logs participant Logs@{ "type" : "database" }
Admin ->> Dashboard: Open user management Admin ->> Dashboard: Open user management
loop Authentication check loop Authentication check
@@ -354,217 +372,214 @@ describe('Sequence Diagram Special Cases', () => {
UserManager ->> Dashboard: Display users UserManager ->> Dashboard: Display users
Dashboard ->> Logs: Record access Dashboard ->> Logs: Record access
Logs ->> Admin: Audit trail Logs ->> Admin: Audit trail
` `
); );
}); });
it('should render different participant types with alternative flows', () => { it('should render different participant types with alternative flows', () => {
imgSnapshotTest( imgSnapshotTest(
`
sequenceDiagram
actor Client
participant MobileApp
boundary CloudService
control DataProcessor
entity Transaction
database TransactionsDB
queue EventBus
Client ->> MobileApp: Initiate transaction
MobileApp ->> CloudService: Authenticate
alt Authentication successful
CloudService -->> MobileApp: Auth token
MobileApp ->> DataProcessor: Process data
DataProcessor ->> Transaction: Create transaction
Transaction ->> TransactionsDB: Save record
TransactionsDB -->> Transaction: Confirmation
Transaction ->> EventBus: Publish event
EventBus -->> Client: Notification
else Authentication failed
CloudService -->> MobileApp: Error
MobileApp -->> Client: Show error
end
` `
); sequenceDiagram
}); actor Client
participant MobileApp
participant CloudService@{ "type" : "boundary" }
participant DataProcessor@{ "type" : "control" }
participant Transaction@{ "type" : "entity" }
participant TransactionsDB@{ "type" : "database" }
participant EventBus@{ "type" : "queue" }
Client ->> MobileApp: Initiate transaction
MobileApp ->> CloudService: Authenticate
alt Authentication successful
CloudService -->> MobileApp: Auth token
MobileApp ->> DataProcessor: Process data
DataProcessor ->> Transaction: Create transaction
Transaction ->> TransactionsDB: Save record
TransactionsDB -->> Transaction: Confirmation
Transaction ->> EventBus: Publish event
EventBus -->> Client: Notification
else Authentication failed
CloudService -->> MobileApp: Error
MobileApp -->> Client: Show error
end
`
);
});
it('should render different participant types with wrapping text', () => { it('should render different participant types with wrapping text', () => {
imgSnapshotTest( imgSnapshotTest(
` `
sequenceDiagram sequenceDiagram
actor LongNameUser as User With A Very<br/>Long Name participant B@{ "type" : "boundary" }
participant FE as Frontend Service<br/>With Long Name participant C@{ "type" : "control" }
boundary B as Boundary With<br/>Multiline Name participant E@{ "type" : "entity" }
control C as Control With<br/>Multiline Name participant DB@{ "type" : "database" }
entity E as Entity With<br/>Multiline Name participant COL@{ "type" : "collections" }
database DB as Database With<br/>Multiline Name participant Q@{ "type" : "queue" }
collections COL as Collections With<br/>Multiline Name
queue Q as Queue With<br/>Multiline Name FE ->> B: Another long message<br/>with explicit<br/>line breaks
B -->> FE: Response message that is also quite long and needs to wrap
LongNameUser ->> FE: This is a very long message that should wrap properly in the diagram FE ->> C: Process data
FE ->> B: Another long message<br/>with explicit<br/>line breaks C ->> E: Validate
B -->> FE: Response message that is also quite long and needs to wrap E -->> C: Validation result
FE ->> C: Process data C ->> DB: Save
C ->> E: Validate DB -->> C: Save result
E -->> C: Validation result C ->> COL: Log
C ->> DB: Save COL -->> Q: Forward
DB -->> C: Save result Q -->> LongNameUser: Final response with confirmation of all actions taken
C ->> COL: Log
COL -->> Q: Forward
Q -->> LongNameUser: Final response with confirmation of all actions taken
`,
{ sequence: { wrap: true } }
);
});
describe('Sequence Diagram - New Participant Types with Long Notes and Messages', () => {
it('should render long notes left of boundary', () => {
imgSnapshotTest(
`
sequenceDiagram
boundary Alice
actor Bob
Alice->>Bob: Hola
Note left of Alice: Extremely utterly long line of longness which had previously overflown the actor box as it is much longer than what it should be
Bob->>Alice: I'm short though
`, `,
{} { sequence: { wrap: true } }
); );
}); });
it('should render wrapped long notes left of control', () => { describe('Sequence Diagram - New Participant Types with Long Notes and Messages', () => {
imgSnapshotTest( it('should render long notes left of boundary', () => {
` imgSnapshotTest(
`
sequenceDiagram sequenceDiagram
control Alice participant Alice@{ "type" : "boundary" }
actor Bob
Alice->>Bob: Hola
Note left of Alice: Extremely utterly long line of longness which had previously overflown the actor box as it is much longer than what it should be
Bob->>Alice: I'm short though
`,
{}
);
});
it('should render wrapped long notes left of control', () => {
imgSnapshotTest(
`
sequenceDiagram
participant Alice@{ "type" : "control" }
actor Bob actor Bob
Alice->>Bob: Hola Alice->>Bob: Hola
Note left of Alice:wrap: Extremely utterly long line of longness which had previously overflown the actor box as it is much longer than what it should be Note left of Alice:wrap: Extremely utterly long line of longness which had previously overflown the actor box as it is much longer than what it should be
Bob->>Alice: I'm short though Bob->>Alice: I'm short though
`, `,
{} {}
); );
}); });
it('should render long notes right of entity', () => { it('should render long notes right of entity', () => {
imgSnapshotTest( imgSnapshotTest(
` `
sequenceDiagram sequenceDiagram
entity Alice participant Alice@{ "type" : "entity" }
actor Bob actor Bob
Alice->>Bob: Hola Alice->>Bob: Hola
Note right of Alice: Extremely utterly long line of longness which had previously overflown the actor box as it is much longer than what it should be Note right of Alice: Extremely utterly long line of longness which had previously overflown the actor box as it is much longer than what it should be
Bob->>Alice: I'm short though Bob->>Alice: I'm short though
`, `,
{} {}
); );
}); });
it('should render wrapped long notes right of database', () => { it('should render wrapped long notes right of database', () => {
imgSnapshotTest( imgSnapshotTest(
` `
sequenceDiagram sequenceDiagram
database Alice participant Alice@{ "type" : "database" }
actor Bob actor Bob
Alice->>Bob: Hola Alice->>Bob: Hola
Note right of Alice:wrap: Extremely utterly long line of longness which had previously overflown the actor box as it is much longer than what it should be Note right of Alice:wrap: Extremely utterly long line of longness which had previously overflown the actor box as it is much longer than what it should be
Bob->>Alice: I'm short though Bob->>Alice: I'm short though
`, `,
{} {}
); );
}); });
it('should render long notes over collections', () => { it('should render long notes over collections', () => {
imgSnapshotTest( imgSnapshotTest(
` `
sequenceDiagram sequenceDiagram
collections Alice participant Alice@{ "type" : "collections" }
actor Bob actor Bob
Alice->>Bob: Hola Alice->>Bob: Hola
Note over Alice: Extremely utterly long line of longness which had previously overflown the actor box as it is much longer than what it should be Note over Alice: Extremely utterly long line of longness which had previously overflown the actor box as it is much longer than what it should be
Bob->>Alice: I'm short though Bob->>Alice: I'm short though
`, `,
{} {}
); );
}); });
it('should render wrapped long notes over queue', () => { it('should render wrapped long notes over queue', () => {
imgSnapshotTest( imgSnapshotTest(
` `
sequenceDiagram sequenceDiagram
queue Alice participant Alice@{ "type" : "queue" }
actor Bob actor Bob
Alice->>Bob: Hola Alice->>Bob: Hola
Note over Alice:wrap: Extremely utterly long line of longness which had previously overflown the actor box as it is much longer than what it should be Note over Alice:wrap: Extremely utterly long line of longness which had previously overflown the actor box as it is much longer than what it should be
Bob->>Alice: I'm short though Bob->>Alice: I'm short though
`, `,
{} {}
); );
}); });
it('should render notes over actor and boundary', () => { it('should render notes over actor and boundary', () => {
imgSnapshotTest( imgSnapshotTest(
` `
sequenceDiagram sequenceDiagram
actor Alice actor Alice
boundary Charlie participant Charlie@{ "type" : "boundary" }
note over Alice: Some note note over Alice: Some note
note over Charlie: Other note note over Charlie: Other note
`, `,
{} {}
); );
}); });
it('should render long messages from database to collections', () => { it('should render long messages from database to collections', () => {
imgSnapshotTest( imgSnapshotTest(
` `
sequenceDiagram sequenceDiagram
database Alice participant Alice@{ "type" : "database" }
collections Bob participant Bob@{ "type" : "collections" }
Alice->>Bob: Extremely utterly long line of longness which had previously overflown the actor box as it is much longer than what it should be Alice->>Bob: Extremely utterly long line of longness which had previously overflown the actor box as it is much longer than what it should be
Bob->>Alice: I'm short though Bob->>Alice: I'm short though
`, `,
{} {}
); );
}); });
it('should render wrapped long messages from control to entity', () => { it('should render wrapped long messages from control to entity', () => {
imgSnapshotTest( imgSnapshotTest(
` `
sequenceDiagram sequenceDiagram
control Alice participant Alice@{ "type" : "control" }
entity Bob participant Bob@{ "type" : "entity" }
Alice->>Bob:wrap: Extremely utterly long line of longness which had previously overflown the actor box as it is much longer than what it should be Alice->>Bob:wrap: Extremely utterly long line of longness which had previously overflown the actor box as it is much longer than what it should be
Bob->>Alice: I'm short though Bob->>Alice: I'm short though
`, `,
{} {}
); );
}); });
it('should render long messages from queue to boundary', () => { it('should render long messages from queue to boundary', () => {
imgSnapshotTest( imgSnapshotTest(
` `
sequenceDiagram sequenceDiagram
queue Alice participant Alice@{ "type" : "queue" }
boundary Bob participant Bob@{ "type" : "boundary" }
Alice->>Bob: I'm short Alice->>Bob: I'm short
Bob->>Alice: Extremely utterly long line of longness which had previously overflown the actor box as it is much longer than what it should be Bob->>Alice: Extremely utterly long line of longness which had previously overflown the actor box as it is much longer than what it should be
`, `,
{} {}
); );
}); });
it('should render wrapped long messages from actor to database', () => { it('should render wrapped long messages from actor to database', () => {
imgSnapshotTest( imgSnapshotTest(
` `
sequenceDiagram sequenceDiagram
actor Alice actor Alice
database Bob participant Bob@{ "type" : "database" }
Alice->>Bob: I'm short Alice->>Bob: I'm short
Bob->>Alice:wrap: Extremely utterly long line of longness which had previously overflown the actor box as it is much longer than what it should be Bob->>Alice:wrap: Extremely utterly long line of longness which had previously overflown the actor box as it is much longer than what it should be
`, `,
{} {}
); );
});
}); });
}); });
@@ -574,8 +589,8 @@ describe('Sequence Diagram Special Cases', () => {
` `
sequenceDiagram sequenceDiagram
actor Alice actor Alice
boundary Bob participant Bob@{ "type" : "boundary" }
control John as John<br/>Second Line participant John@{ "type" : "control" }
Alice ->> Bob: Hello Bob, how are you? Alice ->> Bob: Hello Bob, how are you?
Bob-->>John: How about you John? Bob-->>John: How about you John?
Bob--x Alice: I am good thanks! Bob--x Alice: I am good thanks!
@@ -584,9 +599,9 @@ describe('Sequence Diagram Special Cases', () => {
Bob-->Alice: Checking with John... Bob-->Alice: Checking with John...
alt either this alt either this
Alice->>John: Yes Alice->>John: Yes
else or this else or this
Alice->>John: No Alice->>John: No
else or this will happen else or this will happen
Alice->John: Maybe Alice->John: Maybe
end end
par this happens in parallel par this happens in parallel
@@ -611,8 +626,8 @@ describe('Sequence Diagram Special Cases', () => {
` `
sequenceDiagram sequenceDiagram
actor Alice actor Alice
boundary Bob participant Bob@{ "type" : "boundary" }
control John as John<br/>Second Line participant John@{ "type" : "control" }
Alice ->> Bob: Hello Bob, how are you? Alice ->> Bob: Hello Bob, how are you?
Bob-->>John: How about you John? Bob-->>John: How about you John?
Bob--x Alice: I am good thanks! Bob--x Alice: I am good thanks!
@@ -621,9 +636,9 @@ describe('Sequence Diagram Special Cases', () => {
Bob-->Alice: Checking with John... Bob-->Alice: Checking with John...
alt either this alt either this
Alice->>John: Yes Alice->>John: Yes
else or this else or this
Alice->>John: No Alice->>John: No
else or this will happen else or this will happen
Alice->John: Maybe Alice->John: Maybe
end end
par this happens in parallel par this happens in parallel

2
packages/mermaid/src/diagrams/sequence/sequenceDb.ts
View File

@@ -553,7 +553,7 @@ export class SequenceDB implements DiagramDB {
); );
} }
this.state.records.lastCreated = param.actor; this.state.records.lastCreated = param.actor;
this.addActor(param.actor, param.actor, param.description, param.draw); this.addActor(param.actor, param.actor, param.description, param.draw, param.config);
this.state.records.createdActors.set(param.actor, this.state.records.messages.length); this.state.records.createdActors.set(param.actor, this.state.records.messages.length);
break; break;
case 'destroyParticipant': case 'destroyParticipant':