](https://app.codecov.io/github/mermaid-js/mermaid/tree/develop)
[](https://www.jsdelivr.com/package/npm/mermaid)
[](https://www.npmjs.com/package/mermaid)
-[](https://discord.gg/AgrbSrBer3)
+[](https://discord.gg/sKeNQX4Wtj)
[](https://twitter.com/mermaidjs_)
[](https://argos-ci.com?utm_source=mermaid&utm_campaign=oss)
[](https://securityscorecards.dev/viewer/?uri=github.com/mermaid-js/mermaid)
diff --git a/README.zh-CN.md b/README.zh-CN.md
index a3046ab54..e5b20caed 100644
--- a/README.zh-CN.md
+++ b/README.zh-CN.md
@@ -15,7 +15,7 @@ Mermaid
<a href=){kind=link}
diff --git a/cypress.config.ts b/cypress.config.ts
index d077ba915..50ea940e9 100644
--- a/cypress.config.ts
+++ b/cypress.config.ts
@@ -1,8 +1,8 @@
import eyesPlugin from '@applitools/eyes-cypress';
import { registerArgosTask } from '@argos-ci/cypress/task';
-import coverage from '@cypress/code-coverage/task';
+import coverage from '@cypress/code-coverage/task.js';
import { defineConfig } from 'cypress';
-import { addMatchImageSnapshotPlugin } from 'cypress-image-snapshot/plugin';
+import { addMatchImageSnapshotPlugin } from 'cypress-image-snapshot/plugin.js';
import cypressSplit from 'cypress-split';
export default eyesPlugin(
diff --git a/cypress/integration/rendering/architecture.spec.ts b/cypress/integration/rendering/architecture.spec.ts
index 25326ff80..ec74a5dd5 100644
--- a/cypress/integration/rendering/architecture.spec.ts
+++ b/cypress/integration/rendering/architecture.spec.ts
@@ -19,6 +19,25 @@ describe.skip('architecture diagram', () => {
`
);
});
+ it('should render a simple architecture diagram with titleAndAccessabilities', () => {
+ imgSnapshotTest(
+ `architecture-beta
+ title Simple Architecture Diagram
+ accTitle: Accessibility Title
+ accDescr: Accessibility Description
+ group api(cloud)[API]
+
+ service db(database)[Database] in api
+ service disk1(disk)[Storage] in api
+ service disk2(disk)[Storage] in api
+ service server(server)[Server] in api
+
+ db:L -- R:server
+ disk1:T -- B:server
+ disk2:T -- B:db
+ `
+ );
+ });
it('should render an architecture diagram with groups within groups', () => {
imgSnapshotTest(
`architecture-beta
@@ -172,7 +191,7 @@ describe.skip('architecture diagram', () => {
);
});
- it('should render an architecture diagram with a resonable height', () => {
+ it('should render an architecture diagram with a reasonable height', () => {
imgSnapshotTest(
`architecture-beta
group federated(cloud)[Federated Environment]
diff --git a/cypress/integration/rendering/erDiagram-unified.spec.js b/cypress/integration/rendering/erDiagram-unified.spec.js
new file mode 100644
index 000000000..8cecba21d
--- /dev/null
+++ b/cypress/integration/rendering/erDiagram-unified.spec.js
@@ -0,0 +1,652 @@
+import { imgSnapshotTest, renderGraph } from '../../helpers/util.ts';
+
+const testOptions = [
+ { description: '', options: { logLevel: 1 } },
+ { description: 'ELK: ', options: { logLevel: 1, layout: 'elk' } },
+ { description: 'HD: ', options: { logLevel: 1, look: 'handDrawn' } },
+];
+
+describe('Entity Relationship Diagram Unified', () => {
+ testOptions.forEach(({ description, options }) => {
+ it(`${description}should render a simple ER diagram`, () => {
+ imgSnapshotTest(
+ `
+ erDiagram
+ CUSTOMER ||--o{ ORDER : places
+ ORDER ||--|{ LINE-ITEM : contains
+ `,
+ options
+ );
+ });
+
+ it(`${description}should render a simple ER diagram without htmlLabels`, () => {
+ imgSnapshotTest(
+ `
+ erDiagram
+ CUSTOMER ||--o{ ORDER : places
+ ORDER ||--|{ LINE-ITEM : contains
+ `,
+ { ...options, htmlLabels: false }
+ );
+ });
+
+ it(`${description}should render an ER diagram with a recursive relationship`, () => {
+ imgSnapshotTest(
+ `
+ erDiagram
+ CUSTOMER ||..o{ CUSTOMER : refers
+ CUSTOMER ||--o{ ORDER : places
+ ORDER ||--|{ LINE-ITEM : contains
+ `,
+ options
+ );
+ });
+
+ it(`${description}should render an ER diagram with multiple relationships between the same two entities`, () => {
+ imgSnapshotTest(
+ `
+ erDiagram
+ CUSTOMER ||--|{ ADDRESS : "invoiced at"
+ CUSTOMER ||--|{ ADDRESS : "receives goods at"
+ `,
+ options
+ );
+ });
+
+ it(`${description}should render a cyclical ER diagram`, () => {
+ imgSnapshotTest(
+ `
+ erDiagram
+ A ||--|{ B : likes
+ B ||--|{ C : likes
+ C ||--|{ A : likes
+ `,
+ options
+ );
+ });
+
+ it(`${description}should render a not-so-simple ER diagram`, () => {
+ imgSnapshotTest(
+ `
+ erDiagram
+ CUSTOMER }|..|{ DELIVERY-ADDRESS : has
+ CUSTOMER ||--o{ ORDER : places
+ CUSTOMER ||--o{ INVOICE : "liable for"
+ DELIVERY-ADDRESS ||--o{ ORDER : receives
+ INVOICE ||--|{ ORDER : covers
+ ORDER ||--|{ ORDER-ITEM : includes
+ PRODUCT-CATEGORY ||--|{ PRODUCT : contains
+ PRODUCT ||--o{ ORDER-ITEM : "ordered in"
+ `,
+ options
+ );
+ });
+
+ it(`${description}should render a not-so-simple ER diagram without htmlLabels`, () => {
+ imgSnapshotTest(
+ `
+ erDiagram
+ CUSTOMER }|..|{ DELIVERY-ADDRESS : has
+ CUSTOMER ||--o{ ORDER : places
+ CUSTOMER ||--o{ INVOICE : "liable for"
+ DELIVERY-ADDRESS ||--o{ ORDER : receives
+ INVOICE ||--|{ ORDER : covers
+ ORDER ||--|{ ORDER-ITEM : includes
+ PRODUCT-CATEGORY ||--|{ PRODUCT : contains
+ PRODUCT ||--o{ ORDER-ITEM : "ordered in"
+ `,
+ { ...options, htmlLabels: false }
+ );
+ });
+
+ it(`${description}should render multiple ER diagrams`, () => {
+ imgSnapshotTest(
+ [
+ `
+ erDiagram
+ CUSTOMER ||--o{ ORDER : places
+ ORDER ||--|{ LINE-ITEM : contains
+ `,
+ `
+ erDiagram
+ CUSTOMER ||--o{ ORDER : places
+ ORDER ||--|{ LINE-ITEM : contains
+ `,
+ ],
+ options
+ );
+ });
+
+ it(`${description}should render an ER diagram with blank or empty labels`, () => {
+ imgSnapshotTest(
+ `
+ erDiagram
+ BOOK }|..|{ AUTHOR : ""
+ BOOK }|..|{ GENRE : " "
+ AUTHOR }|..|{ GENRE : " "
+ `,
+ options
+ );
+ });
+
+ it(`${description}should render entities that have no relationships`, () => {
+ renderGraph(
+ `
+ erDiagram
+ DEAD_PARROT
+ HERMIT
+ RECLUSE
+ SOCIALITE }o--o{ SOCIALITE : "interacts with"
+ RECLUSE }o--o{ SOCIALITE : avoids
+ `,
+ options
+ );
+ });
+
+ it(`${description}should render entities with and without attributes`, () => {
+ renderGraph(
+ `
+ erDiagram
+ BOOK { string title }
+ AUTHOR }|..|{ BOOK : writes
+ BOOK { float price }
+ `,
+ options
+ );
+ });
+
+ it(`${description}should render entities with generic and array attributes`, () => {
+ renderGraph(
+ `
+ erDiagram
+ BOOK {
+ string title
+ string[] authors
+ type~T~ type
+ }
+ `,
+ options
+ );
+ });
+
+ it(`${description}should render entities with generic and array attributes without htmlLabels`, () => {
+ renderGraph(
+ `
+ erDiagram
+ BOOK {
+ string title
+ string[] authors
+ type~T~ type
+ }
+ `,
+ { ...options, htmlLabels: false }
+ );
+ });
+
+ it(`${description}should render entities with length in attributes type`, () => {
+ renderGraph(
+ `
+ erDiagram
+ CLUSTER {
+ varchar(99) name
+ string(255) description
+ }
+ `,
+ options
+ );
+ });
+
+ it(`${description}should render entities with length in attributes type without htmlLabels`, () => {
+ renderGraph(
+ `
+ erDiagram
+ CLUSTER {
+ varchar(99) name
+ string(255) description
+ }
+ `,
+ { ...options, htmlLabels: false }
+ );
+ });
+
+ it(`${description}should render entities and attributes with big and small entity names`, () => {
+ renderGraph(
+ `
+ erDiagram
+ PRIVATE_FINANCIAL_INSTITUTION {
+ string name
+ int turnover
+ }
+ PRIVATE_FINANCIAL_INSTITUTION ||..|{ EMPLOYEE : employs
+ EMPLOYEE { bool officer_of_firm }
+ `,
+ options
+ );
+ });
+
+ it(`${description}should render entities and attributes with big and small entity names without htmlLabels`, () => {
+ renderGraph(
+ `
+ erDiagram
+ PRIVATE_FINANCIAL_INSTITUTION {
+ string name
+ int turnover
+ }
+ PRIVATE_FINANCIAL_INSTITUTION ||..|{ EMPLOYEE : employs
+ EMPLOYEE { bool officer_of_firm }
+ `,
+ { ...options, htmlLabels: false }
+ );
+ });
+
+ it(`${description}should render entities with attributes that begin with asterisk`, () => {
+ imgSnapshotTest(
+ `
+ erDiagram
+ BOOK {
+ int *id
+ string name
+ varchar(99) summary
+ }
+ BOOK }o..o{ STORE : soldBy
+ STORE {
+ int *id
+ string name
+ varchar(50) address
+ }
+ `,
+ options
+ );
+ });
+
+ it(`${description}should render entities with attributes that begin with asterisk without htmlLabels`, () => {
+ imgSnapshotTest(
+ `
+ erDiagram
+ BOOK {
+ int *id
+ string name
+ varchar(99) summary
+ }
+ BOOK }o..o{ STORE : soldBy
+ STORE {
+ int *id
+ string name
+ varchar(50) address
+ }
+ `,
+ { ...options, htmlLabels: false }
+ );
+ });
+
+ it(`${description}should render entities with keys`, () => {
+ renderGraph(
+ `
+ erDiagram
+ AUTHOR_WITH_LONG_ENTITY_NAME {
+ string name PK
+ }
+ AUTHOR_WITH_LONG_ENTITY_NAME }|..|{ BOOK : writes
+ BOOK {
+ float price
+ string author FK
+ string title PK
+ }
+ `,
+ options
+ );
+ });
+
+ it(`${description}should render entities with keys without htmlLabels`, () => {
+ renderGraph(
+ `
+ erDiagram
+ AUTHOR_WITH_LONG_ENTITY_NAME {
+ string name PK
+ }
+ AUTHOR_WITH_LONG_ENTITY_NAME }|..|{ BOOK : writes
+ BOOK {
+ float price
+ string author FK
+ string title PK
+ }
+ `,
+ { ...options, htmlLabels: false }
+ );
+ });
+
+ it(`${description}should render entities with comments`, () => {
+ renderGraph(
+ `
+ erDiagram
+ AUTHOR_WITH_LONG_ENTITY_NAME {
+ string name "comment"
+ }
+ AUTHOR_WITH_LONG_ENTITY_NAME }|..|{ BOOK : writes
+ BOOK {
+ string author
+ string title "author comment"
+ float price "price comment"
+ }
+ `,
+ options
+ );
+ });
+
+ it(`${description}should render entities with comments without htmlLabels`, () => {
+ renderGraph(
+ `
+ erDiagram
+ AUTHOR_WITH_LONG_ENTITY_NAME {
+ string name "comment"
+ }
+ AUTHOR_WITH_LONG_ENTITY_NAME }|..|{ BOOK : writes
+ BOOK {
+ string author
+ string title "author comment"
+ float price "price comment"
+ }
+ `,
+ { ...options, htmlLabels: false }
+ );
+ });
+
+ it(`${description}should render entities with keys and comments`, () => {
+ renderGraph(
+ `
+ erDiagram
+ AUTHOR_WITH_LONG_ENTITY_NAME {
+ string name PK "comment"
+ }
+ AUTHOR_WITH_LONG_ENTITY_NAME }|..|{ BOOK : writes
+ BOOK {
+ string description
+ float price "price comment"
+ string title PK "title comment"
+ string author FK
+ }
+ `,
+ options
+ );
+ });
+
+ it(`${description}should render entities with keys and comments without htmlLabels`, () => {
+ renderGraph(
+ `
+ erDiagram
+ AUTHOR_WITH_LONG_ENTITY_NAME {
+ string name PK "comment"
+ }
+ AUTHOR_WITH_LONG_ENTITY_NAME }|..|{ BOOK : writes
+ BOOK {
+ string description
+ float price "price comment"
+ string title PK "title comment"
+ string author FK
+ }
+ `,
+ { ...options, htmlLabels: false }
+ );
+ });
+
+ it(`${description}should render entities with aliases`, () => {
+ renderGraph(
+ `
+ erDiagram
+ T1 one or zero to one or more T2 : test
+ T2 one or many optionally to zero or one T3 : test
+ T3 zero or more to zero or many T4 : test
+ T4 many(0) to many(1) T5 : test
+ T5 many optionally to one T6 : test
+ T6 only one optionally to only one T1 : test
+ T4 0+ to 1+ T6 : test
+ T1 1 to 1 T3 : test
+ `,
+ options
+ );
+ });
+
+ it(`${description}should render a simple ER diagram with a title`, () => {
+ imgSnapshotTest(
+ `---
+ title: simple ER diagram
+ ---
+ erDiagram
+ CUSTOMER ||--o{ ORDER : places
+ ORDER ||--|{ LINE-ITEM : contains
+ `,
+ options
+ );
+ });
+
+ it(`${description}should render entities with entity name aliases`, () => {
+ imgSnapshotTest(
+ `
+ erDiagram
+ p[Person] {
+ varchar(64) firstName
+ varchar(64) lastName
+ }
+ c["Customer Account"] {
+ varchar(128) email
+ }
+ p ||--o| c : has
+ `,
+ options
+ );
+ });
+
+ it(`${description}should render relationship labels with line breaks`, () => {
+ imgSnapshotTest(
+ `
+ erDiagram
+ p[Person] {
+ string firstName
+ string lastName
+ }
+ a["Customer Account"] {
+ string email
+ }
+
+ b["Customer Account Secondary"] {
+ string email
+ }
+
+ c["Customer Account Tertiary"] {
+ string email
+ }
+
+ d["Customer Account Nth"] {
+ string email
+ }
+
+ p ||--o| a : "hasone" + p ||--o| b : "has
one
two" + p ||--o| c : "has
one
two
three" + p ||--o| d : "has
one
two
three
...
Nth" + `, + options + ); + }); + + it(`${description}should render an ER diagram with unicode text`, () => { + imgSnapshotTest( + ` + erDiagram + _**testแบฝฮถโร๐ใใผ**_ { + *__List~List~int~~sdfds__* **driversLicense** PK "***The l๐icense #***" + *string(99)~T~~~~~~* firstName "Only __99__
characters are a
llowed dsfsdfsdfsdfs" + string last*Name* + string __phone__ UK + int _age_ + } + `, + options + ); + }); + + it(`${description}should render an ER diagram with unicode text without htmlLabels`, () => { + imgSnapshotTest( + ` + erDiagram + _**testแบฝฮถโร๐ใใผ**_ { + *__List~List~int~~sdfds__* **driversLicense** PK "***The l๐icense #***" + *string(99)~T~~~~~~* firstName "Only __99__
characters are a
llowed dsfsdfsdfsdfs" + string last*Name* + string __phone__ UK + int _age_ + } + `, + { ...options, htmlLabels: false } + ); + }); + + it(`${description}should render an ER diagram with relationships with unicode text`, () => { + imgSnapshotTest( + ` + erDiagram + person[๐] { + string *first*Name + string _**last**Name_ + } + a["*Customer Account*"] { + **string** ema*i*l + } + person ||--o| a : __hแบฝ๐__ + `, + options + ); + }); + + it(`${description}should render an ER diagram with relationships with unicode text without htmlLabels`, () => { + imgSnapshotTest( + ` + erDiagram + person[๐] { + string *first*Name + string _**last**Name_ + } + a["*Customer Account*"] { + **string** ema*i*l + } + person ||--o| a : __hแบฝ๐__ + `, + { ...options, htmlLabels: false } + ); + }); + + it(`${description}should render an ER diagram with TB direction`, () => { + imgSnapshotTest( + ` + erDiagram + direction TB + CAR ||--|{ NAMED-DRIVER : allows + PERSON ||..o{ NAMED-DRIVER : is + `, + options + ); + }); + + it(`${description}should render an ER diagram with BT direction`, () => { + imgSnapshotTest( + ` + erDiagram + direction BT + CAR ||--|{ NAMED-DRIVER : allows + PERSON ||..o{ NAMED-DRIVER : is + `, + options + ); + }); + + it(`${description}should render an ER diagram with LR direction`, () => { + imgSnapshotTest( + ` + erDiagram + direction LR + CAR ||--|{ NAMED-DRIVER : allows + PERSON ||..o{ NAMED-DRIVER : is + `, + options + ); + }); + + it(`${description}should render an ER diagram with RL direction`, () => { + imgSnapshotTest( + ` + erDiagram + direction RL + CAR ||--|{ NAMED-DRIVER : allows + PERSON ||..o{ NAMED-DRIVER : is + `, + options + ); + }); + + it(`${description}should render entities with styles applied from style statement`, () => { + imgSnapshotTest( + ` + erDiagram + c[CUSTOMER] + p[PERSON] + style c,p fill:#f9f,stroke:blue, color:grey, font-size:24px,font-weight:bold + `, + options + ); + }); + + it(`${description}should render entities with styles applied from style statement without htmlLabels`, () => { + imgSnapshotTest( + ` + erDiagram + c[CUSTOMER] + p[PERSON] + style c,p fill:#f9f,stroke:blue, color:grey, font-size:24px,font-weight:bold + `, + { ...options, htmlLabels: false } + ); + }); + + it(`${description}should render entities with styles applied from class statement`, () => { + imgSnapshotTest( + ` + erDiagram + c[CUSTOMER] + p[PERSON]:::blue + classDef bold font-size:24px, font-weight: bold + classDef blue stroke:lightblue, color: #0000FF + class c,p bold + `, + options + ); + }); + + it(`${description}should render entities with styles applied from class statement without htmlLabels`, () => { + imgSnapshotTest( + ` + erDiagram + c[CUSTOMER] + p[PERSON]:::blue + classDef bold font-size:24px, font-weight: bold + classDef blue stroke:lightblue, color: #0000FF + class c,p bold + `, + { ...options, htmlLabels: false } + ); + }); + + it(`${description}should render entities with styles applied from the default class and other styles`, () => { + imgSnapshotTest( + ` + erDiagram + c[CUSTOMER] + p[PERSON]:::blue + classDef blue stroke:lightblue, color: #0000FF + classDef default fill:pink + style c color:green + `, + { ...options } + ); + }); + }); +}); diff --git a/cypress/integration/rendering/erDiagram.spec.js b/cypress/integration/rendering/erDiagram.spec.js index aad9b1cf7..cbfec8218 100644 --- a/cypress/integration/rendering/erDiagram.spec.js +++ b/cypress/integration/rendering/erDiagram.spec.js @@ -109,8 +109,8 @@ describe('Entity Relationship Diagram', () => { const style = svg.attr('style'); expect(style).to.match(/^max-width: [\d.]+px;$/); const maxWidthValue = parseFloat(style.match(/[\d.]+/g).join('')); - // use within because the absolute value can be slightly different depending on the environment ยฑ5% - expect(maxWidthValue).to.be.within(140 * 0.95, 140 * 1.05); + // use within because the absolute value can be slightly different depending on the environment ยฑ6% + expect(maxWidthValue).to.be.within(140 * 0.96, 140 * 1.06); }); }); @@ -125,8 +125,8 @@ describe('Entity Relationship Diagram', () => { ); cy.get('svg').should((svg) => { const width = parseFloat(svg.attr('width')); - // use within because the absolute value can be slightly different depending on the environment ยฑ5% - expect(width).to.be.within(140 * 0.95, 140 * 1.05); + // use within because the absolute value can be slightly different depending on the environment ยฑ6% + expect(width).to.be.within(140 * 0.96, 140 * 1.06); // expect(svg).to.have.attr('height', '465'); expect(svg).to.not.have.attr('style'); }); diff --git a/cypress/integration/rendering/flowchart.spec.js b/cypress/integration/rendering/flowchart.spec.js index d3a83ae5f..7b986cd2f 100644 --- a/cypress/integration/rendering/flowchart.spec.js +++ b/cypress/integration/rendering/flowchart.spec.js @@ -895,7 +895,7 @@ graph TD imgSnapshotTest( ` graph TD - classDef default fill:#a34,stroke:#000,stroke-width:4px,color:#fff + classDef default fill:#a34,stroke:#000,stroke-width:4px,color:#fff hello --> default `, { htmlLabels: true, flowchart: { htmlLabels: true }, securityLevel: 'loose' } @@ -917,4 +917,21 @@ graph TD } ); }); + it('#6369: edge color should affect arrow head', () => { + imgSnapshotTest( + ` + flowchart LR + A --> B + A --> C + C --> D + + linkStyle 0 stroke:#D50000 + linkStyle 2 stroke:#D50000 + `, + { + flowchart: { htmlLabels: true }, + securityLevel: 'loose', + } + ); + }); }); diff --git a/cypress/integration/rendering/journey.spec.js b/cypress/integration/rendering/journey.spec.js index d8bef6d1b..2d6c14c9d 100644 --- a/cypress/integration/rendering/journey.spec.js +++ b/cypress/integration/rendering/journey.spec.js @@ -63,4 +63,165 @@ section Checkout from website { journey: { useMaxWidth: false } } ); }); + + it('should initialize with a left margin of 150px for user journeys', () => { + renderGraph( + ` + --- + config: + journey: + maxLabelWidth: 320 + --- + journey + title User Journey Example + section Onboarding + Sign Up: 5: + Browse Features: 3: + Use Core Functionality: 4: + section Engagement + Browse Features: 3 + Use Core Functionality: 4 + `, + { journey: { useMaxWidth: true } } + ); + + let diagramStartX; + + cy.contains('foreignobject', 'Sign Up').then(($diagram) => { + diagramStartX = parseFloat($diagram.attr('x')); + expect(diagramStartX).to.be.closeTo(150, 2); + }); + }); + + it('should maintain sufficient space between legend and diagram when legend labels are longer', () => { + renderGraph( + `journey + title Web hook life cycle + section Darkoob + Make preBuilt:5: Darkoob user + register slug : 5: Darkoob userf deliberately increasing the size of this label to check if distance between legend and diagram is maintained + Map slug to a Prebuilt Job:5: Darkoob user + section External Service + set Darkoob slug as hook for an Event : 5 : admin Exjjjnjjjj qwerty + listen to the events : 5 : External Service + call darkoob endpoint : 5 : External Service + section Darkoob + check for inputs : 5 : DarkoobAPI + run the prebuilt job : 5 : DarkoobAPI + `, + { journey: { useMaxWidth: true } } + ); + + let LabelEndX, diagramStartX; + + // Get right edge of the legend + cy.contains('tspan', 'Darkoob userf').then((textBox) => { + const bbox = textBox[0].getBBox(); + LabelEndX = bbox.x + bbox.width; + }); + + // Get left edge of the diagram + cy.contains('foreignobject', 'Make preBuilt').then((rect) => { + diagramStartX = parseFloat(rect.attr('x')); + }); + + // Assert right edge of the diagram is greater than or equal to the right edge of the label + cy.then(() => { + expect(diagramStartX).to.be.gte(LabelEndX); + }); + }); + + it('should wrap a single long word with hyphenation', () => { + renderGraph( + ` + --- + config: + journey: + maxLabelWidth: 100 + --- + journey + title Long Word Test + section Test + VeryLongWord: 5: Supercalifragilisticexpialidocious + `, + { journey: { useMaxWidth: true } } + ); + + // Verify that the line ends with a hyphen, indicating proper hyphenation for words exceeding maxLabelWidth. + cy.get('tspan').then((tspans) => { + const hasHyphen = [...tspans].some((t) => t.textContent.trim().endsWith('-')); + return expect(hasHyphen).to.be.true; + }); + }); + + it('should wrap text on whitespace without adding hyphens', () => { + renderGraph( + ` + --- + config: + journey: + maxLabelWidth: 200 + --- + journey + title Whitespace Test + section Test + TextWithSpaces: 5: Gustavo Fring is played by Giancarlo Esposito and is a character in Breaking Bad. + `, + { journey: { useMaxWidth: true } } + ); + + // Verify that none of the text spans end with a hyphen. + cy.get('tspan').each(($el) => { + const text = $el.text(); + expect(text.trim()).not.to.match(/-$/); + }); + }); + + it('should wrap long labels into multiple lines, keep them under max width, and maintain margins', () => { + renderGraph( + ` + --- + config: + journey: + maxLabelWidth: 320 + --- + journey + title User Journey Example + section Onboarding + Sign Up: 5: This is a long label that will be split into multiple lines to test the wrapping functionality + Browse Features: 3: This is another long label that will be split into multiple lines to test the wrapping functionality + Use Core Functionality: 4: This is yet another long label that will be split into multiple lines to test the wrapping functionality + section Engagement + Browse Features: 3 + Use Core Functionality: 4 + `, + { journey: { useMaxWidth: true } } + ); + + let diagramStartX, maxLineWidth; + + // Get the diagram's left edge x-coordinate + cy.contains('foreignobject', 'Sign Up') + .then(($diagram) => { + diagramStartX = parseFloat($diagram.attr('x')); + }) + .then(() => { + cy.get('text.legend').then(($lines) => { + // Check that there are multiple lines + expect($lines.length).to.be.equal(9); + + // Check that all lines are under the maxLabelWidth + $lines.each((index, el) => { + const bbox = el.getBBox(); + expect(bbox.width).to.be.lte(320); + maxLineWidth = Math.max(maxLineWidth || 0, bbox.width); + }); + + /** The expected margin between the diagram and the legend is 150px, as defined by + * conf.leftMargin in user-journey-config.js + */ + expect(diagramStartX - maxLineWidth).to.be.closeTo(150, 2); + }); + }); + }); }); diff --git a/cypress/integration/rendering/radar.spec.js b/cypress/integration/rendering/radar.spec.js new file mode 100644 index 000000000..b0bc3f6e0 --- /dev/null +++ b/cypress/integration/rendering/radar.spec.js @@ -0,0 +1,79 @@ +import { imgSnapshotTest } from '../../helpers/util'; + +describe('radar structure', () => { + it('should render a simple radar diagram', () => { + imgSnapshotTest( + `radar-beta + title Best Radar Ever + axis A, B, C + curve c1{1, 2, 3} + ` + ); + }); + + it('should render a radar diagram with multiple curves', () => { + imgSnapshotTest( + `radar-beta + title Best Radar Ever + axis A, B, C + curve c1{1, 2, 3} + curve c2{2, 3, 1} + ` + ); + }); + + it('should render a complex radar diagram', () => { + imgSnapshotTest( + `radar-beta + title My favorite ninjas + axis Agility, Speed, Strength + axis Stam["Stamina"] , Intel["Intelligence"] + + curve Ninja1["Naruto Uzumaki"]{ + Agility 2, Speed 2, + Strength 3, Stam 5, + Intel 0 + } + curve Ninja2["Sasuke"]{2, 3, 4, 1, 5} + curve Ninja3 {3, 2, 1, 5, 4} + + showLegend true + ticks 3 + max 8 + min 0 + graticule polygon + ` + ); + cy.get('svg').should((svg) => { + expect(svg).to.have.length(1); + }); + }); + + it('should render radar diagram with config override', () => { + imgSnapshotTest( + `radar-beta + title Best Radar Ever + axis A,B,C + curve mycurve{1,2,3}`, + { radar: { marginTop: 100, axisScaleFactor: 0.5 } } + ); + }); + + it('should parse radar diagram with theme override', () => { + imgSnapshotTest( + `radar-beta + axis A,B,C + curve mycurve{1,2,3}`, + { theme: 'base', themeVariables: { fontSize: 80, cScale0: '#FF0000' } } + ); + }); + + it('should handle radar diagram with radar style override', () => { + imgSnapshotTest( + `radar-beta + axis A,B,C + curve mycurve{1,2,3}`, + { theme: 'base', themeVariables: { radar: { axisColor: '#FF0000' } } } + ); + }); +}); diff --git a/cypress/integration/rendering/requirementDiagram-unified.spec.js b/cypress/integration/rendering/requirementDiagram-unified.spec.js new file mode 100644 index 000000000..48b1a0d61 --- /dev/null +++ b/cypress/integration/rendering/requirementDiagram-unified.spec.js @@ -0,0 +1,703 @@ +import { imgSnapshotTest, renderGraph } from '../../helpers/util.ts'; + +const testOptions = [ + { description: '', options: { logLevel: 1 } }, + { description: 'ELK: ', options: { logLevel: 1, layout: 'elk' } }, + { description: 'HD: ', options: { logLevel: 1, look: 'handDrawn' } }, +]; + +describe('Requirement Diagram Unified', () => { + testOptions.forEach(({ description, options }) => { + it(`${description}should render a simple Requirement diagram`, () => { + imgSnapshotTest( + ` + requirementDiagram + requirement test_req { + id: 1 + text: the test text. + risk: high + verifymethod: test + } + + element test_entity { + type: simulation + } + + test_entity - satisfies -> test_req + `, + options + ); + }); + + it(`${description}should render a simple Requirement diagram without htmlLabels`, () => { + imgSnapshotTest( + ` + requirementDiagram + requirement test_req { + id: 1 + text: the test text. + risk: high + verifymethod: test + } + + element test_entity { + type: simulation + } + + test_entity - satisfies -> test_req + `, + { ...options, htmlLabels: false } + ); + }); + + it(`${description}should render a not-so-simple Requirement diagram`, () => { + imgSnapshotTest( + ` + requirementDiagram + + requirement test_req { + id: 1 + text: the test text. + risk: high + verifymethod: test + } + + functionalRequirement test_req2 { + id: 1.1 + text: the second test text. + risk: low + verifymethod: inspection + } + + performanceRequirement test_req3 { + id: 1.2 + text: the third test text. + risk: medium + verifymethod: demonstration + } + + interfaceRequirement test_req4 { + id: 1.2.1 + text: the fourth test text. + risk: medium + verifymethod: analysis + } + + physicalRequirement test_req5 { + id: 1.2.2 + text: the fifth test text. + risk: medium + verifymethod: analysis + } + + designConstraint test_req6 { + id: 1.2.3 + text: the sixth test text. + risk: medium + verifymethod: analysis + } + + element test_entity { + type: simulation + } + + element test_entity2 { + type: word doc + docRef: reqs/test_entity + } + + element test_entity3 { + type: "test suite" + docRef: github.com/all_the_tests + } + + + test_entity - satisfies -> test_req2 + test_req - traces -> test_req2 + test_req - contains -> test_req3 + test_req3 - contains -> test_req4 + test_req4 - derives -> test_req5 + test_req5 - refines -> test_req6 + test_entity3 - verifies -> test_req5 + test_req <- copies - test_entity2 + `, + options + ); + }); + + it(`${description}should render a not-so-simple Requirement diagram without htmlLabels`, () => { + imgSnapshotTest( + ` + requirementDiagram + + requirement test_req { + id: 1 + text: the test text. + risk: high + verifymethod: test + } + + functionalRequirement test_req2 { + id: 1.1 + text: the second test text. + risk: low + verifymethod: inspection + } + + performanceRequirement test_req3 { + id: 1.2 + text: the third test text. + risk: medium + verifymethod: demonstration + } + + interfaceRequirement test_req4 { + id: 1.2.1 + text: the fourth test text. + risk: medium + verifymethod: analysis + } + + physicalRequirement test_req5 { + id: 1.2.2 + text: the fifth test text. + risk: medium + verifymethod: analysis + } + + designConstraint test_req6 { + id: 1.2.3 + text: the sixth test text. + risk: medium + verifymethod: analysis + } + + element test_entity { + type: simulation + } + + element test_entity2 { + type: word doc + docRef: reqs/test_entity + } + + element test_entity3 { + type: "test suite" + docRef: github.com/all_the_tests + } + + + test_entity - satisfies -> test_req2 + test_req - traces -> test_req2 + test_req - contains -> test_req3 + test_req3 - contains -> test_req4 + test_req4 - derives -> test_req5 + test_req5 - refines -> test_req6 + test_entity3 - verifies -> test_req5 + test_req <- copies - test_entity2 + `, + { ...options, htmlLabels: false } + ); + }); + + it(`${description}should render multiple Requirement diagrams`, () => { + imgSnapshotTest( + [ + ` + requirementDiagram + + requirement test_req { + id: 1 + text: the test text. + risk: high + verifymethod: test + } + + element test_entity { + type: simulation + } + + test_entity - satisfies -> test_req + `, + ` + requirementDiagram + + requirement test_req { + id: 1 + text: the test text. + risk: high + verifymethod: test + } + + element test_entity { + type: simulation + } + + test_entity - satisfies -> test_req + `, + ], + options + ); + }); + + it(`${description}should render a Requirement diagram with empty information`, () => { + imgSnapshotTest( + ` + requirementDiagram + requirement test_req { + } + element test_entity { + } + `, + options + ); + }); + + it(`${description}should render requirements and elements with and without information`, () => { + renderGraph( + ` + requirementDiagram + requirement test_req { + id: 1 + text: the test text. + risk: high + verifymethod: test + } + element test_entity { + } + `, + options + ); + }); + + it(`${description}should render requirements and elements with long and short text`, () => { + renderGraph( + ` + requirementDiagram + requirement test_req { + id: 1 + text: the test text that is long and takes up a lot of space. + risk: high + verifymethod: test + } + element test_entity_name_that_is_extra_long { + } + `, + options + ); + }); + + it(`${description}should render requirements and elements with long and short text without htmlLabels`, () => { + renderGraph( + ` + requirementDiagram + requirement test_req { + id: 1 + text: the test text that is long and takes up a lot of space. + risk: high + verifymethod: test + } + element test_entity_name_that_is_extra_long { + } + `, + { ...options, htmlLabels: false } + ); + }); + + it(`${description}should render requirements and elements with quoted text for spaces`, () => { + renderGraph( + ` + requirementDiagram + requirement "test req name with spaces" { + id: 1 + text: the test text that is long and takes up a lot of space. + risk: high + verifymethod: test + } + element "test entity name that is extra long with spaces" { + } + `, + options + ); + }); + + it(`${description}should render requirements and elements with markdown text`, () => { + renderGraph( + ` + requirementDiagram + requirement "__my bolded name__" { + id: 1 + text: "**Bolded text** _italicized text_" + risk: high + verifymethod: test + } + element "*my italicized name*" { + type: "**Bolded type** _italicized type_" + docref: "*Italicized* __Bolded__" + } + `, + options + ); + }); + + it(`${description}should render requirements and elements with markdown text without htmlLabels`, () => { + renderGraph( + ` + requirementDiagram + requirement "__my bolded name__" { + id: 1 + text: "**Bolded text** _italicized text_" + risk: high + verifymethod: test + } + element "*my italicized name*" { + type: "**Bolded type** _italicized type_" + docref: "*Italicized* __Bolded__" + } + `, + { ...options, htmlLabels: false } + ); + }); + + it(`${description}should render a simple Requirement diagram with a title`, () => { + imgSnapshotTest( + `--- + title: simple Requirement diagram + --- + requirementDiagram + + requirement test_req { + id: 1 + text: the test text. + risk: high + verifymethod: test + } + + element test_entity { + type: simulation + } + + test_entity - satisfies -> test_req + `, + options + ); + }); + + it(`${description}should render a Requirement diagram with TB direction`, () => { + imgSnapshotTest( + ` + requirementDiagram + direction TB + + requirement test_req { + id: 1 + text: the test text. + risk: high + verifymethod: test + } + + element test_entity { + type: simulation + } + + test_entity - satisfies -> test_req + `, + options + ); + }); + + it(`${description}should render a Requirement diagram with BT direction`, () => { + imgSnapshotTest( + ` + requirementDiagram + direction BT + + requirement test_req { + id: 1 + text: the test text. + risk: high + verifymethod: test + } + + element test_entity { + type: simulation + } + + test_entity - satisfies -> test_req + `, + options + ); + }); + + it(`${description}should render a Requirement diagram with LR direction`, () => { + imgSnapshotTest( + ` + requirementDiagram + direction LR + + requirement test_req { + id: 1 + text: the test text. + risk: high + verifymethod: test + } + + element test_entity { + type: simulation + } + + test_entity - satisfies -> test_req + `, + options + ); + }); + + it(`${description}should render a Requirement diagram with RL direction`, () => { + imgSnapshotTest( + ` + requirementDiagram + direction RL + + requirement test_req { + id: 1 + text: the test text. + risk: high + verifymethod: test + } + + element test_entity { + type: simulation + } + + test_entity - satisfies -> test_req + `, + options + ); + }); + + it(`${description}should render requirements and elements with styles applied from style statement`, () => { + imgSnapshotTest( + ` + requirementDiagram + + requirement test_req { + id: 1 + text: the test text. + risk: high + verifymethod: test + } + + element test_entity { + type: simulation + } + + test_entity - satisfies -> test_req + + style test_req,test_entity fill:#f9f,stroke:blue, color:grey, font-weight:bold + `, + options + ); + }); + + it(`${description}should render requirements and elements with styles applied from style statement without htmlLabels`, () => { + imgSnapshotTest( + ` + requirementDiagram + + requirement test_req { + id: 1 + text: the test text. + risk: high + verifymethod: test + } + + element test_entity { + type: simulation + } + + test_entity - satisfies -> test_req + + style test_req,test_entity fill:#f9f,stroke:blue, color:grey, font-weight:bold + `, + { ...options, htmlLabels: false } + ); + }); + + it(`${description}should render requirements and elements with styles applied from class statement`, () => { + imgSnapshotTest( + ` +requirementDiagram + + requirement test_req { + id: 1 + text: the test text. + risk: high + verifymethod: test + } + + element test_entity { + type: simulation + } + + test_entity - satisfies -> test_req + classDef bold font-weight: bold + classDef blue stroke:lightblue, color: #0000FF + class test_entity bold + class test_req blue, bold + `, + options + ); + }); + + it(`${description}should render requirements and elements with styles applied from class statement without htmlLabels`, () => { + imgSnapshotTest( + ` + requirementDiagram + + requirement test_req { + id: 1 + text: the test text. + risk: high + verifymethod: test + } + + element test_entity { + type: simulation + } + + test_entity - satisfies -> test_req + classDef bold font-weight: bold + classDef blue stroke:lightblue, color: #0000FF + class test_entity bold + class test_req blue, bold + `, + { ...options, htmlLabels: false } + ); + }); + + it(`${description}should render requirements and elements with styles applied from classes with shorthand syntax`, () => { + imgSnapshotTest( + ` + requirementDiagram + + requirement test_req:::blue { + id: 1 + text: the test text. + risk: high + verifymethod: test + } + + element test_entity { + type: simulation + } + + test_entity - satisfies -> test_req + classDef bold font-weight: bold + classDef blue stroke:lightblue, color: #0000FF + test_entity:::bold + `, + options + ); + }); + + it(`${description}should render requirements and elements with styles applied from classes with shorthand syntax without htmlLabels`, () => { + imgSnapshotTest( + ` + requirementDiagram + + requirement test_req:::blue { + id: 1 + text: the test text. + risk: high + verifymethod: test + } + + element test_entity { + type: simulation + } + + test_entity - satisfies -> test_req + classDef bold font-weight: bold + classDef blue stroke:lightblue, color: #0000FF + test_entity:::bold + `, + { ...options, htmlLabels: false } + ); + }); + + it(`${description}should render requirements and elements with styles applied from the default class and other styles`, () => { + imgSnapshotTest( + ` +requirementDiagram + + requirement test_req:::blue { + id: 1 + text: the test text. + risk: high + verifymethod: test + } + + element test_entity { + type: simulation + } + + test_entity - satisfies -> test_req + classDef blue stroke:lightblue, color:blue + classDef default fill:pink + style test_entity color:green + `, + options + ); + }); + + it(`${description}should render requirements and elements with styles applied from the default class and other styles without htmlLabels`, () => { + imgSnapshotTest( + ` + requirementDiagram + + requirement test_req:::blue { + id: 1 + text: the test text. + risk: high + verifymethod: test + } + + element test_entity { + type: simulation + } + + test_entity - satisfies -> test_req + classDef blue stroke:lightblue, color:blue + classDef default fill:pink + style test_entity color:green + `, + { ...options, htmlLabels: false } + ); + }); + + it(`${description}should render a Requirement diagram with a theme`, () => { + imgSnapshotTest( + ` +--- + theme: forest +--- + requirementDiagram + + requirement test_req:::blue { + id: 1 + text: the test text. + risk: high + verifymethod: test + } + + element test_entity { + type: simulation + } + + test_entity - satisfies -> test_req + `, + options + ); + }); + }); +}); diff --git a/cypress/platform/ashish2.html b/cypress/platform/ashish2.html index f9132d2e2..351dcabc2 100644 --- a/cypress/platform/ashish2.html +++ b/cypress/platform/ashish2.html @@ -4,7 +4,7 @@ - + diff --git a/cypress/platform/xss10.html b/cypress/platform/xss10.html index 91b0b94ac..9814fed41 100644 --- a/cypress/platform/xss10.html +++ b/cypress/platform/xss10.html @@ -4,7 +4,7 @@ +