Skip to content

Commit 83cff6d

Browse files
iobuhoviobuhov
committed
test: update unit tests for charts
1 parent bbb99d0 commit 83cff6d

File tree

24 files changed

+5403
-770
lines changed

24 files changed

+5403
-770
lines changed

‎packages/pluggableWidgets/area-chart-web/jest.config.js

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,4 @@
11
module.exports = {
2-
...require("@mendix/pluggable-widgets-tools/test-config/jest.enzyme-free.config.js")
2+
...require("@mendix/pluggable-widgets-tools/test-config/jest.enzyme-free.config.js"),
3+
testEnvironment: "@happy-dom/jest-environment"
34
};

‎packages/pluggableWidgets/area-chart-web/package.json

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -43,6 +43,7 @@
4343
"plotly.js-dist-min": "^3.0.0"
4444
},
4545
"devDependencies": {
46+
"@happy-dom/jest-environment": "^18.0.1",
4647
"@mendix/automation-utils": "workspace:*",
4748
"@mendix/eslint-config-web-widgets": "workspace:*",
4849
"@mendix/pluggable-widgets-tools": "*",

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

Lines changed: 0 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -14,8 +14,6 @@ import { createElement } from "react";
1414
import { SeriesType } from "../../typings/AreaChartProps";
1515
import { AreaChart } from "../AreaChart";
1616

17-
jest.mock("react-plotly.js", () => jest.fn(() => null));
18-
1917
describe("The AreaChart widget", () => {
2018
function renderAreaChart(configs: Array<Partial<SeriesType>>): RenderResult {
2119
return render(

‎packages/pluggableWidgets/bar-chart-web/jest.config.js

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,4 @@
11
module.exports = {
2-
...require("@mendix/pluggable-widgets-tools/test-config/jest.enzyme-free.config.js")
2+
...require("@mendix/pluggable-widgets-tools/test-config/jest.enzyme-free.config.js"),
3+
testEnvironment: "@happy-dom/jest-environment"
34
};

‎packages/pluggableWidgets/bar-chart-web/package.json

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -43,6 +43,7 @@
4343
"plotly.js-dist-min": "^3.0.0"
4444
},
4545
"devDependencies": {
46+
"@happy-dom/jest-environment": "^18.0.1",
4647
"@mendix/automation-utils": "workspace:*",
4748
"@mendix/eslint-config-web-widgets": "workspace:*",
4849
"@mendix/pluggable-widgets-tools": "*",

‎packages/pluggableWidgets/bubble-chart-web/jest.config.js

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,4 @@
11
module.exports = {
2-
...require("@mendix/pluggable-widgets-tools/test-config/jest.enzyme-free.config.js")
2+
...require("@mendix/pluggable-widgets-tools/test-config/jest.enzyme-free.config.js"),
3+
testEnvironment: "@happy-dom/jest-environment"
34
};

‎packages/pluggableWidgets/bubble-chart-web/package.json

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -43,6 +43,7 @@
4343
"plotly.js-dist-min": "^3.0.0"
4444
},
4545
"devDependencies": {
46+
"@happy-dom/jest-environment": "^18.0.1",
4647
"@mendix/automation-utils": "workspace:*",
4748
"@mendix/eslint-config-web-widgets": "workspace:*",
4849
"@mendix/pluggable-widgets-tools": "*",

‎packages/pluggableWidgets/column-chart-web/jest.config.js

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
module.exports = {
2+
...require("@mendix/pluggable-widgets-tools/test-config/jest.enzyme-free.config.js"),
3+
testEnvironment: "@happy-dom/jest-environment"
4+
};

‎packages/pluggableWidgets/column-chart-web/package.json

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -35,7 +35,7 @@
3535
"lint": "eslint src/ package.json",
3636
"release": "pluggable-widgets-tools release:web",
3737
"start": "pluggable-widgets-tools start:server",
38-
"test": "pluggable-widgets-tools test:unit:web",
38+
"test": "jest --projects jest.config.js",
3939
"update-changelog": "rui-update-changelog-widget",
4040
"verify": "rui-verify-package-format"
4141
},
@@ -45,6 +45,7 @@
4545
"plotly.js-dist-min": "^3.0.0"
4646
},
4747
"devDependencies": {
48+
"@happy-dom/jest-environment": "^18.0.1",
4849
"@mendix/automation-utils": "workspace:*",
4950
"@mendix/eslint-config-web-widgets": "workspace:*",
5051
"@mendix/pluggable-widgets-tools": "*",

‎packages/pluggableWidgets/custom-chart-web/jest.config.js

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
module.exports = {
2+
...require("@mendix/pluggable-widgets-tools/test-config/jest.enzyme-free.config.js"),
3+
testEnvironment: "@happy-dom/jest-environment"
4+
};

‎packages/pluggableWidgets/custom-chart-web/package.json

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -50,6 +50,7 @@
5050
"plotly.js-dist-min": "^3.0.0"
5151
},
5252
"devDependencies": {
53+
"@happy-dom/jest-environment": "^18.0.1",
5354
"@mendix/pluggable-widgets-tools": "*",
5455
"@mendix/prettier-config-web-widgets": "workspace:*",
5556
"@mendix/run-e2e": "workspace:^*",

‎packages/pluggableWidgets/heatmap-chart-web/jest.config.js

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
module.exports = {
2+
...require("@mendix/pluggable-widgets-tools/test-config/jest.enzyme-free.config.js"),
3+
testEnvironment: "@happy-dom/jest-environment"
4+
};

‎packages/pluggableWidgets/heatmap-chart-web/package.json

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -35,7 +35,7 @@
3535
"lint": "eslint src/ package.json",
3636
"release": "pluggable-widgets-tools release:web",
3737
"start": "pluggable-widgets-tools start:server",
38-
"test": "pluggable-widgets-tools test:unit:web",
38+
"test": "jest --projects jest.config.js",
3939
"update-changelog": "rui-update-changelog-widget",
4040
"verify": "rui-verify-package-format"
4141
},
@@ -46,6 +46,7 @@
4646
"plotly.js-dist-min": "^3.0.0"
4747
},
4848
"devDependencies": {
49+
"@happy-dom/jest-environment": "^18.0.1",
4950
"@mendix/automation-utils": "workspace:*",
5051
"@mendix/eslint-config-web-widgets": "workspace:*",
5152
"@mendix/pluggable-widgets-tools": "*",

‎packages/pluggableWidgets/heatmap-chart-web/src/__tests__/HeatMap.spec.tsx

Lines changed: 105 additions & 54 deletions
Original file line numberDiff line numberDiff line change
@@ -1,16 +1,23 @@
1-
import { createElement } from "react";
1+
jest.mock("@mendix/shared-charts/main", () => {
2+
const actualModule = jest.requireActual("@mendix/shared-charts/main");
3+
return {
4+
...actualModule,
5+
ChartWidget: jest.fn(() => null)
6+
};
7+
});
8+
29
import { ChartWidget } from "@mendix/shared-charts/main";
3-
import { EditableValueBuilder, ListAttributeValueBuilder, list } from "@mendix/widget-plugin-test-utils";
4-
import { mount, ReactWrapper } from "enzyme";
5-
import { HeatMap } from "../HeatMap";
10+
import { EditableValueBuilder, list, ListAttributeValueBuilder } from "@mendix/widget-plugin-test-utils";
11+
import "@testing-library/jest-dom";
12+
import { render, RenderResult } from "@testing-library/react";
613
import Big from "big.js";
14+
import { createElement } from "react";
715
import { HeatMapContainerProps } from "../../typings/HeatMapProps";
8-
9-
jest.mock("react-plotly.js", () => jest.fn(() => null));
16+
import { HeatMap } from "../HeatMap";
1017

1118
describe("The HeatMap widget", () => {
12-
function renderHeatMap(props: Partial<HeatMapContainerProps>): ReactWrapper {
13-
return mount(
19+
function renderHeatMap(props: Partial<HeatMapContainerProps>): RenderResult {
20+
return render(
1421
<HeatMap
1522
name="line-chart-test"
1623
class="line-chart-class"
@@ -41,9 +48,16 @@ describe("The HeatMap widget", () => {
4148
}
4249

4350
it("visualizes data as a heatmap chart", () => {
44-
const heatmapChart = renderHeatMap({});
45-
const data = heatmapChart.find(ChartWidget).prop("seriesOptions");
46-
expect(data).toHaveProperty("type", "heatmap");
51+
renderHeatMap({});
52+
53+
expect(ChartWidget).toHaveBeenCalledWith(
54+
expect.objectContaining({
55+
seriesOptions: expect.objectContaining({
56+
type: "heatmap"
57+
})
58+
}),
59+
{}
60+
);
4761
});
4862

4963
it("visualizes a heatmap chart properly even if there is no data", () => {
@@ -56,63 +70,98 @@ describe("The HeatMap widget", () => {
5670
});
5771

5872
it("has a default colorscale", () => {
59-
const heatmapChart = renderHeatMap({});
60-
const data = heatmapChart.find(ChartWidget).prop("data");
61-
expect(data).toHaveLength(1);
62-
expect(data[0]).toHaveProperty("colorscale", [
63-
[0, "#17347B"],
64-
[0.5, "#0595DB"],
65-
[1, "#76CA02"]
66-
]);
73+
renderHeatMap({});
74+
75+
expect(ChartWidget).toHaveBeenCalledWith(
76+
expect.objectContaining({
77+
data: expect.arrayContaining([
78+
expect.objectContaining({
79+
colorscale: [
80+
[0, "#17347B"],
81+
[0.5, "#0595DB"],
82+
[1, "#76CA02"]
83+
]
84+
})
85+
])
86+
}),
87+
{}
88+
);
6789
});
6890

6991
it("creates a color scale based on scaleColors property", () => {
70-
const heatmapChart = renderHeatMap({
92+
renderHeatMap({
7193
scaleColors: [
7294
{ colour: "red", valuePercentage: 0 },
7395
{ colour: "blue", valuePercentage: 100 }
7496
]
7597
});
76-
const data = heatmapChart.find(ChartWidget).prop("data");
77-
expect(data).toHaveLength(1);
78-
expect(data[0]).toHaveProperty("colorscale", [
79-
[0, "red"],
80-
[1, "blue"]
81-
]);
98+
99+
expect(ChartWidget).toHaveBeenCalledWith(
100+
expect.objectContaining({
101+
data: expect.arrayContaining([
102+
expect.objectContaining({
103+
colorscale: [
104+
[0, "red"],
105+
[1, "blue"]
106+
]
107+
})
108+
])
109+
}),
110+
{}
111+
);
82112
});
83113

84114
it("sets unique x values on the data series based on the horizontalValueAttribute", () => {
85-
const heatmapChart = renderHeatMap({});
86-
const data = heatmapChart.find(ChartWidget).prop("data");
87-
expect(data).toHaveLength(1);
88-
expect(data[0]).toHaveProperty("x", ["x0", "x1", "x2"]);
115+
renderHeatMap({});
116+
117+
expect(ChartWidget).toHaveBeenCalledWith(
118+
expect.objectContaining({
119+
data: expect.arrayContaining([
120+
expect.objectContaining({
121+
x: ["x0", "x1", "x2"]
122+
})
123+
])
124+
}),
125+
{}
126+
);
89127
});
90128

91129
it("sets unique y values on the data series based on the verticalValueAttribute", () => {
92-
const heatmapChart = renderHeatMap({});
93-
const data = heatmapChart.find(ChartWidget).prop("data");
94-
expect(data).toHaveLength(1);
95-
expect(data[0]).toHaveProperty("y", ["y0", "y1", "y2", "y3"]);
130+
renderHeatMap({});
131+
132+
expect(ChartWidget).toHaveBeenCalledWith(
133+
expect.objectContaining({
134+
data: expect.arrayContaining([
135+
expect.objectContaining({
136+
y: ["y0", "y1", "y2", "y3"]
137+
})
138+
])
139+
}),
140+
{}
141+
);
96142
});
97143

98144
it("sets a proper z values matrix on the data series based on seriesValueAttribute", () => {
99-
const heatmapChart = renderHeatMap({});
100-
const data = heatmapChart.find(ChartWidget).prop("data");
101-
expect(data).toHaveLength(1);
102-
expect(data[0]).toHaveProperty("z");
103-
// @ts-expect-error we checked it
104-
const zValues: number[][] = data[0].z;
145+
renderHeatMap({});
146+
147+
const mockCalls = (ChartWidget as jest.Mock).mock.calls;
148+
const lastCallProps = mockCalls[mockCalls.length - 1][0];
149+
expect(lastCallProps.data).toHaveLength(1);
150+
expect(lastCallProps.data[0]).toHaveProperty("z");
151+
const zValues: number[][] = lastCallProps.data[0].z;
105152
expect(zValues).toHaveLength(4);
106153
zValues.forEach(values => {
107154
expect(values).toHaveLength(3);
108155
});
109156
});
110157

111158
it("sets annotations with the z values on the data series based on showValues", () => {
112-
const heatmapChart = renderHeatMap({ showValues: true });
113-
const layout = heatmapChart.find(ChartWidget).prop("layoutOptions");
114-
expect(layout.annotations).toHaveLength(12);
115-
const annotationsTexts = layout.annotations?.map(anno => anno.text);
159+
renderHeatMap({ showValues: true });
160+
161+
const mockCalls = (ChartWidget as jest.Mock).mock.calls;
162+
const lastCallProps = mockCalls[mockCalls.length - 1][0];
163+
expect(lastCallProps.layoutOptions.annotations).toHaveLength(12);
164+
const annotationsTexts = lastCallProps.layoutOptions.annotations?.map((anno: any) => anno.text);
116165
allItems.forEach((_value, index) => {
117166
expect(annotationsTexts?.includes(index.toString())).toBe(true);
118167
});
@@ -125,14 +174,15 @@ describe("The HeatMap widget", () => {
125174
prev.mockReturnValueOnce(new EditableValueBuilder<Big>().withValue(new Big(index)).build()),
126175
jest.fn()
127176
);
128-
const heatmapChart = renderHeatMap({
177+
renderHeatMap({
129178
horizontalSortAttribute,
130179
horizontalSortOrder: "desc"
131180
});
132-
const data = heatmapChart.find(ChartWidget).prop("data");
133-
expect(data).toHaveLength(1);
134-
// @ts-expect-error we checked it
135-
const zValues: number[][] = data[0].z;
181+
182+
const mockCalls = (ChartWidget as jest.Mock).mock.calls;
183+
const lastCallProps = mockCalls[mockCalls.length - 1][0];
184+
expect(lastCallProps.data).toHaveLength(1);
185+
const zValues: number[][] = lastCallProps.data[0].z;
136186
expect(zValues).toEqual([
137187
[2, 1, 0],
138188
[5, 4, 3],
@@ -148,14 +198,15 @@ describe("The HeatMap widget", () => {
148198
prev.mockReturnValueOnce(new EditableValueBuilder<Big>().withValue(new Big(index)).build()),
149199
jest.fn()
150200
);
151-
const heatmapChart = renderHeatMap({
201+
renderHeatMap({
152202
verticalSortAttribute,
153203
verticalSortOrder: "desc"
154204
});
155-
const data = heatmapChart.find(ChartWidget).prop("data");
156-
expect(data).toHaveLength(1);
157-
// @ts-expect-error we checked it
158-
const zValues: number[][] = data[0].z;
205+
206+
const mockCalls = (ChartWidget as jest.Mock).mock.calls;
207+
const lastCallProps = mockCalls[mockCalls.length - 1][0];
208+
expect(lastCallProps.data).toHaveLength(1);
209+
const zValues: number[][] = lastCallProps.data[0].z;
159210
expect(zValues).toEqual([
160211
[11, 10, 9],
161212
[8, 7, 6],

‎packages/pluggableWidgets/line-chart-web/jest.config.js

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
module.exports = {
2+
...require("@mendix/pluggable-widgets-tools/test-config/jest.enzyme-free.config.js"),
3+
testEnvironment: "@happy-dom/jest-environment"
4+
};

‎packages/pluggableWidgets/line-chart-web/package.json

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -35,7 +35,7 @@
3535
"lint": "eslint src/ package.json",
3636
"release": "pluggable-widgets-tools release:web",
3737
"start": "pluggable-widgets-tools start:server",
38-
"test": "pluggable-widgets-tools test:unit:web",
38+
"test": "jest --projects jest.config.js",
3939
"update-changelog": "rui-update-changelog-widget",
4040
"verify": "rui-verify-package-format"
4141
},
@@ -45,6 +45,7 @@
4545
"plotly.js-dist-min": "^3.0.0"
4646
},
4747
"devDependencies": {
48+
"@happy-dom/jest-environment": "^18.0.1",
4849
"@mendix/automation-utils": "workspace:*",
4950
"@mendix/eslint-config-web-widgets": "workspace:*",
5051
"@mendix/pluggable-widgets-tools": "*",

0 commit comments

Comments
 (0)