Reverting to cypress 9.7 in order to get applitools back in the game

cypress/integration/other/configuration.spec.js

@@ -0,0 +1,119 @@
+import { renderGraph } from '../../helpers/util';
+describe('Configuration', () => {
+  describe('arrowMarkerAbsolute', () => {
+    it('should handle default value false of arrowMarkerAbsolute', () => {
+      renderGraph(
+        `graph TD
+        A[Christmas] -->|Get money| B(Go shopping)
+        B --> C{Let me think}
+        C -->|One| D[Laptop]
+        C -->|Two| E[iPhone]
+        C -->|Three| F[fa:fa-car Car]
+        `,
+        {}
+      );
+
+      // Check the marker-end property to make sure it is properly set to
+      // start with #
+      cy.get('.edgePath path')
+        .first()
+        .should('have.attr', 'marker-end')
+        .should('exist')
+        .and('include', 'url(#');
+    });
+    it('should handle default value false of arrowMarkerAbsolute', () => {
+      renderGraph(
+        `graph TD
+        A[Christmas] -->|Get money| B(Go shopping)
+        B --> C{Let me think}
+        C -->|One| D[Laptop]
+        C -->|Two| E[iPhone]
+        C -->|Three| F[fa:fa-car Car]
+        `,
+        {}
+      );
+
+      // Check the marker-end property to make sure it is properly set to
+      // start with #
+      cy.get('.edgePath path')
+        .first()
+        .should('have.attr', 'marker-end')
+        .should('exist')
+        .and('include', 'url(#');
+    });
+    it('should handle arrowMarkerAbsolute explicitly set to false', () => {
+      renderGraph(
+        `graph TD
+        A[Christmas] -->|Get money| B(Go shopping)
+        B --> C{Let me think}
+        C -->|One| D[Laptop]
+        C -->|Two| E[iPhone]
+        C -->|Three| F[fa:fa-car Car]
+        `,
+        {
+          arrowMarkerAbsolute: false,
+        }
+      );
+
+      // Check the marker-end property to make sure it is properly set to
+      // start with #
+      cy.get('.edgePath path')
+        .first()
+        .should('have.attr', 'marker-end')
+        .should('exist')
+        .and('include', 'url(#');
+    });
+    it('should handle arrowMarkerAbsolute explicitly set to "false" as false', () => {
+      renderGraph(
+        `graph TD
+        A[Christmas] -->|Get money| B(Go shopping)
+        B --> C{Let me think}
+        C -->|One| D[Laptop]
+        C -->|Two| E[iPhone]
+        C -->|Three| F[fa:fa-car Car]
+        `,
+        {
+          arrowMarkerAbsolute: 'false',
+        }
+      );
+
+      // Check the marker-end property to make sure it is properly set to
+      // start with #
+      cy.get('.edgePath path')
+        .first()
+        .should('have.attr', 'marker-end')
+        .should('exist')
+        .and('include', 'url(#');
+    });
+    it('should handle arrowMarkerAbsolute set to true', () => {
+      renderGraph(
+        `graph TD
+        A[Christmas] -->|Get money| B(Go shopping)
+        B --> C{Let me think}
+        C -->|One| D[Laptop]
+        C -->|Two| E[iPhone]
+        C -->|Three| F[fa:fa-car Car]
+        `,
+        {
+          arrowMarkerAbsolute: true,
+        }
+      );
+
+      cy.get('.edgePath path')
+        .first()
+        .should('have.attr', 'marker-end')
+        .should('exist')
+        .and('include', 'url(http://localhost');
+    });
+    it('should not taint the initial configuration when using multiple directives', () => {
+      const url = 'http://localhost:9000/regression/issue-1874.html';
+      cy.viewport(1440, 1024);
+      cy.visit(url);
+
+      cy.get('svg');
+      cy.matchImageSnapshot(
+        'configuration.spec-should-not-taint-initial-configuration-when-using-multiple-directives'
+      );
+    });
+  });
+});

cypress/integration/other/ghsa.spec.js

