Skip to content

Commit 5d5fe3d

Browse files
striezelstriezel
committed
tests: add test case for 'Axis Align with Tick' example
1 parent 5452682 commit 5d5fe3d

File tree

1 file changed

+188
-0
lines changed

1 file changed

+188
-0
lines changed

‎export-server/tests/charts/bar.test.js‎

Lines changed: 188 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -185,6 +185,194 @@ fill:rgba(92,123,217,1);
185185
186186
]]>
187187
188+
</style>
189+
</svg>`) > 0);
190+
});
191+
});
192+
});
193+
194+
it('Axis Align with Tick', () => {
195+
const options = {
196+
port: 3000,
197+
host: 'localhost',
198+
method: 'POST',
199+
headers: {
200+
'X-Image-Format': 'svg'
201+
}
202+
};
203+
204+
const req = http.request(options);
205+
// Data taken from https://echarts.apache.org/examples/en/editor.html?c=bar-tick-align example.
206+
const payload = `{
207+
"tooltip": {
208+
"trigger": "axis",
209+
"axisPointer": {
210+
"type": "shadow"
211+
}
212+
},
213+
"grid": {
214+
"left": "3%",
215+
"right": "4%",
216+
"bottom": "3%",
217+
"containLabel": true
218+
},
219+
"xAxis": [
220+
{
221+
"type": "category",
222+
"data": [ "Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun" ],
223+
"axisTick": {
224+
"alignWithLabel": true
225+
}
226+
}
227+
],
228+
"yAxis": [
229+
{
230+
"type": "value"
231+
}
232+
],
233+
"series": [
234+
{
235+
"name": "Direct",
236+
"type": "bar",
237+
"barWidth": "60%",
238+
"data": [ 10, 52, 200, 334, 390, 330, 220 ]
239+
}
240+
],
241+
"backgroundColor": "#ffffff"
242+
}`;
243+
req.write(payload);
244+
req.end();
245+
246+
req.on('response', (response) => {
247+
assert.strictEqual(200, response.statusCode);
248+
let body = '';
249+
response.on('data', (chunk) => {
250+
body += chunk;
251+
});
252+
response.on('end', () => {
253+
assert.ok(body.startsWith('<svg'));
254+
assert.ok(body.endsWith('</svg>'));
255+
256+
/* Current server response is something like
257+
258+
<svg width="700" height="400" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" baseProfile="full" viewBox="0 0 700 400">
259+
<rect width="700" height="400" x="0" y="0" fill="#ffffff"></rect>
260+
<path d="M49.2 368.5L672 368.5" fill="none" pointer-events="visible" stroke="#E0E6F1" class="zr0-cls-0"></path>
261+
<path d="M49.2 291.5L672 291.5" fill="none" pointer-events="visible" stroke="#E0E6F1" class="zr0-cls-0"></path>
262+
<path d="M49.2 214.5L672 214.5" fill="none" pointer-events="visible" stroke="#E0E6F1" class="zr0-cls-0"></path>
263+
<path d="M49.2 137.5L672 137.5" fill="none" pointer-events="visible" stroke="#E0E6F1" class="zr0-cls-0"></path>
264+
<path d="M49.2 60.5L672 60.5" fill="none" pointer-events="visible" stroke="#E0E6F1" class="zr0-cls-0"></path>
265+
<path d="M49.2 368.5L672 368.5" fill="none" pointer-events="visible" stroke="#6E7079" stroke-linecap="round" class="zr0-cls-0"></path>
266+
<path d="M93.5 368L93.5 373" fill="none" pointer-events="visible" stroke="#6E7079" class="zr0-cls-0"></path>
267+
<path d="M182.5 368L182.5 373" fill="none" pointer-events="visible" stroke="#6E7079" class="zr0-cls-0"></path>
268+
<path d="M271.5 368L271.5 373" fill="none" pointer-events="visible" stroke="#6E7079" class="zr0-cls-0"></path>
269+
<path d="M360.5 368L360.5 373" fill="none" pointer-events="visible" stroke="#6E7079" class="zr0-cls-0"></path>
270+
<path d="M449.5 368L449.5 373" fill="none" pointer-events="visible" stroke="#6E7079" class="zr0-cls-0"></path>
271+
<path d="M538.5 368L538.5 373" fill="none" pointer-events="visible" stroke="#6E7079" class="zr0-cls-0"></path>
272+
<path d="M627.5 368L627.5 373" fill="none" pointer-events="visible" stroke="#6E7079" class="zr0-cls-0"></path>
273+
<text dominant-baseline="central" text-anchor="end" style="font-size:12px;font-family:sans-serif;" transform="translate(41.16 368)" fill="#6E7079">0</text>
274+
<text dominant-baseline="central" text-anchor="end" style="font-size:12px;font-family:sans-serif;" transform="translate(41.16 291)" fill="#6E7079">100</text>
275+
<text dominant-baseline="central" text-anchor="end" style="font-size:12px;font-family:sans-serif;" transform="translate(41.16 214)" fill="#6E7079">200</text>
276+
<text dominant-baseline="central" text-anchor="end" style="font-size:12px;font-family:sans-serif;" transform="translate(41.16 137)" fill="#6E7079">300</text>
277+
<text dominant-baseline="central" text-anchor="end" style="font-size:12px;font-family:sans-serif;" transform="translate(41.16 60)" fill="#6E7079">400</text>
278+
<text dominant-baseline="central" text-anchor="middle" style="font-size:12px;font-family:sans-serif;" y="6" transform="translate(93.6486 376)" fill="#6E7079">Mon</text>
279+
<text dominant-baseline="central" text-anchor="middle" style="font-size:12px;font-family:sans-serif;" y="6" transform="translate(182.6257 376)" fill="#6E7079">Tue</text>
280+
<text dominant-baseline="central" text-anchor="middle" style="font-size:12px;font-family:sans-serif;" y="6" transform="translate(271.6029 376)" fill="#6E7079">Wed</text>
281+
<text dominant-baseline="central" text-anchor="middle" style="font-size:12px;font-family:sans-serif;" y="6" transform="translate(360.58 376)" fill="#6E7079">Thu</text>
282+
<text dominant-baseline="central" text-anchor="middle" style="font-size:12px;font-family:sans-serif;" y="6" transform="translate(449.5571 376)" fill="#6E7079">Fri</text>
283+
<text dominant-baseline="central" text-anchor="middle" style="font-size:12px;font-family:sans-serif;" y="6" transform="translate(538.5343 376)" fill="#6E7079">Sat</text>
284+
<text dominant-baseline="central" text-anchor="middle" style="font-size:12px;font-family:sans-serif;" y="6" transform="translate(627.5114 376)" fill="#6E7079">Sun</text>
285+
<path d="M67 368l53.4 0l0 -7.7l-53.4 0Z" fill="#5470c6" ecmeta_series_index="0" ecmeta_data_index="0" ecmeta_ssr_type="chart" class="zr0-cls-1"></path>
286+
<path d="M155.9 368l53.4 0l0 -40l-53.4 0Z" fill="#5470c6" ecmeta_series_index="0" ecmeta_data_index="1" ecmeta_ssr_type="chart" class="zr0-cls-1"></path>
287+
<path d="M244.9 368l53.4 0l0 -154l-53.4 0Z" fill="#5470c6" ecmeta_series_index="0" ecmeta_data_index="2" ecmeta_ssr_type="chart" class="zr0-cls-1"></path>
288+
<path d="M333.9 368l53.4 0l0 -257.2l-53.4 0Z" fill="#5470c6" ecmeta_series_index="0" ecmeta_data_index="3" ecmeta_ssr_type="chart" class="zr0-cls-1"></path>
289+
<path d="M422.9 368l53.4 0l0 -300.3l-53.4 0Z" fill="#5470c6" ecmeta_series_index="0" ecmeta_data_index="4" ecmeta_ssr_type="chart" class="zr0-cls-1"></path>
290+
<path d="M511.8 368l53.4 0l0 -254.1l-53.4 0Z" fill="#5470c6" ecmeta_series_index="0" ecmeta_data_index="5" ecmeta_ssr_type="chart" class="zr0-cls-1"></path>
291+
<path d="M600.8 368l53.4 0l0 -169.4l-53.4 0Z" fill="#5470c6" ecmeta_series_index="0" ecmeta_data_index="6" ecmeta_ssr_type="chart" class="zr0-cls-1"></path>
292+
<style ><![CDATA[
293+
.zr0-cls-0:hover {
294+
pointer-events:none;
295+
}
296+
.zr0-cls-1:hover {
297+
cursor:pointer;
298+
fill:rgba(92,123,217,1);
299+
}
300+
301+
]]>
302+
303+
</style>
304+
</svg>
305+
306+
*/
307+
308+
// Check partial matches, avoiding the random class / id bits.
309+
assert.ok(body.indexOf('<svg width="700" height="400" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" baseProfile="full" viewBox="0 0 700 400">') >= 0);
310+
assert.ok(body.indexOf('<rect width="700" height="400" x="0" y="0" fill="#ffffff"></rect>') > 0);
311+
assert.ok(body.indexOf(`<path d="M49.2 368.5L672 368.5" fill="none" pointer-events="visible" stroke="#E0E6F1" class="`) > 0);
312+
assert.ok(body.indexOf(`"></path>
313+
<path d="M49.2 291.5L672 291.5" fill="none" pointer-events="visible" stroke="#E0E6F1" class="`) > 0);
314+
assert.ok(body.indexOf(`"></path>
315+
<path d="M49.2 214.5L672 214.5" fill="none" pointer-events="visible" stroke="#E0E6F1" class="`) > 0);
316+
assert.ok(body.indexOf(`"></path>
317+
<path d="M49.2 137.5L672 137.5" fill="none" pointer-events="visible" stroke="#E0E6F1" class="`) > 0);
318+
assert.ok(body.indexOf(`"></path>
319+
<path d="M49.2 60.5L672 60.5" fill="none" pointer-events="visible" stroke="#E0E6F1" class="`) > 0);
320+
assert.ok(body.indexOf(`"></path>
321+
<path d="M49.2 368.5L672 368.5" fill="none" pointer-events="visible" stroke="#6E7079" stroke-linecap="round" class="`) > 0);
322+
assert.ok(body.indexOf(`"></path>
323+
<path d="M93.5 368L93.5 373" fill="none" pointer-events="visible" stroke="#6E7079" class="`) > 0);
324+
assert.ok(body.indexOf(`"></path>
325+
<path d="M182.5 368L182.5 373" fill="none" pointer-events="visible" stroke="#6E7079" class="`) > 0);
326+
assert.ok(body.indexOf(`"></path>
327+
<path d="M271.5 368L271.5 373" fill="none" pointer-events="visible" stroke="#6E7079" class="`) > 0);
328+
assert.ok(body.indexOf(`"></path>
329+
<path d="M360.5 368L360.5 373" fill="none" pointer-events="visible" stroke="#6E7079" class="`) > 0);
330+
assert.ok(body.indexOf(`"></path>
331+
<path d="M449.5 368L449.5 373" fill="none" pointer-events="visible" stroke="#6E7079" class="`) > 0);
332+
assert.ok(body.indexOf(`"></path>
333+
<path d="M538.5 368L538.5 373" fill="none" pointer-events="visible" stroke="#6E7079" class="`) > 0);
334+
assert.ok(body.indexOf(`"></path>
335+
<path d="M627.5 368L627.5 373" fill="none" pointer-events="visible" stroke="#6E7079" class="`) > 0);
336+
assert.ok(body.indexOf(`"></path>
337+
<text dominant-baseline="central" text-anchor="end" style="font-size:12px;font-family:sans-serif;" transform="translate(41.16 368)" fill="#6E7079">0</text>
338+
<text dominant-baseline="central" text-anchor="end" style="font-size:12px;font-family:sans-serif;" transform="translate(41.16 291)" fill="#6E7079">100</text>
339+
<text dominant-baseline="central" text-anchor="end" style="font-size:12px;font-family:sans-serif;" transform="translate(41.16 214)" fill="#6E7079">200</text>
340+
<text dominant-baseline="central" text-anchor="end" style="font-size:12px;font-family:sans-serif;" transform="translate(41.16 137)" fill="#6E7079">300</text>
341+
<text dominant-baseline="central" text-anchor="end" style="font-size:12px;font-family:sans-serif;" transform="translate(41.16 60)" fill="#6E7079">400</text>
342+
<text dominant-baseline="central" text-anchor="middle" style="font-size:12px;font-family:sans-serif;" y="6" transform="translate(93.6486 376)" fill="#6E7079">Mon</text>
343+
<text dominant-baseline="central" text-anchor="middle" style="font-size:12px;font-family:sans-serif;" y="6" transform="translate(182.6257 376)" fill="#6E7079">Tue</text>
344+
<text dominant-baseline="central" text-anchor="middle" style="font-size:12px;font-family:sans-serif;" y="6" transform="translate(271.6029 376)" fill="#6E7079">Wed</text>
345+
<text dominant-baseline="central" text-anchor="middle" style="font-size:12px;font-family:sans-serif;" y="6" transform="translate(360.58 376)" fill="#6E7079">Thu</text>
346+
<text dominant-baseline="central" text-anchor="middle" style="font-size:12px;font-family:sans-serif;" y="6" transform="translate(449.5571 376)" fill="#6E7079">Fri</text>
347+
<text dominant-baseline="central" text-anchor="middle" style="font-size:12px;font-family:sans-serif;" y="6" transform="translate(538.5343 376)" fill="#6E7079">Sat</text>
348+
<text dominant-baseline="central" text-anchor="middle" style="font-size:12px;font-family:sans-serif;" y="6" transform="translate(627.5114 376)" fill="#6E7079">Sun</text>
349+
<path d="M67 368l53.4 0l0 -7.7l-53.4 0Z" fill="#5470c6" ecmeta_series_index="0" ecmeta_data_index="0" ecmeta_ssr_type="chart" class="`) > 0);
350+
assert.ok(body.indexOf(`"></path>
351+
<path d="M155.9 368l53.4 0l0 -40l-53.4 0Z" fill="#5470c6" ecmeta_series_index="0" ecmeta_data_index="1" ecmeta_ssr_type="chart" class="`) > 0);
352+
assert.ok(body.indexOf(`"></path>
353+
<path d="M244.9 368l53.4 0l0 -154l-53.4 0Z" fill="#5470c6" ecmeta_series_index="0" ecmeta_data_index="2" ecmeta_ssr_type="chart" class="`) > 0);
354+
assert.ok(body.indexOf(`"></path>
355+
<path d="M333.9 368l53.4 0l0 -257.2l-53.4 0Z" fill="#5470c6" ecmeta_series_index="0" ecmeta_data_index="3" ecmeta_ssr_type="chart" class="`) > 0);
356+
assert.ok(body.indexOf(`"></path>
357+
<path d="M422.9 368l53.4 0l0 -300.3l-53.4 0Z" fill="#5470c6" ecmeta_series_index="0" ecmeta_data_index="4" ecmeta_ssr_type="chart" class="`) > 0);
358+
assert.ok(body.indexOf(`"></path>
359+
<path d="M511.8 368l53.4 0l0 -254.1l-53.4 0Z" fill="#5470c6" ecmeta_series_index="0" ecmeta_data_index="5" ecmeta_ssr_type="chart" class="`) > 0);
360+
assert.ok(body.indexOf(`"></path>
361+
<path d="M600.8 368l53.4 0l0 -169.4l-53.4 0Z" fill="#5470c6" ecmeta_series_index="0" ecmeta_data_index="6" ecmeta_ssr_type="chart" class="`) > 0);
362+
assert.ok(body.indexOf(`"></path>
363+
<style ><![CDATA[
364+
.`) > 0);
365+
assert.ok(body.indexOf(`:hover {
366+
pointer-events:none;
367+
}
368+
.`) > 0);
369+
assert.ok(body.indexOf(`:hover {
370+
cursor:pointer;
371+
fill:rgba(92,123,217,1);
372+
}
373+
374+
]]>
375+
188376
</style>
189377
</svg>`) > 0);
190378
});

0 commit comments

Comments
 (0)