[MOO-2429]: Add style contract tests

packages/pluggableWidgets/background-gradient-native/src/__tests__/backgroundGradient.spec.tsx

@@ -3,6 +3,7 @@ import { render, fireEvent } from "@testing-library/react-native";
 import Big from "big.js";
 import { ActionValue } from "mendix";
 import { BackgroundGradient, props } from "../BackgroundGradient";
+import defaultStyle from "../ui/Styles";
 
 describe("Background gradient", () => {
     let defaultProps: props;
@@ -110,4 +111,9 @@ describe("Background gradient", () => {
         fireEvent.press(pressable);
         expect(actionExecution).toHaveBeenCalled();
     });
+
+    it("preserves expected style key set", () => {
+        const keys = Object.keys(defaultStyle).sort();
+        expect(keys).toEqual(["angle", "colorList", "container", "opacity"]);
+    });
 });

packages/pluggableWidgets/bar-chart-native/src/ui/Styles.ts

@@ -93,6 +93,9 @@ export const defaultBarChartStyle: BarChartStyle = {
             alignSelf: "center"
         }
     },
+    yAxis: {},
+    domain: {},
+    bars: {},
     legend: {
         container: {
             flexDirection: "row",

packages/pluggableWidgets/bar-chart-native/src/utils/__tests__/StyleUtils.spec.ts

@@ -1,5 +1,5 @@
 import { aggregateGridPadding, mapToAxisStyle, mapToGridStyle, mapToBarStyles } from "../StyleUtils";
-import { BarChartAxisStyle, BarChartGridStyle, BarChartStyle } from "../../ui/Styles";
+import { BarChartAxisStyle, BarChartGridStyle, BarChartStyle, defaultBarChartStyle } from "../../ui/Styles";
 
 describe("StyleMappers", () => {
     describe("mapToGridStyle", () => {
@@ -210,3 +210,20 @@ describe("aggregateGridPadding", () => {
         expect(aggregateGridPadding(undefined)).toBeUndefined();
     });
 });
+
+describe("Style schema guardrail", () => {
+    it("preserves expected style key set", () => {
+        const keys = Object.keys(defaultBarChartStyle).sort();
+        expect(keys).toEqual([
+            "bars",
+            "chart",
+            "container",
+            "domain",
+            "errorMessage",
+            "grid",
+            "legend",
+            "xAxis",
+            "yAxis"
+        ]);
+    });
+});

packages/pluggableWidgets/barcode-scanner-native/src/__tests__/BarcodeScanner.spec.tsx

@@ -3,6 +3,7 @@ import { actionValue, EditableValueBuilder } from "@mendix/piw-utils-internal";
 import { render } from "@testing-library/react-native";
 import { View } from "react-native";
 import { BarcodeScanner, Props } from "../BarcodeScanner";
+import { defaultBarcodeScannerStyle } from "../ui/styles";
 
 let mockOnCodeScanned: ((codes: Array<{ value: string }>) => void) | undefined;
 
@@ -68,4 +69,14 @@ describe("BarcodeScanner", () => {
         expect(defaultProps.barcode.setValue).toHaveBeenCalledWith("value1");
         expect(onDetectAction.execute).toHaveBeenCalledTimes(2);
     });
+
+    it("preserves expected style key set", () => {
+        const keys = Object.keys(defaultBarcodeScannerStyle).sort();
+        expect(keys).toEqual(["container", "mask"]);
+    });
+
+    it("preserves expected mask style key set", () => {
+        const keys = Object.keys(defaultBarcodeScannerStyle.mask).sort();
+        expect(keys).toEqual(["backgroundColor", "color"]);
+    });
 });

packages/pluggableWidgets/carousel-native/src/__tests__/Carousel.spec.tsx

@@ -1,5 +1,5 @@
 import { CarouselProps } from "../../typings/CarouselProps";
-import { CarouselStyle } from "../ui/styles";
+import { CarouselStyle, defaultCarouselStyle } from "../ui/styles";
 import { render } from "@testing-library/react-native";
 import { Text, View } from "react-native";
 import { buildWidgetValue, ListValueBuilder } from "@mendix/piw-utils-internal";
@@ -47,4 +47,9 @@ describe("Carousel", () => {
     //     };
     //     expect(render(<Carousel {...props} />).toJSON()).toMatchSnapshot();
     // });
+
+    it("preserves expected style key set", () => {
+        const keys = Object.keys(defaultCarouselStyle).sort();
+        expect(keys).toEqual(["cardLayout", "container", "fullWidthLayout"]);
+    });
 });

packages/pluggableWidgets/color-picker-native/src/__tests__/ColorPicker.spec.tsx

@@ -4,6 +4,7 @@ import Slider from "react-native-slider";
 import { fireEvent, render, RenderAPI } from "@testing-library/react-native";
 import { ReactTestInstance } from "react-test-renderer";
 import { ColorPicker, Props } from "../ColorPicker";
+import { defaultColorPickerStyle } from "../ui/Styles";
 
 describe("Color Picker", () => {
     let defaultProps: Props;
@@ -177,6 +178,11 @@ describe("Color Picker", () => {
     function getSliders(component: RenderAPI): ReactTestInstance[] {
         return component.UNSAFE_getAllByType(Slider);
     }
+
+    it("preserves expected style key set", () => {
+        const keys = Object.keys(defaultColorPickerStyle).sort();
+        expect(keys).toEqual(["container", "preview"]);
+    });
 });
 
 function responderMove(dx: number): any {

packages/pluggableWidgets/column-chart-native/src/ui/Styles.ts

@@ -82,11 +82,15 @@ export const defaultColumnChartStyle: ColumnChartStyle = {
     chart: {
         flex: 1
     },
+    grid: {},
     xAxis: {
         label: {
             alignSelf: "center"
         }
     },
+    yAxis: {},
+    domain: {},
+    columns: {},
     legend: {
         container: {
             flexDirection: "row",

packages/pluggableWidgets/column-chart-native/src/utils/__tests__/StyleUtils.spec.ts

@@ -1,5 +1,5 @@
 import { aggregateGridPadding, mapToAxisStyle, mapToGridStyle, mapToColumnStyles } from "../StyleUtils";
-import { ColumnChartAxisStyle, ColumnChartGridStyle, ColumnChartStyle } from "../../ui/Styles";
+import { ColumnChartAxisStyle, ColumnChartGridStyle, ColumnChartStyle, defaultColumnChartStyle } from "../../ui/Styles";
 
 describe("StyleMappers", () => {
     describe("mapToGridStyle", () => {
@@ -210,3 +210,20 @@ describe("aggregateGridPadding", () => {
         expect(aggregateGridPadding(undefined)).toBeUndefined();
     });
 });
+
+describe("Style schema guardrail", () => {
+    it("preserves expected style key set", () => {
+        const keys = Object.keys(defaultColumnChartStyle).sort();
+        expect(keys).toEqual([
+            "chart",
+            "columns",
+            "container",
+            "domain",
+            "errorMessage",
+            "grid",
+            "legend",
+            "xAxis",
+            "yAxis"
+        ]);
+    });
+});

packages/pluggableWidgets/feedback-native/src/__tests__/Feedback.spec.tsx

@@ -1,4 +1,4 @@
-import { FeedbackStyle } from "../ui/styles";
+import { FeedbackStyle, defaultFeedbackStyle } from "../ui/styles";
 import { render, cleanup, fireEvent, waitFor } from "@testing-library/react-native";
 import { FeedbackProps } from "../../typings/FeedbackProps";
 import { Feedback } from "../Feedback";
@@ -95,4 +95,19 @@ describe("Feedback", () => {
         expect(typeof body.metadata.screenWidth).toBe("number");
         expect(typeof body.metadata.screenHeight).toBe("number");
     }, 15000);
+
+    it("preserves expected style key set", () => {
+        const keys = Object.keys(defaultFeedbackStyle).sort();
+        expect(keys).toEqual([
+            "activityIndicator",
+            "button",
+            "buttonDisabled",
+            "dialog",
+            "floatingButton",
+            "switchInput",
+            "switchLabel",
+            "textAreaInput",
+            "title"
+        ]);
+    });
 });

packages/pluggableWidgets/line-chart-native/src/ui/Styles.ts

@@ -89,6 +89,8 @@ export const defaultLineChartStyle: LineChartStyle = {
             alignSelf: "center"
         }
     },
+    yAxis: {},
+    lines: {},
     legend: {
         container: {
             flexDirection: "row",

packages/pluggableWidgets/line-chart-native/src/utils/__tests__/StyleUtils.spec.ts

@@ -1,5 +1,5 @@
 import { aggregateGridPadding, mapToAxisStyle, mapToGridStyle, mapToLineStyle, mapToMarkerStyle } from "../StyleUtils";
-import { LineChartAxisStyle, LineChartGridStyle, LineChartLineStyle } from "../../ui/Styles";
+import { LineChartAxisStyle, LineChartGridStyle, LineChartLineStyle, defaultLineChartStyle } from "../../ui/Styles";
 
 describe("StyleMappers", () => {
     describe("mapToGridStyle", () => {
@@ -183,3 +183,10 @@ describe("aggregateGridPadding", () => {
         expect(aggregateGridPadding(undefined)).toBeUndefined();
     });
 });
+
+describe("Style schema guardrail", () => {
+    it("preserves expected style key set", () => {
+        const keys = Object.keys(defaultLineChartStyle).sort();
+        expect(keys).toEqual(["chart", "container", "errorMessage", "grid", "legend", "lines", "xAxis", "yAxis"]);
+    });
+});

packages/pluggableWidgets/pie-doughnut-chart-native/src/__tests__/PieDoughnutChart.spec.tsx

@@ -334,6 +334,19 @@ describe("PieDoughnutChart", () => {
             });
         });
     });
+
+    it("preserves expected style key set", () => {
+        const keys = Object.keys(defaultStyle).sort();
+        expect(keys).toEqual(["container", "slices"]);
+    });
+
+    it("preserves expected slices.customStyles entry key set", () => {
+        const entry: NonNullable<NonNullable<ChartStyle["slices"]>["customStyles"]>[string] = {
+            slice: {},
+            label: {}
+        };
+        expect(Object.keys(entry).sort()).toEqual(["label", "slice"]);
+    });
 });
 
 function createProps(opts: Partial<PieDoughnutChartProps<ChartStyle>> = {}): PieDoughnutChartProps<ChartStyle> {

packages/pluggableWidgets/popup-menu-native/src/__tests__/PopupMenu.spec.tsx

@@ -1,5 +1,5 @@
 import { PopupMenuProps } from "../../typings/PopupMenuProps";
-import { PopupMenuStyle } from "../ui/Styles";
+import { defaultPopupMenuStyle, PopupMenuStyle } from "../ui/Styles";
 import { Text, View } from "react-native";
 import { actionValue } from "@mendix/piw-utils-internal";
 import { act, fireEvent, render, within } from "@testing-library/react-native";
@@ -145,4 +145,30 @@ describe("Popup menu", () => {
             expect(within(secondView).getByText("Yolo")).not.toBeNull();
         });
     });
+
+    describe("Style schema guardrail", () => {
+        it("preserves expected style key set", () => {
+            const keys = Object.keys(defaultPopupMenuStyle).sort();
+            expect(keys).toEqual(["basic", "buttonContainer", "container", "custom"]);
+        });
+
+        it("preserves expected basic.itemStyle key set", () => {
+            const itemStyle: NonNullable<PopupMenuStyle["basic"]>["itemStyle"] = {
+                rippleColor: "",
+                ellipsizeMode: "tail",
+                defaultStyle: {},
+                primaryStyle: {},
+                dangerStyle: {},
+                customStyle: {}
+            };
+            expect(Object.keys(itemStyle).sort()).toEqual([
+                "customStyle",
+                "dangerStyle",
+                "defaultStyle",
+                "ellipsizeMode",
+                "primaryStyle",
+                "rippleColor"
+            ]);
+        });
+    });
 });

packages/pluggableWidgets/popup-menu-native/src/ui/Styles.ts

@@ -7,6 +7,13 @@ export interface PopupMenuStyle {
     buttonContainer?: ViewStyle;
 }
 
+export const defaultPopupMenuStyle: PopupMenuStyle = {
+    container: {},
+    basic: {},
+    custom: {},
+    buttonContainer: {}
+};
+
 export interface CustomItemStyle extends ViewStyle {
     container?: ViewStyle;
     itemStyle?: { rippleColor?: string };

packages/pluggableWidgets/progress-bar-native/src/__tests__/ProgressBar.spec.tsx

@@ -5,6 +5,7 @@ import { Bar } from "react-native-progress";
 import { render } from "@testing-library/react-native";
 
 import { ProgressBar, Props } from "../ProgressBar";
+import { defaultProgressBarStyle } from "../ui/Styles";
 
 describe("ProgressBar", () => {
     it("renders", () => {
@@ -45,6 +46,16 @@ describe("ProgressBar", () => {
         expect(component.UNSAFE_getByType(Bar).props.progress).toBe(0.7);
         expect(component.UNSAFE_queryByType(Text)).toBeNull();
     });
+
+    it("preserves expected style key set", () => {
+        const keys = Object.keys(defaultProgressBarStyle).sort();
+        expect(keys).toEqual(["bar", "container", "fill", "validationMessage"]);
+    });
+
+    it("preserves expected fill style key set", () => {
+        const keys = Object.keys(defaultProgressBarStyle.fill).sort();
+        expect(keys).toEqual(["backgroundColor"]);
+    });
 });
 
 function createProps(progressValue?: number, minimumValue?: number, maximumValue?: number): Props {

packages/pluggableWidgets/progress-circle-native/src/__tests__/ProgressCircle.spec.tsx

@@ -5,6 +5,7 @@ import { Circle } from "react-native-progress";
 import { render } from "@testing-library/react-native";
 
 import { ProgressCircle, Props } from "../ProgressCircle";
+import { defaultProgressCircleStyle } from "../ui/Styles";
 
 describe("ProgressCircle", () => {
     it("renders", () => {
@@ -80,6 +81,21 @@ No current value provided.`
         const component = render(<ProgressCircle {...createProps(50, 0, 100)} circleText={"none"} />);
         expect(component.UNSAFE_queryByType(Text)).toBeNull();
     });
+
+    it("preserves expected style key set", () => {
+        const keys = Object.keys(defaultProgressCircleStyle).sort();
+        expect(keys).toEqual(["circle", "container", "fill", "text", "validationMessage"]);
+    });
+
+    it("preserves expected fill style key set", () => {
+        const keys = Object.keys(defaultProgressCircleStyle.fill).sort();
+        expect(keys).toEqual(["backgroundColor", "lineCapRounded", "width"]);
+    });
+
+    it("preserves expected circle style key set", () => {
+        const keys = Object.keys(defaultProgressCircleStyle.circle).sort();
+        expect(keys).toEqual(["borderColor", "borderWidth", "size"]);
+    });
 });
 
 function createProps(progressValue?: number, minimumValue?: number, maximumValue?: number): Props {

packages/pluggableWidgets/toggle-buttons-native/src/__tests__/ToggleButtons.spec.tsx

@@ -3,6 +3,7 @@ import { Text } from "react-native";
 import { fireEvent, render } from "@testing-library/react-native";
 
 import { Props, ToggleButtons } from "../ToggleButtons";
+import { defaultToggleButtonsStyle } from "../ui/Styles";
 
 describe("ToggleButtons", () => {
     let defaultProps: Props;
@@ -68,4 +69,17 @@ describe("ToggleButtons", () => {
 
         expect(defaultProps.enum.setValue).not.toHaveBeenCalled();
     });
+
+    it("preserves expected style key set", () => {
+        const keys = Object.keys(defaultToggleButtonsStyle).sort();
+        expect(keys).toEqual([
+            "activeButton",
+            "activeButtonText",
+            "button",
+            "container",
+            "containerDisabled",
+            "text",
+            "validationMessage"
+        ]);
+    });
 });