E2E comparison in CI

.github/workflows/e2e.yml

@@ -3,7 +3,7 @@ name: E2E
 on: [push, pull_request]
 
 permissions:
-  contents: read
+  contents: write
 
 jobs:
   build:
@@ -28,19 +28,47 @@ jobs:
           cache: pnpm
           node-version: ${{ matrix.node-version }}
 
+      # Experiment with this step if we cannot check-in the snapshots to the repo.
+      # - name: Cache snapshots
+      #   id: cache-snapshot
+      #   uses: actions/cache@v3
+      #   with:
+      #     # npm cache files are stored in `~/.npm` on Linux/macOS
+      #     path: ./cypress/snapshots
+      #     key: ${{ runner.os }}-build-${env.GITHUB_REF}
+      #     restore-keys: |
+      #       ${{ runner.os }}-build-develop
+
       # Install NPM dependencies, cache them correctly
       # and run all Cypress tests
       - name: Cypress run
+        id: cypress
         uses: cypress-io/github-action@v4
         # If CYPRESS_RECORD_KEY is set, run in parallel on all containers
         # Otherwise (e.g. if running from fork), we run on a single container only
         if: ${{ ( env.CYPRESS_RECORD_KEY != '' ) || ( matrix.containers == 1 ) }}
         with:
           start: pnpm run dev
+          browser: chrome
           wait-on: 'http://localhost:9000'
           # Disable recording if we don't have an API key
           # e.g. if this action was run from a fork
           record: ${{ secrets.CYPRESS_RECORD_KEY != '' }}
           parallel: ${{ secrets.CYPRESS_RECORD_KEY != '' }}
         env:
           CYPRESS_RECORD_KEY: ${{ secrets.CYPRESS_RECORD_KEY }}
+
+      - name: Upload Artifacts
+        uses: actions/upload-artifact@v3
+        if: ${{ failure() && steps.cypress.conclusion == 'failure' }}
+        with:
+          name: error-snapshots
+          path: cypress/snapshots/**/__diff_output__/*
+
+      - name: Commit changes
+        uses: EndBug/add-and-commit@v9
+        if: ${{ github.event_name == 'push' }}
+        with:
+          message: 'Update snapshots'
+          add: 'cypress/snapshots/*'
+          pull: '--rebase --autostash'

.gitignore

@@ -26,7 +26,7 @@ Gemfile.lock
 /.vs
 
 cypress/screenshots/
-cypress/snapshots/
+cypress/snapshots-dev/
 
 # eslint --cache file
 .eslintcache

cSpell.json

@@ -52,6 +52,7 @@
     "laganeckas",
     "lintstagedrc",
     "lucida",
+    "mansalva",
     "matthieu",
     "mdbook",
     "mermerd",
@@ -76,6 +77,7 @@
     "shiki",
     "sidharth",
     "sphinxcontrib",
+    "ssim",
     "statediagram",
     "stylis",
     "substate",

cypress.config.cjs

@@ -5,9 +5,17 @@ const { addMatchImageSnapshotPlugin } = require('cypress-image-snapshot/plugin')
 
 module.exports = defineConfig({
   projectId: 'n2sma2',
+  viewportWidth: 1440,
+  viewportHeight: 1024,
   e2e: {
     specPattern: 'cypress/integration/**/*.{js,jsx,ts,tsx}',
     setupNodeEvents(on, config) {
+      on('before:browser:launch', (browser = {}, launchOptions) => {
+        if (browser.name === 'chrome' && browser.isHeadless) {
+          launchOptions.args.push('--window-size=1440,1024', '--force-device-scale-factor=1');
+        }
+        return launchOptions;
+      });
       addMatchImageSnapshotPlugin(on, config);
       // copy any needed variables from process.env to config.env
       config.env.useAppli = process.env.USE_APPLI ? true : false;

cypress/helpers/util.js

@@ -136,6 +136,5 @@ export const urlSnapshotTest = (url, _options, api = false, validation) => {
 
 export const renderGraph = (graphStr, options, api) => {
   const url = mermaidUrl(graphStr, options, api);
-
   cy.visit(url);
 };

cypress/integration/other/configuration.spec.js

@@ -117,7 +117,6 @@ describe('Configuration', () => {
     });
     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');

cypress/integration/other/rerender.spec.js

@@ -1,14 +1,12 @@
 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');
 

cypress/integration/rendering/gantt.spec.js

@@ -225,7 +225,10 @@ describe('Gantt diagram', () => {
       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(984 * 0.95, 984 * 1.05);
+      expect(maxWidthValue).to.be.within(
+        Cypress.config().viewportWidth * 0.95,
+        Cypress.config().viewportWidth * 1.05
+      );
     });
   });
 
