Merge branch 'sidv/properlyWaitTests' into sidv/internalFCV3

* sidv/properlyWaitTests:
  feat: Wait for rendering to finish before taking image snapshots
  Update docs
  chore(deps): update all non-major dependencies
  Fix: Too many `primaryBorderColor`

cSpell.json

@@ -6,6 +6,7 @@
     "adamiecki",
     "alois",
     "antiscript",
+    "appli",
     "applitools",
     "asciidoctor",
     "ashish",

cypress/helpers/util.js

@@ -2,7 +2,7 @@ const utf8ToB64 = (str) => {
   return window.btoa(unescape(encodeURIComponent(str)));
 };
 
-const batchId = 'mermid-batch' + new Date().getTime();
+const batchId = 'mermaid-batch' + new Date().getTime();
 
 export const mermaidUrl = (graphStr, options, api) => {
   const obj = {
@@ -46,8 +46,22 @@ export const imgSnapshotTest = (graphStr, _options, api = false, validation) =>
   if (!options.fontSize) {
     options.fontSize = '16px';
   }
+  const url = mermaidUrl(graphStr, options, api);
+  openURLAndVerifyRendering(url, options, validation);
+};
+
+export const urlSnapshotTest = (url, _options, api = false, validation) => {
+  const options = Object.assign(_options);
+  openURLAndVerifyRendering(url, options, validation);
+};
+
+export const renderGraph = (graphStr, options, api) => {
+  const url = mermaidUrl(graphStr, options, api);
+  openURLAndVerifyRendering(url, options);
+};
+
+const openURLAndVerifyRendering = (url, options, validation = undefined) => {
   const useAppli = Cypress.env('useAppli');
-  cy.log('Hello ' + useAppli ? 'Appli' : 'image-snapshot');
   const name = (options.name || cy.state('runnable').fullTitle()).replace(/\s+/g, '-');
 
   if (useAppli) {
@@ -60,82 +74,20 @@ export const imgSnapshotTest = (graphStr, _options, api = false, validation) =>
     });
   }
 
-  const url = mermaidUrl(graphStr, options, api);
-
   cy.visit(url);
+  cy.window().should('have.property', 'rendered', true);
+  cy.get('svg').should('be.visible');
+
   if (validation) {
     cy.get('svg').should(validation);
   }
-  cy.get('svg');
-  // Default name to test title
 
   if (useAppli) {
     cy.log('Check eyes' + Cypress.spec.name);
     cy.eyesCheckWindow('Click!');
-    cy.log('Closing eyes: ' + Cypress.spec.name);
+    cy.log('Closing eyes' + Cypress.spec.name);
     cy.eyesClose();
   } else {
     cy.matchImageSnapshot(name);
   }
 };
-
-export const urlSnapshotTest = (url, _options, api = false, validation) => {
-  cy.log(_options);
-  const options = Object.assign(_options);
-  if (!options.fontFamily) {
-    options.fontFamily = 'courier';
-  }
-  if (!options.sequence) {
-    options.sequence = {};
-  }
-  if (!options.sequence || (options.sequence && !options.sequence.actorFontFamily)) {
-    options.sequence.actorFontFamily = 'courier';
-  }
-  if (options.sequence && !options.sequence.noteFontFamily) {
-    options.sequence.noteFontFamily = 'courier';
-  }
-  options.sequence.actorFontFamily = 'courier';
-  options.sequence.noteFontFamily = 'courier';
-  options.sequence.messageFontFamily = 'courier';
-  if (options.sequence && !options.sequence.actorFontFamily) {
-    options.sequence.actorFontFamily = 'courier';
-  }
-  if (!options.fontSize) {
-    options.fontSize = '16px';
-  }
-  const useAppli = Cypress.env('useAppli');
-  cy.log('Hello ' + useAppli ? 'Appli' : 'image-snapshot');
-  const name = (options.name || cy.state('runnable').fullTitle()).replace(/\s+/g, '-');
-
-  if (useAppli) {
-    cy.log('Opening eyes 2' + Cypress.spec.name);
-    cy.eyesOpen({
-      appName: 'Mermaid',
-      testName: name,
-      batchName: Cypress.spec.name,
-      batchId: batchId + Cypress.spec.name,
-    });
-  }
-
-  cy.visit(url);
-  if (validation) {
-    cy.get('svg').should(validation);
-  }
-  cy.get('body');
-  // Default name to test title
-
-  if (useAppli) {
-    cy.log('Check eyes 2' + Cypress.spec.name);
-    cy.eyesCheckWindow('Click!');
-    cy.log('Closing eyes 2' + Cypress.spec.name);
-    cy.eyesClose();
-  } else {
-    cy.matchImageSnapshot(name);
-  }
-};
-
-export const renderGraph = (graphStr, options, api) => {
-  const url = mermaidUrl(graphStr, options, api);
-
-  cy.visit(url);
-};

