Skip to content

Commit e9cabbf

Browse files
rahmanunvergjulivan
rahmanunver
authored and
gjulivan
committed
test(charts-web): update unit tests for all charts
1 parent e92e6e8 commit e9cabbf

File tree

6 files changed

+123
-70
lines changed

6 files changed

+123
-70
lines changed

‎packages/pluggableWidgets/area-chart-web/src/__tests__/AreaChart.spec.tsx

Lines changed: 12 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -124,35 +124,29 @@ describe("The AreaChart widget", () => {
124124
);
125125
});
126126

127-
it("sets the appropriate transforms on the data series based on the aggregation type", () => {
127+
it("aggregates data based on the aggregation type", () => {
128128
renderAreaChart([{ aggregationType: "none" }, { aggregationType: "avg" }]);
129129

130130
expect(ChartWidget).toHaveBeenCalledWith(
131131
expect.objectContaining({
132132
data: expect.arrayContaining([
133-
expect.objectContaining({ transforms: [] }),
134133
expect.objectContaining({
135-
transforms: [
136-
{
137-
type: "aggregate",
138-
groups: ["1", "2"],
139-
aggregations: [
140-
{
141-
target: "y",
142-
enabled: true,
143-
func: "avg"
144-
}
145-
]
146-
}
147-
]
134+
x: expect.arrayContaining([expect.any(Number)]),
135+
y: expect.arrayContaining([expect.any(Number)])
136+
}),
137+
expect.objectContaining({
138+
x: expect.arrayContaining([expect.any(Number)]),
139+
y: expect.arrayContaining([expect.any(Number)])
148140
})
149141
])
150142
}),
151143
{}
152144
);
153-
const areaChart = renderAreaChart([{ aggregationType: "none" }, { aggregationType: "avg" }]);
154-
const data = areaChart.find(ChartWidget).prop("data");
155-
expect(data).toHaveLength(2);
145+
146+
renderAreaChart([{ aggregationType: "none" }, { aggregationType: "avg" }]);
147+
const mockCalls = (ChartWidget as jest.Mock).mock.calls;
148+
const lastCallProps = mockCalls[mockCalls.length - 1][0];
149+
expect(lastCallProps.data).toHaveLength(2);
156150
});
157151
});
158152

‎packages/pluggableWidgets/bar-chart-web/src/__tests__/BarChart.spec.tsx

Lines changed: 12 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -64,31 +64,29 @@ describe("The BarChart widget", () => {
6464
);
6565
});
6666

67-
it("sets the appropriate transforms on the data series based on the aggregation type", () => {
67+
it("aggregates data based on the aggregation type", () => {
6868
renderBarChart([{ aggregationType: "none" }, { aggregationType: "avg" }]);
6969

7070
expect(ChartWidget).toHaveBeenCalledWith(
7171
expect.objectContaining({
7272
data: expect.arrayContaining([
73-
expect.objectContaining({ transforms: expect.arrayContaining([]) }),
7473
expect.objectContaining({
75-
transforms: expect.arrayContaining([
76-
expect.objectContaining({
77-
type: "aggregate",
78-
groups: expect.arrayContaining(["1", "2"]),
79-
aggregations: expect.arrayContaining([
80-
expect.objectContaining({ target: "y", enabled: true, func: "avg" })
81-
])
82-
})
83-
])
74+
x: expect.arrayContaining([expect.any(Number)]),
75+
y: expect.arrayContaining([expect.any(Number)])
76+
}),
77+
expect.objectContaining({
78+
x: expect.arrayContaining([expect.any(Number)]),
79+
y: expect.arrayContaining([expect.any(Number)])
8480
})
8581
])
8682
}),
8783
{}
8884
);
89-
const barChart = renderBarChart([{ aggregationType: "none" }, { aggregationType: "avg" }]);
90-
const data = barChart.find(ChartWidget).prop("data");
91-
expect(data).toHaveLength(2);
85+
86+
renderBarChart([{ aggregationType: "none" }, { aggregationType: "avg" }]);
87+
const mockCalls = (ChartWidget as jest.Mock).mock.calls;
88+
const lastCallProps = mockCalls[mockCalls.length - 1][0];
89+
expect(lastCallProps.data).toHaveLength(2);
9290
});
9391
});
9492

‎packages/pluggableWidgets/bubble-chart-web/src/__tests__/BubbleChart.spec.tsx

Lines changed: 12 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -63,31 +63,29 @@ describe("The Bubble widget", () => {
6363
);
6464
});
6565