@@ -269,7 +272,10 @@ describe('Gantt diagram', () => {
       const width = parseFloat(svg.attr('width'));
       // use within because the absolute value can be slightly different depending on the environment ±5%
       // expect(height).to.be.within(484 * 0.95, 484 * 1.05);
-      expect(width).to.be.within(984 * 0.95, 984 * 1.05);
+      expect(width).to.be.within(
+        Cypress.config().viewportWidth * 0.95,
+        Cypress.config().viewportWidth * 1.05
+      );
       expect(svg).to.not.have.attr('style');
     });
   });

cypress/integration/rendering/pie.spec.js

@@ -54,7 +54,10 @@ describe('Pie Chart', () => {
       const style = svg.attr('style');
       expect(style).to.match(/^max-width: [\d.]+px;$/);
       const maxWidthValue = parseFloat(style.match(/[\d.]+/g).join(''));
-      expect(maxWidthValue).to.eq(984);
+      expect(maxWidthValue).to.be.within(
+        Cypress.config().viewportWidth * 0.95,
+        Cypress.config().viewportWidth * 1.05
+      );
     });
   });
   it('should render a pie diagram when useMaxWidth is false', () => {
@@ -68,10 +71,11 @@ describe('Pie Chart', () => {
       { pie: { useMaxWidth: false } }
     );
     cy.get('svg').should((svg) => {
-      // const height = parseFloat(svg.attr('height'));
       const width = parseFloat(svg.attr('width'));
-      // expect(height).to.eq(450);
-      expect(width).to.eq(984);
+      expect(width).to.be.within(
+        Cypress.config().viewportWidth * 0.95,
+        Cypress.config().viewportWidth * 1.05
+      );
       expect(svg).to.not.have.attr('style');
     });
   });

cypress/platform/e2e.html

@@ -1,32 +1,8 @@
 <html>
   <head>
     <meta charset="utf-8" />
-    <!-- <meta charset="iso-8859-15"/> -->
     <script src="./viewer.js" type="module"></script>
-    <!-- <link href="https://fonts.googleapis.com/css?family=Mansalva&display=swap" rel="stylesheet" /> -->
-    <link
-      href="https://fonts.googleapis.com/css?family=Noto+Sans+SC&display=swap"
-      rel="stylesheet"
-    />
     <style>
-      body {
-        /* font-family: 'Mansalva', cursive;*/
-        /* font-family: 'Mansalva', cursive; */
-        /* font-family: 'arial'; */
-        /* font-family: "trebuchet ms", verdana, arial; */
-      }
-      /* div {
-        font-family: 'arial';
-      } */
-      /* .mermaid-main-font {
-        font-family: "trebuchet ms", verdana, arial;
-        font-family: var(--mermaid-font-family);
-      } */
-      /* :root {
-        --mermaid-font-family: '"trebuchet ms", verdana, arial';
-        --mermaid-font-family: "Comic Sans MS", "Comic Sans", cursive;
-        --mermaid-font-family: '"Lucida Console", Monaco, monospace';
-      } */
       svg {
         border: 2px solid darkred;
       }
@@ -36,21 +12,5 @@
       }
     </style>
   </head>
-  <body>
-    <!-- <script src="./mermaid.js"></script> -->
-    <script>
-      // Notice startOnLoad=false
-      // This prevents default handling in mermaid from render before the e2e logic is applied
-      // mermaid.initialize({
-      //   startOnLoad: false,
-      //   useMaxWidth: true,
-      //   // "themeCSS": ":root { --mermaid-font-family: \"trebuchet ms\", verdana, arial;}",
-      //   // fontFamily: '\"trebuchet ms\", verdana, arial;'
-      //   // fontFamily: '"Comic Sans MS", "Comic Sans", cursive'
-      //   // fontFamily: '"Mansalva", cursive',
-      //   // fontFamily: '"Noto Sans SC", sans-serif'
-      //   fontFamily: '"Noto Sans SC", sans-serif'
-      // });
-    </script>
-  </body>
+  <body></body>
 </html>