@@ -0,0 +1,10 @@
+import { urlSnapshotTest } from '../../helpers/util';
+
+describe('CSS injections', () => {
+  it('should not allow CSS injections outside of the diagram', () => {
+    urlSnapshotTest('http://localhost:9000/ghsa1.html', {
+      logLevel: 1,
+      flowchart: { htmlLabels: false },
+    });
+  });
+});

cypress/integration/other/interaction.spec.js

@@ -0,0 +1,267 @@
+describe('Interaction', () => {
+  describe('Interaction - security level loose', () => {
+    it('Graph: should handle a click on a node with a bound function', () => {
+      const url = 'http://localhost:9000/click_security_loose.html';
+      cy.viewport(1440, 1024);
+      cy.visit(url);
+      cy.get('body').find('g#flowchart-Function-2').click();
+
+      cy.get('.created-by-click').should('have.text', 'Clicked By Flow');
+    });
+    it('Graph: should handle a click on a node with a bound function with args', () => {
+      const url = 'http://localhost:9000/click_security_loose.html';
+      cy.viewport(1440, 1024);
+      cy.visit(url);
+      cy.get('body').find('g#flowchart-FunctionArg-18').click();
+
+      cy.get('.created-by-click-2').should('have.text', 'Clicked By Flow: ARGUMENT');
+    });
+    it('Flowchart: should handle a click on a node with a bound function where the node starts with a number', () => {
+      const url = 'http://localhost:9000/click_security_loose.html';
+      cy.viewport(1440, 1024);
+      cy.visit(url);
+      cy.get('body').find('g[id="flowchart-FunctionArg-22"]').click();
+
+      cy.get('.created-by-click-2').should('have.text', 'Clicked By Flow: ARGUMENT');
+    });
+    it('Graph: should handle a click on a node with a bound url', () => {
+      const url = 'http://localhost:9000/click_security_loose.html';
+      cy.viewport(1440, 1024);
+      cy.visit(url);
+      cy.get('body').find('#flowchart-URL-3').click();
+
+      cy.location().should((location) => {
+        expect(location.href).to.eq('http://localhost:9000/webpackUsage.html');
+      });
+    });
+    it('Graph: should handle a click on a node with a bound url where the node starts with a number', () => {
+      const url = 'http://localhost:9000/click_security_loose.html';
+      cy.viewport(1440, 1024);
+      cy.visit(url);
+      cy.get('body').find('g[id="flowchart-2URL-7"]').click();
+
+      cy.location().should((location) => {
+        expect(location.href).to.eq('http://localhost:9000/webpackUsage.html');
+      });
+    });
+
+    it('Flowchart-v2: should handle a click on a node with a bound function', () => {
+      const url = 'http://localhost:9000/click_security_loose.html';
+      cy.viewport(1440, 1024);
+      cy.visit(url);
+      cy.get('body').find('g#flowchart-Function-10').click();
+
+      cy.get('.created-by-click').should('have.text', 'Clicked By Flow');
+    });
+    it('Flowchart-v2: should handle a click on a node with a bound function where the node starts with a number', () => {
+      const url = 'http://localhost:9000/click_security_loose.html';
+      cy.viewport(1440, 1024);
+      cy.visit(url);
+      cy.get('body').find('g[id="flowchart-1Function-14"]').click();
+
+      cy.get('.created-by-click').should('have.text', 'Clicked By Flow');
+    });
+    it('Flowchart-v2: should handle a click on a node with a bound url', () => {
+      const url = 'http://localhost:9000/click_security_loose.html';
+      cy.viewport(1440, 1024);
+      cy.visit(url);
+      cy.get('body').find('#flowchart-URL-11').click();
+
+      cy.location().should((location) => {
+        expect(location.href).to.eq('http://localhost:9000/webpackUsage.html');
+      });
+    });
+    it('Flowchart-v2: should handle a click on a node with a bound url where the node starts with a number', () => {
+      const url = 'http://localhost:9000/click_security_loose.html';
+      cy.viewport(1440, 1024);
+      cy.visit(url);
+      cy.get('body').find('g[id="flowchart-2URL-15"]').click();
+
+      cy.location().should((location) => {
+        expect(location.href).to.eq('http://localhost:9000/webpackUsage.html');
+      });
+    });
+
+    it('should handle a click on a task with a bound URL clicking on the rect', () => {
+      const url = 'http://localhost:9000/click_security_loose.html';
+      cy.viewport(1440, 1024);
+      cy.visit(url);
+      cy.get('body').find('rect#cl1').click({ force: true });
+
+      cy.location().should((location) => {
+        expect(location.href).to.eq('http://localhost:9000/webpackUsage.html');
+      });
+    });
+    it('should handle a click on a task with a bound URL clicking on the text', () => {
+      const url = 'http://localhost:9000/click_security_loose.html';
+      cy.viewport(1440, 1024);
+      cy.visit(url);
+      cy.get('body').find('text#cl1-text').click({ force: true });
+
+      cy.location().should((location) => {
+        expect(location.href).to.eq('http://localhost:9000/webpackUsage.html');
+      });
+    });
+    it('should handle a click on a task with a bound function without args', () => {
+      const url = 'http://localhost:9000/click_security_loose.html';
+      cy.viewport(1440, 1024);
+      cy.visit(url);
+      cy.get('body').find('rect#cl2').click({ force: true });
+
+      cy.get('.created-by-gant-click').should('have.text', 'Clicked By Gant cl2');
+    });
+    it('should handle a click on a task with a bound function with args', () => {
+      const url = 'http://localhost:9000/click_security_loose.html';
+      cy.viewport(1440, 1024);
+      cy.visit(url);
+      cy.get('body').find('rect#cl3').click({ force: true });
+
+      cy.get('.created-by-gant-click').should('have.text', 'Clicked By Gant test1 test2 test3');
+    });
+
+    it('should handle a click on a task with a bound function without args', () => {
+      const url = 'http://localhost:9000/click_security_loose.html';
+      cy.viewport(1440, 1024);
+      cy.visit(url);
+      cy.get('body').find('text#cl2-text').click({ force: true });
+
+      cy.get('.created-by-gant-click').should('have.text', 'Clicked By Gant cl2');
+    });
+    it('should handle a click on a task with a bound function with args ', () => {
+      const url = 'http://localhost:9000/click_security_loose.html';
+      cy.viewport(1440, 1024);
+      cy.visit(url);
+      cy.get('body').find('text#cl3-text').click({ force: true });
+
+      cy.get('.created-by-gant-click').should('have.text', 'Clicked By Gant test1 test2 test3');
+    });
+  });
+
+  describe('Interaction - security level tight', () => {
+    it('should handle a click on a node without a bound function', () => {
+      const url = 'http://localhost:9000/click_security_strict.html';
+      cy.viewport(1440, 1024);
+      cy.visit(url);
+      cy.get('body').find('g#flowchart-Function-2').click();
+
+      cy.get('.created-by-click').should('not.exist');
+      // cy.get('.created-by-click').should('not.have.text', 'Clicked By Flow');
+    });
+    it('should handle a click on a node with a bound function where the node starts with a number', () => {
+      const url = 'http://localhost:9000/click_security_strict.html';
+      cy.viewport(1440, 1024);
+      cy.visit(url);
+      cy.get('body').find('g[id="flowchart-1Function-6"]').click();
+
+      // cy.get('.created-by-click').should('not.have.text', 'Clicked By Flow');
+      cy.get('.created-by-click').should('not.exist');
+    });
+    it('should handle a click on a node with a bound url', () => {
+      const url = 'http://localhost:9000/click_security_strict.html';
+      cy.viewport(1440, 1024);
+      cy.visit(url);
+      cy.get('body').find('g#flowchart-URL-3').click();
+
+      cy.location().should((location) => {
+        expect(location.href).to.eq('http://localhost:9000/webpackUsage.html');
+      });
+    });
+    it('should handle a click on a node with a bound url where the node starts with a number', () => {
+      const url = 'http://localhost:9000/click_security_strict.html';
+      cy.viewport(1440, 1024);
+      cy.visit(url);
+      cy.get('body').find('g[id="flowchart-2URL-7"]').click();
+
+      cy.location().should((location) => {
+        expect(location.href).to.eq('http://localhost:9000/webpackUsage.html');
+      });
+    });
+
+    it('should handle a click on a task with a bound URL clicking on the rect', () => {
+      const url = 'http://localhost:9000/click_security_strict.html';
+      cy.viewport(1440, 1024);
+      cy.visit(url);
+      cy.get('body').find('rect#cl1').click({ force: true });
+
+      cy.location().should((location) => {
+        expect(location.href).to.eq('http://localhost:9000/webpackUsage.html');
+      });
+    });
+    it('should handle a click on a task with a bound URL clicking on the text', () => {
+      const url = 'http://localhost:9000/click_security_strict.html';
+      cy.viewport(1440, 1024);
+      cy.visit(url);
+      cy.get('body').find('text#cl1-text').click({ force: true });
+
+      cy.location().should((location) => {
+        expect(location.href).to.eq('http://localhost:9000/webpackUsage.html');
+      });
+    });
+    it('should handle a click on a task with a bound function', () => {
+      const url = 'http://localhost:9000/click_security_strict.html';
+      cy.viewport(1440, 1024);
+      cy.visit(url);
+      cy.get('body').find('rect#cl2').click({ force: true });
+
+      // cy.get('.created-by-gant-click').should('not.have.text', 'Clicked By Gant cl2');
+      cy.get('.created-by-gant-click').should('not.exist');
+    });
+    it('should handle a click on a task with a bound function', () => {
+      const url = 'http://localhost:9000/click_security_strict.html';
+      cy.viewport(1440, 1024);
+      cy.visit(url);
+      cy.get('body').find('text#cl2-text').click({ force: true });
+
+      // cy.get('.created-by-gant-click').should('not.have.text', 'Clicked By Gant cl2');
+      cy.get('.created-by-gant-click').should('not.exist');
+    });
+  });
+
+  describe('Interaction - security level other, missspelling', () => {
+    it('should handle a click on a node with a bound function', () => {
+      const url = 'http://localhost:9000/click_security_other.html';
+      cy.viewport(1440, 1024);
+      cy.visit(url);
+      cy.get('body').find('g#flowchart-Function-2').click();
+
+      // cy.get('.created-by-click').should('not.have.text', 'Clicked By Flow');
+      cy.get('.created-by-click').should('not.exist');
+    });
+    it('should handle a click on a node with a bound function where the node starts with a number', () => {
+      const url = 'http://localhost:9000/click_security_other.html';
+      cy.viewport(1440, 1024);
+      cy.visit(url);
+      cy.get('body').find('g[id="flowchart-1Function-6"]').click();
+
+      cy.get('.created-by-click').should('not.exist');
+      cy.get('.created-by-click').should('not.exist');
+    });
+    it('should handle a click on a node with a bound url', () => {
+      const url = 'http://localhost:9000/click_security_other.html';
+      cy.viewport(1440, 1024);
+      cy.visit(url);
+      cy.get('body').find('g#flowchart-URL-3').click();
+
+      cy.location().should((location) => {
+        expect(location.href).to.eq('http://localhost:9000/webpackUsage.html');
+      });
+    });
+
+    it('should handle a click on a task with a bound function', () => {
+      const url = 'http://localhost:9000/click_security_other.html';
+      cy.viewport(1440, 1024);
+      cy.visit(url);
+      cy.get('body').find('rect#cl2').click({ force: true });
+
+      cy.get('.created-by-gant-click').should('not.exist');
+    });
+    it('should handle a click on a task with a bound function', () => {
+      const url = 'http://localhost:9000/click_security_other.html';
+      cy.viewport(1440, 1024);
+      cy.visit(url);
+      cy.get('body').find('text#cl2-text').click({ force: true });
+
+      cy.get('.created-by-gant-click').should('not.exist');
+    });
+  });
+});

