mirrors
/
mermaid
mirror of https://github.com/mermaid-js/mermaid.git
2
0
Fork 0
Code Issues Projects Releases Wiki Activity

Merge pull request #445 from whyzdev/flowchat_text 

added tests and fix cli css style selector lowercase problem
This commit is contained in:
Knut Sveidqvist 2017-01-03 19:28:06 +01:00 committed by GitHub
parent 1903154d01 9558ebcb0b
commit 7f0d4fff1b
9 changed files with 235 additions and 37 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
lib/phantomscript.js
View File

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

2
package.json
View File

@ -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"
},

118
test/cli_test-samples.js
View File

@ -6,11 +6,29 @@ 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);
@ -18,36 +36,38 @@ function exec_mermaid(args, verify) {
});
}
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));
});

5
test/fixtures/samples/flowchart_text2.mmd vendored Normal file
View File

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

11
test/fixtures/samples/gantt_axis_formatter.cfg vendored Normal file
View File

@ -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;}"]]
}

8
test/fixtures/samples/gantt_axis_formatter.mmd vendored Normal file
View File

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

0
testgitgraph.mm → test/fixtures/samples/gitgraph.mmd vendored
View File

15
test/fixtures/samples/load_html_save_screenshot_png.phantomjs vendored Normal file
View File

@ -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();
}

103
test/fixtures/samples/samples.html vendored Normal file
View File

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