User journey handler

2025-11-02 20:04:14 +01:00 · 2020-04-04 16:38:30 +01:00
parent 9f8a0234aa
commit f081527731
12 changed files with 1307 additions and 1 deletions
--- a/cypress/integration/rendering/journey.spec.js
+++ b/cypress/integration/rendering/journey.spec.js
@@ -0,0 +1,33 @@
+/* eslint-env jest */
+import { imgSnapshotTest } from '../../helpers/util.js';
+
+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 Go shopping
+
+      section Get to the shops
+      Get car keys: Dad
+      Get into car: Dad, Mum, Child#1, Child#2
+      Drive to supermarket: Dad
+
+      section Do shopping
+      Do actual shop: Mum
+      Get in the way: Dad, Child#1, Child#2
+      `,
+      {}
+    );
+  });
+});
--- a/cypress/platform/user-journey.html
+++ b/cypress/platform/user-journey.html
@@ -0,0 +1,41 @@
+<html>
+  <head>
+    <link
+      href="https://fonts.googleapis.com/css?family=Montserrat&display=swap"
+      rel="stylesheet"
+    />
+
+  </head>
+  <body>
+    <h1>User Journey</h1>
+    <div class="mermaid">
+      journey
+        title Go shopping
+
+        section Get to the shops
+          Get car keys:5: Dad
+          Get into car:5: Dad, Mum, Child 1, Child 2
+          Really drive to supermarket:3: Dad
+
+        section Do shopping
+          Do actual shop:3: Mum
+          Get in the way:2: Dad, Child 1, Child 2
+          Pay: 2: Dad
+
+        section Go home
+          Lose keys:3: Dad
+          Get cross:1: Dad, Child 1
+          Find keys:4: Mum
+          Get into car:4: Dad, Mum, Child 1, Child 2
+          Drive home:3: Dad
+    </div>
+    <script src="./mermaid.js"></script>
+    <script>
+      mermaid.initialize({
+        theme: 'forest',
+        logLevel: 1,
+        journey: { taskMargin: 30 },
+      });
+    </script>
+  </body>
+</html>