Merge branch 'develop' into dependabot/npm_and_yarn/develop/jest-envi…

…ronment-jsdom-28.1.3

cypress/fixtures/example.json

@@ -0,0 +1,5 @@
+{
+  "name": "Using fixtures to represent data",
+  "email": "hello@cypress.io",
+  "body": "Fixtures are a great way to mock data for responses to routes"
+}

cypress/helpers/util.js

@@ -42,7 +42,8 @@ export const imgSnapshotTest = (graphStr, _options, api = false, validation) =>
   if (!options.fontSize) {
     options.fontSize = '16px';
   }
-  const useAppli = Cypress.env('useAppli');
+  // 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, '-');

cypress/e2e/rendering/gitGraph.spec.js → cypress/integration/rendering/gitGraph.spec.js

@@ -207,4 +207,50 @@ describe('Git Graph diagram', () => {
       {}
     );
   });
+
+  it('12: should render commits for more than 8 branches', () => {
+    imgSnapshotTest(
+      `
+      gitGraph
+      checkout main
+      commit
+      checkout main
+      branch branch1
+      commit
+      checkout main
+      merge branch1
+      branch branch2
+      commit
+      checkout main
+      merge branch2
+      branch branch3
+      commit
+      checkout main
+      merge branch3
+      branch branch4
+      commit
+      checkout main
+      merge branch4
+      branch branch5
+      commit
+      checkout main
+      merge branch5
+      branch branch6
+      commit
+      checkout main
+      merge branch6
+      branch branch7
+      commit
+      checkout main
+      merge branch7
+      branch branch8
+      commit
+      checkout main
+      merge branch8
+      branch branch9
+      commit
+      `,
+      {}
+    );
+  });
 });

cypress/e2e/rendering/sequencediagram.spec.js → cypress/integration/rendering/sequencediagram.spec.js

@@ -80,7 +80,7 @@ context('Sequence diagram', () => {
         loop Loopy
             Bob->>Alice: Pasten
         end      `,
-      {}
+      { wrap: true }
     );
   });
   context('font settings', () => {
@@ -126,6 +126,17 @@ context('Sequence diagram', () => {
         { sequence: { noteAlign: 'left' } }
       );
     });
+    it('should render multi-line notes aligned to the left when configured', () => {
+      imgSnapshotTest(
+        `
+        sequenceDiagram
+        Alice->>Bob: I'm short
+        note left of Alice: I am left aligned<br>but also<br>multiline
+        Bob->>Alice: Short as well
+      `,
+        { sequence: { noteAlign: 'left' } }
+      );
+    });
     it('should render notes aligned to the right when configured', () => {
       imgSnapshotTest(
         `
@@ -137,6 +148,37 @@ context('Sequence diagram', () => {
         { sequence: { noteAlign: 'right' } }
       );
     });
+    it('should render multi-line notes aligned to the right when configured', () => {
+      imgSnapshotTest(
+        `
+        sequenceDiagram
+        Alice->>Bob: I'm short
+        note left of Alice: I am right aligned<br>but also<br>multiline
+        Bob->>Alice: Short as well
+      `,
+        { sequence: { noteAlign: 'right' } }
+      );
+    });
+    it('should render multi-line messages aligned to the left when configured', () => {
+      imgSnapshotTest(
+        `
+        sequenceDiagram
+        Alice->>Bob: I'm short<br>but also<br>multiline
+        Bob->>Alice: Short as well<br>and also<br>multiline
+      `,
+        { sequence: { messageAlign: 'left' } }
+      );
+    });
+    it('should render multi-line messages aligned to the right when configured', () => {
+      imgSnapshotTest(
+        `
+        sequenceDiagram
+        Alice->>Bob: I'm short<br>but also<br>multiline
+        Bob->>Alice: Short as well<br>and also<br>multiline
+      `,
+        { sequence: { messageAlign: 'right' } }
+      );
+    });
   });
   context('auth width scaling', () => {
     it('should render long actor descriptions', () => {

cypress/e2e/rendering/stateDiagram-v2.spec.js → cypress/integration/rendering/stateDiagram-v2.spec.js

@@ -509,4 +509,16 @@ stateDiagram-v2
       expect(svg).to.not.have.attr('style');
     });
   });
+
+  it('v2 should render a state diagram and set the correct length of the labels', () => {
+    imgSnapshotTest(
+      `
+      stateDiagram-v2
+      [*] --> 1
+      1 --> 2: test({ foo#colon; 'far' })
+      2 --> [*]
+    `,
+      { logLevel: 0, fontFamily: 'courier' }
+    );
+  });
 });

cypress/platform/knsv.html

@@ -218,13 +218,41 @@
 }
       </div>
       <div class="mermaid" style="width: 100%;">