cypress/integration/other/rerender.spec.js

@@ -0,0 +1,19 @@
+describe('Rerendering', () => {
+  it('should be able to render after an error has occurred', () => {
+    const url = 'http://localhost:9000/render-after-error.html';
+    cy.viewport(1440, 1024);
+    cy.visit(url);
+    cy.get('#graphDiv').should('exist');
+  });
+
+  it('should be able to render and rerender a graph via API', () => {
+    const url = 'http://localhost:9000/rerender.html';
+    cy.viewport(1440, 1024);
+    cy.visit(url);
+    cy.get('#graph [id^=flowchart-A]').should('have.text', 'XMas');
+
+    cy.get('body').find('#rerender').click({ force: true });
+
+    cy.get('#graph [id^=flowchart-A]').should('have.text', 'Saturday');
+  });
+});

cypress/integration/other/webpackUsage.spec.js

@@ -0,0 +1,16 @@
+describe('Sequencediagram', () => {
+  it('should render a simple sequence diagrams', () => {
+    const url = 'http://localhost:9000/webpackUsage.html';
+
+    cy.visit(url);
+    cy.get('body').find('svg').should('have.length', 1);
+  });
+  it('should handle html escapings properly', () => {
+    const url = 'http://localhost:9000/webpackUsage.html?test-html-escaping=true';
+
+    cy.visit(url);
+    cy.get('body').find('svg').should('have.length', 1);
+
+    cy.get('g.label > foreignobject > div').should('not.contain.text', '<b>');
+  });
+});

