mirror of
https://github.com/mermaid-js/mermaid.git
synced 2025-08-17 23:39:26 +02:00
41e3d2449a
Some optional description over here if you need to add more info on-behalf-of: @Mermaid-Chart <hello@mermaidchart.com>
89 lines
3.2 KiB
TypeScript
89 lines
3.2 KiB
TypeScript
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** </br>and <strong>strong</strong>
|
|
Note over Bob,Alice: Mixed <em>HTML</em> 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** </br>and <strong>strong</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);
|
|
});
|
|
});
|