test(bar-chart-web): update tests to use react-testing-library and refactor for better readability

Author: samuelreichert

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

@@ -0,0 +1,3 @@
+module.exports = {
+    ...require("@mendix/pluggable-widgets-tools/test-config/jest.enzyme-free.config.js")
+};

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

@@ -33,7 +33,7 @@
         "lint": "eslint src/ package.json",
         "release": "pluggable-widgets-tools release:web",
         "start": "pluggable-widgets-tools start:server",
-        "test": "pluggable-widgets-tools test:unit:web",
+        "test": "jest --projects jest.config.js",
         "update-changelog": "rui-update-changelog-widget",
         "verify": "rui-verify-package-format"
     },

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

@@ -1,21 +1,29 @@
-import { ChartWidget } from "@mendix/shared-charts/main";
-import { EditableValueBuilder, ListAttributeValueBuilder, listExp, list } from "@mendix/widget-plugin-test-utils";
-import Big from "big.js";
-import { mount, ReactWrapper } from "enzyme";
+jest.mock("@mendix/shared-charts/main", () => {
+    const actualModule = jest.requireActual("@mendix/shared-charts/main");
+    return {
+        ...actualModule,
+        ChartWidget: jest.fn(() => null)
+    };
+});
+
+import { ChartWidget, setupBasicSeries } from "@mendix/shared-charts/main";
+import { listExpression } from "@mendix/widget-plugin-test-utils";
+import "@testing-library/jest-dom";
+import { render, RenderResult } from "@testing-library/react";
 import { createElement } from "react";
 import { SeriesType } from "../../typings/BarChartProps";
 import { BarChart } from "../BarChart";
 
 jest.mock("react-plotly.js", () => jest.fn(() => null));
 
 describe("The BarChart widget", () => {
-    function renderBarChart(configs: Array<Partial<SeriesType>>): ReactWrapper {
-        return mount(
+    function renderBarChart(configs: Array<Partial<SeriesType>> = [{}]): RenderResult {
+        return render(
             <BarChart
                 name="bar-chart-test"
                 class="bar-chart-class"
                 barmode="group"
-                series={configs.map(setupBasicSeries)}
+                series={configs.map(setupBasicBarSeries)}
                 showLegend={false}
                 enableAdvancedOptions={false}
                 widthUnit="percentage"
@@ -32,61 +40,60 @@ describe("The BarChart widget", () => {
     }
 
     it("visualizes data as a bar chart", () => {
-        const barChart = renderBarChart([{}]);
-        const data = barChart.find(ChartWidget).prop("data");
-        expect(data).toHaveLength(1);
-        expect(data[0]).toHaveProperty("type", "bar");
+        renderBarChart();
+
+        expect(ChartWidget).toHaveBeenCalledWith(
+            expect.objectContaining({
+                data: expect.arrayContaining([expect.objectContaining({ type: "bar" })])
+            }),
+            {}
+        );
     });
 
     it("sets the bar color on the data series based on the barColor value", () => {
-        const barChart = renderBarChart([{ staticBarColor: listExp(() => "red") }, { staticBarColor: undefined }]);
-        const data = barChart.find(ChartWidget).prop("data");
-        expect(data).toHaveLength(2);
-        expect(data[0]).toHaveProperty("marker.color", "red");
-        expect(data[1]).toHaveProperty("marker.color", undefined);
+        renderBarChart([{ staticBarColor: listExpression(() => "red") }, { staticBarColor: undefined }]);
+
+        expect(ChartWidget).toHaveBeenCalledWith(
+            expect.objectContaining({
+                data: expect.arrayContaining([
+                    expect.objectContaining({ marker: expect.objectContaining({ color: "red" }) }),
+                    expect.objectContaining({ marker: expect.objectContaining({ color: undefined }) })
+                ])
+            }),
+            {}
+        );
     });
 
     it("sets the appropriate transforms on the data series based on the aggregation type", () => {
-        const barChart = renderBarChart([{ aggregationType: "none" }, { aggregationType: "avg" }]);
-        const data = barChart.find(ChartWidget).prop("data");
-        expect(data).toHaveLength(2);
-        expect(data[0]).toHaveProperty("transforms", []);
-        expect(data[1]).toHaveProperty("transforms", [
-            {
-                type: "aggregate",
-                groups: ["1", "2"],
-                aggregations: [
-                    {
-                        target: "y",
-                        enabled: true,
-                        func: "avg"
-                    }
-                ]
-            }
-        ]);
+        renderBarChart([{ aggregationType: "none" }, { aggregationType: "avg" }]);
+
+        expect(ChartWidget).toHaveBeenCalledWith(
+            expect.objectContaining({
+                data: expect.arrayContaining([
+                    expect.objectContaining({ transforms: expect.arrayContaining([]) }),
+                    expect.objectContaining({
+                        transforms: expect.arrayContaining([
+                            expect.objectContaining({
+                                type: "aggregate",
+                                groups: expect.arrayContaining(["1", "2"]),
+                                aggregations: expect.arrayContaining([
+                                    expect.objectContaining({ target: "y", enabled: true, func: "avg" })
+                                ])
+                            })
+                        ])
+                    })
+                ])
+            }),
+            {}
+        );
     });
 });
 
-function setupBasicSeries(overwriteConfig: Partial<SeriesType>): SeriesType {
-    const xAttribute = new ListAttributeValueBuilder<Big>().build();
-    const getXAttributeMock = jest.fn();
-    getXAttributeMock.mockReturnValueOnce(new EditableValueBuilder<Big>().withValue(new Big(1)).build());
-    getXAttributeMock.mockReturnValueOnce(new EditableValueBuilder<Big>().withValue(new Big(2)).build());
-    xAttribute.get = getXAttributeMock;
-
-    const yAttribute = new ListAttributeValueBuilder<Big>().build();
-    const getYAttributeMock = jest.fn();
-    getYAttributeMock.mockReturnValueOnce(new EditableValueBuilder<Big>().withValue(new Big(3)).build());
-    getYAttributeMock.mockReturnValueOnce(new EditableValueBuilder<Big>().withValue(new Big(6)).build());
-    yAttribute.get = getYAttributeMock;
+function setupBasicBarSeries(overwriteConfig: Partial<SeriesType>): SeriesType {
+    const basicSeries = setupBasicSeries(overwriteConfig) as SeriesType;
 
     return {
-        dataSet: "static",
-        customSeriesOptions: overwriteConfig.customSeriesOptions ?? "",
-        aggregationType: overwriteConfig.aggregationType ?? "avg",
-        staticBarColor: overwriteConfig.staticBarColor ?? undefined,
-        staticDataSource: list(2),
-        staticXAttribute: xAttribute,
-        staticYAttribute: yAttribute
+        ...basicSeries,
+        staticBarColor: overwriteConfig.staticBarColor ?? undefined
     };
 }