From 2bc5b6d2fa7eb9e5dd75c06046d31e4a361f1369 Mon Sep 17 00:00:00 2001 From: Alois Klink Date: Thu, 21 Aug 2025 19:26:54 +0530 Subject: [PATCH 1/9] docs(flowchart): fix image node documentation --- docs/syntax/flowchart.md | 16 ++++++++++++++-- packages/mermaid/src/docs/syntax/flowchart.md | 10 ++++++++-- 2 files changed, 22 insertions(+), 4 deletions(-) diff --git a/docs/syntax/flowchart.md b/docs/syntax/flowchart.md index daaa29581..08c145f6f 100644 --- a/docs/syntax/flowchart.md +++ b/docs/syntax/flowchart.md @@ -983,11 +983,23 @@ flowchart TD - `b` - **w**: The width of the image. If not defined, this will default to the natural width of the image. - **h**: The height of the image. If not defined, this will default to the natural height of the image. -- **constraint**: Determines if the image should constrain the node size. This setting also ensures the image maintains its original aspect ratio, adjusting the height (`h`) accordingly to the width (`w`). If not defined, this will default to `off` Possible values are: +- **constraint**: Determines if the image should constrain the node size. This setting also ensures the image maintains its original aspect ratio, adjusting the width (`w`) accordingly to the height (`h`). If not defined, this will default to `off` Possible values are: - `on` - `off` -These new shapes provide additional flexibility and visual appeal to your flowcharts, making them more informative and engaging. +If you want to resize an image, but keep the same aspect ratio, set `h`, and set `constraint: on` to constrain the aspect ratio. E.g. + +```mermaid-example +flowchart TD + %% My image with a constrained aspect ratio + A@{ img: "https://mermaid.js.org/favicon.svg", label: "My example image label", pos: "t", h: 60, constraint: "on" } +``` + +```mermaid +flowchart TD + %% My image with a constrained aspect ratio + A@{ img: "https://mermaid.js.org/favicon.svg", label: "My example image label", pos: "t", h: 60, constraint: "on" } +``` ## Links between nodes diff --git a/packages/mermaid/src/docs/syntax/flowchart.md b/packages/mermaid/src/docs/syntax/flowchart.md index a19dcff21..341143c47 100644 --- a/packages/mermaid/src/docs/syntax/flowchart.md +++ b/packages/mermaid/src/docs/syntax/flowchart.md @@ -590,11 +590,17 @@ flowchart TD - `b` - **w**: The width of the image. If not defined, this will default to the natural width of the image. - **h**: The height of the image. If not defined, this will default to the natural height of the image. -- **constraint**: Determines if the image should constrain the node size. This setting also ensures the image maintains its original aspect ratio, adjusting the height (`h`) accordingly to the width (`w`). If not defined, this will default to `off` Possible values are: +- **constraint**: Determines if the image should constrain the node size. This setting also ensures the image maintains its original aspect ratio, adjusting the width (`w`) accordingly to the height (`h`). If not defined, this will default to `off` Possible values are: - `on` - `off` -These new shapes provide additional flexibility and visual appeal to your flowcharts, making them more informative and engaging. +If you want to resize an image, but keep the same aspect ratio, set `h`, and set `constraint: on` to constrain the aspect ratio. E.g. + +```mermaid +flowchart TD + %% My image with a constrained aspect ratio + A@{ img: "https://mermaid.js.org/favicon.svg", label: "My example image label", pos: "t", h: 60, constraint: "on" } +``` ## Links between nodes From e438e035bc5f1a2e061be9a5fb558e9ea1e81fa9 Mon Sep 17 00:00:00 2001 From: omkarht Date: Thu, 21 Aug 2025 19:34:27 +0530 Subject: [PATCH 2/9] chore: added changeset --- .changeset/thick-fans-run.md | 5 +++++ 1 file changed, 5 insertions(+) create mode 100644 .changeset/thick-fans-run.md diff --git a/.changeset/thick-fans-run.md b/.changeset/thick-fans-run.md new file mode 100644 index 000000000..62659b24d --- /dev/null +++ b/.changeset/thick-fans-run.md @@ -0,0 +1,5 @@ +--- +'mermaid': patch +--- + +docs: fix incorrect image node documentation From 93467a6fce72b8232c1c41e85048a06b8d66b5a6 Mon Sep 17 00:00:00 2001 From: omkarht Date: Mon, 25 Aug 2025 12:58:17 +0530 Subject: [PATCH 3/9] fix: removed changeset on-behalf-of: @Mermaid-Chart --- .changeset/thick-fans-run.md | 5 ----- 1 file changed, 5 deletions(-) delete mode 100644 .changeset/thick-fans-run.md diff --git a/.changeset/thick-fans-run.md b/.changeset/thick-fans-run.md deleted file mode 100644 index 62659b24d..000000000 --- a/.changeset/thick-fans-run.md +++ /dev/null @@ -1,5 +0,0 @@ ---- -'mermaid': patch ---- - -docs: fix incorrect image node documentation From 8322a6359847e3b7a65391d5d33f9955bf4685ae Mon Sep 17 00:00:00 2001 From: darshanr0107 Date: Mon, 25 Aug 2025 16:17:04 +0530 Subject: [PATCH 4/9] feat: add helper to differentiate user-defined layout from default on-behalf-of: @Mermaid-Chart --- docs/config/setup/config/README.md | 1 + .../setup/config/functions/getLayoutInfo.md | 27 +++++++++++++++++++ packages/mermaid/src/config.ts | 16 +++++++++++ 3 files changed, 44 insertions(+) create mode 100644 docs/config/setup/config/functions/getLayoutInfo.md diff --git a/docs/config/setup/config/README.md b/docs/config/setup/config/README.md index 67fca78eb..6b17a38ad 100644 --- a/docs/config/setup/config/README.md +++ b/docs/config/setup/config/README.md @@ -18,6 +18,7 @@ - [addDirective](functions/addDirective.md) - [getConfig](functions/getConfig.md) +- [getLayoutInfo](functions/getLayoutInfo.md) - [getSiteConfig](functions/getSiteConfig.md) - [reset](functions/reset.md) - [sanitize](functions/sanitize.md) diff --git a/docs/config/setup/config/functions/getLayoutInfo.md b/docs/config/setup/config/functions/getLayoutInfo.md new file mode 100644 index 000000000..044c6f96b --- /dev/null +++ b/docs/config/setup/config/functions/getLayoutInfo.md @@ -0,0 +1,27 @@ +> **Warning** +> +> ## THIS IS AN AUTOGENERATED FILE. DO NOT EDIT. +> +> ## Please edit the corresponding file in [/packages/mermaid/src/docs/config/setup/config/functions/getLayoutInfo.md](../../../../../packages/mermaid/src/docs/config/setup/config/functions/getLayoutInfo.md). + +[**mermaid**](../../README.md) + +--- + +# Function: getLayoutInfo() + +> **getLayoutInfo**(): `object` + +Defined in: [packages/mermaid/src/config.ts:260](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.ts#L260) + +## Returns + +`object` + +### isUserDefined + +> **isUserDefined**: `boolean` + +### layout + +> **layout**: `string` diff --git a/packages/mermaid/src/config.ts b/packages/mermaid/src/config.ts index 9468a3e46..295432ed3 100644 --- a/packages/mermaid/src/config.ts +++ b/packages/mermaid/src/config.ts @@ -248,3 +248,19 @@ const checkConfig = (config: MermaidConfig) => { issueWarning('LAZY_LOAD_DEPRECATED'); } }; + +const isUserDefinedLayout = (): boolean => { + if (configFromInitialize?.layout) { + return true; + } + + return directives.some((d) => !!d.layout); +}; + +export const getLayoutInfo = () => { + const cfg = getConfig(); + return { + layout: cfg.layout ?? 'dagre', + isUserDefined: isUserDefinedLayout(), + }; +}; From b52766653cc1f87ea348a3f010d5b9c3f5b6107d Mon Sep 17 00:00:00 2001 From: "renovate[bot]" <29139614+renovate[bot]@users.noreply.github.com> Date: Mon, 25 Aug 2025 11:22:30 +0000 Subject: [PATCH 5/9] chore(deps): update peter-evans/create-pull-request digest to 18e4695 --- .github/workflows/e2e-timings.yml | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/.github/workflows/e2e-timings.yml b/.github/workflows/e2e-timings.yml index 2bbfa8412..21dbda293 100644 --- a/.github/workflows/e2e-timings.yml +++ b/.github/workflows/e2e-timings.yml @@ -58,7 +58,7 @@ jobs: echo "EOF" >> $GITHUB_OUTPUT - name: Commit and create pull request - uses: peter-evans/create-pull-request@cb4d3bfce175d44325c6b7697f81e0afe8a79bdf + uses: peter-evans/create-pull-request@18e469570b1cf0dfc11d60ec121099f8ff3e617a with: add-paths: | cypress/timings.json From 31ecf31c2e35bbe7e3bec02b0ce50723a8d9ddee Mon Sep 17 00:00:00 2001 From: darshanr0107 Date: Mon, 25 Aug 2025 18:26:03 +0530 Subject: [PATCH 6/9] refactor: remove layout-specific checks and create generic function on-behalf-of: @Mermaid-Chart --- docs/config/setup/config/README.md | 2 +- .../setup/config/functions/getLayoutInfo.md | 27 ------------------- .../config/functions/getUserDefinedConfig.md | 19 +++++++++++++ packages/mermaid/src/config.ts | 20 +++++++------- 4 files changed, 29 insertions(+), 39 deletions(-) delete mode 100644 docs/config/setup/config/functions/getLayoutInfo.md create mode 100644 docs/config/setup/config/functions/getUserDefinedConfig.md diff --git a/docs/config/setup/config/README.md b/docs/config/setup/config/README.md index 6b17a38ad..c811c7b08 100644 --- a/docs/config/setup/config/README.md +++ b/docs/config/setup/config/README.md @@ -18,8 +18,8 @@ - [addDirective](functions/addDirective.md) - [getConfig](functions/getConfig.md) -- [getLayoutInfo](functions/getLayoutInfo.md) - [getSiteConfig](functions/getSiteConfig.md) +- [getUserDefinedConfig](functions/getUserDefinedConfig.md) - [reset](functions/reset.md) - [sanitize](functions/sanitize.md) - [saveConfigFromInitialize](functions/saveConfigFromInitialize.md) diff --git a/docs/config/setup/config/functions/getLayoutInfo.md b/docs/config/setup/config/functions/getLayoutInfo.md deleted file mode 100644 index 044c6f96b..000000000 --- a/docs/config/setup/config/functions/getLayoutInfo.md +++ /dev/null @@ -1,27 +0,0 @@ -> **Warning** -> -> ## THIS IS AN AUTOGENERATED FILE. DO NOT EDIT. -> -> ## Please edit the corresponding file in [/packages/mermaid/src/docs/config/setup/config/functions/getLayoutInfo.md](../../../../../packages/mermaid/src/docs/config/setup/config/functions/getLayoutInfo.md). - -[**mermaid**](../../README.md) - ---- - -# Function: getLayoutInfo() - -> **getLayoutInfo**(): `object` - -Defined in: [packages/mermaid/src/config.ts:260](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.ts#L260) - -## Returns - -`object` - -### isUserDefined - -> **isUserDefined**: `boolean` - -### layout - -> **layout**: `string` diff --git a/docs/config/setup/config/functions/getUserDefinedConfig.md b/docs/config/setup/config/functions/getUserDefinedConfig.md new file mode 100644 index 000000000..ed39f1337 --- /dev/null +++ b/docs/config/setup/config/functions/getUserDefinedConfig.md @@ -0,0 +1,19 @@ +> **Warning** +> +> ## THIS IS AN AUTOGENERATED FILE. DO NOT EDIT. +> +> ## Please edit the corresponding file in [/packages/mermaid/src/docs/config/setup/config/functions/getUserDefinedConfig.md](../../../../../packages/mermaid/src/docs/config/setup/config/functions/getUserDefinedConfig.md). + +[**mermaid**](../../README.md) + +--- + +# Function: getUserDefinedConfig() + +> **getUserDefinedConfig**(): [`MermaidConfig`](../../mermaid/interfaces/MermaidConfig.md) + +Defined in: [packages/mermaid/src/config.ts:252](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.ts#L252) + +## Returns + +[`MermaidConfig`](../../mermaid/interfaces/MermaidConfig.md) diff --git a/packages/mermaid/src/config.ts b/packages/mermaid/src/config.ts index 295432ed3..4fcb3224d 100644 --- a/packages/mermaid/src/config.ts +++ b/packages/mermaid/src/config.ts @@ -249,18 +249,16 @@ const checkConfig = (config: MermaidConfig) => { } }; -const isUserDefinedLayout = (): boolean => { - if (configFromInitialize?.layout) { - return true; +export const getUserDefinedConfig = (): MermaidConfig => { + let userConfig: MermaidConfig = {}; + + if (configFromInitialize) { + userConfig = assignWithDepth(userConfig, configFromInitialize); } - return directives.some((d) => !!d.layout); -}; + for (const d of directives) { + userConfig = assignWithDepth(userConfig, d); + } -export const getLayoutInfo = () => { - const cfg = getConfig(); - return { - layout: cfg.layout ?? 'dagre', - isUserDefined: isUserDefinedLayout(), - }; + return userConfig; }; From 4760ed88937f17d6c7b191fb8f588f364e6195e8 Mon Sep 17 00:00:00 2001 From: darshanr0107 Date: Mon, 25 Aug 2025 19:13:58 +0530 Subject: [PATCH 7/9] fix: add unit tests for getUserDefinedConfig across different scenarios on-behalf-of: @Mermaid-Chart --- packages/mermaid/src/config.spec.ts | 163 ++++++++++++++++++++++++++++ 1 file changed, 163 insertions(+) diff --git a/packages/mermaid/src/config.spec.ts b/packages/mermaid/src/config.spec.ts index 000be1282..2cacfebbf 100644 --- a/packages/mermaid/src/config.spec.ts +++ b/packages/mermaid/src/config.spec.ts @@ -78,3 +78,166 @@ describe('when working with site config', () => { expect(config_4.altFontFamily).toBeUndefined(); }); }); + +describe('getUserDefinedConfig', () => { + beforeEach(() => { + configApi.reset(); + }); + + it('should return empty object when no user config is defined', () => { + const userConfig = configApi.getUserDefinedConfig(); + expect(userConfig).toEqual({}); + }); + + it('should return config from initialize only', () => { + const initConfig: MermaidConfig = { theme: 'dark', fontFamily: 'Arial' }; + configApi.saveConfigFromInitialize(initConfig); + + const userConfig = configApi.getUserDefinedConfig(); + expect(userConfig).toEqual(initConfig); + }); + + it('should return config from directives only', () => { + const directive1: MermaidConfig = { layout: 'elk', fontSize: 14 }; + const directive2: MermaidConfig = { theme: 'forest' }; + + configApi.addDirective(directive1); + configApi.addDirective(directive2); + + const userConfig = configApi.getUserDefinedConfig(); + expect(userConfig.layout).toBe('elk'); + expect(userConfig.fontSize).toBe(14); + expect(userConfig.theme).toBe('forest'); + }); + + it('should combine initialize config and directives', () => { + const initConfig: MermaidConfig = { theme: 'dark', fontFamily: 'Arial', layout: 'dagre' }; + const directive1: MermaidConfig = { layout: 'elk', fontSize: 14 }; + const directive2: MermaidConfig = { theme: 'forest' }; + + configApi.saveConfigFromInitialize(initConfig); + configApi.addDirective(directive1); + configApi.addDirective(directive2); + + const userConfig = configApi.getUserDefinedConfig(); + expect(userConfig.theme).toBe('forest'); + expect(userConfig.fontFamily).toBe('Arial'); + expect(userConfig.layout).toBe('elk'); + expect(userConfig.fontSize).toBe(14); + }); + + it('should handle nested config objects properly', () => { + const initConfig: MermaidConfig = { + flowchart: { nodeSpacing: 50, rankSpacing: 100 }, + theme: 'default', + }; + const directive: MermaidConfig = { + flowchart: { nodeSpacing: 75, curve: 'basis' }, + mindmap: { padding: 20 }, + }; + + configApi.saveConfigFromInitialize(initConfig); + configApi.addDirective(directive); + + const userConfig = configApi.getUserDefinedConfig(); + expect(userConfig).toEqual({ + theme: 'default', + flowchart: { + nodeSpacing: 75, + rankSpacing: 100, + curve: 'basis', + }, + mindmap: { + padding: 20, + }, + }); + }); + + it('should handle complex nested overrides', () => { + const initConfig: MermaidConfig = { + flowchart: { + nodeSpacing: 50, + rankSpacing: 100, + curve: 'linear', + }, + theme: 'default', + }; + const directive1: MermaidConfig = { + flowchart: { + nodeSpacing: 75, + }, + fontSize: 12, + }; + const directive2: MermaidConfig = { + flowchart: { + curve: 'basis', + nodeSpacing: 100, + }, + mindmap: { + padding: 15, + }, + }; + + configApi.saveConfigFromInitialize(initConfig); + configApi.addDirective(directive1); + configApi.addDirective(directive2); + + const userConfig = configApi.getUserDefinedConfig(); + expect(userConfig).toEqual({ + theme: 'default', + fontSize: 12, + flowchart: { + nodeSpacing: 100, + rankSpacing: 100, + curve: 'basis', + }, + mindmap: { + padding: 15, + }, + }); + }); + + it('should return independent copies (not references)', () => { + const initConfig: MermaidConfig = { theme: 'dark', flowchart: { nodeSpacing: 50 } }; + configApi.saveConfigFromInitialize(initConfig); + + const userConfig1 = configApi.getUserDefinedConfig(); + const userConfig2 = configApi.getUserDefinedConfig(); + + userConfig1.theme = 'neutral'; + userConfig1.flowchart!.nodeSpacing = 999; + + expect(userConfig2.theme).toBe('dark'); + expect(userConfig2.flowchart!.nodeSpacing).toBe(50); + }); + + it('should handle edge cases with undefined values', () => { + const initConfig: MermaidConfig = { theme: 'dark', layout: undefined }; + const directive: MermaidConfig = { fontSize: 14, fontFamily: undefined }; + + configApi.saveConfigFromInitialize(initConfig); + configApi.addDirective(directive); + + const userConfig = configApi.getUserDefinedConfig(); + expect(userConfig.theme).toBe('dark'); + expect(userConfig.layout).toBeUndefined(); + expect(userConfig.fontFamily).toBeUndefined(); + expect(userConfig.fontSize).toBe(14); + }); + + it('should work correctly after reset', () => { + const initConfig: MermaidConfig = { theme: 'dark' }; + const directive: MermaidConfig = { layout: 'elk' }; + + configApi.saveConfigFromInitialize(initConfig); + configApi.addDirective(directive); + + let userConfig = configApi.getUserDefinedConfig(); + expect(userConfig).toEqual({ theme: 'dark', layout: 'elk' }); + + configApi.reset(); + + userConfig = configApi.getUserDefinedConfig(); + expect(userConfig).toEqual({ theme: 'dark' }); + }); +}); From c41e08cb7a576f5cf929586639a57e4ebd35877f Mon Sep 17 00:00:00 2001 From: "github-actions[bot]" <41898282+github-actions[bot]@users.noreply.github.com> Date: Tue, 26 Aug 2025 04:13:51 +0000 Subject: [PATCH 8/9] chore: update E2E timings --- cypress/timings.json | 112 ++++++++++++++++++++++--------------------- 1 file changed, 58 insertions(+), 54 deletions(-) diff --git a/cypress/timings.json b/cypress/timings.json index 86d5b5222..5708c3414 100644 --- a/cypress/timings.json +++ b/cypress/timings.json @@ -2,219 +2,223 @@ "durations": [ { "spec": "cypress/integration/other/configuration.spec.js", - "duration": 6297 + "duration": 6162 }, { "spec": "cypress/integration/other/external-diagrams.spec.js", - "duration": 2187 + "duration": 2148 }, { "spec": "cypress/integration/other/ghsa.spec.js", - "duration": 3509 + "duration": 3585 }, { "spec": "cypress/integration/other/iife.spec.js", - "duration": 2218 + "duration": 2099 }, { "spec": "cypress/integration/other/interaction.spec.js", - "duration": 12104 + "duration": 12119 }, { "spec": "cypress/integration/other/rerender.spec.js", - "duration": 2151 + "duration": 2063 }, { "spec": "cypress/integration/other/xss.spec.js", - "duration": 33064 + "duration": 31921 }, { "spec": "cypress/integration/rendering/appli.spec.js", - "duration": 3488 + "duration": 3385 }, { "spec": "cypress/integration/rendering/architecture.spec.ts", - "duration": 106 + "duration": 108 }, { "spec": "cypress/integration/rendering/block.spec.js", - "duration": 18317 + "duration": 18063 }, { "spec": "cypress/integration/rendering/c4.spec.js", - "duration": 5592 + "duration": 5519 }, { "spec": "cypress/integration/rendering/classDiagram-elk-v3.spec.js", - "duration": 39358 + "duration": 40040 }, { "spec": "cypress/integration/rendering/classDiagram-handDrawn-v3.spec.js", - "duration": 37160 + "duration": 38665 }, { "spec": "cypress/integration/rendering/classDiagram-v2.spec.js", - "duration": 23660 + "duration": 22836 }, { "spec": "cypress/integration/rendering/classDiagram-v3.spec.js", - "duration": 36866 + "duration": 37096 }, { "spec": "cypress/integration/rendering/classDiagram.spec.js", - "duration": 17334 + "duration": 16452 }, { "spec": "cypress/integration/rendering/conf-and-directives.spec.js", - "duration": 9871 + "duration": 10387 }, { "spec": "cypress/integration/rendering/current.spec.js", - "duration": 2833 + "duration": 2803 }, { "spec": "cypress/integration/rendering/erDiagram-unified.spec.js", - "duration": 85321 + "duration": 86891 }, { "spec": "cypress/integration/rendering/erDiagram.spec.js", - "duration": 15673 + "duration": 15206 }, { "spec": "cypress/integration/rendering/errorDiagram.spec.js", - "duration": 3724 + "duration": 3540 }, { "spec": "cypress/integration/rendering/flowchart-elk.spec.js", - "duration": 41178 + "duration": 41975 }, { "spec": "cypress/integration/rendering/flowchart-handDrawn.spec.js", - "duration": 29966 + "duration": 30909 }, { "spec": "cypress/integration/rendering/flowchart-icon.spec.js", - "duration": 7689 + "duration": 7881 }, { "spec": "cypress/integration/rendering/flowchart-shape-alias.spec.ts", - "duration": 24709 + "duration": 24294 }, { "spec": "cypress/integration/rendering/flowchart-v2.spec.js", - "duration": 45565 + "duration": 47652 }, { "spec": "cypress/integration/rendering/flowchart.spec.js", - "duration": 31144 + "duration": 32049 }, { "spec": "cypress/integration/rendering/gantt.spec.js", - "duration": 20808 + "duration": 20248 }, { "spec": "cypress/integration/rendering/gitGraph.spec.js", - "duration": 49985 + "duration": 51202 }, { "spec": "cypress/integration/rendering/iconShape.spec.ts", - "duration": 273272 + "duration": 283546 }, { "spec": "cypress/integration/rendering/imageShape.spec.ts", - "duration": 55880 + "duration": 57257 }, { "spec": "cypress/integration/rendering/info.spec.ts", - "duration": 3271 + "duration": 3352 }, { "spec": "cypress/integration/rendering/journey.spec.js", - "duration": 7293 + "duration": 7423 }, { "spec": "cypress/integration/rendering/kanban.spec.ts", - "duration": 7861 + "duration": 7804 }, { "spec": "cypress/integration/rendering/katex.spec.js", - "duration": 3922 + "duration": 3847 }, { "spec": "cypress/integration/rendering/marker_unique_id.spec.js", - "duration": 2726 + "duration": 2637 }, { "spec": "cypress/integration/rendering/mindmap.spec.ts", - "duration": 11670 + "duration": 11658 }, { "spec": "cypress/integration/rendering/newShapes.spec.ts", - "duration": 146020 + "duration": 149500 }, { "spec": "cypress/integration/rendering/oldShapes.spec.ts", - "duration": 114244 + "duration": 115427 }, { "spec": "cypress/integration/rendering/packet.spec.ts", - "duration": 5036 + "duration": 4801 }, { "spec": "cypress/integration/rendering/pie.spec.ts", - "duration": 6545 + "duration": 6786 }, { "spec": "cypress/integration/rendering/quadrantChart.spec.js", - "duration": 9097 + "duration": 9422 }, { "spec": "cypress/integration/rendering/radar.spec.js", - "duration": 5676 + "duration": 5652 }, { "spec": "cypress/integration/rendering/requirement.spec.js", - "duration": 2795 + "duration": 2787 }, { "spec": "cypress/integration/rendering/requirementDiagram-unified.spec.js", - "duration": 51660 + "duration": 53631 }, { "spec": "cypress/integration/rendering/sankey.spec.ts", - "duration": 6957 + "duration": 7075 + }, + { + "spec": "cypress/integration/rendering/sequencediagram-v2.spec.js", + "duration": 20446 }, { "spec": "cypress/integration/rendering/sequencediagram.spec.js", - "duration": 36026 + "duration": 37326 }, { "spec": "cypress/integration/rendering/stateDiagram-v2.spec.js", - "duration": 29551 + "duration": 29208 }, { "spec": "cypress/integration/rendering/stateDiagram.spec.js", - "duration": 17364 + "duration": 16328 }, { "spec": "cypress/integration/rendering/theme.spec.js", - "duration": 30209 + "duration": 30541 }, { "spec": "cypress/integration/rendering/timeline.spec.ts", - "duration": 8699 + "duration": 8611 }, { "spec": "cypress/integration/rendering/treemap.spec.ts", - "duration": 12168 + "duration": 11878 }, { "spec": "cypress/integration/rendering/xyChart.spec.js", - "duration": 21453 + "duration": 20400 }, { "spec": "cypress/integration/rendering/zenuml.spec.js", - "duration": 3577 + "duration": 3528 } ] } From 50127f3ffe3d8a9e66cf263e1159b72785e848ee Mon Sep 17 00:00:00 2001 From: darshanr0107 Date: Tue, 26 Aug 2025 13:17:38 +0530 Subject: [PATCH 9/9] fix: review comments related to getUserDefinedConfig tests on-behalf-of: @Mermaid-Chart --- packages/mermaid/src/config.spec.ts | 109 +++++++++++++++++----------- 1 file changed, 65 insertions(+), 44 deletions(-) diff --git a/packages/mermaid/src/config.spec.ts b/packages/mermaid/src/config.spec.ts index 2cacfebbf..7fbae03af 100644 --- a/packages/mermaid/src/config.spec.ts +++ b/packages/mermaid/src/config.spec.ts @@ -104,10 +104,14 @@ describe('getUserDefinedConfig', () => { configApi.addDirective(directive1); configApi.addDirective(directive2); - const userConfig = configApi.getUserDefinedConfig(); - expect(userConfig.layout).toBe('elk'); - expect(userConfig.fontSize).toBe(14); - expect(userConfig.theme).toBe('forest'); + expect(configApi.getUserDefinedConfig()).toMatchInlineSnapshot(` + { + "fontFamily": "Arial", + "fontSize": 14, + "layout": "elk", + "theme": "forest", + } + `); }); it('should combine initialize config and directives', () => { @@ -120,10 +124,14 @@ describe('getUserDefinedConfig', () => { configApi.addDirective(directive2); const userConfig = configApi.getUserDefinedConfig(); - expect(userConfig.theme).toBe('forest'); - expect(userConfig.fontFamily).toBe('Arial'); - expect(userConfig.layout).toBe('elk'); - expect(userConfig.fontSize).toBe(14); + expect(userConfig).toMatchInlineSnapshot(` + { + "fontFamily": "Arial", + "fontSize": 14, + "layout": "elk", + "theme": "forest", + } + `); }); it('should handle nested config objects properly', () => { @@ -140,17 +148,19 @@ describe('getUserDefinedConfig', () => { configApi.addDirective(directive); const userConfig = configApi.getUserDefinedConfig(); - expect(userConfig).toEqual({ - theme: 'default', - flowchart: { - nodeSpacing: 75, - rankSpacing: 100, - curve: 'basis', - }, - mindmap: { - padding: 20, - }, - }); + expect(userConfig).toMatchInlineSnapshot(` + { + "flowchart": { + "curve": "basis", + "nodeSpacing": 75, + "rankSpacing": 100, + }, + "mindmap": { + "padding": 20, + }, + "theme": "default", + } + `); }); it('should handle complex nested overrides', () => { @@ -183,18 +193,20 @@ describe('getUserDefinedConfig', () => { configApi.addDirective(directive2); const userConfig = configApi.getUserDefinedConfig(); - expect(userConfig).toEqual({ - theme: 'default', - fontSize: 12, - flowchart: { - nodeSpacing: 100, - rankSpacing: 100, - curve: 'basis', - }, - mindmap: { - padding: 15, - }, - }); + expect(userConfig).toMatchInlineSnapshot(` + { + "flowchart": { + "curve": "basis", + "nodeSpacing": 100, + "rankSpacing": 100, + }, + "fontSize": 12, + "mindmap": { + "padding": 15, + }, + "theme": "default", + } + `); }); it('should return independent copies (not references)', () => { @@ -207,8 +219,14 @@ describe('getUserDefinedConfig', () => { userConfig1.theme = 'neutral'; userConfig1.flowchart!.nodeSpacing = 999; - expect(userConfig2.theme).toBe('dark'); - expect(userConfig2.flowchart!.nodeSpacing).toBe(50); + expect(userConfig2).toMatchInlineSnapshot(` + { + "flowchart": { + "nodeSpacing": 50, + }, + "theme": "dark", + } + `); }); it('should handle edge cases with undefined values', () => { @@ -218,26 +236,29 @@ describe('getUserDefinedConfig', () => { configApi.saveConfigFromInitialize(initConfig); configApi.addDirective(directive); - const userConfig = configApi.getUserDefinedConfig(); - expect(userConfig.theme).toBe('dark'); - expect(userConfig.layout).toBeUndefined(); - expect(userConfig.fontFamily).toBeUndefined(); - expect(userConfig.fontSize).toBe(14); + expect(configApi.getUserDefinedConfig()).toMatchInlineSnapshot(` + { + "fontSize": 14, + "layout": undefined, + "theme": "dark", + } + `); }); - it('should work correctly after reset', () => { + it('should retain config from initialize after reset', () => { const initConfig: MermaidConfig = { theme: 'dark' }; const directive: MermaidConfig = { layout: 'elk' }; configApi.saveConfigFromInitialize(initConfig); configApi.addDirective(directive); - let userConfig = configApi.getUserDefinedConfig(); - expect(userConfig).toEqual({ theme: 'dark', layout: 'elk' }); + expect(configApi.getUserDefinedConfig()).toMatchInlineSnapshot(` + { + "layout": "elk", + "theme": "dark", + } + `); configApi.reset(); - - userConfig = configApi.getUserDefinedConfig(); - expect(userConfig).toEqual({ theme: 'dark' }); }); });