Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

added tests and fix cli css style selector lowercase problem #445

Merged
merged 4 commits into from
Jan 3, 2017
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
10 changes: 9 additions & 1 deletion lib/phantomscript.js
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down Expand Up @@ -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
Expand Down
2 changes: 1 addition & 1 deletion package.json
Original file line number Diff line number Diff line change
Expand Up @@ -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"
},
Expand Down
118 changes: 83 additions & 35 deletions test/cli_test-samples.js
Original file line number Diff line number Diff line change
Expand Up @@ -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) {
Expand All @@ -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 changes: 5 additions & 0 deletions test/fixtures/samples/flowchart_text2.mmd
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
graph TD;
A-->B;
A-->C;
B-->D;
C-->D;
11 changes: 11 additions & 0 deletions test/fixtures/samples/gantt_axis_formatter.cfg
Original file line number Diff line number Diff line change
@@ -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 changes: 8 additions & 0 deletions test/fixtures/samples/gantt_axis_formatter.mmd
Original file line number Diff line number Diff line change
@@ -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
File renamed without changes.
15 changes: 15 additions & 0 deletions test/fixtures/samples/load_html_save_screenshot_png.phantomjs
Original file line number Diff line number Diff line change
@@ -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 changes: 103 additions & 0 deletions test/fixtures/samples/samples.html
Original file line number Diff line number Diff line change
@@ -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>