cypress/integration/other/xss.spec.js

@@ -0,0 +1,132 @@
+import { mermaidUrl } from '../../helpers/util.js';
+describe('XSS', () => {
+  it('should handle xss in tags', () => {
+    const str =
+      'eyJjb2RlIjoiXG5ncmFwaCBMUlxuICAgICAgQi0tPkQoPGltZyBvbmVycm9yPWxvY2F0aW9uPWBqYXZhc2NyaXB0XFx1MDAzYXhzc0F0dGFja1xcdTAwMjhkb2N1bWVudC5kb21haW5cXHUwMDI5YCBzcmM9eD4pOyIsIm1lcm1haWQiOnsidGhlbWUiOiJkZWZhdWx0In19';
+
+    const url = mermaidUrl(str, {}, true);
+
+    cy.visit(url);
+    cy.wait(1000).then(() => {
+      cy.get('.mermaid').should('exist');
+    });
+    cy.get('svg');
+  });
+
+  it('should not allow tags in the css', () => {
+    const str =
+      'eyJjb2RlIjoiJSV7aW5pdDogeyAnZm9udEZhbWlseSc6ICdcXFwiPjwvc3R5bGU-PGltZyBzcmM9eCBvbmVycm9yPXhzc0F0dGFjaygpPid9IH0lJVxuZ3JhcGggTFJcbiAgICAgQSAtLT4gQiIsIm1lcm1haWQiOnsidGhlbWUiOiJkZWZhdWx0IiwiZmxvd2NoYXJ0Ijp7Imh0bWxMYWJlbHMiOmZhbHNlfX0sInVwZGF0ZUVkaXRvciI6ZmFsc2V9';
+
+    const url = mermaidUrl(
+      str,
+      {
+        theme: 'default',
+        flowchart: {
+          htmlMode: false,
+        },
+      },
+      true
+    );
+
+    cy.visit(url);
+    cy.wait(1000).then(() => {
+      cy.get('#the-malware').should('not.exist');
+    });
+  });
+
+  it('should handle xss in tags in non-html mode', () => {
+    const str =
+      'eyJjb2RlIjoiXG5ncmFwaCBMUlxuICAgICAgQi0tPkQoPGltZyBvbmVycm9yPWxvY2F0aW9uPWBqYXZhc2NyaXB0XFx1MDAzYXhzc0F0dGFja1xcdTAwMjhkb2N1bWVudC5kb21haW5cXHUwMDI5YCBzcmM9eD4pOyIsIm1lcm1haWQiOnsidGhlbWUiOiJkZWZhdWx0IiwiZmxvd2NoYXJ0Ijp7Imh0bWxMYWJlbHMiOmZhbHNlfX19';
+
+    const url = mermaidUrl(
+      str,
+      {
+        theme: 'default',
+        flowchart: {
+          htmlMode: false,
+        },
+      },
+      true
+    );
+
+    cy.visit(url);
+    cy.wait(1000);
+
+    cy.get('#the-malware').should('not.exist');
+  });
+
+  it('should not allow changing the __proto__ attribute using config', () => {
+    cy.visit('http://localhost:9000/xss2.html');
+    cy.wait(1000);
+    cy.get('#the-malware').should('not.exist');
+  });
+  it('should not allow manipulating htmlLabels into a false positive', () => {
+    cy.visit('http://localhost:9000/xss4.html');
+    cy.wait(1000);
+    cy.get('#the-malware').should('not.exist');
+  });
+  it('should not allow manipulating antiscript to run javascript', () => {
+    cy.visit('http://localhost:9000/xss5.html');
+    cy.wait(1000);
+    cy.get('#the-malware').should('not.exist');
+  });
+  it('should not allow manipulating antiscript to run javascript using onerror', () => {
+    cy.visit('http://localhost:9000/xss6.html');
+    cy.wait(1000);
+    cy.get('#the-malware').should('not.exist');
+  });
+  it('should not allow manipulating antiscript to run javascript using onerror in state diagrams with dagre wrapper', () => {
+    cy.visit('http://localhost:9000/xss8.html');
+    cy.wait(1000);
+    cy.get('#the-malware').should('not.exist');
+  });
+  it('should not allow manipulating antiscript to run javascript using onerror in state diagrams with dagre d3', () => {
+    cy.visit('http://localhost:9000/xss9.html');
+    cy.wait(1000);
+    cy.get('#the-malware').should('not.exist');
+  });
+  it('should not allow manipulating antiscript to run javascript using onerror in state diagrams with dagre d3', () => {
+    cy.visit('http://localhost:9000/xss10.html');
+    cy.wait(1000);
+    cy.get('#the-malware').should('not.exist');
+  });
+  it('should not allow manipulating antiscript to run javascript using onerror in state diagrams with dagre d3', () => {
+    cy.visit('http://localhost:9000/xss11.html');
+    cy.wait(1000);
+    cy.get('#the-malware').should('not.exist');
+  });
+  it('should not allow manipulating antiscript to run javascript using onerror in state diagrams with dagre d3', () => {
+    cy.visit('http://localhost:9000/xss12.html');
+    cy.wait(1000);
+    cy.get('#the-malware').should('not.exist');
+  });
+  it('should not allow manipulating antiscript to run javascript using onerror in state diagrams with dagre d3', () => {
+    cy.visit('http://localhost:9000/xss13.html');
+    cy.wait(1000);
+    cy.get('#the-malware').should('not.exist');
+  });
+  it('should not allow manipulating antiscript to run javascript iframes in class diagrams', () => {
+    cy.visit('http://localhost:9000/xss14.html');
+    cy.wait(1000);
+    cy.get('#the-malware').should('not.exist');
+  });
+  it('should sanitize cardinalities properly in class diagrams', () => {
+    cy.visit('http://localhost:9000/xss18.html');
+    cy.wait(1000);
+    cy.get('#the-malware').should('not.exist');
+  });
+  it('should sanitize colons properly', () => {
+    cy.visit('http://localhost:9000/xss20.html');
+    cy.wait(1000);
+    cy.get('a').click('');
+    cy.wait(1000);
+    cy.get('#the-malware').should('not.exist');
+  });
+  it('should sanitize colons properly', () => {
+    cy.visit('http://localhost:9000/xss21.html');
+    cy.wait(1000);
+    cy.get('a').click('');
+    cy.wait(1000);
+    cy.get('#the-malware').should('not.exist');
+  });
+});