Merge pull request #445 from whyzdev/flowchat_text

added tests and fix cli css style selector lowercase problem

lib/phantomscript.js

@@ -90,8 +90,9 @@ files.forEach(function(file) {
   })
 
   oDOM = oParser.parseFromString(svgContent, "text/xml")
-
+  
   resolveSVGElement(oDOM.firstChild)
+  setSVGStyle(oDOM.firstChild, options.css)
 
   // traverse the SVG, and replace all foreignObject elements
   // can be removed when https://github.com/knsv/mermaid/issues/58 is resolved
@@ -184,6 +185,13 @@ function resolveSVGElement(element) {
   }
 }
 
+function setSVGStyle(svg, css) {
+  if (!css || !svg) {return}
+  var styles=svg.getElementsByTagName('style');
+  if (!styles || styles.length==0) { return }
+  styles[0].textContent = css;
+}
+
 function resolveForeignObjects(element) {
     return;
   var children

package.json

@@ -27,7 +27,7 @@
     "dist-slim-mermaid": "node node_modules/browserify/bin/cmd.js src/mermaid.js  -t babelify  -s mermaid    -o dist/mermaid.slim.js    -x d3   && cat dist/mermaid.slim.js    | node node_modules/uglifyjs/bin/uglifyjs -mc > dist/mermaid.slim.min.js",
     "dist-slim-mermaidAPI": "node node_modules/browserify/bin/cmd.js src/mermaidAPI.js -t babelify -s mermaidAPI -o dist/mermaidAPI.slim.js -x d3 && cat dist/mermaidAPI.slim.js | node node_modules/uglifyjs/bin/uglifyjs -mc > dist/mermaidAPI.slim.min.js",
     "dist-mermaid": "node node_modules/browserify/bin/cmd.js src/mermaid.js  -t babelify  -s mermaid    -o dist/mermaid.js         && cat dist/mermaid.js         | node node_modules/uglifyjs/bin/uglifyjs -mc > dist/mermaid.min.js",
-    "dist-mermaid-nomin": "node node_modules/browserify/bin/cmd.js src/mermaid.js  -t babelify  -s mermaid    -o dist/mermaid.js && node bin/mermaid -v -s testgitgraph.mm && testgitgraph.mm.svg",
+    "dist-mermaid-nomin": "node node_modules/browserify/bin/cmd.js src/mermaid.js  -t babelify  -s mermaid  -o dist/mermaid.js",
     "dist-mermaidAPI": "node node_modules/browserify/bin/cmd.js src/mermaidAPI.js -t babelify -s mermaidAPI -o dist/mermaidAPI.js      && cat dist/mermaidAPI.js      | node node_modules/uglifyjs/bin/uglifyjs -mc > dist/mermaidAPI.min.js",
     "dist": "npm run dist-slim-mermaid && npm run dist-slim-mermaidAPI && npm run dist-mermaid && npm run dist-mermaidAPI"
   },

test/cli_test-samples.js

@@ -6,48 +6,68 @@ var path = require('path')
   , rimraf = require('rimraf')
 
 var test_dir = 'test/fixtures/samples/'.replace('/',path.sep)
+var phantomjs = 'node_modules/.bin/phantomjs '.replace('/',path.sep)
+var load_html_save_screenshot_png_scripts = test_dir+path.sep+'load_html_save_screenshot_png.phantomjs'
 
 rimraf.sync(test_dir+'*.actual.*');
