Merge pull request #3459 from aloisklink/chore/update-cypress

Update Cypress to v10 and fix E2E errors

cypress/downloads/downloads.html

@@ -1 +0,0 @@
-Cr24

cypress/helpers/util.js

@@ -44,15 +44,13 @@ export const imgSnapshotTest = (graphStr, _options, api = false, validation) =>
   }
   const useAppli = Cypress.env('useAppli');
   //const useAppli = false;
-  const branch = Cypress.env('codeBranch');
   cy.log('Hello ' + useAppli ? 'Appli' : 'image-snapshot');
   const name = (options.name || cy.state('runnable').fullTitle()).replace(/\s+/g, '-');
 
   if (useAppli) {
     cy.eyesOpen({
-      appName: 'Mermaid-' + branch,
+      appName: 'Mermaid',
       testName: name,
-      batchName: branch,
     });
   }
 
@@ -96,15 +94,13 @@ export const urlSnapshotTest = (url, _options, api = false, validation) => {
     options.fontSize = '16px';
   }
   const useAppli = Cypress.env('useAppli');
-  const branch = Cypress.env('codeBranch');
   cy.log('Hello ' + useAppli ? 'Appli' : 'image-snapshot');
   const name = (options.name || cy.state('runnable').fullTitle()).replace(/\s+/g, '-');
 
   if (useAppli) {
     cy.eyesOpen({
-      appName: 'Mermaid-' + branch,
+      appName: 'Mermaid',
       testName: name,
-      batchName: branch,
     });
   }
 

cypress/integration/other/configuration.spec.js

