Merge branch 'develop' into sidv/removeWebpackBabel

* develop: (77 commits)
  cleanup
  Fix docs
  Fix coverage
  Fix for issues in errorhandling and class diagrams after refactoring
  Replace GoogleAnalytics with Plausible
  chore(deps): bump dompurify from 2.3.10 to 2.4.0 (#3444)
  chore(deps): bump stylis from 4.1.1 to 4.1.2 (#3439)
  chore(deps-dev): bump webpack-dev-server from 4.10.1 to 4.11.0 (#3450)
  fix(git): support single character branch names
  Cleanup unused variables and some commented out code
  Cleanup fixing som lingering issues
  Remove extension
  Apply suggestions from code review
  ci(e2e): re-enable e2e tests
  style: fix .github/workflow/e2e styling
  chore: upgrade cypress to v10
  fix(flowchart-v2): fix arrowMarkerAbsolute=true
  test(e2e): fix most arrowMarkerAbsolute tests
  text(e2e): give git tests consistent commit id
  test(e2e): widen flowchart width to within 10%
  ...

.eslintrc.json

@@ -63,6 +63,13 @@
       "rules": {
         "no-console": "off"
       }
+    },
+    {
+      "files": ["./**/*.spec.{ts,js}", "./cypress/**", "./demos/**", "./**/docs/**"],
+      "rules": {
+        "jsdoc/require-jsdoc": "off",
+        "@typescript-eslint/no-unused-vars": "off"
+      }
     }
   ]
 }

.github/workflows/checks.yml

@@ -14,7 +14,7 @@ jobs:
     name: check tests
     if: github.repository_owner == 'mermaid-js'
     steps:
-      - uses: actions/checkout@v2
+      - uses: actions/checkout@v3
         with:
           fetch-depth: 0
       - uses: testomatio/check-tests@stable

.github/workflows/e2e.yml

@@ -0,0 +1,38 @@
+name: E2E
+
+on: [push, pull_request]
+
+permissions:
+  contents: read
+
+jobs:
+  build:
+    runs-on: ubuntu-latest
+    strategy:
+      matrix:
+        node-version: [16.x]
+    steps:
+      - uses: actions/checkout@v3
+
+      - name: Setup Node.js ${{ matrix.node-version }}
+        uses: actions/setup-node@v3
+        with:
+          cache: yarn
+          node-version: ${{ matrix.node-version }}
+
+      - name: Install Yarn
+        run: npm i yarn --global
+
+      - name: Install Packages
+        run: |
+          yarn install --frozen-lockfile
+        env:
+          CYPRESS_CACHE_FOLDER: .cache/Cypress
+
+      - name: Run Build
+        run: yarn build
+
+      - name: Run E2E Tests
+        run: yarn e2e
+        env:
+          CYPRESS_CACHE_FOLDER: .cache/Cypress

.github/workflows/test.yml

@@ -32,3 +32,12 @@ jobs:
       - name: Run Unit Tests
         run: |
           yarn ci --coverage
+
+      - name: Upload Coverage to Coveralls
+        # it feels a bit weird to use @master, but that's what the docs use
+        # (coveralls also doesn't publish a @v1 we can use)
+        # https://github.com/marketplace/actions/coveralls-github-action
+        uses: coverallsapp/github-action@master
+        with:
+          github-token: ${{ secrets.GITHUB_TOKEN }}
+          flag-name: unit

.lintstagedrc.json

@@ -1,5 +1,6 @@
 {
   "src/docs/**": ["yarn docs:build --git"],
-  "*.{ts,js,json,html,md}": ["eslint --fix", "prettier --write"],
+  "src/docs.mts": ["yarn docs:build --git"],
+  "*.{ts,js,json,html,md,mts}": ["eslint --fix", "prettier --write"],
   "*.jison": ["yarn lint:jison"]
 }

applitools.config.js

@@ -0,0 +1,19 @@
+// eslint-disable-next-line @typescript-eslint/no-var-requires
+const { defineConfig } = require('cypress');
+
+module.exports = defineConfig({
+  testConcurrency: 1,
+  browser: [
+    // Add browsers with different viewports
+    //   { width: 800, height: 600, name: 'chrome' },
+    //   { width: 700, height: 500, name: 'firefox' },
+    //   { width: 1600, height: 1200, name: 'ie11' },
+    //   { width: 1024, height: 768, name: 'edgechromium' },
+    //   { width: 800, height: 600, name: 'safari' },
+    //   // Add mobile emulation devices in Portrait mode
+    //   { deviceName: 'iPhone X', screenOrientation: 'portrait' },
+    //   { deviceName: 'Pixel 2', screenOrientation: 'portrait' },
+  ],
+  // set batch name to the configuration
+  batchName: `Mermaid ${process.env.APPLI_BRANCH ?? "'no APPLI_BRANCH set'"}`,
+});

cypress.config.js

@@ -2,21 +2,20 @@
 
 const { defineConfig } = require('cypress');
 const { addMatchImageSnapshotPlugin } = require('cypress-image-snapshot/plugin');
-require('@applitools/eyes-cypress')(module);
 
 module.exports = defineConfig({
   e2e: {
-    specPattern: 'cypress/e2e/**/*.{js,jsx,ts,tsx}',
+    specPattern: 'cypress/integration/**/*.{js,jsx,ts,tsx}',
     setupNodeEvents(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;
     },
-    supportFile: 'cypress/support/index.js',
   },
   video: false,
 });
+
+require('@applitools/eyes-cypress')(module);

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');
     });
   });