diff --git a/package.json b/package.json index cd6f7ca32d..2c82f604d5 100644 --- a/package.json +++ b/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", diff --git a/packages/pluggableWidgets/accordion-web/jest.config.js b/packages/pluggableWidgets/accordion-web/jest.config.js deleted file mode 100644 index 88999d5568..0000000000 --- a/packages/pluggableWidgets/accordion-web/jest.config.js +++ /dev/null @@ -1,3 +0,0 @@ -module.exports = { - ...require("@mendix/pluggable-widgets-tools/test-config/jest.enzyme-free.config.js") -}; diff --git a/packages/pluggableWidgets/accordion-web/package.json b/packages/pluggableWidgets/accordion-web/package.json index eaf5cab10d..57935a10c2 100644 --- a/packages/pluggableWidgets/accordion-web/package.json +++ b/packages/pluggableWidgets/accordion-web/package.json @@ -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" }, diff --git a/packages/pluggableWidgets/badge-button-web/jest.config.js b/packages/pluggableWidgets/badge-button-web/jest.config.js deleted file mode 100644 index 88999d5568..0000000000 --- a/packages/pluggableWidgets/badge-button-web/jest.config.js +++ /dev/null @@ -1,3 +0,0 @@ -module.exports = { - ...require("@mendix/pluggable-widgets-tools/test-config/jest.enzyme-free.config.js") -}; diff --git a/packages/pluggableWidgets/badge-button-web/package.json b/packages/pluggableWidgets/badge-button-web/package.json index f173a39710..d9e2134526 100644 --- a/packages/pluggableWidgets/badge-button-web/package.json +++ b/packages/pluggableWidgets/badge-button-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" }, diff --git a/packages/pluggableWidgets/badge-web/jest.config.js b/packages/pluggableWidgets/badge-web/jest.config.js deleted file mode 100644 index 88999d5568..0000000000 --- a/packages/pluggableWidgets/badge-web/jest.config.js +++ /dev/null @@ -1,3 +0,0 @@ -module.exports = { - ...require("@mendix/pluggable-widgets-tools/test-config/jest.enzyme-free.config.js") -}; diff --git a/packages/pluggableWidgets/badge-web/package.json b/packages/pluggableWidgets/badge-web/package.json index 3132be6eae..988dad2d99 100644 --- a/packages/pluggableWidgets/badge-web/package.json +++ b/packages/pluggableWidgets/badge-web/package.json @@ -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" }, diff --git a/packages/pluggableWidgets/color-picker-web/jest.config.js b/packages/pluggableWidgets/color-picker-web/jest.config.js deleted file mode 100644 index 88999d5568..0000000000 --- a/packages/pluggableWidgets/color-picker-web/jest.config.js +++ /dev/null @@ -1,3 +0,0 @@ -module.exports = { - ...require("@mendix/pluggable-widgets-tools/test-config/jest.enzyme-free.config.js") -}; diff --git a/packages/pluggableWidgets/color-picker-web/package.json b/packages/pluggableWidgets/color-picker-web/package.json index eff8e4fa10..fbd37334b7 100644 --- a/packages/pluggableWidgets/color-picker-web/package.json +++ b/packages/pluggableWidgets/color-picker-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" }, diff --git a/packages/pluggableWidgets/column-chart-web/src/__tests__/ColumnChart.spec.tsx b/packages/pluggableWidgets/column-chart-web/src/__tests__/ColumnChart.spec.tsx index 3711545225..f4c1e3fd4a 100644 --- a/packages/pluggableWidgets/column-chart-web/src/__tests__/ColumnChart.spec.tsx +++ b/packages/pluggableWidgets/column-chart-web/src/__tests__/ColumnChart.spec.tsx @@ -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 { - const xAttribute = new ListAttributeValueBuilder().build(); - const getXAttributeMock = jest.fn(); - getXAttributeMock.mockReturnValueOnce(new EditableValueBuilder().withValue(new Big(1)).build()); - getXAttributeMock.mockReturnValueOnce(new EditableValueBuilder().withValue(new Big(2)).build()); - xAttribute.get = getXAttributeMock; - - const yAttribute = new ListAttributeValueBuilder().build(); - const getYAttributeMock = jest.fn(); - getYAttributeMock.mockReturnValueOnce(new EditableValueBuilder().withValue(new Big(3)).build()); - getYAttributeMock.mockReturnValueOnce(new EditableValueBuilder().withValue(new Big(6)).build()); - yAttribute.get = getYAttributeMock; +function setupBasicColumnSeries(overwriteConfig: Partial): 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 }; } diff --git a/packages/pluggableWidgets/combobox-web/jest.config.js b/packages/pluggableWidgets/combobox-web/jest.config.js deleted file mode 100644 index 88999d5568..0000000000 --- a/packages/pluggableWidgets/combobox-web/jest.config.js +++ /dev/null @@ -1,3 +0,0 @@ -module.exports = { - ...require("@mendix/pluggable-widgets-tools/test-config/jest.enzyme-free.config.js") -}; diff --git a/packages/pluggableWidgets/combobox-web/package.json b/packages/pluggableWidgets/combobox-web/package.json index 7e24b609f7..e27a28ca06 100644 --- a/packages/pluggableWidgets/combobox-web/package.json +++ b/packages/pluggableWidgets/combobox-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" }, diff --git a/packages/pluggableWidgets/datagrid-web/jest.config.js b/packages/pluggableWidgets/datagrid-web/jest.config.js index c2a5ad5aaa..22d837ab37 100644 --- a/packages/pluggableWidgets/datagrid-web/jest.config.js +++ b/packages/pluggableWidgets/datagrid-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. diff --git a/packages/pluggableWidgets/datagrid-web/src/components/__tests__/ColumnResizer.spec.tsx b/packages/pluggableWidgets/datagrid-web/src/components/__tests__/ColumnResizer.spec.tsx index fe449c54af..f9a638f1bc 100644 --- a/packages/pluggableWidgets/datagrid-web/src/components/__tests__/ColumnResizer.spec.tsx +++ b/packages/pluggableWidgets/datagrid-web/src/components/__tests__/ColumnResizer.spec.tsx @@ -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"; @@ -6,6 +7,6 @@ describe("Column Resizer", () => { it("renders the structure correctly", () => { const component = render(); - expect(component).toMatchSnapshot(); + expect(component.asFragment()).toMatchSnapshot(); }); }); diff --git a/packages/pluggableWidgets/datagrid-web/src/components/__tests__/Header.spec.tsx b/packages/pluggableWidgets/datagrid-web/src/components/__tests__/Header.spec.tsx index 6301000f63..f28832200d 100644 --- a/packages/pluggableWidgets/datagrid-web/src/components/__tests__/Header.spec.tsx +++ b/packages/pluggableWidgets/datagrid-web/src/components/__tests__/Header.spec.tsx @@ -1,6 +1,8 @@ -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"; @@ -8,81 +10,77 @@ describe("Header", () => { it("renders the structure correctly", () => { const component = render(
); - 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(
); - 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(
); - 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(
); - 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(
); - 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 = (
); - props.filterable = true; - - const component = render(
); + const component = render(
); - 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(
); + const button = component.getByRole("button"); - const component = shallow(
); - - 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(
); - 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(
); - expect(component).toMatchSnapshot(); + expect(component.asFragment()).toMatchSnapshot(); }); it("renders the structure correctly when value is empty", () => { @@ -112,7 +110,7 @@ describe("Header", () => { const component = render(
); - expect(component).toMatchSnapshot(); + expect(component.asFragment()).toMatchSnapshot(); }); }); @@ -120,11 +118,27 @@ 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, diff --git a/packages/pluggableWidgets/datagrid-web/src/components/__tests__/__snapshots__/ColumnResizer.spec.tsx.snap b/packages/pluggableWidgets/datagrid-web/src/components/__tests__/__snapshots__/ColumnResizer.spec.tsx.snap index 2e2f935f3b..84f264b322 100644 --- a/packages/pluggableWidgets/datagrid-web/src/components/__tests__/__snapshots__/ColumnResizer.spec.tsx.snap +++ b/packages/pluggableWidgets/datagrid-web/src/components/__tests__/__snapshots__/ColumnResizer.spec.tsx.snap @@ -1,12 +1,14 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP exports[`Column Resizer renders the structure correctly 1`] = ` -