Merge branch 'develop' into origin/3258_Flowchart_nodeSpacing_Subgraph

cypress/integration/other/configuration.spec.js

@@ -118,11 +118,53 @@ describe('Configuration', () => {
     it('should not taint the initial configuration when using multiple directives', () => {
       const url = 'http://localhost:9000/regression/issue-1874.html';
       cy.visit(url);
-
-      cy.get('svg');
+      cy.window().should('have.property', 'rendered', true);
+      cy.get('svg').should('be.visible');
       cy.matchImageSnapshot(
         'configuration.spec-should-not-taint-initial-configuration-when-using-multiple-directives'
       );
     });
   });
+
+  describe('suppressErrorRendering', () => {
+    beforeEach(() => {
+      cy.on('uncaught:exception', (err, runnable) => {
+        return !err.message.includes('Parse error on line');
+      });
+    });
+
+    it('should not render error diagram if suppressErrorRendering is set', () => {
+      const url = 'http://localhost:9000/suppressError.html?suppressErrorRendering=true';
+      cy.visit(url);
+      cy.window().should('have.property', 'rendered', true);
+      cy.get('#test')
+        .find('svg')
+        .should(($svg) => {
+          // all failing diagrams should not appear!
+          expect($svg).to.have.length(2);
+          // none of the diagrams should be error diagrams
+          expect($svg).to.not.contain('Syntax error');
+        });
+      cy.matchImageSnapshot(
+        'configuration.spec-should-not-render-error-diagram-if-suppressErrorRendering-is-set'
+      );
+    });
+
+    it('should render error diagram if suppressErrorRendering is not set', () => {
+      const url = 'http://localhost:9000/suppressError.html';
+      cy.visit(url);
+      cy.window().should('have.property', 'rendered', true);
+      cy.get('#test')
+        .find('svg')
+        .should(($svg) => {
+          // all five diagrams should be rendered
+          expect($svg).to.have.length(5);
+          // some of the diagrams should be error diagrams
+          expect($svg).to.contain('Syntax error');
+        });
+      cy.matchImageSnapshot(
+        'configuration.spec-should-render-error-diagram-if-suppressErrorRendering-is-not-set'
+      );
+    });
+  });
 });

cypress/integration/rendering/flowchart-elk.spec.js

@@ -844,3 +844,42 @@ end
     });
   });
 });
+
+describe('Title and arrow styling #4813', () => {
+  it('should render a flowchart with title', () => {
+    const titleString = 'Test Title';
+    renderGraph(
+      `---
+      title: ${titleString}
+      ---
+      flowchart LR
+      A-->B
+      A-->C`,
+      { flowchart: { defaultRenderer: 'elk' } }
+    );
+    cy.get('svg').should((svg) => {
+      const title = svg[0].querySelector('text');
+      expect(title.textContent).to.contain(titleString);
+    });
+  });
+
+  it('Render with stylized arrows', () => {
+    renderGraph(
+      `
+      flowchart LR
+      A-->B
+      B-.-oC
+      C==xD
+      D ~~~ A`,
+      { flowchart: { defaultRenderer: 'elk' } }
+    );
+    cy.get('svg').should((svg) => {
+      const edges = svg[0].querySelectorAll('.edges path');
+      console.log(edges);
+      expect(edges[0]).to.have.attr('pattern', 'solid');
+      expect(edges[1]).to.have.attr('pattern', 'dotted');
+      expect(edges[2]).to.have.css('stroke-width', '3.5px');
+      expect(edges[3]).to.have.css('stroke-width', '1.5px');
+    });
+  });
+});

cypress/integration/rendering/sequencediagram.spec.js

@@ -375,7 +375,7 @@ context('Sequence diagram', () => {
         {}
       );
     });
-    it('should have actor-top and actor-bottom classes on top and bottom actor box and symbol', () => {
+    it('should have actor-top and actor-bottom classes on top and bottom actor box and symbol and actor-box and actor-man classes for text tags', () => {
       imgSnapshotTest(
         `
         sequenceDiagram
@@ -394,6 +394,9 @@ context('Sequence diagram', () => {
       cy.get('.actor-man').should('have.class', 'actor-bottom');
       cy.get('.actor.actor-bottom').should('not.have.class', 'actor-top');
       cy.get('.actor-man.actor-bottom').should('not.have.class', 'actor-top');
+
+      cy.get('text.actor-box').should('include.text', 'Alice');
+      cy.get('text.actor-man').should('include.text', 'Bob');
     });
     it('should render long notes left of actor', () => {
       imgSnapshotTest(
@@ -807,7 +810,10 @@ context('Sequence diagram', () => {
         note left of Alice: config: mirrorActors=true<br/>directive: mirrorActors=false
         Bob->>Alice: Short as well
       `,
-        { logLevel: 0, sequence: { mirrorActors: true, noteFontSize: 18, noteFontFamily: 'Arial' } }
+        {
+          logLevel: 0,
+          sequence: { mirrorActors: true, noteFontSize: 18, noteFontFamily: 'Arial' },
+        }
       );
     });
   });
