added diagram escaping for e2e tests

This commit is contained in:
Christian Klemm
2019-10-05 00:39:07 +02:00
parent 3ca9347361
commit 723fe84383

View File

@@ -1,50 +1,59 @@
import { Base64 } from 'js-base64' import { Base64 } from 'js-base64';
import mermaid2 from '../../src/mermaid' import mermaid2 from '../../src/mermaid';
/** /**
* ##contentLoaded * ##contentLoaded
* Callback function that is called when page is loaded. This functions fetches configuration for mermaid rendering and * Callback function that is called when page is loaded. This functions fetches configuration for mermaid rendering and
* 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') {
/*! /*!
@@ -52,15 +61,15 @@ if (typeof document !== 'undefined') {
*/ */
window.addEventListener( window.addEventListener(
'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
) );
} }