feat: migrate on new test utils

Author: iobuhov

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

@@ -1,13 +1,7 @@
 import { ChartWidget } from "@mendix/shared-charts/common";
-import {
-    dynamicValue,
-    EditableValueBuilder,
-    ListAttributeValueBuilder,
-    ListValueBuilder
-} from "@mendix/widget-plugin-test-utils";
+import { list, listExp, EditableValueBuilder, ListAttributeValueBuilder } from "@mendix/widget-plugin-test-utils";
 import Big from "big.js";
 import { mount, ReactWrapper } from "enzyme";
-import { ListExpressionValue } from "mendix";
 import { createElement } from "react";
 import { SeriesType } from "../../typings/AreaChartProps";
 import { AreaChart } from "../AreaChart";
@@ -61,23 +55,29 @@ describe("The AreaChart widget", () => {
     });
 
     it("sets the line color on the data series based on the lineColor value", () => {
-        const areaChart = renderAreaChart([{ staticLineColor: exp("red") }, { staticLineColor: undefined }]);
+        const areaChart = renderAreaChart([{ staticLineColor: listExp(() => "red") }, { staticLineColor: undefined }]);
         const data = areaChart.find(ChartWidget).prop("data");
         expect(data).toHaveLength(2);
         expect(data[0]).toHaveProperty("line.color", "red");
         expect(data[1]).toHaveProperty("line.color", undefined);
     });
 
     it("sets the marker color on the data series based on the markerColor value", () => {
-        const areaChart = renderAreaChart([{ staticMarkerColor: undefined }, { staticMarkerColor: exp("blue") }]);
+        const areaChart = renderAreaChart([
+            { staticMarkerColor: undefined },
+            { staticMarkerColor: listExp(() => "blue") }
+        ]);
         const data = areaChart.find(ChartWidget).prop("data");
         expect(data).toHaveLength(2);
         expect(data[0]).toHaveProperty("marker.color", undefined);
         expect(data[1]).toHaveProperty("marker.color", "blue");
     });
 
     it("sets the area color on the data series based on the fillcolor value", () => {
-        const areaChart = renderAreaChart([{ staticFillColor: undefined }, { staticFillColor: exp("#393393") }]);
+        const areaChart = renderAreaChart([
+            { staticFillColor: undefined },
+            { staticFillColor: listExp(() => "#393393") }
+        ]);
         const data = areaChart.find(ChartWidget).prop("data");
         expect(data).toHaveLength(2);
         expect(data[0]).toHaveProperty("fillcolor", undefined);
@@ -127,12 +127,8 @@ function setupBasicSeries(overwriteConfig: Partial<SeriesType>): SeriesType {
         staticLineColor: overwriteConfig.staticLineColor ?? undefined,
         staticMarkerColor: overwriteConfig.staticMarkerColor ?? undefined,
         staticFillColor: overwriteConfig.staticFillColor ?? undefined,
-        staticDataSource: ListValueBuilder().simple(),
+        staticDataSource: list(2),
         staticXAttribute: xAttribute,
         staticYAttribute: yAttribute
     };
 }
-
-function exp(value: string): ListExpressionValue<string> {
-    return { get: () => dynamicValue(value) } as unknown as ListExpressionValue<string>;
-}

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

@@ -1,13 +1,7 @@
 import { ChartWidget } from "@mendix/shared-charts/common";
-import {
-    dynamicValue,
-    EditableValueBuilder,
-    ListAttributeValueBuilder,
-    ListValueBuilder
-} from "@mendix/widget-plugin-test-utils";
+import { EditableValueBuilder, ListAttributeValueBuilder, listExp, list } from "@mendix/widget-plugin-test-utils";
 import Big from "big.js";
 import { mount, ReactWrapper } from "enzyme";
-import { ListExpressionValue } from "mendix";
 import { createElement } from "react";
 import { SeriesType } from "../../typings/BarChartProps";
 import { BarChart } from "../BarChart";
@@ -45,7 +39,7 @@ describe("The BarChart widget", () => {
     });
 
     it("sets the bar color on the data series based on the barColor value", () => {
-        const barChart = renderBarChart([{ staticBarColor: exp("red") }, { staticBarColor: undefined }]);
+        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");
@@ -91,12 +85,8 @@ function setupBasicSeries(overwriteConfig: Partial<SeriesType>): SeriesType {
         customSeriesOptions: overwriteConfig.customSeriesOptions ?? "",
         aggregationType: overwriteConfig.aggregationType ?? "avg",
         staticBarColor: overwriteConfig.staticBarColor ?? undefined,
-        staticDataSource: ListValueBuilder().simple(),
+        staticDataSource: list(2),
         staticXAttribute: xAttribute,
         staticYAttribute: yAttribute
     };
 }
-
-function exp(value: string): ListExpressionValue<string> {
-    return { get: () => dynamicValue(value) } as unknown as ListExpressionValue<string>;
-}

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

@@ -1,13 +1,7 @@
 import { ChartWidget } from "@mendix/shared-charts/common";
-import {
-    EditableValueBuilder,
-    ListAttributeValueBuilder,
-    ListValueBuilder,
-    dynamicValue
-} from "@mendix/widget-plugin-test-utils";
+import { EditableValueBuilder, ListAttributeValueBuilder, list, listExp } from "@mendix/widget-plugin-test-utils";
 import Big from "big.js";
 import { ReactWrapper, mount } from "enzyme";
-import { ListExpressionValue } from "mendix";
 import { createElement } from "react";
 import { LinesType } from "../../typings/BubbleChartProps";
 import { BubbleChart } from "../BubbleChart";
@@ -45,7 +39,10 @@ describe("The Bubble widget", () => {
     });
 
     it("sets the marker color on the data series based on the markerColor value", () => {
-        const bubbleChart = renderBubbleChart([{ staticMarkerColor: exp("red") }, { staticMarkerColor: undefined }]);
+        const bubbleChart = renderBubbleChart([
+            { staticMarkerColor: listExp(() => "red") },
+            { staticMarkerColor: undefined }
+        ]);
         const data = bubbleChart.find(ChartWidget).prop("data");
         expect(data).toHaveLength(2);
         expect(data[0]).toHaveProperty("marker.color", "red");
@@ -91,14 +88,10 @@ function setupBasicSeries(overwriteConfig: Partial<LinesType>): LinesType {
         customSeriesOptions: overwriteConfig.customSeriesOptions ?? "",
         aggregationType: overwriteConfig.aggregationType ?? "avg",
         staticMarkerColor: overwriteConfig.staticMarkerColor ?? undefined,
-        staticDataSource: ListValueBuilder().simple(),
+        staticDataSource: list(2),
         staticXAttribute: xAttribute,
         staticYAttribute: yAttribute,
         autosize: true,
         sizeref: 10
     };
 }
-
-function exp(value: string): ListExpressionValue<string> {
-    return { get: () => dynamicValue(value) } as unknown as ListExpressionValue<string>;
-}

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

@@ -1,13 +1,7 @@
 import { ChartWidget } from "@mendix/shared-charts/common";
-import {
-    dynamicValue,
-    EditableValueBuilder,
-    ListAttributeValueBuilder,
-    ListValueBuilder
-} from "@mendix/widget-plugin-test-utils";
+import { EditableValueBuilder, ListAttributeValueBuilder, list, listExp } from "@mendix/widget-plugin-test-utils";
 import Big from "big.js";
 import { mount, ReactWrapper } from "enzyme";
-import { ListExpressionValue } from "mendix";
 import { createElement } from "react";
 import { ColumnChartContainerProps, SeriesType } from "../../typings/ColumnChartProps";
 import { ColumnChart } from "../ColumnChart";
@@ -49,7 +43,10 @@ describe("The ColumnChart widget", () => {
     });
 
     it("sets the bar color on the data series based on the barColor value", () => {
-        const columnChart = renderColumnChart([{ staticBarColor: exp("red") }, { staticBarColor: undefined }]);
+        const columnChart = renderColumnChart([
+            { staticBarColor: listExp(() => "red") },
+            { staticBarColor: undefined }
+        ]);
         const data = columnChart.find(ChartWidget).prop("data");
         expect(data).toHaveLength(2);
         expect(data[0]).toHaveProperty("marker.color", "red");
@@ -101,12 +98,8 @@ function setupBasicSeries(overwriteConfig: Partial<SeriesType>): SeriesType {
         customSeriesOptions: overwriteConfig.customSeriesOptions ?? "",
         aggregationType: overwriteConfig.aggregationType ?? "avg",
         staticBarColor: overwriteConfig.staticBarColor ?? undefined,
-        staticDataSource: ListValueBuilder().simple(),
+        staticDataSource: list(2),
         staticXAttribute: xAttribute,
         staticYAttribute: yAttribute
     };
 }
-
-function exp(value: string): ListExpressionValue<string> {
-    return { get: () => dynamicValue(value) } as unknown as ListExpressionValue<string>;
-}

packages/pluggableWidgets/combobox-web/src/__tests__/MultiSelection.spec.tsx

@@ -1,15 +1,16 @@
 import {
-    dynamicValue,
+    dynamic,
     EditableValueBuilder,
     ListAttributeValueBuilder,
-    ListValueBuilder,
     ReferenceSetValueBuilder,
-    listExp
+    listExp,
+    obj,
+    ListValueBuilder
 } from "@mendix/widget-plugin-test-utils";
 import "./__mocks__/intersectionObserverMock";
 import "@testing-library/jest-dom";
 import { fireEvent, render, RenderResult, waitFor } from "@testing-library/react";
-import { ObjectItem, DynamicValue, ListValue } from "mendix";
+import { ListValue } from "mendix";
 import { createElement } from "react";
 import { ComboboxContainerProps, OptionsSourceAssociationCaptionTypeEnum } from "../../typings/ComboboxProps";
 import Combobox from "../Combobox";
@@ -26,64 +27,56 @@ describe("Combo box (Association)", () => {
             id: "comboBox1",
             source: "context",
             optionsSourceType: "association",
-            attributeAssociation: new ReferenceSetValueBuilder().withValue([{ id: "111" }] as ObjectItem[]).build(),
+            attributeAssociation: new ReferenceSetValueBuilder().withValue([obj("111")]).build(),
             attributeEnumeration: new EditableValueBuilder<string>().build(),
             attributeBoolean: new EditableValueBuilder<boolean>().build(),
-            optionsSourceAssociationDataSource: ListValueBuilder().withItems([
-                { id: "111" },
-                { id: "222" },
-                { id: "333" },
-                { id: "444" }
-            ] as ObjectItem[]),
+            optionsSourceAssociationDataSource: new ListValueBuilder()
+                .withItems([obj("111"), obj("222"), obj("333"), obj("444")])
+                .build(),
             optionsSourceAssociationCaptionType: "expression",
             optionsSourceAssociationCaptionAttribute: new ListAttributeValueBuilder<string>().build(),
             optionsSourceAssociationCaptionExpression: listExp(() => "$currentObject/CountryName"),
             optionsSourceAssociationCustomContentType: "no",
             optionsSourceAssociationCustomContent: undefined,
-            emptyOptionText: dynamicValue("Select an option 111"),
+            emptyOptionText: dynamic("Select an option 111"),
             ariaRequired: true,
             clearable: true,
             filterType: "contains",
             selectedItemsStyle: "text",
             readOnlyStyle: "bordered",
             lazyLoading: false,
             loadingType: "spinner",
-            noOptionsText: dynamicValue("no options found"),
-            clearButtonAriaLabel: dynamicValue("Clear selection"),
-            removeValueAriaLabel: dynamicValue("Remove value"),
+            noOptionsText: dynamic("no options found"),
+            clearButtonAriaLabel: dynamic("Clear selection"),
+            removeValueAriaLabel: dynamic("Remove value"),
             selectAllButton: true, // Causes +1 option to be added to the menu
-            selectAllButtonCaption: dynamicValue("Select All"),
+            selectAllButtonCaption: dynamic("Select All"),
             selectionMethod: "checkbox",
-            a11ySelectedValue: dynamicValue("Selected value:"),
-            a11yOptionsAvailable: dynamicValue("Options available:"),
-            a11yInstructions: dynamicValue("a11yInstructions"),
+            a11ySelectedValue: dynamic("Selected value:"),
+            a11yOptionsAvailable: dynamic("Options available:"),
+            a11yInstructions: dynamic("a11yInstructions"),
             showFooter: false,
             databaseAttributeString: new EditableValueBuilder<string | Big>().build(),
             optionsSourceDatabaseCaptionType: "attribute",
-            optionsSourceDatabaseDefaultValue: dynamicValue("empty value"),
+            optionsSourceDatabaseDefaultValue: dynamic("empty value"),
             optionsSourceDatabaseCustomContentType: "yes",
             staticDataSourceCustomContentType: "no",
             staticAttribute: new EditableValueBuilder<string>().build(),
             optionsSourceStaticDataSource: [
                 {
-                    staticDataSourceValue: dynamicValue("value1"),
+                    staticDataSourceValue: dynamic("value1"),
                     staticDataSourceCustomContent: undefined,
-                    staticDataSourceCaption: dynamicValue("caption1")
+                    staticDataSourceCaption: dynamic("caption1")
                 },
                 {
-                    staticDataSourceValue: dynamicValue("value2"),
+                    staticDataSourceValue: dynamic("value2"),
                     staticDataSourceCustomContent: undefined,
-                    staticDataSourceCaption: dynamicValue("caption2")
+                    staticDataSourceCaption: dynamic("caption2")
                 }
             ]
         };
         if (defaultProps.optionsSourceAssociationCaptionType === "expression") {
-            defaultProps.optionsSourceAssociationCaptionExpression!.get = i => {
-                return {
-                    value: `${i.id}`,
-                    status: "available"
-                } as DynamicValue<string>;
-            };
+            defaultProps.optionsSourceAssociationCaptionExpression!.get = i => dynamic(`${i.id}`);
         }
     });
 
@@ -127,10 +120,10 @@ describe("Combo box (Association)", () => {
         waitFor(() => {
             expect(component.queryAllByRole("option")).toHaveLength(4);
         });
-        const option1 = await component.findByText("222");
+        const option1 = await component.findByText("obj_222");
         fireEvent.click(option1);
         expect(defaultProps.attributeAssociation?.setValue).toHaveBeenCalled();
-        expect(defaultProps.attributeAssociation?.value).toEqual([{ id: "111" }, { id: "222" }]);
+        expect(defaultProps.attributeAssociation?.value).toEqual([{ id: "obj_111" }, { id: "obj_222" }]);
     });
     it("removes selected item", async () => {
         const component = render(<Combobox {...defaultProps} />);
@@ -139,10 +132,10 @@ describe("Combo box (Association)", () => {
         await waitFor(() => {
             expect(component.queryAllByRole("option")).toHaveLength(4);
         });
-        const option1 = await component.findByText("222");
+        const option1 = await component.findByText("obj_222");
         fireEvent.click(option1);
         expect(defaultProps.attributeAssociation?.setValue).toHaveBeenCalled();
-        expect(defaultProps.attributeAssociation?.value).toEqual([{ id: "111" }, { id: "222" }]);
+        expect(defaultProps.attributeAssociation?.value).toEqual([{ id: "obj_111" }, { id: "obj_222" }]);
 
         const clearButton = await component.container.getElementsByClassName("widget-combobox-clear-button")[0];
         fireEvent.click(clearButton);