-        stateDiagram
-        accTitle: Apa
-        accDescr: One that can climb better then any man
-      [*] --> S1
-      state "Some long name" as S1
+%%{init: {'config': {'wrap': true }}}%%
+        sequenceDiagram
+        participant A as Extremely utterly long line of longness which had previously overflown the actor box as it is much longer than what it should be
+        A->>Bob: Hola
+        Bob-->A: Pasten !
       </div>
       <div class="mermaid2" style="width: 100%;">
+      gitGraph
+       commit id: "ZERO"
+       branch develop
+       commit id:"A"
+       checkout main
+       commit id:"ONE"
+       checkout develop
+       commit id:"B"
+       branch featureA
+       commit id:"FIX"
+       commit id: "FIX-2"
+       checkout main
+       commit id:"TWO"
+       cherry-pick id:"A"
+       commit id:"THREE"
+       cherry-pick id:"FIX"
+       checkout develop
+       commit id:"C"
+       merge featureA
+       </div>
+       <div class="mermaid2" style="width: 100%;">
+flowchart 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]
+      </div>     <div class="mermaid2" style="width: 100%;">
         classDiagram
           Animal "1" <|-- Duck
           Animal <|-- Fish
@@ -283,6 +311,10 @@
   class: {
     // defaultRenderer: 'dagre-d3',
     htmlLabels: true,
+  },
+  sequence: {
+    // mirrorActors: false,'
+    wrap: false,
   },
         // gantt: { axisFormat: '%m/%d/%Y' },
   //       sequence: {
@@ -305,6 +337,7 @@
         curve: 'cardinal',
         // securityLevel: 'sandbox',
         // themeVariables: {relationLabelColor: 'red'}
+        wrap: true,
       });
       function callback() {
   alert('It worked');

cypress/plugins/index.js

@@ -0,0 +1,32 @@
+// ***********************************************************
+// 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);

docs/Setup.md

@@ -1401,6 +1401,15 @@ This sets the auto-wrap padding for the diagram (sides only)
 
 **Notes:** Default value: 0.
 
+## parse
+
+### Parameters
+
+-   `text`  
+-   `dia`  
+
+Returns **any** 
+
 ## setSiteConfig
 
 ## setSiteConfig
@@ -1420,15 +1429,6 @@ function _Default value: At default, will mirror Global Config_
 
 Returns **[object][5]** The siteConfig
 
-## parse
-
-### Parameters
-
--   `text`  
--   `dia`  
-
-Returns **any** 
-
 ## getSiteConfig
 
 ## getSiteConfig
@@ -1471,21 +1471,6 @@ Returns **any** The currentConfig merged with the sanitized conf
 
 Returns **any** The currentConfig
 
-## sanitize
-
-## sanitize
-
-| Function | Description                            | Type        | Values |
-| -------- | -------------------------------------- | ----------- | ------ |
-| sanitize | Sets the siteConfig to desired values. | Put Request | None   |
-
-Ensures options parameter does not attempt to override siteConfig secure keys **Notes**: modifies
-options in-place
-
-### Parameters
-
--   `options` **any** The potential setConfig parameter
-
 ## render
 
 Function that renders an svg with a graph from a chart definition. Usage example below.
@@ -1514,6 +1499,21 @@ $(function () {
 
 Returns **any** 
 
+## sanitize
+
+## sanitize
+
+| Function | Description                            | Type        | Values |
+| -------- | -------------------------------------- | ----------- | ------ |
+| sanitize | Sets the siteConfig to desired values. | Put Request | None   |
+
+Ensures options parameter does not attempt to override siteConfig secure keys **Notes**: modifies
+options in-place
+
+### Parameters
+
+-   `options` **any** The potential setConfig parameter
+
 ## addDirective
 
 Pushes in a directive to the configuration

package.json

@@ -27,7 +27,7 @@
     "postbuild": "documentation build src/mermaidAPI.js src/config.js src/defaultConfig.js --shallow -f md --markdown-toc false > docs/Setup.md",
     "build:watch": "yarn build:development --watch",
     "release": "yarn build",
-    "lint": "eslint ./ --ext .js,.json,.html,.md",
+    "lint": "eslint ./ --ext .js,.json,.html",
     "lint:fix": "yarn lint --fix",
     "e2e:depr": "yarn lint && jest e2e --config e2e/jest.config.js",
     "cypress": "cypress run",
@@ -81,7 +81,7 @@
     "concurrently": "^7.0.0",
     "coveralls": "^3.0.2",
     "css-to-string-loader": "^0.1.3",
-    "cypress": "10.3.0",
+    "cypress": "9.7.0",
     "cypress-image-snapshot": "^4.0.1",
     "documentation": "13.2.0",
     "eslint": "^8.4.1",