Skip to content

Commit cdc9b06

Browse files
MatthboMatthbo
committed
Update tests & fix found issues
1 parent e2f1df0 commit cdc9b06

7 files changed

Lines changed: 113 additions & 114 deletions

File tree

‎projects/frank-config-layout/src/lib/graphics/svg-generator.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -111,7 +111,7 @@ function renderOriginalNode(node: PlacedNode, border: number, nodeTextFontSize:
111111
rx="5">
112112
</rect>
113113
</g>
114-
<g class="rect-text" text-anchor="middle" dominant-baseline="middle">${svgText}</g>
114+
<g class="rect-text" text-anchor="middle" dominant-baseline="middle">${svgText}</g>
115115
`;
116116
}
117117

‎projects/frank-config-layout/src/lib/mermaid2svg.spec.ts‎

Lines changed: 56 additions & 54 deletions
Original file line numberDiff line numberDiff line change
@@ -1,18 +1,18 @@
11
import { Mermaid2svgService } from './mermaid2svg';
22
import { getFactoryDimensions, SvgResult } from '../public_api';
33

4-
const input = `Start("My start"):::normal
5-
N1("Node 1"):::normal
6-
N2("Node 2"):::normal
7-
N3("Node 3"):::errorOutline
8-
End("End node"):::normal
9-
Start --> |success| N1
10-
Start --> |success| N2
11-
Start --> |success| N3
12-
N1 --> |failure| End
13-
N2 --> |success| End
14-
N1 --> |success| N2
15-
N3 --> |success| End`;
4+
const input = `Start('<text>My start</text>'):::normal
5+
N1('<text>Node 1</text>'):::normal
6+
N2('<text>Node 2</text>'):::normal
7+
N3('<text>Node 3</text>'):::errorOutline
8+
End('<text>End node</text>'):::normal
9+
Start --> |<text>success</text>| N1
10+
Start --> |<text>success</text>| N2
11+
Start --> |<text>success</text>| N3
12+
N1 --> |<text>failure</text>| End
13+
N2 --> |<text>success</text>| End
14+
N1 --> |<text>success</text>| N2
15+
N3 --> |<text>success</text>| End`;
1616

1717
// In the GUI, enter the above Mermaid text. Then look at the bottom
1818
// under the heading "Static SVG". If that image looks good, copy
@@ -24,7 +24,7 @@ N3 --> |success| End`;
2424
//
2525
const expectedSvg = `<svg class="svg" xmlns="http://www.w3.org/2000/svg"
2626
width="286" height="480" >
27-
<defs>
27+
<defs>
2828
<style>
2929
.rectangle {
3030
fill: transparent;
@@ -73,90 +73,90 @@ const expectedSvg = `<svg class="svg" xmlns="http://www.w3.org/2000/svg"
7373
<path d="M 0 0 L 4 2 L 0 4 z" />
7474
</marker>
7575
</defs>
76-
<g class="frank-flowchart-node-Start" transform="translate(78, 3)">
76+
<g class="frank-flowchart-node-Start" transform="translate(78, 3)">
7777
<rect class="rectangle"
7878
width="95"
7979
height="54"
8080
rx="5">
8181
</rect>
8282
</g>
83-
<g class="rect-text" text-anchor="middle" dominant-baseline="middle"><text data-html-node=#text x="125" y="30">My start</text></g>
84-
<g class="frank-flowchart-node-N1" transform="translate(87, 123)">
83+
<g class="rect-text" text-anchor="middle" dominant-baseline="middle"><text x="125" y="30">My start</text></g>
84+
<g class="frank-flowchart-node-N1" transform="translate(87, 123)">
8585
<rect class="rectangle"
8686
width="77"
8787
height="54"
8888
rx="5">
8989
</rect>
9090
</g>
91-
<g class="rect-text" text-anchor="middle" dominant-baseline="middle"><text data-html-node=#text x="125" y="150">Node 1</text></g>
92-
<g class="frank-flowchart-node-N3" transform="translate(194, 123)">
91+
<g class="rect-text" text-anchor="middle" dominant-baseline="middle"><text x="125" y="150">Node 1</text></g>
92+
<g class="frank-flowchart-node-N3" transform="translate(194, 123)">
9393
<rect class="rectangle errorOutline"
9494
width="77"
9595
height="54"
9696
rx="5">
9797
</rect>
9898
</g>
99-
<g class="rect-text" text-anchor="middle" dominant-baseline="middle"><text data-html-node=#text x="232" y="150">Node 3</text></g>
100-
<g class="frank-flowchart-node-N2" transform="translate(15, 243)">
99+
<g class="rect-text" text-anchor="middle" dominant-baseline="middle"><text x="232" y="150">Node 3</text></g>
100+
<g class="frank-flowchart-node-N2" transform="translate(15, 243)">
101101
<rect class="rectangle"
102102
width="77"
103103
height="54"
104104
rx="5">
105105
</rect>
106106
</g>
107-
<g class="rect-text" text-anchor="middle" dominant-baseline="middle"><text data-html-node=#text x="53" y="270">Node 2</text></g>
108-
<g class="frank-flowchart-node-End" transform="translate(90, 363)">
107+
<g class="rect-text" text-anchor="middle" dominant-baseline="middle"><text x="53" y="270">Node 2</text></g>
108+
<g class="frank-flowchart-node-End" transform="translate(90, 363)">
109109
<rect class="rectangle"
110110
width="95"
111111
height="54"
112112
rx="5">
113113
</rect>
114114
</g>
115-
<g class="rect-text" text-anchor="middle" dominant-baseline="middle"><text data-html-node=#text x="137" y="390">End node</text></g>
116-
<g class="frank-flowchart-edge-Start-N1">
115+
<g class="rect-text" text-anchor="middle" dominant-baseline="middle"><text x="137" y="390">End node</text></g>
116+
<g class="frank-flowchart-edge-Start-N1">
117117
<polyline class="line" points="125,56 125,123" marker-end="url(#arrow)"/>
118118
</g>
119-
<g class="frank-flowchart-edge-Start-intermediate1">
119+
<g class="frank-flowchart-edge-Start-intermediate1">
120120
<polyline class="line" points="101,56 42,150" />
121121
</g>
122-
<g class="frank-flowchart-edge-intermediate1-N2">
122+
<g class="frank-flowchart-edge-intermediate1-N2">
123123
<polyline class="line" points="42,150 34,243" marker-end="url(#arrow)"/>
124124
</g>
125-
<g class="frank-flowchart-edge-Start-N3">
125+
<g class="frank-flowchart-edge-Start-N3">
126126
<polyline class="line" points="148,56 232,123" marker-end="url(#arrow)"/>
127127
</g>
128-
<g class="frank-flowchart-edge-N1-intermediate2">
128+
<g class="frank-flowchart-edge-N1-intermediate2">
129129
<polyline class="line error" points="144,176 140,270" />
130130
</g>
131-
<g class="frank-flowchart-edge-intermediate2-End">
131+
<g class="frank-flowchart-edge-intermediate2-End">
132132
<polyline class="line error" points="140,270 137,363" marker-end="url(#arrow)"/>
133133
</g>
134-
<g class="frank-flowchart-edge-N2-End">
134+
<g class="frank-flowchart-edge-N2-End">
135135
<polyline class="line" points="53,296 113,363" marker-end="url(#arrow)"/>
136136
</g>
137-
<g class="frank-flowchart-edge-N1-N2">
137+
<g class="frank-flowchart-edge-N1-N2">
138138
<polyline class="line" points="106,176 72,243" marker-end="url(#arrow)"/>
139139
</g>
140-
<g class="frank-flowchart-edge-N3-intermediate3">
140+
<g class="frank-flowchart-edge-N3-intermediate3">
141141
<polyline class="line error" points="232,176 196,270" />
142142
</g>
143-
<g class="frank-flowchart-edge-intermediate3-End">
143+
<g class="frank-flowchart-edge-intermediate3-End">
144144
<polyline class="line error" points="196,270 160,363" marker-end="url(#arrow)"/>
145145
</g>
146-
<g text-anchor="middle" dominant-baseline="middle"><text class="label-text" x="82" y="86" font-size="10">success</text><text class="label-text" x="125" y="86" font-size="10">success</text><text class="label-text" x="186" y="86" font-size="10">success</text><text class="label-text" x="91" y="206" font-size="10">success</text><text class="label-text" x="143" y="206" font-size="10">failure</text><text class="label-text" x="221" y="206" font-size="10">success</text><text class="label-text" x="80" y="326" font-size="10">success</text></g></svg>`;
146+
<g text-anchor="middle" dominant-baseline="middle"><text class="label-text" x="82" y="86" font-size="10">success</text><text class="label-text" x="125" y="73" font-size="10">success</text><text class="label-text" x="202" y="99" font-size="10">success</text><text class="label-text" x="91" y="206" font-size="10">success</text><text class="label-text" x="143" y="193" font-size="10">failure</text><text class="label-text" x="221" y="206" font-size="10">success</text><text class="label-text" x="80" y="326" font-size="10">success</text></g></svg>`;
147147

148-
const inputMultiline = `Start("My start<br/>subtitle"):::normal
149-
N1("Node 1<br/>subtitle"):::normal
150-
N2("Node 2<br/>subtitle"):::normal
151-
N3("Node 3<br/>subtitle"):::errorOutline
152-
End("End node<br/>subtitle"):::normal
153-
Start --> |success<br/>other| N1
154-
Start --> |success<br/>other| N2
155-
Start --> |success| N3
156-
N1 --> |failure| End
157-
N2 --> |success| End
158-
N1 --> |success| N2
159-
N3 --> |success| End`;
148+
const inputMultiline = `Start('<text>My start</text><text>subtitle</text>'):::normal
149+
N1('<text>Node 1</text><text>subtitle</text>'):::normal
150+
N2('<text>Node 2</text><text>subtitle</text>'):::normal
151+
N3('<text>Node 3</text><text>subtitle</text>'):::errorOutline
152+
End('<text>End node</text><text>subtitle</text>'):::normal
153+
Start --> |<text>success</text><text>other</text>| N1
154+
Start --> |<text>success</text><text>other</text>| N2
155+
Start --> |<text>success</text>| N3
156+
N1 --> |<text>failure</text>| End
157+
N2 --> |<text>success</text>| End
158+
N1 --> |<text>success</text>| N2
159+
N3 --> |<text>success</text>| End`;
160160

161161
const expectedMultiline = `<svg class="svg" xmlns="http://www.w3.org/2000/svg"
162162
width="326" height="480" >
@@ -216,39 +216,39 @@ const expectedMultiline = `<svg class="svg" xmlns="http://www.w3.org/2000/svg"
216216
rx="5">
217217
</rect>
218218
</g>
219-
<g class="rect-text" text-anchor="middle" dominant-baseline="middle"><text data-html-node=#text x="138" y="23">My start</text><text data-html-node=#text x="138" y="39">subtitle</text></g>
219+
<g class="rect-text" text-anchor="middle" dominant-baseline="middle"><text x="138" y="23">My start</text><text x="138" y="39">subtitle</text></g>
220220
<g class="frank-flowchart-node-N1" transform="translate(91, 123)">
221221
<rect class="rectangle"
222222
width="95"
223223
height="54"
224224
rx="5">
225225
</rect>
226226
</g>
227-
<g class="rect-text" text-anchor="middle" dominant-baseline="middle"><text data-html-node=#text x="138" y="143">Node 1</text><text data-html-node=#text x="138" y="159">subtitle</text></g>
227+
<g class="rect-text" text-anchor="middle" dominant-baseline="middle"><text x="138" y="143">Node 1</text><text x="138" y="159">subtitle</text></g>
228228
<g class="frank-flowchart-node-N3" transform="translate(216, 123)">
229229
<rect class="rectangle errorOutline"
230230
width="95"
231231
height="54"
232232
rx="5">
233233
</rect>
234234
</g>
235-
<g class="rect-text" text-anchor="middle" dominant-baseline="middle"><text data-html-node=#text x="263" y="143">Node 3</text><text data-html-node=#text x="263" y="159">subtitle</text></g>
235+
<g class="rect-text" text-anchor="middle" dominant-baseline="middle"><text x="263" y="143">Node 3</text><text x="263" y="159">subtitle</text></g>
236236
<g class="frank-flowchart-node-N2" transform="translate(15, 243)">
237237
<rect class="rectangle"
238238
width="95"
239239
height="54"
240240
rx="5">
241241
</rect>
242242
</g>
243-
<g class="rect-text" text-anchor="middle" dominant-baseline="middle"><text data-html-node=#text x="62" y="263">Node 2</text><text data-html-node=#text x="62" y="279">subtitle</text></g>
243+
<g class="rect-text" text-anchor="middle" dominant-baseline="middle"><text x="62" y="263">Node 2</text><text x="62" y="279">subtitle</text></g>
244244
<g class="frank-flowchart-node-End" transform="translate(108, 363)">
245245
<rect class="rectangle"
246246
width="95"
247247
height="54"
248248
rx="5">
249249
</rect>
250250
</g>
251-
<g class="rect-text" text-anchor="middle" dominant-baseline="middle"><text data-html-node=#text x="155" y="383">End node</text><text data-html-node=#text x="155" y="399">subtitle</text></g>
251+
<g class="rect-text" text-anchor="middle" dominant-baseline="middle"><text x="155" y="383">End node</text><text x="155" y="399">subtitle</text></g>
252252
<g class="frank-flowchart-edge-Start-N1">
253253
<polyline class="line" points="138,56 138,123" marker-end="url(#arrow)"/>
254254
</g>
@@ -279,7 +279,7 @@ const expectedMultiline = `<svg class="svg" xmlns="http://www.w3.org/2000/svg"
279279
<g class="frank-flowchart-edge-intermediate3-End">
280280
<polyline class="line error" points="220,270 178,363" marker-end="url(#arrow)"/>
281281
</g>
282-
<g text-anchor="middle" dominant-baseline="middle"><text class="label-text" x="92" y="78" font-size="10">success</text><text class="label-text" x="92" y="94" font-size="10">other</text><text class="label-text" x="138" y="78" font-size="10">success</text><text class="label-text" x="138" y="94" font-size="10">other</text><text class="label-text" x="207" y="86" font-size="10">success</text><text class="label-text" x="101" y="206" font-size="10">success</text><text class="label-text" x="160" y="206" font-size="10">failure</text><text class="label-text" x="249" y="206" font-size="10">success</text><text class="label-text" x="93" y="326" font-size="10">success</text></g></svg>`;
282+
<g text-anchor="middle" dominant-baseline="middle"><text class="label-text" x="92" y="78" font-size="10">success</text><text class="label-text" x="92" y="94" font-size="10">other</text><text class="label-text" x="138" y="104" font-size="10">success</text><text class="label-text" x="138" y="120" font-size="10">other</text><text class="label-text" x="207" y="86" font-size="10">success</text><text class="label-text" x="101" y="206" font-size="10">success</text><text class="label-text" x="160" y="193" font-size="10">failure</text><text class="label-text" x="249" y="206" font-size="10">success</text><text class="label-text" x="93" y="326" font-size="10">success</text></g></svg>`;
283283

284284
describe('Mermaid2svg - please maintain this test using the GUI', () => {
285285
let service: Mermaid2svgService;
@@ -291,14 +291,16 @@ describe('Mermaid2svg - please maintain this test using the GUI', () => {
291291

292292
it('Test the plain SVG', (done) => {
293293
service.mermaid2svg(input).then((svg) => {
294-
expect(svg.split('\n')).toEqual(expectedSvg!.split('\n'));
294+
expect(svg.split('\n').map((line) => line.trim())).toEqual(expectedSvg!.split('\n').map((line) => line.trim()));
295295
done();
296296
});
297297
});
298298

299299
it('Test SVG with multiline nodes and edges', (done) => {
300300
service.mermaid2svg(inputMultiline).then((svg) => {
301-
expect(svg.split('\n')).toEqual(expectedMultiline!.split('\n'));
301+
expect(svg.split('\n').map((line) => line.trim())).toEqual(
302+
expectedMultiline!.split('\n').map((line) => line.trim()),
303+
);
302304
done();
303305
});
304306
});

‎projects/frank-config-layout/src/lib/model/error-flow.spec.ts‎

Lines changed: 20 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -13,9 +13,9 @@ import { EdgeLabelDimensions } from '../graphics/edge-label-layouter';
1313
describe('Distinguish error flow', () => {
1414
it('No error flow', () => {
1515
const input = `
16-
N1(""):::normal
17-
N2(""):::normal
18-
N1 --> |success| N2
16+
N1(''):::normal
17+
N2(''):::normal
18+
N1 --> |<text>success</text>| N2
1919
`;
2020
const b = getGraphFromMermaid(input, dimensions());
2121
const c: OriginalGraph = findErrorFlow(b);
@@ -29,8 +29,8 @@ N1 --> |success| N2
2929

3030
it('No error flow if edge has no text', () => {
3131
const input = `
32-
N1(""):::normal
33-
N2(""):::normal
32+
N1(''):::normal
33+
N2(''):::normal
3434
N1 --> N2
3535
`;
3636
const b = getGraphFromMermaid(input, dimensions());
@@ -45,9 +45,9 @@ N1 --> N2
4545

4646
it('Node is error and edge is error because it originates from error node', () => {
4747
const input = `
48-
N1(""):::errorOutline
49-
N2(""):::normal
50-
N1 --> |success| N2
48+
N1(''):::errorOutline
49+
N2(''):::normal
50+
N1 --> |<text>success</text>| N2
5151
`;
5252
const b = getGraphFromMermaid(input, dimensions());
5353
const c: OriginalGraph = findErrorFlow(b);
@@ -61,9 +61,9 @@ N1 --> |success| N2
6161

6262
it('Edge is error because of forward name', () => {
6363
const input = `
64-
N1(""):::normal
65-
N2(""):::normal
66-
N1 --> |exception| N2
64+
N1(''):::normal
65+
N2(''):::normal
66+
N1 --> |<text>exception</text>| N2
6767
`;
6868
const b = getGraphFromMermaid(input, dimensions());
6969
const c: OriginalGraph = findErrorFlow(b);
@@ -78,9 +78,9 @@ N1 --> |exception| N2
7878

7979
it('When an edge has both success and error labels then it has error status mixed', () => {
8080
const input = `
81-
N1(""):::normal
82-
N2(""):::normal
83-
N1 --> |exception<br/>success| N2
81+
N1(''):::normal
82+
N2(''):::normal
83+
N1 --> |<text>exception</text><text>success</text>| N2
8484
`;
8585
const b = getGraphFromMermaid(input, dimensions());
8686
const c: OriginalGraph = findErrorFlow(b);
@@ -95,16 +95,17 @@ N1 --> |exception<br/>success| N2
9595

9696
it('When edge text has multiple lines, then the number of lines is calculated correctly', () => {
9797
const input = `
98-
N1(""):::normal
99-
N2(""):::normal
100-
N1 --> |success<br/> exception | N2`;
98+
N1(''):::normal
99+
N2(''):::normal
100+
N1 --> | <text>success</text><text>exception</text> | N2
101+
`;
101102
const b = getGraphFromMermaid(input, dimensions());
102103
const c: OriginalGraph = findErrorFlow(b);
103104
const instance = c.getEdgeByKey('N1-N2');
104105
expect(instance.text.numLines).toEqual(2);
105-
expect(instance.text.lines).toEqual(['success', 'exception']);
106+
expect(instance.text.lines).toEqual(['<text>success</text>', '<text>exception</text>']);
106107
// The second line is trimmed, length of word 'exception'
107-
expect(instance.text.maxLineLength).toEqual(9);
108+
expect(instance.text.maxLineLength).toEqual(22);
108109
});
109110
});
110111