@@ -858,7 +864,10 @@ context('Sequence diagram', () => {
         a->>j: Hello John, how are you?
         j-->>a: Great!
       `,
-        { logLevel: 0, sequence: { mirrorActors: true, noteFontSize: 18, noteFontFamily: 'Arial' } }
+        {
+          logLevel: 0,
+          sequence: { mirrorActors: true, noteFontSize: 18, noteFontFamily: 'Arial' },
+        }
       );
     });
     it('should support actor links and properties when not mirrored EXPERIMENTAL: USE WITH CAUTION', () => {

cypress/platform/ashish2.html

@@ -33,7 +33,9 @@
         background-image: radial-gradient(#fff 1%, transparent 11%),
           radial-gradient(#fff 1%, transparent 11%);
         background-size: 20px 20px;
-        background-position: 0 0, 10px 10px;
+        background-position:
+          0 0,
+          10px 10px;
         background-repeat: repeat;
       }
       .malware {

cypress/platform/click_security_loose.html

@@ -1,4 +1,4 @@
-<!DOCTYPE html>
+<!doctype html>
 <html>
   <head>
     <meta charset="utf-8" />

cypress/platform/click_security_other.html

@@ -1,4 +1,4 @@
-<!DOCTYPE html>
+<!doctype html>
 <html>
   <head>
     <meta charset="utf-8" />

cypress/platform/click_security_sandbox.html

@@ -1,4 +1,4 @@
-<!DOCTYPE html>
+<!doctype html>
 <html>
   <head>
     <meta charset="utf-8" />

cypress/platform/click_security_strict.html

@@ -1,4 +1,4 @@
-<!DOCTYPE html>
+<!doctype html>
 <html>
   <head>
     <meta charset="utf-8" />

cypress/platform/css1.html

@@ -1,4 +1,4 @@
-<!DOCTYPE html>
+<!doctype html>
 <html>
   <head>
     <meta charset="utf-8" />

cypress/platform/empty.html

@@ -1,4 +1,4 @@
-<!DOCTYPE html>
+<!doctype html>
 <html lang="en">
   <head>
     <meta charset="UTF-8" />

cypress/platform/interaction.html

@@ -1,4 +1,4 @@
-<!DOCTYPE html>
+<!doctype html>
 <html>
   <head>
     <meta charset="utf-8" />

cypress/platform/regression/issue-1874.html

@@ -21,7 +21,11 @@ sequenceDiagram
     mermaid.initialize({
       theme: 'base',
       themeVariables: {},
-      startOnLoad: true,
+      startOnLoad: false,
     });
+    await mermaid.run();
+    if (window.Cypress) {
+      window.rendered = true;
+    }
   </script>
 </html>

cypress/platform/render-after-error.html

@@ -1,4 +1,4 @@
-<!DOCTYPE html>
+<!doctype html>
 <html>
   <head>
     <meta charset="utf-8" />

cypress/platform/rerender.html

@@ -1,4 +1,4 @@
-<!DOCTYPE html>
+<!doctype html>
 <html>
   <head>
     <meta charset="utf-8" />

cypress/platform/subgraph.html

@@ -1,4 +1,4 @@
-<!DOCTYPE html>
+<!doctype html>
 <html>
   <head>
     <meta charset="utf-8" />

cypress/platform/suppressError.html

@@ -0,0 +1,59 @@
+<!doctype html>
+<html>
+  <head>
+    <meta charset="utf-8" />
+    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+    <title>Mermaid Quick Test Page</title>
+    <link rel="icon" type="image/png" href="data:image/png;base64,iVBORw0KGgo=" />
+  </head>
+  <body>
+    <div id="test">
+      <pre class="mermaid">
+  flowchart
+      a[This should be visible]
+    </pre
+      >
+      <pre class="mermaid">
+  flowchart
+    a --< b
+    </pre
+      >
+      <pre class="mermaid">
+  flowchart
+      a[This should be visible]
+    </pre
+      >
+      <pre class="mermaid">
+  ---
+  config:
+    suppressErrorRendering: true # This should not affect anything, as suppressErrorRendering is a secure config
+  ---
+  flowchart
+    a --< b
+    </pre
+      >
+      <pre class="mermaid">
+  ---
+  config:
+    suppressErrorRendering: false # This should not affect anything, as suppressErrorRendering is a secure config
+  ---
+  flowchart
+    a --< b
+    </pre
+      >
+    </div>
+    <script type="module">
+      import mermaid from './mermaid.esm.mjs';
+      const shouldSuppress =
+        new URLSearchParams(window.location.search).get('suppressErrorRendering') === 'true';
+      mermaid.initialize({ startOnLoad: false, suppressErrorRendering: shouldSuppress });
+      try {
+        await mermaid.run();
+      } catch {
+        if (window.Cypress) {
+          window.rendered = true;
+        }
+      }
+    </script>
+  </body>
+</html>

cypress/platform/vertices.html

@@ -1,4 +1,4 @@
-<!DOCTYPE html>
+<!doctype html>
 <html>
   <head>
     <meta charset="utf-8" />

cypress/platform/viewer.js

@@ -1,4 +1,5 @@
 import mermaid from './mermaid.esm.mjs';
+import flowchartELK from './mermaid-flowchart-elk.esm.mjs';
 import externalExample from './mermaid-example-diagram.esm.mjs';
 import zenUml from './mermaid-zenuml.esm.mjs';
 
@@ -45,7 +46,7 @@ const contentLoaded = async function () {
       document.getElementsByTagName('body')[0].appendChild(div);
     }
 
-    await mermaid.registerExternalDiagrams([externalExample, zenUml]);
+    await mermaid.registerExternalDiagrams([externalExample, zenUml, flowchartELK]);
     mermaid.initialize(graphObj.mermaid);
     await mermaid.run();
   }

cypress/platform/xss22.html

@@ -1,4 +1,4 @@
-<!DOCTYPE html>
+<!doctype html>
 <html lang="en">
   <head>
     <meta charset="utf-8" />