7.5 KB262 lines
Blame
1import { imgSnapshotTest, renderGraph } from '../../helpers/util.ts';
2
3describe('User journey diagram', () => {
4 it('Simple test', () => {
5 imgSnapshotTest(
6 `journey
7title Adding journey diagram functionality to mermaid
8section Order from website
9 `,
10 {}
11 );
12 });
13
14 it('should render a user journey chart', () => {
15 imgSnapshotTest(
16 `
17 journey
18 title My working day
19 section Go to work
20 Make tea: 5: Me
21 Go upstairs: 3: Me
22 Do work: 1: Me, Cat
23 section Go home
24 Go downstairs: 5: Me
25 Sit down: 3: Me
26 `,
27 {}
28 );
29 });
30
31 it('should render a user journey diagram when useMaxWidth is true (default)', () => {
32 renderGraph(
33 `journey
34title E-Commerce
35section Order from website
36 Add to cart: 5: Me
37section Checkout from website
38 Add payment details: 5: Me
39 `,
40 { journey: { useMaxWidth: true } }
41 );
42 cy.get('svg').should((svg) => {
43 expect(svg).to.have.attr('width', '100%');
44 expect(svg).to.have.attr('height');
45 // const height = parseFloat(svg.attr('height'));
46 // expect(height).to.eq(565);
47 const style = svg.attr('style');
48 expect(style).to.match(/^max-width: [\d.]+px;$/);
49 const maxWidthValue = parseFloat(style.match(/[\d.]+/g).join(''));
50 expect(maxWidthValue).to.eq(700);
51 });
52 });
53
54 it('should render a user journey diagram when useMaxWidth is false', () => {
55 imgSnapshotTest(
56 `journey
57title E-Commerce
58section Order from website
59 Add to cart: 5: Me
60section Checkout from website
61 Add payment details: 5: Me
62 `,
63 { journey: { useMaxWidth: false } }
64 );
65 });
66
67 it('should initialize with a left margin of 150px for user journeys', () => {
68 renderGraph(
69 `
70 ---
71 config:
72 journey:
73 maxLabelWidth: 320
74 ---
75 journey
76 title User Journey Example
77 section Onboarding
78 Sign Up: 5:
79 Browse Features: 3:
80 Use Core Functionality: 4:
81 section Engagement
82 Browse Features: 3
83 Use Core Functionality: 4
84 `,
85 { journey: { useMaxWidth: true } }
86 );
87
88 let diagramStartX;
89
90 cy.contains('foreignobject', 'Sign Up').then(($diagram) => {
91 diagramStartX = parseFloat($diagram.attr('x'));
92 expect(diagramStartX).to.be.closeTo(150, 2);
93 });
94 });
95
96 it('should maintain sufficient space between legend and diagram when legend labels are longer', () => {
97 renderGraph(
98 `journey
99 title Web hook life cycle
100 section Darkoob
101 Make preBuilt:5: Darkoob user
102 register slug : 5: Darkoob userf deliberately increasing the size of this label to check if distance between legend and diagram is maintained
103 Map slug to a Prebuilt Job:5: Darkoob user
104 section External Service
105 set Darkoob slug as hook for an Event : 5 : admin Exjjjnjjjj qwerty
106 listen to the events : 5 : External Service
107 call darkoob endpoint : 5 : External Service
108 section Darkoob
109 check for inputs : 5 : DarkoobAPI
110 run the prebuilt job : 5 : DarkoobAPI
111 `,
112 { journey: { useMaxWidth: true } }
113 );
114
115 let LabelEndX, diagramStartX;
116
117 // Get right edge of the legend
118 cy.contains('tspan', 'Darkoob userf').then((textBox) => {
119 const bbox = textBox[0].getBBox();
120 LabelEndX = bbox.x + bbox.width;
121 });
122
123 // Get left edge of the diagram
124 cy.contains('foreignobject', 'Make preBuilt').then((rect) => {
125 diagramStartX = parseFloat(rect.attr('x'));
126 });
127
128 // Assert right edge of the diagram is greater than or equal to the right edge of the label
129 cy.then(() => {
130 expect(diagramStartX).to.be.gte(LabelEndX);
131 });
132 });
133
134 it('should wrap a single long word with hyphenation', () => {
135 renderGraph(
136 `
137 ---
138 config:
139 journey:
140 maxLabelWidth: 100
141 ---
142 journey
143 title Long Word Test
144 section Test
145 VeryLongWord: 5: Supercalifragilisticexpialidocious
146 `,
147 { journey: { useMaxWidth: true } }
148 );
149
150 // Verify that the line ends with a hyphen, indicating proper hyphenation for words exceeding maxLabelWidth.
151 cy.get('tspan').then((tspans) => {
152 const hasHyphen = [...tspans].some((t) => t.textContent.trim().endsWith('-'));
153 return expect(hasHyphen).to.be.true;
154 });
155 });
156
157 it('should wrap text on whitespace without adding hyphens', () => {
158 renderGraph(
159 `
160 ---
161 config:
162 journey:
163 maxLabelWidth: 200
164 ---
165 journey
166 title Whitespace Test
167 section Test
168 TextWithSpaces: 5: Gustavo Fring is played by Giancarlo Esposito and is a character in Breaking Bad.
169 `,
170 { journey: { useMaxWidth: true } }
171 );
172
173 // Verify that none of the text spans end with a hyphen.
174 cy.get('tspan').each(($el) => {
175 const text = $el.text();
176 expect(text.trim()).not.to.match(/-$/);
177 });
178 });
179
180 it('should wrap long labels into multiple lines, keep them under max width, and maintain margins', () => {
181 renderGraph(
182 `
183 ---
184 config:
185 journey:
186 maxLabelWidth: 320
187 ---
188 journey
189 title User Journey Example
190 section Onboarding
191 Sign Up: 5: This is a long label that will be split into multiple lines to test the wrapping functionality
192 Browse Features: 3: This is another long label that will be split into multiple lines to test the wrapping functionality
193 Use Core Functionality: 4: This is yet another long label that will be split into multiple lines to test the wrapping functionality
194 section Engagement
195 Browse Features: 3
196 Use Core Functionality: 4
197 `,
198 { journey: { useMaxWidth: true } }
199 );
200
201 let diagramStartX, maxLineWidth;
202
203 // Get the diagram's left edge x-coordinate
204 cy.contains('foreignobject', 'Sign Up')
205 .then(($diagram) => {
206 diagramStartX = parseFloat($diagram.attr('x'));
207 })
208 .then(() => {
209 cy.get('text.legend').then(($lines) => {
210 // Check that there are multiple lines
211 expect($lines.length).to.be.equal(9);
212
213 // Check that all lines are under the maxLabelWidth
214 $lines.each((index, el) => {
215 const bbox = el.getBBox();
216 expect(bbox.width).to.be.lte(320);
217 maxLineWidth = Math.max(maxLineWidth || 0, bbox.width);
218 });
219
220 /** The expected margin between the diagram and the legend is 150px, as defined by
221 * conf.leftMargin in user-journey-config.js
222 */
223 expect(diagramStartX - maxLineWidth).to.be.closeTo(150, 2);
224 });
225 });
226 });
227
228 it('should correctly render the user journey diagram title with the specified styling', () => {
229 renderGraph(
230 `---
231config:
232 journey:
233 titleColor: "#2900A5"
234 titleFontFamily: "Times New Roman"
235 titleFontSize: "5rem"
236---
237
238journey
239 title User Journey Example
240 section Onboarding
241 Sign Up: 5: John, Shahir
242 Complete Profile: 4: John
243 section Engagement
244 Browse Features: 3: John
245 Use Core Functionality: 4: John
246 section Retention
247 Revisit Application: 5: John
248 Invite Friends: 3: John
249
250 size: 2rem
251 `
252 );
253
254 cy.get('text').contains('User Journey Example').as('title');
255 cy.get('@title').then(($title) => {
256 expect($title).to.have.attr('fill', '#2900A5');
257 expect($title).to.have.attr('font-family', 'Times New Roman');
258 expect($title).to.have.attr('font-size', '5rem');
259 });
260 });
261});
262