Skip to content

Commit 5452682

Browse files
striezelstriezel
committed
tests: add test for 'Basic area chart' example
1 parent d30265d commit 5452682

File tree

1 file changed

+222
-0
lines changed

1 file changed

+222
-0
lines changed

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

Lines changed: 222 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -443,6 +443,228 @@ fill:rgba(255,255,255,1);
443443
444444
]]>
445445
446+
</style>
447+
</svg>`) > 0);
448+
});
449+
});
450+
});
451+
452+
it('Basic area chart', () => {
453+
const options = {
454+
port: 3000,
455+
host: 'localhost',
456+
method: 'POST',
457+
headers: {
458+
'X-Image-Format': 'svg'
459+
}
460+
};
461+
462+
const req = http.request(options);
463+
// Data taken from https://echarts.apache.org/examples/en/editor.html?c=area-basic example.
464+
const payload = `{
465+
"xAxis": {
466+
"type": "category",
467+
"boundaryGap": false,
468+
"data": [ "Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun" ]
469+
},
470+
"yAxis": {
471+
"type": "value"
472+
},
473+
"series": [
474+
{
475+
"data": [ 820, 932, 901, 934, 1290, 1330, 1320 ],
476+
"type": "line",
477+
"areaStyle": {}
478+
}
479+
],
480+
"backgroundColor": "#ffffff"
481+
}`;
482+
req.write(payload);
483+
req.end();
484+
485+
req.on('response', (response) => {
486+
assert.strictEqual(200, response.statusCode);
487+
let body = '';
488+
response.on('data', (chunk) => {
489+
body += chunk;
490+
});
491+
response.on('end', () => {
492+
assert.ok(body.startsWith('<svg'));
493+
assert.ok(body.endsWith('</svg>'));
494+
495+
/* Current server response is something like
496+
497+
<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">
498+
<rect width="700" height="400" x="0" y="0" fill="#ffffff"></rect>
499+
<path d="M70 330.5L630 330.5" fill="none" pointer-events="visible" stroke="#E0E6F1" class="zr0-cls-0"></path>
500+
<path d="M70 276.5L630 276.5" fill="none" pointer-events="visible" stroke="#E0E6F1" class="zr0-cls-0"></path>
501+
<path d="M70 222.5L630 222.5" fill="none" pointer-events="visible" stroke="#E0E6F1" class="zr0-cls-0"></path>
502+
<path d="M70 168.5L630 168.5" fill="none" pointer-events="visible" stroke="#E0E6F1" class="zr0-cls-0"></path>
503+
<path d="M70 114.5L630 114.5" fill="none" pointer-events="visible" stroke="#E0E6F1" class="zr0-cls-0"></path>
504+
<path d="M70 60.5L630 60.5" fill="none" pointer-events="visible" stroke="#E0E6F1" class="zr0-cls-0"></path>
505+
<path d="M70 330.5L630 330.5" fill="none" pointer-events="visible" stroke="#6E7079" stroke-linecap="round" class="zr0-cls-0"></path>
506+
<path d="M70.5 330L70.5 335" fill="none" pointer-events="visible" stroke="#6E7079" class="zr0-cls-0"></path>
507+
<path d="M163.5 330L163.5 335" fill="none" pointer-events="visible" stroke="#6E7079" class="zr0-cls-0"></path>
508+
<path d="M256.5 330L256.5 335" fill="none" pointer-events="visible" stroke="#6E7079" class="zr0-cls-0"></path>
509+
<path d="M350.5 330L350.5 335" fill="none" pointer-events="visible" stroke="#6E7079" class="zr0-cls-0"></path>
510+
<path d="M443.5 330L443.5 335" fill="none" pointer-events="visible" stroke="#6E7079" class="zr0-cls-0"></path>
511+
<path d="M536.5 330L536.5 335" fill="none" pointer-events="visible" stroke="#6E7079" class="zr0-cls-0"></path>
512+
<path d="M630.5 330L630.5 335" fill="none" pointer-events="visible" stroke="#6E7079" class="zr0-cls-0"></path>
513+
<text dominant-baseline="central" text-anchor="end" style="font-size:12px;font-family:sans-serif;" transform="translate(62 330)" fill="#6E7079">0</text>
514+
<text dominant-baseline="central" text-anchor="end" style="font-size:12px;font-family:sans-serif;" transform="translate(62 276)" fill="#6E7079">300</text>
515+
<text dominant-baseline="central" text-anchor="end" style="font-size:12px;font-family:sans-serif;" transform="translate(62 222)" fill="#6E7079">600</text>
516+
<text dominant-baseline="central" text-anchor="end" style="font-size:12px;font-family:sans-serif;" transform="translate(62 168)" fill="#6E7079">900</text>
517+
<text dominant-baseline="central" text-anchor="end" style="font-size:12px;font-family:sans-serif;" transform="translate(62 114)" fill="#6E7079">1,200</text>
518+
<text dominant-baseline="central" text-anchor="end" style="font-size:12px;font-family:sans-serif;" transform="translate(62 60)" fill="#6E7079">1,500</text>
519+
<text dominant-baseline="central" text-anchor="middle" style="font-size:12px;font-family:sans-serif;" y="6" transform="translate(70 338)" fill="#6E7079">Mon</text>
520+
<text dominant-baseline="central" text-anchor="middle" style="font-size:12px;font-family:sans-serif;" y="6" transform="translate(163.3333 338)" fill="#6E7079">Tue</text>
521+
<text dominant-baseline="central" text-anchor="middle" style="font-size:12px;font-family:sans-serif;" y="6" transform="translate(256.6667 338)" fill="#6E7079">Wed</text>
522+
<text dominant-baseline="central" text-anchor="middle" style="font-size:12px;font-family:sans-serif;" y="6" transform="translate(350 338)" fill="#6E7079">Thu</text>
523+
<text dominant-baseline="central" text-anchor="middle" style="font-size:12px;font-family:sans-serif;" y="6" transform="translate(443.3333 338)" fill="#6E7079">Fri</text>
524+
<text dominant-baseline="central" text-anchor="middle" style="font-size:12px;font-family:sans-serif;" y="6" transform="translate(536.6667 338)" fill="#6E7079">Sat</text>
525+
<text dominant-baseline="central" text-anchor="middle" style="font-size:12px;font-family:sans-serif;" y="6" transform="translate(630 338)" fill="#6E7079">Sun</text>
526+
<g clip-path="url(#zr0-c0)">
527+
<path d="M70 182.4L163.3 162.2L256.7 167.8L350 161.9L443.3 97.8L536.7 90.6L630 92.4L630 330L536.7 330L443.3 330L350 330L256.7 330L163.3 330L70 330Z" fill="#5470c6" fill-opacity="0.7" class="zr0-cls-2"></path>
528+
<path d="M70 182.4L163.3 162.2L256.7 167.8L350 161.9L443.3 97.8L536.7 90.6L630 92.4" fill="none" pointer-events="visible" stroke="#5470c6" stroke-width="2" stroke-linejoin="bevel" class="zr0-cls-3"></path>
529+
</g>
530+
<path d="M1 0A1 1 0 1 1 1 -0.1A1 1 0 0 1 1 0" transform="matrix(2,0,0,2,70,182.4)" fill="#fff" stroke="#5470c6" ecmeta_series_index="0" ecmeta_data_index="0" ecmeta_ssr_type="chart" class="zr0-cls-4"></path>
531+
<path d="M1 0A1 1 0 1 1 1 -0.1A1 1 0 0 1 1 0" transform="matrix(2,0,0,2,163.3333,162.24)" fill="#fff" stroke="#5470c6" ecmeta_series_index="0" ecmeta_data_index="1" ecmeta_ssr_type="chart" class="zr0-cls-4"></path>
532+
<path d="M1 0A1 1 0 1 1 1 -0.1A1 1 0 0 1 1 0" transform="matrix(2,0,0,2,256.6667,167.82)" fill="#fff" stroke="#5470c6" ecmeta_series_index="0" ecmeta_data_index="2" ecmeta_ssr_type="chart" class="zr0-cls-4"></path>
533+
<path d="M1 0A1 1 0 1 1 1 -0.1A1 1 0 0 1 1 0" transform="matrix(2,0,0,2,350,161.88)" fill="#fff" stroke="#5470c6" ecmeta_series_index="0" ecmeta_data_index="3" ecmeta_ssr_type="chart" class="zr0-cls-4"></path>
534+
<path d="M1 0A1 1 0 1 1 1 -0.1A1 1 0 0 1 1 0" transform="matrix(2,0,0,2,443.3333,97.8)" fill="#fff" stroke="#5470c6" ecmeta_series_index="0" ecmeta_data_index="4" ecmeta_ssr_type="chart" class="zr0-cls-4"></path>
535+
<path d="M1 0A1 1 0 1 1 1 -0.1A1 1 0 0 1 1 0" transform="matrix(2,0,0,2,536.6667,90.6)" fill="#fff" stroke="#5470c6" ecmeta_series_index="0" ecmeta_data_index="5" ecmeta_ssr_type="chart" class="zr0-cls-4"></path>
536+
<path d="M1 0A1 1 0 1 1 1 -0.1A1 1 0 0 1 1 0" transform="matrix(2,0,0,2,630,92.4)" fill="#fff" stroke="#5470c6" ecmeta_series_index="0" ecmeta_data_index="6" ecmeta_ssr_type="chart" class="zr0-cls-4"></path>
537+
<defs >
538+
<clipPath id="zr0-c0">
539+
<path d="M69 59l562 0l0 272l-562 0Z" fill="#000" class="zr0-cls-1"></path>
540+
</clipPath>
541+
</defs>
542+
<style ><![CDATA[
543+
.zr0-cls-0:hover {
544+
pointer-events:none;
545+
}
546+
.zr0-cls-1:hover {
547+
cursor:pointer;
548+
fill:rgba(0,0,0,1);
549+
}
550+
.zr0-cls-2:hover {
551+
cursor:pointer;
552+
fill:rgba(92,123,217,1);
553+
}
554+
.zr0-cls-3:hover {
555+
cursor:pointer;
556+
}
557+
.zr0-cls-4:hover {
558+
cursor:pointer;
559+
fill:rgba(255,255,255,1);
560+
}
561+
562+
]]>
563+
564+
</style>
565+
</svg>
566+
567+
*/
568+
569+
// Check partial matches, avoiding the random class / id bits.
570+
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);
571+
assert.ok(body.indexOf('<rect width="700" height="400" x="0" y="0" fill="#ffffff"></rect>') > 0);
572+
assert.ok(body.indexOf(`<path d="M70 330.5L630 330.5" fill="none" pointer-events="visible" stroke="#E0E6F1" class="`) > 0);
573+
assert.ok(body.indexOf(`"></path>
574+
<path d="M70 276.5L630 276.5" fill="none" pointer-events="visible" stroke="#E0E6F1" class="`) > 0);
575+
assert.ok(body.indexOf(`"></path>
576+
<path d="M70 222.5L630 222.5" fill="none" pointer-events="visible" stroke="#E0E6F1" class="`) > 0);
577+
assert.ok(body.indexOf(`"></path>
578+
<path d="M70 168.5L630 168.5" fill="none" pointer-events="visible" stroke="#E0E6F1" class="`) > 0);
579+
assert.ok(body.indexOf(`"></path>
580+
<path d="M70 114.5L630 114.5" fill="none" pointer-events="visible" stroke="#E0E6F1" class="`) > 0);
581+
assert.ok(body.indexOf(`"></path>
582+
<path d="M70 60.5L630 60.5" fill="none" pointer-events="visible" stroke="#E0E6F1" class="`) > 0);
583+
assert.ok(body.indexOf(`"></path>
584+
<path d="M70 330.5L630 330.5" fill="none" pointer-events="visible" stroke="#6E7079" stroke-linecap="round" class="`) > 0);
585+
assert.ok(body.indexOf(`"></path>
586+
<path d="M70.5 330L70.5 335" fill="none" pointer-events="visible" stroke="#6E7079" class="`) > 0);
587+
assert.ok(body.indexOf(`"></path>
588+
<path d="M163.5 330L163.5 335" fill="none" pointer-events="visible" stroke="#6E7079" class="`) > 0);
589+
assert.ok(body.indexOf(`"></path>
590+
<path d="M256.5 330L256.5 335" fill="none" pointer-events="visible" stroke="#6E7079" class="`) > 0);
591+
assert.ok(body.indexOf(`"></path>
592+
<path d="M350.5 330L350.5 335" fill="none" pointer-events="visible" stroke="#6E7079" class="`) > 0);
593+
assert.ok(body.indexOf(`"></path>
594+
<path d="M443.5 330L443.5 335" fill="none" pointer-events="visible" stroke="#6E7079" class="`) > 0);
595+
assert.ok(body.indexOf(`"></path>
596+
<path d="M536.5 330L536.5 335" fill="none" pointer-events="visible" stroke="#6E7079" class="`) > 0);
597+
assert.ok(body.indexOf(`"></path>
598+
<path d="M630.5 330L630.5 335" fill="none" pointer-events="visible" stroke="#6E7079" class="`) > 0);
599+
assert.ok(body.indexOf(`"></path>
600+
<text dominant-baseline="central" text-anchor="end" style="font-size:12px;font-family:sans-serif;" transform="translate(62 330)" fill="#6E7079">0</text>
601+
<text dominant-baseline="central" text-anchor="end" style="font-size:12px;font-family:sans-serif;" transform="translate(62 276)" fill="#6E7079">300</text>
602+
<text dominant-baseline="central" text-anchor="end" style="font-size:12px;font-family:sans-serif;" transform="translate(62 222)" fill="#6E7079">600</text>
603+
<text dominant-baseline="central" text-anchor="end" style="font-size:12px;font-family:sans-serif;" transform="translate(62 168)" fill="#6E7079">900</text>
604+
<text dominant-baseline="central" text-anchor="end" style="font-size:12px;font-family:sans-serif;" transform="translate(62 114)" fill="#6E7079">1,200</text>
605+
<text dominant-baseline="central" text-anchor="end" style="font-size:12px;font-family:sans-serif;" transform="translate(62 60)" fill="#6E7079">1,500</text>
606+
<text dominant-baseline="central" text-anchor="middle" style="font-size:12px;font-family:sans-serif;" y="6" transform="translate(70 338)" fill="#6E7079">Mon</text>
607+
<text dominant-baseline="central" text-anchor="middle" style="font-size:12px;font-family:sans-serif;" y="6" transform="translate(163.3333 338)" fill="#6E7079">Tue</text>
608+
<text dominant-baseline="central" text-anchor="middle" style="font-size:12px;font-family:sans-serif;" y="6" transform="translate(256.6667 338)" fill="#6E7079">Wed</text>
609+
<text dominant-baseline="central" text-anchor="middle" style="font-size:12px;font-family:sans-serif;" y="6" transform="translate(350 338)" fill="#6E7079">Thu</text>
610+
<text dominant-baseline="central" text-anchor="middle" style="font-size:12px;font-family:sans-serif;" y="6" transform="translate(443.3333 338)" fill="#6E7079">Fri</text>
611+
<text dominant-baseline="central" text-anchor="middle" style="font-size:12px;font-family:sans-serif;" y="6" transform="translate(536.6667 338)" fill="#6E7079">Sat</text>
612+
<text dominant-baseline="central" text-anchor="middle" style="font-size:12px;font-family:sans-serif;" y="6" transform="translate(630 338)" fill="#6E7079">Sun</text>
613+
<g clip-path="url(#`) > 0);
614+
assert.ok(body.indexOf(`)">
615+
<path d="M70 182.4L163.3 162.2L256.7 167.8L350 161.9L443.3 97.8L536.7 90.6L630 92.4L630 330L536.7 330L443.3 330L350 330L256.7 330L163.3 330L70 330Z" fill="#5470c6" fill-opacity="0.7" class="`) > 0);
616+
assert.ok(body.indexOf(`"></path>
617+
<path d="M70 182.4L163.3 162.2L256.7 167.8L350 161.9L443.3 97.8L536.7 90.6L630 92.4" fill="none" pointer-events="visible" stroke="#5470c6" stroke-width="2" stroke-linejoin="bevel" class="`) > 0);
618+
assert.ok(body.indexOf(`"></path>
619+
</g>
620+
<path d="M1 0A1 1 0 1 1 1 -0.1A1 1 0 0 1 1 0" transform="matrix(2,0,0,2,70,182.4)" fill="#fff" stroke="#5470c6" ecmeta_series_index="0" ecmeta_data_index="0" ecmeta_ssr_type="chart" class="`) > 0);
621+
assert.ok(body.indexOf(`"></path>
622+
<path d="M1 0A1 1 0 1 1 1 -0.1A1 1 0 0 1 1 0" transform="matrix(2,0,0,2,163.3333,162.24)" fill="#fff" stroke="#5470c6" ecmeta_series_index="0" ecmeta_data_index="1" ecmeta_ssr_type="chart" class="`) > 0);
623+
assert.ok(body.indexOf(`"></path>
624+
<path d="M1 0A1 1 0 1 1 1 -0.1A1 1 0 0 1 1 0" transform="matrix(2,0,0,2,256.6667,167.82)" fill="#fff" stroke="#5470c6" ecmeta_series_index="0" ecmeta_data_index="2" ecmeta_ssr_type="chart" class="`) > 0);
625+
assert.ok(body.indexOf(`"></path>
626+
<path d="M1 0A1 1 0 1 1 1 -0.1A1 1 0 0 1 1 0" transform="matrix(2,0,0,2,350,161.88)" fill="#fff" stroke="#5470c6" ecmeta_series_index="0" ecmeta_data_index="3" ecmeta_ssr_type="chart" class="`) > 0);
627+
assert.ok(body.indexOf(`"></path>
628+
<path d="M1 0A1 1 0 1 1 1 -0.1A1 1 0 0 1 1 0" transform="matrix(2,0,0,2,443.3333,97.8)" fill="#fff" stroke="#5470c6" ecmeta_series_index="0" ecmeta_data_index="4" ecmeta_ssr_type="chart" class="`) > 0);
629+
assert.ok(body.indexOf(`"></path>
630+
<path d="M1 0A1 1 0 1 1 1 -0.1A1 1 0 0 1 1 0" transform="matrix(2,0,0,2,536.6667,90.6)" fill="#fff" stroke="#5470c6" ecmeta_series_index="0" ecmeta_data_index="5" ecmeta_ssr_type="chart" class="`) > 0);
631+
assert.ok(body.indexOf(`"></path>
632+
<path d="M1 0A1 1 0 1 1 1 -0.1A1 1 0 0 1 1 0" transform="matrix(2,0,0,2,630,92.4)" fill="#fff" stroke="#5470c6" ecmeta_series_index="0" ecmeta_data_index="6" ecmeta_ssr_type="chart" class="`) > 0);
633+
assert.ok(body.indexOf(`"></path>
634+
<defs >
635+
<clipPath id="`) > 0);
636+
assert.ok(body.indexOf(`">
637+
<path d="M69 59l562 0l0 272l-562 0Z" fill="#000" class="`) > 0);
638+
assert.ok(body.indexOf(`"></path>
639+
</clipPath>
640+
</defs>
641+
<style ><![CDATA[
642+
.`) > 0);
643+
assert.ok(body.indexOf(`:hover {
644+
pointer-events:none;
645+
}
646+
.`) > 0);
647+
assert.ok(body.indexOf(`:hover {
648+
cursor:pointer;
649+
fill:rgba(0,0,0,1);
650+
}
651+
.`) > 0);
652+
assert.ok(body.indexOf(`:hover {
653+
cursor:pointer;
654+
fill:rgba(92,123,217,1);
655+
}
656+
.`) > 0);
657+
assert.ok(body.indexOf(`:hover {
658+
cursor:pointer;
659+
}
660+
.`) > 0);
661+
assert.ok(body.indexOf(`:hover {
662+
cursor:pointer;
663+
fill:rgba(255,255,255,1);
664+
}
665+
666+
]]>
667+
446668
</style>
447669
</svg>`) > 0);
448670
});

0 commit comments

Comments
 (0)