From 1e2a1b6c5f334cf43a666a4265765f6b41ac3d0c Mon Sep 17 00:00:00 2001 From: nghtlinh Date: Fri, 7 Feb 2025 15:56:45 -0500 Subject: [PATCH 01/10] Added alert and capped face's height stay max 300 --- packages/mermaid/src/diagrams/user-journey/svgDraw.js | 9 ++++++++- 1 file changed, 8 insertions(+), 1 deletion(-) diff --git a/packages/mermaid/src/diagrams/user-journey/svgDraw.js b/packages/mermaid/src/diagrams/user-journey/svgDraw.js index 7a8f791fac..35b9ed2c4b 100644 --- a/packages/mermaid/src/diagrams/user-journey/svgDraw.js +++ b/packages/mermaid/src/diagrams/user-journey/svgDraw.js @@ -212,9 +212,16 @@ export const drawTask = function (elem, task, conf) { .attr('stroke-dasharray', '4 2') .attr('stroke', '#666'); + // Check if the score exceeds the max limit and show alert + if (task.score > 5) { + alert(`Score must be 1-5. Feel free to adjust, or we'll cap it at 5! 😎.`); + } + // Calculate the potential cy value and clamp it at 300 if needed + let cyValue = 300 + (5 - task.score) * 30; + drawFace(g, { cx: center, - cy: 300 + (5 - task.score) * 30, + cy: Math.max(cyValue, 300), score: task.score, }); From 7a4c74e6142d73cce7531ae1fa14073b7d7e714c Mon Sep 17 00:00:00 2001 From: nghtlinh Date: Fri, 7 Feb 2025 15:58:00 -0500 Subject: [PATCH 02/10] Added cypress test for journey alert (task>5) --- cypress/integration/rendering/journey.spec.js | 23 +++++++++++++++++++ 1 file changed, 23 insertions(+) diff --git a/cypress/integration/rendering/journey.spec.js b/cypress/integration/rendering/journey.spec.js index d8bef6d1b9..866c906ba4 100644 --- a/cypress/integration/rendering/journey.spec.js +++ b/cypress/integration/rendering/journey.spec.js @@ -63,4 +63,27 @@ section Checkout from website { journey: { useMaxWidth: false } } ); }); + + it('should give an alert if the task score is greater than 5', () => { + const alertStub = cy.stub(); + cy.on('window:alert', alertStub); + renderGraph( + `journey + accTitle: simple journey demo + accDescr: 2 main sections: work and home, each with just a few tasks + + section Go to work + Make tea: 7: Me + Go upstairs: 3: Me + section Go home + Go downstairs: 5: Me + Sit down: 2: Me` + ); + cy.wait(500).then(() => { + expect(alertStub).to.have.callCount(1); + expect(alertStub.getCall(0)).to.have.been.calledWith( + "Score must be 1-5. Feel free to adjust, or we'll cap it at 5! 😎." + ); + }); + }); }); From 018358a29a216c0fe610a4b7d43cf52d06e7a84f Mon Sep 17 00:00:00 2001 From: nghtlinh Date: Wed, 12 Feb 2025 18:38:45 -0500 Subject: [PATCH 03/10] Added constraint to accept only string and 0-5 values --- packages/mermaid/src/diagrams/user-journey/svgDraw.js | 10 ++++++---- 1 file changed, 6 insertions(+), 4 deletions(-) diff --git a/packages/mermaid/src/diagrams/user-journey/svgDraw.js b/packages/mermaid/src/diagrams/user-journey/svgDraw.js index 35b9ed2c4b..1852bb7eb3 100644 --- a/packages/mermaid/src/diagrams/user-journey/svgDraw.js +++ b/packages/mermaid/src/diagrams/user-journey/svgDraw.js @@ -213,15 +213,17 @@ export const drawTask = function (elem, task, conf) { .attr('stroke', '#666'); // Check if the score exceeds the max limit and show alert - if (task.score > 5) { - alert(`Score must be 1-5. Feel free to adjust, or we'll cap it at 5! 😎.`); + if (!Number.isInteger(task.score) || task.score > 5 || task.score < 0) { + throw new Error('Score must be an integer between 0 and 5'); } - // Calculate the potential cy value and clamp it at 300 if needed + + // Calculate the potential cy value and clamp it between 300 and 450 if needed let cyValue = 300 + (5 - task.score) * 30; + cyValue = Math.min(Math.max(cyValue, 300), 450); drawFace(g, { cx: center, - cy: Math.max(cyValue, 300), + cy: cyValue, score: task.score, }); From aeb06041997f9eca42778c1772c7be77541c846d Mon Sep 17 00:00:00 2001 From: nghtlinh Date: Thu, 13 Feb 2025 17:25:46 -0500 Subject: [PATCH 04/10] Added test cases and removed clamping for cy value --- cypress/integration/rendering/journey.spec.js | 68 +++++++++++++------ .../src/diagrams/user-journey/svgDraw.js | 6 +- 2 files changed, 49 insertions(+), 25 deletions(-) diff --git a/cypress/integration/rendering/journey.spec.js b/cypress/integration/rendering/journey.spec.js index 866c906ba4..5830119b43 100644 --- a/cypress/integration/rendering/journey.spec.js +++ b/cypress/integration/rendering/journey.spec.js @@ -64,26 +64,54 @@ section Checkout from website ); }); - it('should give an alert if the task score is greater than 5', () => { - const alertStub = cy.stub(); - cy.on('window:alert', alertStub); - renderGraph( - `journey - accTitle: simple journey demo - accDescr: 2 main sections: work and home, each with just a few tasks - - section Go to work - Make tea: 7: Me - Go upstairs: 3: Me - section Go home - Go downstairs: 5: Me - Sit down: 2: Me` - ); - cy.wait(500).then(() => { - expect(alertStub).to.have.callCount(1); - expect(alertStub.getCall(0)).to.have.been.calledWith( - "Score must be 1-5. Feel free to adjust, or we'll cap it at 5! 😎." + it('should throw an error if the task score is not an integer', () => { + expect(() => { + renderGraph( + `journey + accTitle: simple journey demo + accDescr: 2 main sections: work and home, each with just a few tasks + + section Go to work + Make tea: Hello: Me + Go upstairs: 3: Me + section Go home + Go downstairs: 5: Me + Sit down: 2: Me` ); - }); + }).to.throw('Score must be an integer between 0 and 5'); + }); + + it('should throw an error if the task score is less than 0', () => { + expect(() => { + renderGraph( + `journey + accTitle: simple journey demo + accDescr: 2 main sections: work and home, each with just a few tasks + + section Go to work + Make tea: -10: Me + Go upstairs: 3: Me + section Go home + Go downstairs: 5: Me + Sit down: 2: Me` + ); + }).to.throw('Score must be an integer between 0 and 5'); + }); + + it('should throw an error if the task score is greater than 5', () => { + expect(() => { + renderGraph( + `journey + accTitle: simple journey demo + accDescr: 2 main sections: work and home, each with just a few tasks + + section Go to work + Make tea: 23: Me + Go upstairs: 3: Me + section Go home + Go downstairs: 5: Me + Sit down: 2: Me` + ); + }).to.throw('Score must be an integer between 0 and 5'); }); }); diff --git a/packages/mermaid/src/diagrams/user-journey/svgDraw.js b/packages/mermaid/src/diagrams/user-journey/svgDraw.js index 1852bb7eb3..de69c1c35a 100644 --- a/packages/mermaid/src/diagrams/user-journey/svgDraw.js +++ b/packages/mermaid/src/diagrams/user-journey/svgDraw.js @@ -217,13 +217,9 @@ export const drawTask = function (elem, task, conf) { throw new Error('Score must be an integer between 0 and 5'); } - // Calculate the potential cy value and clamp it between 300 and 450 if needed - let cyValue = 300 + (5 - task.score) * 30; - cyValue = Math.min(Math.max(cyValue, 300), 450); - drawFace(g, { cx: center, - cy: cyValue, + cy: 300 + (5 - task.score) * 30, score: task.score, }); From 231a8a0c14591a5dc5460527a3de107505fb353d Mon Sep 17 00:00:00 2001 From: udvale Date: Thu, 13 Feb 2025 23:40:37 -0500 Subject: [PATCH 05/10] revsied testing for user-journey task score validation --- cypress/integration/rendering/journey.spec.js | 135 ++++++++++++------ 1 file changed, 91 insertions(+), 44 deletions(-) diff --git a/cypress/integration/rendering/journey.spec.js b/cypress/integration/rendering/journey.spec.js index 5830119b43..8dd767e2b9 100644 --- a/cypress/integration/rendering/journey.spec.js +++ b/cypress/integration/rendering/journey.spec.js @@ -1,6 +1,7 @@ import { imgSnapshotTest, renderGraph } from '../../helpers/util.ts'; +import 'cypress-fail-on-console-error'; -describe('User journey diagram', () => { +describe('User journey diagram simple tests', () => { it('Simple test', () => { imgSnapshotTest( `journey @@ -63,55 +64,101 @@ section Checkout from website { journey: { useMaxWidth: false } } ); }); +}); + +describe('User journey diagra task score behavior validation', () => { + it('should throw an error if the task score is non-integer', () => { + let errorCaught = false; + + cy.once('uncaught:exception', () => { + errorCaught = true; + return false; + }); + + renderGraph(` + journey + accTitle: simple journey demo + accDescr: 2 main sections: work and home, each with just a few tasks + + section Go to work + Make tea: Hello: Me + Go upstairs: 3: Me + section Go home + Go downstairs: 5: Me + Sit down: 2: Me + `); - it('should throw an error if the task score is not an integer', () => { - expect(() => { - renderGraph( - `journey - accTitle: simple journey demo - accDescr: 2 main sections: work and home, each with just a few tasks - - section Go to work - Make tea: Hello: Me - Go upstairs: 3: Me - section Go home - Go downstairs: 5: Me - Sit down: 2: Me` - ); - }).to.throw('Score must be an integer between 0 and 5'); + cy.wait(500).then(() => { + expect(errorCaught, 'Error should be thrown for a non-integer score').to.equal(true); + }); }); it('should throw an error if the task score is less than 0', () => { - expect(() => { - renderGraph( - `journey - accTitle: simple journey demo - accDescr: 2 main sections: work and home, each with just a few tasks - - section Go to work - Make tea: -10: Me - Go upstairs: 3: Me - section Go home - Go downstairs: 5: Me - Sit down: 2: Me` - ); - }).to.throw('Score must be an integer between 0 and 5'); + let errorCaught = false; + + cy.once('uncaught:exception', () => { + errorCaught = true; + return false; + }); + + renderGraph(` + journey + section Go to work + Make tea: -10: Me + Go upstairs: 3: Me + section Go home + Go downstairs: 5: Me + Sit down: 2: Me + `); + + cy.wait(500).then(() => { + expect(errorCaught, 'Error should be thrown for a score less than 0').to.equal(true); + }); }); it('should throw an error if the task score is greater than 5', () => { - expect(() => { - renderGraph( - `journey - accTitle: simple journey demo - accDescr: 2 main sections: work and home, each with just a few tasks - - section Go to work - Make tea: 23: Me - Go upstairs: 3: Me - section Go home - Go downstairs: 5: Me - Sit down: 2: Me` - ); - }).to.throw('Score must be an integer between 0 and 5'); + let errorCaught = false; + + cy.once('uncaught:exception', () => { + errorCaught = true; + return false; + }); + + renderGraph(` + journey + section Go to work + Make tea: 23: Me + Go upstairs: 3: Me + section Go home + Go downstairs: 5: Me + Sit down: 2: Me + `); + + cy.wait(500).then(() => { + expect(errorCaught, 'Error should be thrown for a score greater than 5').to.equal(true); + }); + }); + + it('should NOT throw an error if the task score is valid (e.g., 4)', () => { + let errorCaught = false; + + cy.once('uncaught:exception', () => { + errorCaught = true; + return false; + }); + + renderGraph(` + journey + section Go to work + Make tea: 4: Me + Go upstairs: 3: Me + section Go home + Go downstairs: 5: Me + Sit down: 2: Me + `); + + cy.wait(500).then(() => { + expect(errorCaught, 'No error should be thrown for a valid score').to.equal(false); + }); }); }); From 76d50142721eae9ea4edd13ed577cd501408c954 Mon Sep 17 00:00:00 2001 From: udvale Date: Fri, 14 Feb 2025 09:41:04 -0500 Subject: [PATCH 06/10] fixed some changes on test (deleted an unused import) --- cypress/integration/rendering/journey.spec.js | 1 - 1 file changed, 1 deletion(-) diff --git a/cypress/integration/rendering/journey.spec.js b/cypress/integration/rendering/journey.spec.js index 8dd767e2b9..a0cf45d82e 100644 --- a/cypress/integration/rendering/journey.spec.js +++ b/cypress/integration/rendering/journey.spec.js @@ -1,5 +1,4 @@ import { imgSnapshotTest, renderGraph } from '../../helpers/util.ts'; -import 'cypress-fail-on-console-error'; describe('User journey diagram simple tests', () => { it('Simple test', () => { From 690bd9c4fc0735490660428fa88ca20b75d2aa5b Mon Sep 17 00:00:00 2001 From: nghtlinh Date: Fri, 14 Feb 2025 15:08:33 -0500 Subject: [PATCH 07/10] Fixed typo --- cypress/integration/rendering/journey.spec.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/cypress/integration/rendering/journey.spec.js b/cypress/integration/rendering/journey.spec.js index a0cf45d82e..97b71dabaa 100644 --- a/cypress/integration/rendering/journey.spec.js +++ b/cypress/integration/rendering/journey.spec.js @@ -65,7 +65,7 @@ section Checkout from website }); }); -describe('User journey diagra task score behavior validation', () => { +describe('User journey diagram task score behavior validation', () => { it('should throw an error if the task score is non-integer', () => { let errorCaught = false; From be5de993391f54828b1086c88a68c5702f9a698d Mon Sep 17 00:00:00 2001 From: udvale Date: Tue, 18 Feb 2025 15:59:46 -0500 Subject: [PATCH 08/10] added score constraint in user journey diagram documentation --- docs/syntax/userJourney.md | 2 ++ packages/mermaid/src/docs/syntax/userJourney.md | 2 ++ 2 files changed, 4 insertions(+) diff --git a/docs/syntax/userJourney.md b/docs/syntax/userJourney.md index 73fcb7468e..1a7ce62861 100644 --- a/docs/syntax/userJourney.md +++ b/docs/syntax/userJourney.md @@ -38,3 +38,5 @@ Each user journey is split into sections, these describe the part of the task the user is trying to complete. Tasks syntax is `Task name: : ` + +**Input Constraint:** The score must be an integer between **0** and **5**. diff --git a/packages/mermaid/src/docs/syntax/userJourney.md b/packages/mermaid/src/docs/syntax/userJourney.md index 3476088aba..70b8e4710f 100644 --- a/packages/mermaid/src/docs/syntax/userJourney.md +++ b/packages/mermaid/src/docs/syntax/userJourney.md @@ -20,3 +20,5 @@ Each user journey is split into sections, these describe the part of the task the user is trying to complete. Tasks syntax is `Task name: : ` + +**Input Constraint:** The score must be an integer between **0** and **5**. From 792ce16ee1438eab27e34370c57093c0df7da1b3 Mon Sep 17 00:00:00 2001 From: udvale Date: Tue, 18 Feb 2025 16:04:33 -0500 Subject: [PATCH 09/10] Added documentation for input constraint Co-authored-by: Monica Nguyen Co-authored-by: Udval Enkhtaivan Co-authored-by: Megan Triplett --- docs/syntax/userJourney.md | 2 +- packages/mermaid/src/docs/syntax/userJourney.md | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/docs/syntax/userJourney.md b/docs/syntax/userJourney.md index 1a7ce62861..f8c50ff135 100644 --- a/docs/syntax/userJourney.md +++ b/docs/syntax/userJourney.md @@ -39,4 +39,4 @@ the user is trying to complete. Tasks syntax is `Task name: : ` -**Input Constraint:** The score must be an integer between **0** and **5**. +**Input Constraint for Task Scores:** The score must be an integer between **0** and **5**. diff --git a/packages/mermaid/src/docs/syntax/userJourney.md b/packages/mermaid/src/docs/syntax/userJourney.md index 70b8e4710f..3c61a369ef 100644 --- a/packages/mermaid/src/docs/syntax/userJourney.md +++ b/packages/mermaid/src/docs/syntax/userJourney.md @@ -21,4 +21,4 @@ the user is trying to complete. Tasks syntax is `Task name: : ` -**Input Constraint:** The score must be an integer between **0** and **5**. +**Input Constraint for Task Scores:** The score must be an integer between **0** and **5**. From 51d0429f7a2ddebc65c3daf68577046da70a58c2 Mon Sep 17 00:00:00 2001 From: udvale Date: Tue, 18 Feb 2025 16:15:21 -0500 Subject: [PATCH 10/10] attempt to fix linting issue --- docs/syntax/userJourney.md | 2 +- packages/mermaid/src/docs/syntax/userJourney.md | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/docs/syntax/userJourney.md b/docs/syntax/userJourney.md index f8c50ff135..8d5c45ea92 100644 --- a/docs/syntax/userJourney.md +++ b/docs/syntax/userJourney.md @@ -39,4 +39,4 @@ the user is trying to complete. Tasks syntax is `Task name: : ` -**Input Constraint for Task Scores:** The score must be an integer between **0** and **5**. +**Input Constraint for Task Scores:** The score must be an integer between **0** and **5**! diff --git a/packages/mermaid/src/docs/syntax/userJourney.md b/packages/mermaid/src/docs/syntax/userJourney.md index 3c61a369ef..4dabc46cc9 100644 --- a/packages/mermaid/src/docs/syntax/userJourney.md +++ b/packages/mermaid/src/docs/syntax/userJourney.md @@ -21,4 +21,4 @@ the user is trying to complete. Tasks syntax is `Task name: : ` -**Input Constraint for Task Scores:** The score must be an integer between **0** and **5**. +**Input Constraint for Task Scores:** The score must be an integer between **0** and **5**!