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