marcel/mermaid
1
0
Fork 0
mirror of https://github.com/mermaid-js/mermaid.git synced 2025-09-07 09:36:41 +02:00
Code Issues Packages Projects Releases Wiki Activity

added diagram escaping for e2e tests

Browse Source
This commit is contained in:
Christian Klemm
2019-10-05 00:39:07 +02:00
parent 3ca9347361
commit 723fe84383
1 changed files with 46 additions and 37 deletions
Download Patch File Download Diff File Expand all files Collapse all files

77
cypress/platform/viewer.js
View File

@@ -1,5 +1,5 @@
import { Base64 } from 'js-base64' import { Base64 } from 'js-base64';
import mermaid2 from '../../src/mermaid' import mermaid2 from '../../src/mermaid';
/** /**
* ##contentLoaded * ##contentLoaded
@@ -7,44 +7,53 @@ import mermaid2 from '../../src/mermaid'
* calls init for rendering the mermaid diagrams on the page. * calls init for rendering the mermaid diagrams on the page.
*/ */
const contentLoaded = function() { const contentLoaded = function() {
let pos = document.location.href.indexOf('?graph=') let pos = document.location.href.indexOf('?graph=');
if (pos > 0) { if (pos > 0) {
pos = pos + 7 pos = pos + 7;
const graphBase64 = document.location.href.substr(pos) const graphBase64 = document.location.href.substr(pos);
const graphObj = JSON.parse(Base64.decode(graphBase64)) const graphObj = JSON.parse(Base64.decode(graphBase64));
// const graph = 'hello' // const graph = 'hello'
console.log(graphObj) console.log(graphObj);
const div = document.createElement('div') const div = document.createElement('div');
div.id = 'block' div.id = 'block';
div.className = 'mermaid' div.className = 'mermaid';
div.innerHTML = graphObj.code div.innerHTML = graphObj.code;
document.getElementsByTagName('body')[0].appendChild(div) document.getElementsByTagName('body')[0].appendChild(div);
global.mermaid.initialize(graphObj.mermaid) global.mermaid.initialize(escapeDiagram(graphObj.mermaid));
// console.log('graphObj.mermaid', graphObj.mermaid) // console.log('graphObj.mermaid', graphObj.mermaid)
global.mermaid.init() global.mermaid.init();
}
} }
};
const contentLoadedApi = function() { const contentLoadedApi = function() {
let pos = document.location.href.indexOf('?graph=') let pos = document.location.href.indexOf('?graph=');
if (pos > 0) { if (pos > 0) {
pos = pos + 7 pos = pos + 7;
const graphBase64 = document.location.href.substr(pos) const graphBase64 = document.location.href.substr(pos);
const graphObj = JSON.parse(Base64.decode(graphBase64)) const graphObj = JSON.parse(Base64.decode(graphBase64));
// const graph = 'hello' // const graph = 'hello'
const div = document.createElement('div') const div = document.createElement('div');
div.id = 'block' div.id = 'block';
div.className = 'mermaid' div.className = 'mermaid';
// div.innerHTML = graphObj.code // div.innerHTML = graphObj.code
document.getElementsByTagName('body')[0].appendChild(div) document.getElementsByTagName('body')[0].appendChild(div);
global.mermaid.initialize(graphObj.mermaid) global.mermaid.initialize(escapeDiagram(graphObj.mermaid));
mermaid2.render('newid', graphObj.code, (svgCode, bindFunctions) => { mermaid2.render(
div.innerHTML = svgCode 'newid',
graphObj.code,
(svgCode, bindFunctions) => {
div.innerHTML = svgCode;
bindFunctions(div) bindFunctions(div);
}, div) },
} div
);
} }
};
const escapeDiagram = function(diagram) {
return diagram.replace(/</g, '&lt;').replace('/>/g', '&gt;');
};
if (typeof document !== 'undefined') { if (typeof document !== 'undefined') {
/*! /*!
@@ -54,13 +63,13 @@ if (typeof document !== 'undefined') {
'load', 'load',
function() { function() {
if (this.location.href.match('xss.html')) { if (this.location.href.match('xss.html')) {
this.console.log('Using api') this.console.log('Using api');
contentLoadedApi() contentLoadedApi();
} else { } else {
this.console.log('Not using api') this.console.log('Not using api');
contentLoaded() contentLoaded();
} }
}, },
false false
) );
} }