‎projects/frank-config-layout/src/lib/model/error-flow.ts‎

Lines changed: 17 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -20,18 +20,20 @@ import { MermaidGraph, MermaidNode } from '../parsing/mermaid-parser';
2020

2121
const NODE_ERROR_CLASS = 'errorOutline';
2222

23-
const ERROR_FORWARD_NAMES = new Set([
24-
'exception',
25-
'failure',
26-
'fail',
27-
'timeout',
28-
'illegalResult',
29-
'presumedTimeout',
30-
'interrupt',
31-
'parserError',
32-
'outputParserError',
33-
'outputFailure',
34-
]);
23+
const ERROR_FORWARD_NAMES = new Set(
24+
[
25+
'exception',
26+
'failure',
27+
'fail',
28+
'timeout',
29+
'illegalResult',
30+
'presumedTimeout',
31+
'interrupt',
32+
'parserError',
33+
'outputParserError',
34+
'outputFailure',
35+
].map((name) => `<text>${name}</text>`),
36+
);
3537

3638
export const ERROR_STATUS_SUCCESS = 0;
3739
export const ERROR_STATUS_MIXED = 1;
@@ -71,11 +73,9 @@ export function findErrorFlow(b: MermaidGraph): OriginalGraph {
7173
}
7274

7375
function transformNode(n: MermaidNode): OriginalNode {
74-
if (n.style === NODE_ERROR_CLASS) {
75-
return { id: n.id, text: n.text, errorStatus: ERROR_STATUS_ERROR };
76-
} else {
77-
return { id: n.id, text: n.text, errorStatus: ERROR_STATUS_SUCCESS };
78-
}
76+
return n.style === NODE_ERROR_CLASS
77+
? { id: n.id, text: n.text, errorStatus: ERROR_STATUS_ERROR }
78+
: { id: n.id, text: n.text, errorStatus: ERROR_STATUS_SUCCESS };
7979
}
8080

8181
function transformEdge(from: OriginalNode, to: OriginalNode, text: EdgeText): OriginalEdge {

0 commit comments

Comments
 (0)