cypress/integration/rendering/mindmap.spec.ts

@@ -1,4 +1,4 @@
-import { imgSnapshotTest, renderGraph } from '../../helpers/util.js';
+import { imgSnapshotTest } from '../../helpers/util.js';
 
 /**
  * Check whether the SVG Element has a Mindmap root
@@ -158,7 +158,6 @@ mindmap
       undefined,
       shouldHaveRoot
     );
-    cy.get('svg');
   });
   it('rounded rect shape', () => {
     imgSnapshotTest(
@@ -172,7 +171,6 @@ mindmap
       undefined,
       shouldHaveRoot
     );
-    cy.get('svg');
   });
   it('circle shape', () => {
     imgSnapshotTest(
@@ -186,7 +184,6 @@ mindmap
       undefined,
       shouldHaveRoot
     );
-    cy.get('svg');
   });
   it('default shape', () => {
     imgSnapshotTest(
@@ -198,7 +195,6 @@ mindmap
       undefined,
       shouldHaveRoot
     );
-    cy.get('svg');
   });
   it('adding children', () => {
     imgSnapshotTest(
@@ -212,7 +208,6 @@ mindmap
       undefined,
       shouldHaveRoot
     );
-    cy.get('svg');
   });
   it('adding grand children', () => {
     imgSnapshotTest(
@@ -227,7 +222,6 @@ mindmap
       undefined,
       shouldHaveRoot
     );
-    cy.get('svg');
   });
   /* The end */
 });

cypress/platform/viewer.js

@@ -5,6 +5,13 @@ function b64ToUtf8(str) {
   return decodeURIComponent(escape(window.atob(str)));
 }
 
