[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/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,10 @@ 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(["chart", "container", "errorMessage", "grid", "legend", "xAxis"]);
+    });
+});

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,9 @@ 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"]);
+    });
 });

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/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,10 @@ 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", "container", "errorMessage", "legend", "xAxis"]);
+    });
+});

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/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", "xAxis"]);
+    });
+});

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

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

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,11 @@ 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"]);
+    });
 });
 
 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,11 @@ 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"]);
+    });
 });
 
 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"
+        ]);
+    });
 });