add more tests in cli_test-samples: flowchart, sequence, gantt, gitgraph, load html in phantomjs and save screenshot png

2025-09-21 08:19:43 +02:00 · 2017-01-01 14:58:48 -05:00
parent 2d2f0b9281
commit a56fe7a8fe
8 changed files with 226 additions and 27 deletions
--- a/test/fixtures/samples/samples.html
+++ b/test/fixtures/samples/samples.html
@@ -0,0 +1,103 @@
+<!DOCTYPE html>
+<html><head>
+<meta charset="UTF-8">
+<link rel="stylesheet" href="../../../dist/mermaid.css"/>
+<script src="../../../dist/mermaid.js"></script>
+<script>
+  var config = {
+    startOnLoad:true,
+    callback:function(id){
+        console.log(id,' rendered');
+    },
+    flowchart:{
+      useMaxWidth:false,
+      htmlLabels:true
+    },
+    sequenceDiagram: {
+      "textPlacement": "tspan"
+    },
+    gantt: {
+      "titleTopMargin":25,
+      "barHeight":20,
+      "barGap":4,
+      "topPadding":50,
+      "sidePadding":75,
+      "gridLineStartPadding":35,
+      "fontSize":11,
+      "numberSectionStyles":3,
+      "axisFormatter": [["%-m/%-d", function (d){return d.getDay() == 1;}]]
+    },
+    logLevel:5
+  };
+  mermaid.initialize(config);
+</script>
+
+</head><body>
+
+<h3>flow chart</h3>
+
+<div class="mermaid" id="flow_chart_1">
+graph TD
+    A[label]
+    B[very very very long long long long-long-long text]
+    A--test-->B
+</div>
+
+<div class="mermaid" id="flow_chart_2">
+graph TD;
+  A-->B;
+  A-->C;
+  B-->D;
+  C-->D;
+</div>
+
+<h3>sequence diagram</h3>
+
+<div class="mermaid" id="sequence_diagram_1">
+sequenceDiagram
+    participant A as actor 
+    participant B as very very very long long long long-long-long text
+    A->>B: hi 
+    B-->A: 
+    B->>A: hello
+</div>
+
+<h3>gantt chart</h3>
+
+<div class="mermaid" id="gantt_axis_formatter">
+gantt
+dateFormat YYYY-MM-DD
+title gantt chart
+section A section
+Completed task :done, des1, 2014-01-06,2014-01-08
+Active task :active, des2, 2014-01-09, 3d
+Future task : des3, after des2, 5d
+Future task2 : des4, after des3, 5d
+</div>
+
+<h3>git graph</h3>
+
+<div class="mermaid" id="git_graph_1">
+gitGraph BT:
+options
+{
+"nodeSpacing": 150
+}
+end
+    commit
+    branch newbranch
+    checkout newbranch
+    commit
+    commit
+    checkout master
+    commit
+    commit
+    merge newbranch
+    reset newbranch^^
+    commit
+    commit
+</div>
+
+
+</body></html>
+