+// Adds a rendered flag to window when rendering is done, so cypress can wait for it.
+function markRendered() {
+  if (window.Cypress) {
+    window.rendered = true;
+  }
+}
+
 /**
  * ##contentLoaded Callback function that is called when page is loaded. This functions fetches
  * configuration for mermaid rendering and calls init for rendering the mermaid diagrams on the
@@ -39,7 +46,8 @@ const contentLoaded = async function () {
 
     await mermaid2.registerExternalDiagrams([mindmap]);
     mermaid2.initialize(graphObj.mermaid);
-    mermaid2.init();
+    await mermaid2.init();
+    markRendered();
   }
 };
 
@@ -128,6 +136,7 @@ const contentLoadedApi = function () {
       );
     }
   }
+  markRendered();
 };
 
 if (typeof document !== 'undefined') {

docs/config/theming.md

@@ -214,13 +214,10 @@ The theming engine will only recognize hex colors and not color names. So, the v
 | fontFamily           | trebuchet ms, verdana, arial       |                                                                                                                                  |
 | fontSize             | 16px                               | Font size in pixels                                                                                                              |
 | primaryColor         | #fff4dd                            | Color to be used as background in nodes, other colors will be derived from this                                                  |
-| primaryBorderColor   | calculated from primaryColor       | Color to be used as border in nodes using `primaryColor`                                                                         |
-| primaryBorderColor   | calculated from primaryColor       | Color to be used as border in nodes using `primaryColor`                                                                         |
 | primaryTextColor     | calculated from darkMode #ddd/#333 | Color to be used as text color in nodes using `primaryColor`                                                                     |
 | secondaryColor       | calculated from primaryColor       |                                                                                                                                  |
 | primaryBorderColor   | calculated from primaryColor       | Color to be used as border in nodes using `primaryColor`                                                                         |
 | secondaryBorderColor | calculated from secondaryColor     | Color to be used as border in nodes using `secondaryColor`                                                                       |
-| primaryBorderColor   | calculated from primaryColor       | Color to be used as border in nodes using `primaryColor`                                                                         |
 | secondaryTextColor   | calculated from secondaryColor     | Color to be used as text color in nodes using `secondaryColor`                                                                   |
 | tertiaryColor        | calculated from primaryColor       |                                                                                                                                  |
 | tertiaryBorderColor  | calculated from tertiaryColor      | Color to be used as border in nodes using `tertiaryColor`                                                                        |

package.json

@@ -4,7 +4,7 @@
   "version": "9.3.0-rc1",
   "description": "Markdownish syntax for generating flowcharts, sequence diagrams, class diagrams, gantt charts and git graphs.",
   "type": "module",
-  "packageManager": "pnpm@7.18.2",
+  "packageManager": "pnpm@7.24.3",
   "keywords": [
     "diagram",
     "markdown",
@@ -69,8 +69,8 @@
     "@types/rollup-plugin-visualizer": "^4.2.1",
     "@typescript-eslint/eslint-plugin": "^5.42.1",
     "@typescript-eslint/parser": "^5.42.1",
-    "@vitest/coverage-c8": "^0.25.1",
+    "@vitest/coverage-c8": "^0.27.0",
-    "@vitest/ui": "^0.25.1",
+    "@vitest/ui": "^0.27.0",
     "concurrently": "^7.5.0",
     "coveralls": "^3.1.1",
     "cypress": "^10.11.0",
@@ -109,6 +109,6 @@
     "vitest": "^0.27.1"
   },
   "volta": {
-    "node": "18.12.1"
+    "node": "18.13.0"
   }
 }

packages/mermaid/src/docs/config/theming.md

@@ -136,13 +136,10 @@ The theming engine will only recognize hex colors and not color names. So, the v
 | fontFamily           | trebuchet ms, verdana, arial       |                                                                                                                                  |
 | fontSize             | 16px                               | Font size in pixels                                                                                                              |
 | primaryColor         | #fff4dd                            | Color to be used as background in nodes, other colors will be derived from this                                                  |
-| primaryBorderColor   | calculated from primaryColor       | Color to be used as border in nodes using `primaryColor`                                                                         |
-| primaryBorderColor   | calculated from primaryColor       | Color to be used as border in nodes using `primaryColor`                                                                         |
 | primaryTextColor     | calculated from darkMode #ddd/#333 | Color to be used as text color in nodes using `primaryColor`                                                                     |
 | secondaryColor       | calculated from primaryColor       |                                                                                                                                  |
 | primaryBorderColor   | calculated from primaryColor       | Color to be used as border in nodes using `primaryColor`                                                                         |
 | secondaryBorderColor | calculated from secondaryColor     | Color to be used as border in nodes using `secondaryColor`                                                                       |
-| primaryBorderColor   | calculated from primaryColor       | Color to be used as border in nodes using `primaryColor`                                                                         |
 | secondaryTextColor   | calculated from secondaryColor     | Color to be used as text color in nodes using `secondaryColor`                                                                   |
 | tertiaryColor        | calculated from primaryColor       |                                                                                                                                  |
 | tertiaryBorderColor  | calculated from tertiaryColor      | Color to be used as border in nodes using `tertiaryColor`                                                                        |

pnpm-lock.yaml

@@ -50,11 +50,11 @@ importers:
         specifier: ^5.42.1
         version: 5.42.1_rmayb2veg2btbq6mbmnyivgasy
       '@vitest/coverage-c8':
-        specifier: ^0.25.1
+        specifier: ^0.27.0
-        version: 0.25.1_oullksb5ic6y72oh2wekoaiuii
+        version: 0.27.1_6vhkb7zox2ro6wmx3rlvm5i5ce
       '@vitest/ui':
-        specifier: ^0.25.1
+        specifier: ^0.27.0
-        version: 0.25.1
+        version: 0.27.1
       concurrently:
         specifier: ^7.5.0
         version: 7.5.0
@@ -162,7 +162,7 @@ importers:
         version: 3.2.3_@types+node@18.11.9
       vitest:
         specifier: ^0.27.1
-        version: 0.27.1_oullksb5ic6y72oh2wekoaiuii
+        version: 0.27.1_6vhkb7zox2ro6wmx3rlvm5i5ce
 
   packages/mermaid:
     dependencies:
@@ -3078,11 +3078,11 @@ packages:
       vue: 3.2.45
     dev: true
 
-  /@vitest/coverage-c8/0.25.1_oullksb5ic6y72oh2wekoaiuii:
+  /@vitest/coverage-c8/0.27.1_6vhkb7zox2ro6wmx3rlvm5i5ce:
-    resolution: {integrity: sha512-gpl5QNaNeIN0mfRiosCqBFoZcizb5GA458TDnOQXkGDc4kklazxn70u9evGfV62wiiAUfGGebgRhxlBkAa6m6g==}
+    resolution: {integrity: sha512-/9VTGDIAp4hv8PBawfyijxhkiyucfOxFRRP+7kzy3Dj0wONy1Mc2MBoPmiH4aZVc0LViQqecrQLs8JVGt42keA==}
     dependencies:
       c8: 7.12.0
-      vitest: 0.25.1_oullksb5ic6y72oh2wekoaiuii
+      vitest: 0.27.1_6vhkb7zox2ro6wmx3rlvm5i5ce
     transitivePeerDependencies:
       - '@edge-runtime/vm'
       - '@vitest/browser'
@@ -3097,9 +3097,11 @@ packages:
       - terser
     dev: true
 
-  /@vitest/ui/0.25.1:
+  /@vitest/ui/0.27.1:
-    resolution: {integrity: sha512-VjzyfLjNS5Zc7XCCFJW3cM2iVW305D65NG0PIWefA4A8mwOH/QJJ4nFj/4cwXzwL0/VT3/ppvpv3UDNZoh/YOQ==}
+    resolution: {integrity: sha512-o9LmWY/XyWt5Pqb+bLLK+N3Vk+PP2jqrdDDMEAY43dB6vtZ+gYuOt5IutUfB7gXeJ6xeIlzUZ/OabrR3leldCA==}
     dependencies:
+      fast-glob: 3.2.12
+      flatted: 3.2.7
       sirv: 2.0.2
     dev: true
 
@@ -4090,19 +4092,6 @@ packages:
     resolution: {integrity: sha512-eyrF0jiFpY+3drT6383f1qhkbGsLSifNAjA61IUjZjmLCWjItY6LB9ft9YhoDgwfmclB2zhu51Lc7+95b8NRAg==}
     dev: true
 
-  /chai/4.3.6:
-    resolution: {integrity: sha512-bbcp3YfHCUzMOvKqsztczerVgBKSsEijCySNlHHbX3VG1nskvqjz5Rfso1gGwD6w6oOV3eI60pKuMOV5MV7p3Q==}
-    engines: {node: '>=4'}
-    dependencies:
-      assertion-error: 1.1.0
-      check-error: 1.0.2
-      deep-eql: 3.0.1
-      get-func-name: 2.0.0
-      loupe: 2.3.4
-      pathval: 1.1.1
-      type-detect: 4.0.8
-    dev: true
-
   /chai/4.3.7:
     resolution: {integrity: sha512-HLnAzZ2iupm25PlN0xFreAlBA5zaBSv3og0DdeGA4Ar6h6rJ3A0rolRUKJhSF2V10GZKDgWF/VmAEsNWjCRB+A==}
     engines: {node: '>=4'}
@@ -5380,13 +5369,6 @@ packages:
     resolution: {integrity: sha512-Q6fKUPqnAHAyhiUgFU7BUzLiv0kd8saH9al7tnu5Q/okj6dnupxyTgFIBjVzJATdfIAm9NAsvXNzjaKa+bxVyA==}
     dev: true
 
-  /deep-eql/3.0.1:
-    resolution: {integrity: sha512-+QeIQyN5ZuO+3Uk5DYh6/1eKO0m0YmJFGNmFHGACpf1ClL1nmlV/p4gNgbl2pJGxgXb4faqo6UE+M5ACEMyVcw==}
-    engines: {node: '>=0.12'}
-    dependencies:
-      type-detect: 4.0.8
-    dev: true
-
   /deep-eql/4.1.3:
     resolution: {integrity: sha512-WaEtAOpRA1MQ0eohqZjpGD8zdI0Ovsm8mmFhaDN8dvDZzyoUMcYDnf5Y6iu7HTXxf8JDS23qWa4a+hKCDyOPzw==}
     engines: {node: '>=6'}
@@ -10754,12 +10736,6 @@ packages:
     engines: {node: '>=8'}
     dev: true
 
-  /strip-literal/0.4.2:
-    resolution: {integrity: sha512-pv48ybn4iE1O9RLgCAN0iU4Xv7RlBTiit6DKmMiErbs9x1wH6vXBs45tWc0H5wUIF6TLTrKweqkmYF/iraQKNw==}
-    dependencies:
-      acorn: 8.8.0
-    dev: true
-
   /strip-literal/1.0.0:
     resolution: {integrity: sha512-5o4LsH1lzBzO9UFH63AJ2ad2/S2AVx6NtjOcaz+VTT2h1RiRvbipW72z8M/lxEhcPHDBQwpDrnTF7sXy/7OwCQ==}
     dependencies:
@@ -11586,54 +11562,7 @@ packages:
       - terser
     dev: true
 
-  /vitest/0.25.1_oullksb5ic6y72oh2wekoaiuii:
+  /vitest/0.27.1_6vhkb7zox2ro6wmx3rlvm5i5ce:
-    resolution: {integrity: sha512-eH74h6MkuEgsqR4mAQZeMK9O0PROiKY+i+1GMz/fBi5A3L2ml5U7JQs7LfPU7+uWUziZyLHagl+rkyfR8SLhlA==}
-    engines: {node: '>=v14.16.0'}
-    hasBin: true
-    peerDependencies:
-      '@edge-runtime/vm': '*'
-      '@vitest/browser': '*'
-      '@vitest/ui': '*'
-      happy-dom: '*'
-      jsdom: '*'
-    peerDependenciesMeta:
-      '@edge-runtime/vm':
-        optional: true
-      '@vitest/browser':
-        optional: true
-      '@vitest/ui':
-        optional: true
-      happy-dom:
-        optional: true
-      jsdom:
-        optional: true
-    dependencies:
-      '@types/chai': 4.3.3
-      '@types/chai-subset': 1.3.3
-      '@types/node': 18.11.9
-      '@vitest/ui': 0.25.1
-      acorn: 8.8.0
-      acorn-walk: 8.2.0
-      chai: 4.3.6
-      debug: 4.3.4
-      jsdom: 20.0.2
-      local-pkg: 0.4.2
-      source-map: 0.6.1
-      strip-literal: 0.4.2
-      tinybench: 2.3.1
-      tinypool: 0.3.0
-      tinyspy: 1.0.2
-      vite: 3.2.3_@types+node@18.11.9
-    transitivePeerDependencies:
-      - less
-      - sass
-      - stylus
-      - sugarss
-      - supports-color
-      - terser
-    dev: true
-
-  /vitest/0.27.1_oullksb5ic6y72oh2wekoaiuii:
     resolution: {integrity: sha512-1sIpQ1DVFTEn7c1ici1XHcVfdU4nKiBmPtPAtGKJJJLuJjojTv/OHGgcf69P57alM4ty8V4NMv+7Yoi5Cxqx9g==}
     engines: {node: '>=v14.16.0'}
     hasBin: true
@@ -11658,7 +11587,7 @@ packages:
       '@types/chai': 4.3.4
       '@types/chai-subset': 1.3.3
       '@types/node': 18.11.9
-      '@vitest/ui': 0.25.1
+      '@vitest/ui': 0.27.1
       acorn: 8.8.1
       acorn-walk: 8.2.0
       cac: 6.7.14