You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@echarts.apache.org by ov...@apache.org on 2025/02/25 08:45:29 UTC
(echarts-from-mermaid) branch main updated: test: update test cases
This is an automated email from the ASF dual-hosted git repository.
ovilia pushed a commit to branch main
in repository https://gitbox.apache.org/repos/asf/echarts-from-mermaid.git
The following commit(s) were added to refs/heads/main by this push:
new e8baf59 test: update test cases
e8baf59 is described below
commit e8baf594b8a04f3399ca01da2e6649034279c5ac
Author: Ovilia <zw...@gmail.com>
AuthorDate: Tue Feb 25 16:45:16 2025 +0800
test: update test cases
---
src/charts/__tests__/config.test.ts | 170 +++++++++++++++++++++++++++++++
src/charts/__tests__/xychart.test.ts | 189 +++++++++++++++++++++++++++++++++++
2 files changed, 359 insertions(+)
diff --git a/src/charts/__tests__/config.test.ts b/src/charts/__tests__/config.test.ts
new file mode 100644
index 0000000..96b2541
--- /dev/null
+++ b/src/charts/__tests__/config.test.ts
@@ -0,0 +1,170 @@
+import { XYChart } from '../mermaid/xychart';
+
+describe('Config', () => {
+ it('should work with width and height', () => {
+ const definition = `
+---
+config:
+ xyChart:
+ width: 900
+ height: 600
+ themeVariables:
+ xyChart:
+ titleColor: "#ff0000"
+---
+xychart-beta
+ bar [1, 4, 2]
+`;
+ const chart = new XYChart(definition);
+ expect(chart.getOption()).toEqual({
+ grid: {
+ width: 900,
+ height: 600,
+ },
+ title: {
+ text: 'This is a simple example',
+ textStyle: {
+ color: '#ff0000',
+ },
+ },
+ xAxis: {
+ type: 'value',
+ },
+ yAxis: {
+ type: 'value',
+ },
+ series: [
+ {
+ type: 'bar',
+ data: [
+ [1, 1],
+ [2, 4],
+ [3, 2],
+ ],
+ },
+ ],
+ });
+ });
+
+ it('should work with axis configurations', () => {
+ const definition = `
+---
+config:
+ xyChart:
+ xAxis:
+ labelFontSize: 16
+ labelPadding: 8
+ showTitle: false
+ tickLength: 8
+ showAxisLine: false
+ yAxis:
+ showLabel: false
+ titleFontSize: 18
+ showTick: false
+ axisLineWidth: 3
+---
+xychart-beta
+ bar [1, 4, 2]
+`;
+ const chart = new XYChart(definition);
+ expect(chart.getOption()).toEqual({
+ xAxis: {
+ type: 'value',
+ show: true,
+ axisLabel: {
+ show: true,
+ fontSize: 16,
+ margin: 8,
+ },
+ axisTick: {
+ show: true,
+ length: 8,
+ },
+ axisLine: {
+ show: false,
+ },
+ name: '', // due to showTitle: false
+ nameShow: false,
+ },
+ yAxis: {
+ type: 'value',
+ show: true,
+ axisLabel: {
+ show: false,
+ },
+ name: '',
+ nameTextStyle: {
+ fontSize: 18,
+ },
+ axisTick: {
+ show: false,
+ },
+ axisLine: {
+ show: true,
+ lineStyle: {
+ width: 3,
+ },
+ },
+ },
+ series: [
+ {
+ type: 'bar',
+ data: [
+ [1, 1],
+ [2, 4],
+ [3, 2],
+ ],
+ },
+ ],
+ });
+ });
+
+ it('should work with theme variables', () => {
+ const definition = `
+---
+config:
+ themeVariables:
+ xyChart:
+ backgroundColor: "#f0f0f0"
+ xAxisLabelColor: "#333"
+ yAxisLineColor: "#666"
+ plotColorPalette: "#f3456,#43445"
+---
+xychart-beta
+ bar [1, 4, 2]
+`;
+ const chart = new XYChart(definition);
+ expect(chart.getOption()).toEqual({
+ backgroundColor: '#f0f0f0',
+ xAxis: {
+ type: 'value',
+ axisLabel: {
+ show: true,
+ textStyle: {
+ color: '#333',
+ },
+ },
+ },
+ yAxis: {
+ type: 'value',
+ axisLine: {
+ show: true,
+ lineStyle: {
+ color: '#666',
+ },
+ },
+ },
+ color: ['#f3456', '#43445'],
+ series: [
+ {
+ type: 'bar',
+ data: [
+ [1, 1],
+ [2, 4],
+ [3, 2],
+ ],
+ },
+ ],
+ });
+ });
+});
diff --git a/src/charts/__tests__/xychart.test.ts b/src/charts/__tests__/xychart.test.ts
new file mode 100644
index 0000000..94318c3
--- /dev/null
+++ b/src/charts/__tests__/xychart.test.ts
@@ -0,0 +1,189 @@
+import { XYChart } from '../mermaid/xychart';
+
+const chartTypes = ['line', 'bar'];
+
+describe('XYChart', () => {
+ for (const chartType of chartTypes) {
+ describe(chartType, () => {
+ describe('orientation', () => {
+ it('should render vertical chart', () => {
+ const definition = `
+xychart-beta
+ ${chartType} [1, 4, 3]
+`;
+ const chart = new XYChart(definition);
+ expect(chart.getOption()).toEqual({
+ xAxis: {
+ type: 'value',
+ },
+ yAxis: {
+ type: 'value',
+ },
+ series: [
+ {
+ type: chartType,
+ data: [
+ [1, 1],
+ [2, 4],
+ [3, 3],
+ ],
+ },
+ ],
+ });
+ });
+
+ it('should render horizontal chart', () => {
+ const definition = `
+xychart-beta horizontal
+ ${chartType} [1, 4, 3]
+`;
+ const chart = new XYChart(definition);
+ expect(chart.getOption()).toEqual({
+ xAxis: {
+ type: 'value',
+ },
+ yAxis: {
+ type: 'value',
+ },
+ series: [
+ {
+ type: chartType,
+ data: [
+ [1, 1],
+ [4, 2],
+ [3, 3],
+ ],
+ },
+ ],
+ });
+ });
+ });
+
+ describe('title', () => {
+ it('should render title', () => {
+ const definition = `
+xychart-beta
+ title "This is a simple example"
+ ${chartType} [1, 4, 2]
+`;
+ const chart = new XYChart(definition);
+ expect(chart.getOption()).toEqual({
+ xAxis: {
+ type: 'value',
+ },
+ yAxis: {
+ type: 'value',
+ },
+ series: [
+ {
+ type: chartType,
+ data: [
+ [1, 1],
+ [2, 4],
+ [3, 3],
+ ],
+ },
+ ],
+ });
+ });
+ });
+
+ const axisTypes = ['x', 'y'];
+ for (const axisType of axisTypes) {
+ describe(axisType, () => {
+ const otherAxis = axisType === 'x' ? 'y' : 'x';
+ it(`should render category ${axisType}Axis`, () => {
+ const definition = `
+xychart-beta
+ ${axisType}-axis [cat1, "cat2 with space", cat3]
+ ${chartType} [1, 4, 2]
+`;
+ const chart = new XYChart(definition);
+ expect(chart.getOption()).toEqual({
+ [axisType + 'Axis']: {
+ type: 'category',
+ data: ['cat1', 'cat2 with space', 'cat3'],
+ },
+ [otherAxis + 'Axis']: { type: 'value' },
+ series: [
+ {
+ type: chartType,
+ data: [1, 4, 2],
+ },
+ ],
+ });
+ });
+
+ it(`should render value ${axisType}Axis with two value axes`, () => {
+ const definition = `
+xychart-beta
+ ${axisType}-axis [10, 20, 30]
+ ${chartType} [1, 4, 2]
+`;
+ const chart = new XYChart(definition);
+ expect(chart.getOption()).toEqual({
+ [axisType + 'Axis']: { type: 'value' },
+ [otherAxis + 'Axis']: { type: 'value' },
+ series: [
+ {
+ type: chartType,
+ data: [
+ [10, 1],
+ [20, 4],
+ [30, 2],
+ ],
+ },
+ ],
+ });
+ });
+
+ it(`should render value ${axisType}Axis with range`, () => {
+ const definition = `
+xychart-beta
+ ${axisType}-axis 100 --> 200
+ ${chartType} [1, 4, 2]
+`;
+ const chart = new XYChart(definition);
+ expect(chart.getOption()).toEqual({
+ [axisType + 'Axis']: { type: 'value', min: 100, max: 200 },
+ [otherAxis + 'Axis']: { type: 'value' },
+ series: [
+ {
+ type: chartType,
+ data: [
+ [100, 1],
+ [150, 4],
+ [200, 2],
+ ],
+ },
+ ],
+ });
+ });
+
+ it(`should work with ${axisType}Axis title`, () => {
+ const definition = `
+xychart-beta
+ ${axisType}-axis "Cats" [cat1, "cat2 with space", cat3]
+ ${chartType} [1, 4, 2]
+`;
+ const chart = new XYChart(definition);
+ expect(chart.getOption()).toEqual({
+ [axisType + 'Axis']: {
+ type: 'category',
+ name: 'Cats',
+ value: ['cat1', 'cat2 with space', 'cat3'],
+ },
+ [otherAxis + 'Axis']: { type: 'value' },
+ series: [
+ {
+ type: chartType,
+ data: [1, 4, 2],
+ },
+ ],
+ });
+ });
+ });
+ }
+ });
+ }
+});
---------------------------------------------------------------------
To unsubscribe, e-mail: commits-unsubscribe@echarts.apache.org
For additional commands, e-mail: commits-help@echarts.apache.org