66-
it("sets the appropriate transforms on the data series based on the aggregation type", () => {
66+
it("aggregates data based on the aggregation type", () => {
6767
renderBubbleChart([{ aggregationType: "none" }, { aggregationType: "avg" }]);
6868

6969
expect(ChartWidget).toHaveBeenCalledWith(
7070
expect.objectContaining({
7171
data: expect.arrayContaining([
72-
expect.objectContaining({ transforms: expect.arrayContaining([]) }),
7372
expect.objectContaining({
74-
transforms: expect.arrayContaining([
75-
expect.objectContaining({
76-
type: "aggregate",
77-
groups: expect.arrayContaining(["1", "2"]),
78-
aggregations: expect.arrayContaining([
79-
expect.objectContaining({ target: "y", enabled: true, func: "avg" })
80-
])
81-
})
82-
])
73+
x: expect.arrayContaining([expect.any(Number)]),
74+
y: expect.arrayContaining([expect.any(Number)])
75+
}),
76+
expect.objectContaining({
77+
x: expect.arrayContaining([expect.any(Number)]),
78+
y: expect.arrayContaining([expect.any(Number)])
8379
})
8480
])
8581
}),
8682
{}
8783
);
88-
const bubbleChart = renderBubbleChart([{ aggregationType: "none" }, { aggregationType: "avg" }]);
89-
const data = bubbleChart.find(ChartWidget).prop("data");
90-
expect(data).toHaveLength(2);
84+
85+
renderBubbleChart([{ aggregationType: "none" }, { aggregationType: "avg" }]);
86+
const mockCalls = (ChartWidget as jest.Mock).mock.calls;
87+
const lastCallProps = mockCalls[mockCalls.length - 1][0];
88+
expect(lastCallProps.data).toHaveLength(2);
9189
});
9290
});
9391

‎packages/pluggableWidgets/column-chart-web/src/__tests__/ColumnChart.spec.tsx

Lines changed: 59 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -1,19 +1,27 @@
11
import { ChartWidget } from "@mendix/shared-charts/main";
22
import { EditableValueBuilder, ListAttributeValueBuilder, list, listExp } from "@mendix/widget-plugin-test-utils";
33
import Big from "big.js";
4-
import { mount, ReactWrapper } from "enzyme";
4+
import { render, RenderResult } from "@testing-library/react";
55
import { createElement } from "react";
66
import { ColumnChartContainerProps, SeriesType } from "../../typings/ColumnChartProps";
77
import { ColumnChart } from "../ColumnChart";
88

9+
jest.mock("@mendix/shared-charts/main", () => {
10+
const actualModule = jest.requireActual("@mendix/shared-charts/main");
11+
return {
12+
...actualModule,
13+
ChartWidget: jest.fn(() => null)
14+
};
15+
});
16+
917
jest.mock("react-plotly.js", () => jest.fn(() => null));
1018