@@ -15,11 +15,13 @@ describe('Configuration', () => {
 
       // 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(#');
+      cy.get('.edgePaths').within(() => {
+        cy.get('path')
+          .first()
+          .should('have.attr', 'marker-end')
+          .should('exist')
+          .and('include', 'url(#');
+      });
     });
     it('should handle default value false of arrowMarkerAbsolute', () => {
       renderGraph(
@@ -35,11 +37,13 @@ describe('Configuration', () => {
 
       // 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(#');
+      cy.get('.edgePaths').within(() => {
+        cy.get('path')
+          .first()
+          .should('have.attr', 'marker-end')
+          .should('exist')
+          .and('include', 'url(#');
+      });
     });
     it('should handle arrowMarkerAbsolute explicitly set to false', () => {
       renderGraph(
@@ -57,11 +61,13 @@ describe('Configuration', () => {
 
       // 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(#');
+      cy.get('.edgePaths').within(() => {
+        cy.get('path')
+          .first()
+          .should('have.attr', 'marker-end')
+          .should('exist')
+          .and('include', 'url(#');
+      });
     });
     it('should handle arrowMarkerAbsolute explicitly set to "false" as false', () => {
       renderGraph(
@@ -79,15 +85,17 @@ describe('Configuration', () => {
 
       // 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(#');
+      cy.get('.edgePaths').within(() => {
+        cy.get('path')
+          .first()
+          .should('have.attr', 'marker-end')
+          .should('exist')
+          .and('include', 'url(#');
+      });
     });
     it('should handle arrowMarkerAbsolute set to true', () => {
       renderGraph(
-        `graph TD
+        `flowchart TD
         A[Christmas] -->|Get money| B(Go shopping)
         B --> C{Let me think}
         C -->|One| D[Laptop]
@@ -99,11 +107,13 @@ describe('Configuration', () => {
         }
       );
 
-      cy.get('.edgePath path')
-        .first()
-        .should('have.attr', 'marker-end')
-        .should('exist')
-        .and('include', 'url(http://localhost');
+      cy.get('.edgePaths').within(() => {
+        cy.get('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';

cypress/integration/other/xss.spec.js

@@ -81,6 +81,9 @@ describe('XSS', () => {
     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.on('uncaught:exception', (_err, _runnable) => {
+      return false; // continue rendering even if there if mermaid throws an error
+    });
     cy.visit('http://localhost:9000/xss9.html');
     cy.wait(1000);
     cy.get('#the-malware').should('not.exist');

cypress/integration/rendering/flowchart.spec.js

@@ -745,13 +745,13 @@ describe('Graph', () => {
     cy.get('svg').should((svg) => {
       expect(svg).to.have.attr('width', '100%');
       // expect(svg).to.have.attr('height');
-      // use within because the absolute value can be slightly different depending on the environment ±5%
+      // use within because the absolute value can be slightly different depending on the environment ±10%
       // const height = parseFloat(svg.attr('height'));
       // expect(height).to.be.within(446 * 0.95, 446 * 1.05);
       const style = svg.attr('style');
       expect(style).to.match(/^max-width: [\d.]+px;$/);
       const maxWidthValue = parseFloat(style.match(/[\d.]+/g).join(''));
-      expect(maxWidthValue).to.be.within(300 * 0.95, 300 * 1.05);
+      expect(maxWidthValue).to.be.within(300 * 0.9, 300 * 1.1);
     });
   });
   it('39: should render a flowchart when useMaxWidth is false', () => {
@@ -768,9 +768,9 @@ describe('Graph', () => {
     cy.get('svg').should((svg) => {
       // const height = parseFloat(svg.attr('height'));
       const width = parseFloat(svg.attr('width'));
-      // use within because the absolute value can be slightly different depending on the environment ±5%
+      // use within because the absolute value can be slightly different depending on the environment ±10%
       // expect(height).to.be.within(446 * 0.95, 446 * 1.05);
-      expect(width).to.be.within(300 * 0.95, 300 * 1.05);
+      expect(width).to.be.within(300 * 0.9, 300 * 1.1);
       expect(svg).to.not.have.attr('style');
     });
   });

cypress/integration/rendering/gitGraph.spec.js

@@ -213,42 +213,43 @@ describe('Git Graph diagram', () => {
       `
       gitGraph
       checkout main
-      commit
+      %% Make sure to manually set the ID of all commits, for consistent visual tests
+      commit id: "1-abcdefg"
       checkout main
       branch branch1
-      commit
+      commit id: "2-abcdefg"
       checkout main
       merge branch1
       branch branch2
-      commit
+      commit id: "3-abcdefg"
       checkout main
       merge branch2
       branch branch3
-      commit
+      commit id: "4-abcdefg"
       checkout main
       merge branch3
       branch branch4
-      commit
+      commit id: "5-abcdefg"
       checkout main
       merge branch4
       branch branch5
-      commit
+      commit id: "6-abcdefg"
       checkout main
       merge branch5
       branch branch6
-      commit
+      commit id: "7-abcdefg"
       checkout main
       merge branch6
       branch branch7
-      commit
+      commit id: "8-abcdefg"
       checkout main
       merge branch7
       branch branch8
-      commit
+      commit id: "9-abcdefg"
       checkout main
       merge branch8
       branch branch9
-      commit
+      commit id: "10-abcdefg"
       `,
       {}
     );

cypress/plugins/index.js

@@ -1,33 +0,0 @@
-/* eslint-disable @typescript-eslint/no-var-requires */
-// ***********************************************************
-// This example plugins/index.js can be used to load plugins
-//
-// You can change the location of this file or turn off loading
-// the plugins file with the 'pluginsFile' configuration option.
-//
-// You can read more here:
-// https://on.cypress.io/plugins-guide
-// ***********************************************************
-
-// This function is called when a project is opened or re-opened (e.g. due to
-// the project's config changing)
-
-// module.exports = (on, config) => {
-//   // `on` is used to hook into various events Cypress emits
-//   // `config` is the resolved Cypress config
-// }
-
-const { addMatchImageSnapshotPlugin } = require('cypress-image-snapshot/plugin');
-require('@applitools/eyes-cypress')(module);
-
-module.exports = (on, config) => {
-  addMatchImageSnapshotPlugin(on, config);
-  // copy any needed variables from process.env to config.env
-  config.env.useAppli = process.env.USE_APPLI ? true : false;
-  config.env.codeBranch = process.env.APPLI_BRANCH;
-
-  // do not forget to return the changed config object!
-  return config;
-};
-
-require('@applitools/eyes-cypress')(module);

cypress/support/e2e.js

@@ -17,8 +17,6 @@ import '@applitools/eyes-cypress/commands';
 
 // Import commands.js using ES2015 syntax:
 import './commands';
-// import '@percy/cypress';
-import '@applitools/eyes-cypress/commands';
 
 // Alternatively you can use CommonJS syntax:
 // require('./commands')