-
+
+function prepend_output_args(args) {
+  return '--outputDir=' + test_dir + ' --outputSuffix=.actual' + args
+}
+
 function exec_mermaid(args, verify) {
-  exec('bin/mermaid.js ' + args, 
+  var cmd = 'bin/mermaid.js ' + args
+  exec_cmd(cmd, verify)
+}
+
+function exec_phantomjs_to_load_html_save_screenshot_png(html, verify) {
+  var cmd = (phantomjs + ' ' + load_html_save_screenshot_png_scripts + 
+    ' ' + html + ' ' + html + '.actual.png');
+  exec_cmd(cmd, verify)
+}
+
+function exec_cmd(cmd, verify) {
+  console.log('cmd: ', cmd)
+  exec(cmd,
     {env: {PATH: './node_modules/.bin'+path.delimiter+process.env.PATH}}, 
     function(error, stdout, stderr) {
       console.log('error:',error,'\nstdout:\n',stdout,'\nstderr:\n',stderr);
       verify(error, stdout, stderr);
     });
 }
 
+function verify_no_error(t) {
+  return function(error, stdout, stderr) {
+    t.notOk(stderr, 'no error')
+    t.end()
+  }
+}
+
+function verify_error(t) {
+  return function(error, stdout, stderr) {
+    t.ok(stderr, 'should get error')
+    t.end()
+  }
+}
+
 test('mermaid cli help', function(t) {
   t.plan(1);
   var args = [ '--help' ]
-  exec_mermaid(args.join(' '), function(error, stdout, stderr) {
-      t.notOk(stderr, 'no error')
-      t.end()
-    });
+  exec_mermaid(args.join(' '), verify_no_error(t));
 });
 
 test('mermaid cli help', function(t) {
   t.plan(1);
   var args = [ '--badopt' ]
-  exec_mermaid(args.join(' '), function(error, stdout, stderr) {
-      t.ok(stderr, 'should get error')
-      t.end()
-    });
+  exec_mermaid(args.join(' '), verify_error(t));
 });
 
-//todo
 test.skip('sequence syntax error', function(t) {
   t.plan(1);
   var args = [ '--svg',
-    '--outputDir=' + test_dir,
-    '--outputSuffix=.actual',
     test_dir+'sequence_err.mmd'
   ]
-  exec_mermaid(args.join(' '), function(error, stdout, stderr) {
-      t.ok(stderr, 'should get error')
-      t.end()
-    });
+  exec_mermaid(prepend_output_args(args.join(' ')), verify_no_error(t));
 });
 
 ['', 'fo', 'tspan', 'old'].forEach(function(textPlacement) {
@@ -59,35 +79,63 @@ test.skip('sequence syntax error', function(t) {
       textPlacement ? '--sequenceConfig='+test_dir+'sequence_text_'+textPlacement+'.cfg' : '',  
       test_dir+'sequence_text.mmd'
     ]
-    exec_mermaid(args.join(' '), function(error, stdout, stderr) {
-        t.notOk(stderr, 'no error')
-        t.end()
-      });
+    exec_mermaid(args.join(' '), verify_no_error(t));
   })
 });
 
 test('sequence png', function(t) {
   t.plan(1);
   var args = [ '--png',
-    '--outputDir=' + test_dir,
-    '--outputSuffix=.actual',
     test_dir+'sequence_text.mmd'
   ]
-  exec_mermaid(args.join(' '), function(error, stdout, stderr) {
-      t.notOk(stderr, 'no error')
-      t.end()
-    });
-})
+  exec_mermaid(prepend_output_args(args.join(' ')), verify_no_error(t));
+});
 
 test('flowchart svg text', function(t) {
   t.plan(1);
   var args = [ '--svg',
-    '--outputDir=' + test_dir,
-    '--outputSuffix=.actual',
+    '--css=dist/mermaid.css',
+    '--width=500',
     test_dir+'flowchart_text.mmd'
   ]
-  exec_mermaid(args.join(' '), function(error, stdout, stderr) {
-      t.notOk(stderr, 'no error')
-      t.end()
-    });
-})
+  exec_mermaid(prepend_output_args(args.join(' ')), verify_no_error(t));
+});
+
+['svg', 'png'].forEach(function(format) {
+  test('flowchart '+format+'text2', function(t) {
+  t.plan(1);
+  var args = [ '--'+format,
+    '--css=dist/mermaid.forest.css',
+    '--width=500',
+    test_dir+'flowchart_text2.mmd'
+  ]
+  exec_mermaid(prepend_output_args(args.join(' ')), verify_no_error(t));
+}) });
+
+
+test('gantt axis formatter svg', function(t) {
+  t.plan(1);
+  var args = [ '--svg',
+    '--css=dist/mermaid.css',
+    '--width=500',
+    '--ganttConfig='+test_dir+'gantt_axis_formatter.cfg',  
+    test_dir+'gantt_axis_formatter.mmd'
+  ]
+  exec_mermaid(prepend_output_args(args.join(' ')), verify_no_error(t));
+});
+
+
+test('gitgraph sample svg', function(t) {
+  t.plan(1);
+  var args = [ '-s', '-v',
+    '--width=500',
+    test_dir+'gitgraph.mmd'
+  ]
+  exec_mermaid(prepend_output_args(args.join(' ')), verify_no_error(t));
+});
+
+test('load sample.html in phantomjs and save screenshot png', function(t) {
+  t.plan(1);
+  exec_phantomjs_to_load_html_save_screenshot_png(test_dir+'samples.html', 
+    verify_no_error(t));
+});

test/fixtures/samples/flowchart_text2.mmd

@@ -0,0 +1,5 @@
+graph TD;
+  A-->B;
+  A-->C;
+  B-->D;
+  C-->D;

test/fixtures/samples/gantt_axis_formatter.cfg

@@ -0,0 +1,11 @@
+{
+    "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;}"]]
+}

test/fixtures/samples/gantt_axis_formatter.mmd

@@ -0,0 +1,8 @@
+gantt
+dateFormat YYYY-MM-DD
+title Adding GANTT diagram functionality to mermaid
+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

test/fixtures/samples/load_html_save_screenshot_png.phantomjs

@@ -0,0 +1,15 @@
+// usage: ../../../node_modules/.bin/phantomjs <html> <png>
+var system = require('system');
+var html = system.args[1];
+var png = system.args[2];
+console.log('png:', png)
+var page = require('webpage').create(), 
+  loadInProgress = false, 
+  fs = require('fs');
+
+page.open(html);
+page.onLoadFinished = function() {
+  loadInProgress = false;
+  page.render(png);
+ phantom.exit();
+}

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>
+