6262 - Fixed faces positioning in journey diagram

cypress/integration/rendering/journey.spec.js

@@ -64,3 +64,108 @@ section Checkout from website
     );
   });
 });
+
+describe('User journey diagram 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
+    `);
+
+    cy.get('svg')
+      .should('exist')
+      .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', () => {
+    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.get('svg')
+      .should('exist')
+      .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 greater than 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.get('svg')
+      .should('exist')
+      .then(() => {
+        expect(errorCaught, 'Error should be thrown for a non-integer score').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.get('svg')
+      .should('exist')
+      .then(() => {
+        expect(errorCaught, 'Error should be thrown for a non-integer score').to.equal(false);
+      });
+  });
+});

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: <score>: <comma separated list of actors>`
+
+**Input Constraint for Task Score:** The score must be an integer between **0** and **5**.

packages/mermaid/src/diagrams/user-journey/svgDraw.js

@@ -212,6 +212,11 @@ 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 (!Number.isInteger(task.score) || task.score > 5 || task.score < 0) {
+    throw new Error('Score must be an integer between 0 and 5');
+  }
+
   drawFace(g, {
     cx: center,
     cy: 300 + (5 - task.score) * 30,

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: <score>: <comma separated list of actors>`
+
+**Input Constraint for Task Score:** The score must be an integer between **0** and **5**.