diff --git a/cypress/integration/rendering/sequencediagram.spec.js b/cypress/integration/rendering/sequencediagram.spec.js index bb460418f..0ec283c16 100644 --- a/cypress/integration/rendering/sequencediagram.spec.js +++ b/cypress/integration/rendering/sequencediagram.spec.js @@ -52,6 +52,26 @@ context('Sequence diagram', () => { {} ); }); + it('should handle line breaks and wrap annotations', () => { + imgSnapshotTest( + ` + sequenceDiagram + participant Alice + participant Bob + participant John as John
Second Line + Alice ->> Bob: Hello Bob, how are you? + Bob-->>John: How about you John? + Note right of John: John thinks a long
long time, so long
that the text does
not fit on a row. + Bob-->Alice: Checking with John... + Note over John:wrap: John looks like he's still thinking, so Bob prods him a bit. + Bob-x John: Hey John -
we're still waiting to know
how you're doing + Note over John:nowrap: John's trying hard not to break his train of thought. + Bob-x John:wrap: John! Are you still debating about how you're doing? How long does it take?? + Note over John: After a few more moments, John
finally snaps out of it. + `, + {} + ); + }) it('should render loops with a slight margin', () => { imgSnapshotTest( ` diff --git a/src/diagrams/sequence/sequenceDiagram.spec.js b/src/diagrams/sequence/sequenceDiagram.spec.js index 12e934ed1..6cb6d55c4 100644 --- a/src/diagrams/sequence/sequenceDiagram.spec.js +++ b/src/diagrams/sequence/sequenceDiagram.spec.js @@ -442,6 +442,87 @@ note right of 1: multiline
text expect(messages[6].message).toBe('multiline
text'); expect(messages[7].message).toBe('multiline
text'); }); + it('it should handle notes and messages without wrap specified', function () { + const str = ` +sequenceDiagram +participant 1 +participant 2 +participant 3 +participant 4 +1->>2: single-line text +note right of 2: single-line text +2->>3:nowrap: single-line text +note right of 3:nowrap: single-line text +3->>4: multiline
text +note right of 4: multiline
text +4->>1:nowrap: multiline
text +note right of 1:nowrap: multiline
text +`; + + mermaidAPI.parse(str); + + const messages = parser.yy.getMessages(); + expect(messages[0].message).toBe('single-line text'); + expect(messages[1].message).toBe('single-line text'); + expect(messages[2].message).toBe('single-line text'); + expect(messages[3].message).toBe('single-line text'); + expect(messages[4].message).toBe('multiline
text'); + expect(messages[5].message).toBe('multiline
text'); + expect(messages[6].message).toBe('multiline
text'); + expect(messages[7].message).toBe('multiline
text'); + + // wrap indicates whether wrap is specified + expect(messages[0].wrap).toBe(false); + expect(messages[1].wrap).toBe(false); + expect(messages[2].wrap).toBe(false); + expect(messages[3].wrap).toBe(false); + expect(messages[4].wrap).toBe(false); + expect(messages[5].wrap).toBe(false); + expect(messages[6].wrap).toBe(false); + expect(messages[7].wrap).toBe(false); + }) + it('it should handle notes and messages with wrap specified', function () { + const str = ` +sequenceDiagram +participant 1 +participant 2 +participant 3 +participant 4 +1->>2:wrap: single-line text +note right of 2:wrap: single-line text +2->>3:wrap: multiline
text +note right of 3:wrap: multiline
text +`; + + mermaidAPI.parse(str); + + const messages = parser.yy.getMessages(); + expect(messages[0].message).toBe('single-line text'); + expect(messages[1].message).toBe('single-line text'); + expect(messages[2].message).toBe('multiline
text'); + expect(messages[3].message).toBe('multiline
text'); + expect(messages[0].wrap).toBe(true); + expect(messages[1].wrap).toBe(true); + expect(messages[2].wrap).toBe(true); + expect(messages[3].wrap).toBe(true); + }) + it('it should handle notes and messages with nowrap or line breaks', function () { + const str = ` +sequenceDiagram +participant 1 +participant 2 +1->>2: single-line text +note right of 2: single-line text +`; + + mermaidAPI.parse(str); + + const messages = parser.yy.getMessages(); + expect(messages[0].message).toBe('single-line text'); + expect(messages[1].message).toBe('single-line text'); + expect(messages[0].wrap).toBe(false); + expect(messages[1].wrap).toBe(false); + }) it('it should handle notes over a single actor', function() { const str = ` sequenceDiagram diff --git a/src/diagrams/sequence/svgDraw.spec.js b/src/diagrams/sequence/svgDraw.spec.js index c99b9b95b..cc54b7184 100644 --- a/src/diagrams/sequence/svgDraw.spec.js +++ b/src/diagrams/sequence/svgDraw.spec.js @@ -49,6 +49,58 @@ describe('svgDraw', function() { expect(rect.attr).not.toHaveBeenCalledWith('class', expect.anything()); }); }); + describe('drawText', function() { + it('it should append a single element', function() { + const svg = MockD3('svg'); + svgDraw.drawText(svg, { + x: 10, + y: 10, + dy: '1em', + text: 'One fine text message', + class: 'noteText', + fontFamily: 'courier', + fontSize: '10px', + fontWeight: '500', + }); + expect(svg.__children.length).toBe(1); + const text = svg.__children[0]; + expect(text.__name).toBe('text'); + expect(text.attr).toHaveBeenCalledWith('x', 10); + expect(text.attr).toHaveBeenCalledWith('y', 10); + expect(text.attr).toHaveBeenCalledWith('dy', '1em'); + expect(text.attr).toHaveBeenCalledWith('class', 'noteText'); + expect(text.text).toHaveBeenCalledWith('One fine text message'); + expect(text.style).toHaveBeenCalledWith('font-family', 'courier'); + expect(text.style).toHaveBeenCalledWith('font-size', '10px'); + expect(text.style).toHaveBeenCalledWith('font-weight', '500'); + }); + it('it should append a multiple elements', function() { + const svg = MockD3('svg'); + svgDraw.drawText(svg, { + x: 10, + y: 10, + text: 'One fine text message
with multiple
fine lines', + }); + expect(svg.__children.length).toBe(3); + const text1 = svg.__children[0]; + expect(text1.__name).toBe('text'); + expect(text1.attr).toHaveBeenCalledWith('x', 10); + expect(text1.attr).toHaveBeenCalledWith('y', 10); + expect(text1.text).toHaveBeenCalledWith('One fine text message'); + + const text2 = svg.__children[1]; + expect(text2.__name).toBe('text'); + expect(text2.attr).toHaveBeenCalledWith('x', 10); + expect(text2.attr).toHaveBeenCalledWith('y', 10); + expect(text2.text).toHaveBeenCalledWith('with multiple'); + + const text3 = svg.__children[2]; + expect(text3.__name).toBe('text'); + expect(text3.attr).toHaveBeenCalledWith('x', 10); + expect(text3.attr).toHaveBeenCalledWith('y', 10); + expect(text3.text).toHaveBeenCalledWith('fine lines'); + }); + }); describe('drawBackgroundRect', function() { it('it should append a rect before the previous element within a given bound', function() { const svg = MockD3('svg');