From 41e3d2449afa22b2d2c3780df4120fcb0d4d15f2 Mon Sep 17 00:00:00 2001 From: omkarht Date: Thu, 14 Aug 2025 12:49:43 +0530 Subject: [PATCH] test: add test cases for image and icon support Some optional description over here if you need to add more info on-behalf-of: @Mermaid-Chart --- .../rendering/sequenceDiagram-icon.spec.ts | 112 ++++++++++++++++++ .../rendering/sequenceDiagram-image.spec.ts | 88 ++++++++++++++ .../diagrams/sequence/sequenceDiagram.spec.js | 69 +++++++++++ 3 files changed, 269 insertions(+) create mode 100644 cypress/integration/rendering/sequenceDiagram-icon.spec.ts create mode 100644 cypress/integration/rendering/sequenceDiagram-image.spec.ts diff --git a/cypress/integration/rendering/sequenceDiagram-icon.spec.ts b/cypress/integration/rendering/sequenceDiagram-icon.spec.ts new file mode 100644 index 000000000..7e628428d --- /dev/null +++ b/cypress/integration/rendering/sequenceDiagram-icon.spec.ts @@ -0,0 +1,112 @@ +import { imgSnapshotTest } from '../../helpers/util'; + +const looks = ['classic'] as const; + +looks.forEach((look) => { + describe(`SequenceDiagram icon participants in ${look} look`, () => { + it(`single participant with icon`, () => { + const diagram = `sequenceDiagram +participant Bob@{ type: "icon", icon: "fa:bell" } +Note over Bob: Icon participant`; + imgSnapshotTest(diagram, { look }); + }); + + it(`two participants, one icon and one normal`, () => { + const diagram = `sequenceDiagram +participant Bob@{ type: "icon", icon: "fa:bell" } +participant Alice +Bob->>Alice: Hello`; + imgSnapshotTest(diagram, { look }); + }); + + it(`two icon participants`, () => { + const diagram = `sequenceDiagram +participant Bob@{ type: "icon", icon: "fa:bell" } +participant Alice@{ type: "icon", icon: "fa:user" } +Bob->>Alice: Hello +Alice-->>Bob: Hi`; + imgSnapshotTest(diagram, { look }); + }); + + it(`with markdown htmlLabels:true content`, () => { + // html/markdown in messages/notes (participants themselves don't support label/form/w/h) + const diagram = `sequenceDiagram +participant Bob@{ type: "icon", icon: "fa:bell" } +participant Alice +Bob->>Alice: This is **bold**
and strong +Note over Bob,Alice: Mixed HTML and **markdown**`; + imgSnapshotTest(diagram, { look }); + }); + + it(`with markdown htmlLabels:false content`, () => { + const diagram = `sequenceDiagram +participant Bob@{ type: "icon", icon: "fa:bell" } +participant Alice +Bob->>Alice: This is **bold**
and strong`; + imgSnapshotTest(diagram, { + look, + htmlLabels: false, + flowchart: { htmlLabels: false }, + }); + }); + + it(`with styles applied to participant`, () => { + // style by participant id + const diagram = ` + sequenceDiagram + participant Bob@{ type: "icon", icon: "fa:bell" } + participant Alice + Bob->>Alice: Styled participant +`; + imgSnapshotTest(diagram, { look }); + }); + + it(`with classDef and class application`, () => { + const diagram = ` + sequenceDiagram + participant Bob@{ type: "icon", icon: "fa:bell" } + participant Alice + Bob->>Alice: Classed participant +`; + imgSnapshotTest(diagram, { look }); + }); + }); +}); + +// Colored emoji icon tests (analogous to the flowchart colored icon tests), no direction line. +describe('SequenceDiagram colored icon participant', () => { + it('colored emoji icon without styles', () => { + const icon = 'fluent-emoji:tropical-fish'; + const diagram = ` + sequenceDiagram + participant Bob@{ type: "icon", icon: "${icon}" } + Note over Bob: colored emoji icon +`; + imgSnapshotTest(diagram); + }); + + it('colored emoji icon with styles', () => { + const icon = 'fluent-emoji:tropical-fish'; + const diagram = ` + sequenceDiagram + participant Bob@{ type: "icon", icon: "${icon}" } +`; + imgSnapshotTest(diagram); + }); +}); + +// Mixed scenario: multiple interactions, still no direction line. +describe('SequenceDiagram icon participant with multiple interactions', () => { + const icon = 'fa:bell-slash'; + it('icon participant interacts with two normal participants', () => { + const diagram = `sequenceDiagram +participant Bob@{ type: "icon", icon: "${icon}" } +participant Alice +participant Carol +Bob->>Alice: Ping +Alice-->>Bob: Pong +Bob->>Carol: Notify +Note right of Bob: Icon side note`; + imgSnapshotTest(diagram); + }); +}); diff --git a/cypress/integration/rendering/sequenceDiagram-image.spec.ts b/cypress/integration/rendering/sequenceDiagram-image.spec.ts new file mode 100644 index 000000000..7e5e8c0d9 --- /dev/null +++ b/cypress/integration/rendering/sequenceDiagram-image.spec.ts @@ -0,0 +1,88 @@ +import { imgSnapshotTest } from '../../helpers/util'; + +const looks = ['classic'] as const; + +looks.forEach((look) => { + describe(`SequenceDiagram image participants in ${look} look`, () => { + it(`single participant with image`, () => { + const diagram = `sequenceDiagram +participant Bob@{ type: "image", "image": "https://cdn.pixabay.com/photo/2020/02/22/18/49/paper-4871356_1280.jpg" } +Note over Bob: Image participant`; + imgSnapshotTest(diagram, { look }); + }); + + it(`two participants, one image and one normal`, () => { + const diagram = `sequenceDiagram +participant Bob@{ type: "image", "image": "https://cdn.pixabay.com/photo/2020/02/22/18/49/paper-4871356_1280.jpg" } +participant Alice +Bob->>Alice: Hello`; + imgSnapshotTest(diagram, { look }); + }); + + it(`two image participants`, () => { + const diagram = `sequenceDiagram +participant Bob@{ type: "image", "image": "https://cdn.pixabay.com/photo/2020/02/22/18/49/paper-4871356_1280.jpg" } +participant Alice@{ type: "image", "image": "https://cdn.pixabay.com/photo/2020/02/22/18/49/paper-4871356_1280.jpg" } +Bob->>Alice: Hello +Alice-->>Bob: Hi`; + imgSnapshotTest(diagram, { look }); + }); + + it(`with markdown htmlLabels:true content`, () => { + const diagram = `sequenceDiagram +participant Bob@{ type: "image", "image": "https://cdn.pixabay.com/photo/2020/02/22/18/49/paper-4871356_1280.jpg" } +participant Alice +Bob->>Alice: This is **bold**
and strong +Note over Bob,Alice: Mixed HTML and **markdown**`; + imgSnapshotTest(diagram, { look }); + }); + + it(`with markdown htmlLabels:false content`, () => { + const diagram = `sequenceDiagram +participant Bob@{ type: "image", "image": "https://cdn.pixabay.com/photo/2020/02/22/18/49/paper-4871356_1280.jpg" } +participant Alice +Bob->>Alice: This is **bold**
and strong`; + imgSnapshotTest(diagram, { + look, + htmlLabels: false, + flowchart: { htmlLabels: false }, + }); + }); + + it(`with styles applied to participant`, () => { + const diagram = ` + sequenceDiagram + participant Bob@{ type: "image", "image": "https://cdn.pixabay.com/photo/2020/02/22/18/49/paper-4871356_1280.jpg" } + participant Alice + Bob->>Alice: Styled participant +`; + imgSnapshotTest(diagram, { look }); + }); + + it(`with classDef and class application`, () => { + const diagram = ` + sequenceDiagram + participant Bob@{ type: "image", "image": "https://cdn.pixabay.com/photo/2020/02/22/18/49/paper-4871356_1280.jpg" } + participant Alice + Bob->>Alice: Classed participant +`; + imgSnapshotTest(diagram, { look }); + }); + }); +}); + +// Mixed scenario: multiple interactions, still no direction line. +describe('SequenceDiagram image participant with multiple interactions', () => { + const imageUrl = 'https://cdn.pixabay.com/photo/2020/02/22/18/49/paper-4871356_1280.jpg'; + it('image participant interacts with two normal participants', () => { + const diagram = `sequenceDiagram +participant Bob@{ type: "image", "image": "${imageUrl}" } +participant Alice +participant Carol +Bob->>Alice: Ping +Alice-->>Bob: Pong +Bob->>Carol: Notify +Note right of Bob: Image side note`; + imgSnapshotTest(diagram); + }); +}); diff --git a/packages/mermaid/src/diagrams/sequence/sequenceDiagram.spec.js b/packages/mermaid/src/diagrams/sequence/sequenceDiagram.spec.js index 61738ae5e..c8a5a3190 100644 --- a/packages/mermaid/src/diagrams/sequence/sequenceDiagram.spec.js +++ b/packages/mermaid/src/diagrams/sequence/sequenceDiagram.spec.js @@ -2216,4 +2216,73 @@ Bob->>Alice:Got it! expect(actors.get('E').description).toBe('E'); }); }); + + describe('image and icon participant parsing', () => { + it('should parse image participant with image URL', async () => { + const diagram = await Diagram.fromText(` + sequenceDiagram + participant Bob@{ "type": "image", "image": "https://cdn.pixabay.com/photo/2020/02/22/18/49/paper-4871356_1280.jpg" } + Bob->>Bob: test + `); + const actors = diagram.db.getActors(); + expect(actors.get('Bob').type).toBe('image'); + expect(actors.get('Bob').doc.image).toBe( + 'https://cdn.pixabay.com/photo/2020/02/22/18/49/paper-4871356_1280.jpg' + ); + }); + + it('should parse icon participant with icon name', async () => { + const diagram = await Diagram.fromText(` + sequenceDiagram + participant Alice@{ "type": "icon", "icon": "fa:bell" } + Alice->>Alice: test + `); + const actors = diagram.db.getActors(); + expect(actors.get('Alice').type).toBe('icon'); + expect(actors.get('Alice').doc.icon).toBe('fa:bell'); + }); + + it('should parse two image participants', async () => { + const diagram = await Diagram.fromText(` + sequenceDiagram + participant Bob@{ "type": "image", "image": "https://cdn.pixabay.com/photo/2020/02/22/18/49/paper-4871356_1280.jpg" } + participant Alice@{ "type": "image", "image": "https://cdn.pixabay.com/photo/2016/11/29/09/32/animal-1867121_1280.jpg" } + Bob->>Alice: Hello + Alice-->>Bob: Hi + `); + const actors = diagram.db.getActors(); + expect(actors.get('Bob').type).toBe('image'); + expect(actors.get('Bob').doc.image).toBe( + 'https://cdn.pixabay.com/photo/2020/02/22/18/49/paper-4871356_1280.jpg' + ); + expect(actors.get('Alice').type).toBe('image'); + expect(actors.get('Alice').doc.image).toBe( + 'https://cdn.pixabay.com/photo/2016/11/29/09/32/animal-1867121_1280.jpg' + ); + }); + + it('should parse image participant with normal participant', async () => { + const diagram = await Diagram.fromText(` + sequenceDiagram + participant Bob@{ "type": "image", "image": "https://cdn.pixabay.com/photo/2020/02/22/18/49/paper-4871356_1280.jpg" } + participant Alice + Bob->>Alice: Hello + `); + const actors = diagram.db.getActors(); + expect(actors.get('Bob').type).toBe('image'); + expect(actors.get('Alice').type).toBe('participant'); + }); + + it('should parse icon participant with normal participant', async () => { + const diagram = await Diagram.fromText(` + sequenceDiagram + participant Bob@{ "type": "icon", "icon": "fa:bell" } + participant Alice + Bob->>Alice: Hello + `); + const actors = diagram.db.getActors(); + expect(actors.get('Bob').type).toBe('icon'); + expect(actors.get('Alice').type).toBe('participant'); + }); + }); });