mirror of
https://github.com/mermaid-js/mermaid.git
synced 2025-08-15 06:19:24 +02:00
262 lines
7.5 KiB
JavaScript
262 lines
7.5 KiB
JavaScript
import { imgSnapshotTest, renderGraph } from '../../helpers/util.ts';
|
|
|
|
describe('User journey diagram', () => {
|
|
it('Simple test', () => {
|
|
imgSnapshotTest(
|
|
`journey
|
|
title Adding journey diagram functionality to mermaid
|
|
section Order from website
|
|
`,
|
|
{}
|
|
);
|
|
});
|
|
|
|
it('should render a user journey chart', () => {
|
|
imgSnapshotTest(
|
|
`
|
|
journey
|
|
title My working day
|
|
section Go to work
|
|
Make tea: 5: Me
|
|
Go upstairs: 3: Me
|
|
Do work: 1: Me, Cat
|
|
section Go home
|
|
Go downstairs: 5: Me
|
|
Sit down: 3: Me
|
|
`,
|
|
{}
|
|
);
|
|
});
|
|
|
|
it('should render a user journey diagram when useMaxWidth is true (default)', () => {
|
|
renderGraph(
|
|
`journey
|
|
title E-Commerce
|
|
section Order from website
|
|
Add to cart: 5: Me
|
|
section Checkout from website
|
|
Add payment details: 5: Me
|
|
`,
|
|
{ journey: { useMaxWidth: true } }
|
|
);
|
|
cy.get('svg').should((svg) => {
|
|
expect(svg).to.have.attr('width', '100%');
|
|
expect(svg).to.have.attr('height');
|
|
// const height = parseFloat(svg.attr('height'));
|
|
// expect(height).to.eq(565);
|
|
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(700);
|
|
});
|
|
});
|
|
|
|
it('should render a user journey diagram when useMaxWidth is false', () => {
|
|
imgSnapshotTest(
|
|
`journey
|
|
title E-Commerce
|
|
section Order from website
|
|
Add to cart: 5: Me
|
|
section Checkout from website
|
|
Add payment details: 5: Me
|
|
`,
|
|
{ journey: { useMaxWidth: false } }
|
|
);
|
|
});
|
|
|
|
it('should initialize with a left margin of 150px for user journeys', () => {
|
|
renderGraph(
|
|
`
|
|
---
|
|
config:
|
|
journey:
|
|
maxLabelWidth: 320
|
|
---
|
|
journey
|
|
title User Journey Example
|
|
section Onboarding
|
|
Sign Up: 5:
|
|
Browse Features: 3:
|
|
Use Core Functionality: 4:
|
|
section Engagement
|
|
Browse Features: 3
|
|
Use Core Functionality: 4
|
|
`,
|
|
{ journey: { useMaxWidth: true } }
|
|
);
|
|
|
|
let diagramStartX;
|
|
|
|
cy.contains('foreignobject', 'Sign Up').then(($diagram) => {
|
|
diagramStartX = parseFloat($diagram.attr('x'));
|
|
expect(diagramStartX).to.be.closeTo(150, 2);
|
|
});
|
|
});
|
|
|
|
it('should maintain sufficient space between legend and diagram when legend labels are longer', () => {
|
|
renderGraph(
|
|
`journey
|
|
title Web hook life cycle
|
|
section Darkoob
|
|
Make preBuilt:5: Darkoob user
|
|
register slug : 5: Darkoob userf deliberately increasing the size of this label to check if distance between legend and diagram is maintained
|
|
Map slug to a Prebuilt Job:5: Darkoob user
|
|
section External Service
|
|
set Darkoob slug as hook for an Event : 5 : admin Exjjjnjjjj qwerty
|
|
listen to the events : 5 : External Service
|
|
call darkoob endpoint : 5 : External Service
|
|
section Darkoob
|
|
check for inputs : 5 : DarkoobAPI
|
|
run the prebuilt job : 5 : DarkoobAPI
|
|
`,
|
|
{ journey: { useMaxWidth: true } }
|
|
);
|
|
|
|
let LabelEndX, diagramStartX;
|
|
|
|
// Get right edge of the legend
|
|
cy.contains('tspan', 'Darkoob userf').then((textBox) => {
|
|
const bbox = textBox[0].getBBox();
|
|
LabelEndX = bbox.x + bbox.width;
|
|
});
|
|
|
|
// Get left edge of the diagram
|
|
cy.contains('foreignobject', 'Make preBuilt').then((rect) => {
|
|
diagramStartX = parseFloat(rect.attr('x'));
|
|
});
|
|
|
|
// Assert right edge of the diagram is greater than or equal to the right edge of the label
|
|
cy.then(() => {
|
|
expect(diagramStartX).to.be.gte(LabelEndX);
|
|
});
|
|
});
|
|
|
|
it('should wrap a single long word with hyphenation', () => {
|
|
renderGraph(
|
|
`
|
|
---
|
|
config:
|
|
journey:
|
|
maxLabelWidth: 100
|
|
---
|
|
journey
|
|
title Long Word Test
|
|
section Test
|
|
VeryLongWord: 5: Supercalifragilisticexpialidocious
|
|
`,
|
|
{ journey: { useMaxWidth: true } }
|
|
);
|
|
|
|
// Verify that the line ends with a hyphen, indicating proper hyphenation for words exceeding maxLabelWidth.
|
|
cy.get('tspan').then((tspans) => {
|
|
const hasHyphen = [...tspans].some((t) => t.textContent.trim().endsWith('-'));
|
|
return expect(hasHyphen).to.be.true;
|
|
});
|
|
});
|
|
|
|
it('should wrap text on whitespace without adding hyphens', () => {
|
|
renderGraph(
|
|
`
|
|
---
|
|
config:
|
|
journey:
|
|
maxLabelWidth: 200
|
|
---
|
|
journey
|
|
title Whitespace Test
|
|
section Test
|
|
TextWithSpaces: 5: Gustavo Fring is played by Giancarlo Esposito and is a character in Breaking Bad.
|
|
`,
|
|
{ journey: { useMaxWidth: true } }
|
|
);
|
|
|
|
// Verify that none of the text spans end with a hyphen.
|
|
cy.get('tspan').each(($el) => {
|
|
const text = $el.text();
|
|
expect(text.trim()).not.to.match(/-$/);
|
|
});
|
|
});
|
|
|
|
it('should wrap long labels into multiple lines, keep them under max width, and maintain margins', () => {
|
|
renderGraph(
|
|
`
|
|
---
|
|
config:
|
|
journey:
|
|
maxLabelWidth: 320
|
|
---
|
|
journey
|
|
title User Journey Example
|
|
section Onboarding
|
|
Sign Up: 5: This is a long label that will be split into multiple lines to test the wrapping functionality
|
|
Browse Features: 3: This is another long label that will be split into multiple lines to test the wrapping functionality
|
|
Use Core Functionality: 4: This is yet another long label that will be split into multiple lines to test the wrapping functionality
|
|
section Engagement
|
|
Browse Features: 3
|
|
Use Core Functionality: 4
|
|
`,
|
|
{ journey: { useMaxWidth: true } }
|
|
);
|
|
|
|
let diagramStartX, maxLineWidth;
|
|
|
|
// Get the diagram's left edge x-coordinate
|
|
cy.contains('foreignobject', 'Sign Up')
|
|
.then(($diagram) => {
|
|
diagramStartX = parseFloat($diagram.attr('x'));
|
|
})
|
|
.then(() => {
|
|
cy.get('text.legend').then(($lines) => {
|
|
// Check that there are multiple lines
|
|
expect($lines.length).to.be.equal(9);
|
|
|
|
// Check that all lines are under the maxLabelWidth
|
|
$lines.each((index, el) => {
|
|
const bbox = el.getBBox();
|
|
expect(bbox.width).to.be.lte(320);
|
|
maxLineWidth = Math.max(maxLineWidth || 0, bbox.width);
|
|
});
|
|
|
|
/** The expected margin between the diagram and the legend is 150px, as defined by
|
|
* conf.leftMargin in user-journey-config.js
|
|
*/
|
|
expect(diagramStartX - maxLineWidth).to.be.closeTo(150, 2);
|
|
});
|
|
});
|
|
});
|
|
|
|
it('should correctly render the user journey diagram title with the specified styling', () => {
|
|
renderGraph(
|
|
`---
|
|
config:
|
|
journey:
|
|
titleColor: "#2900A5"
|
|
titleFontFamily: "Times New Roman"
|
|
titleFontSize: "5rem"
|
|
---
|
|
|
|
journey
|
|
title User Journey Example
|
|
section Onboarding
|
|
Sign Up: 5: John, Shahir
|
|
Complete Profile: 4: John
|
|
section Engagement
|
|
Browse Features: 3: John
|
|
Use Core Functionality: 4: John
|
|
section Retention
|
|
Revisit Application: 5: John
|
|
Invite Friends: 3: John
|
|
|
|
size: 2rem
|
|
`
|
|
);
|
|
|
|
cy.get('text').contains('User Journey Example').as('title');
|
|
cy.get('@title').then(($title) => {
|
|
expect($title).to.have.attr('fill', '#2900A5');
|
|
expect($title).to.have.attr('font-family', 'Times New Roman');
|
|
expect($title).to.have.attr('font-size', '5rem');
|
|
});
|
|
});
|
|
});
|