Skip to content

Commit 779f1d1

Browse files
mhdirksemhdirkse
committed
Re-enable integration tests
1 parent 4241ae9 commit 779f1d1

1 file changed

Lines changed: 37 additions & 81 deletions

File tree

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

Lines changed: 37 additions & 81 deletions
Original file line numberDiff line numberDiff line change
@@ -1,22 +1,5 @@
11
import { Mermaid2svgService } from './mermaid2svg';
2-
import { Dimensions, SvgResult } from '../public_api';
3-
4-
const dimensions: Dimensions = {
5-
nodeTextFontSize: 16,
6-
nodeTextBorder: 4,
7-
layerHeight: 50,
8-
layerDistance: 120,
9-
nodeBoxHeight: 50,
10-
intermediateWidth: 60,
11-
horizontalNodeBorder: 15,
12-
boxConnectorAreaPerc: 50,
13-
intermediateLayerPassedByVerticalLine: false,
14-
edgeLabelFontSize: 10,
15-
preferredVertDistanceFromOrigin: 30,
16-
strictlyKeepLabelOutOfBox: false,
17-
lineTransgressionPerc: 100,
18-
boxCrossProtectionMargin: 0,
19-
};
2+
import { getFactoryDimensions, SvgResult } from '../public_api';
203

214
const input = `Start("My start"):::normal
225
N1("Node 1"):::normal
@@ -40,7 +23,7 @@ N3 --> |success| End`;
4023
// "const expected = ``" before inserting the text inside the ``.
4124
//
4225
const expectedSvg = `<svg class="svg" xmlns="http://www.w3.org/2000/svg"
43-
width="439" height="480" >
26+
width="286" height="480" >
4427
<defs>
4528
<style>
4629
.rectangle {
@@ -70,10 +53,6 @@ const expectedSvg = `<svg class="svg" xmlns="http://www.w3.org/2000/svg"
7053
font-family: "Inter", "trebuchet ms", serif;
7154
}
7255
73-
.rect-text > text[data-html-node="a"] {
74-
font-size: 28px;
75-
}
76-
7756
.rect-text > text[data-html-node="b"] {
7857
font-weight: bold;
7958
}
@@ -94,117 +73,94 @@ const expectedSvg = `<svg class="svg" xmlns="http://www.w3.org/2000/svg"
9473
<path d="M 0 0 L 4 2 L 0 4 z" />
9574
</marker>
9675
</defs>
97-
<g class="frank-flowchart-node-Start" transform="translate(96, 0)">
76+
<g class="frank-flowchart-node-Start" transform="translate(78, 3)">
9877
<rect class="rectangle"
99-
width="160"
100-
height="50"
78+
width="95"
79+
height="54"
10180
rx="5">
10281
</rect>
103-
<g class="rect-text"><text data-html-node=#text x="44.55" y="29" textLength="70.91" lengthAdjust="spacingAndGlyphs">My start</text></g>
10482
</g>
105-
<g class="frank-flowchart-node-N1" transform="translate(96, 120)">
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)">
10685
<rect class="rectangle"
107-
width="160"
108-
height="50"
86+
width="77"
87+
height="54"
10988
rx="5">
11089
</rect>
111-
<g class="rect-text"><text data-html-node=#text x="53.41" y="29" textLength="53.18" lengthAdjust="spacingAndGlyphs">Node 1</text></g>
11290
</g>
113-
<g class="frank-flowchart-node-N3" transform="translate(271, 120)">
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)">
11493
<rect class="rectangle errorOutline"
115-
width="160"
116-
height="50"
94+
width="77"
95+
height="54"
11796
rx="5">
11897
</rect>
119-
<g class="rect-text"><text data-html-node=#text x="53.41" y="29" textLength="53.18" lengthAdjust="spacingAndGlyphs">Node 3</text></g>
12098
</g>
121-
<g class="frank-flowchart-node-N2" transform="translate(7, 240)">
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)">
122101
<rect class="rectangle"
123-
width="160"
124-
height="50"
102+
width="77"
103+
height="54"
125104
rx="5">
126105
</rect>
127-
<g class="rect-text"><text data-html-node=#text x="53.41" y="29" textLength="53.18" lengthAdjust="spacingAndGlyphs">Node 2</text></g>
128106
</g>
129-
<g class="frank-flowchart-node-End" transform="translate(125, 360)">
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)">
130109
<rect class="rectangle"
131-
width="160"
132-
height="50"
110+
width="95"
111+
height="54"
133112
rx="5">
134113
</rect>
135-
<g class="rect-text"><text data-html-node=#text x="44.55" y="29" textLength="70.91" lengthAdjust="spacingAndGlyphs">End node</text></g>
136114
</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>
137116
<g class="frank-flowchart-edge-Start-N1">
138-
<polyline class="line" points="176,49 176,120" marker-end="url(#arrow)"/>
117+
<polyline class="line" points="125,56 125,123" marker-end="url(#arrow)"/>
139118
</g>
140119
<g class="frank-flowchart-edge-Start-intermediate1">
141-
<polyline class="line" points="136,49 59,145" />
120+
<polyline class="line" points="101,56 42,150" />
142121
</g>
143122
<g class="frank-flowchart-edge-intermediate1-N2">
144-
<polyline class="line" points="59,145 47,240" marker-end="url(#arrow)"/>
123+
<polyline class="line" points="42,150 34,243" marker-end="url(#arrow)"/>
145124
</g>
146125
<g class="frank-flowchart-edge-Start-N3">
147-
<polyline class="line" points="215,49 351,120" marker-end="url(#arrow)"/>
126+
<polyline class="line" points="148,56 232,123" marker-end="url(#arrow)"/>
148127
</g>
149128
<g class="frank-flowchart-edge-N1-intermediate2">
150-
<polyline class="line error" points="215,169 205,265" />
129+
<polyline class="line error" points="144,176 140,270" />
151130
</g>
152131
<g class="frank-flowchart-edge-intermediate2-End">
153-
<polyline class="line error" points="205,265 205,360" marker-end="url(#arrow)"/>
132+
<polyline class="line error" points="140,270 137,363" marker-end="url(#arrow)"/>
154133
</g>
155134
<g class="frank-flowchart-edge-N2-End">
156-
<polyline class="line" points="87,289 165,360" marker-end="url(#arrow)"/>
135+
<polyline class="line" points="53,296 113,363" marker-end="url(#arrow)"/>
157136
</g>
158137
<g class="frank-flowchart-edge-N1-N2">
159-
<polyline class="line" points="136,169 126,240" marker-end="url(#arrow)"/>
138+
<polyline class="line" points="106,176 72,243" marker-end="url(#arrow)"/>
160139
</g>
161140
<g class="frank-flowchart-edge-N3-intermediate3">
162-
<polyline class="line error" points="351,169 351,265" />
141+
<polyline class="line error" points="232,176 196,270" />
163142
</g>
164143
<g class="frank-flowchart-edge-intermediate3-End">
165-
<polyline class="line error" points="351,265 244,360" marker-end="url(#arrow)"/>
166-
</g>
167-
<g text-anchor="middle" dominant-baseline="middle">
168-
<g transform="translate(88, 73)">
169-
<text class="label-text" x="24.5" y="6.5" font-size="10">success</text>
170-
</g>
171-
<g transform="translate(152, 73)">
172-
<text class="label-text" x="24.5" y="6.5" font-size="10">success</text>
173-
</g>
174-
<g transform="translate(248, 73)">
175-
<text class="label-text" x="24.5" y="6.5" font-size="10">success</text>
176-
</g>
177-
<g transform="translate(108, 193)">
178-
<text class="label-text" x="24.5" y="6.5" font-size="10">success</text>
179-
</g>
180-
<g transform="translate(188, 193)">
181-
<text class="label-text" x="24.5" y="6.5" font-size="10">failure</text>
182-
</g>
183-
<g transform="translate(327, 193)">
184-
<text class="label-text" x="24.5" y="6.5" font-size="10">success</text>
185-
</g>
186-
<g transform="translate(96, 313)">
187-
<text class="label-text" x="24.5" y="6.5" font-size="10">success</text>
188-
</g>
144+
<polyline class="line error" points="196,270 160,363" marker-end="url(#arrow)"/>
189145
</g>
190-
</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="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>`;
191147

