Skip to content

Commit

Permalink
tests: add test case for 'Axis Align with Tick' example
Browse files Browse the repository at this point in the history
  • Loading branch information
@striezel
striezel committed Jan 27, 2025
1 parent 5452682 commit 5d5fe3d
Showing 1 changed file with 188 additions and 0 deletions.
188 changes: 188 additions & 0 deletions export-server/tests/charts/bar.test.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -185,6 +185,194 @@ fill:rgba(92,123,217,1);
]]>
</style>
</svg>`) > 0);
});
});
});

it('Axis Align with Tick', () => {
const options = {
port: 3000,
host: 'localhost',
method: 'POST',
headers: {
'X-Image-Format': 'svg'
}
};

const req = http.request(options);
// Data taken from https://echarts.apache.org/examples/en/editor.html?c=bar-tick-align example.
const payload = `{
"tooltip": {
"trigger": "axis",
"axisPointer": {
"type": "shadow"
}
},
"grid": {
"left": "3%",
"right": "4%",
"bottom": "3%",
"containLabel": true
},
"xAxis": [
{
"type": "category",
"data": [ "Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun" ],
"axisTick": {
"alignWithLabel": true
}
}
],
"yAxis": [
{
"type": "value"
}
],
"series": [
{
"name": "Direct",
"type": "bar",
"barWidth": "60%",
"data": [ 10, 52, 200, 334, 390, 330, 220 ]
}
],
"backgroundColor": "#ffffff"
}`;
req.write(payload);
req.end();

req.on('response', (response) => {
assert.strictEqual(200, response.statusCode);
let body = '';
response.on('data', (chunk) => {
body += chunk;
});
response.on('end', () => {
assert.ok(body.startsWith('<svg'));
assert.ok(body.endsWith('</svg>'));

/* Current server response is something like
<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">
<rect width="700" height="400" x="0" y="0" fill="#ffffff"></rect>
<path d="M49.2 368.5L672 368.5" fill="none" pointer-events="visible" stroke="#E0E6F1" class="zr0-cls-0"></path>
<path d="M49.2 291.5L672 291.5" fill="none" pointer-events="visible" stroke="#E0E6F1" class="zr0-cls-0"></path>
<path d="M49.2 214.5L672 214.5" fill="none" pointer-events="visible" stroke="#E0E6F1" class="zr0-cls-0"></path>
<path d="M49.2 137.5L672 137.5" fill="none" pointer-events="visible" stroke="#E0E6F1" class="zr0-cls-0"></path>
<path d="M49.2 60.5L672 60.5" fill="none" pointer-events="visible" stroke="#E0E6F1" class="zr0-cls-0"></path>
<path d="M49.2 368.5L672 368.5" fill="none" pointer-events="visible" stroke="#6E7079" stroke-linecap="round" class="zr0-cls-0"></path>
<path d="M93.5 368L93.5 373" fill="none" pointer-events="visible" stroke="#6E7079" class="zr0-cls-0"></path>
<path d="M182.5 368L182.5 373" fill="none" pointer-events="visible" stroke="#6E7079" class="zr0-cls-0"></path>
<path d="M271.5 368L271.5 373" fill="none" pointer-events="visible" stroke="#6E7079" class="zr0-cls-0"></path>
<path d="M360.5 368L360.5 373" fill="none" pointer-events="visible" stroke="#6E7079" class="zr0-cls-0"></path>
<path d="M449.5 368L449.5 373" fill="none" pointer-events="visible" stroke="#6E7079" class="zr0-cls-0"></path>
<path d="M538.5 368L538.5 373" fill="none" pointer-events="visible" stroke="#6E7079" class="zr0-cls-0"></path>
<path d="M627.5 368L627.5 373" fill="none" pointer-events="visible" stroke="#6E7079" class="zr0-cls-0"></path>
<text dominant-baseline="central" text-anchor="end" style="font-size:12px;font-family:sans-serif;" transform="translate(41.16 368)" fill="#6E7079">0</text>
<text dominant-baseline="central" text-anchor="end" style="font-size:12px;font-family:sans-serif;" transform="translate(41.16 291)" fill="#6E7079">100</text>
<text dominant-baseline="central" text-anchor="end" style="font-size:12px;font-family:sans-serif;" transform="translate(41.16 214)" fill="#6E7079">200</text>
<text dominant-baseline="central" text-anchor="end" style="font-size:12px;font-family:sans-serif;" transform="translate(41.16 137)" fill="#6E7079">300</text>
<text dominant-baseline="central" text-anchor="end" style="font-size:12px;font-family:sans-serif;" transform="translate(41.16 60)" fill="#6E7079">400</text>
<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>
<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>
<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>
<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>
<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>
<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>
<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>
<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>
<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>
<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>
<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>
<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>
<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>
<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>
<style ><![CDATA[
.zr0-cls-0:hover {
pointer-events:none;
}
.zr0-cls-1:hover {
cursor:pointer;
fill:rgba(92,123,217,1);
}
]]>
</style>
</svg>
*/

// Check partial matches, avoiding the random class / id bits.
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);
assert.ok(body.indexOf('<rect width="700" height="400" x="0" y="0" fill="#ffffff"></rect>') > 0);
assert.ok(body.indexOf(`<path d="M49.2 368.5L672 368.5" fill="none" pointer-events="visible" stroke="#E0E6F1" class="`) > 0);
assert.ok(body.indexOf(`"></path>
<path d="M49.2 291.5L672 291.5" fill="none" pointer-events="visible" stroke="#E0E6F1" class="`) > 0);
assert.ok(body.indexOf(`"></path>
<path d="M49.2 214.5L672 214.5" fill="none" pointer-events="visible" stroke="#E0E6F1" class="`) > 0);
assert.ok(body.indexOf(`"></path>
<path d="M49.2 137.5L672 137.5" fill="none" pointer-events="visible" stroke="#E0E6F1" class="`) > 0);
assert.ok(body.indexOf(`"></path>
<path d="M49.2 60.5L672 60.5" fill="none" pointer-events="visible" stroke="#E0E6F1" class="`) > 0);
assert.ok(body.indexOf(`"></path>
<path d="M49.2 368.5L672 368.5" fill="none" pointer-events="visible" stroke="#6E7079" stroke-linecap="round" class="`) > 0);
assert.ok(body.indexOf(`"></path>
<path d="M93.5 368L93.5 373" fill="none" pointer-events="visible" stroke="#6E7079" class="`) > 0);
assert.ok(body.indexOf(`"></path>
<path d="M182.5 368L182.5 373" fill="none" pointer-events="visible" stroke="#6E7079" class="`) > 0);
assert.ok(body.indexOf(`"></path>
<path d="M271.5 368L271.5 373" fill="none" pointer-events="visible" stroke="#6E7079" class="`) > 0);
assert.ok(body.indexOf(`"></path>
<path d="M360.5 368L360.5 373" fill="none" pointer-events="visible" stroke="#6E7079" class="`) > 0);
assert.ok(body.indexOf(`"></path>
<path d="M449.5 368L449.5 373" fill="none" pointer-events="visible" stroke="#6E7079" class="`) > 0);
assert.ok(body.indexOf(`"></path>
<path d="M538.5 368L538.5 373" fill="none" pointer-events="visible" stroke="#6E7079" class="`) > 0);
assert.ok(body.indexOf(`"></path>
<path d="M627.5 368L627.5 373" fill="none" pointer-events="visible" stroke="#6E7079" class="`) > 0);
assert.ok(body.indexOf(`"></path>
<text dominant-baseline="central" text-anchor="end" style="font-size:12px;font-family:sans-serif;" transform="translate(41.16 368)" fill="#6E7079">0</text>
<text dominant-baseline="central" text-anchor="end" style="font-size:12px;font-family:sans-serif;" transform="translate(41.16 291)" fill="#6E7079">100</text>
<text dominant-baseline="central" text-anchor="end" style="font-size:12px;font-family:sans-serif;" transform="translate(41.16 214)" fill="#6E7079">200</text>
<text dominant-baseline="central" text-anchor="end" style="font-size:12px;font-family:sans-serif;" transform="translate(41.16 137)" fill="#6E7079">300</text>
<text dominant-baseline="central" text-anchor="end" style="font-size:12px;font-family:sans-serif;" transform="translate(41.16 60)" fill="#6E7079">400</text>
<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>
<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>
<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>
<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>
<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>
<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>
<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>
<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);
assert.ok(body.indexOf(`"></path>
<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);
assert.ok(body.indexOf(`"></path>
<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);
assert.ok(body.indexOf(`"></path>
<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);
assert.ok(body.indexOf(`"></path>
<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);
assert.ok(body.indexOf(`"></path>
<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);
assert.ok(body.indexOf(`"></path>
<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);
assert.ok(body.indexOf(`"></path>
<style ><![CDATA[
.`) > 0);
assert.ok(body.indexOf(`:hover {
pointer-events:none;
}
.`) > 0);
assert.ok(body.indexOf(`:hover {
cursor:pointer;
fill:rgba(92,123,217,1);
}
]]>
</style>
</svg>`) > 0);
});
Expand Down

0 comments on commit 5d5fe3d

Please sign in to comment.