mermaid

<!DOCTYPE html> <html> <head> <title>utils.spec.js</title> <meta http-equiv="content-type" content="text/html; charset=UTF-8"> <link rel="stylesheet" media="all" href="../doc-style.css" /> <script src="../doc-filelist.js"></script> <script> var relativeDir = "../", thisFile = "Users/knut/Documents/source/mermaid/src/utils.spec.js", defaultSidebar = true; </script> <script src="../doc-script.js"></script> <script src="../mermaid.js"></script> <link rel="stylesheet" href="../mermaid.css" /> </head> <body> <div id="sidebar_wrapper"> <div id="sidebar_switch"> Files Headings </div> <div id="tree"></div> <div id="headings"> <div class="heading h1"> <a href="#utils.spec.js">utils.spec.js</a> </div> </div> </div> <div id="sidebar-toggle"></div> <div id="container"><div class="background highlight"></div> <table cellpadding="0" cellspacing="0"> <tbody> <tr> <td class="docs"> <div class="pilwrap" id="utils.spec.js"> <h1> <a href="#utils.spec.js" name="utils.spec.js" class="pilcrow">¶</a>utils.spec.js </h1> </div> </td> <td class="code highlight"></td> </tr> <tr> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-1" id="section-1">¶</a> </div> <div class="dox"> <div class="summary">Created by knut on 14-11-23. </div> <div class="body"> </div> </div> </td> <td class="code highlight"><div class="highlight"><pre>var log = require('./logger').create(); describe('when detecting chart type ',function() { var utils = require('./utils'); beforeEach(function () { }); it('should handle a sequence defintion', function () { str = 'sequence TB\nbfs1:queue'; var type = utils.detectType(str); expect(type).toBe('sequence'); }); it('should handle a sequence defintion with leading spaces', function () { str = ' sequence TB\nbfs1:queue'; var type = utils.detectType(str); expect(type).toBe('sequence'); }); it('should handle a graph defintion', function () { str = 'graph TB\nbfs1:queue'; var type = utils.detectType(str); expect(type).toBe('graph'); }); it('should handle a graph defintion with leading spaces', function () { str = ' graph TB\nbfs1:queue'; var type = utils.detectType(str); expect(type).toBe('graph'); }); it('should handle a graph defintion with leading spaces and newline', function () { str = ' \n graph TB\nbfs1:queue'; var type = utils.detectType(str); expect(type).toBe('graph'); }); it('should handle a sequence defintion with leading spaces and newline', function () { str = ' \n sequence TB\nbfs1:queue'; var type = utils.detectType(str); expect(type).toBe('sequence'); }); }); describe('when cloning CSS ',function() { var utils = require('./utils'); beforeEach(function () { var MockBrowser = require('mock-browser').mocks.MockBrowser; var mock = new MockBrowser(); </pre></div> </td> </tr> <tr> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-2" id="section-2">¶</a> </div> and in the run-code inside some object </td> <td class="code highlight"><div class="highlight"><pre> document = mock.getDocument(); </pre></div> </td> </tr> <tr> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-3" id="section-3">¶</a> </div> document.body.innerHTML = ''; document.body.innerHTML = ''; </td> <td class="code highlight"><div class="highlight"><pre> }); function stylesToArray(svg) { var styleSheets = svg.getElementsByTagName("style"); expect(styleSheets.length).toBe(1); var styleSheet = styleSheets[0]; var innerStyle = styleSheet.innerHTML; var styleArr = innerStyle.split("\n"); </pre></div> </td> </tr> <tr> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-4" id="section-4">¶</a> </div> Remove first and last two lines to remove the CDATA </td> <td class="code highlight"><div class="highlight"><pre> expect(styleArr.length).toBeGreaterThan(2); var styleArrTrim = styleArr.slice(1,-2); </pre></div> </td> </tr> <tr> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-5" id="section-5">¶</a> </div> Remove all empty lines </td> <td class="code highlight"><div class="highlight"><pre> for (var i = 0; i < styleArrTrim.length; i++) { if (styleArrTrim[i].trim() === '') { styleArrTrim.splice(i,1); i--; } } return styleArrTrim; } function addStyleToDocument() { var styleSheetCount = document.styleSheets.length; var s = document.createElement('style'); s.innerHTML = '.node { stroke:#eee; }\n.node-square { stroke:#bbb; }\n'; document.body.appendChild(s); } function addSecondStyleToDocument() { var styleSheetCount = document.styleSheets.length; var s = document.createElement('style'); s.innerHTML = '.node2 { stroke:#eee; }\n.node-square { stroke:#beb; }\n'; document.body.appendChild(s); } function generateSVG() { var svg = document.createElement('svg'); svg.setAttribute('id', 'mermaid-01'); var g1 = document.createElement('g'); g1.setAttribute('class', 'node'); svg.appendChild(g1); var g2 = document.createElement('g'); g2.setAttribute('class', 'node-square'); svg.appendChild(g2); return svg; } function addMermaidSVGwithStyleToDocument() { var styleSheetCount = document.styleSheets.length; var svg = document.createElement('svg'); svg.setAttribute('id', 'mermaid-03'); var s = document.createElement('style'); s.setAttribute('type', 'text/css'); s.setAttribute('title', 'mermaid-svg-internal-css'); s.innerHTML = '#mermaid-05 .node2 { stroke:#eee; }\n.node-square { stroke:#bfe; }\n'; svg.appendChild(s); document.body.appendChild(svg); document.styleSheets[styleSheetCount].title = 'mermaid-svg-internal-css'; } it('should handle an empty set of classes', function () { var svg = document.createElement('svg'); svg.setAttribute('id', 'mermaid-01'); utils.cloneCssStyles(svg, {}); </pre></div> </td> </tr> <tr> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-6" id="section-6">¶</a> </div> Should not create style element if not needed </td> <td class="code highlight"><div class="highlight"><pre> expect(svg.innerHTML).toBe(''); }); it('should handle a default class', function () { var svg = document.createElement('svg'); svg.setAttribute('id', 'mermaid-01'); utils.cloneCssStyles(svg, { "default": { "styles": ["stroke:#fff","stroke-width:1.5px"] } }); expect(stylesToArray(svg)).toEqual([ '#mermaid-01 .node { stroke:#fff; stroke-width:1.5px; }' ]); </pre></div> </td> </tr> <tr> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-7" id="section-7">¶</a> </div> Also verify the elements around the styling </td> <td class="code highlight"><div class="highlight"><pre> expect(svg.innerHTML).toBe('<style type="text/css" title="mermaid-svg-internal-css">/* <![CDATA[ */\n#mermaid-01 .node { stroke:#fff; stroke-width:1.5px; }\n/* ]]> */\n</style>'); }); it('should handle stylesheet in document with no classes in SVG', function () { var svg = document.createElement('svg'); svg.setAttribute('id', 'mermaid-01'); addStyleToDocument('mermaid'); utils.cloneCssStyles(svg, {}); </pre></div> </td> </tr> <tr> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-8" id="section-8">¶</a> </div> Should not create style element if not needed </td> <td class="code highlight"><div class="highlight"><pre> expect(svg.innerHTML).toBe(''); }); it('should handle stylesheet in document with classes in SVG', function () { var svg = generateSVG(); addStyleToDocument(); utils.cloneCssStyles(svg, {}); expect(stylesToArray(svg)).toEqual([ '.node { stroke: #eee; }', '.node-square { stroke: #bbb; }']); }); it('should handle multiple stylesheets in document with classes in SVG', function () { var svg = generateSVG(); addStyleToDocument(); addSecondStyleToDocument(); utils.cloneCssStyles(svg, {}); expect(stylesToArray(svg)).toEqual([ '.node { stroke: #eee; }', '.node-square { stroke: #bbb; }', '.node-square { stroke: #beb; }']); }); it('should handle multiple stylesheets + ignore styles in other mermaid SVG', function () { var svg = generateSVG(); addStyleToDocument(); addSecondStyleToDocument(); addMermaidSVGwithStyleToDocument(); utils.cloneCssStyles(svg, {}); expect(stylesToArray(svg)).toEqual([ '.node { stroke: #eee; }', '.node-square { stroke: #bbb; }', '.node-square { stroke: #beb; }']); }); it('should handle a default class together with stylesheet in document with classes in SVG', function () { var svg = generateSVG(); addStyleToDocument(); utils.cloneCssStyles(svg, { "default": { "styles": ["stroke:#fff","stroke-width:1.5px"] } }); expect(stylesToArray(svg)).toEqual([ '#mermaid-01 .node { stroke:#fff; stroke-width:1.5px; }', '.node { stroke: #eee; }', '.node-square { stroke: #bbb; }']); }); it('should handle a default class together with stylesheet in document and classDefs', function () { var svg = generateSVG(); addStyleToDocument(); utils.cloneCssStyles(svg, { "default": { "styles": ["stroke:#fff","stroke-width:1.5px"] }, "node-square": { "styles": ["fill:#eee", "stroke:#aaa"] }, "node-circle": { "styles": ["fill:#444", "stroke:#111"] } }); expect(stylesToArray(svg)).toEqual([ '#mermaid-01 .node { stroke:#fff; stroke-width:1.5px; }', '.node { stroke: #eee; }', '.node-square { stroke: #bbb; }', '#mermaid-01 .node-square { fill:#eee; stroke:#aaa; }', '#mermaid-01 .node-circle { fill:#444; stroke:#111; }' ]); }); }); </pre></div> </td> </tr> </tbody> </table> </div> </body> </html>