192148
describe('Mermaid2svg - please maintain this test using the GUI', () => {
193149
let service: Mermaid2svgService;
194150

195151
beforeEach(() => {
196152
// No need to test injection - if injection does not work then the app does not show
197-
service = new Mermaid2svgService(dimensions);
153+
service = new Mermaid2svgService(getFactoryDimensions());
198154
});
199155

200-
xit('Test the plain SVG', (done) => {
156+
it('Test the plain SVG', (done) => {
201157
service.mermaid2svg(input).then((svg) => {
202158
expect(svg.split('\n')).toEqual(expectedSvg!.split('\n'));
203159
done();
204160
});
205161
});
206162

207-
xit('Test with statistics', (done) => {
163+
it('Test with statistics', (done) => {
208164
service.mermaid2svgStatistics(input).then((statistics) => {
209165
expect(statistics.svg).toEqual(expectedSvg);
210166
expect(statistics.numNodes).toEqual(5);
@@ -214,7 +170,7 @@ describe('Mermaid2svg - please maintain this test using the GUI', () => {
214170
});
215171
});
216172

217-
xit('Test that real calculation is done only once', (done) => {
173+
it('Test that real calculation is done only once', (done) => {
218174
const first: Promise<SvgResult> = service.mermaid2svgStatistics(input);
219175
const second: Promise<string> = service.mermaid2svg(input);
220176
Promise.all([first, second]).then(() => {

0 commit comments

Comments
 (0)