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); }); });