[]: Migrate widgets to use enzyme-free command for unit tests (#1627)

Author: r0b1n

package.json

@@ -39,7 +39,7 @@
             ]
         },
         "overrides": {
-            "@mendix/pluggable-widgets-tools": "10.21.0",
+            "@mendix/pluggable-widgets-tools": "10.21.1",
             "react": "^18.0.0",
             "react-dom": "^18.0.0",
             "prettier": "3.5.3",

packages/pluggableWidgets/accordion-web/jest.config.js

@@ -38,7 +38,7 @@
         "publish-marketplace": "rui-publish-marketplace",
         "release": "pluggable-widgets-tools release:web",
         "start": "pluggable-widgets-tools start:server",
-        "test": "jest --projects jest.config.js",
+        "test": "pluggable-widgets-tools test:unit:web:enzyme-free",
         "update-changelog": "rui-update-changelog-widget",
         "verify": "rui-verify-package-format"
     },

packages/pluggableWidgets/accordion-web/package.json

@@ -37,7 +37,7 @@
         "publish-marketplace": "rui-publish-marketplace",
         "release": "cross-env MPKOUTPUT=BadgeButton.mpk pluggable-widgets-tools release:web",
         "start": "cross-env MPKOUTPUT=BadgeButton.mpk pluggable-widgets-tools start:server",
-        "test": "jest --projects jest.config.js",
+        "test": "pluggable-widgets-tools test:unit:web:enzyme-free",
         "update-changelog": "rui-update-changelog-widget",
         "verify": "rui-verify-package-format"
     },

packages/pluggableWidgets/badge-button-web/jest.config.js

@@ -37,7 +37,7 @@
         "publish-marketplace": "rui-publish-marketplace",
         "release": "cross-env MPKOUTPUT=Badge.mpk pluggable-widgets-tools release:web",
         "start": "cross-env MPKOUTPUT=Badge.mpk pluggable-widgets-tools start:server",
-        "test": "jest --projects jest.config.js",
+        "test": "pluggable-widgets-tools test:unit:web:enzyme-free",
         "update-changelog": "rui-update-changelog-widget",
         "verify": "rui-verify-package-format"
     },

packages/pluggableWidgets/badge-button-web/package.json

@@ -38,7 +38,7 @@
         "publish-marketplace": "rui-publish-marketplace",
         "release": "cross-env MPKOUTPUT=ColorPicker.mpk pluggable-widgets-tools release:web",
         "start": "cross-env MPKOUTPUT=ColorPicker.mpk pluggable-widgets-tools start:server",
-        "test": "jest --projects jest.config.js",
+        "test": "pluggable-widgets-tools test:unit:web:enzyme-free",
         "update-changelog": "rui-update-changelog-widget",
         "verify": "rui-verify-package-format"
     },

packages/pluggableWidgets/badge-web/jest.config.js

@@ -1,6 +1,5 @@
-import { ChartWidget } from "@mendix/shared-charts/main";
-import { EditableValueBuilder, ListAttributeValueBuilder, list, listExp } from "@mendix/widget-plugin-test-utils";
-import Big from "big.js";
+import { ChartWidget, setupBasicSeries } from "@mendix/shared-charts/main";
+import { listExpression } from "@mendix/widget-plugin-test-utils";
 import { render, RenderResult } from "@testing-library/react";
 import { createElement } from "react";
 import { ColumnChartContainerProps, SeriesType } from "../../typings/ColumnChartProps";
@@ -26,7 +25,7 @@ describe("The ColumnChart widget", () => {
                 name="column-chart-test"
                 class="column-chart-class"
                 barmode="group"
-                series={configs.map(setupBasicSeries)}
+                series={configs.map(setupBasicColumnSeries)}
                 showLegend={false}
                 widthUnit="percentage"
                 width={0}
@@ -58,7 +57,7 @@ describe("The ColumnChart widget", () => {
     });
 
     it("sets the bar color on the data series based on the barColor value", () => {
-        renderColumnChart([{ staticBarColor: listExp(() => "red") }, { staticBarColor: undefined }]);
+        renderColumnChart([{ staticBarColor: listExpression(() => "red") }, { staticBarColor: undefined }]);
 
         const mockCalls = (ChartWidget as jest.Mock).mock.calls;
         const lastCallProps = mockCalls[mockCalls.length - 1][0];
@@ -105,26 +104,11 @@ describe("The ColumnChart widget", () => {
     });
 });
 
-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 setupBasicColumnSeries(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
     };
 }

packages/pluggableWidgets/badge-web/package.json

@@ -42,7 +42,7 @@
         "publish-marketplace": "rui-publish-marketplace",
         "release": "pluggable-widgets-tools release:web",
         "start": "pluggable-widgets-tools start:server",
-        "test": "jest --projects jest.config.js",
+        "test": "pluggable-widgets-tools test:unit:web:enzyme-free",
         "update-changelog": "rui-update-changelog-widget",
         "verify": "rui-verify-package-format"
     },

packages/pluggableWidgets/color-picker-web/jest.config.js

