diff --git a/cypress/integration/rendering/sequenceDiagram-icon.spec.ts b/cypress/integration/rendering/sequenceDiagram-icon.spec.ts
index 7e628428d..f4c7ba9c8 100644
--- a/cypress/integration/rendering/sequenceDiagram-icon.spec.ts
+++ b/cypress/integration/rendering/sequenceDiagram-icon.spec.ts
@@ -5,44 +5,49 @@ 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`;
+ 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`;
+ 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`;
+ 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**`;
+ 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`;
+ const diagram = `
+ sequenceDiagram
+ participant Bob@{ type: "icon", icon: "fa:bell" }
+ participant Alice
+ Bob->>Alice: This is **bold** and strong`;
imgSnapshotTest(diagram, {
look,
htmlLabels: false,
@@ -99,14 +104,15 @@ describe('SequenceDiagram colored icon participant', () => {
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`;
+ 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
index 7e5e8c0d9..5759b9975 100644
--- a/cypress/integration/rendering/sequenceDiagram-image.spec.ts
+++ b/cypress/integration/rendering/sequenceDiagram-image.spec.ts
@@ -5,43 +5,48 @@ 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`;
+ 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`;
+ 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`;
+ 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**`;
+ 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`;
+ 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,
@@ -75,14 +80,15 @@ Bob->>Alice: This is **bold** and strong`;
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`;
+ 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);
});
});