1119
describe("The ColumnChart widget", () => {
1220
function renderColumnChart(
1321
configs: Array<Partial<SeriesType>>,
1422
chartProps?: Partial<ColumnChartContainerProps>
15-
): ReactWrapper {
16-
return mount(
23+
): RenderResult {
24+
return render(
1725
<ColumnChart
1826
name="column-chart-test"
1927
class="column-chart-class"
@@ -36,33 +44,64 @@ describe("The ColumnChart widget", () => {
3644
}
3745

3846
it("visualizes data as a bar chart", () => {
39-
const columnChart = renderColumnChart([{}]);
40-
const seriesOptions = columnChart.find(ChartWidget).prop("seriesOptions");
41-
expect(seriesOptions).toHaveProperty("type", "bar");
42-
expect(seriesOptions).toHaveProperty("orientation", "v");
47+
renderColumnChart([{}]);
48+
49+
expect(ChartWidget).toHaveBeenCalledWith(
50+
expect.objectContaining({
51+
seriesOptions: expect.objectContaining({
52+
type: "bar",
53+
orientation: "v"
54+
})
55+
}),
56+
expect.anything()
57+
);
4358
});
4459

4560
it("sets the bar color on the data series based on the barColor value", () => {
46-
const columnChart = renderColumnChart([
47-
{ staticBarColor: listExp(() => "red") },
48-
{ staticBarColor: undefined }
49-
]);
50-
const data = columnChart.find(ChartWidget).prop("data");
61+
renderColumnChart([{ staticBarColor: listExp(() => "red") }, { staticBarColor: undefined }]);
62+
63+
const mockCalls = (ChartWidget as jest.Mock).mock.calls;
64+
const lastCallProps = mockCalls[mockCalls.length - 1][0];
65+
const data = lastCallProps.data;
66+
5167
expect(data).toHaveLength(2);
52-
expect(data[0]).toHaveProperty("marker.color", "red");
53-
expect(data[1]).toHaveProperty("marker.color", undefined);
68+
expect(data[0].marker.color).toBe("red");
69+
expect(data[1].marker.color).toBeUndefined();
5470
});
5571

56-
it("sets the appropriate transforms on the data series based on the aggregation type", () => {
57-
const columnChart = renderColumnChart([{ aggregationType: "none" }, { aggregationType: "avg" }]);
58-
const data = columnChart.find(ChartWidget).prop("data");
72+
it("aggregates data based on the aggregation type", () => {
73+
renderColumnChart([{ aggregationType: "none" }, { aggregationType: "avg" }]);
74+
75+
const mockCalls = (ChartWidget as jest.Mock).mock.calls;
76+
const lastCallProps = mockCalls[mockCalls.length - 1][0];
77+
const data = lastCallProps.data;
78+
5979
expect(data).toHaveLength(2);
80+
81+
// Check that each data series has x and y arrays
82+
expect(data[0]).toHaveProperty("x");
83+
expect(data[0]).toHaveProperty("y");
84+
expect(data[1]).toHaveProperty("x");
85+
expect(data[1]).toHaveProperty("y");
86+
87+
// Verify the arrays contain numbers
88+
expect(Array.isArray(data[0].x)).toBe(true);
89+
expect(Array.isArray(data[0].y)).toBe(true);
90+
expect(Array.isArray(data[1].x)).toBe(true);
91+
expect(Array.isArray(data[1].y)).toBe(true);
6092
});
6193

6294
it("sets the appropriate barmode on the layout based on the barmode type", () => {
63-
const columnChart = renderColumnChart([], { barmode: "stack" });
64-
const layoutOptions = columnChart.find(ChartWidget).prop("layoutOptions");
65-
expect(layoutOptions).toHaveProperty("barmode", "stack");
95+
renderColumnChart([], { barmode: "stack" });
96+
97+
expect(ChartWidget).toHaveBeenCalledWith(
98+
expect.objectContaining({
99+
layoutOptions: expect.objectContaining({
100+
barmode: "stack"
101+
})
102+
}),
103+
expect.anything()
104+
);
66105
});
67106
});
68107

‎packages/pluggableWidgets/line-chart-web/src/__tests__/LineChart.spec.tsx

Lines changed: 14 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,7 @@ import Big from "big.js";
55
import { mount, ReactWrapper } from "enzyme";
66
import { LineChart } from "../LineChart";
77
import { LinesType } from "../../typings/LineChartProps";
8+
import { PlotData } from "plotly.js-dist-min";
89

910
jest.mock("react-plotly.js", () => jest.fn(() => null));
1011

@@ -71,10 +72,21 @@ describe("The LineChart widget", () => {
7172
expect(data[1]).toHaveProperty("marker.color", "blue");
7273
});
7374

74-
it("sets the appropriate transforms on the data series based on the aggregation type", () => {
75+
it("aggregates data based on the aggregation type", () => {
7576
const lineChart = renderLineChart([{ aggregationType: "none" }, { aggregationType: "avg" }]);
76-
const data = lineChart.find(ChartWidget).prop("data");
77+
const data = lineChart.find(ChartWidget).prop("data") as PlotData[];
78+
7779
expect(data).toHaveLength(2);
80+
expect(data[0]).toHaveProperty("x");
81+
expect(data[0]).toHaveProperty("y");
82+
expect(data[1]).toHaveProperty("x");
83+
expect(data[1]).toHaveProperty("y");
84+
85+
// Array.isArray works without casting now
86+
expect(Array.isArray(data[0].x)).toBe(true);
87+
expect(Array.isArray(data[0].y)).toBe(true);
88+
expect(Array.isArray(data[1].x)).toBe(true);
89+
expect(Array.isArray(data[1].y)).toBe(true);
7890
});
7991
});
8092

‎packages/pluggableWidgets/time-series-chart-web/src/__test__/TimeSeries.spec.tsx

Lines changed: 14 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,7 @@ import Big from "big.js";
55
import { mount, ReactWrapper } from "enzyme";
66
import { TimeSeries } from "../TimeSeries";
77
import { LinesType, TimeSeriesContainerProps } from "../../typings/TimeSeriesProps";
8+
import { PlotData } from "plotly.js-dist-min";
89

910
jest.mock("react-plotly.js", () => jest.fn(() => null));
1011

@@ -73,10 +74,21 @@ describe("The TimeSeries widget", () => {
7374
expect(data[1]).toHaveProperty("marker.color", "blue");
7475
});
7576

76-
it("sets the appropriate transforms on the data series based on the aggregation type", () => {
77+
it("aggregates data based on the aggregation type", () => {
7778
const timeSeries = renderTimeSeries([{ aggregationType: "none" }, { aggregationType: "avg" }]);
78-
const data = timeSeries.find(ChartWidget).prop("data");
79+
const data = timeSeries.find(ChartWidget).prop("data") as PlotData[];
80+
7981
expect(data).toHaveLength(2);
82+
83+
expect(data[0]).toHaveProperty("x");
84+
expect(data[0]).toHaveProperty("y");
85+
expect(data[1]).toHaveProperty("x");
86+
expect(data[1]).toHaveProperty("y");
87+
88+
expect(Array.isArray(data[0].x)).toBe(true);
89+
expect(Array.isArray(data[0].y)).toBe(true);
90+
expect(Array.isArray(data[1].x)).toBe(true);
91+
expect(Array.isArray(data[1].y)).toBe(true);
8092
});
8193

8294
it("sets the area fill color on the data series based on fillColor", () => {

0 commit comments

Comments
 (0)