@@ -1,5 +1,5 @@
 module.exports = {
-    ...require("@mendix/pluggable-widgets-tools/test-config/jest.config"),
+    ...require("@mendix/pluggable-widgets-tools/test-config/jest.enzyme-free.config.js"),
     /**
      * `nanoevents` package is ESM module and because ESM is not supported by Jest yet
      * we mark `nanoevents` as a module that should be transformed by ts-jest.

packages/pluggableWidgets/color-picker-web/package.json

@@ -1,4 +1,5 @@
-import { render } from "enzyme";
+import "@testing-library/jest-dom";
+import { render } from "@testing-library/react";
 import { createElement } from "react";
 import { ColumnResizer } from "../ColumnResizer";
 

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

@@ -1,88 +1,86 @@
-import { render, shallow } from "enzyme";
+import "@testing-library/jest-dom";
+import { render } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
 import { createElement } from "react";
-import { GridColumn } from "../../typings/GridColumn";
+import { GridColumn, ColumnId } from "../../typings/GridColumn";
 import { ColumnResizer } from "../ColumnResizer";
 import { Header, HeaderProps } from "../Header";
 
 describe("Header", () => {
     it("renders the structure correctly", () => {
         const component = render(<Header {...mockHeaderProps()} />);
 
-        expect(component).toMatchSnapshot();
+        expect(component.asFragment()).toMatchSnapshot();
     });
 
     it("renders the structure correctly when sortable", () => {
         const props = mockHeaderProps();
         props.column.canSort = true;
         props.sortable = true;
-
         const component = render(<Header {...props} />);
 
-        expect(component).toMatchSnapshot();
+        expect(component.asFragment()).toMatchSnapshot();
     });
 
     it("renders the structure correctly when resizable", () => {
         const props = mockHeaderProps();
         props.column.canResize = true;
         props.resizable = true;
-
         const component = render(<Header {...props} />);
 
-        expect(component).toMatchSnapshot();
+        expect(component.asFragment()).toMatchSnapshot();
     });
 
     it("renders the structure correctly when draggable", () => {
         const props = mockHeaderProps();
         props.column.canDrag = true;
         props.draggable = true;
-
         const component = render(<Header {...props} />);
 
-        expect(component).toMatchSnapshot();
+        expect(component.asFragment()).toMatchSnapshot();
     });
 
     it("renders the structure correctly when filterable with no custom filter", () => {
         const props = mockHeaderProps();
         props.filterable = true;
-
         const component = render(<Header {...props} />);
 
-        expect(component).toMatchSnapshot();
+        expect(component.asFragment()).toMatchSnapshot();
     });
 
     it("renders the structure correctly when filterable with custom filter", () => {
         const props = mockHeaderProps();
-        const filterWidget = (
+        props.filterable = true;
+        props.filterWidget = (
             <div>
                 <label>Date picker filter</label>
                 <input type="date" />
             </div>
         );
-        props.filterable = true;
-
-        const component = render(<Header {...props} filterWidget={filterWidget} />);
+        const component = render(<Header {...props} />);
 
-        expect(component).toMatchSnapshot();
+        expect(component.asFragment()).toMatchSnapshot();
     });
 
-    it("calls setSortBy store function with correct parameters when sortable", () => {
+    it("calls setSortBy store function with correct parameters when sortable", async () => {
+        const user = userEvent.setup();
         const mockedFunction = jest.fn();
-        const column = {
-            columnId: "0",
+        const props = mockHeaderProps();
+        props.sortable = true;
+        props.column = {
+            ...props.column,
+            columnId: "0" as ColumnId,
             columnNumber: 0,
             header: "My sortable column",
             canSort: true,
             sortDir: undefined,
             toggleSort: mockedFunction
         } as any;
+        const component = render(<Header {...props} />);
+        const button = component.getByRole("button");
 
-        const component = shallow(<Header {...mockHeaderProps()} column={column} sortable />);
-
-        const clickableRegion = component.find(".column-header");
-
-        expect(clickableRegion).toHaveLength(1);
-
-        clickableRegion.simulate("click");
+        expect(button).toBeInTheDocument();
+        await user.click(button);
         expect(mockedFunction).toHaveBeenCalled();
     });
 
@@ -92,7 +90,7 @@ describe("Header", () => {
 
         const component = render(<Header {...props} className="my-custom-class" />);
 
-        expect(component).toMatchSnapshot();
+        expect(component.asFragment()).toMatchSnapshot();
     });
 
     it("renders the structure correctly when is hidden and preview", () => {
@@ -103,7 +101,7 @@ describe("Header", () => {
 
         const component = render(<Header {...props} />);
 
-        expect(component).toMatchSnapshot();
+        expect(component.asFragment()).toMatchSnapshot();
     });
 
     it("renders the structure correctly when value is empty", () => {
@@ -112,19 +110,35 @@ describe("Header", () => {
 
         const component = render(<Header {...props} />);
 
-        expect(component).toMatchSnapshot();
+        expect(component.asFragment()).toMatchSnapshot();
     });
 });
 
 function mockHeaderProps(): HeaderProps {
     return {
         gridId: "dg1",
         column: {
-            columnId: "dg1-column0",
+            columnId: "dg1-column0" as ColumnId,
             columnIndex: 0,
             header: "Test",
             sortDir: undefined,
-            toggleSort: () => undefined
+            toggleSort: () => undefined,
+            setHeaderElementRef: jest.fn(),
+            alignment: "left",
+            canDrag: false,
+            columnClass: () => undefined,
+            initiallyHidden: false,
+            renderCellContent: () => createElement("div"),
+            isAvailable: true,
+            wrapText: false,
+            canHide: false,
+            isHidden: false,
+            toggleHidden: () => undefined,
+            canSort: false,
+            canResize: false,
+            size: undefined,
+            setSize: () => undefined,
+            getCssWidth: () => "100px"
         } as GridColumn,
         draggable: false,
         dropTarget: undefined,